/* App-shell booking flow: fixed viewport, one scrollable content region,
   sticky bottom action bar. No page-level scroll, so it reads as a small
   app screen rather than a website with a booking form on it. */

html, body.book-app{height:100%; overflow:hidden;}
body.book-app{background:var(--espresso-deep);}

.app-shell{
  max-width:540px; margin:0 auto; height:100dvh; height:100vh;
  display:flex; flex-direction:column; background:var(--espresso);
  position:relative; box-shadow:0 0 60px rgba(0,0,0,.4);
}

.app-bar{
  flex-shrink:0; height:58px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; border-bottom:1px solid var(--line-dark);
}
.app-icon-btn{
  width:36px; height:36px; border-radius:10px; background:rgba(247,240,228,.06);
  display:flex; align-items:center; justify-content:center; color:var(--cream); font-size:18px;
}
.app-icon-btn:hover{background:rgba(247,240,228,.12);}
.app-bar-title{font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--cream);}
.app-bar-step{font-size:12px; color:#a99781; min-width:38px; text-align:right;}

.app-progress{flex-shrink:0; display:flex; gap:6px; padding:14px 16px 4px;}
.dot{flex:1; height:4px; border-radius:99px; background:rgba(247,240,228,.12); transition:background .3s;}
.dot.active, .dot.done{background:var(--copper);}

.app-content{flex:1; min-height:0; overflow-y:auto; padding:18px 16px 28px; -webkit-overflow-scrolling:touch;}

.book-panel{display:none;}
.book-panel.active{display:block; animation:panelIn .3s ease both;}
@keyframes panelIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

.option-grid{display:grid; grid-template-columns:1fr; gap:12px;}
.option-card{
  border:1.5px solid var(--line-dark); border-radius:14px; padding:16px 18px; cursor:pointer;
  background:rgba(247,240,228,.03); transition:border-color .2s, background .2s, transform .15s;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.option-card:active{transform:scale(.98);}
.option-card.selected{border-color:var(--copper); background:rgba(189,127,63,.14);}
.option-card .o-title{font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:3px;}
.option-card .o-meta{color:#a99781; font-size:13px;}
.option-card .o-price{color:var(--copper-light, #dcab6e); font-family:var(--font-display); font-weight:700; font-size:17px; flex-shrink:0;}

.option-grid-barbers .option-card{justify-content:flex-start;}
.avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(150deg, var(--copper), var(--copper-deep));
  color:var(--espresso-deep); font-family:var(--font-display); font-weight:700; font-size:14.5px;
  display:flex; align-items:center; justify-content:center;
}

/* day strip: a horizontally scrollable row of day pills, app-native feeling,
   instead of a native <input type=date> and its inconsistent OS chrome */
.day-strip{display:flex; gap:9px; overflow-x:auto; padding-bottom:16px; scrollbar-width:none;}
.day-strip::-webkit-scrollbar{display:none;}
.day-pill{
  flex:0 0 auto; width:56px; padding:11px 0; border-radius:14px; border:1.5px solid var(--line-dark);
  text-align:center; cursor:pointer; background:rgba(247,240,228,.03); transition:.15s;
}
.day-pill:active{transform:scale(.96);}
.day-pill .dow{display:block; font-size:10.5px; color:#a99781; text-transform:uppercase; letter-spacing:.04em;}
.day-pill .num{display:block; font-family:var(--font-display); font-weight:700; font-size:17px; margin-top:3px; color:var(--cream);}
.day-pill.selected{background:var(--copper); border-color:var(--copper);}
.day-pill.selected .dow, .day-pill.selected .num{color:var(--espresso-deep);}

.slot-grid{display:flex; flex-wrap:wrap; gap:10px;}
.slot-grid .hint{color:#a99781; font-size:14px;}
.slot-btn{
  padding:11px 16px; border-radius:999px; border:1.5px solid var(--line-dark);
  background:transparent; color:var(--cream); font-family:var(--font-body); font-size:14px;
  cursor:pointer; transition:.15s;
}
.slot-btn:active{transform:scale(.96);}
.slot-btn.selected{background:var(--copper); border-color:var(--copper); color:var(--espresso-deep); font-weight:600;}

.summary{
  background:rgba(247,240,228,.05); border-radius:14px; padding:16px 18px; margin-bottom:22px;
  font-size:14.5px; line-height:1.8; color:#e6d9c2;
}
.summary strong{color:var(--cream);}

.field{margin-bottom:18px;}
.field label{display:block; font-size:13.5px; color:#cbb99e; margin-bottom:8px;}
.field input{
  width:100%; padding:13px 16px; border-radius:10px; border:1.5px solid var(--line-dark);
  background:rgba(247,240,228,.04); color:var(--cream); font-family:var(--font-body); font-size:16px;
}
.field input::placeholder{color:#7a6a58;}
.field input:focus{outline:none; border-color:var(--copper);}
.field-error{color:#e2926a; font-size:13.5px; min-height:1.3em;}

.app-bottom-bar{
  flex-shrink:0; display:flex; gap:12px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-dark); background:var(--espresso);
}
.app-bottom-bar #backBtn{flex:0 0 94px;}
.app-bottom-bar #nextBtn{flex:1;}
.app-bottom-bar .btn:disabled{opacity:.45; pointer-events:none;}

.confirm{text-align:center; padding:30px 4px;}
.confirm-badge{width:64px; height:64px; font-size:28px; margin:0 auto 20px;}
.confirm h2{margin-bottom:12px; font-size:22px; color:var(--cream);}
.confirm p{color:#cbb99e; margin-bottom:26px; line-height:1.7;}