/* Business websites (6 Nov 2026): one markup (Pages/Site.cshtml), three looks. The accent and the text colour on it come
   from the page (--accent, --on-accent). Floodlight is dark; Clubhouse and Lane are light; none follows the viewer's theme. */
@font-face { font-family: "Manrope"; src: url("/fonts/Manrope-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/Manrope-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Anton"; src: url("/fonts/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root { --accent: #d8ff2e; --on-accent: #101214; --gap: clamp(16px, 4vw, 48px); }
.tpl-floodlight { --bg: #101214; --fg: #f2f1ea; --muted: #c9c8bf; --card: #171a1d; --line: #2a2e33; --soft: #1c2024; --display: "Anton", Impact, "Arial Narrow", sans-serif; --radius: 16px; --btn-radius: 999px; }
.tpl-clubhouse { --bg: #f7f3ea; --fg: #1f2a24; --muted: #4f5a53; --card: #fffdf7; --line: #e2dccc; --soft: #e6dfcf; --display: Georgia, "Times New Roman", serif; --radius: 16px; --btn-radius: 10px; }
.tpl-lane { --bg: #ffffff; --fg: #13202b; --muted: #48555f; --card: #ffffff; --line: #e3e8ec; --soft: #f1f5f8; --display: "Manrope", "Segoe UI", system-ui, sans-serif; --radius: 12px; --btn-radius: 8px; }

* { box-sizing: border-box; }
html { color-scheme: light; }
.tpl-floodlight { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Manrope", "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip-link { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip-link:focus { top: 8px; }
h1, h2, h3 { margin: 0; font-family: var(--display); line-height: 1.05; text-wrap: balance; font-weight: 800; }
.tpl-floodlight h1, .tpl-floodlight h2 { font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
.tpl-clubhouse h1, .tpl-clubhouse h2 { font-weight: 700; letter-spacing: -.01em; }
.tpl-lane h1, .tpl-lane h2 { letter-spacing: -.03em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 16px; }
h3 { font-size: 1.15rem; font-family: "Manrope", system-ui, sans-serif; }
p { margin: 0; max-width: 62ch; }
.vs-muted { color: var(--muted); }

.vs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px var(--gap); border-bottom: 1px solid var(--line); background: var(--card); }
.vs-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.35rem; text-decoration: none; }
.tpl-floodlight .vs-brand { text-transform: uppercase; letter-spacing: .02em; }
.vs-brand img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.vs-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); display: inline-block; }
.vs-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1 1 280px; font-weight: 500; }
.vs-nav a { text-decoration: none; padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
.vs-nav a:hover { text-decoration: underline; }
.vs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: var(--btn-radius); background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none; }
.vs-btn-lg { min-height: 52px; padding: 14px 28px; font-size: 1.05rem; }
.vs-btn:hover { filter: brightness(1.05); }
.vs-preview { background: #fff1d6; color: #6b4300; padding: 10px var(--gap); font-weight: 700; }

.vs-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--gap); align-items: center; padding: clamp(32px, 6vw, 72px) var(--gap); }
.vs-hero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vs-eyebrow { font-weight: 800; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tpl-clubhouse .vs-eyebrow, .tpl-lane .vs-eyebrow { color: var(--muted); }
.vs-lead { font-size: 1.15rem; color: var(--muted); }
.vs-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vs-open { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .95rem; }
.vs-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; display: inline-block; }
.vs-hero-photos { display: grid; gap: 12px; min-width: 0; }
.vs-hero-photos.two { grid-template-columns: 1fr 1fr; }
.vs-hero-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.tpl-clubhouse .vs-hero-photos.two img:last-child { margin-top: 28px; }
.tpl-lane .vs-hero { align-items: end; }

.vs-section { padding: 8px var(--gap) clamp(28px, 5vw, 56px); }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.vs-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.vs-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tpl-lane .vs-card { box-shadow: none; }
.vs-card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--radius) - 6px); }
.vs-link { color: var(--accent); font-weight: 800; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; margin-top: auto; }
.tpl-clubhouse .vs-link, .tpl-lane .vs-link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.vs-tag { display: inline-block; font-size: .9rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--soft); max-width: max-content; }
.vs-hours { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.vs-hours th { text-align: start; font-weight: 500; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vs-hours td { text-align: end; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vs-hours tr:last-child th, .vs-hours tr:last-child td { border-bottom: 0; }
.vs-list { display: flex; flex-direction: column; gap: 10px; }
.vs-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.vs-price { font-weight: 800; color: var(--accent); white-space: nowrap; }
.tpl-clubhouse .vs-price, .tpl-lane .vs-price { color: var(--fg); }
.vs-coach { flex-direction: row; align-items: center; gap: 14px; }
.vs-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; flex: 0 0 auto; }
.vs-product { gap: 4px; }
.vs-product img { aspect-ratio: 4 / 3; }
.vs-quote { margin: 0; }
.vs-quote p { font-size: 1.05rem; }
.tpl-clubhouse .vs-quote p { font-family: var(--display); font-size: 1.15rem; }
.vs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 18px var(--gap) calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

@media (prefers-reduced-motion: no-preference) { .vs-btn { transition: filter .15s ease, transform .15s ease; } .vs-btn:active { transform: scale(.98); } }
@media (max-width: 560px) { .vs-top .vs-btn { order: 2; } .vs-nav { order: 3; flex-basis: 100%; } .vs-hero-photos.two { grid-template-columns: 1fr; } .tpl-clubhouse .vs-hero-photos.two img:last-child { margin-top: 0; } }

/* Booking on the site (9 Nov 2026, Pages/SiteBook.cshtml): the same look as the site; chips, the slot grid, a short form. */
.vs-book { padding: clamp(24px, 4vw, 48px) var(--gap); display: grid; gap: 24px; max-width: 960px; }
.vs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .9rem; font-weight: 700; }
.vs-steps .is-on { color: var(--fg); }
.vs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--btn-radius); background: var(--card); color: inherit; text-decoration: none; font-weight: 700; line-height: 1.2; }
.vs-chip small { font-weight: 500; color: var(--muted); font-size: .8rem; }
.vs-chip.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vs-chip.is-off { opacity: .45; pointer-events: none; }
.vs-chip.is-full { border-style: dashed; }
.vs-slots { display: flex; flex-direction: column; gap: 8px; }
.vs-slot-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vs-slot-row > b { font-variant-numeric: tabular-nums; }
.vs-slot-row .vs-chips { gap: 6px; }
.vs-slot-row .vs-chip { min-height: 40px; padding: 6px 12px; }
.vs-form { display: grid; gap: 14px; max-width: 460px; }
.vs-form label { display: grid; gap: 6px; font-weight: 700; }
.vs-input { min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); font: inherit; width: 100%; }
.vs-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.vs-code { font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.vs-summary { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.vs-summary b { font-size: 1.1rem; }
.vs-weeks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vs-weeks li { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.vs-alert { padding: 12px 16px; border-radius: 10px; background: #ffe3e0; color: #7a1b12; font-weight: 700; }
.tpl-floodlight .vs-alert { background: #3a1b18; color: #ffb3aa; }
.vs-ok { padding: 12px 16px; border-radius: 10px; background: var(--soft); font-weight: 700; }
.vs-btn[type=submit], button.vs-btn { border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.vs-back { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 560px) { .vs-slot-row { grid-template-columns: 1fr; } }

/* Kit, class and shop on the site (9 Nov 2026). */
.vs-kit { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0; display: grid; gap: 8px; }
.vs-kit legend { font-weight: 800; padding: 0 6px; }
.vs-form .vs-kit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 400; }
.vs-kit-row small { display: block; color: var(--muted, inherit); opacity: .8; }
.vs-qty { width: 84px; flex: 0 0 auto; text-align: center; }
.vs-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.vs-shop-item { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); align-content: start; }
.vs-shop-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - 4px); }
.vs-shop-item.is-out { opacity: .6; }
.vs-shop-item[hidden] { display: none; }
.vs-shop-find { display: grid; gap: 6px; max-width: 420px; margin-bottom: 12px; }
.vs-sessions { display: grid; gap: 8px; }
.vs-form .vs-radio, .vs-radio { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-weight: 400 !important; }
.vs-radio input { width: 20px; height: 20px; accent-color: var(--accent); }
.vs-check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; }
.vs-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; }

/* Pieces every template places (10 Nov 2026, Pages/Shared/Sites/_SiteBits.cshtml); each template's file gives the tokens. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vt-announce { background: var(--accent); color: var(--on-accent); text-align: center; font-weight: 800; padding: 10px 16px; font-size: .95rem; position: relative; z-index: 7; }
.vt-preview { background: #fff1d6; color: #6b4300; padding: 10px 16px; font-weight: 700; text-align: center; position: relative; z-index: 7; }
.vt-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, var(--card)); color: var(--fg); font-weight: 700; text-decoration: none; }
.vt-pill:hover { border-color: var(--accent); }
.vt-map { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--surface, var(--card)); }
.vt-map iframe { display: block; width: 100%; height: clamp(280px, 42vw, 440px); border: 0; }
.vt-map-name { margin: 0; padding: 10px 14px; font-size: .92rem; border-bottom: 1px solid var(--line); }
.vt-map-pick { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vt-map-pick[aria-pressed="true"] { font-weight: 700; text-decoration-thickness: 2px; }
.vt-foot { max-width: var(--wrap, 1200px); margin: clamp(48px, 7vw, 96px) auto 0; padding: 28px max(16px, var(--gap)) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: grid; gap: 14px; }
.vt-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.vt-foot-small { color: var(--muted); font-size: .9rem; }
.vt-social { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 700; }
.vt-social a { min-height: 44px; display: inline-flex; align-items: center; }
.vt-dock { display: none; }
@media (max-width: 760px) {
    .vt-dock { position: fixed; z-index: 20; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px;
        border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5);
        transform: translateY(140%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
    [dir="rtl"] .vt-dock { padding: 8px 18px 8px 8px; }
    .vt-dock.is-on { transform: none; }
    .vt-dock[hidden] { display: none; }
    .vt-dock-note { order: -1; flex: 1; font-size: .85rem; font-weight: 700; color: var(--muted); min-width: 0; }
    .vt-dock-btn { min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
    body:has(.vt-dock) .vt-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: no-preference) {
    .will-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
    .will-reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .vt-dock { transition: none; } }
/* The venues' addresses under a shared week (10 Nov 2026). */
:is(.fl-places, .ln-places, .ch-places) { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
:is(.fl-places, .ln-places, .ch-places) li { display: grid; gap: 1px; color: var(--muted); }
:is(.fl-places, .ln-places, .ch-places) b { color: var(--fg); }
.vt-foot-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.vt-foot-main a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.vs-sub { font-size: 1.2rem; margin: 18px 0 8px; }
/* The cookie notice on business sites (10 Nov 2026): it had the main site's classes but not its styles. */
.cookie-notice { position: fixed; z-index: 30; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-inline: auto; display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 18px; background: var(--surface, var(--card)); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); font-size: .92rem; }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; flex: 1; }
.cookie-notice a { font-weight: 700; }
.cookie-notice button { flex: 0 0 auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 800; cursor: pointer; }
body:has(.vt-dock.is-on) .cookie-notice { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.vs-pass { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.3rem; letter-spacing: .12em; padding: 2px 10px; border-radius: 8px; background: var(--soft, var(--line)); }

/* Codex review fixes (10 Nov 2026) shared by the three templates. */
[hidden] { display: none !important; }
.vt-arrow { display: inline-block; }
[dir="rtl"] .vt-arrow { transform: scaleX(-1); }
.vt-lang { font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.vt-menu { position: relative; }
.vt-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid currentColor; opacity: .9; }
.vt-menu summary::-webkit-details-marker { display: none; }
.vt-menu nav { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; display: grid; padding: 8px; border-radius: 16px;
    background: var(--surface, var(--card)); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); }
.vt-menu nav a { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.vt-menu nav a:hover { background: var(--soft, var(--line)); }
@media (min-width: 900px) { .vt-menu { display: none; } }
.vt-places { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 10px; }
.vt-places li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; color: var(--muted); }
.vt-places li > span:first-child { display: grid; gap: 1px; }
.vt-places b { color: var(--fg); }
.vt-place-links { display: flex; gap: 14px; font-weight: 700; }
.vt-place-links a { color: var(--fg); min-height: 44px; display: inline-flex; align-items: center; }
.vs-btn-quiet { background: transparent !important; color: var(--fg) !important; box-shadow: inset 0 0 0 2px var(--line); }
/* My bookings and the other site pages keep Clubhouse's centred masthead. */
.tpl-clubhouse .vs-top { justify-content: center; text-align: center; border-bottom: 3px double var(--rule, var(--line)); background: var(--bg); }
.tpl-clubhouse .vs-brand { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 1.6rem; }
.tpl-clubhouse .vs-mark { display: none; }

/* "With your own website" (10 Nov 2026): the home is a short page of the parts the business uses from Vukron. */
.vs-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 18px; }
.vs-hub-card { display: grid; gap: 4px; padding: 20px 22px; min-height: 96px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); color: inherit; text-decoration: none; }
.vs-hub-card b { font-size: 1.2rem; }
.vs-hub-card span { color: var(--muted, inherit); }
.vs-hub-card:hover, .vs-hub-card:focus-visible { border-color: var(--accent); outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--accent); }
.vs-hub-card.is-quiet { background: transparent; }

/* The business's own pages (10 Nov 2026): blocks in the site's colours. */
.vs-page { display: grid; gap: 18px; }
.vs-text p { margin: 0 0 12px; line-height: 1.7; max-width: 70ch; }
.vs-figure { margin: 0; display: grid; gap: 6px; }
.vs-figure img, .vs-page-gallery img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.vs-figure figcaption { color: var(--muted, inherit); font-size: .92rem; }
.vs-page-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.vs-page-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.vs-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; max-width: 100%; }
.vs-video iframe, .vs-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The cover video (11 Nov 2026): laid over the cover photo, faded in only once it plays, so the photo shows until then and
   whenever it can't play. Floodlight's hero places it full bleed; Lane and Clubhouse frame it in .vt-cover. */
.vt-cover { position: relative; overflow: hidden; }
.vt-cover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.vt-cover-video.is-playing { opacity: 1; }
.vt-cover-video.is-alone { position: relative; display: block; aspect-ratio: 4 / 3; opacity: 1; background: #0b0e0c; }
.fl-hero .vt-cover-video { z-index: -2; }
.fl-hero .vt-cover-video.is-alone { position: absolute; aspect-ratio: auto; }
.vt-cover-toggle { position: absolute; z-index: 3; inset-inline-end: 14px; bottom: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.vt-cover-toggle:hover { background: rgba(0, 0, 0, .78); }
.vt-cover-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vt-cover-toggle[hidden] { display: none; }
.vt-cover-toggle .vt-i-play, .vt-cover-toggle.is-paused .vt-i-pause { display: none; }
.vt-cover-toggle.is-paused .vt-i-play { display: block; }
/* Floodlight: up top at the end, clear of the words and the button at the bottom. */
.fl-hero .vt-cover-toggle { bottom: auto; top: 84px; }
@media (prefers-reduced-motion: reduce) { .vt-cover-video { transition: none; } }
.vs-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.vs-nav .vs-btn-sm { padding: 8px 16px; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.vs-field-error { display: block; margin-top: 6px; color: #b3261e; font-weight: 700; font-size: .92rem; }
.tpl-floodlight .vs-field-error { color: #ffb3aa; }
.vs-input[aria-invalid="true"] { border-color: #b3261e; }
.vs-hub-card.is-main { grid-column: 1 / -1; background: var(--accent); color: var(--on-accent, #111); border-color: var(--accent); }
.vs-hub-card.is-main span { color: inherit; }

/* Meet the team (11 Nov 2026), option 1 of the samples: a tall photo across the top of each card, the name on the left
   with Instagram and LinkedIn on the right, the title under the name. Managers, then coaches, then staff, each with its
   own small heading when there are several groups. Coloured by each template's own tokens, so it fits all three. */
.vt-team-group + .vt-team-group { margin-top: 26px; }
.vt-team-label { margin: 0 0 12px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
:is([dir="rtl"], :lang(ar)) .vt-team-label { letter-spacing: 0; font-size: .95rem; }
.vt-team-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.vt-team-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--card, var(--surface)); border: 1px solid var(--line); }
.tpl-clubhouse .vt-team-card { border-radius: 6px; }
.vt-team-photo { position: relative; display: block; aspect-ratio: 4 / 5; max-width: 100%; background: var(--surface-2, var(--line)); overflow: hidden; }
.vt-team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.vt-team-initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem; font-weight: 800; line-height: 1; color: var(--muted); }
.tpl-floodlight .vt-team-initial { font-family: var(--display); font-weight: 400; background: var(--accent); color: var(--on-accent, #111); }
.tpl-clubhouse .vt-team-initial { font-family: var(--serif); font-weight: 600; }
.vt-team-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; min-width: 0; }
.vt-team-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.vt-team-name { font-size: 1.05rem; font-weight: 800; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.tpl-clubhouse .vt-team-name { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.vt-team-title { color: var(--muted); font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.vt-team-links { display: flex; gap: 6px; flex: 0 0 auto; }
.vt-team-links a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: inherit; border: 1px solid var(--line); transition: background-color .15s ease, color .15s ease; }
.vt-team-links a:hover { background: var(--accent); color: var(--on-accent, #111); border-color: var(--accent); }
.vt-team-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vt-team-links a { transition: none; } }

:root { --star: #a86800; }  /* 3:1 or more on a light card */
html[data-theme="dark"] { --star: #f5b53d; }
/* Rating a finished game in My bookings, and the All reviews page (11 Nov 2026). The stars run 1 to 5 in reading order,
   so arrow keys move the way they look; a star and the ones before it light up for the choice and on hover. */
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-label { font-weight: 700; }
.vs-rate { margin-top: 6px; }
.vs-rate > summary { list-style: none; width: fit-content; cursor: pointer; }
.vs-rate > summary::-webkit-details-marker { display: none; }
.vs-rate[open] > summary { margin-bottom: 10px; }
.vs-rate-form { display: grid; gap: 8px; max-width: 520px; }
.vs-rate-stars { border: 0; margin: 0; padding: 0; min-width: 0; }
.vs-rate-stars legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.vs-rate-row { display: inline-flex; gap: 2px; }
.vs-rate-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vs-rate-row label { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.9rem; line-height: 1; cursor: pointer; color: transparent; -webkit-text-stroke: 1.5px var(--muted); transition: color .12s ease; }
.vs-rate-row label:has(~ input:checked), .vs-rate-row input:checked + label { color: var(--star); -webkit-text-stroke: 1.5px var(--star); }
.vs-rate-row:hover label { color: transparent; -webkit-text-stroke: 1.5px var(--muted); }
.vs-rate-row:hover label:has(~ label:hover), .vs-rate-row label:hover { color: var(--star); -webkit-text-stroke: 1.5px var(--star); }
.vs-rate-row input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 8px; }
.vs-rated { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vs-stars { color: var(--star); letter-spacing: 2px; font-size: 1.05rem; }
.vs-stars-off { color: var(--line); }
.vs-reply { border-inline-start: 3px solid var(--line); padding-inline-start: 10px; color: var(--muted); }
.vs-reply b { color: var(--fg); }
.vs-review-list { display: grid; gap: 14px; }
.vs-review { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.vs-review-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.vs-pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 18px; }
.vs-rating-sum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vs-rating-sum strong { font-size: 2.4rem; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .vs-rate-row label { transition: none; } }
.vt-all-reviews { margin: 16px 0 0; }
.vt-all-reviews a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
/* My bookings: filters on the earlier games (11 Nov 2026). */
.vs-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 12px; }
.vs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; font-weight: 700; font-size: .92rem; }
.vs-chip:hover { border-color: var(--fg); }
.vs-chip[aria-current="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.vs-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The footer, centred (11 Nov 2026): the name, the business's links as icon buttons shaped and coloured by the template,
   then the year and the language. No "runs on Vukron" line. */
.vt-foot { justify-items: center; text-align: center; gap: 18px; }
.vt-foot-name { font-size: 1.15rem; font-weight: 800; }
.vt-foot-small { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.vt-foot-small a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; }
.vt-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vt-social a { width: 52px; height: 52px; min-height: 0; display: grid; place-items: center; color: var(--fg); background: var(--card, transparent); border: 1px solid var(--line);
    border-radius: 50%; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.vt-social a:hover { background: var(--accent); color: var(--on-accent, #111); border-color: var(--accent); transform: translateY(-2px); }
.vt-social a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.vt-social svg { width: 22px; height: 22px; }
/* Each template's own shape: Floodlight round and bold, Lane soft squares, Clubhouse quiet squares with a thin rule. */
.tpl-floodlight .vt-social a { border-width: 2px; }
.tpl-lane .vt-social a { border-radius: 16px; }
.tpl-clubhouse .vt-social a { border-radius: 6px; background: transparent; }
@media (prefers-reduced-motion: reduce) { .vt-social a { transition: none; } .vt-social a:hover { transform: none; } }

/* My bookings beside Book a court in the header (11 Nov 2026): a quiet outlined button, so Book a court stays the main one.
   On a phone, where Book a court moves to the bottom bar, it is the header's one button. */
.vt-mine { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: var(--btn-radius, 12px);
    border: 1.5px solid currentColor; color: inherit; font-weight: 800; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.vt-mine:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.vt-mine:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tpl-lane .vt-mine { border-radius: 12px; }
@media (max-width: 420px) { .vt-mine { padding: 0 12px; font-size: .9rem; } }
.ch-mast-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }

/* A booking as a table (11 Nov 2026): the details, then the price lines with the kit, the same as the email. */
.vs-bk { display: grid; gap: 14px; }
.vs-bk-table, .vs-bk-price { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vs-bk-table th, .vs-bk-table td, .vs-bk-price th, .vs-bk-price td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.vs-bk-table th { width: 36%; color: var(--muted); font-weight: 600; }
.vs-bk-table td { font-weight: 600; overflow-wrap: anywhere; }
.vs-bk-table a, .vs-bk-price a { color: inherit; text-underline-offset: 3px; }
.vs-bk-ref { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.vs-bk-price caption { text-align: start; font-weight: 800; font-size: 1.02rem; padding: 4px 0 8px; }
.vs-bk-price thead th { color: var(--muted); font-size: .82rem; font-weight: 700; }
.vs-bk-price .n { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-bk-price tfoot th, .vs-bk-price tfoot td { font-size: 1.08rem; font-weight: 800; border-bottom: 0; padding-top: 12px; }
@media (max-width: 480px) {
    .vs-bk-table th, .vs-bk-table td { display: block; width: auto; padding: 4px 0; border: 0; }
    .vs-bk-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
    .vs-bk-price th, .vs-bk-price td { padding: 8px 6px; }
}

/* ---------------------------------------------------------------------------------------------------------------------
   The booking screen (11 Nov 2026, owner: the booking interface like the app, organised, cool and solid): a photo of the
   court, then 1 Day, 2 How long, 3 Time as chips and tiles, and a card beside them that keeps what is chosen and adds up the
   price, with the kit, a coach, how often, the details and the code. Each template's own colours. */
.vs-book:has(.bk-grid), .vs-book:has(.bk-courts) { max-width: 1240px; width: 100%; margin-inline: auto; box-sizing: border-box; }

/* The steps along the top: numbered, the current one filled. */
.vs-steps { counter-reset: bk; gap: 8px; }
.vs-steps li { counter-increment: bk; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: .86rem; }
.vs-steps li::before { content: counter(bk); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft, var(--line)); color: var(--fg); font-size: .78rem; font-weight: 800; }
.vs-steps li.is-on { border-color: var(--accent); color: var(--fg); }
.vs-steps li.is-on::before { background: var(--accent); color: var(--on-accent); }

/* Choose a court: photo cards. */
.bk-courts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.bk-court { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.bk-court:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); }
.bk-court:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bk-court-photo { position: relative; aspect-ratio: 16 / 10; background: var(--soft, var(--line)); display: block; }
.bk-court-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-court-mark { position: absolute; inset: 0; display: grid; place-items: center; font: 400 3.4rem/1 var(--display); color: var(--muted); }
.bk-court-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
.bk-court-body small { color: var(--muted); font-weight: 600; }
.bk-court-body b { font-size: 1.2rem; }
.bk-court-from { margin-top: 6px; font-weight: 800; color: var(--fg); }

/* The court's photo and name. */
.bk-hero { position: relative; display: grid; gap: 14px; }
.bk-hero-photo { width: 100%; max-width: 100%; aspect-ratio: 21 / 7; object-fit: cover; border-radius: calc(var(--radius) + 6px); display: block; }
@media (max-width: 640px) { .bk-hero-photo { aspect-ratio: 16 / 9; } }
.bk-hero-text { display: grid; gap: 6px; }
.bk-hero-text small { color: var(--muted); font-weight: 700; }
.bk-hero-text h1 { margin: 0; line-height: 1.02; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bk-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: .86rem; font-weight: 700; color: var(--fg); }
.bk-pill.is-accent { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.bk-pill-link { text-decoration: none; }
.bk-pill-link:hover { border-color: var(--fg); }

/* Steps on one side, the card on the other; one column on a phone. */
.bk-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: start; scroll-margin-top: 16px; }
@media (max-width: 920px) { .bk-grid { grid-template-columns: minmax(0, 1fr); } }
.bk-steps { display: grid; gap: 28px; min-width: 0; }
.bk-step h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.15rem; }
.bk-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .85rem; font-weight: 800; flex: 0 0 auto; }

/* Day and length chips. */
.bk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; min-width: 64px; padding: 6px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--fg); text-decoration: none; line-height: 1.2; transition: border-color .15s ease, background-color .15s ease; }
.bk-chip small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.bk-chip b { font-size: .95rem; }
.bk-chip:hover { border-color: var(--fg); }
.bk-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bk-chip.is-on small { color: inherit; opacity: .85; }
.bk-chip.is-full { opacity: .6; }
.bk-chip:focus-visible, .bk-time:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bk-day { min-width: 76px; }

/* Time tiles. */
.bk-times { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.bk-time { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--fg); text-decoration: none; transition: border-color .15s ease, transform .15s ease, background-color .15s ease; }
.bk-time b { font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bk-time small { color: var(--muted); font-size: .78rem; font-weight: 700; }
.bk-time:hover { border-color: var(--accent); transform: translateY(-2px); }
.bk-time.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bk-time.is-on small { color: inherit; opacity: .85; }
.bk-time.is-full { border-style: dashed; background: transparent; }
.bk-time.is-full b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* The card. */
.bk-card { position: sticky; top: 16px; display: grid; gap: 14px; padding: 20px; border-radius: calc(var(--radius) + 4px); border: 1px solid var(--line); background: var(--card); box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .6); min-width: 0; }
@media (max-width: 920px) { .bk-card { position: static; } }
.bk-card h2 { margin: 0; font-size: 1.25rem; }
.bk-sum { margin: 0; display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.bk-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bk-sum div:last-child { border-bottom: 0; }
.bk-sum dt { color: var(--muted); font-weight: 600; }
.bk-sum dd { margin: 0; font-weight: 800; text-align: end; }
.bk-hint { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.bk-form { display: grid; gap: 18px; }
.bk-group { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.bk-group legend { padding: 0; margin-bottom: 8px; font-weight: 800; font-size: 1rem; }
.bk-field { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }

/* Kit with − and +. */
.bk-kit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .15s ease; }
.bk-kit.is-on { border-color: var(--accent); }
.bk-kit label { display: grid; gap: 2px; min-width: 0; }
.bk-kit label small { color: var(--muted); font-size: .8rem; }
.bk-stepper { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.bk-stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--fg); font: 800 1.2rem/1 system-ui, sans-serif; cursor: pointer; }
.bk-stepper button:hover { border-color: var(--accent); }
.bk-stepper button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.bk-stepper input { width: 46px; min-height: 40px; text-align: center; border: 0; background: transparent; color: var(--fg); font-weight: 800; font-size: 1.05rem; -moz-appearance: textfield; appearance: textfield; }
.bk-stepper input::-webkit-outer-spin-button, .bk-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Coach and how-often choices as cards. */
.bk-options { display: grid; gap: 8px; }
.bk-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.bk-option input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.bk-option span { display: grid; gap: 2px; }
.bk-option small { color: var(--muted); font-size: .8rem; }
.bk-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bk-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The price, adding up. */
.bk-price { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--soft, var(--line)); }
.bk-price-row { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.bk-price-row span:last-child, .bk-price-total b, .bk-price-weeks b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-price-total, .bk-price-weeks { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.bk-price-weeks[hidden] { display: none; }
.bk-price-total b { font-size: 1.35rem; }
.bk-price-total small { color: var(--muted); font-weight: 600; }
.bk-price-weeks b { font-size: 1.05rem; }
.bk-go { width: 100%; }
.bk-code { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .bk-court, .bk-time, .bk-chip, .bk-option, .bk-kit { transition: none; } .bk-court:hover, .bk-time:hover { transform: none; } }
/* On a phone the steps you are not on show just their number, so the bar stays on one line. */
@media (max-width: 560px) { .vs-steps { flex-wrap: nowrap; } .vs-steps li:not(.is-on) { font-size: 0; gap: 0; padding: 6px; } }
/* The days strip (11 Nov 2026): every bookable day in one row to swipe, with arrows on a computer; the first of a month gets
   a line before it so the month change is easy to see. */
.bk-step-note { margin-inline-start: auto; color: var(--muted); font-size: .8rem; font-weight: 600; font-family: inherit; }
.bk-strip { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.bk-days { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 6px; min-width: 0; flex: 1 1 auto; overscroll-behavior-x: contain; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-days .bk-chip { flex: 0 0 auto; scroll-snap-align: start; }
.bk-days .is-month { margin-inline-start: 10px; position: relative; }
.bk-days .is-month::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: -10px; width: 2px; border-radius: 2px; background: var(--line); }
.bk-strip-btn { flex: 0 0 auto; width: 40px; height: 52px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--fg); font: 800 1.4rem/1 system-ui, sans-serif; cursor: pointer; }
.bk-strip-btn:hover { border-color: var(--accent); }
.bk-strip-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bk-strip-btn[hidden] { display: none; }
@media (hover: none) { .bk-strip-btn { display: none; } }
.bk-step, .bk-strip { min-width: 0; max-width: 100%; }  /* the days strip scrolls inside its step, never the page */
.bk-step h2 .bk-step-note { font-family: "Manrope", "Segoe UI", system-ui, sans-serif; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Receipts (11 Nov 2026): a shop order or a class place in the same shape as a booking's table, with its reference and a
   status pill on top. */
.vs-rc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.vs-rc-head small { color: var(--muted); font-weight: 700; margin-inline-end: 4px; }
.vs-rc-head .vs-bk-ref { font-size: 1.1rem; }
.vs-rc-status { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; font-weight: 800; background: var(--soft, transparent); }
.vs-rc-status.is-good { border-color: color-mix(in srgb, #2fbf71 60%, transparent); background: color-mix(in srgb, #2fbf71 16%, transparent); }
.vs-rc-status.is-bad { border-color: color-mix(in srgb, #e5484d 60%, transparent); background: color-mix(in srgb, #e5484d 14%, transparent); }
.vs-rc-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.15rem; letter-spacing: .1em; }
.vs-bk-price tfoot .vs-rc-note { padding-top: 0; color: var(--muted); font-size: .85rem; font-weight: 600; }

/* My bookings rebuilt (11 Nov 2026; ChatGPT review of a 34,700 px phone page, owner's Coming up filters): two tabs, a
   "needs you" strip, filters folded into one panel, day headings and compact cards with the receipt in Details. */
.mb-page { max-width: 760px; width: 100%; margin-inline: auto; box-sizing: border-box; gap: 16px; }
.mb-who { margin: -8px 0 0; }
.mb-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.mb-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; color: var(--muted); text-decoration: none; font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.mb-tabs a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.mb-tabs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mb-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--fg); font-size: .78rem; font-weight: 800; box-sizing: border-box; }
.vs-chip[aria-current="true"] .mb-n { background: var(--bg); color: var(--fg); }
.mb-attn { display: grid; gap: 8px; }
.mb-attn-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--card); color: var(--fg); text-decoration: none; }
.mb-attn-row span { color: var(--muted); font-weight: 700; white-space: nowrap; }
.mb-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.mb-link { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--fg); text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; }
.mb-filters { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 0 14px; }
.mb-filters-sum { display: flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 800; cursor: pointer; list-style: none; }
.mb-filters-sum::-webkit-details-marker { display: none; }
.mb-filters-sum::after { content: "▾"; margin-inline-start: auto; color: var(--muted); }
.mb-filters[open] .mb-filters-sum::after { content: "▴"; }
.mb-filters[open] { padding-bottom: 12px; }
.mb-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.mb-frow .vs-chip { gap: 6px; min-height: 40px; }
.mb-flabel { flex-basis: 100%; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mb-count { margin: 0; }
.mb-count a { color: var(--fg); font-weight: 700; }
.mb-list { display: grid; gap: 10px; }
.mb-day { margin: 10px 0 0; font-size: .95rem; font-weight: 800; color: var(--muted); }
.mb-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.mb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mb-title { font-size: 1.05rem; line-height: 1.3; }
.mb-pill { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.mb-pill.is-ready { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.mb-pill.is-due { border-style: dashed; }
.mb-pill.is-off { color: var(--muted); }
.mb-when { font-weight: 700; }
.mb-money { color: var(--muted); }
.mb-money b { color: var(--fg); }
.mb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mb-actions form { margin: 0; }
.mb-act { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--btn-radius); border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; }
.mb-act:hover { border-color: var(--fg); }
.mb-act:focus-visible, .mb-more summary:focus-visible, .mb-filters-sum:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mb-more summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; color: var(--muted); font-weight: 700; font-size: .9rem; cursor: pointer; list-style: none; text-decoration: underline; }
.mb-more summary::-webkit-details-marker { display: none; }
.mb-more[open] { flex-basis: 100%; }
.mb-more[open] summary { color: var(--fg); }
.mb-more > form { margin-top: 10px; }
.mb-card-past .vs-rate summary { margin-top: 6px; }
@media (max-width: 520px) { .mb-card { padding: 12px 14px; } .mb-tabs a { padding: 0 12px; } }