/* AVELaunch Booking widget — Site 2026 style (dev.avelaunch.co, Figma ZgxdSkY8FOLu3EApL6xhkj).
   Values copied from the Greenlight landing's form modal (greenlight-site R1 page/assets/style.css,
   rules .modal-box, .form-h, .fld, .opt, .optin, .btn, .err, .form-note) so the booking steps continue
   that form without a visible seam. Colours come from the host page's tokens when it has them
   (dev site: tokens.css --rich-black-*, --amber-*; Greenlight page: --ink, --accent, --hair),
   with the same hex values as fallbacks. No rounded corners anywhere: Site 2026 is square.
   2026-10-23: rewritten from the rounded v1 style (pill buttons, 16 px radius, yellow banner #FFF6D6). */
.avl{
  --avl-ink:var(--rich-black-1,var(--ink,#0B1424));
  --avl-muted:var(--rich-black-5,#5D6C86);
  --avl-dim:var(--rich-black-4,#93A3BD);
  --avl-hair:var(--rich-black-3,var(--hair,#C7D2E3));
  --avl-page:var(--editorial-white-4,var(--page,#EEEAE3));
  --avl-field:var(--editorial-white-2,#FFFFFF);
  --avl-accent:var(--amber-4,var(--accent,#E0A800));
  --avl-accent-soft:var(--amber-2,#F9E08A);
  --avl-err:#9B1C1C;
  --avl-sans:var(--font-sans,"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif);
  --avl-script:var(--font-script,"Comforter",cursive);
  font-family:var(--avl-sans);color:var(--avl-ink);font-size:16px;line-height:1.5;font-weight:400;
  max-width:820px;margin:0 auto;box-sizing:border-box;text-align:left;
  container-type:inline-size   /* the layout follows the widget's own width (a modal, a card, a phone), not the window's */
}
@media (min-width:64rem){.avl{font-size:17px}}
.avl *,.avl *::before,.avl *::after{box-sizing:inherit}
.avl p{margin:0}
.avl button,.avl input,.avl select{font-family:inherit}

/* Frame: on a page the widget is a card on the page colour; inside a page's own modal (data-variant="plain") it has none. */
.avl-card{background:var(--avl-page);border:1px solid var(--avl-hair);padding:44px 40px 36px}
.avl--plain .avl-card{background:transparent;border:0;padding:0}

/* Heading: step line, script word (decoration; the heading reads alone), uppercase heading */
.avl-head{margin:0 0 14px}
.avl-kicker{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--avl-muted);margin:0 0 10px !important}
.avl-script{display:block;font-family:var(--avl-script);font-weight:400;font-size:min(56px,15vw);line-height:.9;color:var(--avl-accent);white-space:nowrap;margin:0 0 10px}   /* clear of the heading: descenders (y, g) must not touch it */
.avl-h{margin:0;font-size:28px;font-weight:1000;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;color:var(--avl-ink)}
.avl-h:focus{outline:none}   /* focus is moved here by script for screen readers; not a control */
.avl:not(.avl--plain) .avl-h{font-size:clamp(28px,3vw,40px)}
.avl-price{font-weight:1000;margin:0 0 6px !important}
.avl-sub{margin:0 0 18px !important}
.avl-who{margin:0 0 22px !important;color:var(--avl-ink)}
.avl-who b{font-weight:900}

/* Form */
.avl-form{display:grid;gap:12px}
.avl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avl-field{display:grid;gap:6px;font-size:inherit;font-weight:400}
.avl-field input{width:100%;font:inherit;font-size:16px;padding:16px;border:1px solid var(--avl-hair);background:var(--avl-field);color:var(--avl-ink);border-radius:0;-webkit-appearance:none;appearance:none}
.avl-field input:focus,.avl-code:focus,.avl-tz:focus{outline:2px solid var(--avl-accent);outline-offset:0;border-color:var(--avl-accent)}
.avl-fieldset{border:0;margin:10px 0 0;padding:0;min-width:0}
.avl-fieldset legend{font-weight:1000;text-transform:uppercase;letter-spacing:.03em;line-height:1.35;margin:0 0 10px;padding:0}
.avl-radio{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;border:1px solid var(--avl-hair);background:var(--avl-field);padding:14px 16px;margin:0 0 8px;cursor:pointer;line-height:1.45}
.avl-radio input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--avl-ink)}
.avl-radio:has(input:checked){border-color:var(--avl-ink);box-shadow:inset 0 0 0 1px var(--avl-ink)}
.avl-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin:8px 0 6px;cursor:pointer;line-height:1.45}
.avl-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--avl-ink)}
.avl-check a,.avl-fine a{color:inherit}
.avl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.avl-fine{font-size:16px;line-height:1.5;margin:4px 0 0 !important;color:var(--avl-ink)}
.avl-err{display:none;border-left:3px solid var(--avl-err);background:var(--avl-field);color:var(--avl-err);font-weight:800;padding:10px 12px;font-size:15px;line-height:1.45}

/* «Continue with Google»: secondary, one quiet line above the form. Google branding (light theme): white fill,
   1 px #747775 stroke inside, #1F1F1F text, full-colour G at its own size; corners square to sit in Site 2026. */
.avl-google{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 20px;font-size:15px;color:var(--avl-muted)}
.avl-gbtn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:#FFFFFF;border:1px solid #747775;border-radius:0;color:#1F1F1F;font:500 14px/20px "Google Sans",Roboto,Arial,sans-serif;letter-spacing:.25px;cursor:pointer;white-space:nowrap}
.avl-gbtn:hover{background:#F8F9FA}
.avl-gbtn:focus-visible{outline:2px solid var(--avl-ink);outline-offset:2px}
.avl-glogo{display:inline-flex;width:18px;height:18px}
.avl-glogo svg{width:18px;height:18px}
.avl-google--done{color:var(--avl-ink)}
.avl-google--done b{font-weight:800}

/* Buttons: square amber, uppercase 1000 (Site 2026 .btn) */
.avl-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;text-align:center;text-transform:uppercase;background:var(--avl-accent);color:var(--avl-ink);border:3px solid var(--avl-accent);border-radius:0;cursor:pointer;padding:20px 28px;font:1000 16px/1.1 var(--avl-sans);letter-spacing:.05em;text-decoration:none;transition:background .15s,color .15s}
.avl-btn:hover{background:transparent}
.avl-btn:focus-visible,.avl-nav:focus-visible,.avl-day:focus-visible,.avl-slot:focus-visible,.avl-link:focus-visible{outline:2px solid var(--avl-ink);outline-offset:2px}
.avl-btn:disabled{opacity:.6;cursor:default}
.avl-btn:disabled:hover{background:var(--avl-accent)}
.avl-btn-ghost{background:transparent;border-color:var(--avl-ink)}
.avl-btn-ghost:hover{background:var(--avl-ink);color:var(--avl-page)}
.avl-actions .avl-btn{width:auto;flex:1 1 220px}
.avl-link{font:inherit;font-weight:800;background:none;border:0;padding:0;color:var(--avl-ink);text-decoration:underline;text-decoration-color:var(--avl-accent);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.avl-loading{padding:28px 0;color:var(--avl-muted)}

/* Time zone: impossible to miss — white plate, 3 px amber frame, amber square marker */
.avl-tzbanner{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;background:var(--avl-field);border:3px solid var(--avl-accent);padding:16px 18px}
.avl-tzdot{flex:0 0 12px;width:12px;height:12px;margin-top:7px;background:var(--avl-accent)}
.avl-tzmain{font-size:18px;line-height:1.35}
.avl-tzmain b{font-weight:1000}
.avl-tzsub{margin:6px 0 0 !important;font-size:16px;line-height:1.45}
.avl-tzconfirm{display:inline-block;background:var(--avl-accent-soft);padding:8px 12px;font-size:16px;line-height:1.4}
.avl-tzconfirm b{font-weight:1000}

/* Picker */
.avl-picker{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px 32px}
.avl-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.avl-month strong{font-size:16px;font-weight:1000;text-transform:uppercase;letter-spacing:.04em}
.avl-nav{font:inherit;font-size:22px;line-height:1;width:44px;height:44px;border:1px solid var(--avl-hair);background:var(--avl-field);color:var(--avl-ink);border-radius:0;cursor:pointer}
.avl-nav:hover{border-color:var(--avl-ink)}
.avl-nav:disabled{opacity:.3;cursor:default}
.avl-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.avl-wd{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--avl-muted);padding:4px 0}
.avl-day{font:inherit;font-size:15px;aspect-ratio:1;min-width:0;border:1px solid transparent;border-radius:0;background:transparent;color:var(--avl-dim);cursor:default;padding:0}
.avl-day.has{color:var(--avl-ink);font-weight:800;background:var(--avl-field);border-color:var(--avl-hair);cursor:pointer}
.avl-day.has:hover{border-color:var(--avl-ink)}
.avl-day.sel{background:var(--avl-ink);border-color:var(--avl-ink);color:var(--avl-page)}
.avl-tzrow{display:grid;gap:6px;margin-top:16px;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--avl-muted)}
.avl-tz{font:inherit;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;padding:12px;border:1px solid var(--avl-hair);background:var(--avl-field);color:var(--avl-ink);border-radius:0;max-width:100%}
.avl-slots{display:grid;gap:8px;align-content:start;max-height:380px;overflow:auto;padding-right:4px}
.avl-daytitle{margin:0 0 4px !important;font-weight:1000;text-transform:uppercase;letter-spacing:.03em}
.avl-slot{font:inherit;font-weight:800;font-size:16px;padding:14px 12px;border:1px solid var(--avl-hair);background:var(--avl-field);color:var(--avl-ink);border-radius:0;cursor:pointer}
.avl-slot:hover{border-color:var(--avl-ink)}
.avl-slot.sel{background:var(--avl-ink);border-color:var(--avl-ink);color:var(--avl-page)}

/* Confirm and code */
.avl-confirm{grid-column:1/-1;display:grid;gap:14px;border-top:1px solid var(--avl-hair);padding-top:22px}
.avl-coderow{display:grid;gap:8px}
.avl-code{font:inherit;font-size:22px;font-weight:800;letter-spacing:.3em;padding:12px 14px;border:1px solid var(--avl-hair);background:var(--avl-field);color:var(--avl-ink);border-radius:0;max-width:240px}
.avl-code::placeholder{letter-spacing:normal;font-size:17px;font-weight:600;color:var(--avl-muted)}

/* Done and manage */
.avl-when{font-size:22px;font-weight:1000;line-height:1.25;margin:0 0 12px !important}
.avl-done p,.avl-card > div > p{margin-bottom:12px}
.avl-done a{color:var(--avl-ink);font-weight:800;text-decoration-color:var(--avl-accent);text-decoration-thickness:2px;text-underline-offset:3px}
.avl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.avl-turnstile:empty{display:none}

/* 2026-10-23: narrow containers. In a 420 px box on a desktop window the viewport rule below never fired, so the
   calendar and the times stayed side by side and the day numbers ran into each other (Alex, screenshot 18:23). */
@container (max-width:520px){
  .avl-card{padding:28px 20px}
  .avl-picker{grid-template-columns:1fr}
  .avl-day{aspect-ratio:auto;height:44px}   /* full-width columns would make square days 55+ px tall */
  .avl-slots{max-height:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .avl-daytitle{grid-column:1/-1}
  .avl-tz{width:100%}
}
@container (max-width:420px){
  .avl-row{grid-template-columns:1fr}
  .avl-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avl-actions .avl-btn{flex-basis:100%}
}
@media (max-width:640px){
  .avl-card{padding:28px 20px}
  .avl-row{grid-template-columns:1fr}
  .avl-picker{grid-template-columns:1fr}
  .avl-slots{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .avl-daytitle{grid-column:1/-1}
  .avl-actions .avl-btn{flex-basis:100%}
}