/* Shared by /trial-lesson and /pricing. Page-specific styles stay inline in each page. */
.bk-hero { margin-top: 72px; padding: 56px 24px; background: oklch(93% 0.025 25); text-align: center; }
.bk-in { max-width: 1000px; margin: 0 auto; }
.bk-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 7vw, 76px); font-weight: 700; letter-spacing: -2px; line-height: 1.05; color: var(--ink); margin: 8px 0 14px; }
.bk-hero p { font-size: 18px; color: oklch(40% 0 0); max-width: 800px; margin: 0 auto 26px; }
.bk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 100px; background: var(--ink); color: #fff; font: 500 15px 'DM Sans', sans-serif; text-decoration: none; transition: opacity .15s; }
.bk-btn:hover { opacity: .8; }
.bk-btn-alt { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); cursor: pointer; }
.bk-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.bk-row { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) { .bk-row { display: grid; grid-template-columns: 1fr 1fr; } }
.bk-field { display: flex; flex-direction: column; gap: 7px; }
.bk-field label { font: 500 11px 'DM Sans', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: oklch(40% 0 0); }
.bk-field input { font: 16px 'DM Sans', sans-serif; color: var(--ink); background: #fff; border: 1.5px solid oklch(60% 0 0 / .35); border-radius: 8px; padding: 11px 14px; min-height: 46px; width: 100%; }
.bk-field input:focus-visible, .bk-field select:focus-visible, .bk-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* one select style for every modal select (language, level, format, best time, time zone) */
.bk-field select, .tw-tz select { -webkit-appearance: none; appearance: none; font: 16px 'DM Sans', sans-serif; color: var(--ink); min-height: 46px; width: 100%; padding: 11px 44px 11px 14px; border: 1.5px solid oklch(60% 0 0 / .35); border-radius: 8px; cursor: pointer; text-overflow: ellipsis; transition: border-color .2s;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 14px 8px; }
.bk-field select:hover, .tw-tz select:hover { border-color: oklch(45% 0 0 / .7); }
.bk-field select:focus, .tw-tz select:focus { border-color: var(--ink); }
.bk-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: oklch(35% 0 0); }
.bk-consent input { margin-top: 3px; flex-shrink: 0; accent-color: oklch(15% 0 0); }
.bk-consent a { color: inherit; }
.bk-form button[type="submit"] { align-self: flex-start; border: 0; cursor: pointer; }
.bk-err { min-height: 0; margin: 12px 0 0; font-size: 14px; color: var(--coral-text); }
.bk-err:empty { margin: 0; }
.bk-btn[hidden] { display: none; }
.bk-wl-form { max-width: none; }
@media (max-width: 767px) { .bk-hero { padding: 44px 20px; } .bk-form button[type="submit"] { width: 100%; } }
.bk-wl-foot { display: flex; flex-direction: column; gap: 14px; }

/* Waitlist modal (reusable <dialog>, behaviour in booking.js). Desktop: centered card. Mobile: near full-screen sheet that follows the visible viewport. */
html.bk-lock { overflow: hidden; scrollbar-gutter: stable; }
.bk-modal { margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--white); color: var(--ink); width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); overflow: hidden; box-shadow: 0 24px 64px oklch(15% 0 0 / .28); }
.bk-modal[open] { display: flex; flex-direction: column; }
.bk-modal::backdrop { background: oklch(15% 0 0 / .55); }
.bk-modal [hidden] { display: none; }
.bk-modal-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 14px 6px 24px; }
.bk-modal-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding-top: 4px; }
.bk-modal-tag { font: 500 11px 'DM Sans', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: oklch(40% 0 0); }
.bk-modal-title { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 700; letter-spacing: -.8px; line-height: 1.1; color: var(--ink); margin: 0; }
.bk-modal-x { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 100px; background: transparent; color: var(--ink); cursor: pointer; }
.bk-modal-x:hover { background: oklch(93% 0.025 25); }
.bk-modal-x:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bk-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px; }
.bk-modal .bk-wl-sub { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: oklch(35% 0 0); }
.bk-modal .bk-wl-form { flex: 1 0 auto; max-width: none; }
.bk-modal .bk-wl-foot { position: sticky; bottom: 0; margin-top: auto; gap: 0; padding: 12px 0 calc(22px + env(safe-area-inset-bottom)); background: var(--white); }
.bk-modal .bk-form button[type="submit"] { width: 100%; }
.bk-wl-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) {
  .bk-modal { position: fixed; left: 0; right: 0; bottom: auto; top: calc(var(--vvt, 0px) + max(12px, env(safe-area-inset-top))); margin: 0; width: 100%; max-width: 100%; height: calc(var(--vvh, 100dvh) - max(12px, env(safe-area-inset-top))); max-height: none; border-radius: 20px 20px 0 0; }
  .bk-modal-head { padding: 14px 12px 4px 20px; }
  .bk-modal-title { font-size: 28px; }
  .bk-modal-body { padding: 0 20px; }
}

/* Trial lesson wizard (markup in _partials/trial-wizard.html, logic in booking-trial.js). Used inline on /trial-lesson and inside the trial modal on /pricing. */
  /* trial wizard */
  .tw { max-width: 640px; margin: 8px auto 0; text-align: left; background: #fff; border-radius: 20px; padding: 28px 24px; box-shadow: 0 6px 24px oklch(0% 0 0 / .06); }
  .tw h2 { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 700; letter-spacing: -1px; color: var(--ink); margin: 0 0 6px; }
  .tw-sub, .tw-sum { font-size: 16px; color: oklch(40% 0 0); margin: 0 0 18px; max-width: none; }
  .bk-hero .tw p { max-width: none; margin-left: 0; margin-right: 0; }
  .tw-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; }
  .tw-steps li { flex: 1; font: 500 12px 'DM Sans', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: oklch(48% 0 0); padding-top: 8px; border-top: 3px solid oklch(88% 0 0); }
  .tw-steps li.active, .tw-steps li.done { color: var(--ink); border-top-color: var(--purple); }
  .tw-step { display: none; }
  .tw-step.active { display: block; }
  .tw-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tw-lang { font: 600 22px 'Cormorant Garamond', serif; text-align: left; min-height: 56px; padding: 0 18px; border: 2px solid oklch(85% 0 0); border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
  .tw-lang:hover { border-color: oklch(60% 0 0); }
  .tw-lang[aria-checked="true"] { border-color: var(--ink); background: oklch(95% 0.02 290); }
  .tw-tz { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font: 500 11px 'DM Sans', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: oklch(40% 0 0); }
  .tw-tz select { letter-spacing: 0; text-transform: none; max-width: 100%; }
  .tw-status { font-size: 15px; color: oklch(40% 0 0); margin: 0 0 12px; }
  .tw-days, .tw-slots { display: flex; flex-wrap: wrap; gap: 8px; }
  .tw-day { min-width: 72px; min-height: 56px; padding: 8px 14px; border: 2px solid oklch(85% 0 0); border-radius: 10px; background: transparent; font: 500 15px 'DM Sans', sans-serif; color: var(--ink); cursor: pointer; text-align: center; }
  .tw-day small { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--purple-text); }
  .tw-day[aria-pressed="true"] { border-color: var(--ink); background: oklch(95% 0.02 290); }
  .tw-times { border-top: 1.5px solid oklch(90% 0 0); margin-top: 18px; padding-top: 16px; }
  .tw-day-label { font: 500 14px 'DM Sans', sans-serif; color: oklch(35% 0 0); margin: 0 0 10px; }
  .tw-slot { min-height: 48px; min-width: 76px; padding: 0 18px; border: 2px solid oklch(85% 0 0); border-radius: 10px; background: transparent; font: 500 16px 'DM Sans', sans-serif; color: var(--ink); cursor: pointer; }
  .tw-slot sup { font-size: 10px; margin-left: 2px; }
  .tw-slot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .tw-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
  .tw-back { min-height: 48px; padding: 0 24px; border: 1.5px solid oklch(80% 0 0); border-radius: 100px; background: transparent; font: 500 15px 'DM Sans', sans-serif; color: oklch(35% 0 0); cursor: pointer; }
  .tw-sum { display: inline-block; padding: 10px 16px; border-radius: 10px; background: oklch(95% 0.02 290); font-weight: 500; color: var(--ink); }
  .tw-note { font-size: 14px; color: oklch(40% 0 0); border-left: 3px solid var(--purple); padding-left: 12px; margin: 0 0 18px; }
  .tw .bk-form { max-width: none; }
  .tw-lang:focus-visible, .tw-day:focus-visible, .tw-slot:focus-visible, .tw-back:focus-visible, .tw-tz select:focus-visible, #tw-done:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  @media (max-width: 767px) { .tw { padding: 22px 18px; } .tw-langs { grid-template-columns: 1fr; } .tw-nav .bk-btn { flex: 1; } }
.tw-none { margin-bottom: 4px; }
.tw-none .tw-sub { margin-bottom: 14px; }
.tw-done-close { display: none; }

/* Trial modal: the wizard sits in the modal without its own card; each step's buttons stay reachable at the bottom */
@media (min-width: 768px) { .bk-modal-wide { width: min(760px, calc(100% - 32px)); } }
.bk-modal .tw { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: transparent; }
.bk-modal .bk-modal-body { scroll-padding-bottom: 110px; }
.bk-modal .tw-nav { position: sticky; bottom: 0; margin-top: 18px; padding: 12px 0 calc(22px + env(safe-area-inset-bottom)); background: var(--white); }
.bk-modal .tw-done-close { display: flex; }