/* =====================================================================
   seemyevent.com, the booking builder (/book) and "You're live"
   (/book-done). Loaded on those two pages only, after site.css, and built
   from its tokens and pieces: the type cards, chips, fields, the step
   indicator and the seal buttons. Mobile first.
   ===================================================================== */

/* ---------- the page ---------- */
.page-book .callbar, .page-book .sticky-cta { display: none !important; }
.bk { position: relative; padding: clamp(16px, 4vw, 44px) 0 clamp(56px, 8vw, 96px); overflow: clip; }
/* haikei circle scatter, as behind the old quote card: kept to the edges so it never sits behind words */
.bk::before { content: ''; position: absolute; inset: 0; background: url('/assets/img/bg/confetti.svg') center top / 720px repeat; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, transparent 72%, #000 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, transparent 72%, #000 100%); opacity: .7; pointer-events: none; z-index: -1; }
@media (max-width: 719px) { .bk::before { display: none; } }
.bk-head { display: grid; gap: 12px; justify-items: start; margin-bottom: clamp(18px, 3vw, 30px); max-width: 760px; }
.bk-title { font-size: clamp(40px, 7vw, 72px); line-height: .96; letter-spacing: -.04em; font-weight: 780; font-stretch: 84%; }
.bk-lede { font-size: clamp(17px, 1.8vw, 20px); color: var(--ink-2); max-width: 34em; }
.bk-note { margin-bottom: 16px; max-width: 780px; }

.bk-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .bk-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; } }
@media (min-width: 1160px) { .bk-grid { grid-template-columns: minmax(0, 1fr) 370px; gap: 36px; } }
.bk-card { min-width: 0; background: var(--card); border: 1px solid var(--fog); border-radius: 30px; padding: clamp(16px, 4vw, 36px); box-shadow: 0 40px 80px -50px rgba(20, 20, 31, .45); position: relative; }
@media (max-width: 380px) { .bk-card { padding: 14px; border-radius: 24px; } }

/* ---------- the step indicator (the quote form's, with four stops) ---------- */
.bk-steps { list-style: none; margin: 0 0 22px; padding: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--mist); border-radius: 999px; position: relative; --bkstep: 0; }
.bk-steps::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 999px; background: var(--ink); transform: translateX(calc(var(--bkstep) * 100%)); transition: transform .45s var(--spring); }
.bk-steps li { position: relative; z-index: 1; min-width: 0; display: flex; }
.bk-steps button { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 6px; border: 0; background: none; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--slate); transition: color .3s; }
.bk-steps button:hover { color: var(--ink); }
.bk-steps .bk-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(20, 20, 31, .08); transition: background .3s, color .3s; }
.bk-steps .bk-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-steps button[aria-current="step"] { color: #fff; }
.bk-steps button[aria-current="step"] .bk-n, .bk-steps .is-done .bk-n { background: var(--seal); color: #fff; }
.bk-steps button:focus-visible { outline-offset: -3px; }
@media (max-width: 639px) { .bk-steps .bk-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
html:not(.js) .bk-steps, html:not(.js) .bk-nav, html:not(.js) [data-pay], html:not(.js) .bk-bar, html:not(.js) .bk-up-add { display: none !important; }

/* ---------- a step ---------- */
.bk-form { margin: 0; }
.bk-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 20px; }
.js .bk-step:not(.is-on) { display: none; }
.js .bk-step.is-on { animation: step-in .45s var(--ease); }
.bk-step + .bk-step { margin-top: 44px; }
.js .bk-step + .bk-step { margin-top: 0; }
.bk-step > legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font: 760 clamp(26px, 3.6vw, 34px)/1.08 var(--display); letter-spacing: -.025em; }
.bk-step > legend + * { clear: both; }
.bk-step > legend:focus { outline: none; }
.bk-count { display: block; margin-bottom: 8px; font: 650 14px/1.3 var(--body); letter-spacing: 0; color: var(--seal-deep); }
.bk-step .sub legend { font-size: 16px; }
.bk-step .field > label { font-weight: 650; font-size: 15px; }
.bk-step .hint { margin-top: -1px; }
.bk-step .q-err { margin: -4px 0 0; }
.bk-step .field .q-err { margin: 0; }
.bk-when, .bk-you { align-items: start; }
@media (min-width: 640px) { .bk-you { grid-template-columns: 1fr 1fr; } .bk-you > :first-child { grid-column: 1 / -1; } }
.bk-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; }
.bk-nav .btn { min-width: 132px; }
.bk-nav .btn .ic { width: 18px; height: 18px; }
@media (max-width: 479px) { .bk-nav { flex-direction: column-reverse; align-items: stretch; } .bk-nav > span:empty { display: none; } .bk-nav .btn { width: 100%; min-width: 0; } .bk-nav-last .text-link { justify-content: center; text-align: center; } }

/* ---------- step 2: the extras, as check cards ---------- */
.bk-opts { display: grid; gap: 10px; }
@media (min-width: 640px) { .bk-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the guest slider: an exact number, with a box to type it */
.bk-guests { gap: 12px; }
.bk-guests-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.bk-guests-top label { font-weight: 650; font-size: 16px; }
.bk-guests-n { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); }
.bk-guests-n input { width: 5.2em; min-height: 48px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--fog); background: var(--card); font: 760 22px/1 var(--display); color: var(--ink); text-align: center; -moz-appearance: textfield; }
.bk-guests-n input::-webkit-outer-spin-button, .bk-guests-n input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bk-guests-n input:focus-visible { outline: 3px solid var(--seal); outline-offset: 2px; }
.bk-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.bk-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--seal) 0 var(--fill, 10%), var(--fog) var(--fill, 10%)); }
.bk-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--fog); }
.bk-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--seal); }
.bk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--card); border: 3px solid var(--seal); box-shadow: 0 2px 8px rgba(20, 20, 31, .18); }
.bk-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 3px solid var(--seal); box-shadow: 0 2px 8px rgba(20, 20, 31, .18); }
.bk-range:focus-visible { outline: 3px solid var(--seal); outline-offset: 4px; border-radius: 999px; }
.bk-range-scale { display: flex; justify-content: space-between; margin-top: -6px; color: var(--slate); font-size: 13px; }

/* the card form, right in step 4 */
.bk-checkout { display: grid; gap: 12px; }
.bk-checkout[hidden] { display: none; }
.bk-checkout-mount { min-height: 380px; border-radius: 18px; overflow: hidden; background: var(--card); }
/* the card fields drawn by Stripe inside our own form, styled like the site (book.js coAppearance) */
.bk-checkout.is-elements .bk-checkout-mount { min-height: 0; overflow: visible; display: grid; gap: 16px; }
.bk-co-express[hidden], .bk-co-or[hidden] { display: none; }
.bk-co-or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--slate); font-size: 14px; font-weight: 600; }
.bk-co-or::before, .bk-co-or::after { content: ""; flex: 1; height: 1px; background: var(--fog); }
.bk-co-card { min-height: 220px; }
.bk-co-ssl { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 0; padding: 10px 12px; border-radius: 12px; background: #EEF7F1; color: #0D5A3D; font-size: 14px; line-height: 1.45; }
.bk-co-ssl svg { flex: none; margin-top: 2px; }
.bk-co-err { margin: 0; }
.bk-checkout .btn { justify-self: start; }

.bk-opt { position: relative; min-width: 0; display: flex; }
.bk-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bk-opt-ui { flex: 1; min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 15px 16px; border-radius: 18px; border: 1.5px solid var(--fog); background: var(--paper); transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease); }
.bk-opt:hover .bk-opt-ui { border-color: #C5C7D3; }
.bk-box { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid #C5C7D3; background: var(--card); display: grid; place-items: center; color: transparent; margin-top: 1px; transition: background .2s, border-color .2s, color .2s; }
.bk-opt-t { display: grid; gap: 3px; min-width: 0; }
.bk-opt-t strong { font-weight: 700; font-size: 16px; line-height: 1.25; }
.bk-opt-t > span { font-size: 14px; line-height: 1.45; color: var(--slate); transition: color .2s; }
.bk-opt-p { font-size: 13px; font-weight: 700; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--mist); color: var(--ink-2); transition: background .2s, color .2s; }
.bk-opt input:checked + .bk-opt-ui { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-opt input:checked + .bk-opt-ui .bk-box { background: var(--seal); border-color: var(--seal); color: #fff; }
.bk-opt input:checked + .bk-opt-ui .bk-opt-t > span { color: #C5C7D3; }
.bk-opt input:checked + .bk-opt-ui .bk-opt-p { background: rgba(255, 255, 255, .12); color: #FF8C9D; }
.bk-opt input:focus-visible + .bk-opt-ui { outline: 3px solid var(--seal); outline-offset: 3px; }
@media (max-width: 359px) { .bk-opt-ui { grid-template-columns: 24px minmax(0, 1fr); } .bk-opt-p { grid-column: 2; justify-self: start; } }

.bk-pay { grid-column: 1 / -1; display: grid; gap: 16px; padding: 18px; border-radius: 20px; background: var(--seal-soft); border: 1px solid #F2D2D8; animation: step-in .35s var(--ease); }
@media (min-width: 640px) { .bk-pay { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.bk-pay[hidden] { display: none; }
.bk-pay .field input, .bk-pay .field textarea { background: #fff; }
.bk-ticket { max-width: 320px; }
.bk-money { position: relative; display: block; }
.bk-money > span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 650; color: var(--ink-2); pointer-events: none; }
/* How guests pay the host: card accounts connected after paying, payment app names, a note */
.bk-payhow { grid-column: 1 / -1; display: grid; gap: 14px; min-width: 0; }
.bk-payhow-h { margin: 0; }
.bk-payhow-h strong { display: block; font-size: 16px; }
.bk-payhow-h span { display: block; margin-top: 2px; color: var(--ink-2); font-size: 15px; }
.bk-paycards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.bk-paycard { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #F2D2D8; border-radius: 16px; background: #fff; cursor: pointer; }
.bk-paycard input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--seal); }
.bk-paycard strong { display: block; font-size: 15px; }
.bk-paycard small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.bk-paycard:has(input:checked) { border-color: var(--seal); box-shadow: inset 0 0 0 1px var(--seal); }
.bk-paycard:focus-within { outline: 3px solid var(--seal); outline-offset: 2px; }
.bk-payapps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bk-payapps .field { margin: 0; min-width: 0; }
.bk-payafter { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.field .bk-money input { padding-left: 32px; }

/* ---------- step 3: colors, fonts, pictures ---------- */
.bk-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-color { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 9px 12px 9px 9px; border-radius: 18px; border: 1.5px solid var(--fog); background: var(--paper); cursor: pointer; transition: border-color .2s; }
.bk-color:hover { border-color: #C5C7D3; }
.bk-color:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(20, 20, 31, .07); }
.bk-color input { -webkit-appearance: none; appearance: none; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(20, 20, 31, .12); }
.bk-color input::-webkit-color-swatch-wrapper { padding: 0; }
.bk-color input::-webkit-color-swatch { border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(20, 20, 31, .14); }
.bk-color input::-moz-color-swatch { border: 0; border-radius: 12px; }
.bk-color input:focus-visible { outline: 3px solid var(--seal); outline-offset: 2px; }
.bk-color > span { display: grid; gap: 1px; min-width: 0; }
.bk-color strong { font-size: 15px; font-weight: 650; line-height: 1.25; }
.bk-color small { font-size: 13px; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (max-width: 359px) { .bk-colors { grid-template-columns: 1fr; } }
.bk-contrast { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--amber-soft); color: var(--amber); font-size: 14px; font-weight: 600; line-height: 1.45; }
.bk-contrast[hidden] { display: none; }
.bk-contrast .ic { margin-top: .12em; }

.bk-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .bk-fonts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bk-font { position: relative; min-width: 0; display: flex; }
.bk-font input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bk-font-ui { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr auto; border-radius: 18px; border: 1.5px solid var(--fog); background: var(--card); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.bk-font:hover .bk-font-ui { border-color: #C5C7D3; }
.bk-font-sample { display: grid; align-content: center; gap: 4px; min-height: 96px; padding: 14px 12px; background: var(--fc-bg, #fff); text-align: center; }
.bk-font-h { font-family: var(--fc-head), Georgia, serif; font-weight: var(--fc-w, 700); font-size: 21px; line-height: 1.1; color: var(--fc-accent, var(--seal)); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-font-b { font-family: var(--fc-body), system-ui, sans-serif; font-size: 13px; line-height: 1.3; color: var(--fc-ink, var(--ink-2)); opacity: .82; }
.bk-font-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 40px; padding: 8px 10px 8px 12px; font-size: 14px; font-weight: 650; border-top: 1px solid var(--fog); }
.bk-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: transparent; flex: none; transition: background .2s, color .2s; }
.bk-font input:checked + .bk-font-ui { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.bk-font input:checked + .bk-font-ui .bk-tick { background: var(--seal); color: #fff; }
.bk-font input:focus-visible + .bk-font-ui { outline: 3px solid var(--seal); outline-offset: 3px; }

.bk-up { display: grid; gap: 8px; }
.bk-up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.bk-up-grid-logo { grid-template-columns: repeat(auto-fill, minmax(112px, 136px)); }
.bk-up-item { position: relative; margin: 0; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--mist); border: 1px solid var(--fog); }
.bk-up-item img { width: 100%; height: 100%; object-fit: cover; }
.bk-up-logo img { object-fit: contain; padding: 10px; background: repeating-conic-gradient(#EFF0F5 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.bk-up-item.is-busy img { opacity: .55; filter: saturate(.6); }
.bk-up-prog { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .8); overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.bk-up-prog i { display: block; height: 100%; width: 0; background: var(--seal); border-radius: inherit; transition: width .2s linear; }
.bk-up-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(20, 20, 31, .22); }
.bk-up-x::after { content: ''; position: absolute; inset: -6px; }
.bk-up-x:hover { background: #fff; color: var(--seal-deep); }
.bk-up-add { position: relative; aspect-ratio: 1; min-height: 92px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 10px; border-radius: 16px; border: 1.5px dashed #C5C7D3; background: var(--paper); color: var(--ink-2); font-size: 14px; font-weight: 650; text-align: center; line-height: 1.2; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.bk-up-add .ic { color: var(--seal); }
.bk-up-add:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
.bk-up-add:focus-within { outline: 3px solid var(--seal); outline-offset: 3px; }
.bk-up-add.is-off { opacity: .45; pointer-events: none; }
.bk-up .q-err, .bk-up .q-hint { margin: 0; }

/* ---------- the live preview ---------- */
.bk-preview { border-radius: 22px; overflow: hidden; border: 1px solid var(--fog); background: var(--card); box-shadow: 0 30px 60px -40px rgba(20, 20, 31, .4); }
.bk-pv-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--mist); border-bottom: 1px solid var(--fog); }
.bk-pv-dots { display: flex; gap: 5px; flex: none; }
.bk-pv-dots i { width: 8px; height: 8px; border-radius: 50%; background: #CDD0DA; }
.bk-pv-url { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bk-pv-url > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-pv-url .ic { color: var(--mint); }
.bk-pv-page { display: grid; justify-items: center; gap: 6px; padding: 28px 18px 26px; text-align: center; background: var(--pv-bg, #fff); color: var(--pv-ink, var(--ink)); transition: background .3s, color .3s; }
.bk-pv-logo { max-width: 96px; max-height: 64px; width: auto; height: auto; object-fit: contain; margin-bottom: 4px; }
.bk-pv-kicker { margin: 0; font: 600 13px/1.35 var(--pv-body), system-ui, sans-serif; opacity: .75; }
.bk-pv-title { margin: 0; font: var(--pv-head-w, 700) clamp(26px, 3vw, 32px)/1.06 var(--pv-head), Georgia, serif; color: var(--pv-accent-text, var(--seal)); overflow-wrap: anywhere; text-wrap: balance; }
.bk-pv-where { margin: 0; font: 400 14px/1.4 var(--pv-body), system-ui, sans-serif; opacity: .78; }
.bk-pv-btn { margin-top: 10px; display: inline-flex; align-items: center; min-height: 36px; padding: 0 22px; border-radius: 999px; background: var(--pv-accent, var(--seal)); color: var(--pv-btn-ink, #fff); font: 700 14px/1 var(--pv-body), system-ui, sans-serif; }
.bk-preview-inline { display: block; }
/* The preview in the design's layout and art (the same ideas as sme_layout_css() and sme_art_html() for the real site). */
.bk-pv-page { position: relative; isolation: isolate; overflow: hidden; --a1: var(--pv-accent); --a2: color-mix(in srgb, var(--pv-accent) 50%, var(--pv-bg)); --a3: color-mix(in srgb, var(--pv-accent) 24%, var(--pv-bg));
  --a4: color-mix(in srgb, var(--pv-accent) 12%, var(--pv-bg)); --a5: color-mix(in srgb, var(--pv-accent) 50%, #6E7BFF); --a-line: color-mix(in srgb, var(--pv-ink) 18%, transparent); }
.bk-pv-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bk-pv-big, .bk-pv-ticket { display: none; }
.bk-preview { --pv-photo: none; }
.bk-preview.l-poster .bk-pv-page { justify-items: start; text-align: left; padding-top: 104px; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, .74)), var(--pv-photo) center / cover no-repeat, linear-gradient(160deg, var(--pv-accent), color-mix(in srgb, var(--pv-accent) 30%, #000)); }
.bk-preview.l-poster .bk-pv-title { color: #FFFFFF; font-size: clamp(30px, 3.6vw, 38px); }
.bk-preview.l-stationery .bk-pv-page { padding: 36px 28px 32px; box-shadow: inset 0 0 0 10px var(--pv-bg), inset 0 0 0 11px color-mix(in srgb, var(--pv-accent-text) 60%, transparent), inset 0 0 0 14px var(--pv-bg), inset 0 0 0 15px color-mix(in srgb, var(--pv-accent-text) 30%, transparent); }
.bk-preview.l-stationery .bk-pv-kicker { font-style: italic; }
.bk-preview.l-ticket .bk-pv-page { background: radial-gradient(90% 60% at 85% 0%, color-mix(in srgb, var(--pv-accent) 26%, transparent), transparent 70%), var(--pv-bg); }
.bk-preview.l-ticket .bk-pv-ticket { display: grid; gap: 7px; width: min(230px, 92%); margin-top: 8px; padding: 13px 18px; border-radius: 10px; background: #FFFDF6;
  -webkit-mask: radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.bk-pv-ticket i { display: block; height: 6px; border-radius: 3px; background: rgba(20, 20, 31, .18); }
.bk-pv-ticket i:last-child { width: 58%; }
.bk-preview.l-night .bk-pv-page { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--pv-accent) 30%, transparent), transparent 65%), var(--pv-bg); }
.bk-preview.l-night .bk-pv-title { text-shadow: 0 0 16px color-mix(in srgb, var(--pv-accent) 65%, transparent); }
.bk-preview.l-night .bk-pv-btn { box-shadow: 0 0 20px -4px var(--pv-accent); }
.bk-preview.l-confetti .bk-pv-page { background: radial-gradient(circle at 10% 14%, var(--pv-accent) 0 5px, transparent 6px), radial-gradient(circle at 88% 18%, #FFD27A 0 6px, transparent 7px), radial-gradient(circle at 8% 84%, #9CC9F0 0 6px, transparent 7px), radial-gradient(circle at 90% 82%, #F7B5C8 0 5px, transparent 6px), radial-gradient(circle at 62% 6%, #B8E2C8 0 4px, transparent 5px), var(--pv-bg); }
.bk-preview.l-editorial .bk-pv-page { justify-items: start; text-align: left; }
.bk-preview.l-editorial .bk-pv-page::before { content: ""; width: 34px; height: 4px; margin-bottom: 4px; background: var(--pv-accent); }
.bk-preview.l-editorial .bk-pv-big:not(:empty) { display: block; margin: 0; font: var(--pv-head-w, 700) 56px/.9 var(--pv-head), Georgia, serif; letter-spacing: -.02em; color: var(--pv-accent-text); }
.bk-preview.l-editorial .bk-pv-btn { border-radius: 8px; }
.bk-design-hint { margin: -2px 0 2px; }
.bk-preview-inline .bk-pv-page { padding: 22px 16px 20px; }
@media (min-width: 1000px) { .bk-preview-inline { display: none; } }

/* ---------- the price: side card (desktop), inline at step 4, bottom bar (phones) ---------- */
.bk-side { display: none; }
@media (min-width: 1000px) {
  .bk-side { display: grid; gap: 14px; position: sticky; top: calc(var(--nav-h) + 20px); }
}
.bk-sum { background: var(--card); border: 1px solid var(--fog); border-radius: 24px; padding: 20px 22px; display: grid; gap: 12px; }
.bk-sum-inline { background: var(--paper); }
@media (min-width: 1000px) { .bk-sum-inline { display: none; } }
.bk-sum-h { font-size: 20px; letter-spacing: -.015em; }
.bk-price { display: grid; gap: 10px; }
.bk-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 15px; color: var(--ink-2); line-height: 1.35; }
.bk-lines li .money { color: var(--ink); font-weight: 650; }
.bk-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--fog); font-weight: 650; }
.bk-total strong { font: 780 clamp(30px, 3vw, 36px)/1 var(--display); letter-spacing: -.03em; font-stretch: 88%; }
.bk-price-empty { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.bk-price-empty strong { color: var(--ink); }
.bk-saved { display: inline-flex; align-items: center; gap: 5px; margin: 0; min-height: 18px; font-size: 13px; font-weight: 600; color: var(--slate); }
.bk-saved .ic { width: 14px; height: 14px; color: var(--mint); }
.bk-saved[data-tone="warn"] { color: var(--amber); }
.bk-side-note { display: flex; gap: 8px; align-items: flex-start; padding: 0 6px; font-size: 14px; color: var(--slate); font-weight: 550; }
.bk-side-note .ic { color: var(--seal); margin-top: .18em; }

.bk-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40; border-radius: 22px; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--fog); box-shadow: 0 16px 36px -14px rgba(20, 20, 31, .45); overflow: hidden; transition: transform .35s var(--ease), opacity .25s; }
.bk-bar.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
.bk-bar-btn { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 18px; border: 0; background: none; text-align: left; }
.bk-bar-label { flex: 1; min-width: 0; display: grid; font-weight: 650; font-size: 15px; line-height: 1.2; }
.bk-bar-label .bk-saved { font-size: 12px; min-height: 0; }
.bk-bar-btn strong { font: 780 24px/1 var(--display); letter-spacing: -.02em; font-stretch: 88%; }
.bk-bar-chev { color: var(--slate); transition: transform .3s var(--ease); }
.bk-bar-btn[aria-expanded="true"] .bk-bar-chev { transform: rotate(180deg); }
.bk-bar-btn:focus-visible { outline-offset: -4px; border-radius: 20px; }
.bk-bar-lines { padding: 16px 18px 4px; max-height: 52svh; overflow: auto; border-bottom: 1px solid var(--fog); }
.bk-bar-lines .bk-total { display: none; }
@media (min-width: 1000px) { .bk-bar { display: none; } }
@media (max-width: 999px) { .page-book .foot { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } }

/* ---------- step 4: pay ---------- */
.bk-credit { display: grid; gap: 6px; }
.bk-credit .link-btn { justify-self: start; text-decoration: none; color: var(--ink-2); }
.bk-credit .link-btn .ic { color: var(--seal); }
.bk-credit .link-btn:hover { color: var(--ink); text-decoration: underline; }
.bk-credit .field { max-width: 320px; }
.bk-credit .field input { text-transform: uppercase; letter-spacing: .04em; }
.bk-line-credit, .bk-lines .bk-line-credit .money { color: var(--mint); }
.bk-agree-wrap { display: grid; gap: 2px; }
.bk-agree { font-size: 16px; min-height: 44px; align-items: center; }
.bk-agree a { color: var(--seal-deep); font-weight: 700; text-underline-offset: 3px; }
.bk-agree-hint { margin: 0 0 0 32px; font-size: 14px; color: var(--slate); }
.bk-agree-wrap .q-err { margin: 6px 0 0 32px; }
.bk-payerr { display: grid; gap: 10px; }
.bk-payerr[hidden] { display: none; }
.bk-payerr .btn { justify-self: start; }
.bk-paybtn { min-height: 62px; font-size: 18px; }
.bk-secure { margin-top: -8px; font-size: 14px; color: var(--slate); font-weight: 550; text-align: center; text-wrap: balance; }
.bk-secure .ic { color: var(--mint); vertical-align: -2px; margin-right: 2px; }
.bk-top { margin-bottom: 18px; display: grid; gap: 10px; }
.bk-top[hidden] { display: none; }
.bk-top .btn { justify-self: start; }

/* ---------- full-card messages: already paid, booking off, "You're live" ---------- */
.bk-msg { max-width: 640px; margin: 0 auto; display: grid; justify-items: center; text-align: center; gap: 14px; padding-top: clamp(32px, 6vw, 52px); padding-bottom: clamp(32px, 6vw, 52px); }
.bk-msg h1, .bk-msg h2 { font-size: clamp(30px, 5vw, 44px); font-stretch: 88%; }
.bk-msg > p { color: var(--ink-2); max-width: 32em; }
.bk-msg .cta-row { margin-top: 6px; }
.bk-msg-ic { width: 76px; height: 76px; border-radius: 999px 999px 10px 10px; background: var(--seal-soft); color: var(--seal); display: grid; place-items: center; }

.done { padding: clamp(24px, 5vw, 64px) 0 clamp(64px, 9vw, 112px); position: relative; overflow: clip; }
.done-card { max-width: 680px; }
.done-card .confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.done-link { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--paper); border: 1.5px solid var(--fog); text-align: left; }
.done-link a { flex: 1; min-width: 0; font: 700 clamp(16px, 2.4vw, 19px)/1.3 var(--display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.done-link a:hover { text-decoration: underline; text-decoration-color: var(--seal); text-underline-offset: 4px; }
.done-link .btn { flex: none; }
@media (max-width: 419px) { .done-link { flex-direction: column; align-items: stretch; padding: 14px; } .done-link a { text-align: center; } }
.done-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; width: 100%; text-align: left; }
.done-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--fog); color: var(--ink-2); font-size: 16px; }
.done-steps li strong { color: var(--ink); display: block; }
.done-steps .ic { color: var(--seal); margin-top: .15em; }
.done-steps .done-ol { margin: 6px 0 8px; padding-left: 20px; list-style: decimal; }
.done-steps .done-ol li { display: list-item; margin: 0 0 4px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 15px; }
.done-facts { width: 100%; text-align: left; }
.done-fine { font-size: 14px; color: var(--slate); }
.done-fine a { color: var(--ink-2); font-weight: 650; }

/* The cover photo: marked in the uploader, and in the preview it opens every design, faded into the page like the real site. */
.bk-cover-hint { margin: -2px 0 12px; }
.bk-up-item.is-cover { outline: 3px solid var(--seal, #C81E37); outline-offset: 2px; }
.bk-up-badge { position: absolute; left: 6px; bottom: 6px; padding: 3px 9px; border-radius: 999px; background: var(--seal, #C81E37); color: #FFFFFF; font-size: 12px; font-weight: 700; }
.bk-up-cover { position: absolute; left: 6px; right: 6px; bottom: 6px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 999px; background: rgba(20, 20, 31, .78); color: #FFFFFF; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.bk-up-cover:hover { background: rgba(20, 20, 31, .92); }
.bk-up-cover:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 1px; }
.bk-preview.has-photo .bk-pv-art { display: none; }
.bk-preview.has-photo .bk-pv-page { justify-items: start; text-align: left; padding-top: 118px; color: var(--pv-ink); box-shadow: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 26%, color-mix(in srgb, var(--pv-bg) 50%, transparent) 54%, var(--pv-bg) 78%), var(--pv-photo) top center / 100% auto no-repeat, var(--pv-bg); }
.bk-preview.has-photo .bk-pv-title { color: var(--pv-ink); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }