/* ATFI booking widget — modal shell + multi-step custom UI.
   Mobile: bottom sheet (slides up). Desktop: centred modal (scales in).
   Stages crossfade. All animation honours prefers-reduced-motion.
   Token shorthand inside the modal (won't pollute the host page):
     --bk-bg:#15151a; --bk-surface:#1c1c1f; --bk-text:#f0ece4;
     --bk-dim:#7a7a80; --bk-muted:#4a4a50; --bk-border:rgba(255,255,255,0.08);
     --bk-accent:#c8ff00; --bk-ease:cubic-bezier(.16,1,.3,1);
*/

.booking-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0; pointer-events:none;
  -webkit-tap-highlight-color:transparent;
  --bk-bg:#15151a; --bk-surface:#1c1c1f; --bk-text:#f0ece4;
  --bk-dim:#7a7a80; --bk-muted:#4a4a50; --bk-border:rgba(255,255,255,0.08);
  --bk-accent:#c8ff00; --bk-accent-dim:rgba(200,255,0,0.08);
  --bk-ease:cubic-bezier(.16,1,.3,1);
  font-family:'DM Sans',system-ui,sans-serif;
}
.booking-modal:not([hidden]){pointer-events:auto}
.booking-modal[hidden]{display:none}

.booking-backdrop{
  position:absolute; inset:0;
  background:rgba(6,6,8,0.74);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  opacity:0; transition:opacity .35s var(--bk-ease);
  cursor:pointer;
}
.booking-modal.open .booking-backdrop{opacity:1}

.booking-sheet{
  position:relative;
  background:linear-gradient(170deg,#15151a 0%,#0c0c0f 100%);
  border:1px solid rgba(200,255,0,0.16);
  border-radius:22px 22px 0 0;
  width:100%; max-width:780px; max-height:92dvh;
  display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .45s var(--bk-ease);
  overflow:hidden;
  box-shadow:
    0 -12px 60px -20px rgba(200,255,0,0.22),
    0 -2px 0 0 rgba(200,255,0,0.08),
    0 -40px 80px -40px rgba(0,0,0,0.6);
}
.booking-modal.open .booking-sheet{transform:translateY(0)}
.booking-sheet::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,255,0,0.6),transparent);
  z-index:5;
}

@media(min-width:720px){
  .booking-modal{align-items:center; padding:2rem}
  .booking-sheet{
    border-radius:22px;
    transform:translateY(28px) scale(.965); opacity:0;
    transition:transform .45s var(--bk-ease), opacity .35s;
  }
  .booking-modal.open .booking-sheet{transform:translateY(0) scale(1); opacity:1}
}

.booking-handle{
  width:38px; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.18);
  margin:.65rem auto 0; flex-shrink:0;
}
@media(min-width:720px){.booking-handle{display:none}}

/* Header */
.booking-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.2rem 1.5rem 1rem; flex-shrink:0; position:relative; z-index:3;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
@media(min-width:720px){.booking-head{padding:1.6rem 2rem 1.15rem}}

.booking-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bk-accent); margin:0 0 .45rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.booking-kicker::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--bk-accent); box-shadow:0 0 8px var(--bk-accent);
  animation:booking-pulse 2s ease-out infinite;
}
@keyframes booking-pulse{
  0%{box-shadow:0 0 0 0 rgba(200,255,0,.55)}
  70%{box-shadow:0 0 0 8px rgba(200,255,0,0)}
  100%{box-shadow:0 0 0 0 rgba(200,255,0,0)}
}

.booking-head h2{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:clamp(1.3rem,1rem + 1.2vw,1.7rem); font-weight:400;
  letter-spacing:-.015em; color:var(--bk-text); line-height:1.18; margin:0;
}
.booking-period{color:var(--bk-accent)}

.booking-close{
  background:rgba(255,255,255,0.04); border:1px solid var(--bk-border);
  border-radius:100px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--bk-text); flex-shrink:0; padding:0;
  font-family:inherit;
  transition:background .2s,border-color .2s,color .2s,transform .35s var(--bk-ease);
}
.booking-close:hover{
  background:rgba(200,255,0,0.08); border-color:rgba(200,255,0,0.45);
  color:var(--bk-accent); transform:rotate(90deg);
}
.booking-close:focus-visible{outline:2px solid var(--bk-accent); outline-offset:3px}
.booking-close svg{width:16px; height:16px}

/* Body / stages */
.booking-body{
  position:relative;
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-color:rgba(255,255,255,0.12) transparent;
  min-height:340px;
}
.booking-stage{
  padding:1.5rem 1.5rem 1.75rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .32s var(--bk-ease), transform .32s var(--bk-ease);
}
.booking-stage.active{opacity:1; transform:none}
@media(min-width:720px){.booking-stage{padding:1.75rem 2rem 2rem}}

/* Loader */
.booking-loader{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; padding:3.5rem 1rem; color:var(--bk-dim);
  font-family:'JetBrains Mono',monospace; font-size:.76rem; letter-spacing:.08em;
}
.booking-loader-dots{display:flex; gap:.55rem}
.booking-loader-dots span{
  width:9px; height:9px; border-radius:50%; background:var(--bk-accent);
  animation:booking-dot 1.25s ease-in-out infinite;
}
.booking-loader-dots span:nth-child(2){animation-delay:.15s}
.booking-loader-dots span:nth-child(3){animation-delay:.3s}
@keyframes booking-dot{
  0%,80%,100%{transform:scale(.6); opacity:.4}
  40%{transform:scale(1.15); opacity:1}
}

/* Error */
.booking-error{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:2rem 1rem; text-align:center;
}
.booking-error-icon{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,90,90,.12); border:1px solid rgba(255,90,90,.4);
  color:#ff7a7a; font-weight:500; font-size:1.25rem;
}
.booking-error-msg{color:var(--bk-text); font-size:.95rem; max-width:380px; line-height:1.55; margin:0}
.booking-error-actions{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem}

/* Calendar (date stage) */
.booking-month-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:1.1rem;
}
.booking-month-nav{
  background:rgba(255,255,255,0.04); border:1px solid var(--bk-border);
  border-radius:100px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--bk-text); padding:0;
  font-family:inherit;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.booking-month-nav:hover:not(:disabled){background:rgba(200,255,0,.08); border-color:rgba(200,255,0,.4); color:var(--bk-accent)}
.booking-month-nav:disabled{opacity:.3; cursor:default}
.booking-month-nav svg{width:14px; height:14px}
.booking-month-label{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:1.05rem; font-weight:500; letter-spacing:-.005em;
  color:var(--bk-text);
}

.booking-cal-week{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem;
  margin-bottom:.6rem;
  font-family:'JetBrains Mono',monospace; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bk-muted);
  text-align:center;
}
.booking-cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem;
}
.booking-cal-blank{visibility:hidden}
.booking-cal-day{
  aspect-ratio:1/1;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--bk-border);
  border-radius:10px;
  color:var(--bk-text);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.92rem; font-weight:400;
  cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--bk-ease);
  animation:bk-cell-in .35s var(--bk-ease) backwards;
  animation-delay:calc(var(--i,0) * 0.012s);
}
@keyframes bk-cell-in{
  from{opacity:0; transform:translateY(4px) scale(.96)}
  to{opacity:1; transform:none}
}
.booking-cal-day:hover:not(.is-disabled):not(.is-selected){
  border-color:rgba(200,255,0,0.4);
  background:rgba(200,255,0,0.04);
  color:var(--bk-accent);
  transform:translateY(-1px);
}
.booking-cal-day.is-today::after{
  content:''; position:absolute; bottom:5px; left:50%;
  width:3px; height:3px; border-radius:50%;
  background:var(--bk-accent); transform:translateX(-50%);
  box-shadow:0 0 4px var(--bk-accent);
}
.booking-cal-day.is-disabled{
  color:var(--bk-muted); opacity:.45; cursor:default;
  background:transparent; border-color:rgba(255,255,255,0.03);
}
.booking-cal-day.is-selected{
  background:var(--bk-accent); border-color:var(--bk-accent); color:#0a0a0b;
  font-weight:500; box-shadow:0 0 0 4px rgba(200,255,0,0.18);
}
.booking-cal-day:focus-visible{outline:2px solid var(--bk-accent); outline-offset:3px}

/* Slot grid (time stage) */
.booking-back{
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:none; color:var(--bk-dim);
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.06em;
  cursor:pointer; padding:.3rem 0;
  margin-bottom:.8rem;
  transition:color .2s, gap .2s var(--bk-ease);
}
.booking-back:hover{color:var(--bk-accent); gap:.55rem}
.booking-back svg{width:14px; height:14px}

.booking-stage-title{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:1.15rem; font-weight:400; letter-spacing:-.01em;
  color:var(--bk-text); margin:0 0 .3rem;
}
.booking-stage-sub{
  font-family:'JetBrains Mono',monospace; font-size:.66rem;
  letter-spacing:.1em; color:var(--bk-dim); margin:0 0 1.2rem;
}
.booking-stage-hint{
  font-size:.78rem; color:var(--bk-muted); margin:1rem 0 0; text-align:center;
}

.booking-slot-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem;
  margin-bottom:.4rem;
}
@media(max-width:480px){.booking-slot-grid{grid-template-columns:repeat(2,1fr)}}

.booking-slot{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--bk-border);
  border-radius:100px;
  padding:.7rem .9rem;
  color:var(--bk-text);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.92rem; font-weight:400;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s, transform .25s var(--bk-ease), box-shadow .2s;
  animation:bk-chip-in .42s var(--bk-ease) backwards;
  animation-delay:calc(var(--i,0) * 0.025s);
}
@keyframes bk-chip-in{
  from{opacity:0; transform:translateY(8px) scale(.94)}
  to{opacity:1; transform:none}
}
.booking-slot:hover{
  border-color:rgba(200,255,0,0.5);
  background:rgba(200,255,0,0.06);
  color:var(--bk-accent);
  transform:translateY(-2px);
  box-shadow:0 6px 20px -10px rgba(200,255,0,0.4);
}
.booking-slot:focus-visible{outline:2px solid var(--bk-accent); outline-offset:3px}

/* Form stage */
.booking-slot-summary{
  background:linear-gradient(135deg,rgba(200,255,0,0.06),rgba(77,124,255,0.04));
  border:1px solid rgba(200,255,0,0.18);
  border-radius:14px;
  padding:1rem 1.1rem;
  margin-bottom:1.25rem;
}
.booking-slot-summary-label{
  font-family:'JetBrains Mono',monospace; font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bk-accent); margin:0 0 .35rem;
}
.booking-slot-summary-when{
  font-size:1.05rem; color:var(--bk-text); margin:0 0 .2rem;
  letter-spacing:-.01em;
}
.booking-slot-summary-tz{
  font-family:'JetBrains Mono',monospace; font-size:.68rem;
  color:var(--bk-dim); letter-spacing:.04em; margin:0;
}

.booking-form{display:flex; flex-direction:column; gap:.85rem}
.booking-form-row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
@media(max-width:520px){.booking-form-row{grid-template-columns:1fr}}

.booking-field{display:flex; flex-direction:column; gap:.35rem}
.booking-field-label{
  font-family:'JetBrains Mono',monospace; font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bk-muted);
}
.booking-field input,
.booking-field select,
.booking-field textarea{
  width:100%;
  padding:.78rem .9rem;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--bk-border);
  border-radius:10px;
  color:var(--bk-text);
  font-family:inherit; font-size:.92rem;
  outline:none;
  transition:border-color .2s, background .2s;
}
.booking-field textarea{resize:vertical; min-height:84px}
.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus{
  border-color:var(--bk-accent);
  background:rgba(200,255,0,0.03);
}
.booking-field select option{background:#1c1c1f; color:var(--bk-text)}

.booking-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.booking-turnstile{min-height:0; margin-top:.4rem}

.booking-form-error{
  font-size:.82rem; color:#ff8c8c; margin:.1rem 0 -.2rem; min-height:1.2rem;
  font-family:'DM Sans',system-ui,sans-serif;
}

/* Buttons */
.booking-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.4rem;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.88rem; font-weight:500;
  letter-spacing:-.005em;
  border:none; border-radius:100px;
  cursor:pointer; text-decoration:none;
  transition:transform .25s var(--bk-ease), box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.booking-btn-primary{background:var(--bk-accent); color:#0a0a0b; position:relative}
.booking-btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 28px -8px rgba(200,255,0,.4)}
.booking-btn-primary:disabled{opacity:.65; cursor:default; transform:none; box-shadow:none}
.booking-btn-primary .booking-btn-spinner{
  display:none; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(10,10,11,0.25); border-top-color:#0a0a0b;
  animation:bk-spin .7s linear infinite;
}
.booking-btn-primary.is-loading .booking-btn-label{visibility:hidden}
.booking-btn-primary.is-loading .booking-btn-spinner{
  display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
@keyframes bk-spin{to{transform:rotate(360deg)}}

.booking-btn-ghost{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--bk-border); color:var(--bk-text);
}
.booking-btn-ghost:hover{border-color:rgba(200,255,0,0.4); color:var(--bk-accent); background:rgba(200,255,0,0.04)}
.booking-btn-link{background:none; color:var(--bk-dim); padding:.7rem 0; text-decoration:underline; text-decoration-color:rgba(122,122,128,0.4); text-underline-offset:3px}
.booking-btn-link:hover{color:var(--bk-accent); text-decoration-color:var(--bk-accent)}

/* Done */
.booking-success{
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  text-align:center; padding:1.5rem .5rem .5rem;
}
.booking-check{width:64px; height:64px; flex-shrink:0; margin-bottom:.3rem}
.booking-check svg{width:100%; height:100%}
.booking-check-circle{
  fill:none; stroke:var(--bk-accent); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:160; stroke-dashoffset:160;
  filter:drop-shadow(0 0 10px rgba(200,255,0,0.45));
}
.booking-check-tick{
  fill:none; stroke:var(--bk-accent); stroke-width:3.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60;
}
.booking-stage[data-stage="done"].active .booking-check-circle{
  animation:bk-stroke .7s var(--bk-ease) forwards;
}
.booking-stage[data-stage="done"].active .booking-check-tick{
  animation:bk-stroke .45s var(--bk-ease) .4s forwards;
}
@keyframes bk-stroke{to{stroke-dashoffset:0}}

.booking-success h3{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:1.5rem; font-weight:400; letter-spacing:-.015em;
  color:var(--bk-text); margin:0;
}
.booking-done-when{
  font-family:'JetBrains Mono',monospace; font-size:.86rem;
  color:var(--bk-accent); margin:0; letter-spacing:.02em;
}
.booking-done-sub{
  font-size:.88rem; color:var(--bk-dim); margin:0; line-height:1.55;
  max-width:420px;
}
.booking-done-sub strong{color:var(--bk-text); font-weight:500}
.booking-done-actions{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem}

/* Footnote */
.booking-footnote{
  flex-shrink:0; padding:.9rem 1.5rem;
  border-top:1px solid rgba(255,255,255,0.05);
  font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.06em;
  color:var(--bk-muted); text-align:center;
  background:rgba(0,0,0,0.2); position:relative; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:.45rem; flex-wrap:wrap;
}
.booking-footnote a{color:var(--bk-dim); border-bottom:1px dotted rgba(122,122,128,.4); transition:color .2s, border-color .2s; text-decoration:none}
.booking-footnote a:hover{color:var(--bk-accent); border-bottom-color:var(--bk-accent)}
.booking-tz{color:var(--bk-dim)}
@media(min-width:720px){.booking-footnote{padding:1rem 2rem}}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .booking-backdrop, .booking-sheet, .booking-stage,
  .booking-slot, .booking-cal-day, .booking-close, .booking-btn,
  .booking-check-circle, .booking-check-tick{
    transition:none !important; animation:none !important;
  }
  .booking-sheet{transform:none !important; opacity:1 !important}
  .booking-loader-dots span, .booking-kicker::before{animation:none !important}
  .booking-check-circle, .booking-check-tick{stroke-dashoffset:0 !important}
}