/* ===========================================================================
 * DemoBooking — structural CSS for the shared reservation dialog.
 * Every colour / font comes from --bk-* custom properties the host site sets,
 * so each demo's booking UI still looks bespoke. This file only owns layout,
 * states and motion. Enter/exit animation uses @starting-style + allow-discrete
 * (all Baseline in 2026). The dialog DOM is injected by booking.js.
 * =========================================================================== */

dialog.bk{
  --_pad:clamp(20px,3.4vw,34px);
  position:fixed;
  inset:0;
  margin:auto; /* re-assert centering: host sites' `*{margin:0}` reset kills the UA default */
  width:min(560px, 100%);
  max-width:100%;
  max-height:min(88dvh, 820px);
  padding:0;
  border:none;
  border-radius:var(--bk-radius,16px);
  background:var(--bk-bg,#15181c);
  color:var(--bk-fg,#eee);
  font-family:var(--bk-font-body,system-ui,sans-serif);
  overflow:hidden;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7), 0 0 0 1px var(--bk-line,rgba(255,255,255,.08));
  /* enter/exit */
  opacity:0;
  translate:0 24px;
  transition:opacity .42s cubic-bezier(.16,1,.3,1), translate .42s cubic-bezier(.16,1,.3,1),
             overlay .42s allow-discrete, display .42s allow-discrete;
}
dialog.bk[open]{opacity:1;translate:0 0}
@starting-style{ dialog.bk[open]{opacity:0;translate:0 24px} }
dialog.bk::backdrop{
  background:color-mix(in oklab, #05080b 62%, transparent);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .42s ease, overlay .42s allow-discrete, display .42s allow-discrete;
}
dialog.bk[open]::backdrop{opacity:1}
@starting-style{ dialog.bk[open]::backdrop{opacity:0} }

.bk-card{display:flex;flex-direction:column;max-height:inherit}
/* Host pages style bare `header`/`footer`/`section` (e.g. footer{background:var(--ink)});
   those element rules leak into the injected dialog. Neutralise backgrounds explicitly. */
.bk-card,.bk-head,.bk-body,.bk-foot,.bk-step{background:transparent}

/* Reset dei controlli — NON delegarlo alla pagina ospite.
   Alcuni demo hanno un `button{font:inherit;color:inherit;background:none;border:none}`
   globale, altri no (il reset `*{margin:0;padding:0}` non tocca sfondo/bordo dei button):
   là dove manca, i controlli iniettati (chiusura, frecce del calendario, stepper, segmented)
   restano con la chrome di default del browser — pillole BIANCHE con testo nero, illeggibili
   e fuori tema su un dialog scuro. Sta qui perché il dialog è iniettato da booking.js e deve
   reggersi da solo. `:where()` azzera la specificità: queste regole perdono contro ogni
   regola di classe qui sotto (`.bk-day`, `.bk-seg button[aria-pressed=true]`, …) ma vincono
   sugli stili UA. */
:where(dialog.bk) button,
:where(dialog.bk) input,
:where(dialog.bk) textarea{
  font:inherit;color:inherit;background:none;border:none;border-radius:0;
  -webkit-appearance:none;appearance:none;
}
:where(dialog.bk) button{cursor:pointer;text-align:inherit}

/* ---- header ---- */
.bk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:var(--_pad) var(--_pad) 0}
.bk-eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bk-accent,#c8a24a);margin-bottom:8px}
.bk-title{font-family:var(--bk-font-display,serif);font-weight:400;font-size:clamp(22px,3.2vw,30px);line-height:1.05;letter-spacing:-.01em;outline:none}
.bk-close{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1px solid var(--bk-line,rgba(255,255,255,.12));
  display:grid;place-items:center;font-size:20px;line-height:1;color:var(--bk-muted,#999);transition:border-color .3s,color .3s,transform .3s}
.bk-close:hover{color:var(--bk-fg);border-color:var(--bk-fg);transform:rotate(90deg)}

/* ---- progress ---- */
.bk-progress{display:flex;gap:7px;padding:18px var(--_pad) 4px}
.bk-progress i{height:3px;flex:1;border-radius:3px;background:var(--bk-line,rgba(255,255,255,.12));transition:background .4s}
.bk-progress i.is-done{background:color-mix(in oklab,var(--bk-accent) 55%, transparent)}
.bk-progress i.is-cur{background:var(--bk-accent,#c8a24a)}
.bk-progress.is-hidden{display:none}

.bk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- body / steps ---- */
.bk-body{position:relative;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px var(--_pad) 4px;flex:1 1 auto}
/* `padding:0` è difensivo, non estetico: alcuni host stilizzano l'elemento `section`
   direttamente (bare, senza classe — es. `section{padding:clamp(3rem,8vw,7rem) 0}` su
   osteria-del-borgo/fuoco), e `.bk-step` ESSA STESSA è un `<section>` iniettato da
   booking.js: senza azzerarlo qui, quel padding filtrerebbe dentro il dialog. Stesso
   principio già in nota altrove nel sito per header/footer bare. */
.bk-step{display:none;padding:0;animation:bk-in .4s cubic-bezier(.16,1,.3,1)}
.bk-step.is-active{display:block}
@keyframes bk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bk-lead{color:var(--bk-muted,#999);font-size:13.5px;line-height:1.55;margin:2px 0 18px;max-width:44ch}
.bk-fieldlabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bk-accent,#c8a24a);margin:20px 0 10px}
.bk-fieldlabel:first-child{margin-top:6px}

/* ---- calendar ---- */
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bk-cal-title{font-family:var(--bk-font-display,serif);font-size:19px;text-transform:capitalize}
.bk-cal-nav{display:flex;gap:8px}
.bk-cal-nav button{width:34px;height:34px;border-radius:9px;border:1px solid var(--bk-line);display:grid;place-items:center;color:var(--bk-fg);transition:border-color .3s,background .3s}
.bk-cal-nav button:hover:not(:disabled){border-color:var(--bk-accent)}
.bk-cal-nav button:disabled{opacity:.32;cursor:not-allowed}
.bk-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.bk-cal-dow span{text-align:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bk-faint,#777)}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.bk-day{aspect-ratio:1;border-radius:10px;border:1px solid transparent;background:color-mix(in oklab,var(--bk-fg) 5%, transparent);
  color:var(--bk-fg);font-size:14px;font-variant-numeric:tabular-nums;display:grid;place-items:center;position:relative;transition:background .25s,border-color .25s,color .25s,transform .2s}
.bk-day.is-empty{background:none;pointer-events:none}
.bk-day:hover:not(:disabled){border-color:var(--bk-accent);transform:translateY(-1px)}
/* i giorni passati/chiusi restano chiaramente secondari, ma leggibili: a .4 sparivano */
.bk-day:disabled{color:var(--bk-faint,#666);opacity:.62;cursor:not-allowed;background:none}
.bk-day.is-sel{background:var(--bk-accent);color:var(--bk-accent-fg,#111);border-color:var(--bk-accent);font-weight:500}
.bk-day.is-today::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--bk-accent)}
.bk-day.is-sel.is-today::after{background:var(--bk-accent-fg)}

/* ---- data + ospiti/servizio: due colonne su desktop ------------------------------------
   `.bk-datewrap` è calendario + opzioni nello stesso ordine del DOM mobile (stack normale,
   nessuna regola qui sotto si applica sotto i 561px — vedi il bottom sheet più in basso):
   la seconda colonna è solo un riarrangiamento visivo sopra i 560px, non un secondo step. */
@media (min-width:561px){
  .bk-datewrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,180px);gap:0 26px;align-items:start}
  .bk-datewrap__cal{grid-column:1;grid-row:1}
  .bk-datewrap__opts{grid-column:2;grid-row:1}
  /* Il primo fieldlabel qui è "Ospiti": nello stack mobile lo stacca dal calendario sopra
     (margin-top:20px, vedi .bk-fieldlabel), ma in colonna è già separato dalla griglia —
     quel margine lo farebbe partire più in basso del primo giorno del mese invece che a
     filo della testata del calendario. */
  .bk-datewrap__opts .bk-fieldlabel:first-child{margin-top:0}
}

/* ---- stepper + segmented ---- */
.bk-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.bk-stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--bk-line);border-radius:12px;overflow:hidden}
.bk-stepper button{
  width:44px;height:44px;padding:0;display:grid;place-items:center;
  text-align:center;line-height:1;font-size:20px;color:var(--bk-fg);
  transition:background .25s
}
.bk-stepper button:hover:not(:disabled){background:color-mix(in oklab,var(--bk-fg) 8%, transparent)}
.bk-stepper button:disabled{opacity:.3;cursor:not-allowed}
.bk-stepper output{min-width:56px;text-align:center;font-family:var(--bk-font-display,serif);font-size:20px;font-variant-numeric:tabular-nums}
.bk-seg{display:inline-flex;border:1px solid var(--bk-line);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.bk-seg button{padding:9px 18px;border-radius:9px;font-size:13px;color:var(--bk-muted);transition:background .25s,color .25s}
.bk-seg button[aria-pressed="true"]{background:var(--bk-accent);color:var(--bk-accent-fg,#111)}
.bk-seg button:disabled{opacity:.32;cursor:not-allowed}
.bk-hint{font-size:12px;color:var(--bk-faint,#777);margin-top:10px}

/* ---- slots ---- */
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px}
.bk-slot{padding:13px 6px;border-radius:11px;border:1px solid var(--bk-line);background:color-mix(in oklab,var(--bk-fg) 4%, transparent);
  color:var(--bk-fg);font-variant-numeric:tabular-nums;font-size:15px;position:relative;transition:border-color .25s,background .25s,transform .2s;display:flex;flex-direction:column;align-items:center;gap:3px}
.bk-slot small{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bk-faint)}
.bk-slot:hover:not(:disabled){border-color:var(--bk-accent);transform:translateY(-1px)}
.bk-slot.is-sel{background:var(--bk-accent);color:var(--bk-accent-fg,#111);border-color:var(--bk-accent)}
.bk-slot.is-sel small{color:color-mix(in oklab,var(--bk-accent-fg) 70%, transparent)}
.bk-slot.is-few small{color:var(--bk-warn,#d29a3a)}
.bk-slot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* ---- form fields ---- */
.bk-field{margin-bottom:14px}
.bk-field label{display:block;font-size:12px;letter-spacing:.03em;color:var(--bk-muted);margin-bottom:7px}
.bk-field input,.bk-field textarea{width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--bk-line);
  background:color-mix(in oklab,var(--bk-fg) 4%, transparent);color:var(--bk-fg);font:inherit;font-size:15px;transition:border-color .25s,background .25s}
.bk-field input:focus,.bk-field textarea:focus{outline:none;border-color:var(--bk-accent);background:color-mix(in oklab,var(--bk-fg) 7%, transparent)}
.bk-field textarea{resize:vertical;min-height:72px;field-sizing:content;max-height:180px}
.bk-field.is-invalid input{border-color:var(--bk-warn,#d29a3a)}
.bk-field .err{display:none;color:var(--bk-warn,#d29a3a);font-size:12px;margin-top:6px}
.bk-field.is-invalid .err{display:block}
.bk-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:460px){.bk-two{grid-template-columns:1fr}}

/* ---- summary / confirmation ---- */
.bk-summary{border:1px solid var(--bk-line);border-radius:14px;overflow:hidden;margin-bottom:16px}
.bk-summary .row{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--bk-line)}
.bk-summary .row:last-child{border-bottom:none}
.bk-summary .k{color:var(--bk-muted);font-size:12.5px;letter-spacing:.02em}
.bk-summary .v{font-family:var(--bk-font-display,serif);font-size:16px;text-align:right}
.bk-confirm{text-align:center;padding:14px 0 6px}
.bk-check{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in oklab,var(--bk-ok,#3aa) 20%, transparent);border:1px solid var(--bk-ok,#3aa)}
.bk-check svg{width:28px;height:28px;stroke:var(--bk-ok,#3aa);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-code{font-family:var(--bk-font-display,serif);font-size:clamp(30px,7vw,44px);letter-spacing:.08em;margin:6px 0 4px;color:var(--bk-accent)}
.bk-confirm h3{font-family:var(--bk-font-display,serif);font-weight:400;font-size:22px;margin-bottom:6px}
.bk-confirm p{color:var(--bk-muted);font-size:13.5px;max-width:38ch;margin:0 auto 6px}
.bk-manage-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.bk-textbtn{color:var(--bk-muted);font-size:12.5px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px;padding:8px 10px;transition:color .3s}
.bk-textbtn:hover{color:var(--bk-fg)}
.bk-textbtn.danger:hover{color:var(--bk-warn,#d29a3a)}

/* ---- footer nav ---- */
.bk-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--_pad) calc(var(--_pad));
  border-top:1px solid var(--bk-line);margin-top:6px}
.bk-btn{padding:14px 26px;border-radius:44px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,opacity .3s}
.bk-back{color:var(--bk-muted);border:1px solid transparent}
.bk-back:hover{color:var(--bk-fg)}
.bk-back.is-hidden{visibility:hidden}
.bk-next{background:var(--bk-accent);color:var(--bk-accent-fg,#111);margin-left:auto}
.bk-next:hover{filter:brightness(1.08)}
.bk-next:disabled{opacity:.4;cursor:not-allowed;filter:none}

/* ---- mobile bottom sheet ---- */
@media (max-width:560px){
  dialog.bk{
    width:100%;
    margin:0 0 0 0;
    position:fixed;
    inset:auto 0 0 0;
    max-height:92dvh;
    border-radius:20px 20px 0 0;
    translate:0 100%;
  }
  dialog.bk[open]{translate:0 0}
  @starting-style{ dialog.bk[open]{translate:0 100%} }
  .bk-foot{padding-bottom:max(var(--_pad), env(safe-area-inset-bottom))}
  .bk-body{padding-bottom:8px}
  .bk-btn{padding:15px 22px}
}

@media (prefers-reduced-motion:reduce){
  dialog.bk,dialog.bk::backdrop{transition:opacity .01s!important}
  dialog.bk{translate:none!important}
  .bk-step{animation:none}
}