/* Paula Alves Hair — shared interactive components (booking modal, lightbox, toast)
   Theme-agnostic: every color/shape reads from CSS variables set by each direction.
   Expected vars: --bg --ink --muted --surface --line --accent --accent-ink
                  --radius --font-ui --font-display --shadow */

.pah-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,4vw,40px);
  background:color-mix(in oklab, var(--ink) 58%, transparent);
  backdrop-filter:blur(8px) saturate(1.1); -webkit-backdrop-filter:blur(8px) saturate(1.1);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.pah-overlay.is-open{ opacity:1; pointer-events:auto; }

/* ---------- Booking modal ---------- */
.bk{
  width:min(560px,100%); max-height:min(880px,92vh);
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:calc(var(--radius) * 1.25);
  box-shadow:var(--shadow, 0 40px 120px -30px rgba(0,0,0,.5));
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(18px) scale(.985); opacity:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
  font-family:var(--font-ui);
}
.pah-overlay.is-open .bk{ transform:none; opacity:1; }
.bk__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 24px 0; }
.bk__eyebrow{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.bk__title{ font-family:var(--font-display); font-size:clamp(24px,3.2vw,30px); line-height:1.05; margin:.35em 0 0; font-weight:var(--display-weight,500); }
.bk__x{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-size:18px; line-height:1; transition:background .2s,transform .2s; }
.bk__x:hover{ background:color-mix(in oklab,var(--ink) 8%,transparent); transform:rotate(90deg); }

/* progress dots */
.bk__steps{ display:flex; gap:6px; padding:18px 24px 4px; }
.bk__steps .dot{ flex:1; height:3px; border-radius:3px; background:color-mix(in oklab,var(--ink) 12%,transparent); overflow:hidden; }
.bk__steps .dot i{ display:block; height:100%; width:0; background:var(--accent); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.bk__steps .dot.done i{ width:100%; }
.bk__steps .dot.active i{ width:100%; }

.bk__body{ padding:14px 24px 4px; overflow-y:auto; }
.bk__panel{ display:none; animation:bkIn .45s cubic-bezier(.2,.8,.2,1); }
.bk__panel.active{ display:block; }
@keyframes bkIn{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none; } }
.bk__h{ font-family:var(--font-display); font-size:20px; font-weight:var(--display-weight,500); margin:2px 0 14px; }

/* option cards (service / time) */
.bk__opts{ display:grid; gap:10px; }
.bk__opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; cursor:pointer;
  padding:15px 16px; border-radius:var(--radius);
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font-family:var(--font-ui); transition:border-color .2s, background .2s, transform .15s;
}
.bk__opt:hover{ border-color:var(--accent); transform:translateX(2px); }
.bk__opt.sel{ border-color:var(--accent); background:color-mix(in oklab,var(--accent) 12%,transparent); }
.bk__opt .t{ font-size:15.5px; font-weight:600; }
.bk__opt .d{ font-size:13px; color:var(--muted); margin-top:2px; }
.bk__opt .price{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.bk__opt .tick{ width:20px;height:20px;border-radius:50%;border:1px solid var(--line); flex:0 0 auto; display:grid;place-items:center; }
.bk__opt.sel .tick{ background:var(--accent); border-color:var(--accent); }
.bk__opt.sel .tick::after{ content:"✓"; color:var(--accent-ink); font-size:12px; }

/* time grid */
.bk__times{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bk__times .bk__opt{ justify-content:center; }
.bk__times .bk__opt .t{ font-weight:600; font-size:14.5px; }

/* calendar */
.cal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal__head b{ font-family:var(--font-display); font-weight:var(--display-weight,500); font-size:17px; }
.cal__nav{ width:36px;height:36px;border-radius:50%;border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-size:15px; transition:background .2s; }
.cal__nav:hover{ background:color-mix(in oklab,var(--ink) 8%,transparent); }
.cal__nav:disabled{ opacity:.3; cursor:not-allowed; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal__dow{ text-align:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:6px 0; }
.cal__day{ aspect-ratio:1; border:none; background:transparent; color:var(--ink); border-radius:50%; cursor:pointer; font-family:var(--font-ui); font-size:14px; transition:background .18s,color .18s; position:relative; }
.cal__day:hover:not(:disabled){ background:color-mix(in oklab,var(--accent) 16%,transparent); }
.cal__day:disabled{ color:color-mix(in oklab,var(--ink) 28%,transparent); cursor:not-allowed; }
.cal__day.sel{ background:var(--accent); color:var(--accent-ink); }
.cal__day.empty{ pointer-events:none; }

/* form */
.bk__field{ margin-bottom:14px; }
.bk__field label{ display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.bk__field input, .bk__field textarea, .bk__field select{
  width:100%; padding:13px 14px; border-radius:var(--radius);
  border:1px solid var(--line); background:color-mix(in oklab,var(--ink) 3%,transparent); color:var(--ink);
  font-family:var(--font-ui); font-size:15px; outline:none; transition:border-color .2s,background .2s;
}
.bk__field textarea{ resize:vertical; min-height:74px; }
.bk__field input:focus, .bk__field textarea:focus, .bk__field select:focus{ border-color:var(--accent); background:var(--surface); }
.bk__field.err input{ border-color:#d8503c; }
.bk__field .msg{ color:#d8503c; font-size:12px; margin-top:5px; display:none; }
.bk__field.err .msg{ display:block; }
.bk__seg{ display:flex; gap:8px; }
.bk__seg button{ flex:1; padding:11px; border-radius:var(--radius); border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-family:var(--font-ui); font-size:13.5px; transition:.2s; }
.bk__seg button.sel{ border-color:var(--accent); background:color-mix(in oklab,var(--accent) 12%,transparent); }

/* review */
.bk__review{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.bk__review div{ background:var(--surface); padding:14px 16px; display:flex; justify-content:space-between; gap:16px; }
.bk__review .k{ color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.bk__review .v{ font-weight:600; font-size:14.5px; text-align:right; }

/* success */
.bk__success{ text-align:center; padding:24px 8px 8px; }
.bk__check{ width:64px;height:64px;border-radius:50%; margin:0 auto 18px; background:color-mix(in oklab,var(--accent) 18%,transparent); display:grid; place-items:center; }
.bk__check::after{ content:"✓"; color:var(--accent); font-size:30px; }
.bk__success h3{ font-family:var(--font-display); font-weight:var(--display-weight,500); font-size:26px; margin:0 0 8px; }
.bk__success p{ color:var(--muted); font-size:14.5px; line-height:1.55; max-width:38ch; margin:0 auto 20px; }

/* footer / actions */
.bk__foot{ display:flex; gap:10px; padding:18px 24px 24px; margin-top:6px; border-top:1px solid var(--line); }
.bk__btn{ flex:1; padding:15px; border-radius:var(--radius); border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-family:var(--font-ui); font-weight:600; font-size:15px; cursor:pointer; letter-spacing:.01em; transition:transform .15s, filter .2s, opacity .2s; }
.bk__btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.bk__btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.bk__btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); flex:0 0 auto; min-width:104px; }
.bk__btn--ghost:hover{ border-color:var(--ink); filter:none; }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:clamp(14px,4vw,56px); background:color-mix(in oklab,var(--ink) 86%,#000); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.lb.is-open{ opacity:1; pointer-events:auto; }
.lb__img{ max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 30px 90px -20px rgba(0,0,0,.7); transform:scale(.96); transition:transform .4s cubic-bezier(.2,.8,.2,1); object-fit:contain; }
.lb.is-open .lb__img{ transform:none; }
.lb__btn{ position:absolute; top:50%; transform:translateY(-50%); width:54px;height:54px;border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.3); color:#fff; cursor:pointer; font-size:20px; backdrop-filter:blur(4px); transition:background .2s; }
.lb__btn:hover{ background:rgba(255,255,255,.16); }
.lb__prev{ left:clamp(10px,3vw,40px); } .lb__next{ right:clamp(10px,3vw,40px); }
.lb__x{ position:absolute; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); width:48px;height:48px;border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.3); color:#fff; cursor:pointer; font-size:18px; transition:background .2s,transform .2s; }
.lb__x:hover{ background:rgba(255,255,255,.16); transform:rotate(90deg); }
.lb__count{ position:absolute; bottom:clamp(14px,3vw,28px); left:50%; transform:translateX(-50%); color:rgba(255,255,255,.8); font-family:var(--font-ui); font-size:13px; letter-spacing:.1em; }

/* ---------- Toast ---------- */
.pah-toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); z-index:1200; background:var(--ink); color:var(--bg); padding:14px 22px; border-radius:100px; font-family:var(--font-ui); font-size:14px; box-shadow:0 20px 50px -16px rgba(0,0,0,.5); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.pah-toast.show{ transform:translate(-50%,0); }

@media (max-width:560px){
  .bk__times{ grid-template-columns:repeat(2,1fr); }
  .bk__foot{ flex-wrap:wrap; }
  .bk__btn--ghost{ min-width:0; }
}
@media (prefers-reduced-motion:reduce){
  .pah-overlay,.bk,.bk__panel,.lb,.lb__img,.pah-toast{ transition:none !important; animation:none !important; }
}