/* ============================================================ Bookify booking flow — shared design system. Values are taken from the completed landing page (themes/ab/pages/bookify/home-bookify.htm) and its tokens in assets/bookify-landing/css/landing.css. landing.css declares its tokens inside @scope (.bookify-reference-desktop) and @scope (.bookify-reference-mobile), so those tokens are unreachable from the single functional DOM the booking flow needs. The token block below re-declares them on .bookify-flow, matching the values already shipped on the Profile page (assets/bookify-profile/css/profile.css) so the two stay in sync. Every class here is prefixed bkflow- so nothing can leak into the other pages that share the legacy "bookify" layout. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); /* ---------- 1. Suppress the legacy bookify-layout shell ------------------- layouts/bookify.htm renders #tsparticles, #navbar, {%page%}, #footer, #country_shadow, #cookieConsent, #overlay and #popup as direct children of . The flow pages draw their own landing-style navigation and footer, so the legacy chrome is hidden. The OTP / whatsapp-otp / verify-email partials are deliberately left alone: get-tickets and checkout still rely on them for verification. --------------------------------------------------------------------------- */ body:has(.bookify-flow) > #navbar, body:has(.bookify-flow) > #footer, body:has(.bookify-flow) > #tsparticles, body:has(.bookify-flow) > #country_shadow, body:has(.bookify-flow) > #cookieConsent, body:has(.bookify-flow) > #overlay, body:has(.bookify-flow) > #popup, body.bkflow-shell-active > #navbar, body.bkflow-shell-active > #footer, body.bkflow-shell-active > #tsparticles, body.bkflow-shell-active > #country_shadow, body.bkflow-shell-active > #cookieConsent, body.bkflow-shell-active > #overlay, body.bkflow-shell-active > #popup { display: none !important; } /* layouts/bookify.htm sets body { max-width:1440px; align-self:center; zoom:0% } which clips full-bleed sections and breaks the 1440 / 375 canvases. Neutralised here so the flow renders 1:1 with the landing page. */ body:has(.bookify-flow), body.bkflow-shell-active { margin: 0 !important; max-width: none !important; zoom: normal !important; align-self: auto; background: #0D0D0D; } body.bkflow-scroll-locked { overflow: hidden; } /* ---------- 2. Root + tokens ---------------------------------------------- */ .bookify-flow { --bk-bg: #0D0D0D; --bk-card: #111111; --bk-card-elevated: #141414; --bk-card-hover: #1A1A1A; --bk-tile: #0F0F0F; --bk-tile-hover: #181818; --bk-input-bg: #191919; --bk-input-focus-bg: #1B1B1B; --bk-orange: #FF551A; --bk-orange-hover: #E64613; --bk-orange-press: #C73B0F; --bk-orange-soft: #FFB186; --bk-orange-gradient: linear-gradient(90deg, #FFB186 0%, #FF551A 50%, #FFB186 100%); --bk-glow: 255, 85, 26; --bk-fg-1: #FFFFFF; --bk-fg-2: rgba(255, 255, 255, 0.72); --bk-fg-3: rgba(255, 255, 255, 0.65); --bk-fg-4: rgba(255, 255, 255, 0.55); --bk-placeholder: #989898; --bk-border: rgba(255, 255, 255, 0.10); --bk-border-soft: rgba(255, 255, 255, 0.06); --bk-hairline: rgba(255, 255, 255, 0.08); --bk-red: #FF3A44; --bk-green: #009245; --bk-blue: #008DE0; --bk-yellow: #FFE000; --bk-easing-out: cubic-bezier(0.22, 1, 0.36, 1); --bk-gutter: max(20px, min(165px, calc((100% - 1110px) / 2))); --bk-section-pad: 96px; min-height: 100vh; background: var(--bk-bg); color: var(--bk-fg-1); font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* Keep local Bookify fallback tokens from masking the validated organizer theme inherited from the shared layout. */ .bk-custom-flow[style*="--bk-theme-primary:"] .bookify-flow { --bk-orange: var(--bk-theme-primary); --bk-orange-hover: var(--bk-theme-primary-hover); --bk-orange-press: var(--bk-theme-primary-active); --bk-orange-soft: var(--bk-theme-primary-soft); --bk-orange-gradient: var(--bk-theme-gradient); --bk-glow: var(--bk-theme-rgb); --bk-secondary: var(--bk-theme-secondary, #222222); --bka-orange: var(--bk-theme-primary); --bka-orange-soft: var(--bk-theme-primary-soft); } /* landing.css establishes a second token scope on these reusable shell wrappers. Re-apply the authoritative custom theme at that exact scope so Header/Footer controls cannot fall back to Bookify orange. */ .bk-custom-flow[style*="--bk-theme-primary:"] .bookify-flow :is( .bookify-reference-desktop, .bookify-reference-mobile, .bookify-reference-desktop .bk-page, .bookify-reference-mobile .bk-page ) { --bk-orange: var(--bk-theme-primary); --bk-orange-hover: var(--bk-theme-primary-hover); --bk-orange-press: var(--bk-theme-primary-active); --bk-orange-soft: var(--bk-theme-primary-soft); --bk-orange-gradient: var(--bk-theme-gradient); --bk-glow: var(--bk-theme-rgb); --bka-orange: var(--bk-theme-primary); --bka-orange-soft: var(--bk-theme-primary-soft); } .bk-custom-flow .bookify-flow .section-button { background: var(--bk-orange); border-color: var(--bk-orange); color: #fff; } .bk-custom-flow .bookify-flow .section-button:hover { background: var(--bk-orange-hover); border-color: var(--bk-orange-hover); } .bk-custom-flow .bkflow-header-logo img { display: block; width: auto; height: auto !important; max-width: 100% !important; max-height: 32px; object-fit: contain; } .bk-custom-flow .bkflow-shell-head a:hover, .bk-custom-flow .bkflow-shell-head button[data-header-sign-out]:hover { color: var(--bk-orange) !important; } .bk-custom-flow .bkflow-shell-head a:focus-visible, .bk-custom-flow .bkflow-shell-head button:focus-visible { outline: 2px solid var(--bk-orange); outline-offset: 2px; } .bk-custom-flow footer span[style*="rgb(255, 85, 26)"] { color: var(--bk-orange) !important; } @media (max-width: 767px) { .bk-custom-flow .bkflow-header-logo { display: flex; width: min(132px, calc(100vw - 196px)); align-items: center; } .bk-custom-flow .bkflow-header-logo img { max-height: 26px; } .bk-custom-flow [data-bkflow-drawer] > a:hover { background: rgba(var(--bk-glow), 0.1); } } .bookify-flow *, .bookify-flow *::before, .bookify-flow *::after { box-sizing: border-box; } .bookify-flow a { color: inherit; text-decoration: none; } .bookify-flow img { display: block; max-width: 100%; } .bookify-flow button { font-family: inherit; } .bookify-flow p { margin: 0; } .bookify-flow h1, .bookify-flow h2, .bookify-flow h3, .bookify-flow h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; } .bookify-flow :focus-visible { outline: 2px solid var(--bk-orange); outline-offset: 2px; } /* ---------- 3. Scoping for the reused landing nav / footer shell ---------- On the landing page .bk-page wraps the whole document, which is what makes the nav stick. Here the shell is a sibling of the content, so the wrapper carries the sticky positioning instead. --------------------------------------------------------------------------- */ .bookify-flow .bk-page { width: 1440px; max-width: 100%; } .bookify-flow .bk-page > [style*="sticky"] > nav { padding-left: var(--bk-gutter) !important; padding-right: var(--bk-gutter) !important; } .bookify-flow .bk-section { padding-left: var(--bk-gutter); padding-right: var(--bk-gutter); } .bookify-flow .bk-final-cta { padding-left: var(--bk-gutter) !important; padding-right: var(--bk-gutter) !important; } .bkflow-shell + .bkflow-shell .bk-page { margin-top: 0; } .bookify-flow .bkflow-shell-head { position: sticky; top: 0; z-index: 60; } .bookify-flow .bkflow-shell-head .bk-page { position: static; } /* landing.css hands over to its mobile shell only below 768px, but the desktop nav row needs ~1024px before it starts pushing the page sideways. Hand over earlier so 768-1023px tablets do not scroll horizontally. Scoped to .bkflow-shell so the landing pages keep their own breakpoint. */ @media (max-width: 1023.98px) { .bookify-flow .bkflow-shell.bookify-reference-desktop { display: none; } .bookify-flow .bkflow-shell.bookify-reference-mobile { display: block; } } /* ---------- 4. Page column ------------------------------------------------ */ /* clip (not hidden) so decorative overhang cannot scroll the page while .bkflow-rail keeps working as a sticky element. */ .bkflow-main { width: 1440px; max-width: 100%; margin: 0 auto; overflow-x: clip; } .bkflow-section { padding: var(--bk-section-pad) var(--bk-gutter) 0; } .bkflow-section:first-child { padding-top: 0; } .bkflow-section-tight { padding-top: 40px; } .bkflow-foot-pad { padding-bottom: var(--bk-section-pad); } /* Two-column work surface: main content + sticky summary rail. */ .bkflow-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; } .bkflow-rail { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; } /* ---------- 5. Typography ------------------------------------------------- */ .bkflow-head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 760px; } .bkflow-eyebrow { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bk-orange); } .bkflow-title { font-size: 44px; line-height: 1.05; color: var(--bk-fg-1); } .bkflow-title-sm { font-size: 28px; line-height: 1.15; color: var(--bk-fg-1); } .bkflow-lede { font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--bk-fg-3); } .bkflow-note { font-size: 12px; line-height: 1.5; color: var(--bk-fg-4); } .bkflow-grad { background: var(--bk-orange-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bkflow-panel-title, .bkflow-panel-title > :is(p, span) { font-size: 20px; line-height: 1.2; color: var(--bk-orange); } .bkflow-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bk-fg-4); margin-bottom: 8px; } /* ---------- 6. Pills / badges -------------------------------------------- */ .bkflow-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--bk-border); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85); } .bkflow-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bk-orange); box-shadow: 0 0 12px var(--bk-orange); } .bkflow-pill-rule { width: 1px; height: 12px; background: var(--bk-border); } .bkflow-pill-strong { font-weight: 700; color: #fff; } .bkflow-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--bk-border-soft); background: rgba(255, 255, 255, 0.05); color: var(--bk-fg-2); white-space: nowrap; } .bkflow-badge-orange { background: rgba(var(--bk-glow), 0.14); border-color: rgba(var(--bk-glow), 0.32); color: var(--bk-orange-soft); } .bkflow-badge-green { background: rgba(0, 146, 69, 0.16); border-color: rgba(0, 146, 69, 0.38); color: #4ED18A; } .bkflow-badge-red { background: rgba(255, 58, 68, 0.14); border-color: rgba(255, 58, 68, 0.36); color: #FF8A90; } .bkflow-badge-muted { color: var(--bk-fg-4); } /* ---------- 7. Buttons (landing CTA primitive) ---------------------------- */ .bkflow-btn { height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--bk-orange); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; cursor: pointer; transition: background 180ms var(--bk-easing-out), transform 120ms var(--bk-easing-out), border-color 180ms; } .bkflow-btn:hover { background: var(--bk-orange-hover); } .bkflow-btn:active { background: var(--bk-orange-press); transform: scale(0.98); } .bkflow-btn[disabled], .bkflow-btn.is-busy { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .bkflow-btn-lg { height: 52px; padding: 0 28px; font-size: 17px; } .bkflow-btn-block { width: 100%; } .bkflow-btn-ghost { background: transparent; border: 1px solid var(--bk-border); color: var(--bk-fg-1); } .bkflow-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); } .bkflow-btn-ghost:active { background: rgba(255, 255, 255, 0.09); } .bkflow-btn-quiet { height: 40px; padding: 0 16px; background: transparent; border: 1px solid var(--bk-border-soft); color: var(--bk-fg-2); font-size: 14px; } .bkflow-btn-quiet:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } /* Spinner shown while a request is in flight. */ .bkflow-btn .bkflow-spin { display: none; width: 16px; height: 16px; flex-shrink: 0; } .bkflow-btn.is-busy .bkflow-spin { display: block; animation: bkflowSpin 700ms linear infinite; } @keyframes bkflowSpin { to { transform: rotate(360deg); } } .bkflow-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bk-fg-4); transition: color 180ms var(--bk-easing-out); } .bkflow-back:hover { color: #fff; } /* ---------- 8. Panels / cards -------------------------------------------- */ .bkflow-panel { position: relative; overflow: hidden; background: var(--bk-card); border: 1px solid var(--bk-border-soft); border-radius: 16px; padding: 26px; } .bkflow-panel-glow { position: absolute; inset: -40% 40% 60% -20%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--bk-glow), 0.10), transparent 70%); } .bkflow-panel > * { position: relative; } .bkflow-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .bkflow-card { background: var(--bk-card-elevated); border: 1px solid var(--bk-border-soft); border-radius: 14px; padding: 18px; } .bkflow-tile { background: var(--bk-tile); border: 1px solid var(--bk-border-soft); border-radius: 12px; padding: 16px; } .bkflow-hairline { height: 1px; background: var(--bk-hairline); border: 0; margin: 20px 0; } /* ---------- 9. Forms ------------------------------------------------------ */ .bkflow-field { display: flex; flex-direction: column; } .bkflow-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .bkflow-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* :not(.bkflow-provider *) keeps third-party payment widgets out of the flow field styling. The HyperPay / Tamara markup ships with its own .wpwl-* stylesheet and must render exactly as the provider expects. */ .bookify-flow input[type="text"]:not(.bkflow-provider *), .bookify-flow input[type="email"]:not(.bkflow-provider *), .bookify-flow input[type="tel"]:not(.bkflow-provider *), .bookify-flow input[type="number"]:not(.bkflow-provider *), .bookify-flow input[type="password"]:not(.bkflow-provider *), .bookify-flow input[type="date"]:not(.bkflow-provider *), .bookify-flow input[type="time"]:not(.bkflow-provider *), .bookify-flow select:not(.bkflow-provider *), .bookify-flow textarea:not(.bkflow-provider *) { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--bk-input-bg); border: 1px solid var(--bk-border-soft); border-radius: 10px; color: var(--bk-fg-1); font-family: inherit; font-size: 15px; line-height: 1.3; transition: border-color 180ms var(--bk-easing-out), background 180ms var(--bk-easing-out), box-shadow 180ms var(--bk-easing-out); -webkit-appearance: none; appearance: none; } .bookify-flow textarea { min-height: 112px; resize: vertical; } .bookify-flow input::placeholder, .bookify-flow textarea::placeholder { color: var(--bk-placeholder); } .bookify-flow input:focus:not(.bkflow-provider *), .bookify-flow select:focus:not(.bkflow-provider *), .bookify-flow textarea:focus:not(.bkflow-provider *) { outline: none; border-color: var(--bk-orange); background: var(--bk-input-focus-bg); box-shadow: 0 0 0 3px rgba(var(--bk-glow), 0.12); } /* Provider widget host: nothing in the design system reaches inside. */ .bkflow-provider { color: #fff; } .bkflow-provider .wpwl-form { margin: 0 auto; max-width: 100%; } .bookify-flow input.is-invalid, .bookify-flow select.is-invalid, .bookify-flow textarea.is-invalid { border-color: var(--bk-red); box-shadow: 0 0 0 3px rgba(255, 58, 68, 0.12); } .bookify-flow input.is-valid { border-color: rgba(0, 146, 69, 0.55); } .bookify-flow select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23989898' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } /* Date/time pickers render a near-invisible native icon on the dark surface. */ .bookify-flow input[type="date"]::-webkit-calendar-picker-indicator, .bookify-flow input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.5; cursor: pointer; } .bkflow-inline-field { display: flex; gap: 10px; align-items: stretch; } .bkflow-inline-field > input { flex: 1 1 auto; min-width: 0; } .bkflow-cc { flex: 0 0 104px; } .bkflow-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--bk-fg-2); cursor: pointer; } .bkflow-check input[type="checkbox"], .bkflow-check input[type="radio"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--bk-orange); cursor: pointer; } .bkflow-check a { color: var(--bk-orange-soft); text-decoration: underline; } /* Field-level message, rendered directly under its input. */ .bkflow-hint { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--bk-fg-4); } .bkflow-error { margin-top: 8px; font-size: 12px; line-height: 1.45; color: #FF8A90; } .bkflow-error:empty, .bkflow-hint:empty { display: none; } /* ---------- 10. Progress stepper ----------------------------------------- */ .bkflow-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0 0; } .bkflow-step { display: inline-flex; align-items: center; gap: 10px; } .bkflow-step-dot { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--bk-border-soft); color: var(--bk-fg-4); } .bkflow-step-label { font-size: 13px; font-weight: 600; color: var(--bk-fg-4); white-space: nowrap; } .bkflow-step-rule { width: 26px; height: 1px; background: var(--bk-hairline); flex-shrink: 0; } .bkflow-step.is-done .bkflow-step-dot { background: rgba(var(--bk-glow), 0.16); border-color: rgba(var(--bk-glow), 0.34); color: var(--bk-orange-soft); } .bkflow-step.is-done .bkflow-step-label { color: var(--bk-fg-2); } .bkflow-step.is-current .bkflow-step-dot { background: var(--bk-orange); border-color: var(--bk-orange); color: #fff; } .bkflow-step.is-current .bkflow-step-label { color: #fff; } /* ---------- 11. Quantity stepper ----------------------------------------- */ .bkflow-qty { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .bkflow-qty-btn { width: 40px; height: 40px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--bk-border); border-radius: 10px; color: #fff; cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1; transition: background 160ms var(--bk-easing-out), border-color 160ms, opacity 160ms; -webkit-user-select: none; user-select: none; } .bkflow-qty-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.2); } .bkflow-qty-btn:active { transform: scale(0.94); } .bkflow-qty-btn[aria-disabled="true"], .bkflow-qty-btn.is-disabled { opacity: 0.35; pointer-events: none; } .bkflow-qty-value { min-width: 44px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } /* ---------- 12. Ticket rows ---------------------------------------------- */ .bkflow-ticket-list { display: flex; flex-direction: column; gap: 14px; } .bkflow-ticket { display: flex; align-items: center; gap: 20px; background: var(--bk-card-elevated); border: 1px solid var(--bk-border-soft); border-radius: 14px; padding: 18px 20px; transition: border-color 200ms var(--bk-easing-out), background 200ms var(--bk-easing-out); } .bkflow-ticket:hover { border-color: rgba(255, 255, 255, 0.14); } .bkflow-ticket.is-selected { border-color: rgba(var(--bk-glow), 0.45); background: var(--bk-card-hover); } .bkflow-ticket.is-unavailable { opacity: 0.55; } .bkflow-ticket-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .bkflow-ticket-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; font-weight: 700; line-height: 1.2; color: #fff; } .bkflow-ticket-desc { font-size: 13px; line-height: 1.5; color: var(--bk-fg-4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bkflow-ticket-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--bk-fg-4); } .bkflow-ticket-price { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .bkflow-price { font-size: 20px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; } .bkflow-price-cur { font-size: 12px; font-weight: 600; color: var(--bk-fg-4); } .bkflow-price-free { color: var(--bk-orange-soft); } /* ---------- 13. Order summary ------------------------------------------- */ .bkflow-summary { display: flex; flex-direction: column; gap: 12px; } .bkflow-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--bk-fg-2); } .bkflow-sum-row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; } .bkflow-sum-row.is-muted > span { color: var(--bk-fg-4); } .bkflow-sum-row.is-discount > span:last-child { color: #4ED18A; } .bkflow-sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--bk-hairline); } .bkflow-sum-total-label { font-size: 15px; font-weight: 700; color: #fff; } .bkflow-sum-total-value { font-size: 26px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; } .bkflow-sum-total-value s { color: var(--bk-fg-4); font-size: 16px; font-weight: 500; margin-right: 8px; } .bkflow-sum-lines { display: flex; flex-direction: column; gap: 10px; } .bkflow-sum-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; } .bkflow-sum-line-name { color: var(--bk-fg-2); min-width: 0; } .bkflow-sum-line-name b { color: #fff; font-weight: 700; } .bkflow-sum-line-value { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- 14. Meta list (date / venue / organizer) --------------------- */ .bkflow-meta-list { display: flex; flex-direction: column; gap: 2px; } .bkflow-meta-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--bk-hairline); } .bkflow-meta-item:last-child { border-bottom: 0; } .bkflow-meta-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--bk-glow), 0.12); color: var(--bk-orange-soft); } .bkflow-meta-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .bkflow-meta-key { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-fg-4); } .bkflow-meta-val { font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; overflow-wrap: anywhere; } .bkflow-meta-val a { color: var(--bk-orange-soft); } /* ---------- 15. States --------------------------------------------------- */ .bkflow-state { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 48px 24px; background: var(--bk-tile); border: 1px dashed var(--bk-border); border-radius: 14px; } .bkflow-state-icon { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); color: var(--bk-fg-4); } .bkflow-state-title { font-size: 18px; font-weight: 700; color: #fff; } .bkflow-state-text { font-size: 14px; line-height: 1.55; color: var(--bk-fg-4); max-width: 420px; } /* Inline notice — carries backend messages verbatim. */ .bkflow-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; border: 1px solid var(--bk-border-soft); background: rgba(255, 255, 255, 0.04); color: var(--bk-fg-2); } .bkflow-notice:empty { display: none; } .bkflow-notice-icon { flex: 0 0 auto; margin-top: 1px; } .bkflow-notice-error { border-color: rgba(255, 58, 68, 0.36); background: rgba(255, 58, 68, 0.10); color: #FFC3C6; } .bkflow-notice-success { border-color: rgba(0, 146, 69, 0.38); background: rgba(0, 146, 69, 0.10); color: #B9EFCF; } .bkflow-notice-warn { border-color: rgba(255, 224, 0, 0.30); background: rgba(255, 224, 0, 0.08); color: #F4E9A8; } .bkflow-notice-info { border-color: rgba(0, 141, 224, 0.32); background: rgba(0, 141, 224, 0.10); color: #BDE2F8; } /* Skeleton shimmer for loading. */ .bkflow-skeleton { border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%); background-size: 400% 100%; animation: bkflowShimmer 1.4s ease infinite; } @keyframes bkflowShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* Full-panel busy veil. */ .bkflow-busy { position: relative; } .bkflow-busy[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(13, 13, 13, 0.55); backdrop-filter: blur(1px); } /* ---------- 16. Sticky action bar --------------------------------------- */ .bkflow-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .bkflow-actionbar-total { display: flex; flex-direction: column; gap: 4px; } .bkflow-actionbar-total .bkflow-label { margin-bottom: 0; } /* ---------- 17. Cover / hero ------------------------------------------- */ .bkflow-cover { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--bk-border-soft); background: var(--bk-card); aspect-ratio: 16 / 7; } .bkflow-cover > img { width: 100%; height: 100%; object-fit: cover; } .bkflow-cover-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13,13,13,0) 35%, rgba(13,13,13,0.85) 100%); } .bkflow-cover-tags { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; } /* The inline start edge stays at 0: the layout renders dir="rtl", where an overhang past the start edge produces real horizontal scroll. */ .bkflow-hero-glow { position: absolute; inset: -30% 25% 55% 0; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(var(--bk-glow), 0.13), transparent 72%); } /* ---------- 18. Legacy markup kept for behaviour ------------------------ Some functional nodes (seat maps, provider widgets, third-party markup) must keep their original classes. They are wrapped in .bkflow-legacy so the legacy stylesheets can still target them while the surface reads as part of the new design. --------------------------------------------------------------------------- */ .bkflow-legacy { color: var(--bk-fg-2); } .bkflow-legacy p { margin: 0; } .bkflow-legacy a { color: var(--bk-orange-soft); } /* Visually hidden but still available to assistive tech and to the JS that reads values out of the DOM. */ .bkflow-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ 19. Tablet — 768px to 1024px ============================================================ */ @media (max-width: 1180px) { .bookify-flow { --bk-section-pad: 72px; } .bkflow-split { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; } } @media (max-width: 1024px) { .bkflow-split { grid-template-columns: minmax(0, 1fr); } .bkflow-rail { position: static; } .bkflow-title { font-size: 36px; } } /* ============================================================ 20. Mobile — matches the landing page breakpoint (767px) Designed for 375x812, 390x844 and 430x932 rather than scaled down. ============================================================ */ @media (max-width: 767px) { .bookify-flow { --bk-gutter: 20px; --bk-section-pad: 48px; } .bkflow-main { width: 100%; } .bkflow-section-tight { padding-top: 24px; } .bkflow-title { font-size: 27px; line-height: 1.12; } .bkflow-title-sm { font-size: 21px; } .bkflow-lede { font-size: 15px; line-height: 1.5; } .bkflow-panel-title { font-size: 17px; } .bkflow-eyebrow { font-size: 11px; } .bkflow-panel { padding: 18px 16px; border-radius: 14px; } .bkflow-card { padding: 15px; } .bkflow-hairline { margin: 16px 0; } .bkflow-grid-2, .bkflow-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 14px; } /* Ticket row becomes two rows: info, then price + stepper. */ .bkflow-ticket { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; } .bkflow-ticket-price { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .bkflow-ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Tap targets stay at 44px minimum. */ .bkflow-qty-btn { width: 44px; height: 44px; } .bkflow-btn { height: 48px; width: 100%; } .bkflow-btn-lg { height: 52px; } .bkflow-btn-quiet { width: auto; } .bkflow-back { min-height: 44px; } .bkflow-actionbar { flex-direction: column; align-items: stretch; } .bkflow-sum-total-value { font-size: 22px; } .bkflow-state { padding: 32px 18px; } .bkflow-cover { aspect-ratio: 4 / 3; border-radius: 14px; } /* Steps scroll horizontally instead of wrapping into a tall block. */ .bkflow-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--bk-gutter) * -1); padding: 12px var(--bk-gutter) 2px; } .bkflow-steps::-webkit-scrollbar { display: none; } .bkflow-step-rule { width: 16px; } /* Sticky bottom bar carries the primary action above the browser chrome. */ .bkflow-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 12px var(--bk-gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(13, 13, 13, 0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--bk-border-soft); display: flex; align-items: center; gap: 14px; } .bkflow-sticky .bkflow-btn { flex: 1 1 auto; margin: 0; } .bkflow-sticky-total { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; } .bkflow-sticky-total .bkflow-label { margin-bottom: 0; font-size: 10px; } .bkflow-sticky-total .bkflow-price { font-size: 17px; } /* Clearance so the sticky bar never covers the last section. */ .bkflow-has-sticky { padding-bottom: 96px; } } /* The sticky bar is mobile-only; on larger screens the action lives inline. */ .bkflow-sticky { display: none; } @media (max-width: 767px) { .bkflow-sticky { display: flex; } } @media (prefers-reduced-motion: reduce) { .bookify-flow *, .bookify-flow *::before, .bookify-flow *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }