/* ================================================================
   BROOKLYN FADE — Booking Form CSS v3
   Modern · Professional · Intuitive | Light & Dark mode
   ================================================================ */

/* ── Design tokens ── */
:root{
  --c-brand:#8B7355;
  --c-brand-h:#7A6347;
  --c-accent:#A69886;
  --c-bg:#FAF7F4;
  --c-surface:#FFFFFF;
  --c-surface-2:#F5F0EB;
  --c-text:#1C1917;
  --c-muted:#78716C;
  --c-border:#E7DDD4;
  --c-sel:#F0E8DF;
  --c-success:#5D8A65;
  --c-error:#B05555;
  --r-s:6px;--r-m:12px;--r-l:18px;--r-xl:24px;
  --sh-s:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-m:0 4px 14px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --sh-l:0 10px 36px rgba(0,0,0,.11),0 4px 10px rgba(0,0,0,.05);
  --tr:190ms ease
}

@media(prefers-color-scheme:dark){
  :root{
    --c-brand:#C4B5A5;
    --c-brand-h:#D5C5B5;
    --c-accent:#9A8B7C;
    --c-bg:#1A1614;
    --c-surface:#252120;
    --c-surface-2:#2D2926;
    --c-text:#EDE8E3;
    --c-muted:#A8A29E;
    --c-border:#3A3330;
    --c-sel:#2D2926;
    --sh-s:0 1px 3px rgba(0,0,0,.35);
    --sh-m:0 4px 14px rgba(0,0,0,.5);
    --sh-l:0 10px 36px rgba(0,0,0,.65)
  }
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:-webkit-fill-available}
body{
  font-family:'Quicksand',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  color:var(--c-text);
  background:var(--c-bg);
  min-height:100vh;
  min-height:-webkit-fill-available;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none
}

/* ── Layout ── */
.booking-wrapper{
  min-height:100vh;
  min-height:-webkit-fill-available;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--c-bg);
  padding:0
}

.booking-container{
  width:100%;
  max-width:700px;
  background:var(--c-surface);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative
}

/* ── Sticky header ── */
.booking-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  padding:1rem 1.5rem 0;
  box-shadow:0 2px 16px rgba(0,0,0,.07)
}

.booking-header h1{
  font-size:1.25rem;
  font-weight:700;
  color:var(--c-text);
  text-align:center;
  letter-spacing:-.015em
}

.booking-header h2{
  font-size:.72rem;
  font-weight:400;
  font-style:italic;
  color:var(--c-muted);
  text-align:center;
  margin-bottom:.875rem
}

/* ── Progress bar ── */
.progress-bar{
  display:flex;
  align-items:flex-start;
  padding:.875rem 1rem 0;
  position:relative;
  margin-bottom:10px
}

.progress-bar::before{
  content:'';
  position:absolute;
  top:calc(.875rem + 13px);
  left:calc(12.5% + 14px);
  right:calc(12.5% + 14px);
  height:2px;
  background:var(--c-border);
  z-index:0
}

.progress-step{flex:1;text-align:center;position:relative;z-index:1}

.progress-step::after{
  content:'';
  position:absolute;
  top:13px;left:50%;
  width:100%;height:2px;
  background:var(--c-border);
  z-index:0;
  transition:background var(--tr)
}
.progress-step.active::after{background:var(--c-brand)}
.progress-step:last-child::after{display:none}

.step-number{
  width:28px;height:28px;
  margin:0 auto;
  background:var(--c-surface);
  border:2px solid var(--c-border);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
  color:var(--c-muted);
  position:relative;z-index:2;
  transition:all var(--tr)
}
.progress-step.active .step-number{
  background:var(--c-brand);
  border-color:var(--c-brand);
  color:#fff
}

.step-title{
  margin-top:.35rem;
  font-size:10px;font-weight:600;
  color:var(--c-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  transition:color var(--tr)
}
.progress-step.active .step-title{color:var(--c-brand)}

/* ── Content area ── */
.booking-content{
  flex:1;
  padding:1.5rem;
  padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))
}

/* ── Step animations ── */
.booking-step{display:none}
.booking-step.active{display:block;animation:stepIn 270ms ease both}

@keyframes stepIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.step-content h2{
  font-size:1.15rem;font-weight:700;
  color:var(--c-text);
  margin-bottom:.875rem;
  letter-spacing:-.01em
}

.service-grid-title{
  font-size:1.15rem;font-weight:700;
  color:var(--c-text);
  margin-bottom:.875rem;
  transition:opacity .2s ease
}

/* ── Selection grids ── */
.selection-grid{display:grid;gap:.625rem;margin:.5rem 0}

.barbers-grid{grid-template-columns:1fr}
@media(min-width:540px){.barbers-grid{grid-template-columns:1fr 1fr}}
.services-grid{grid-template-columns:1fr}
.extras-grid{grid-template-columns:1fr}

/* ── Base card ── */
.selection-card{
  background:var(--c-surface);
  border:2px solid var(--c-border);
  border-radius:var(--r-m);
  cursor:pointer;
  transition:all var(--tr);
  box-shadow:var(--sh-s);
  position:relative
}
.selection-card:hover{
  border-color:var(--c-accent);
  box-shadow:var(--sh-m);
  transform:translateY(-2px)
}
.selection-card.selected{
  border-color:var(--c-brand);
  background:var(--c-sel);
  box-shadow:var(--sh-m)
}

/* ── Barber card ── */
.barbers-grid .selection-card{
  display:flex;align-items:center;
  gap:.875rem;padding:.875rem 1rem
}

.card-image{
  width:62px;height:62px;
  border-radius:50%;
  overflow:hidden;
  background:var(--c-border);
  flex-shrink:0;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.card-image img{
  width:100%;height:100%;
  object-fit:cover;
  position:absolute;top:0;left:0
}
.card-image:empty{background:var(--c-surface-2)}

.barbers-grid .card-content{text-align:left;flex:1}
.card-content h3{font-size:1rem;font-weight:700;color:var(--c-text);margin-bottom:.15rem}
.card-content p{font-size:.85rem;color:var(--c-muted)}

/* Selected indicator for barber cards */
.barbers-grid .selection-card.selected::after{
  content:'✓';
  position:absolute;
  top:8px;right:10px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--c-brand);
  color:#fff;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:20px
}

/* ── Service card ── */
.services-grid .selection-card{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:.875rem 1rem;gap:.75rem
}
.services-grid .card-content{text-align:left;flex:1}
.services-grid .card-content h3{
  font-size:.975rem;font-weight:700;
  color:var(--c-text);margin-bottom:.2rem
}
.service-duration{font-size:.78rem;color:var(--c-muted);margin:0}
.service-price{
  font-size:1.05rem;font-weight:700;
  color:var(--c-brand);
  white-space:nowrap;flex-shrink:0
}

/* Selected state for service: same circle badge as barber */
.services-grid .selection-card.selected::after{
  content:'✓';
  position:absolute;
  top:8px;right:10px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--c-brand);
  color:#fff;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:20px
}

/* ── Extras ── */
.extras-section{margin-top:1.75rem}
.extras-title{font-size:1rem;font-weight:700;color:var(--c-text);margin-bottom:.625rem}

.extra-card{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:.75rem 1rem;
  background:var(--c-surface);
  border:2px solid var(--c-border);
  border-radius:var(--r-m);
  cursor:pointer;
  transition:all var(--tr);
  position:relative;gap:.75rem
}
.extra-card:hover{border-color:var(--c-accent);box-shadow:var(--sh-s);transform:translateY(-1px)}
.extra-card.selected{border-color:var(--c-brand);background:var(--c-sel)}
.extra-card.selected::after{
  content:'✓';
  position:absolute;
  top:8px;right:10px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--c-brand);
  color:#fff;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:20px
}
.extra-card .card-content{text-align:left;flex:1}
.extra-card .card-content h3{font-size:.9rem;font-weight:700;color:var(--c-text);margin-bottom:.1rem}
.extra-card .card-content p{font-size:.78rem;color:var(--c-muted)}

/* ── Date picker ── */
.date-title{font-size:1.15rem;font-weight:700;color:var(--c-text);margin-bottom:1rem}

.date-picker{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-m);
  box-shadow:var(--sh-s);
  overflow:hidden;margin-bottom:1.5rem
}

.date-slider-container{position:relative;background:var(--c-surface)}

.date-slider{
  display:flex;gap:.375rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:.875rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
  margin:0 2rem
}
.date-slider::-webkit-scrollbar{display:none}

.date-item{
  min-width:58px;
  flex-shrink:0;
  padding:.625rem .25rem;
  background:var(--c-bg);
  border:1.5px solid var(--c-border);
  border-radius:var(--r-m);
  cursor:pointer;
  transition:all var(--tr);
  text-align:center;
  position:relative;overflow:hidden
}
.date-item:hover:not(.disabled):not(.unavailable){
  border-color:var(--c-accent);
  transform:translateY(-2px);
  box-shadow:var(--sh-m)
}
.date-item.selected{
  background:var(--c-brand);
  border-color:var(--c-brand);
  color:#fff
}
.date-item.disabled{opacity:.35;cursor:not-allowed}
.date-item.unavailable{
  background:repeating-linear-gradient(45deg,var(--c-bg),var(--c-bg) 3px,var(--c-border) 3px,var(--c-border) 5px);
  cursor:not-allowed;opacity:.5
}

.date-item .weekday,.date-item .day,.date-item .month{position:relative;z-index:1}
.date-item .weekday{font-size:.6rem;color:var(--c-muted);margin-bottom:2px;text-transform:uppercase;font-weight:600;letter-spacing:.3px}
.date-item .day{font-size:1.1rem;font-weight:700;line-height:1.2;margin-bottom:2px}
.date-item .month{font-size:.6rem;color:var(--c-muted);text-transform:uppercase;font-weight:600}
.date-item.selected .weekday,.date-item.selected .month{color:rgba(255,255,255,.8)}

/* availability fill */
.date-item::before{
  content:'';position:absolute;
  bottom:0;left:0;
  width:100%;height:0;
  background:var(--c-brand);opacity:.1;
  transition:height var(--tr);z-index:0
}
.date-item.unavailable::before{display:none}

/* loading shimmer */
.date-item.loading::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 40%,rgba(255,255,255,.5) 60%,transparent);
  animation:shimmer 1s infinite linear
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* date nav */
.date-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;
  background:var(--c-surface);border:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
  transition:all var(--tr);
  font-size:.85rem;color:var(--c-text);
  box-shadow:var(--sh-s)
}
.date-nav:hover{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.date-nav.prev{left:.375rem}
.date-nav.next{right:.375rem}

/* ── Availability percentages 0–100 ── */
.date-item[data-availability="0"]::before{height:0%}.date-item[data-availability="1"]::before{height:1%}.date-item[data-availability="2"]::before{height:2%}.date-item[data-availability="3"]::before{height:3%}.date-item[data-availability="4"]::before{height:4%}.date-item[data-availability="5"]::before{height:5%}.date-item[data-availability="6"]::before{height:6%}.date-item[data-availability="7"]::before{height:7%}.date-item[data-availability="8"]::before{height:8%}.date-item[data-availability="9"]::before{height:9%}.date-item[data-availability="10"]::before{height:10%}.date-item[data-availability="11"]::before{height:11%}.date-item[data-availability="12"]::before{height:12%}.date-item[data-availability="13"]::before{height:13%}.date-item[data-availability="14"]::before{height:14%}.date-item[data-availability="15"]::before{height:15%}.date-item[data-availability="16"]::before{height:16%}.date-item[data-availability="17"]::before{height:17%}.date-item[data-availability="18"]::before{height:18%}.date-item[data-availability="19"]::before{height:19%}.date-item[data-availability="20"]::before{height:20%}.date-item[data-availability="21"]::before{height:21%}.date-item[data-availability="22"]::before{height:22%}.date-item[data-availability="23"]::before{height:23%}.date-item[data-availability="24"]::before{height:24%}.date-item[data-availability="25"]::before{height:25%}.date-item[data-availability="26"]::before{height:26%}.date-item[data-availability="27"]::before{height:27%}.date-item[data-availability="28"]::before{height:28%}.date-item[data-availability="29"]::before{height:29%}.date-item[data-availability="30"]::before{height:30%}.date-item[data-availability="31"]::before{height:31%}.date-item[data-availability="32"]::before{height:32%}.date-item[data-availability="33"]::before{height:33%}.date-item[data-availability="34"]::before{height:34%}.date-item[data-availability="35"]::before{height:35%}.date-item[data-availability="36"]::before{height:36%}.date-item[data-availability="37"]::before{height:37%}.date-item[data-availability="38"]::before{height:38%}.date-item[data-availability="39"]::before{height:39%}.date-item[data-availability="40"]::before{height:40%}.date-item[data-availability="41"]::before{height:41%}.date-item[data-availability="42"]::before{height:42%}.date-item[data-availability="43"]::before{height:43%}.date-item[data-availability="44"]::before{height:44%}.date-item[data-availability="45"]::before{height:45%}.date-item[data-availability="46"]::before{height:46%}.date-item[data-availability="47"]::before{height:47%}.date-item[data-availability="48"]::before{height:48%}.date-item[data-availability="49"]::before{height:49%}.date-item[data-availability="50"]::before{height:50%}.date-item[data-availability="51"]::before{height:51%}.date-item[data-availability="52"]::before{height:52%}.date-item[data-availability="53"]::before{height:53%}.date-item[data-availability="54"]::before{height:54%}.date-item[data-availability="55"]::before{height:55%}.date-item[data-availability="56"]::before{height:56%}.date-item[data-availability="57"]::before{height:57%}.date-item[data-availability="58"]::before{height:58%}.date-item[data-availability="59"]::before{height:59%}.date-item[data-availability="60"]::before{height:60%}.date-item[data-availability="61"]::before{height:61%}.date-item[data-availability="62"]::before{height:62%}.date-item[data-availability="63"]::before{height:63%}.date-item[data-availability="64"]::before{height:64%}.date-item[data-availability="65"]::before{height:65%}.date-item[data-availability="66"]::before{height:66%}.date-item[data-availability="67"]::before{height:67%}.date-item[data-availability="68"]::before{height:68%}.date-item[data-availability="69"]::before{height:69%}.date-item[data-availability="70"]::before{height:70%}.date-item[data-availability="71"]::before{height:71%}.date-item[data-availability="72"]::before{height:72%}.date-item[data-availability="73"]::before{height:73%}.date-item[data-availability="74"]::before{height:74%}.date-item[data-availability="75"]::before{height:75%}.date-item[data-availability="76"]::before{height:76%}.date-item[data-availability="77"]::before{height:77%}.date-item[data-availability="78"]::before{height:78%}.date-item[data-availability="79"]::before{height:79%}.date-item[data-availability="80"]::before{height:80%}.date-item[data-availability="81"]::before{height:81%}.date-item[data-availability="82"]::before{height:82%}.date-item[data-availability="83"]::before{height:83%}.date-item[data-availability="84"]::before{height:84%}.date-item[data-availability="85"]::before{height:85%}.date-item[data-availability="86"]::before{height:86%}.date-item[data-availability="87"]::before{height:87%}.date-item[data-availability="88"]::before{height:88%}.date-item[data-availability="89"]::before{height:89%}.date-item[data-availability="90"]::before{height:90%}.date-item[data-availability="91"]::before{height:91%}.date-item[data-availability="92"]::before{height:92%}.date-item[data-availability="93"]::before{height:93%}.date-item[data-availability="94"]::before{height:94%}.date-item[data-availability="95"]::before{height:95%}.date-item[data-availability="96"]::before{height:96%}.date-item[data-availability="97"]::before{height:97%}.date-item[data-availability="98"]::before{height:98%}.date-item[data-availability="99"]::before{height:99%}.date-item[data-availability="100"]::before{height:100%}

/* ── Time slots ── */
.time-slots{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:.5rem;margin-top:1rem
}
.time-slots:has(.no-slots-message){display:block}

.time-slot{
  padding:.75rem .5rem;
  border:1.5px solid var(--c-border);
  border-radius:var(--r-m);
  background:var(--c-surface);
  cursor:pointer;text-align:center;
  font-family:'Quicksand',sans-serif;
  font-size:.9rem;font-weight:600;
  color:var(--c-text);
  transition:all var(--tr);
  opacity:0;transform:translateY(6px)
}
.time-slot.visible{opacity:1;transform:translateY(0)}
.time-slot.instant{transition:none}

.time-slot.phase-1,.time-slot.phase-2,.time-slot.phase-3{
  display:flex;align-items:center;justify-content:center
}

@media(hover:hover){
  .time-slot:not(.back-button):hover{
    background:var(--c-sel);
    border-color:var(--c-brand);
    color:var(--c-brand);
    transform:translateY(-1px)
  }
}

.time-slot.selected{
  background:var(--c-brand) !important;
  border-color:var(--c-brand) !important;
  color:#fff !important;
  box-shadow:var(--sh-m)
}

.time-slot.back-button{
  grid-column:1/-1;
  background:var(--c-bg);
  border-style:dashed;
  color:var(--c-muted);
  text-align:left;padding-left:1rem;
  margin-bottom:.5rem;
  font-weight:500;font-size:.85rem
}
.time-slot.back-button:hover{
  background:var(--c-border);
  border-style:solid;
  color:var(--c-text);
  transform:none;box-shadow:none
}

.time-selection-header{
  grid-column:1/-1;
  font-size:.75rem;font-weight:700;
  color:var(--c-muted);
  text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:.25rem
}

/* ── Empty / loading messages ── */
.no-slots-message,.no-services-message{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem 1.5rem;
  background:var(--c-surface);
  border:1.5px dashed var(--c-border);
  border-radius:var(--r-m);
  text-align:center;
  min-height:180px;width:100%;
  animation:stepIn .3s ease
}
.no-slots-message .no-slots-icon{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  background:var(--c-bg);
  border-radius:50%;margin-bottom:1rem;
  color:var(--c-brand)
}
.no-slots-message .no-slots-icon svg{width:28px;height:28px}
.no-slots-message h3{font-size:1rem;font-weight:700;color:var(--c-text);margin-bottom:.375rem;width:100%}
.no-slots-message p{font-size:.875rem;color:var(--c-muted);width:100%;max-width:none;margin:0}

/* ── Form (Stap 3) ── */
.form-group{margin-bottom:1.25rem}

.form-group label{
  display:block;
  font-size:.72rem;font-weight:700;
  color:var(--c-muted);
  text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:.375rem
}

.form-group input,.form-group textarea{
  width:100%;
  padding:.75rem 1rem;
  border:1.5px solid var(--c-border);
  border-radius:var(--r-m);
  font-family:'Quicksand',sans-serif;
  font-size:1rem;font-weight:500;
  color:var(--c-text);
  background:var(--c-surface);
  transition:all var(--tr);
  box-shadow:var(--sh-s)
}
.form-group input:focus,.form-group textarea:focus{
  outline:none;
  border-color:var(--c-brand);
  box-shadow:0 0 0 3px rgba(139,115,85,.15),var(--sh-s);
  background:var(--c-surface)
}
.form-group input::placeholder,.form-group textarea::placeholder{
  color:var(--c-muted);opacity:.6
}

/* Autofill */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group textarea:-webkit-autofill,
.form-group textarea:-webkit-autofill:hover,
.form-group textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--c-text);
  -webkit-box-shadow:0 0 0 1000px var(--c-surface) inset;
  box-shadow:0 0 0 1000px var(--c-surface) inset;
  border-color:var(--c-border);
  transition:background-color 5000s ease-in-out 0s
}
.form-group input:-webkit-autofill:focus{
  border-color:var(--c-brand);
  -webkit-box-shadow:0 0 0 1000px var(--c-surface) inset,0 0 0 3px rgba(139,115,85,.15);
  box-shadow:0 0 0 1000px var(--c-surface) inset,0 0 0 3px rgba(139,115,85,.15)
}
.form-group input:not(:placeholder-shown),.form-group textarea:not(:placeholder-shown){
  background:var(--c-surface)
}

/* Discount */
.discount-input-wrap{display:flex;gap:.5rem;align-items:stretch}
.discount-input-wrap input{flex:1;min-width:0}

.btn-apply-discount{
  padding:0 1.25rem;
  background:var(--c-brand);color:#fff;
  border:none;
  border-radius:var(--r-m);
  font-family:'Quicksand',sans-serif;
  font-weight:700;font-size:.9rem;
  cursor:pointer;white-space:nowrap;
  transition:all var(--tr)
}
.btn-apply-discount:hover{opacity:.88;transform:translateY(-1px)}
.btn-apply-discount:disabled{opacity:.5;cursor:not-allowed;transform:none}

.discount-feedback{
  margin-top:.4rem;font-size:.85rem;
  padding:.5rem .75rem;border-radius:var(--r-s);
  display:none
}
.discount-feedback.success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.discount-feedback.error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}

@media(prefers-color-scheme:dark){
  .discount-feedback.success{background:rgba(21,128,61,.15);border-color:rgba(21,128,61,.3);color:#4ade80}
  .discount-feedback.error{background:rgba(220,38,38,.15);border-color:rgba(220,38,38,.3);color:#f87171}
}

/* ── Step 4: Samenvatting ── */
.booking-summary{margin-top:.5rem}

.conf-card{
  background:var(--c-surface);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--sh-m);
  border:1px solid var(--c-border)
}

.conf-header{
  display:flex;align-items:center;
  gap:12px;
  padding:1rem 1.25rem;
  background:var(--c-brand);color:#fff
}

.conf-header-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.2);
  font-size:1rem;font-weight:700;
  flex-shrink:0;line-height:1
}

.conf-header-title{font-size:1rem;font-weight:700;letter-spacing:.1px}

.conf-section{padding:1rem 1.25rem;border-bottom:1px solid var(--c-border)}
.conf-section:last-child{border-bottom:none}

.conf-section-title{
  font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;
  color:var(--c-muted);margin-bottom:.625rem
}

.conf-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0}
.conf-row-label{font-size:.875rem;color:var(--c-muted);white-space:nowrap}
.conf-row-value{font-size:.875rem;color:var(--c-text);text-align:right;word-break:break-word}
.conf-notes{font-size:.875rem;color:var(--c-muted)}

.conf-price-row{display:flex;align-items:center;gap:8px;padding:5px 0}
.conf-price-row+.conf-price-row{border-top:1px solid var(--c-border)}
.conf-price-sep+.conf-price-row,.conf-price-total-sep+.conf-price-row{border-top:none}

.conf-pr-name{flex:1;font-size:.9rem;color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conf-pr-dur{font-size:.8rem;color:var(--c-muted);white-space:nowrap;flex-shrink:0;width:48px;text-align:right}
.conf-pr-price{font-size:.9rem;color:var(--c-text);white-space:nowrap;flex-shrink:0;min-width:60px;text-align:right}

.conf-price-row.conf-pr-extra .conf-pr-name{color:var(--c-muted);font-size:.85rem}
.conf-price-row.conf-pr-extra .conf-pr-price{color:var(--c-muted)}
.conf-price-sep{height:1px;background:var(--c-border);margin:4px 0}
.conf-price-row.conf-pr-subtotal .conf-pr-name{color:var(--c-muted);font-size:.85rem}
.conf-price-row.conf-pr-subtotal .conf-pr-price{color:var(--c-muted);font-size:.85rem}

.conf-price-row.conf-pr-discount{
  background:rgba(21,128,61,.07);
  border-radius:6px;padding:5px 8px;margin:2px -8px;border-top:none !important
}
.conf-price-row.conf-pr-discount .conf-pr-name{color:#166534;font-size:.875rem}
.conf-price-row.conf-pr-discount .conf-pr-price{color:#166534;font-weight:700}

.conf-price-total-sep{height:2px;background:var(--c-border);margin:6px 0}
.conf-price-row.conf-pr-total .conf-pr-name{color:var(--c-brand);font-weight:700;font-size:.95rem;white-space:normal}
.conf-price-row.conf-pr-total .conf-pr-dur{color:var(--c-brand);font-weight:600}
.conf-price-row.conf-pr-total .conf-pr-price{color:var(--c-brand);font-weight:700;font-size:1.05rem}

@media(prefers-color-scheme:dark){
  .conf-price-row.conf-pr-discount{background:rgba(21,128,61,.15)}
  .conf-price-row.conf-pr-discount .conf-pr-name,
  .conf-price-row.conf-pr-discount .conf-pr-price{color:#4ade80}
}

/* ── Fixed bottom nav ── */
.step-actions{
  position:fixed;
  left:0;right:0;bottom:0;
  background:var(--c-surface);
  border-top:1px solid var(--c-border);
  padding:.875rem 1.25rem;
  padding-bottom:calc(.875rem + env(safe-area-inset-bottom,0px));
  z-index:9999;
  display:flex;gap:.625rem;align-items:center;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform
}

.step-actions:has(.bk-btn-next:only-child),
.step-actions:has(.bk-btn-confirm:only-child){
  justify-content:flex-end
}

.bk-btn{
  padding:.75rem 1.25rem;
  border:none;border-radius:var(--r-m);
  font-family:'Quicksand',sans-serif;
  font-size:.95rem;font-weight:700;
  cursor:pointer;
  transition:all var(--tr);
  letter-spacing:.01em;
  white-space:nowrap;
  min-width:0
}

.bk-btn-prev{
  background:var(--c-surface-2);
  color:var(--c-text);
  border:1.5px solid var(--c-border);
  flex:0 0 auto
}
.bk-btn-prev:hover{background:var(--c-border);transform:translateY(-1px)}

.bk-btn-next,.bk-btn-confirm{
  flex:1;
  background:var(--c-brand);
  color:#fff
}
.bk-btn-next:hover,.bk-btn-confirm:hover{
  background:var(--c-brand-h);
  transform:translateY(-1px);
  box-shadow:var(--sh-m)
}

/* ── Toast ── */
.toast{
  position:fixed;
  top:1rem;right:1rem;
  padding:.875rem 1.125rem;
  background:var(--c-surface);
  border-radius:var(--r-m);
  box-shadow:var(--sh-l);
  font-size:.95rem;font-weight:600;
  color:var(--c-text);
  min-width:260px;max-width:360px;
  z-index:20000;
  animation:toastIn 240ms cubic-bezier(.4,0,.2,1)
}
.toast.success{border-left:4px solid var(--c-success)}
.toast.error{border-left:4px solid var(--c-error)}

@keyframes toastIn{
  from{transform:translateX(110%);opacity:0}
  to{transform:translateX(0);opacity:1}
}

/* ── Overlays ── */
.loading-overlay,.success-overlay{
  position:fixed;inset:0;
  background:rgba(250,247,244,.97);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  z-index:10000;padding:2rem
}

@media(prefers-color-scheme:dark){
  .loading-overlay,.success-overlay{background:rgba(26,22,20,.97)}
}

.loading-overlay{animation:fadeOv .25s ease}
.success-overlay{animation:fadeOv .3s ease}
@keyframes fadeOv{from{opacity:0}to{opacity:1}}

.loading-spinner{
  width:56px;height:56px;border-radius:50%;
  border:3px solid var(--c-border);
  border-top-color:var(--c-brand);
  animation:spin 1s linear infinite;
  margin-bottom:1.5rem
}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-content{text-align:center}
.loading-content h2{font-size:1.25rem;color:var(--c-brand);font-weight:700;margin-bottom:.5rem}
.loading-content p{font-size:1rem;color:var(--c-muted)}

.success-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--c-success);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;
  animation:popIn .45s cubic-bezier(.175,.885,.32,1.275) both
}
.success-icon::before{content:'✓';color:#fff;font-size:36px;font-weight:700}

@keyframes popIn{
  from{transform:scale(0);opacity:0}
  to{transform:scale(1);opacity:1}
}

.success-content{text-align:center}
.success-content h2{
  font-size:1.375rem;color:var(--c-success);
  font-weight:700;margin-bottom:.5rem;
  animation:slideUp .4s ease .2s both
}
.success-content p{
  font-size:1rem;color:var(--c-muted);
  animation:slideUp .4s ease .35s both
}
@keyframes slideUp{
  from{transform:translateY(16px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* ── Responsive ── */
@media(max-width:480px){
  .booking-content{padding:1.125rem;padding-bottom:calc(5.25rem + env(safe-area-inset-bottom,0px))}
  .booking-header{padding:.875rem 1.125rem 0}
  .booking-header h1{font-size:1.1rem}
  .step-title{font-size:9px}
  .step-number{width:24px;height:24px;font-size:11px}
  .progress-bar::before{top:calc(.875rem + 11px)}
  .progress-step::after{top:11px}
  .time-slots{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .step-actions{padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px))}
  .bk-btn{font-size:.875rem;min-width:95px;padding:.75rem .875rem}
  .toast{top:.75rem;right:.75rem;left:.75rem;min-width:0;font-size:.9rem}
}

@media(max-width:719px){
  .step-actions{
    position:fixed;bottom:0;left:0;right:0;
    z-index:9999;
    transform:translateZ(0);-webkit-transform:translateZ(0);
    will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden
  }
  .booking-content{padding-bottom:calc(5.25rem + env(safe-area-inset-bottom,0px))}
}

@media(min-width:720px){
  .booking-wrapper{padding:2rem;min-height:100vh;align-items:flex-start;justify-content:center}
  .booking-container{
    max-width:700px;
    height:calc(100vh - 4rem);
    min-height:0;
    border-radius:20px;overflow:hidden;
    box-shadow:var(--sh-l);margin:0 auto
  }
  .booking-header{position:static;flex-shrink:0}
  .booking-content{
    flex:1;overflow-y:auto;
    padding:1.75rem
  }
  .booking-content::-webkit-scrollbar{width:5px}
  .booking-content::-webkit-scrollbar-track{background:transparent}
  .booking-content::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:3px}
  .booking-content::-webkit-scrollbar-thumb:hover{background:var(--c-accent)}
  .step-actions{
    position:relative;
    flex-shrink:0;
    border-radius:0 0 20px 20px
  }
}

@media(min-width:1024px){
  .time-slots{
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
    max-height:400px;overflow-y:auto;padding-right:.25rem
  }
  .time-slots::-webkit-scrollbar{width:6px}
  .time-slots::-webkit-scrollbar-track{background:var(--c-bg);border-radius:3px}
  .time-slots::-webkit-scrollbar-thumb{background:var(--c-accent);border-radius:3px}
}

/* date slider responsive */
@media(min-width:1200px){.date-item{min-width:calc((100% - 2rem)/9)}}
@media(max-width:991px){.date-item{min-width:calc((100% - 2rem)/6)}}
@media(max-width:768px){.date-item{min-width:calc((100% - 2rem)/4.5)}}
@media(max-width:480px){.date-item{min-width:calc((100% - 2rem)/3.5)}}

/* ── Accessibility / performance ── */
input,textarea,select{touch-action:manipulation;-webkit-text-size-adjust:100%}

@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .selection-card,.time-slot,.bk-btn,.form-group input,.form-group textarea{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
  }
}