/* ═ Fajl: v2b.css · 2.1.1 · 24.08.2026 · Damir Radulić — RiNET <damir@rinet.one> · FRONT /var/www/kooglana-clone/rodjendan-v2/v2b.css · Svrha: Codex demo CSS (demo-modules + globals bez @import) za rodjendan v2 ═ */
/* Shared demo state ------------------------------------------------------ */
.global-demo-ribbon { position: fixed; z-index: 1400; inset: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; padding: 6px 16px; color: #fff; background: linear-gradient(90deg, #a62c76, #5b248e 48%, #2d1148); box-shadow: 0 5px 18px rgba(22,7,36,.25); font-size: 11px; letter-spacing: .02em; text-align: center; }
.global-demo-ribbon strong { padding: 3px 7px; border-radius: 999px; color: #29123f; background: #ffd20a; font-size: 9px; letter-spacing: .12em; }
.global-demo-ribbon span { color: rgba(255,255,255,.86); }
html body .app-shell { padding-top: 70px; }
html body .hub-shell { min-height: 100dvh; overflow-x: clip; overflow-y: visible; padding-bottom: 118px; }
.hub-shell::after { content: ""; position: absolute; inset: 34px 0 auto; height: 360px; pointer-events: none; background: radial-gradient(circle at 70% -20%, rgba(255,210,10,.12), transparent 52%), radial-gradient(circle at 10% 10%, rgba(166,58,202,.3), transparent 46%); }
html body .hub-topbar { position: relative; z-index: 1500; max-width: 1440px; margin-bottom: 30px; overflow: visible; isolation: isolate; }
.hub-header-actions { position: relative; z-index: 2; flex-wrap: wrap; justify-content: flex-end; overflow: visible; }
.hub-topbar .location-picker { z-index: 1600; }
.hub-topbar .location-backdrop { z-index: 1; }
.hub-topbar .location-menu { z-index: 2; }
.hub-account-chip { display: flex; align-items: center; gap: 7px; min-height: 37px; padding: 0 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #fff; background: rgba(255,255,255,.07); cursor: pointer; font-size: 11px; font-weight: 850; }
.hub-account-chip span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #2b123f; background: #ffd20a; }
.hub-account-chip.active { color: #2b123f; background: #ffd20a; }
.hub-stage { position: relative; z-index: 2; width: min(1440px, 100%); min-height: 700px; margin: 0 auto; padding: clamp(26px, 4vw, 54px); border: 1px solid rgba(255,255,255,.38); border-radius: 30px; color: #20122e; background: #f8f6fb; box-shadow: 0 40px 100px rgba(8,0,25,.3); }
.hub-stage h1 { margin: 0; color: #211031; font-size: clamp(36px, 5vw, 65px); line-height: .98; letter-spacing: -.055em; }
.hub-stage h2, .hub-stage h3 { color: #251433; }
.hub-stage button:focus-visible, .hub-stage input:focus-visible, .hub-stage select:focus-visible, .hub-stage textarea:focus-visible { outline: 3px solid #ffd20a; outline-offset: 2px; }
.hub-kicker { margin: 0 0 11px; color: #6a2698; font-size: 11px; font-weight: 950; letter-spacing: .16em; }
.hub-hero-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 38px; align-items: end; margin-bottom: 28px; }
.hub-hero-row > div:first-child > p:last-child { max-width: 760px; margin: 17px 0 0; color: #6f6579; font-size: 15px; line-height: 1.7; }
.hub-two-column { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 18px; align-items: start; }
.hub-panel { padding: 26px; border: 1px solid #e3dce9; border-radius: 22px; background: #fff; box-shadow: 0 14px 30px rgba(34,11,53,.06); }
.hub-panel-head { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin-bottom: 22px; }
.hub-panel-head > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: #5b248e; font-weight: 950; }
.hub-panel-head h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.hub-panel-head p { margin: 5px 0 0; color: #81778a; font-size: 12px; line-height: 1.5; }
.hub-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hub-form-grid label, .food-contact label, .account-auth-card label, .modal-reason { display: grid; gap: 7px; color: #62576a; font-size: 11px; font-weight: 800; }
.hub-form-grid label.wide { grid-column: 1 / -1; }
.hub-form-grid input, .hub-form-grid select, .food-contact input, .food-contact select, .food-contact textarea, .account-auth-card input, .modal-reason select, .team-notes textarea, .profile-card input, .profile-card select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #dcd3e2; border-radius: 13px; color: #20122e; background: #fbfafc; outline: 0; font-size: 13px; }
.hub-form-grid input:focus, .hub-form-grid select:focus, .food-contact input:focus, .food-contact select:focus, .food-contact textarea:focus, .account-auth-card input:focus, .team-notes textarea:focus { border-color: #6a2698; background: #fff; box-shadow: 0 0 0 4px rgba(91,36,142,.09); }
.hub-form-grid .phone-field-controls select, .hub-form-grid .phone-field-controls input, .food-contact .phone-field-controls select, .food-contact .phone-field-controls input, .account-auth-card .phone-field-controls select, .account-auth-card .phone-field-controls input { min-height: 48px; border-radius: 13px; font-size: 11px; }
.hub-form-grid .phone-field-status, .food-contact .phone-field-status, .account-auth-card .phone-field-status { font-size: 8px; line-height: 1.45; }
.hub-form-grid .email-field-status, .food-contact .email-field-status, .account-auth-card .email-field-status, .profile-card .email-field-status { font-size: 8px; line-height: 1.45; }
.hub-counter { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; min-height: 48px; padding: 3px; border: 1px solid #dcd3e2; border-radius: 13px; background: #fbfafc; }
.hub-counter button { height: 38px; border: 0; border-radius: 10px; color: #5b248e; background: #fff; cursor: pointer; font-size: 22px; }
.hub-counter strong { text-align: center; }
.hub-consent { display: grid; grid-template-columns: 21px 1fr; gap: 10px; align-items: start; margin-top: 18px; padding: 14px; border: 1px solid #ded4e5; border-radius: 14px; color: #51485a; background: #fbf9fc; cursor: pointer; font-size: 12px; line-height: 1.5; }
.hub-consent input { width: 18px; height: 18px; accent-color: #5b248e; }
.hub-action-bar { position: sticky; z-index: 5; bottom: 82px; display: flex; align-items: center; justify-content: flex-end; gap: 13px; margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(91,36,142,.13); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 14px 38px rgba(29,8,46,.13); backdrop-filter: blur(14px); }
.hub-action-bar > div { margin-right: auto; }.hub-action-bar small, .hub-action-bar strong { display: block; }.hub-action-bar small { color: #8a7f91; font-size: 9px; }.hub-action-bar strong { margin-top: 3px; font-size: 13px; text-transform: capitalize; }
.hub-action-bar button, .hub-success > button, .hub-empty-state button, .profile-card > button { min-height: 48px; padding: 0 19px; border: 0; border-radius: 13px; color: #27143c; background: #ffd20a; cursor: pointer; font-size: 12px; font-weight: 950; }
.hub-action-bar button.secondary { color: #5b248e; border: 1px solid #d9cbe2; background: #fff; }.hub-action-bar button:disabled, .hub-stage button:disabled { opacity: .42; cursor: not-allowed; }
.prototype-note { color: #7c7084; font-size: 11px; line-height: 1.55; }
.hub-empty-state, .hub-success { display: grid; justify-items: center; max-width: 680px; margin: 80px auto; text-align: center; }
.hub-empty-state > span, .hub-success > span { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 18px; border-radius: 25px; color: #2a133f; background: #ffd20a; box-shadow: 0 18px 40px rgba(169,132,0,.2); font-size: 32px; font-weight: 950; }
.hub-empty-state p, .hub-success p { max-width: 600px; margin: 18px 0 25px; color: #726779; font-size: 15px; line-height: 1.65; }

/* Space Karting --------------------------------------------------------- */
.coming-soon-stage { display: grid; place-items: center; align-content: center; overflow: hidden; min-height: 720px; text-align: center; background: radial-gradient(circle at 50% 18%, #481b70, #21102f 48%, #11091a); }
.coming-soon-stage::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(circle, #000, transparent 75%); }
.coming-soon-stage > * { position: relative; z-index: 1; }.coming-soon-stage .hub-kicker { color: #ffd20a; }.coming-soon-stage h1 { color: #fff; font-size: clamp(52px, 8vw, 112px); text-shadow: 0 14px 55px rgba(139,53,199,.45); }
.coming-soon-stage > p:not(.hub-kicker) { max-width: 610px; margin: 24px auto; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.7; }
.coming-pill { margin: 22px 0 0; padding: 9px 18px; border: 1px solid rgba(255,210,10,.4); border-radius: 999px; color: #2b133f; background: #ffd20a; font-size: 13px; font-weight: 950; letter-spacing: .24em; }
.coming-orbit { position: relative; width: 190px; height: 190px; margin-bottom: 15px; }.coming-orbit > span { position: absolute; inset: 43px; display: grid; place-items: center; border-radius: 50%; color: #27123c; background: linear-gradient(145deg, #ffe95b, #ffd20a); box-shadow: 0 0 70px rgba(255,210,10,.28); font-size: 48px; font-weight: 950; }.coming-orbit > i { position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; transform: rotate(18deg) scaleY(.45); }.coming-orbit > i:nth-child(2) { inset: 0; transform: rotate(-31deg) scaleY(.65); }.coming-orbit > i:nth-child(3) { inset: 21px; transform: rotate(70deg) scaleY(.35); }
.coming-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }.coming-facts span { padding: 9px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); font-size: 11px; }

/* Happy Land ------------------------------------------------------------ */
.hub-happyland .hub-stage { background: linear-gradient(180deg, #fffdf3, #f8f6fb 42%); }
.happy-price { padding: 22px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #5b248e, #d83f8c); box-shadow: 0 18px 42px rgba(91,36,142,.2); }.happy-price span, .happy-price strong, .happy-price small { display: block; }.happy-price span { color: #ffe66a; font-size: 10px; font-weight: 950; letter-spacing: .13em; }.happy-price strong { margin-top: 5px; font-size: 48px; line-height: 1; }.happy-price small { margin-top: 7px; color: rgba(255,255,255,.72); font-size: 11px; }
.rules-panel { max-height: 670px; overflow-y: auto; }.rules-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: rules; }.rules-list li { position: relative; padding: 12px 12px 12px 44px; border-radius: 12px; color: #62596b; background: #faf8fb; font-size: 11px; line-height: 1.55; counter-increment: rules; }.rules-list li::before { content: counter(rules); position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: #fff; background: #6b2a98; font-size: 10px; font-weight: 950; }.rules-list strong { color: #271635; }
.happy-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding: 16px; border-radius: 14px; color: #fff; background: #2c1245; }.happy-total span { font-size: 11px; }.happy-total strong { font-size: 26px; }.happy-ticket, .team-reference, .food-order-ticket { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; padding: 18px 22px; border: 1px dashed #a985ba; border-radius: 16px; background: #fff; }.happy-ticket div { min-width: 150px; }.happy-ticket small, .happy-ticket strong, .team-reference small, .team-reference strong { display: block; }.happy-ticket small, .team-reference small { color: #8b8092; font-size: 9px; }.happy-ticket strong, .team-reference strong { margin-top: 4px; color: #5b248e; font-size: 18px; }

/* Team building --------------------------------------------------------- */
.team-flow-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: stretch; padding: 20px; border-radius: 20px; color: #fff; background: #2d1246; }
.team-flow-step { display: grid; grid-template-columns: 32px 1fr auto; gap: 7px; align-items: center; }
.team-flow-step > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #2d1246; background: #ffd20a; font-weight: 950; }
.team-flow-step p { margin: 0; font-size: 11px; font-weight: 800; }
.team-flow-step i { color: rgba(255,255,255,.45); font-style: normal; }
.team-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 13px; }.team-progress span { padding: 11px; border-radius: 12px; color: #918699; background: #ece8ef; font-size: 11px; font-weight: 850; text-align: center; }.team-progress span.active { color: #fff; background: #5b248e; }
.team-panel { min-height: 520px; }.team-activity-picker { margin-top: 22px; }.team-activity-picker h3 { margin: 0 0 12px; font-size: 15px; }.team-activity-picker { display: flex; flex-wrap: wrap; gap: 9px; }.team-activity-picker h3 { flex: 0 0 100%; }.team-activity-picker button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px; border: 1px solid #ddd4e3; border-radius: 12px; color: #5e5367; background: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }.team-activity-picker button > span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 7px; color: #5b248e; background: #eee7f3; }.team-activity-picker button.selected { color: #5b248e; border-color: #8d5aaa; background: #f5eef9; }.team-activity-picker button.selected > span { color: #fff; background: #5b248e; }.team-activity-picker button small { padding: 3px 5px; border-radius: 999px; color: #604f14; background: #ffe66a; font-size: 8px; }
.team-notes { display: grid; gap: 7px; margin-top: 18px; color: #62576a; font-size: 11px; font-weight: 800; }.team-notes textarea { min-height: 105px; padding-block: 12px; resize: vertical; }
.team-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.team-summary > div { padding: 16px; border: 1px solid #e2dce7; border-radius: 14px; background: #fbfafc; }.team-summary span, .team-summary strong, .team-summary small { display: block; }.team-summary span { color: #8a7f91; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.team-summary strong { margin-top: 6px; font-size: 14px; }.team-summary small { margin-top: 4px; color: #7c7283; font-size: 10px; line-height: 1.45; }
.team-no-payment { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; margin-top: 16px; padding: 14px; border-radius: 13px; color: #64561c; background: #fff7cb; }.team-no-payment > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #2a143f; background: #ffd20a; font-weight: 950; }.team-no-payment p { margin: 0; font-size: 11px; line-height: 1.5; }

/* Food ordering --------------------------------------------------------- */
.food-hero { align-items: center; }.food-location-card { display: grid; grid-template-columns: 43px 1fr; gap: 12px; align-items: center; padding: 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #2d1247, #62258d); }.food-location-card > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #2b143f; background: #ffd20a; font-size: 20px; }.food-location-card small, .food-location-card strong, .food-location-card p { display: block; }.food-location-card small { color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .1em; }.food-location-card strong { margin-top: 3px; font-size: 14px; }.food-location-card p { margin: 4px 0 0; color: rgba(255,255,255,.63); font-size: 10px; }
.food-toolbar { margin-bottom: 10px; padding: 14px; border: 1px solid #e1dbe6; border-radius: 18px; background: #fff; }.food-search { display: grid; grid-template-columns: 38px 1fr; align-items: center; max-width: 520px; min-height: 45px; border: 1px solid #ddd4e2; border-radius: 13px; background: #faf9fb; }.food-search span { color: #6a2997; text-align: center; font-size: 17px; }.food-search input { height: 43px; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }.food-category-row { display: flex; gap: 7px; overflow-x: auto; margin-top: 11px; padding-bottom: 2px; scrollbar-width: thin; }.food-category-row button { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #ded6e3; border-radius: 999px; color: #675d6f; background: #fff; cursor: pointer; font-size: 10px; font-weight: 800; }.food-category-row button.active { color: #fff; border-color: #5b248e; background: #5b248e; }.food-menu-source { display: inline-flex; align-items: center; min-height: 30px; margin-top: 10px; color: #6a2997; font-size: 9px; font-weight: 850; text-decoration: none; }.food-menu-source:hover { text-decoration: underline; }
.food-allergen-legend { margin: 0 0 17px; overflow: hidden; border: 1px solid #ded6e4; border-radius: 16px; background: #fff; }.food-allergen-legend summary { display: grid; grid-template-columns: 34px 1fr 28px; gap: 10px; align-items: center; min-height: 55px; padding: 9px 13px; cursor: pointer; list-style: none; }.food-allergen-legend summary::-webkit-details-marker { display: none; }.food-allergen-legend summary > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: #2b143f; background: #ffd20a; font-size: 13px; font-weight: 950; }.food-allergen-legend summary strong, .food-allergen-legend summary small { display: block; }.food-allergen-legend summary strong { font-size: 11px; }.food-allergen-legend summary small { margin-top: 2px; color: #897f91; font-size: 9px; }.food-allergen-legend summary > b { color: #6c2998; font-size: 18px; transition: transform .18s; }.food-allergen-legend[open] summary > b { transform: rotate(45deg); }.food-allergen-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 0 13px 13px; }.food-allergen-grid > div { display: grid; grid-template-columns: 30px 1fr; gap: 7px; align-items: center; min-height: 42px; padding: 6px; border-radius: 10px; background: #f7f3f9; }.food-allergen-grid span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #fff; background: #5b248e; font-size: 8px; font-weight: 950; }.food-allergen-grid p { margin: 0; color: #685e70; font-size: 8px; line-height: 1.25; }.food-allergen-legend > p { margin: 0; padding: 11px 13px; color: #756a7c; background: #fff8d5; font-size: 9px; line-height: 1.45; }.food-allergen-legend > p a { color: #5b248e; font-weight: 850; }
.food-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 17px; align-items: start; }.food-layout > div { min-width: 0; }.food-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.food-load-more { display: block; min-height: 46px; margin: 18px auto 0; padding: 0 24px; border: 1px solid #6d2996; border-radius: 999px; color: #5b248e; background: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 900; }.food-load-more:hover { color: #fff; background: #5b248e; }.food-card { min-width: 0; overflow: hidden; border: 1px solid #e2dce7; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(32,9,50,.05); }.food-card-art { position: relative; height: 145px; overflow: hidden; background: #2d1247; }.food-card-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 48%, rgba(29,8,44,.28)); pointer-events: none; }.food-card-art img { object-fit: cover; transition: transform .25s ease; }.food-card:hover .food-card-art img { transform: scale(1.035); }.food-card-art > b { position: absolute; z-index: 1; right: 9px; top: 9px; padding: 5px 7px; border-radius: 999px; color: #2b143f; background: #ffd20a; box-shadow: 0 3px 10px rgba(0,0,0,.15); font-size: 8px; letter-spacing: .06em; }.food-card-body { display: flex; flex-direction: column; min-height: 275px; padding: 15px; }.food-card-body > small { color: #7a319d; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.food-card h2 { margin: 6px 0 0; font-size: 15px; line-height: 1.25; }.food-card p { min-height: 45px; margin: 7px 0 10px; color: #7a7081; font-size: 10px; line-height: 1.5; }.food-allergen-tags { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 11px; }.food-allergen-tags > small { margin-right: 2px; color: #8b8192; font-size: 8px; font-weight: 850; text-transform: uppercase; }.food-allergen-tags abbr { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; background: #5b248e; cursor: help; font-size: 8px; font-weight: 950; text-decoration: none; }.food-allergen-tags em { color: #8b8192; font-size: 8px; font-style: normal; }.food-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid #eee9f1; }.food-card footer > strong { font-size: 15px; }.food-card footer em { color: #877d8e; font-size: 9px; font-style: normal; }.food-card footer > button { min-height: 35px; padding: 0 11px; border: 0; border-radius: 10px; color: #2b143f; background: #ffd20a; cursor: pointer; font-size: 10px; font-weight: 900; }.food-qty { display: grid; grid-template-columns: 31px 26px 31px; align-items: center; }.food-qty button { height: 31px; border: 1px solid #d7cae0; color: #5b248e; background: #fff; cursor: pointer; font-size: 16px; }.food-qty button:first-child { border-radius: 9px 0 0 9px; }.food-qty button:last-child { border-radius: 0 9px 9px 0; }.food-qty span { text-align: center; font-size: 11px; font-weight: 900; }
.food-cart { position: sticky; top: 56px; overflow: hidden; border: 1px solid #ded6e4; border-radius: 22px; background: #fff; box-shadow: 0 18px 44px rgba(32,9,50,.1); }.food-cart > header { display: flex; align-items: center; justify-content: space-between; padding: 19px; color: #fff; background: #2e1348; }.food-cart > header span { color: #ffd20a; font-size: 9px; font-weight: 950; letter-spacing: .12em; }.food-cart > header h2 { margin: 4px 0 0; color: #fff; font-size: 19px; }.food-cart > header b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #2d1246; background: #ffd20a; }.food-cart-empty { display: grid; justify-items: center; padding: 34px; color: #897f91; text-align: center; }.food-cart-empty span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: #f0e9f4; font-size: 21px; }.food-cart-lines { max-height: 220px; overflow-y: auto; padding: 4px 17px; }.food-cart-lines > div { display: grid; grid-template-columns: 28px 1fr 27px; gap: 8px; align-items: center; min-height: 57px; border-bottom: 1px solid #eee9f1; }.food-cart-lines > div > span { color: #6c2b97; font-size: 11px; font-weight: 900; }.food-cart-lines p { margin: 0; }.food-cart-lines strong, .food-cart-lines small { display: block; }.food-cart-lines strong { font-size: 10px; }.food-cart-lines small { margin-top: 3px; color: #83798a; font-size: 9px; }.food-cart-lines button { width: 27px; height: 27px; border: 0; border-radius: 8px; color: #9a4b5c; background: #faebef; cursor: pointer; }.food-cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 18px; background: #f8f5fa; }.food-cart-total span { font-size: 11px; font-weight: 800; }.food-cart-total strong { font-size: 22px; }.food-pickup-mode { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; margin: 15px 17px 0; padding: 10px 12px; border: 1px solid #8c5aa9; border-radius: 12px; color: #5b248e; background: #f6eff9; }.food-pickup-mode > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; background: #5b248e; }.food-pickup-mode strong, .food-pickup-mode small { display: block; }.food-pickup-mode strong { font-size: 10px; }.food-pickup-mode small { margin-top: 3px; color: #81758a; font-size: 8.5px; }.food-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 15px 17px; }.food-contact label, .food-contact .phone-field { min-width: 0; }.food-contact input, .food-contact select { min-height: 44px; font-size: 11px; }.food-contact textarea { min-height: 62px; padding-block: 9px; resize: vertical; font-size: 11px; }.food-submit { width: calc(100% - 34px); min-height: 47px; margin: 0 17px; border: 0; border-radius: 13px; color: #2b143f; background: #ffd20a; cursor: pointer; font-size: 11px; font-weight: 950; }.food-fineprint { display: block; padding: 9px 17px 17px; color: #918799; font-size: 9px; text-align: center; }.food-order-ticket { justify-content: space-between; }.food-order-ticket small, .food-order-ticket strong, .food-order-ticket b { display: block; }.food-order-ticket small { color: #8c8293; font-size: 9px; }.food-order-ticket strong { color: #5b248e; }.food-order-ticket b { font-size: 21px; }

/* Account --------------------------------------------------------------- */
.account-auth-stage { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 55px; align-items: center; background: linear-gradient(135deg, #f8f6fb 0%, #fff 55%, #fff8d6); }.account-auth-visual { padding: 20px 30px; }.account-auth-visual h1 { max-width: 760px; }.account-auth-visual > ul { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }.account-auth-visual li { display: flex; gap: 9px; color: #655b6d; font-size: 13px; }.account-auth-visual li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: #fff; background: #5b248e; font-size: 10px; font-weight: 950; }.account-lock { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 24px; border-radius: 28px; color: #2b143f; background: #ffd20a; box-shadow: 0 20px 44px rgba(144,112,0,.18); font-size: 39px; font-weight: 950; }.account-lock i { position: absolute; right: -7px; bottom: -7px; display: grid; place-items: center; width: 31px; height: 31px; border: 4px solid #f8f6fb; border-radius: 50%; color: #fff; background: #16845b; font-size: 12px; font-style: normal; }
.account-auth-card { padding: 28px; border: 1px solid #e1d9e6; border-radius: 24px; background: #fff; box-shadow: 0 24px 55px rgba(36,11,57,.12); }.auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); padding: 4px; border-radius: 13px; background: #f0ebf3; }.auth-tabs button { min-height: 39px; border: 0; border-radius: 10px; color: #756b7d; background: transparent; cursor: pointer; font-size: 11px; font-weight: 900; }.auth-tabs button.active { color: #fff; background: #5b248e; }.demo-auth-note { margin: 14px 0; padding: 11px; border-radius: 11px; color: #655a28; background: #fff6c7; font-size: 10px; line-height: 1.45; }.demo-auth-note strong { margin-right: 5px; }.account-auth-card label { margin-top: 13px; }.account-login { display: grid; place-items: center; width: 100%; min-height: 49px; margin-top: 18px; border: 0; border-radius: 13px; color: #2b143f; background: #ffd20a; cursor: pointer; font-size: 12px; font-weight: 950; text-decoration: none; }.account-auth-card > small { display: block; margin-top: 11px; color: #8d8394; font-size: 9px; line-height: 1.5; text-align: center; }
.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.account-heading h1 { font-size: clamp(38px, 4vw, 58px); }.account-heading > div:first-child > p:last-child { margin: 8px 0 0; color: #766b7d; }.account-member-chip { display: grid; grid-template-columns: 45px 1fr auto; gap: 11px; align-items: center; min-width: 310px; padding: 10px 11px; border: 1px solid #dfd7e4; border-radius: 17px; background: #fff; }.account-member-chip > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: #5b248e; font-weight: 950; }.account-member-chip strong, .account-member-chip small { display: block; }.account-member-chip strong { font-size: 11px; }.account-member-chip small { margin-top: 3px; color: #877d8e; font-size: 9px; }.account-member-chip button, .account-member-chip a { border: 0; color: #7d2fa2; background: transparent; cursor: pointer; font-size: 10px; font-weight: 900; text-decoration: none; }
.account-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); min-height: 610px; overflow: hidden; border: 1px solid #ded6e4; border-radius: 22px; background: #fff; box-shadow: 0 18px 46px rgba(36,11,57,.08); }.account-nav { padding: 17px 11px; border-right: 1px solid #e6dfe9; background: #2d1347; }.account-nav button { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; width: 100%; min-height: 49px; padding: 7px 9px; border: 0; border-radius: 12px; color: rgba(255,255,255,.7); background: transparent; cursor: pointer; font-size: 10px; font-weight: 850; text-align: left; }.account-nav button > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #ffd20a; background: rgba(255,255,255,.08); }.account-nav button.active { color: #2b143f; background: #ffd20a; }.account-nav button.active > span { color: #fff; background: #5b248e; }.account-nav button b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; color: #fff; background: #d53f87; font-size: 8px; }.account-content { min-width: 0; padding: 27px; background: #faf8fb; }.account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.account-stats article { display: grid; grid-template-columns: 47px 1fr; gap: 12px; align-items: center; padding: 17px; border: 1px solid #e1dbe5; border-radius: 16px; background: #fff; }.account-stats article > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #5b248e; background: #f0e8f5; font-size: 18px; }.account-stats small, .account-stats strong { display: block; }.account-stats small { color: #867c8d; font-size: 8px; letter-spacing: .06em; }.account-stats strong { margin-top: 3px; font-size: 24px; }.account-stats button { margin-top: 4px; padding: 0; border: 0; color: #6a2897; background: transparent; cursor: pointer; font-size: 9px; font-weight: 850; }
.account-next { display: flex; justify-content: space-between; gap: 20px; margin-top: 13px; padding: 23px; border-radius: 19px; color: #fff; background: linear-gradient(135deg, #32154e, #6d2999); }.account-next span, .account-next h2, .account-next p { display: block; }.account-next > div:first-child > span { color: #ffd94b; font-size: 9px; font-weight: 950; letter-spacing: .1em; }.account-next h2 { margin: 6px 0 0; color: #fff; font-size: 21px; }.account-next p { margin: 6px 0 0; color: rgba(255,255,255,.68); font-size: 11px; text-transform: capitalize; }.account-next-code { min-width: 120px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.17); text-align: right; }.account-next-code small, .account-next-code strong, .account-next-code span { display: block; }.account-next-code small { color: rgba(255,255,255,.58); font-size: 9px; }.account-next-code strong { margin-top: 3px; color: #ffd20a; font-size: 34px; }.account-next-code span { color: rgba(255,255,255,.6); font-size: 9px; }
.account-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 13px; }.account-quick button { display: grid; grid-template-columns: 39px 1fr; gap: 9px; min-height: 82px; padding: 13px; border: 1px solid #e0d9e5; border-radius: 15px; color: #251532; background: #fff; cursor: pointer; text-align: left; }.account-quick button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #f0e8f5; font-size: 16px; }.account-quick strong { font-size: 10px; }.account-quick small { color: #7f7486; font-size: 9px; }
.account-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 17px; }.account-section-head span { color: #6c2998; font-size: 9px; font-weight: 950; letter-spacing: .12em; }.account-section-head h2 { margin: 4px 0 0; font-size: 28px; }.account-section-head p { margin: 4px 0 0; color: #82778a; font-size: 11px; }.account-section-head > button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 11px; color: #2b143f; background: #ffd20a; cursor: pointer; font-size: 10px; font-weight: 900; }
.reservation-list { display: grid; gap: 9px; }.reservation-list article { display: grid; grid-template-columns: 47px minmax(0, 1fr) 120px auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid #e1dae6; border-radius: 15px; background: #fff; }.reservation-list article.cancelled { opacity: .55; }.reservation-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: #5b248e; font-size: 18px; font-weight: 950; }.reservation-icon.lasertag { background: #168b91; }.reservation-icon.rodendan { background: #d13f88; }.reservation-main span { color: #6d2a98; font-size: 8px; font-weight: 950; letter-spacing: .08em; }.reservation-main h3 { margin: 4px 0 0; font-size: 14px; }.reservation-main p { margin: 4px 0 0; color: #81778a; font-size: 10px; text-transform: capitalize; }.reservation-status { text-align: right; }.reservation-status span, .reservation-status strong { display: block; }.reservation-status span { padding: 5px 7px; border-radius: 999px; color: #156f4e; background: #e3f5ed; font-size: 8px; font-weight: 900; }.reservation-status span.changed { color: #7c5e08; background: #fff2b7; }.reservation-status span.cancelled { color: #98384d; background: #fae6eb; }.reservation-status strong { margin-top: 7px; font-size: 13px; }.reservation-actions { display: flex; gap: 5px; }.reservation-actions button { min-height: 35px; padding: 0 9px; border: 1px solid #d9cde1; border-radius: 9px; color: #5b248e; background: #fff; cursor: pointer; font-size: 9px; font-weight: 850; }.reservation-actions button:last-child { color: #a13b50; }
.account-modal { position: fixed; z-index: 1600; inset: 0; display: grid; place-items: center; padding: 18px; }.account-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(21,7,34,.58); backdrop-filter: blur(3px); }.account-modal > div { position: relative; z-index: 1; width: min(520px, 100%); padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(19,6,31,.32); }.account-modal header { display: flex; align-items: center; justify-content: space-between; }.account-modal header span { color: #6b2998; font-size: 9px; font-weight: 950; letter-spacing: .12em; }.account-modal header button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f1ecf3; cursor: pointer; font-size: 20px; }.account-modal h2 { margin: 10px 0 18px; }.account-modal > div > button:last-child { width: 100%; min-height: 47px; margin-top: 17px; border: 0; border-radius: 12px; color: #fff; background: #5b248e; cursor: pointer; font-size: 11px; font-weight: 900; }.account-modal > div > button.danger-action { background: #a33c52; }.modal-reason select { margin-top: 6px; }
.waiver-list { display: grid; gap: 11px; }.waiver-list article { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid #dfd8e4; border-radius: 16px; background: #fff; }.waiver-mark { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 15px; color: #6e5400; background: #ffeaa1; font-size: 19px; font-weight: 950; }.waiver-mark.signed { color: #fff; background: #16845b; }.waiver-list article > div:nth-child(2) span { color: #6c2998; font-size: 8px; font-weight: 950; }.waiver-list h3 { margin: 4px 0 0; font-size: 14px; }.waiver-list article > div:nth-child(2) p { margin: 3px 0 0; color: #82778a; font-size: 10px; }.waiver-list article > b { padding: 6px 8px; border-radius: 999px; font-size: 8px; }.waiver-list article > b.pending { color: #775a00; background: #fff0ad; }.waiver-list article > b.signed { color: #126b4a; background: #e0f4eb; }.waiver-form { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 260px; gap: 12px; padding-top: 14px; border-top: 1px solid #e9e3ec; }.waiver-rules { grid-row: span 3; padding: 14px; border-radius: 13px; background: #f8f4fa; }.waiver-rules strong { font-size: 11px; }.waiver-rules ul { margin: 9px 0 0; padding-left: 17px; }.waiver-rules li { margin-top: 6px; color: #6e6476; font-size: 10px; line-height: 1.45; }.waiver-form > label:not(.hub-consent) { display: grid; gap: 6px; color: #62586a; font-size: 10px; font-weight: 800; }.waiver-form input[type="text"], .waiver-form > label:not(.hub-consent) input { min-height: 42px; padding: 0 11px; border: 1px solid #dcd3e1; border-radius: 11px; }.waiver-form .hub-consent { margin: 0; font-size: 10px; }.waiver-form > button { min-height: 42px; border: 0; border-radius: 11px; color: #fff; background: #5b248e; cursor: pointer; font-size: 10px; font-weight: 900; }
.payment-table { overflow-x: auto; border: 1px solid #e0d9e5; border-radius: 15px; background: #fff; }.payment-table > div { display: grid; grid-template-columns: 1.2fr .8fr .9fr .8fr .65fr .8fr; gap: 10px; align-items: center; min-width: 760px; min-height: 60px; padding: 10px 14px; border-top: 1px solid #ece7ef; }.payment-table > div:first-child { border-top: 0; }.payment-table-head { color: #8a8091; background: #f5f1f7; font-size: 9px; font-weight: 900; text-transform: uppercase; }.payment-table span { font-size: 10px; }.payment-table strong, .payment-table small { display: block; }.payment-table small { margin-top: 3px; color: #8b8192; font-size: 8px; }.payment-table b { padding: 5px 7px; border-radius: 999px; font-size: 8px; }.payment-table b.paid { color: #126b4a; background: #e2f5ec; }.payment-table b.refunded { color: #99384d; background: #fae5ea; }.payment-table button { min-height: 34px; padding: 0 9px; border: 1px solid #d7cce0; border-radius: 9px; color: #5b248e; background: #fff; cursor: pointer; font-size: 8px; font-weight: 850; }
.notification-toast { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; padding: 12px; border-radius: 12px; color: #126b4a; background: #e4f5ed; font-size: 10px; }.notification-toast span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: #16845b; }.notification-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }.notification-grid article { padding: 18px; border: 1px solid #e0d9e5; border-radius: 16px; background: #fff; }.notification-grid h3 { margin: 0 0 8px; font-size: 15px; }.notification-row { position: relative; display: grid; grid-template-columns: 38px 1fr 38px; gap: 10px; align-items: center; min-height: 62px; border-top: 1px solid #ece7ef; cursor: pointer; }.notification-row > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #5b248e; background: #f0e8f4; font-size: 9px; font-weight: 950; }.notification-row p { margin: 0; }.notification-row strong, .notification-row small { display: block; }.notification-row strong { font-size: 10px; }.notification-row small { margin-top: 3px; color: #8a8091; font-size: 8px; }.notification-row input { position: absolute; opacity: 0; }.notification-row i { position: relative; width: 36px; height: 21px; border-radius: 999px; background: #d9d2de; }.notification-row i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: .18s; }.notification-row input:checked + i { background: #5b248e; }.notification-row input:checked + i::after { transform: translateX(15px); }.notification-row.compact { grid-template-columns: 1fr 38px; }.profile-card { max-width: 780px; padding: 24px; border: 1px solid #e0d9e5; border-radius: 18px; background: #fff; }.profile-avatar { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 20px; border-radius: 23px; color: #fff; background: #5b248e; font-size: 22px; font-weight: 950; }.profile-card > button { margin-top: 17px; }.profile-saved { margin-left: 10px; color: #16845b; font-size: 10px; }

/* Restaurant table booking --------------------------------------------- */
.hub-restaurant .hub-stage { background: linear-gradient(180deg, #fffaf0 0%, #f8f6fb 38%); }
.restaurant-hero { align-items: center; }
.restaurant-hero-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: center; overflow: hidden; padding: 21px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #2b123f, #61258a); box-shadow: 0 18px 42px rgba(46,15,71,.2); }
.restaurant-hero-card::after { content: ""; position: absolute; right: -32px; bottom: -48px; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.035); }
.restaurant-hero-card > span { position: relative; z-index: 1; display: grid; place-items: center; width: 47px; height: 47px; border-radius: 15px; color: #2d1442; background: #ffd20a; font-size: 22px; font-weight: 950; }
.restaurant-hero-card > div { position: relative; z-index: 1; min-width: 0; }.restaurant-hero-card small, .restaurant-hero-card strong, .restaurant-hero-card p { display: block; }.restaurant-hero-card small { color: rgba(255,255,255,.58); font-size: 9px; font-weight: 900; letter-spacing: .12em; }.restaurant-hero-card strong { margin-top: 4px; font-size: 15px; }.restaurant-hero-card p { margin: 4px 0 0; color: rgba(255,255,255,.65); font-size: 10px; }
.restaurant-hero-card > b { grid-column: 1 / -1; position: relative; z-index: 1; justify-self: start; padding: 6px 9px; border-radius: 999px; color: #5a4700; background: #ffe778; font-size: 8px; letter-spacing: .08em; }
.restaurant-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 13px; }
.restaurant-progress span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px; border-radius: 13px; color: #8b8192; background: #ebe7ed; font-size: 10px; font-weight: 850; }
.restaurant-progress i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 9px; color: #756d7b; background: #fff; font-style: normal; }
.restaurant-progress span.active { color: #fff; background: #5b248e; }.restaurant-progress span.active i { color: #2b143f; background: #ffd20a; }
.restaurant-panel { min-height: 565px; }
.restaurant-step-one { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: 18px; align-items: start; }
.restaurant-booking-fields { display: grid; gap: 13px; }
.restaurant-location-summary { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; padding: 15px; border-radius: 15px; color: #fff; background: #2f1546; }
.restaurant-location-summary > span { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 13px; color: #2e1643; background: #ffd20a; font-size: 18px; }.restaurant-location-summary small, .restaurant-location-summary strong, .restaurant-location-summary p { display: block; }.restaurant-location-summary small { color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .1em; }.restaurant-location-summary strong { margin-top: 3px; font-size: 13px; }.restaurant-location-summary p { margin: 3px 0 0; color: rgba(255,255,255,.64); font-size: 9px; }
.restaurant-field { display: grid; gap: 7px; color: #62576a; font-size: 11px; font-weight: 800; }
.restaurant-field input, .restaurant-field select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #dcd3e2; border-radius: 13px; color: #20122e; background: #fbfafc; outline: 0; font-size: 13px; }
.restaurant-field input:focus, .restaurant-field select:focus { border-color: #6a2698; background: #fff; box-shadow: 0 0 0 4px rgba(91,36,142,.09); }
.restaurant-group-note { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 13px; border-radius: 13px; color: #6b5611; background: #fff5bd; }.restaurant-group-note > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #2b143f; background: #ffd20a; font-weight: 950; }.restaurant-group-note p { margin: 0; font-size: 10px; line-height: 1.5; }
.restaurant-time-picker { padding: 18px; border: 1px solid #e2dce7; border-radius: 18px; background: #fbfafc; }.restaurant-time-picker h3 { margin: 0; font-size: 17px; }.restaurant-time-picker > p { margin: 5px 0 15px; color: #7e7386; font-size: 11px; text-transform: capitalize; }
.restaurant-time-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-height: 370px; overflow-y: auto; padding: 2px; }.restaurant-time-grid button { display: grid; justify-items: center; gap: 4px; min-height: 59px; padding: 8px 4px; border: 1px solid #dbd2e1; border-radius: 12px; color: #2d1a3b; background: #fff; cursor: pointer; }.restaurant-time-grid button:hover { border-color: #9f76b7; }.restaurant-time-grid button.selected { color: #fff; border-color: #5b248e; background: #5b248e; box-shadow: 0 8px 18px rgba(91,36,142,.2); }.restaurant-time-grid strong { font-size: 13px; }.restaurant-time-grid small { color: #20805d; font-size: 7px; }.restaurant-time-grid small.few { color: #a3631e; }.restaurant-time-grid button.selected small { color: #ffe66d; }.restaurant-demo-availability { display: block; margin-top: 12px; color: #918699; font-size: 9px; line-height: 1.45; }
.restaurant-preference-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }.restaurant-preference-grid button { position: relative; display: grid; justify-items: start; min-height: 142px; padding: 16px; border: 1px solid #ded6e4; border-radius: 17px; color: #5c5264; background: #fff; cursor: pointer; text-align: left; }.restaurant-preference-grid button > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 11px; border-radius: 12px; color: #5b248e; background: #f0e8f4; font-size: 16px; }.restaurant-preference-grid strong, .restaurant-preference-grid small { display: block; }.restaurant-preference-grid strong { color: #2a1738; font-size: 12px; }.restaurant-preference-grid small { margin-top: 5px; color: #83798b; font-size: 9px; line-height: 1.45; }.restaurant-preference-grid i { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; color: #6b2b97; background: #f0e8f4; font-size: 11px; font-style: normal; font-weight: 950; }.restaurant-preference-grid button.selected { border-color: #6f309b; background: #f7f0fb; box-shadow: inset 0 0 0 1px rgba(91,36,142,.12); }.restaurant-preference-grid button.selected i { color: #fff; background: #5b248e; }
.restaurant-detail-grid { display: grid; grid-template-columns: minmax(250px,.8fr) minmax(0,1.2fr); gap: 17px; margin-top: 20px; }.restaurant-dietary > span { display: block; margin-bottom: 7px; color: #62576a; font-size: 11px; font-weight: 800; }.restaurant-dietary > div { display: flex; flex-wrap: wrap; gap: 7px; }.restaurant-dietary button { min-height: 39px; padding: 0 11px; border: 1px solid #ddd4e3; border-radius: 11px; color: #665b6e; background: #fff; cursor: pointer; font-size: 9px; font-weight: 800; }.restaurant-dietary button.selected { color: #fff; border-color: #5b248e; background: #5b248e; }
.restaurant-birthday-note { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; margin-top: 18px; padding: 14px; border-radius: 14px; color: #714666; background: #fdebf5; }.restaurant-birthday-note > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; background: #fff; }.restaurant-birthday-note p { margin: 0; font-size: 10px; line-height: 1.5; }.restaurant-birthday-note button { min-height: 38px; padding: 0 11px; border: 0; border-radius: 10px; color: #fff; background: #c63c83; cursor: pointer; font-size: 9px; font-weight: 900; }
.restaurant-birthday-note.no-icon { grid-template-columns: 1fr auto; }
.restaurant-contact-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 18px; align-items: start; }.restaurant-note textarea { width: 100%; min-height: 105px; padding: 12px 13px; border: 1px solid #dcd3e2; border-radius: 13px; color: #20122e; background: #fbfafc; outline: 0; resize: vertical; font: inherit; font-size: 12px; }
.restaurant-loyalty { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 20px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #2d1344, #63278d); box-shadow: 0 16px 34px rgba(43,14,67,.17); }.restaurant-loyalty > span { display: grid; place-items: center; width: 51px; height: 51px; border-radius: 16px; color: #2c1442; background: #ffd20a; font-size: 23px; font-weight: 950; }.restaurant-loyalty h3 { margin: 0; color: #fff; font-size: 17px; line-height: 1.2; }.restaurant-loyalty p { margin: 9px 0 14px; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.55; }.restaurant-loyalty button { min-height: 38px; padding: 0 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; color: #2b143f; background: #ffd20a; cursor: pointer; font-size: 9px; font-weight: 950; }
.restaurant-review-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }.restaurant-review-grid > div { min-width: 0; padding: 16px; border: 1px solid #e0d9e5; border-radius: 15px; background: #fbfafc; }.restaurant-review-grid span, .restaurant-review-grid strong, .restaurant-review-grid small { display: block; }.restaurant-review-grid span { color: #8a7f91; font-size: 8px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }.restaurant-review-grid strong { overflow-wrap: anywhere; margin-top: 6px; color: #2b1739; font-size: 13px; }.restaurant-review-grid small { overflow-wrap: anywhere; margin-top: 4px; color: #81778a; font-size: 9px; line-height: 1.45; }
.restaurant-confirmation-note { display: grid; grid-template-columns: 39px 1fr; gap: 11px; align-items: center; margin-top: 17px; padding: 15px; border-radius: 14px; color: #235f48; background: #e5f6ee; }.restaurant-confirmation-note.request { color: #735919; background: #fff4bd; }.restaurant-confirmation-note > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: #16845b; font-weight: 950; }.restaurant-confirmation-note.request > span { color: #2a143f; background: #ffd20a; }.restaurant-confirmation-note p { margin: 0; font-size: 10px; line-height: 1.55; }.restaurant-confirmation-note strong { display: block; margin-bottom: 2px; }
.restaurant-action-bar { justify-content: space-between; }.restaurant-action-bar > div { flex: 1; margin: 0; text-align: center; }.restaurant-action-bar > div strong { text-transform: none; }
.restaurant-success .hub-success { max-width: 800px; }.restaurant-success-ticket { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 18px; align-items: center; width: 100%; margin-bottom: 16px; padding: 19px 22px; border: 1px dashed #a985ba; border-radius: 17px; background: #fff; text-align: left; }.restaurant-success-ticket small, .restaurant-success-ticket strong, .restaurant-success-ticket span { display: block; }.restaurant-success-ticket small { color: #8a7f91; font-size: 8px; font-weight: 900; letter-spacing: .08em; }.restaurant-success-ticket strong { margin-top: 5px; color: #5b248e; font-size: 15px; }.restaurant-success-ticket span { margin-top: 4px; color: #7b7183; font-size: 10px; }.restaurant-success-ticket b { padding: 8px 10px; border-radius: 999px; color: #126b4a; background: #e2f5ec; font-size: 8px; white-space: nowrap; }
.restaurant-success-note { display: grid; grid-template-columns: 32px 1fr; gap: 9px; align-items: center; width: 100%; padding: 12px; border-radius: 13px; color: #63541d; background: #fff7cf; text-align: left; }.restaurant-success-note > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #2b143f; background: #ffd20a; font-weight: 950; }.restaurant-success-note p { margin: 0; font-size: 10px; }
.restaurant-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 18px; }.restaurant-success-actions button { min-height: 48px; padding: 0 18px; border: 1px solid #d8cde0; border-radius: 13px; color: #5b248e; background: #fff; cursor: pointer; font-size: 10px; font-weight: 900; }.restaurant-success-actions button:last-child { color: #2b143f; border-color: #ffd20a; background: #ffd20a; }
.restaurant-unavailable .hub-empty-state { max-width: 850px; }.restaurant-location-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100%; }.restaurant-location-options button { display: grid; justify-items: start; padding: 17px; border: 1px solid #ded6e4; border-radius: 15px; color: #28153a; background: #fff; cursor: pointer; text-align: left; }.restaurant-location-options small, .restaurant-location-options strong, .restaurant-location-options span { display: block; }.restaurant-location-options small { color: #6b2a98; font-size: 8px; font-weight: 900; letter-spacing: .08em; }.restaurant-location-options strong { margin-top: 5px; font-size: 16px; }.restaurant-location-options span { margin-top: 4px; color: #83798a; font-size: 9px; }

/* Operations ------------------------------------------------------------ */
.operations-stage { background: #f4f2f6; }.operations-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 17px; }.operations-head h1 { font-size: clamp(40px, 5vw, 66px); }.operations-head > div:first-child > p:last-child { margin: 9px 0 0; color: #766c7d; }.operations-live { display: grid; grid-template-columns: 12px 1fr; min-width: 240px; padding: 15px; border: 1px solid #d8d0de; border-radius: 16px; background: #fff; }.operations-live i { grid-row: 1 / 4; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: #21b478; box-shadow: 0 0 0 4px rgba(33,180,120,.13); }.operations-live span { color: #7b7182; font-size: 8px; font-weight: 900; letter-spacing: .08em; }.operations-live strong { margin-top: 3px; font-size: 17px; }.operations-live small { color: #8b8192; font-size: 9px; }.operations-demo-note { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; padding: 11px 13px; border: 1px solid #eedb8b; border-radius: 12px; color: #62531a; background: #fff8d6; font-size: 10px; }.operations-demo-note strong { padding: 4px 6px; border-radius: 7px; color: #2b143f; background: #ffd20a; font-size: 8px; letter-spacing: .08em; }
.operations-filters { display: grid; grid-template-columns: minmax(0, 1fr) 250px auto; gap: 11px; align-items: end; margin-bottom: 12px; padding: 13px; border: 1px solid #ded7e3; border-radius: 16px; background: #fff; }.operations-locations { display: flex; gap: 6px; overflow-x: auto; }.operations-locations button { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px solid #ddd5e2; border-radius: 10px; color: #665c6d; background: #fff; cursor: pointer; font-size: 9px; font-weight: 850; }.operations-locations button small { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 7px; color: #5b248e; background: #efe8f3; font-size: 8px; }.operations-locations button.active { color: #fff; border-color: #5b248e; background: #5b248e; }.operations-locations button.active small { color: #2b143f; background: #ffd20a; }.operations-filters > label { display: grid; gap: 5px; color: #6c6274; font-size: 9px; font-weight: 850; }.operations-filters select { min-height: 40px; padding: 0 10px; border: 1px solid #dcd4e1; border-radius: 10px; background: #faf9fb; font-size: 10px; }.operations-filters > button { min-height: 40px; padding: 0 13px; border: 0; border-radius: 10px; color: #2b143f; background: #ffd20a; cursor: pointer; font-size: 10px; font-weight: 950; }
.operations-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }.operations-stats article { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; min-height: 78px; padding: 14px; border: 1px solid #ddd6e2; border-radius: 15px; background: #fff; }.operations-stats article > span { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 13px; color: #5b248e; background: #efe8f3; }.operations-stats small, .operations-stats strong { display: block; }.operations-stats small { color: #81778a; font-size: 8px; letter-spacing: .05em; }.operations-stats strong { margin-top: 3px; font-size: 23px; }
.operations-board { overflow-x: auto; border: 1px solid #ddd6e2; border-radius: 16px; background: #fff; }.operations-board-head, .operations-board article { display: grid; grid-template-columns: 80px 1.1fr 1.2fr 110px 1.5fr; gap: 12px; align-items: center; min-width: 900px; padding: 11px 14px; }.operations-board-head { min-height: 38px; color: #81778a; background: #f2eef4; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }.operations-board article { min-height: 72px; border-top: 1px solid #ece7ef; }.operations-board time { font-size: 17px; font-weight: 950; }.operations-board article > div:nth-child(2) { display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; }.operations-type { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: #fff; background: #5b248e; font-size: 13px; font-weight: 950; }.operations-type.hrana { background: #d17525; }.operations-type.lasertag { background: #168a91; }.operations-type.rodendan { background: #ce3f87; }.operations-board p { margin: 0; }.operations-board strong, .operations-board small { display: block; }.operations-board strong { font-size: 10px; }.operations-board small { margin-top: 3px; color: #867c8d; font-size: 8px; }.operations-status { justify-self: start; padding: 6px 8px; border-radius: 999px; color: #755900; background: #fff0ad; font-size: 8px; font-weight: 900; }.operations-status.confirmed, .operations-status.arrived, .operations-status.ready { color: #126b4a; background: #e1f4eb; }.operations-status.cancelled, .operations-status.no-show { color: #9a394e; background: #fae5ea; }.operations-status.preparing { color: #93531a; background: #ffead6; }.operations-actions { display: flex; flex-wrap: wrap; gap: 5px; }.operations-actions button { min-height: 31px; padding: 0 7px; border: 1px solid #d8cde0; border-radius: 8px; color: #5b248e; background: #fff; cursor: pointer; font-size: 8px; font-weight: 850; }.operations-actions button:first-child { color: #fff; border-color: #16845b; background: #16845b; }.operations-actions button.cancel { color: #9a394e; }.operations-empty { min-width: 900px; padding: 40px; color: #897f90; text-align: center; }

.operations-type.stol { background: #9a5d25; }

/* Existing UI fixes ----------------------------------------------------- */
.food-variant { display: grid; gap: 5px; margin: 0 0 10px; color: #6d6274; font-size: 9px; font-weight: 850; }
.food-variant select { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid #d9d0df; border-radius: 10px; color: #28163a; background: #faf8fb; font-size: 10px; }
.cancellation-policy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; padding: 14px; border: 1px solid #cce7da; border-radius: 14px; background: #f0faf5; }
.cancellation-policy > div { min-width: 0; padding: 10px; border-radius: 11px; background: #fff; }
.cancellation-policy span, .cancellation-policy strong { display: block; }
.cancellation-policy span { min-height: 28px; color: #746a7c; font-size: 8px; font-weight: 850; line-height: 1.35; }
.cancellation-policy strong { margin-top: 5px; color: #176d4e; font-size: 12px; line-height: 1.35; }
.cancellation-policy > p { grid-column: 1 / -1; margin: 0; color: #37624f; font-size: 10px; line-height: 1.5; }
.cancellation-policy.expired { border-color: #edcbd3; background: #fff2f4; }
.cancellation-policy.expired strong, .cancellation-policy.expired > p { color: #9a3d51; }
.cancellation-settlement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid #ded5e4; border-radius: 13px; }
.cancellation-settlement legend { padding: 0 5px; color: #655a6c; font-size: 9px; font-weight: 900; }
.cancellation-settlement label { display: flex; gap: 8px; align-items: center; min-height: 42px; padding: 9px; border-radius: 10px; background: #f8f5fa; color: #4f4557; font-size: 9px; font-weight: 800; cursor: pointer; }
.cancellation-settlement input { accent-color: #5b248e; }
.club-private-gate { display: grid; justify-items: center; max-width: 620px; margin: 50px auto; padding: 42px; text-align: center; }
.club-private-gate h1 { margin: 18px 0 8px; }
.club-private-gate p { max-width: 470px; color: #776c7f; line-height: 1.6; }
.club-private-gate a, .club-private-gate button { display: inline-grid; place-items: center; min-height: 46px; margin-top: 12px; padding: 0 18px; border: 0; border-radius: 13px; color: #2b143f; background: #ffd20a; font-weight: 900; text-decoration: none; }
html body .all-content-trigger { width: 208px; min-height: 62px; }
html body .all-content-panel { width: min(430px, calc(100vw - 28px)); max-height: min(620px, calc(100dvh - 120px)); overflow-y: auto; }
html body .all-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.all-content-item-icon.karting { color: #2b143f; background: #ffd20a; }.all-content-item-icon.happyland { background: #dc428c; }.all-content-item-icon.team { background: #266a9e; }.all-content-item-icon.restaurant { background: #9a5d25; }.all-content-item-icon.food { background: #d87524; }.all-content-item-icon.account { background: #16845b; }.all-content-item-icon.operations { background: #30394c; }
html body .assistant-launcher { width: 208px; min-width: 208px; min-height: 62px; }
html body .club-shell :is(small, p, label, button, input, select, dt, dd, time, em) { font-size: max(10px, .7rem); }
html body .club-shell button { min-height: 38px; }
html body .club-shell .club-mobile-nav button { min-height: 48px; }

@media (max-width: 1180px) {
  .hub-header-actions .module-switch { display: none; }
  .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-stats, .account-quick { grid-template-columns: 1fr; }
  .operations-filters { grid-template-columns: 1fr 230px; }.operations-filters > button { grid-column: 2; }.operations-locations { grid-row: span 2; }
}

@media (max-width: 900px) {
  html body .app-shell { padding: 62px 14px 110px; }
  .hub-topbar { align-items: flex-start; }.hub-topbar .brand-city { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hub-header-actions { gap: 6px; }.hub-account-chip { min-width: 39px; width: 39px; padding: 0; justify-content: center; }.hub-account-chip > span { width: 27px; height: 27px; }.hub-account-chip:not(.active) { font-size: 0; }
  .hub-stage { padding: 25px 18px; border-radius: 24px; }
  .hub-hero-row, .hub-two-column, .account-auth-stage { grid-template-columns: 1fr; }.hub-hero-row { gap: 18px; }
  .hub-two-column { align-items: stretch; }.rules-panel { max-height: none; }
  .food-layout { grid-template-columns: 1fr; }.food-cart { position: static; }.food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-auth-visual { padding: 5px; }.account-auth-card { width: min(520px, 100%); margin: auto; }
  .account-heading { align-items: flex-start; }.account-member-chip { min-width: 0; }.account-layout { grid-template-columns: 76px minmax(0,1fr); }.account-nav button { grid-template-columns: 1fr; place-items: center; font-size: 0; }.account-nav button > span { margin: auto; }.account-content { padding: 18px; }.account-stats { grid-template-columns: repeat(3, 1fr); }.account-stats article { grid-template-columns: 1fr; }.account-stats article > span { width: 36px; height: 36px; }.account-quick { grid-template-columns: repeat(3, 1fr); }.account-quick button { grid-template-columns: 1fr; }.account-quick button > span { grid-row: auto; }
  .waiver-form { grid-template-columns: 1fr; }.waiver-rules { grid-row: auto; }
  .restaurant-step-one, .restaurant-contact-layout { grid-template-columns: 1fr; }.restaurant-preference-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.restaurant-review-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .operations-head { align-items: flex-start; }.operations-filters { grid-template-columns: 1fr; }.operations-locations { grid-row: auto; }.operations-filters > button { grid-column: auto; }.operations-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .global-demo-ribbon { min-height: 42px; padding: 5px 9px; font-size: 9px; }.global-demo-ribbon span { max-width: 250px; }
  html body .app-shell { padding-top: 64px; }
  .hub-topbar { gap: 8px; margin-bottom: 15px; }.hub-topbar .brand-mark { width: 37px; height: 37px; }.hub-topbar .brand-name { font-size: 12px; }.hub-topbar .language-switch { order: 3; }.hub-topbar .language-switch button { width: 31px; }.hub-topbar .location-chip { min-height: 37px; padding-inline: 10px; font-size: 11px; }
  .hub-stage { min-height: 640px; padding: 23px 14px 110px; border-radius: 22px; }.hub-stage h1 { font-size: 38px; }.hub-hero-row > div:first-child > p:last-child { font-size: 13px; }
  .hub-form-grid, .team-summary, .notification-grid { grid-template-columns: 1fr; }.hub-form-grid label.wide { grid-column: auto; }
  .hub-panel { padding: 18px; }.hub-panel-head h2 { font-size: 20px; }.hub-action-bar { bottom: 148px; flex-wrap: wrap; }.hub-action-bar > div { flex: 0 0 100%; }.hub-action-bar button { flex: 1; }
  .team-flow-note { grid-template-columns: 1fr; }.team-flow-step { grid-template-columns: 28px 1fr; }.team-flow-step i { display: none; }
  .cancellation-policy, .cancellation-settlement { grid-template-columns: 1fr; }
  .restaurant-progress { gap: 4px; }.restaurant-progress span { gap: 0; min-height: 40px; padding: 5px; font-size: 0; }.restaurant-progress i { width: 28px; height: 28px; font-size: 10px; }.restaurant-panel { min-height: 640px; }.restaurant-time-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 325px; }.restaurant-preference-grid, .restaurant-detail-grid, .restaurant-review-grid { grid-template-columns: 1fr; }.restaurant-preference-grid button { min-height: 116px; }.restaurant-birthday-note { grid-template-columns: 38px 1fr; }.restaurant-birthday-note button { grid-column: 1 / -1; }.restaurant-action-bar > div { order: -1; }.restaurant-success-ticket { grid-template-columns: 1fr; text-align: center; }.restaurant-success-ticket b { justify-self: center; }.restaurant-location-options { grid-template-columns: 1fr; }
  .food-allergen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.food-grid { grid-template-columns: 1fr; }.food-card { display: grid; grid-template-columns: 105px 1fr; }.food-card-art { height: 100%; min-height: 245px; }.food-card-body { min-height: 245px; }.food-contact { grid-template-columns: 1fr; }.food-contact label:last-child { grid-column: auto; }
  .account-auth-stage { padding-bottom: 40px; }.account-auth-visual h1 { font-size: 37px; }.account-heading { display: grid; }.account-member-chip { width: 100%; }.account-layout { display: block; overflow: visible; border: 0; background: transparent; box-shadow: none; }.account-nav { position: sticky; z-index: 10; top: 43px; display: flex; gap: 5px; overflow-x: auto; margin: 0 -14px 12px; padding: 8px 14px; border: 0; }.account-nav button { flex: 0 0 52px; width: 52px; min-height: 48px; }.account-content { padding: 14px; border-radius: 16px; }.account-stats, .account-quick { grid-template-columns: 1fr; }.account-stats article { grid-template-columns: 45px 1fr; }.account-quick button { grid-template-columns: 40px 1fr; }.account-quick button > span { grid-row: 1 / 3; }.account-next { display: grid; }.account-next-code { padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.15); border-left: 0; text-align: left; }.reservation-list article { grid-template-columns: 42px 1fr; }.reservation-status { text-align: left; }.reservation-actions { grid-column: 1 / -1; }.waiver-list article { grid-template-columns: 42px 1fr; }.waiver-list article > b { grid-column: 2; justify-self: start; }.waiver-form { grid-column: 1 / -1; }.account-section-head { align-items: flex-start; }.account-section-head h2 { font-size: 23px; }
  .operations-head { display: grid; }.operations-live { width: 100%; }.operations-demo-note { align-items: flex-start; }.operations-stats { grid-template-columns: 1fr 1fr; }.operations-stats article { grid-template-columns: 35px 1fr; padding: 10px; }.operations-stats article > span { width: 34px; height: 34px; }.operations-stats strong { font-size: 19px; }
  html body .all-content-trigger, html body .assistant-launcher { width: calc((100vw - 36px) / 2); min-width: 0; min-height: 56px; }
  html body .all-content-panel { width: min(430px, calc(100vw - 24px)); max-height: calc(100dvh - 175px); }
  html body .all-content-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
  .hub-topbar .language-switch { display: none; }.hub-stage h1 { font-size: 34px; }.food-card { grid-template-columns: 90px 1fr; }.food-card-body { padding: 12px; }.food-card h2 { font-size: 13px; }.food-card p { font-size: 9px; }
  html body .all-content-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-shell *, .hub-shell *::before, .hub-shell *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}

:root {
  --ink: #171027;
  --ink-soft: #615a6f;
  --purple-950: #1b0c32;
  --purple-900: #2c1251;
  --purple-800: #421b72;
  --purple-700: #5b248e;
  --purple-100: #f1eafb;
  --yellow: #ffd20a;
  --yellow-soft: #fff3a6;
  --white: #fff;
  --paper: #f8f6fb;
  --line: #e6e0ed;
  --success: #16845b;
}

* { box-sizing: border-box; }

html { background: var(--purple-950); }

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 5%, rgba(135, 55, 203, .46), transparent 28rem),
    radial-gradient(circle at 95% 88%, rgba(253, 40, 143, .16), transparent 30rem),
    linear-gradient(145deg, #170a2b 0%, #24103e 47%, #321552 100%);
  padding: 28px clamp(18px, 4vw, 64px) 18px;
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image: radial-gradient(rgba(255,255,255,.22) .7px, transparent .7px);
  background-size: 17px 17px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.ambient { position: absolute; border-radius: 999px; filter: blur(1px); pointer-events: none; }
.ambient-one { width: 340px; height: 340px; right: -170px; top: 14%; border: 1px solid rgba(255,255,255,.07); }
.ambient-two { width: 520px; height: 520px; left: -400px; bottom: -290px; border: 70px solid rgba(255,210,10,.025); }

.topbar {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  color: var(--purple-950); background: var(--yellow);
  font-size: 24px; font-weight: 950; font-style: italic;
  border-radius: 12px 12px 4px 12px;
  transform: rotate(-3deg);
  box-shadow: 0 8px 30px rgba(255, 210, 10, .18);
}
.brand-name { font-weight: 950; letter-spacing: .11em; font-size: 15px; line-height: 1; }
.brand-city { margin-top: 5px; font-size: 9px; color: rgba(255,255,255,.64); letter-spacing: .19em; font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.language-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.language-switch button { width: 34px; height: 29px; padding: 0; border: 0; border-radius: 999px; color: rgba(255,255,255,.65); background: transparent; cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: .06em; transition: .18s ease; }
.language-switch button.active { color: var(--purple-950); background: var(--yellow); box-shadow: 0 3px 10px rgba(255,210,10,.18); }

.location-picker { position: relative; z-index: 9; }
.location-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.16); color: white;
  padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.07);
  cursor: pointer; backdrop-filter: blur(12px); font-size: 13px; font-weight: 750;
}
.location-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,210,10,.12); }
.location-caret { display: inline-block; transition: transform .18s ease; }
.location-caret.open { transform: rotate(180deg); }
.location-backdrop { position: fixed; z-index: 7; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(19,7,31,.22); cursor: default; }
.location-menu { position: absolute; z-index: 8; top: calc(100% + 10px); right: 0; width: min(365px, calc(100vw - 24px)); overflow: hidden; padding: 7px; border: 1px solid rgba(91,36,142,.14); border-radius: 20px; color: var(--ink); background: white; box-shadow: 0 24px 60px rgba(22,7,36,.26); }
.location-menu-heading { padding: 13px 13px 10px; }
.location-menu-heading strong, .location-menu-heading small { display: block; }
.location-menu-heading strong { font-size: 13px; }
.location-menu-heading small { margin-top: 4px; color: #817989; font-size: 8.5px; line-height: 1.45; }
.location-options { display: grid; gap: 5px; }
.location-option { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 9px 10px; border: 1px solid transparent; border-radius: 14px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.location-option:hover { background: var(--paper); }
.location-option.selected { border-color: rgba(91,36,142,.18); background: var(--purple-100); }
.location-option-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; background: var(--purple-700); font-size: 11px; font-weight: 950; }
.location-option strong, .location-option small { display: block; }
.location-option strong { font-size: 10.5px; }
.location-option small { overflow: hidden; margin-top: 3px; color: #857d8d; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.location-option em { color: var(--purple-700); font-size: 6.5px; font-style: normal; font-weight: 950; letter-spacing: .08em; }
.location-option-arrow { color: var(--purple-700); font-size: 15px; font-weight: 800; }

.experience-layout {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(290px, .82fr) minmax(560px, 1.18fr);
  align-items: center; gap: clamp(38px, 6vw, 92px);
}

.story-panel { color: white; padding: 18px 0 34px; position: relative; }
.story-panel .kicker, .step-kicker {
  margin: 0 0 10px; color: var(--yellow); text-transform: uppercase;
  letter-spacing: .16em; font-size: 11px; font-weight: 850;
}
.story-panel h1 { margin: 0; font-size: clamp(44px, 5.2vw, 76px); line-height: .94; letter-spacing: -.055em; font-weight: 900; }
.story-panel h1 span { color: var(--yellow); }
.story-copy { max-width: 470px; margin: 24px 0 30px; color: rgba(255,255,255,.7); line-height: 1.75; font-size: 15px; }
.trust-row { display: flex; gap: 0; }
.trust-row div { min-width: 104px; padding: 0 24px; border-left: 1px solid rgba(255,255,255,.14); }
.trust-row div:first-child { padding-left: 0; border-left: 0; }
.trust-row strong { display: block; color: white; font-size: 24px; line-height: 1; }
.trust-row span { display: block; margin-top: 6px; color: rgba(255,255,255,.55); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

.bowling-orbit { height: 150px; width: 220px; position: relative; margin-bottom: 14px; }
.bowling-ball {
  position: absolute; width: 114px; height: 114px; left: 25px; top: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 26%, #7d3caf 0%, #4e197d 26%, #250d42 70%);
  box-shadow: inset -18px -20px 30px rgba(0,0,0,.35), 0 28px 60px rgba(0,0,0,.28);
  transform: rotate(-14deg);
}
.bowling-ball i { position: absolute; width: 13px; height: 17px; border-radius: 50%; background: #130720; top: 23px; left: 51px; }
.bowling-ball i:nth-child(2) { top: 35px; left: 32px; transform: rotate(20deg); }
.bowling-ball i:nth-child(3) { top: 40px; left: 69px; transform: rotate(-20deg); }
.lane-line { position: absolute; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--yellow), transparent); transform-origin: left; opacity: .72; }
.lane-line-one { width: 116px; left: 118px; top: 70px; transform: rotate(14deg); }
.lane-line-two { width: 85px; left: 120px; top: 91px; transform: rotate(25deg); opacity: .28; }

.booking-card {
  min-height: 700px;
  background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.42);
  border-radius: 30px; box-shadow: 0 40px 100px rgba(8,0,25,.35);
  overflow: hidden; display: flex; flex-direction: column;
}

.progress-wrap { padding: 24px 32px 18px; border-bottom: 1px solid #eeeaf2; background: rgba(255,255,255,.86); }
.progress-meta { display: flex; justify-content: space-between; color: #7b7484; font-size: 11px; font-weight: 750; }
.progress-meta span:first-child { color: var(--ink); }
.progress-track { margin-top: 12px; height: 5px; background: #eee9f4; border-radius: 99px; overflow: hidden; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple-700), #9b36c7); transition: width .35s ease; }
.progress-labels { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 9px; gap: 4px; }
.progress-labels span { font-size: 8px; text-align: center; color: #aaa3b2; white-space: nowrap; overflow: hidden; }
.progress-labels .active { color: var(--purple-700); font-weight: 850; }

.screen { padding: 32px 38px; flex: 1; }
.screen-enter { animation: screenIn .3s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.screen .step-kicker { color: var(--purple-700); }
.screen h2 { margin: 0; color: var(--ink); font-size: clamp(25px, 3vw, 34px); line-height: 1.14; letter-spacing: -.035em; }
.screen-lead { color: var(--ink-soft); font-size: 13px; line-height: 1.6; margin: 10px 0 26px; }

.question-block { border-top: 1px solid var(--line); padding: 22px 0; }
.question-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.question-heading > div { display: flex; align-items: center; gap: 10px; }
.question-heading label { font-size: 14px; font-weight: 800; }
.question-number { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: var(--purple-100); color: var(--purple-700); font-size: 11px; font-weight: 900; }
.helper { color: #8b8495; font-size: 10px; }

.counter-control { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; max-width: 360px; border: 1px solid var(--line); background: var(--paper); border-radius: 17px; padding: 7px; }
.counter-control button { width: 40px; height: 40px; border: 0; border-radius: 12px; background: white; color: var(--purple-700); font-size: 25px; cursor: pointer; box-shadow: 0 3px 10px rgba(30,10,55,.06); }
.counter-control button:active { transform: scale(.96); }
.counter-control div { text-align: center; }
.counter-control strong { font-size: 22px; }
.counter-control span { color: #837b8d; font-size: 11px; margin-left: 6px; }
.lane-answer { display: inline-flex; align-items: flex-start; gap: 7px; color: #6e6678; margin-top: 11px; font-size: 11px; }
.lane-answer > div { display: grid; gap: 3px; }
.lane-answer strong { color: var(--ink); }
.lane-answer small { color: #8a8293; font-size: 9px; line-height: 1.45; }
.lane-icon { color: var(--purple-700); transform: skew(-9deg); margin-top: 1px; }

.date-field { position: relative; max-width: 360px; }
.date-field > span { position: absolute; z-index: 1; left: 16px; top: 50%; transform: translateY(-50%); color: var(--purple-700); font-size: 16px; pointer-events: none; }
.date-field input { width: 100%; height: 55px; border: 1px solid var(--line); border-radius: 17px; padding: 0 14px 0 47px; color: var(--ink); background: var(--paper); outline: 0; font-weight: 750; font-size: 13px; }
.date-field input:focus { border-color: var(--purple-700); box-shadow: 0 0 0 4px rgba(91,36,142,.1); }
.date-readable { margin: 9px 0 0; color: var(--purple-700); text-transform: capitalize; font-size: 11px; font-weight: 700; }

.tip-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff9da; border: 1px solid #f2e4a2; border-radius: 13px; color: #62571e; }
.tip-box > span { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); color: var(--purple-950); font-weight: 900; font-size: 11px; }
.tip-box p { margin: 0; font-size: 10px; line-height: 1.5; }

.offers-screen { padding-bottom: 20px; }
.multi-package-tip { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 11px; margin: -4px 0 15px; padding: 12px 14px; border: 1px solid #eadcf5; border-radius: 14px; background: linear-gradient(135deg, #faf5fe, #fff); }
.multi-package-tip > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: white; background: var(--purple-700); font-size: 13px; font-weight: 900; }
.multi-package-tip strong { display: block; color: #3d3049; font-size: 10px; }
.multi-package-tip p { margin: 3px 0 0; color: #776e81; font-size: 8.5px; line-height: 1.45; }
.offer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.offer-card { position: relative; text-align: left; padding: 15px; min-height: 148px; border: 1px solid var(--line); background: white; border-radius: 17px; cursor: pointer; transition: .2s ease; color: var(--ink); overflow: hidden; }
.offer-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--offer, var(--purple-700)); opacity: .85; }
.offer-card:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--offer) 48%, white); box-shadow: 0 10px 24px rgba(39,15,65,.09); }
.offer-card.selected { border-color: var(--offer); box-shadow: 0 0 0 2px color-mix(in srgb, var(--offer) 20%, white); }
.offer-card.disabled { cursor: not-allowed; background: #faf9fb; opacity: .57; }
.offer-purple { --offer: #6e32a3; }.offer-pink { --offer: #dd3c8c; }.offer-amber { --offer: #da861d; }.offer-green { --offer: #1e936b; }.offer-blue { --offer: #3972c7; }.offer-cyan { --offer: #168e9e; }
.offer-topline { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.offer-topline span { color: var(--offer); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.offer-topline strong { font-size: 14px; }
.offer-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.offer-title-row h3 { margin: 0; font-size: 14px; }
.radio-dot { width: 15px; height: 15px; border: 1.5px solid #c8c2cf; border-radius: 50%; flex: 0 0 auto; }
.selected .radio-dot { border: 4px solid var(--offer); }
.offer-card > p { min-height: 30px; margin: 6px 0 10px; color: #716a7b; font-size: 9.5px; line-height: 1.45; }
.offer-includes { display: flex; flex-wrap: wrap; gap: 5px 8px; }
.offer-includes span { color: #5e5768; font-size: 8.5px; }

.details-screen, .time-screen, .loyalty-screen, .customer-screen, .checkout-screen, .payment-screen, .success-screen { padding-bottom: 24px; }
.choice-section { border-top: 1px solid var(--line); padding: 20px 0; }
.choice-section:first-of-type { margin-top: 6px; }
.choice-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.choice-section-head h3 { margin: 0; font-size: 14px; line-height: 1.35; }
.choice-section-head p { margin: 4px 0 0; color: #837c8d; font-size: 9.5px; line-height: 1.5; }
.price-pill { padding: 6px 9px; border-radius: 999px; background: var(--purple-100); color: var(--purple-700); white-space: nowrap; font-size: 10px; font-weight: 850; }
.duration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.choice-button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; cursor: pointer; }
.choice-button strong { font-size: 20px; }
.choice-button span { color: #8b8494; font-size: 9px; }
.choice-button.active { border-color: var(--purple-700); background: var(--purple-100); color: var(--purple-700); box-shadow: 0 0 0 2px rgba(91,36,142,.08); }
.choice-button:disabled { cursor: not-allowed; opacity: .42; background: #f4f1f6; }
.duration-grid-start .choice-button strong { font-size: 12px; }
.duration-grid-start .recommended-duration { border-color: #edbf00; color: var(--purple-950); background: linear-gradient(145deg, #fff9d8, #fff4a8); box-shadow: 0 5px 14px rgba(237,191,0,.14); }
.duration-grid-start .recommended-duration.active { border-color: var(--purple-700); background: linear-gradient(145deg, #fff4a8, #f1eafb); box-shadow: 0 0 0 2px rgba(91,36,142,.1), 0 7px 16px rgba(237,191,0,.16); }
.duration-grid-start .duration-recommendation-badge { color: #7c6200; font-size: 7px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.duration-recommendation { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; padding: 9px 11px; border: 1px solid #f0d35e; border-radius: 11px; color: #665000; background: #fff9da; font-size: 9px; font-weight: 750; line-height: 1.45; }
.duration-recommendation > span { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%; color: var(--purple-950); background: var(--yellow); font-size: 9px; }
.duration-note { margin: 9px 0 0; color: #8a8293; font-size: 9px; }
.shoe-picker { display: grid; grid-template-columns: 1fr minmax(180px, 1.5fr) 1fr; align-items: center; gap: 9px; }
.small-choice { min-height: 54px; border: 1px solid var(--line); border-radius: 14px; color: #6e6677; background: white; cursor: pointer; font-size: 10px; font-weight: 800; }
.small-choice.active { color: var(--purple-700); border-color: var(--purple-700); background: var(--purple-100); }
.counter-control.compact { max-width: none; grid-template-columns: 45px 1fr 45px; padding: 5px; }
.counter-control.compact button { width: 36px; height: 36px; font-size: 21px; }
.standalone-counter { max-width: 220px !important; }

.included-panel { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; margin-top: 22px; padding: 18px; border: 1px solid #f0d5e4; border-radius: 18px; background: linear-gradient(135deg, #fff5fa, #fff); }
.included-panel.amber-panel { border-color: #f3dfbd; background: linear-gradient(135deg, #fff8e8, #fff); }
.included-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #f7dce9; color: #c43179; font-weight: 900; font-style: normal; }
.amber-panel .included-icon { background: #f7e8c9; color: #9c6514; }
.included-panel h3 { margin: 0; font-size: 14px; }
.included-panel p { margin: 4px 0 0; color: #776f80; font-size: 9.5px; line-height: 1.45; }
.included-panel > strong { font-size: 18px; }
.check-card { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; cursor: pointer; }
.check-card input, .terms-check input { position: absolute; opacity: 0; pointer-events: none; }
.custom-check { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; border: 1px solid #cfc8d6; color: transparent; font-size: 12px; }
.check-card input:checked + .custom-check, .terms-check input:checked + .custom-check { color: white; border-color: var(--purple-700); background: var(--purple-700); }
.check-card strong { display: block; font-size: 11px; }
.check-card small { display: block; margin-top: 3px; color: #81798a; font-size: 8.5px; line-height: 1.5; }
.shoe-rental-card { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--purple-700); border-radius: 15px; background: #faf7fd; cursor: pointer; }
.shoe-rental-card input { position: absolute; opacity: 0; pointer-events: none; }
.shoe-rental-card input:checked + .custom-check { color: white; border-color: var(--purple-700); background: var(--purple-700); }
.shoe-rental-card strong, .shoe-rental-card small { display: block; }
.shoe-rental-card > span > strong { font-size: 11px; }
.shoe-rental-card small { margin-top: 3px; color: #81798a; font-size: 8.5px; line-height: 1.45; }
.shoe-rental-card > strong { font-size: 12px; white-space: nowrap; }
.shoe-warning { margin-top: 10px; }

.package-details { margin-top: 20px; overflow: hidden; border: 1px solid #d6eadf; border-radius: 18px; background: linear-gradient(145deg, #f2fbf7, #fff); }
.package-details.drinks-package { border-color: #d7e4f6; background: linear-gradient(145deg, #f3f7fd, #fff); }
.package-details-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 16px 17px 13px; }
.package-details-head h3 { margin: 0; font-size: 14px; }
.package-details-head p { margin: 3px 0 0; color: #727b76; font-size: 9px; }
.package-details-head > strong { font-size: 17px; }
.package-check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: white; background: #1e936b; font-size: 17px; font-weight: 900; }
.drinks-package .package-check { background: #3972c7; }
.package-includes-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 0 17px 15px; }
.package-includes-list span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,.82); }
.package-includes-list strong { color: #332a3d; font-size: 10.5px; }
.package-includes-list small { color: #766e7e; font-size: 8.5px; line-height: 1.35; }
.arrival-selection-note { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 12px 17px; border-top: 1px solid rgba(30,147,107,.16); background: rgba(255,255,255,.6); }
.drinks-package .arrival-selection-note { border-top-color: rgba(57,114,199,.16); }
.arrival-selection-note > span { padding: 5px 7px; border-radius: 7px; color: #14704f; background: #dff4ea; white-space: nowrap; font-size: 7px; font-weight: 900; letter-spacing: .06em; }
.drinks-package .arrival-selection-note > span { color: #285d9e; background: #e1ebf8; }
.arrival-selection-note p { margin: 0; color: #696171; font-size: 8.8px; line-height: 1.45; }
.arrival-selection-note strong { color: #403847; }
.catalog-note { padding: 10px 12px; border-radius: 11px; color: #665d72; background: #f4f1f6; font-size: 8.5px; line-height: 1.5; }

.student-intro { display: flex; align-items: center; gap: 13px; margin: 18px 0 14px; padding: 15px; border-radius: 16px; background: #ecf9fa; border: 1px solid #c7ecee; }
.student-intro > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #168e9e; color: white; font-size: 13px; font-weight: 900; }
.student-intro h3 { margin: 0; font-size: 13px; }
.student-intro p { margin: 3px 0 0; color: #68787b; font-size: 9px; }
.student-list { display: grid; gap: 8px; margin-bottom: 12px; max-height: 310px; overflow-y: auto; padding-right: 4px; }
.student-row { display: grid; grid-template-columns: 27px minmax(120px, .8fr) minmax(160px, 1.2fr); gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 13px; }
.player-badge { display: grid; place-items: center; align-self: center; width: 25px; height: 25px; border-radius: 8px; color: var(--purple-700); background: var(--purple-100); font-size: 10px; font-weight: 900; }
.student-row label, .form-grid label { display: grid; gap: 5px; color: #5f5769; font-size: 8.5px; font-weight: 800; }
.student-row input, .student-row select, .form-grid input { width: 100%; min-height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: var(--paper); font-size: 10px; }
.student-row input:focus, .student-row select:focus, .form-grid input:focus { border-color: var(--purple-700); box-shadow: 0 0 0 3px rgba(91,36,142,.08); }

.time-legend { display: flex; gap: 14px; margin: -8px 0 15px; color: #817a8a; font-size: 8.5px; }
.time-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.available-dot { background: #1c9d71; }.limited-dot { background: #e89c28; }.full-dot { background: #c7c1cb; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot-button { min-height: 80px; padding: 11px 8px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); cursor: pointer; text-align: left; transition: .18s ease; }
.slot-button strong, .slot-button span, .slot-button small { display: block; }
.slot-button strong { font-size: 11px; }
.slot-button span { margin-top: 5px; color: var(--purple-700); font-size: 10px; font-weight: 850; }
.slot-button small { margin-top: 4px; color: #81798a; font-size: 7.5px; }
.slot-button:hover:not(:disabled) { transform: translateY(-1px); border-color: #b69acb; }
.slot-button.selected { border-color: var(--purple-700); background: var(--purple-100); box-shadow: 0 0 0 2px rgba(91,36,142,.09); }
.slot-button.limited:not(.selected) { border-color: #e9cf9f; background: #fffbf3; }
.slot-button:disabled { cursor: not-allowed; background: #f6f4f7; color: #aaa4af; }
.slot-button:disabled span { color: #9f98a4; }
.warning-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 13px; padding: 12px; border-radius: 12px; border: 1px solid #eed4a6; background: #fff9ed; color: #70531f; }
.warning-box > span { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #e89c28; color: white; font-weight: 900; font-size: 10px; }
.warning-box p { margin: 0; font-size: 8.5px; line-height: 1.5; }
.empty-slots { display: grid; gap: 5px; padding: 25px; text-align: center; color: #7b7483; }
.empty-slots strong { color: var(--ink); font-size: 13px; }.empty-slots span { font-size: 9px; }

.loyalty-hero { display: flex; align-items: center; gap: 16px; padding: 18px; margin-bottom: 14px; border-radius: 18px; color: white; background: linear-gradient(135deg, #311151, #60268e); box-shadow: 0 16px 30px rgba(49,17,81,.16); }
.loyalty-coin { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--purple-950); background: var(--yellow); box-shadow: inset 0 0 0 5px rgba(255,255,255,.35); font-size: 24px; font-weight: 950; }
.loyalty-hero span, .loyalty-hero strong, .loyalty-hero small { display: block; }
.loyalty-hero span { color: rgba(255,255,255,.64); font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; }
.loyalty-hero strong { margin-top: 3px; color: var(--yellow); font-size: 25px; line-height: 1; }
.loyalty-hero small { margin-top: 5px; color: rgba(255,255,255,.7); font-size: 8px; }
.loyalty-options { display: grid; gap: 9px; }
.loyalty-option { position: relative; display: grid; grid-template-columns: 39px 1fr 18px; gap: 11px; align-items: center; width: 100%; min-height: 74px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 15px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.loyalty-option.selected { border-color: var(--purple-700); background: #faf7fd; box-shadow: 0 0 0 2px rgba(91,36,142,.08); }
.loyalty-option.recommended { margin-top: 4px; border-color: #d5c08b; }
.recommend-label { position: absolute; left: 15px; top: -8px; padding: 3px 7px; border-radius: 99px; background: var(--yellow); color: var(--purple-950); font-size: 6.5px; font-weight: 950; letter-spacing: .08em; }
.option-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--purple-700); background: var(--purple-100); font-size: 16px; font-style: normal; font-weight: 900; }
.loyalty-option strong, .loyalty-option small { display: block; }
.loyalty-option strong { font-size: 11px; }
.loyalty-option small { margin-top: 3px; color: #7b7484; font-size: 8.5px; line-height: 1.45; }
.loyalty-option .radio-dot { justify-self: end; }
.loyalty-option.selected .radio-dot { border: 4px solid var(--purple-700); }
.loyalty-fineprint { margin: 12px 0 0; color: #91899a; text-align: center; font-size: 8px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid label > span { font-size: 9px; }
.form-grid input { min-height: 47px; padding: 0 13px; border-radius: 12px; font-size: 11px; }
.wide-field { grid-column: 1 / -1; }
.phone-field-controls { display: grid; grid-template-columns: minmax(108px, .8fr) minmax(120px, 1.2fr); gap: 7px; min-width: 0; }
.phone-field-controls select,
.phone-field-controls input { width: 100%; min-width: 0; min-height: 47px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; outline: 0; color: var(--ink); background: var(--paper); font: inherit; font-size: 10px; }
.phone-field-controls select { cursor: pointer; text-overflow: ellipsis; }
.phone-field-controls select:focus,
.phone-field-controls input:focus { border-color: var(--purple-700); box-shadow: 0 0 0 3px rgba(91,36,142,.08); }
.phone-field-controls input.valid { border-color: #2b8d69; background: #f4fbf8; }
.phone-field-controls input.invalid { border-color: #c83c56; background: #fff7f8; }
.phone-field-status { display: block; min-height: 15px; color: #8b8292; font-size: 7.5px; font-weight: 650; line-height: 1.45; }
.phone-field-status.valid { color: #267356; }
.phone-field-status.invalid { color: #b52f49; }
.email-field { min-width: 0; }
.email-field > input { width: 100%; }
.email-field > input.valid { border-color: #2b8d69; background: #f4fbf8; }
.email-field > input.invalid { border-color: #c83c56; background: #fff7f8; }
.email-field-status { display: block; min-height: 15px; color: #8b8292; font-size: 7.5px; font-weight: 650; line-height: 1.45; }
.email-field-status.valid { color: #267356; }
.email-field-status.invalid { color: #b52f49; }
.email-field-status.checking { color: #765291; }
.email-field-status button { display: inline; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }
.email-field-status button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.switch-row { display: flex; align-items: center; gap: 11px; margin: 18px 0 12px; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; }
.switch-ui { position: relative; width: 38px; height: 22px; border-radius: 99px; background: #dcd7e0; transition: .2s; }
.switch-ui::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: .2s; }
.switch-row input:checked + .switch-ui { background: var(--purple-700); }
.switch-row input:checked + .switch-ui::after { transform: translateX(16px); }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { font-size: 10px; }.switch-row small { margin-top: 2px; color: #8b8494; font-size: 8px; }
.invoice-box { padding: 15px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.invoice-box input { background: white; }
.consent-section { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.consent-section > p { margin: 0 0 10px; color: #716979; font-size: 9px; font-weight: 800; }
.simple-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #686170; cursor: pointer; font-size: 8.5px; }
.simple-check input { position: absolute; opacity: 0; }
.simple-check > span { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #cec8d4; border-radius: 5px; }
.simple-check input:checked + span { border-color: var(--purple-700); background: var(--purple-700); }
.simple-check input:checked + span::after { content: "✓"; color: white; font-size: 9px; }

.checkout-summary { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }
.summary-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; background: linear-gradient(135deg, #f4eef9, #faf8fc); }
.summary-hero span, .summary-hero strong, .summary-hero small { display: block; }
.summary-hero div > span { color: var(--purple-700); text-transform: uppercase; letter-spacing: .1em; font-size: 7.5px; font-weight: 900; }
.summary-hero div > strong { margin-top: 4px; font-size: 13px; }
.summary-hero div > small { margin-top: 4px; color: #746c7e; font-size: 8.5px; text-transform: capitalize; }
.summary-price { color: var(--ink) !important; font-size: 20px !important; font-weight: 900 !important; }
.summary-lines { padding: 10px 16px; }
.summary-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #ebe6ef; font-size: 9px; }
.summary-lines > div:last-child { border-bottom: 0; }
.summary-lines span { color: #776f80; }.summary-lines strong { text-align: right; font-weight: 800; }.summary-lines strong small { color: #8c8594; font-size: 7px; font-weight: 500; }
.dynamic-price-note { margin: 0 16px 10px; padding: 9px 10px; border-radius: 10px; background: #fff9dc; color: #695b24; font-size: 7.5px; line-height: 1.5; }
.total-line { display: flex; justify-content: space-between; align-items: center; padding: 15px 16px; border-top: 1px solid var(--line); background: #faf8fb; }
.total-line span { font-size: 10px; font-weight: 800; }.total-line strong { font-size: 18px; }
.promo-code-box { display: grid; gap: 10px; margin: 13px 0; padding: 14px; border: 1px solid #ded3e8; border-radius: 14px; background: linear-gradient(135deg, #faf7fc, #fff); }
.promo-code-field { display: grid; gap: 6px; color: var(--ink); font-size: 9px; font-weight: 850; }
.promo-code-field input { width: 100%; min-height: 47px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; outline: 0; font-size: 11px; text-transform: uppercase; }
.promo-code-field input::placeholder { color: #aaa2b0; text-transform: none; }
.promo-code-field input:focus { border-color: var(--purple-700); box-shadow: 0 0 0 3px rgba(91,36,142,.09); }
.promo-code-note { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 8px; margin: 0; color: #6e6678; font-size: 8px; line-height: 1.55; }
.promo-code-note > span:first-child { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--purple-950); background: var(--yellow); font-size: 10px; font-weight: 950; }
.arrival-callout { display: flex; gap: 11px; align-items: center; margin: 13px 0; padding: 12px 14px; border-radius: 14px; background: #fff8d9; border: 1px solid #f1e1a1; }
.arrival-callout > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--yellow); color: var(--purple-950); font-size: 17px; font-weight: 950; }
.arrival-callout strong, .arrival-callout small { display: block; }.arrival-callout strong { font-size: 10px; }.arrival-callout small { margin-top: 2px; color: #776b37; font-size: 8px; }
.terms-check { display: flex; align-items: flex-start; gap: 10px; color: #6d6576; cursor: pointer; font-size: 8.5px; line-height: 1.55; }
.terms-check a { color: var(--purple-700); font-weight: 800; text-decoration: underline; }

.hold-timer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; margin: 17px 0 13px; padding: 13px 15px; border-radius: 15px; color: white; background: linear-gradient(135deg, #341452, #5f2688); }
.hold-timer > span { color: var(--yellow); font-size: 7px; font-weight: 950; letter-spacing: .13em; }
.hold-timer > strong { grid-row: 1 / 3; grid-column: 2; font-size: 22px; font-variant-numeric: tabular-nums; }
.hold-timer > small { color: rgba(255,255,255,.64); font-size: 8px; }
.payment-amount { display: flex; justify-content: space-between; align-items: end; padding: 5px 2px 12px; }
.payment-amount span { color: #77707f; font-size: 10px; }.payment-amount strong { font-size: 23px; }
.payment-channels { display: grid; gap: 8px; }
.payment-choice { display: grid; grid-template-columns: 34px 1fr 17px; align-items: center; gap: 10px; width: 100%; min-height: 57px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 13px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.payment-choice > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--paper); color: var(--purple-700); font-style: normal; font-weight: 900; }
.payment-choice strong, .payment-choice small { display: block; }.payment-choice strong { font-size: 10px; }.payment-choice small { margin-top: 2px; color: #857e8e; font-size: 8px; }
.payment-choice.selected { border-color: var(--purple-700); background: #faf7fc; }
.payment-choice.selected .radio-dot { border: 4px solid var(--purple-700); }
.secure-payment { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; margin-top: 13px; padding: 11px 12px; border-radius: 12px; background: #edf8f3; color: #2d5849; }
.secure-payment strong, .secure-payment small { display: block; }.secure-payment strong { font-size: 9px; }.secure-payment small { margin-top: 2px; opacity: .75; font-size: 7.5px; }
.card-marks { font-size: 8px; font-weight: 900; }
.prototype-note { margin: 9px 0 0; text-align: center; color: #99929f; font-size: 7.5px; }
.pay-button { min-width: 220px; }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(39,15,65,.25); border-top-color: var(--purple-950); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.success-screen { text-align: center; }
.success-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 13px; border-radius: 50%; color: white; background: var(--success); box-shadow: 0 10px 25px rgba(22,132,91,.2); font-size: 25px; font-weight: 900; }
.success-screen .step-kicker { margin-bottom: 6px; color: var(--success); }
.success-screen .screen-lead { margin-bottom: 16px; }
.ticket-card { position: relative; display: grid; grid-template-columns: 1fr 92px; gap: 15px; align-items: center; padding: 17px; border: 1px solid var(--line); border-radius: 18px; text-align: left; background: linear-gradient(135deg, #fff, #f8f4fb); }
.ticket-card::after { content: ""; position: absolute; right: 107px; top: 12px; bottom: 12px; border-left: 1px dashed #d9d1de; }
.ticket-main { display: grid; gap: 10px; }
.ticket-main span, .ticket-main strong, .ticket-main small { display: block; }
.ticket-main > div > span { color: #8a8292; font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }
.ticket-main > div > strong { margin-top: 2px; font-size: 12px; text-transform: capitalize; }.ticket-main > div:first-child > strong { color: var(--purple-700); font-size: 15px; letter-spacing: .06em; }
.ticket-main > div > small { margin-top: 2px; color: #776f80; font-size: 7.5px; }
.ticket-facts { display: flex; flex-wrap: wrap; gap: 7px; }.ticket-facts span { padding: 4px 7px; border-radius: 99px; background: var(--purple-100); color: var(--purple-700) !important; font-size: 7px !important; font-weight: 800; text-transform: none !important; letter-spacing: 0 !important; }
.qr-demo { display: grid; grid-template-columns: repeat(7, 7px); gap: 2px; justify-content: center; }
.qr-demo i { width: 7px; height: 7px; background: transparent; }.qr-demo i.filled { background: var(--purple-950); }
.completion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; text-align: left; }
.completion-grid > div { display: grid; grid-template-columns: 29px 1fr; column-gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: var(--paper); }
.completion-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--purple-700); background: var(--purple-100); font-weight: 900; }
.completion-grid strong, .completion-grid small { display: block; }.completion-grid strong { font-size: 8.5px; }.completion-grid small { color: #8a8391; font-size: 7px; }
.claim-points, .points-earned { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; padding: 12px 14px; border-radius: 14px; text-align: left; background: linear-gradient(135deg, #321450, #5d2687); color: white; }
.claim-points span, .claim-points strong, .claim-points small, .points-earned strong, .points-earned small { display: block; }
.claim-points span { color: var(--yellow); font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }.claim-points strong, .points-earned strong { margin-top: 2px; font-size: 10px; }.claim-points small, .points-earned small { margin-top: 2px; color: rgba(255,255,255,.64); font-size: 7px; }
.claim-points button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 9px 11px; background: var(--yellow); color: var(--purple-950); font-size: 8px; font-weight: 900; cursor: pointer; }
.points-earned { justify-content: flex-start; }.points-earned > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: var(--purple-950); font-weight: 950; }
.success-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.success-actions button { min-height: 38px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--purple-700); font-size: 8px; font-weight: 850; cursor: pointer; }
.reminder-note { margin: 10px 0 0; color: #8c8594; font-size: 7.5px; }
.success-footer { justify-content: space-between; }

.placeholder-screen { text-align: center; display: grid; place-content: center; min-height: 420px; }
.placeholder-icon { font-size: 64px; margin-bottom: 18px; }

.booking-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 32px 23px; border-top: 1px solid #eeeaf2; background: white; }
.primary-button, .back-button { border: 0; cursor: pointer; font-weight: 850; transition: .18s ease; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 49px; padding: 0 20px; border-radius: 14px; background: var(--yellow); color: var(--purple-950); box-shadow: 0 8px 20px rgba(255,210,10,.2); font-size: 12px; }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(255,210,10,.28); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.primary-button span { font-size: 18px; }
.back-button { display: inline-flex; align-items: center; gap: 8px; color: #746d7d; background: transparent; padding: 12px 0; font-size: 11px; }
.back-button:hover { color: var(--purple-700); }

.page-footer { position: relative; z-index: 1; max-width: 1240px; margin: 15px auto 0; display: flex; justify-content: flex-end; gap: 10px; color: rgba(255,255,255,.38); font-size: 9px; }

button:focus-visible, input:focus-visible { outline: 3px solid rgba(255,210,10,.7); outline-offset: 3px; }

/* Persistent navigation between Kooglana experiences */
.all-content-menu { position: fixed; z-index: 1100; left: max(22px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); color: var(--ink); }
.all-content-backdrop { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(18, 7, 31, .42); backdrop-filter: blur(2px); cursor: default; }
.all-content-trigger { position: relative; z-index: 2; display: grid; grid-template-columns: 38px auto 18px; align-items: center; gap: 10px; min-height: 56px; padding: 7px 13px 7px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; color: white; background: linear-gradient(135deg, #2c1148, #60248b); box-shadow: 0 16px 38px rgba(34,10,53,.3), inset 0 1px 0 rgba(255,255,255,.16); cursor: pointer; }
.all-content-trigger > strong { font-size: 13px; white-space: nowrap; }
.all-content-trigger > span:last-child { color: rgba(255,255,255,.68); font-size: 14px; font-weight: 900; }
.all-content-trigger-icon { display: grid; grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); place-content: center; gap: 4px; width: 38px; height: 38px; border-radius: 12px; background: var(--yellow); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.all-content-trigger-icon i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--purple-950); }
.all-content-panel { position: absolute; z-index: 2; left: 0; bottom: calc(100% + 12px); width: min(330px, calc(100vw - 28px)); overflow: hidden; padding: 9px; border: 1px solid rgba(91,36,142,.18); border-radius: 22px; background: white; box-shadow: 0 25px 65px rgba(25,7,41,.32); transform-origin: left bottom; animation: all-content-pop .2s ease both; }
@keyframes all-content-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.all-content-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 9px 12px; }
.all-content-panel-head span, .all-content-panel-head strong { display: block; }
.all-content-panel-head span { color: var(--purple-700); font-size: 7px; font-weight: 950; letter-spacing: .16em; }
.all-content-panel-head strong { margin-top: 3px; font-size: 16px; }
.all-content-panel-head > button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; color: #746b7d; background: var(--paper); cursor: pointer; font-size: 22px; }
.all-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.all-content-grid > button { display: grid; grid-template-columns: 34px minmax(0,1fr) 12px; align-items: center; gap: 8px; min-height: 58px; padding: 9px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; text-align: left; cursor: pointer; }
.all-content-grid > button.no-icon { grid-template-columns: minmax(0,1fr) 12px; padding-left: 13px; }
.all-content-grid > button:hover { border-color: #b892cf; background: #fcf9fe; }
.all-content-grid > button.active { border-color: var(--purple-700); background: var(--purple-100); box-shadow: inset 0 0 0 1px rgba(91,36,142,.08); }
.all-content-grid > button strong { min-width: 0; overflow: hidden; font-size: 9px; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.all-content-grid > button:has(.all-content-item-icon.food) strong { white-space: normal; }
.all-content-grid > button small { color: var(--purple-700); font-size: 10px; font-weight: 950; text-align: right; }
.all-content-item-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; background: var(--purple-700); font-size: 15px; font-weight: 950; }
.all-content-item-icon.laser { background: #1e8c95; }
.all-content-item-icon.birthday { background: #d93e8b; }
.all-content-item-icon.loyalty { color: var(--purple-950); background: var(--yellow); }

@media (max-width: 980px) {
  .experience-layout { grid-template-columns: 1fr; max-width: 720px; }
  .story-panel { display: none; }
  .booking-card { min-height: 720px; }
  .page-footer { justify-content: center; }
}

@media (max-width: 640px) {
  .all-content-menu { left: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  .all-content-trigger { width: calc((100vw - 36px) / 2); min-width: 0; min-height: 56px; grid-template-columns: 40px minmax(0, 1fr) 12px; gap: 8px; padding: 7px 10px 7px 8px; border-radius: 17px; }
  .all-content-trigger-icon { width: 40px; height: 40px; }
  .all-content-panel { bottom: calc(100% + 10px); width: min(318px, calc(100vw - 24px)); }
  .app-shell { padding: 16px 0 0; overflow-x: clip; overflow-y: visible; min-height: 100dvh; }
  .app-shell::before, .ambient { display: none; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; padding: 0 17px; margin-bottom: 15px; }
  .brand-mark { width: 37px; height: 37px; font-size: 21px; }
  .brand-name { font-size: 13px; }
  .brand-lockup, .brand-lockup > div:last-child, .brand-button > span:last-child { min-width: 0; max-width: 100%; }
  .brand-city { max-width: none; overflow: visible; font-size: 7px; text-overflow: clip; white-space: nowrap; }
  .header-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; min-width: 0; gap: 8px; }
  .header-actions .module-switch { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; }
  .header-actions .module-switch button { flex: 1; min-width: 0; padding-inline: 8px; }
  .header-actions .language-switch { grid-column: 1; grid-row: 2; justify-self: start; }
  .header-actions .location-picker { grid-column: 2; grid-row: 2; justify-self: end; min-width: 0; max-width: 100%; }
  .language-switch button { width: 31px; height: 27px; font-size: 8px; }
  .location-chip { max-width: 100%; font-size: 11px; padding: 8px 9px; white-space: nowrap; }
  .experience-layout { display: block; }
  .booking-card { border-radius: 24px 24px 0 0; min-height: calc(100dvh - 112px); border: 0; box-shadow: none; }
  .progress-wrap { padding: 18px 18px 14px; }
  .progress-labels { display: none; }
  .screen { padding: 25px 20px; }
  .screen h2 { font-size: 27px; }
  .screen-lead { margin-bottom: 22px; }
  .question-block { padding: 20px 0; }
  .counter-control, .date-field { max-width: none; }
  .offer-list { grid-template-columns: 1fr; }
  .offer-card { min-height: 132px; }
  .offer-card > p { min-height: 0; }
  .shoe-picker { grid-template-columns: 1fr 1.35fr; }
  .shoe-picker .small-choice:last-child { grid-column: 1 / -1; min-height: 40px; }
  .package-includes-list { grid-template-columns: 1fr; }
  .student-row { grid-template-columns: 25px 1fr; }
  .student-row label:last-child { grid-column: 2; }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .wide-field { grid-column: auto; }
  .ticket-card { grid-template-columns: 1fr 78px; }
  .ticket-card::after { right: 92px; }
  .qr-demo { grid-template-columns: repeat(7, 6px); gap: 2px; }
  .qr-demo i { width: 6px; height: 6px; }
  .completion-grid { grid-template-columns: 1fr; }
  .claim-points { align-items: flex-start; }
  .payment-screen, .success-screen { padding-bottom: 28px; }
  .pay-button { min-width: 0; }
  .booking-footer { position: sticky; z-index: 4; bottom: 0; padding: 13px 18px max(17px, env(safe-area-inset-bottom)); box-shadow: 0 -12px 30px rgba(30,10,55,.06); }
  .primary-button { flex: 1; }
  .page-footer { display: none; }
}

@media (max-width: 380px) {
  .topbar { padding-inline: 12px; }
  .brand-lockup { gap: 8px; }
  .brand-name { font-size: 12px; }
  .brand-city { max-width: none; letter-spacing: .1em; }
  .language-switch button { width: 26px; }
  .location-chip { gap: 5px; padding-inline: 7px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Birthday booking */
.module-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.module-switch button { min-height: 29px; padding: 0 11px; border: 0; border-radius: 999px; color: rgba(255,255,255,.68); background: transparent; cursor: pointer; font-size: 9px; font-weight: 850; }
.module-switch button.active { color: var(--purple-950); background: white; box-shadow: 0 4px 12px rgba(15,4,28,.13); }
.birthday-shell { background: radial-gradient(circle at 7% 4%, rgba(158,64,218,.5), transparent 27rem), radial-gradient(circle at 91% 78%, rgba(255,70,147,.22), transparent 29rem), linear-gradient(145deg, #18082d 0%, #2a1046 48%, #421556 100%); }
.birthday-shell::before { opacity: .32; background-size: 21px 21px; }
.birthday-confetti { position: absolute; width: 220px; height: 220px; pointer-events: none; opacity: .22; background-image: radial-gradient(circle, #ffd20a 0 2px, transparent 2.5px), radial-gradient(circle, #f3559f 0 2px, transparent 2.5px), radial-gradient(circle, #a971df 0 2px, transparent 2.5px); background-position: 0 0, 28px 43px, 68px 12px; background-size: 73px 77px, 83px 81px, 91px 69px; transform: rotate(13deg); }
.confetti-a { top: 90px; right: 4%; }.confetti-b { left: 1%; bottom: 1%; transform: rotate(-24deg); }
.brand-button { padding: 0; border: 0; color: white; background: transparent; text-align: left; cursor: pointer; }
.brand-button > span:last-child { display: block; }
.brand-button .brand-name, .brand-button .brand-city { display: block; }
.birthday-header-actions { gap: 8px; }
.birthday-layout { grid-template-columns: minmax(300px, .75fr) minmax(610px, 1.25fr); align-items: center; }
.birthday-card { min-height: 775px; }
.birthday-story { padding-top: 0; }
.birthday-illustration { position: relative; width: 260px; height: 180px; margin: 0 0 11px; }
.balloon { position: absolute; width: 59px; height: 72px; border-radius: 53% 53% 48% 48%; box-shadow: inset -12px -12px 23px rgba(0,0,0,.14), 0 18px 30px rgba(0,0,0,.14); }
.balloon::before { content: ""; position: absolute; left: 27px; bottom: -80px; width: 1px; height: 82px; background: rgba(255,255,255,.38); transform: rotate(8deg); }
.balloon::after { content: ""; position: absolute; left: 24px; bottom: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid currentColor; }
.balloon-one { left: 4px; top: 12px; color: #ec4c9a; background: radial-gradient(circle at 33% 25%, #ff92c4, #e13b89 56%, #9d1556); transform: rotate(-8deg); }
.balloon-two { right: 25px; top: 31px; color: #ffd20a; background: radial-gradient(circle at 33% 25%, #fff1a1, #ffd20a 56%, #c59500); transform: rotate(10deg); }
.cake-art { position: absolute; left: 82px; bottom: 3px; width: 112px; height: 90px; border-radius: 17px 17px 22px 22px; background: linear-gradient(#ffe26b 0 29%, #f85ba6 30% 57%, #fff3c8 58%); box-shadow: 0 24px 40px rgba(0,0,0,.25); }
.cake-art::before { content: ""; position: absolute; left: -8px; right: -8px; bottom: -10px; height: 15px; border-radius: 99px; background: #fff; opacity: .8; }
.cake-art span { position: absolute; top: -32px; width: 6px; height: 32px; border-radius: 4px; background: repeating-linear-gradient(45deg, #fff 0 3px, #8b36b7 3px 6px); }
.cake-art span::before { content: ""; position: absolute; left: -2px; top: -10px; width: 10px; height: 14px; border-radius: 80% 20% 70% 30%; background: #ffd20a; box-shadow: 0 0 15px rgba(255,210,10,.75); }
.cake-art span:nth-child(1) { left: 26px; }.cake-art span:nth-child(2) { left: 53px; }.cake-art span:nth-child(3) { left: 80px; }
.cake-art i { position: absolute; left: 47px; top: 39px; color: white; font-style: normal; }
.birthday-progress { padding: 19px 28px 14px; border-bottom: 1px solid #eeeaf2; background: rgba(255,255,255,.92); }
.birthday-progress .progress-track { margin-top: 9px; }
.birthday-progress-dots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; margin-top: 9px; }
.birthday-progress-dots > span { display: grid; justify-items: center; gap: 3px; min-width: 0; color: #aaa3b2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6.5px; }
.birthday-progress-dots i { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #ddd7e2; border-radius: 50%; background: white; color: #938b9b; font-size: 6px; font-style: normal; font-weight: 900; }
.birthday-progress-dots .active { color: var(--purple-700); font-weight: 850; }.birthday-progress-dots .active i { color: white; border-color: var(--purple-700); background: var(--purple-700); box-shadow: 0 0 0 4px rgba(91,36,142,.09); }
.birthday-progress-dots .done i { color: #214c3d; border-color: #b7e0d0; background: #dff4ea; }
.birthday-screen { padding: 27px 34px 24px; }
.birthday-screen .screen-lead { margin-bottom: 20px; }
.birthday-question { padding: 17px 0; border-top: 1px solid var(--line); }
.birthday-question:first-of-type { padding-top: 4px; border-top: 0; }
.birthday-question .question-heading { margin-bottom: 11px; }
.location-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mini-location { min-width: 0; min-height: 72px; padding: 9px 7px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: white; cursor: pointer; text-align: left; }
.mini-location > span { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 7px; border-radius: 8px; color: white; background: #8562a7; font-size: 8px; font-weight: 950; }
.mini-location strong, .mini-location small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mini-location strong { font-size: 10px; }.mini-location small { margin-top: 2px; color: #8d8594; font-size: 6.5px; }
.mini-location.active { border-color: var(--purple-700); background: var(--purple-100); box-shadow: 0 0 0 2px rgba(91,36,142,.07); }.mini-location.active > span { background: var(--purple-700); }
.party-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.party-type { min-height: 82px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; cursor: pointer; text-align: left; }
.party-type > span { display: block; margin-bottom: 6px; font-size: 19px; }.party-type strong, .party-type small { display: block; }.party-type strong { font-size: 11px; }.party-type small { margin-top: 3px; color: #81798a; font-size: 7.5px; line-height: 1.35; }
.party-type.active { border-color: #e15396; background: #fff5fa; box-shadow: 0 0 0 2px rgba(225,83,150,.08); }
.birthday-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.birthday-form-grid label { display: grid; gap: 5px; color: #5f5769; font-size: 8.5px; font-weight: 800; }.birthday-form-grid label > span { font-size: 8.5px; }
.birthday-form-grid input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--ink); background: var(--paper); font-size: 10.5px; }.birthday-form-grid input:focus { border-color: var(--purple-700); box-shadow: 0 0 0 3px rgba(91,36,142,.08); }
.contact-prefill-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #c9e4da; border-radius: 12px; color: #285f4c; background: #f2faf7; font-size: 7.5px; line-height: 1.45; }.contact-prefill-note span { display: grid; place-items: center; flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; color: #fff; background: var(--success); font-size: 9px; font-weight: 900; }
.counter-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.single-counter-pair { grid-template-columns: 1fr; }
.counter-card { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.counter-card > span { align-self: center; font-size: 9.5px; font-weight: 800; }.counter-card > div { display: flex; align-items: center; gap: 9px; }.counter-card button { width: 27px; height: 27px; border: 0; border-radius: 8px; color: var(--purple-700); background: var(--purple-100); cursor: pointer; font-size: 17px; }.counter-card strong { min-width: 20px; text-align: center; font-size: 16px; }.counter-card small { grid-column: 1 / -1; color: #8a8292; font-size: 7px; }
.recommend-choice { display: grid; grid-template-columns: 38px 1fr 17px; align-items: center; gap: 11px; width: 100%; min-height: 62px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; cursor: pointer; text-align: left; }
.recommend-choice > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--purple-950); background: var(--yellow); font-size: 17px; }.recommend-choice strong, .recommend-choice small { display: block; }.recommend-choice strong { font-size: 10.5px; }.recommend-choice small { margin-top: 3px; color: #81798a; font-size: 8px; }.recommend-choice.active { border-color: var(--purple-700); background: #faf7fd; }.recommend-choice.active .radio-dot { border: 4px solid var(--purple-700); }
.activity-selection-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; color: #706778; font-size: 9px; font-weight: 800; }.activity-selection-meta strong { display: grid; place-items: center; min-width: 37px; min-height: 24px; padding: 0 8px; border-radius: 999px; color: var(--purple-700); background: var(--purple-100); font-size: 10px; }
.activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.activity-card { position: relative; display: grid; grid-template-columns: 37px minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 96px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; cursor: pointer; text-align: left; }
.activity-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: white; background: linear-gradient(135deg, #63308d, #9a45bb); font-size: 15px; font-weight: 900; }.activity-card strong, .activity-card small { display: block; }.activity-card strong { font-size: 10.5px; }.activity-card small { margin-top: 3px; color: #81798a; font-size: 7.5px; line-height: 1.35; }.activity-check { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #d4ced9; border-radius: 5px; color: transparent; font-size: 8px; }
.activity-age { display: inline-flex; align-items: center; min-height: 20px; margin-top: 6px; padding: 2px 7px; border-radius: 999px; color: #63278f; background: #f0e7f8; font-size: 8px; font-weight: 900; line-height: 1.25; }
.activity-status { display: block; margin-top: 5px; color: #9b2d65; font-size: 7.5px; font-style: normal; font-weight: 850; line-height: 1.35; }
.activity-card.active { border-color: #e15396; background: #fff6fa; box-shadow: 0 0 0 2px rgba(225,83,150,.07); }.activity-card.active .activity-check { color: white; border-color: #e15396; background: #e15396; }.activity-card.disabled { cursor: not-allowed; opacity: .68; background: #f7f5f8; }
.combo-price-note { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; padding: 9px 11px; border: 1px solid #e2d3ee; border-radius: 11px; color: #5b248e; background: #faf6fd; font-size: 8px; font-weight: 850; line-height: 1.45; }.combo-price-note span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; color: #fff; background: var(--purple-700); font-size: 11px; }
.safety-panel { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-top: 11px; padding: 12px; border: 1px solid #edd8aa; border-radius: 13px; background: #fff9ec; color: #604a22; }.safety-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: white; background: #df941d; font-weight: 900; }.safety-panel strong { display: block; font-size: 9.5px; }.safety-panel p { margin: 3px 0 0; font-size: 7.5px; line-height: 1.4; }.safety-check { margin-top: 8px; color: #604a22; font-size: 8px; font-weight: 700; }
.safety-panel .staff-height-rule { margin-top: 8px; padding-top: 8px; border-top: 1px solid #ead4a5; font-weight: 800; }
.birthday-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }.birthday-date-row > label, .birthday-date-row > div { min-height: 70px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }.birthday-date-row label { display: grid; gap: 7px; color: #625a6c; font-size: 8px; font-weight: 800; }.birthday-date-row input { border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 800; }.birthday-date-row > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 9px; }.birthday-date-row > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--purple-950); background: var(--yellow); font-size: 11px; font-weight: 950; }.birthday-date-row strong { font-size: 8.5px; }.birthday-date-row small { color: #81798a; font-size: 7.5px; text-transform: capitalize; }
.slot-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 9px; }.slot-heading strong { font-size: 11px; }.slot-heading span { color: #8a8292; font-size: 7.5px; text-align: right; }
.birthday-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-height: 320px; overflow-y: auto; padding: 2px; }.birthday-slot-grid button { min-height: 68px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; cursor: pointer; text-align: left; }.birthday-slot-grid strong, .birthday-slot-grid span, .birthday-slot-grid small { display: block; }.birthday-slot-grid strong { font-size: 12px; }.birthday-slot-grid span { margin-top: 4px; color: #16845b; font-size: 7.5px; font-weight: 850; }.birthday-slot-grid small { margin-top: 3px; color: #8c8594; font-size: 6.5px; }.birthday-slot-grid button.limited { border-color: #e7cc9d; background: #fffbf2; }.birthday-slot-grid button.limited span { color: #b87112; }.birthday-slot-grid button.selected { border-color: var(--purple-700); background: var(--purple-100); box-shadow: 0 0 0 2px rgba(91,36,142,.08); }.birthday-slot-grid button:disabled { cursor: not-allowed; opacity: .52; background: #f3f1f5; }.birthday-slot-grid button:disabled span { color: #8c8594; }
.ai-help-card { display: grid; grid-template-columns: 38px 1fr; gap: 11px; margin-top: 12px; padding: 13px; border: 1px solid #d9cae6; border-radius: 14px; background: linear-gradient(135deg, #f8f1fd, #fff); }.ai-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: white; background: linear-gradient(135deg, #4e1c78, #9b3eba); font-size: 9px; font-weight: 950; }.ai-help-card strong { font-size: 9.5px; }.ai-help-card p { margin: 3px 0 8px; color: #796f82; font-size: 7.5px; line-height: 1.4; }.ai-help-card button, .ai-actions button { min-height: 29px; padding: 0 9px; border: 1px solid var(--purple-700); border-radius: 8px; color: var(--purple-700); background: white; cursor: pointer; font-size: 7.5px; font-weight: 850; }.ai-actions { display: flex; gap: 6px; flex-wrap: wrap; }.ai-sent { color: var(--success); font-size: 8px; font-weight: 850; }.text-help-button { display: block; margin: 10px auto 0; padding: 7px; border: 0; color: #8b8393; background: transparent; cursor: pointer; font-size: 7.5px; }.text-help-button strong { color: var(--purple-700); }
.birthday-package-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }.birthday-package { position: relative; overflow: hidden; min-width: 0; padding: 17px 14px 13px; border: 1px solid var(--line); border-radius: 17px; background: white; }.birthday-package.selected { border-color: var(--purple-700); box-shadow: 0 0 0 2px rgba(91,36,142,.08), 0 12px 30px rgba(46,16,74,.08); }.birthday-package.manual { background: #faf9fb; }.package-ribbon { position: absolute; left: 0; top: 0; padding: 5px 9px; border-radius: 0 0 9px 0; color: var(--purple-950); background: var(--yellow); font-size: 6.5px; font-weight: 950; letter-spacing: .07em; }.birthday-package.manual .package-ribbon { color: white; background: #8b8292; }.package-heading { display: flex; justify-content: space-between; gap: 9px; align-items: flex-start; margin-top: 14px; }.package-heading span { color: var(--purple-700); text-transform: uppercase; letter-spacing: .09em; font-size: 7px; font-weight: 900; }.package-heading h3 { margin: 3px 0 0; font-size: 13px; line-height: 1.2; }.package-heading > strong { white-space: nowrap; font-size: 16px; }.package-feature-row { display: grid; gap: 5px; margin: 13px 0; }.package-feature-row span { color: #665e70; font-size: 7.5px; }.package-capacity { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 8px 9px; border-radius: 10px; background: var(--paper); }.package-capacity span { color: #8a8292; font-size: 6.5px; }.package-capacity strong { font-size: 8px; }.package-capacity small { grid-column: 1 / -1; color: var(--purple-700); font-size: 7px; font-weight: 850; }.package-select { width: 100%; min-height: 35px; margin-top: 10px; border: 1px solid var(--purple-700); border-radius: 10px; color: var(--purple-700); background: white; cursor: pointer; font-size: 8px; font-weight: 900; }.package-select.active { color: white; background: var(--purple-700); }.manual-note { margin: 10px 0 0; color: #736c79; font-size: 7px; line-height: 1.45; }.weekday-tip { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 10px 12px; border-radius: 12px; color: #5c5325; background: #fff9db; }.weekday-tip span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--purple-950); background: var(--yellow); font-size: 10px; font-weight: 950; }.weekday-tip p { margin: 0; font-size: 8px; }
.guest-reprice-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 11px 13px; border: 1px solid #dccde8; border-radius: 13px; background: #faf6fd; }.guest-reprice-card span, .guest-reprice-card strong, .guest-reprice-card small { display: block; }.guest-reprice-card span { color: #716979; font-size: 7.5px; }.guest-reprice-card strong { margin-top: 1px; font-size: 16px; }.guest-reprice-card small { color: #8a8292; font-size: 7px; }.guest-reprice-card > div:last-child { display: flex; gap: 6px; }.guest-reprice-card button { width: 30px; height: 30px; border: 0; border-radius: 9px; color: var(--purple-700); background: white; box-shadow: 0 2px 8px rgba(35,10,54,.08); cursor: pointer; font-size: 18px; }
.inline-warning-action { padding: 0; border: 0; color: #8b5c12; background: transparent; cursor: pointer; font-size: inherit; font-weight: 900; text-decoration: underline; }
.addon-list { display: grid; gap: 7px; max-height: 330px; overflow-y: auto; padding: 2px; }.addon-card { position: relative; display: grid; grid-template-columns: 34px 1fr auto 18px; align-items: center; gap: 9px; min-height: 58px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: white; cursor: pointer; }.addon-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 11px; color: var(--purple-700); background: var(--purple-100); font-size: 14px; }.addon-card > span > strong, .addon-card > span > small { display: block; }.addon-card > span > strong { font-size: 9.5px; }.addon-card > span > small { margin-top: 2px; color: #857d8d; font-size: 7px; line-height: 1.35; }.addon-card > b { max-width: 125px; color: var(--purple-700); text-align: right; font-size: 7.5px; font-weight: 850; }.addon-card > input { width: 17px; height: 17px; accent-color: var(--purple-700); }.addon-card.included { border-color: #bfe2d5; background: #f4fbf8; }.addon-card.disabled { opacity: .48; cursor: default; }.counter-addon { grid-template-columns: 34px 1fr auto auto; cursor: default; }.counter-addon > div { display: flex; align-items: center; gap: 5px; }.counter-addon button { width: 24px; height: 24px; border: 0; border-radius: 7px; color: var(--purple-700); background: var(--purple-100); cursor: pointer; }.counter-addon > div strong { min-width: 18px; text-align: center; font-size: 9px; }
.invitation-addon { align-items: start; }.invitation-addon .addon-icon, .invitation-addon > b, .invitation-addon > div { margin-top: 3px; }
.running-total { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin-top: 8px; padding: 10px 12px; border-radius: 12px; color: white; background: linear-gradient(135deg, #32134f, #6e268d); }.running-total span { color: rgba(255,255,255,.65); font-size: 8px; }.running-total strong { grid-row: 1 / 3; grid-column: 2; color: var(--yellow); font-size: 18px; }.running-total small { font-size: 7.5px; }
.otp-panel { margin-top: 13px; padding: 12px; border: 1px solid #d9cbe4; border-radius: 14px; background: #faf7fc; }.otp-panel > button { width: 100%; min-height: 39px; border: 0; border-radius: 10px; color: white; background: var(--purple-700); cursor: pointer; font-size: 9px; font-weight: 850; }.otp-panel > button:disabled { opacity: .4; }.otp-panel p { margin: 0 0 9px; color: #786f81; font-size: 7.5px; }.otp-panel > div:not(.otp-success) { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }.otp-panel label { display: grid; gap: 4px; color: #655d6e; font-size: 7.5px; font-weight: 800; }.otp-panel input { min-height: 37px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; letter-spacing: .18em; }.otp-panel div > button { min-height: 37px; padding: 0 12px; border: 0; border-radius: 9px; color: var(--purple-950); background: var(--yellow); cursor: pointer; font-size: 8px; font-weight: 900; }.otp-panel div > button:disabled { opacity: .45; }.otp-panel.verified { border-color: #b9dfd1; background: #eff9f5; }.otp-success { display: flex; align-items: center; gap: 9px; color: #176448; }.otp-success span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: white; background: var(--success); }.otp-success strong { font-size: 8.5px; }
.birthday-points-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; padding: 17px; border-radius: 18px; color: white; background: linear-gradient(135deg, #331150, #70268d); }.birthday-points-hero span, .birthday-points-hero strong, .birthday-points-hero small { display: block; }.birthday-points-hero span { color: rgba(255,255,255,.64); font-size: 8px; }.birthday-points-hero strong { margin-top: 2px; color: var(--yellow); font-size: 24px; }.birthday-points-hero small { margin-top: 3px; color: rgba(255,255,255,.68); font-size: 7.5px; }
.birthday-summary { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; }.birthday-summary-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; background: linear-gradient(135deg, #f5eef9, #fff); }.birthday-summary-hero span, .birthday-summary-hero strong, .birthday-summary-hero small { display: block; }.birthday-summary-hero span { color: var(--purple-700); font-size: 7px; font-weight: 850; }.birthday-summary-hero strong { margin-top: 3px; font-size: 11px; }.birthday-summary-hero small { margin-top: 3px; color: #81798a; font-size: 7.5px; text-transform: capitalize; }.birthday-summary-hero > b { white-space: nowrap; font-size: 19px; }.birthday-summary-lines { padding: 8px 14px; }.birthday-summary-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #ebe6ef; font-size: 8px; }.birthday-summary-lines > div:last-child { border-bottom: 0; }.birthday-summary-lines span { color: #81798a; }.birthday-summary-lines strong { max-width: 68%; text-align: right; }.birthday-payment-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }.birthday-payment-split > div { display: grid; gap: 3px; padding: 12px 14px; background: var(--paper); }.birthday-payment-split > div:first-child { color: white; background: var(--purple-700); }.birthday-payment-split span { font-size: 7.5px; }.birthday-payment-split strong { font-size: 17px; }.onsite-note { margin: 8px 0; color: #81798a; font-size: 7.5px; }.required-checks { display: grid; gap: 8px; }.required-checks .terms-check { padding: 8px 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 7.5px; }
.birthday-hold { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; padding: 14px 16px; border-radius: 15px; color: white; background: linear-gradient(135deg, #32134f, #75298f); }.birthday-hold > span { color: var(--yellow); font-size: 7px; font-weight: 950; letter-spacing: .1em; }.birthday-hold > strong { grid-row: 1 / 3; grid-column: 2; font-size: 23px; font-variant-numeric: tabular-nums; }.birthday-hold > small { color: rgba(255,255,255,.65); font-size: 7.5px; text-transform: capitalize; }.deposit-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 11px 0; }.deposit-breakdown > div { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }.deposit-breakdown span { color: #81798a; font-size: 8px; }.deposit-breakdown strong { font-size: 19px; }.monri-card { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; padding: 12px 13px; border-radius: 13px; color: #285a48; background: #eef9f5; }.monri-card strong, .monri-card small { display: block; }.monri-card strong { font-size: 9px; }.monri-card small { margin-top: 2px; font-size: 7px; }.monri-card b { font-size: 8px; }.payment-preview { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 14px; border: 1px dashed #d8d1dd; border-radius: 13px; color: #726a7a; background: #faf9fb; }.payment-preview span, .payment-preview small { display: block; }.payment-preview span { font-size: 10px; letter-spacing: .1em; }.payment-preview small { margin-top: 5px; font-size: 7px; }.payment-preview strong { color: var(--purple-700); font-size: 11px; }
.birthday-success { text-align: center; }.birthday-success .step-kicker { color: var(--success); }.birthday-ticket { position: relative; display: grid; grid-template-columns: 1fr 1fr 82px; gap: 12px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 17px; text-align: left; background: linear-gradient(135deg, #fff, #f7f2fa); }.birthday-ticket > div:not(.qr-demo) { min-width: 0; }.birthday-ticket span, .birthday-ticket strong, .birthday-ticket small { display: block; }.birthday-ticket span { color: #8a8292; font-size: 6.5px; text-transform: uppercase; letter-spacing: .08em; }.birthday-ticket strong { margin-top: 3px; font-size: 11px; }.birthday-ticket small { margin-top: 4px; color: #81798a; font-size: 7px; line-height: 1.4; }.birthday-ticket > div:first-child strong { color: var(--purple-700); font-size: 13px; }.success-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; text-align: left; }.success-facts > div { display: grid; grid-template-columns: 26px 1fr; column-gap: 7px; align-items: center; padding: 9px; border-radius: 11px; background: var(--paper); }.success-facts span { grid-row: 1 / 3; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--purple-700); background: var(--purple-100); font-size: 9px; }.success-facts strong { font-size: 7.5px; }.success-facts small { color: #8a8292; font-size: 6.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.birthday-success-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 9px; }.birthday-success-actions button { min-height: 37px; border: 1px solid var(--line); border-radius: 10px; color: var(--purple-700); background: white; cursor: pointer; font-size: 7.5px; font-weight: 850; }
.birthday-footer { padding-top: 14px; padding-bottom: 18px; }.birthday-primary { background: linear-gradient(135deg, var(--yellow), #ffdf4c); }.birthday-page-footer { justify-content: flex-end; }

@media (max-width: 1120px) {
  .birthday-topbar { align-items: flex-start; }.birthday-header-actions { flex-wrap: wrap; justify-content: flex-end; }.birthday-layout { grid-template-columns: minmax(260px, .65fr) minmax(580px, 1.35fr); gap: 35px; }.birthday-story h1 { font-size: 49px; }
}

@media (max-width: 980px) {
  .birthday-layout { grid-template-columns: 1fr; max-width: 760px; }.birthday-story { display: none; }.birthday-card { min-height: 760px; }
}

@media (max-width: 720px) {
  .birthday-shell { padding-top: 14px; }.birthday-topbar { display: grid; grid-template-columns: 1fr auto; padding: 0 14px; }.birthday-header-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; width: 100%; }.birthday-header-actions .module-switch { grid-column: 1 / -1; }.birthday-header-actions .module-switch button { flex: 1; }.birthday-header-actions .language-switch { justify-self: start; }.birthday-header-actions .location-picker { justify-self: end; }.birthday-card { min-height: calc(100dvh - 164px); }.birthday-progress { padding: 16px 18px 12px; }.birthday-progress-dots { display: none; }.birthday-screen { padding: 23px 19px; }.location-card-grid { grid-template-columns: repeat(2, 1fr); }.party-type-grid { grid-template-columns: 1fr; }.party-type { display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; min-height: 60px; }.party-type > span { grid-row: 1 / 3; margin: 0; align-self: center; }.birthday-form-grid, .counter-pair, .birthday-date-row { grid-template-columns: 1fr; }.birthday-form-grid .wide-field { grid-column: auto; }.activity-grid { grid-template-columns: 1fr; }.birthday-slot-grid { grid-template-columns: repeat(3, 1fr); max-height: none; }.birthday-package-list { grid-template-columns: 1fr; }.addon-list { max-height: none; }.addon-card, .counter-addon { grid-template-columns: 32px minmax(0, 1fr) auto 18px; }.addon-card > b { max-width: 88px; }.birthday-ticket { grid-template-columns: 1fr 75px; }.birthday-ticket > div:nth-child(2) { grid-column: 1; }.birthday-ticket .qr-demo { grid-column: 2; grid-row: 1 / 3; }.success-facts { grid-template-columns: 1fr; }.birthday-footer { position: sticky; bottom: 0; }.birthday-page-footer { display: none; }
}

@media (max-width: 420px) {
  .birthday-topbar { padding-inline: 11px; }.birthday-header-actions .language-switch button { width: 28px; }.birthday-progress .progress-meta { font-size: 9px; }.birthday-screen h2 { font-size: 25px; }.birthday-slot-grid { grid-template-columns: repeat(2, 1fr); }.birthday-package { padding-inline: 12px; }.addon-card, .counter-addon { grid-template-columns: 31px minmax(0, 1fr) auto; }.addon-card > input, .counter-addon > div { grid-column: 3; grid-row: 2; justify-self: end; }.addon-card > b { grid-column: 3; grid-row: 1; }.birthday-hold > strong { font-size: 19px; }.deposit-breakdown { grid-template-columns: 1fr; }.birthday-summary-hero { align-items: flex-start; }.birthday-payment-split { grid-template-columns: 1fr; }.birthday-success-actions { grid-template-columns: 1fr; }.birthday-footer .back-button { max-width: 105px; font-size: 9px; }.birthday-footer .primary-button { padding-inline: 13px; gap: 8px; font-size: 10px; }
}

/* Birthday flow readability: keep supporting copy comfortably legible on every step. */
.birthday-shell:not(.laser-shell) .module-switch button,
.birthday-shell:not(.laser-shell) .language-switch button { font-size: 10px; }
.birthday-shell:not(.laser-shell) .brand-city,
.birthday-shell:not(.laser-shell) .birthday-page-footer { font-size: 10px; }
.birthday-shell:not(.laser-shell) .progress-meta { font-size: 12px; }
.birthday-shell:not(.laser-shell) .birthday-progress-dots > span { font-size: 8px; }
.birthday-shell:not(.laser-shell) .birthday-progress-dots i { font-size: 7px; }
.birthday-shell:not(.laser-shell) .birthday-screen .screen-lead { font-size: 14px; line-height: 1.55; }
.birthday-shell:not(.laser-shell) .birthday-question .question-heading label { font-size: 15px; }
.birthday-shell:not(.laser-shell) .birthday-question .helper { font-size: 11px; }
.birthday-shell:not(.laser-shell) .mini-location strong { font-size: 12px; }
.birthday-shell:not(.laser-shell) .mini-location small { font-size: 8.5px; }
.birthday-shell:not(.laser-shell) .party-type strong { font-size: 12.5px; }
.birthday-shell:not(.laser-shell) .party-type small { font-size: 9.5px; line-height: 1.45; }
.birthday-shell:not(.laser-shell) .birthday-form-grid label,
.birthday-shell:not(.laser-shell) .birthday-form-grid label > span { font-size: 10.5px; }
.birthday-shell:not(.laser-shell) .birthday-form-grid input { font-size: 12px; }
.birthday-shell:not(.laser-shell) .contact-prefill-note { font-size: 9.5px; line-height: 1.5; }
.birthday-shell:not(.laser-shell) .counter-card > span { font-size: 11px; }
.birthday-shell:not(.laser-shell) .counter-card small { font-size: 9px; line-height: 1.45; }
.birthday-shell:not(.laser-shell) .recommend-choice strong,
.birthday-shell:not(.laser-shell) .activity-card strong { font-size: 12px; }
.birthday-shell:not(.laser-shell) .recommend-choice small,
.birthday-shell:not(.laser-shell) .activity-card small { font-size: 9.5px; line-height: 1.45; }
.birthday-shell:not(.laser-shell) .activity-selection-meta { font-size: 10.5px; }
.birthday-shell:not(.laser-shell) .activity-selection-meta strong { font-size: 11px; }
.birthday-shell:not(.laser-shell) .activity-age { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .activity-status { font-size: 9px; }
.birthday-shell:not(.laser-shell) .activity-check { font-size: 9px; }
.birthday-shell:not(.laser-shell) .combo-price-note { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .safety-panel strong { font-size: 11px; }
.birthday-shell:not(.laser-shell) .safety-panel p,
.birthday-shell:not(.laser-shell) .safety-check { font-size: 9.5px; line-height: 1.5; }
.birthday-shell:not(.laser-shell) .birthday-date-row label { font-size: 10px; }
.birthday-shell:not(.laser-shell) .birthday-date-row input { font-size: 12px; }
.birthday-shell:not(.laser-shell) .birthday-date-row strong { font-size: 10.5px; }
.birthday-shell:not(.laser-shell) .birthday-date-row small { font-size: 9px; }
.birthday-shell:not(.laser-shell) .slot-heading strong { font-size: 12px; }
.birthday-shell:not(.laser-shell) .slot-heading span { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .birthday-slot-grid span { font-size: 9px; }
.birthday-shell:not(.laser-shell) .birthday-slot-grid small { font-size: 8.5px; line-height: 1.4; }
.birthday-shell:not(.laser-shell) .ai-help-card strong { font-size: 11px; }
.birthday-shell:not(.laser-shell) .ai-help-card p { font-size: 9.5px; line-height: 1.5; }
.birthday-shell:not(.laser-shell) .ai-help-card button,
.birthday-shell:not(.laser-shell) .ai-actions button,
.birthday-shell:not(.laser-shell) .text-help-button { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .ai-sent { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .package-ribbon { font-size: 8.5px; }
.birthday-shell:not(.laser-shell) .package-heading span { font-size: 9px; }
.birthday-shell:not(.laser-shell) .package-heading h3 { font-size: 14px; }
.birthday-shell:not(.laser-shell) .package-feature-row span { font-size: 9.5px; line-height: 1.4; }
.birthday-shell:not(.laser-shell) .package-capacity span { font-size: 8.5px; }
.birthday-shell:not(.laser-shell) .package-capacity strong { font-size: 10px; }
.birthday-shell:not(.laser-shell) .package-capacity small { font-size: 9px; }
.birthday-shell:not(.laser-shell) .package-select { font-size: 10px; }
.birthday-shell:not(.laser-shell) .manual-note { font-size: 9px; line-height: 1.5; }
.birthday-shell:not(.laser-shell) .weekday-tip p { font-size: 9.5px; line-height: 1.45; }
.birthday-shell:not(.laser-shell) .guest-reprice-card span { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .guest-reprice-card small { font-size: 9px; }
.birthday-shell:not(.laser-shell) .addon-card > span > strong { font-size: 11px; }
.birthday-shell:not(.laser-shell) .addon-card > span > small { font-size: 9px; line-height: 1.45; }
.birthday-shell:not(.laser-shell) .addon-card > b { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .counter-addon > div strong { font-size: 10px; }
.birthday-shell:not(.laser-shell) .running-total span,
.birthday-shell:not(.laser-shell) .running-total small { font-size: 9px; }
.birthday-shell:not(.laser-shell) .otp-panel > button { font-size: 10.5px; }
.birthday-shell:not(.laser-shell) .otp-panel p,
.birthday-shell:not(.laser-shell) .otp-panel label { font-size: 9.5px; line-height: 1.45; }
.birthday-shell:not(.laser-shell) .otp-panel div > button,
.birthday-shell:not(.laser-shell) .otp-success strong { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .birthday-points-hero span,
.birthday-shell:not(.laser-shell) .birthday-points-hero small { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .birthday-summary-hero span { font-size: 9px; }
.birthday-shell:not(.laser-shell) .birthday-summary-hero strong { font-size: 12px; }
.birthday-shell:not(.laser-shell) .birthday-summary-hero small { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .birthday-summary-lines > div { font-size: 10px; line-height: 1.4; }
.birthday-shell:not(.laser-shell) .birthday-payment-split span,
.birthday-shell:not(.laser-shell) .onsite-note,
.birthday-shell:not(.laser-shell) .required-checks .terms-check { font-size: 9.5px; line-height: 1.45; }
.birthday-shell:not(.laser-shell) .birthday-hold > span { font-size: 9px; }
.birthday-shell:not(.laser-shell) .birthday-hold > small { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .deposit-breakdown span { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .monri-card strong { font-size: 10.5px; }
.birthday-shell:not(.laser-shell) .monri-card small,
.birthday-shell:not(.laser-shell) .monri-card b { font-size: 9px; }
.birthday-shell:not(.laser-shell) .payment-preview small { font-size: 9px; }
.birthday-shell:not(.laser-shell) .birthday-ticket span { font-size: 8.5px; }
.birthday-shell:not(.laser-shell) .birthday-ticket small { font-size: 9px; line-height: 1.45; }
.birthday-shell:not(.laser-shell) .success-facts strong { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .success-facts small { font-size: 8.5px; }
.birthday-shell:not(.laser-shell) .birthday-success-actions button { font-size: 9.5px; }
.birthday-shell:not(.laser-shell) .birthday-footer .back-button { font-size: 11px; }
.birthday-shell:not(.laser-shell) .birthday-footer .primary-button { font-size: 12px; }

/* LaserTag Open Play */
.laser-shell {
  background:
    radial-gradient(circle at 7% 6%, rgba(0, 229, 255, .18), transparent 25rem),
    radial-gradient(circle at 92% 80%, rgba(255, 36, 143, .16), transparent 29rem),
    linear-gradient(145deg, #0d0b25 0%, #1e0c3d 48%, #30114c 100%);
}
.laser-beam { position: absolute; z-index: 0; height: 1px; pointer-events: none; transform-origin: left; opacity: .42; }
.laser-beam::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 18px currentColor; background: currentColor; }
.laser-beam-one { left: -3%; top: 29%; width: 42%; color: #00e5ff; background: linear-gradient(90deg, transparent, #00e5ff); transform: rotate(9deg); }
.laser-beam-two { right: -8%; top: 67%; width: 48%; color: #ff4ba5; background: linear-gradient(90deg, #ff4ba5, transparent); transform: rotate(-12deg); }
.laser-layout { align-items: center; }
.laser-story h1 span { color: #55f0ff; text-shadow: 0 0 30px rgba(0,229,255,.18); }
.laser-story .kicker { color: #55f0ff; }
.laser-illustration { position: relative; width: 235px; height: 155px; margin-bottom: 11px; }
.laser-target { position: absolute; left: 24px; top: 4px; display: grid; place-items: center; width: 130px; height: 130px; border: 1px solid rgba(85,240,255,.42); border-radius: 50%; box-shadow: inset 0 0 40px rgba(0,229,255,.08), 0 0 35px rgba(0,229,255,.08); }
.laser-target::before, .laser-target::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; }
.laser-target::before { inset: 21px; }.laser-target::after { inset: 43px; border-color: rgba(255,75,165,.58); box-shadow: 0 0 20px rgba(255,75,165,.2); }
.laser-target i:first-child { position: absolute; width: 158px; height: 1px; background: linear-gradient(90deg, transparent, rgba(85,240,255,.5), transparent); }
.laser-target i:nth-child(2) { position: absolute; width: 1px; height: 158px; background: linear-gradient(transparent, rgba(85,240,255,.5), transparent); }
.laser-target span { position: relative; z-index: 1; color: #ff4ba5; font-size: 23px; font-weight: 950; text-shadow: 0 0 16px #ff4ba5; }
.laser-ray { position: absolute; left: 147px; top: 65px; width: 93px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, #ff4ba5, transparent); box-shadow: 0 0 12px rgba(255,75,165,.7); transform: rotate(-7deg); }
.laser-card { min-height: 780px; }
.laser-progress .progress-track span { background: linear-gradient(90deg, #5b248e, #db3698, #16b8c9); }
.laser-progress .birthday-progress-dots span.active i { background: #16a9ba; }
.laser-mode-button.active { box-shadow: 0 0 20px rgba(85,240,255,.15); }
.location-option.laser-disabled, .mini-location.laser-mini-location.disabled { opacity: .38; cursor: not-allowed; filter: grayscale(1); }
.location-option.laser-disabled:hover { background: transparent; }
.laser-start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--line); }
.laser-start-grid .birthday-question { padding-top: 19px; }
.laser-games-question { padding-top: 19px; border-top: 1px solid var(--line); }
.laser-game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.laser-game-choice { position: relative; display: grid; place-items: center; min-height: 70px; padding: 12px 7px 9px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; cursor: pointer; }
.laser-game-choice strong, .laser-game-choice small { display: block; }.laser-game-choice strong { font-size: 22px; }.laser-game-choice small { margin-top: 2px; color: #8b8494; font-size: 8px; }
.laser-game-choice.active { border-color: #1aaabb; color: #126e79; background: #effcfd; box-shadow: 0 0 0 2px rgba(26,170,187,.1); }
.laser-game-choice.recommended { border-color: #e1bf35; background: linear-gradient(145deg, #fffdf2, #fff8cf); }
.laser-game-choice.recommended.active { border-color: #1aaabb; background: linear-gradient(145deg, #effcfd, #fff7bd); }
.laser-game-choice > span { position: absolute; top: -8px; padding: 3px 7px; border-radius: 99px; color: #2b2040; background: var(--yellow); font-size: 6px; font-weight: 950; letter-spacing: .07em; }
.laser-games-question .duration-recommendation { margin-top: 12px; }
.laser-games-question .duration-recommendation p { margin: 0; }
.laser-running-total { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin-top: 9px; padding: 10px 13px; border-radius: 12px; color: white; background: linear-gradient(135deg, #26123f, #5a1f79); }
.laser-running-total span { color: rgba(255,255,255,.62); font-size: 8px; }.laser-running-total strong { grid-row: 1 / 3; grid-column: 2; color: #55f0ff; font-size: 17px; }.laser-running-total small { font-size: 7px; }
.laser-offer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.laser-offer-card { position: relative; overflow: hidden; padding: 18px 15px 13px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: white; cursor: pointer; text-align: left; transition: .2s ease; }
.laser-offer-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(40,13,64,.09); }
.laser-offer-card.selected { border-color: #692b98; box-shadow: 0 0 0 2px rgba(105,43,152,.1), 0 14px 30px rgba(40,13,64,.08); }
.laser-offer-card.student.selected { border-color: #189cab; box-shadow: 0 0 0 2px rgba(24,156,171,.1); }
.laser-offer-card.disabled { cursor: not-allowed; opacity: .47; background: #f7f5f8; }
.laser-offer-badge { position: absolute; left: 0; top: 0; padding: 5px 9px; border-radius: 0 0 9px 0; color: #28183d; background: var(--yellow); font-size: 6px; font-weight: 950; letter-spacing: .07em; }
.laser-offer-badge.cyan { color: white; background: #159aaa; }
.laser-offer-heading { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-top: 13px; }
.laser-offer-heading span { color: #732ba3; font-size: 6.5px; font-weight: 900; letter-spacing: .09em; }.laser-offer-card.student .laser-offer-heading span { color: #168a96; }
.laser-offer-heading h3 { margin: 3px 0 0; font-size: 13px; }.laser-offer-heading > strong { white-space: nowrap; font-size: 19px; }
.laser-offer-card > p { min-height: 42px; margin: 12px 0; color: #756d7e; font-size: 8.5px; line-height: 1.5; }
.laser-offer-facts { display: grid; gap: 5px; min-height: 37px; }.laser-offer-facts span { color: #5f5768; font-size: 7.5px; }
.laser-offer-select { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px -15px -13px; padding: 10px 15px; border-top: 1px solid var(--line); background: #faf9fb; }
.laser-offer-select span { color: #81798a; font-size: 7px; }.laser-offer-select b { color: #682a97; font-size: 7.5px; }.laser-offer-card.student .laser-offer-select b { color: #168a96; }
.laser-student-confirm { margin-top: 12px; }.laser-student-confirm .check-card { margin-top: 0; border-color: #bde3e7; background: #f2fbfc; }.laser-student-confirm > p { margin: 7px 2px 0; color: #7b7484; font-size: 7.5px; line-height: 1.45; }
.laser-safety-hero { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; padding: 17px; border: 1px solid #bfe7eb; border-radius: 18px; background: linear-gradient(135deg, #eefcfd, #fff); }
.laser-safety-hero > span { display: grid; place-items: center; align-content: center; width: 75px; height: 75px; border-radius: 50%; color: white; background: linear-gradient(135deg, #116f7a, #1dc1d1); box-shadow: 0 12px 25px rgba(26,170,187,.18); font-size: 23px; font-weight: 950; }.laser-safety-hero > span small { margin-top: -4px; font-size: 8px; }
.laser-safety-hero strong { font-size: 12px; }.laser-safety-hero p { margin: 5px 0 0; color: #68777a; font-size: 8.5px; line-height: 1.5; }
.laser-required-check { margin-top: 10px; border-color: #bfe7eb; }
.laser-binary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.laser-binary-grid button { min-height: 47px; border: 1px solid var(--line); border-radius: 13px; color: #5f5768; background: white; cursor: pointer; font-size: 10px; font-weight: 850; }.laser-binary-grid button.active { border-color: #1aaabb; color: #126f79; background: #effcfd; box-shadow: 0 0 0 2px rgba(26,170,187,.08); }
.laser-adult-panel { margin-top: -10px; }
.laser-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }.laser-info-grid > div { display: grid; grid-template-columns: 29px 1fr; gap: 9px; padding: 11px; border-radius: 13px; background: var(--paper); }.laser-info-grid > div > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #692b98; background: #eee4f7; font-size: 10px; font-weight: 900; }.laser-info-grid strong { font-size: 8.5px; }.laser-info-grid p { margin: 3px 0 0; color: #81798a; font-size: 7px; line-height: 1.45; }
.laser-schedule { display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; margin-bottom: 12px; padding: 11px 13px; border-radius: 13px; color: white; background: linear-gradient(135deg, #25113e, #552079); }.laser-schedule > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: #27163c; background: #55f0ff; font-size: 14px; }.laser-schedule strong, .laser-schedule small { display: block; }.laser-schedule strong { font-size: 8px; }.laser-schedule small { margin-top: 3px; color: rgba(255,255,255,.64); font-size: 6.8px; line-height: 1.4; }.laser-schedule b { white-space: nowrap; color: #55f0ff; font-size: 11px; }
.laser-early-note { margin: -5px 2px 13px; color: #81798a; font-size: 7.5px; line-height: 1.4; }
.laser-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-height: 330px; overflow-y: auto; padding: 2px; }.laser-slot-grid .slot-button { min-height: 66px; }.laser-slot-grid .slot-button strong { font-size: 12px; }.laser-slot-grid .slot-button span { font-size: 7.5px; }
.laser-time-summary { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; align-items: center; margin-top: 11px; padding: 12px 14px; border-radius: 14px; color: white; background: linear-gradient(135deg, #281341, #612281); }.laser-time-summary span, .laser-time-summary strong, .laser-time-summary small { display: block; }.laser-time-summary span { color: rgba(255,255,255,.6); font-size: 6.5px; text-transform: uppercase; }.laser-time-summary strong { margin-top: 2px; font-size: 10px; }.laser-time-summary small { margin-top: 2px; color: #55f0ff; font-size: 7px; }.laser-time-summary > b { color: var(--yellow); font-size: 18px; }
.laser-waiver-action { display: grid; grid-template-columns: 37px 1fr auto; gap: 10px; align-items: center; margin-top: 9px; padding: 12px; border: 1px solid #bce3e6; border-radius: 14px; text-align: left; background: #f1fbfc; }.laser-waiver-action > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: white; background: #18a0ae; font-weight: 900; }.laser-waiver-action strong, .laser-waiver-action small { display: block; }.laser-waiver-action strong { font-size: 9px; }.laser-waiver-action small { margin-top: 3px; color: #738084; font-size: 7px; line-height: 1.4; }.laser-waiver-action button { min-height: 35px; padding: 0 10px; border: 0; border-radius: 9px; color: white; background: #5b248e; cursor: pointer; font-size: 7px; font-weight: 900; }.laser-waiver-action button.sent { color: #176448; background: #dff3eb; }
.laser-primary { background: linear-gradient(135deg, var(--yellow), #55f0ff); }

@media (max-width: 980px) {
  .laser-card { min-height: 790px; }
}

@media (max-width: 720px) {
  .laser-shell { padding-top: 14px; }
  .laser-beam { display: none; }
  .laser-card { min-height: calc(100dvh - 164px); }
  .laser-start-grid, .laser-offer-list, .laser-info-grid { grid-template-columns: 1fr; gap: 0; }
  .laser-start-grid .birthday-question + .birthday-question { padding-top: 0; }
  .laser-game-grid { grid-template-columns: repeat(4, 1fr); }
  .laser-slot-grid { grid-template-columns: repeat(3, 1fr); max-height: none; }
  .laser-time-summary { grid-template-columns: 1fr 1fr; }.laser-time-summary > b { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
  .laser-waiver-action { grid-template-columns: 34px 1fr; }.laser-waiver-action button { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .laser-game-grid { gap: 6px; }.laser-game-choice { min-height: 66px; }.laser-game-choice > span { font-size: 5px; }
  .laser-slot-grid { grid-template-columns: repeat(2, 1fr); }
  .laser-safety-hero { grid-template-columns: 63px 1fr; padding: 13px; }.laser-safety-hero > span { width: 60px; height: 60px; font-size: 19px; }
  .laser-offer-card > p { min-height: 0; }
  .laser-time-summary { grid-template-columns: 1fr; }.laser-time-summary > b { grid-column: auto; }
}

/* Kooglana Klub */
.club-shell {
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(circle at 5% 4%, rgba(117, 44, 177, .58), transparent 26rem),
    radial-gradient(circle at 92% 86%, rgba(255, 210, 10, .11), transparent 27rem),
    linear-gradient(145deg, #160929 0%, #26103f 48%, #35164f 100%);
}
.club-glow { position: absolute; pointer-events: none; border-radius: 50%; }
.club-glow-one { width: 310px; height: 310px; right: -165px; top: 13%; border: 1px solid rgba(255,255,255,.08); }
.club-glow-two { width: 480px; height: 480px; left: -360px; bottom: -300px; border: 65px solid rgba(255,210,10,.025); }
.club-topbar { max-width: 1320px; margin-bottom: 18px; }
.club-header-actions .module-switch button.active { color: #26113f; background: var(--yellow); }
.club-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 216px minmax(0, 1fr); width: min(1320px, 100%); min-height: 790px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: rgba(255,255,255,.07); box-shadow: 0 28px 80px rgba(7,2,14,.28); backdrop-filter: blur(18px); }
.club-sidebar { display: flex; flex-direction: column; padding: 25px 17px 18px; color: white; background: linear-gradient(180deg, rgba(33,13,55,.9), rgba(26,10,43,.78)); }
.club-sidebar-head { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 0 7px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.club-sidebar-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px 12px 4px 12px; color: #28123f; background: var(--yellow); font-size: 18px; font-weight: 950; transform: rotate(-3deg); }
.club-sidebar-head strong, .club-sidebar-head small { display: block; }
.club-sidebar-head strong { font-size: 10px; letter-spacing: .08em; }
.club-sidebar-head small { margin-top: 4px; color: rgba(255,255,255,.5); font-size: 7px; line-height: 1.3; }
.club-sidebar nav { display: grid; gap: 5px; padding-top: 18px; }
.club-sidebar nav button { position: relative; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; min-height: 44px; padding: 0 11px; border: 0; border-radius: 12px; color: rgba(255,255,255,.63); background: transparent; cursor: pointer; text-align: left; font-size: 9px; font-weight: 800; }
.club-sidebar nav button > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); font-size: 10px; font-weight: 950; }
.club-sidebar nav button:hover { color: white; background: rgba(255,255,255,.06); }
.club-sidebar nav button.active { color: #2b1542; background: var(--yellow); box-shadow: 0 9px 24px rgba(255,210,10,.13); }
.club-sidebar nav button.active > span { color: white; background: #5b248e; }
.club-sidebar nav button small { padding: 3px 5px; border-radius: 99px; color: #ffe56d; background: rgba(255,210,10,.09); font-size: 5px; letter-spacing: .08em; }
.club-sidebar nav .club-admin-link { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 12px 12px; }
.club-rate { display: grid; grid-template-columns: auto 1fr; gap: 1px 7px; align-items: center; margin-top: auto; padding: 14px; border: 1px solid rgba(255,210,10,.17); border-radius: 15px; background: rgba(255,210,10,.06); }
.club-rate strong { grid-row: 1 / 3; color: var(--yellow); font-size: 29px; line-height: 1; }
.club-rate span { color: white; font-size: 7px; font-weight: 850; line-height: 1.15; }
.club-rate small { grid-column: 1 / -1; margin-top: 5px; color: rgba(255,255,255,.46); font-size: 6.5px; }
.club-workspace { min-width: 0; padding: 31px 32px 42px; color: var(--ink); background: #f6f3f9; }
.club-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.club-page-heading > div:first-child { min-width: 0; }
.club-page-heading span { color: #792eaa; font-size: 7px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.club-page-heading h1 { margin: 5px 0 4px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.035em; line-height: 1.05; }
.club-page-heading p { max-width: 700px; margin: 0; color: #7d7586; font-size: 9px; line-height: 1.55; }
.club-profile-chip { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 9px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: white; cursor: pointer; }
.club-profile-chip > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; background: linear-gradient(135deg, #4a1b73, #8a38b2); font-size: 9px; letter-spacing: 0; }
.club-profile-chip i { color: #8c8394; font-size: 9px; font-style: normal; }
.club-profile-chip.admin > span { background: #2c1251; }
.club-child-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 11px; align-items: center; margin: -10px 0 18px; padding: 11px 14px; border: 1px solid #ead48a; border-radius: 14px; background: #fff9d9; }
.club-child-banner > span { grid-row: 1 / 3; display: grid; place-items: center; min-height: 34px; padding: 0 9px; border-radius: 9px; color: #3d244e; background: var(--yellow); font-size: 6px; font-weight: 950; letter-spacing: .08em; }
.club-child-banner strong { font-size: 10px; }
.club-child-banner small { color: #7c7049; font-size: 7px; }
.club-child-banner button { grid-row: 1 / 3; grid-column: 3; min-height: 32px; border: 1px solid #ddc76c; border-radius: 9px; color: #604d10; background: white; cursor: pointer; font-size: 7px; font-weight: 850; }
.club-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 14px; }
.club-points-card, .club-status-card { min-height: 205px; border-radius: 22px; overflow: hidden; }
.club-points-card { display: grid; align-content: space-between; padding: 22px; color: white; background: radial-gradient(circle at 90% 15%, rgba(255,210,10,.22), transparent 10rem), linear-gradient(135deg, #2b1149, #6d2897); box-shadow: 0 18px 38px rgba(45,17,73,.18); }
.club-points-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.club-points-top span, .club-points-top strong, .club-points-top small { display: block; }
.club-points-top span { color: rgba(255,255,255,.58); font-size: 8px; font-weight: 750; }
.club-points-top strong { margin-top: 7px; color: var(--yellow); font-size: clamp(36px, 5vw, 53px); line-height: .95; letter-spacing: -.05em; }
.club-points-top small { margin-top: 5px; color: rgba(255,255,255,.55); font-size: 7px; }
.club-member-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.club-member-line span { color: rgba(255,255,255,.5); font-size: 6.5px; font-weight: 900; letter-spacing: .15em; }
.club-member-line b { color: white; font-size: 7px; letter-spacing: .08em; }
.club-qr { display: grid; place-items: center; width: 66px; height: 66px; padding: 7px; border-radius: 11px; background: white; }
.club-qr > span { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 100%; height: 100%; }
.club-qr i { display: block; border-radius: 1px; background: transparent; }
.club-qr i.on { background: #32134f; }
.club-qr.inverse { background: rgba(255,255,255,.96); box-shadow: 0 8px 20px rgba(15,4,28,.15); }
.club-status-card { display: grid; align-content: start; padding: 21px; border: 1px solid #e7e0ec; background: white; }
.club-status-heading { display: flex; justify-content: space-between; gap: 13px; align-items: center; }
.club-status-heading span, .club-status-heading strong { display: block; }
.club-status-heading span { color: #81798a; font-size: 7px; }
.club-status-heading strong { margin-top: 5px; font-size: 25px; }
.club-status-heading > b { padding: 6px 9px; border-radius: 99px; color: #55330a; background: var(--yellow); font-size: 7px; letter-spacing: .08em; }
.club-progress { height: 7px; margin-top: 17px; overflow: hidden; border-radius: 99px; background: #eee9f1; }
.club-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6b2999, #d23d90, #ffd20a); }
.club-progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: #8b8392; font-size: 6.5px; }
.club-progress-meta strong { color: #5b248e; font-size: 7px; }
.club-expiry { display: grid; grid-template-columns: 25px 1fr auto; gap: 8px; align-items: center; margin-top: 17px; padding: 9px 10px; border-radius: 11px; color: #645312; background: #fff8d5; }
.club-expiry > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--yellow); font-size: 10px; }
.club-expiry p { margin: 0; font-size: 6.5px; line-height: 1.35; }
.club-expiry button { border: 0; color: #654f00; background: transparent; cursor: pointer; font-size: 6px; font-weight: 900; text-decoration: underline; }
.club-section-title { margin: 23px 0 11px; font-size: 13px; }
.club-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.club-quick-grid button { display: grid; grid-template-columns: 37px 1fr auto; gap: 2px 10px; align-items: center; min-height: 68px; padding: 12px; border: 1px solid #e4dee9; border-radius: 16px; color: var(--ink); background: white; cursor: pointer; text-align: left; transition: .18s ease; }
.club-quick-grid button:hover { transform: translateY(-2px); border-color: #cdbbd8; box-shadow: 0 9px 20px rgba(39,14,64,.07); }
.club-quick-grid button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 13px; font-weight: 950; }
.club-quick-grid .violet { color: white; background: #5b248e; }.club-quick-grid .yellow { color: #2d153f; background: var(--yellow); }.club-quick-grid .pink { color: white; background: #d63e91; }
.club-quick-grid strong { font-size: 9px; }.club-quick-grid small { color: #8b8393; font-size: 6.5px; }.club-quick-grid i { grid-row: 1 / 3; grid-column: 3; color: #7c5a92; font-size: 12px; font-style: normal; }
.club-content-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; margin-top: 12px; }
.club-panel { border: 1px solid #e5dfe9; border-radius: 19px; background: white; box-shadow: 0 9px 24px rgba(40,16,63,.035); }
.club-panel > h2, .club-panel-head h2 { margin: 0; font-size: 11px; }
.club-panel-head { padding: 16px 17px 12px; }
.club-panel-head > small { display: block; margin-top: 4px; color: #91899a; font-size: 6.5px; line-height: 1.4; }
.club-panel-head.row { display: flex; align-items: center; justify-content: space-between; }
.club-panel-head.row button { border: 0; color: #6b2999; background: transparent; cursor: pointer; font-size: 6.5px; font-weight: 850; }
.club-tier-list { display: grid; padding: 0 13px 13px; }
.club-tier-list > div { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 0 9px; align-items: center; min-height: 61px; padding: 9px; border-top: 1px solid #eee9f1; }
.club-tier-list > div:first-child { border-top: 0; }
.club-tier-list > div.current { margin: 3px 0; border: 1px solid #d9c2e7; border-radius: 12px; background: #faf5fd; }
.club-tier-list > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 9px; font-weight: 950; }
.club-tier-list span.player { color: #6a544b; background: #eaded6; }.club-tier-list span.pro { color: #5b248e; background: #e9ddf2; }.club-tier-list span.legend { color: #5c4300; background: #ffed93; }
.club-tier-list p { margin: 0; }.club-tier-list strong, .club-tier-list small { display: block; }.club-tier-list strong { font-size: 8px; }.club-tier-list small { margin-top: 2px; color: #8d8595; font-size: 6px; }
.club-tier-list em { grid-column: 2; color: #776f7f; font-size: 6px; font-style: normal; }.club-tier-list b { position: absolute; right: 9px; top: 8px; color: #5b248e; font-size: 8px; }
.club-transaction-list { display: grid; padding: 0 14px 13px; }
.club-transaction-list > div { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; min-height: 53px; border-top: 1px solid #eee9f1; }
.club-transaction-list > div:first-child { border-top: 0; }
.club-transaction-list > div > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; color: #652991; background: #f0e8f6; font-size: 10px; font-weight: 950; }
.club-transaction-list p { margin: 0; }.club-transaction-list strong, .club-transaction-list small { display: block; }.club-transaction-list strong { font-size: 7.5px; }.club-transaction-list small { margin-top: 3px; color: #91899a; font-size: 6px; }.club-transaction-list b { color: #16845b; font-size: 8px; }
.club-balance-chip { flex: 0 0 auto; min-width: 130px; padding: 11px 14px; border-radius: 15px; color: white; background: #32134f; text-align: right; }
.club-balance-chip small, .club-balance-chip strong { display: block; }.club-balance-chip small { color: rgba(255,255,255,.54); font-size: 6px; }.club-balance-chip strong { margin-top: 3px; color: var(--yellow); font-size: 21px; }
.club-active-reward { display: grid; grid-template-columns: 46px 1fr auto 63px; gap: 12px; align-items: center; padding: 15px 17px; border-radius: 19px; color: white; background: linear-gradient(135deg, #2a1147, #6a2994); box-shadow: 0 16px 33px rgba(43,16,70,.15); }
.club-active-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #32134f; background: var(--yellow); font-size: 18px; font-weight: 950; }
.club-active-reward > div:nth-child(2) span, .club-active-reward > div:nth-child(2) strong, .club-active-reward > div:nth-child(2) small { display: block; }
.club-active-reward > div:nth-child(2) span { color: #ffe865; font-size: 6px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.club-active-reward > div:nth-child(2) strong { margin-top: 4px; font-size: 11px; }.club-active-reward > div:nth-child(2) small { margin-top: 4px; color: rgba(255,255,255,.58); font-size: 6.5px; }
.club-code { text-align: center; }.club-code b, .club-code small { display: block; }.club-code b { padding: 7px 11px; border: 1px dashed rgba(255,255,255,.35); border-radius: 9px; color: var(--yellow); font-size: 13px; letter-spacing: .14em; }.club-code small { margin-top: 4px; color: rgba(255,255,255,.55); font-size: 5.5px; }
.club-active-reward > p { grid-column: 2 / -1; margin: -3px 0 0; color: rgba(255,255,255,.46); font-size: 5.8px; }
.club-return-reward { display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: start; margin-top: 12px; padding: 16px 17px; border: 1px solid #d9c8e4; border-radius: 17px; color: #3a214d; background: linear-gradient(135deg, #fff 0%, #f6effa 100%); }
.club-return-reward > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #34154e; background: var(--yellow); font-size: 20px; font-weight: 950; }
.club-return-reward strong, .club-return-reward small, .club-return-reward em { display: block; }.club-return-reward strong { font-size: 11px; }.club-return-reward p { margin: 4px 0 7px; color: #776b7f; font-size: 7px; line-height: 1.45; }.club-return-reward small { color: #5b248e; font-size: 7px; font-weight: 850; }.club-return-reward em { margin-top: 6px; color: #908595; font-size: 6px; font-style: normal; }
.club-saved-rewards { margin-top: 12px; }.club-saved-rewards > div:last-child { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 14px 14px; }.club-saved-rewards section { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; min-height: 51px; padding: 9px; border: 1px solid #ebe5ee; border-radius: 11px; }.club-saved-rewards section > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: #f0e8f5; font-size: 13px; }.club-saved-rewards p { margin: 0; }.club-saved-rewards strong, .club-saved-rewards small { display: block; }.club-saved-rewards strong { font-size: 7px; }.club-saved-rewards small { margin-top: 3px; color: #8c8293; font-size: 5.8px; }.club-saved-rewards button { min-height: 29px; padding: 0 9px; border: 0; border-radius: 8px; color: #2d153f; background: var(--yellow); cursor: pointer; font-size: 6px; font-weight: 900; }.club-saved-rewards button:disabled { opacity: .5; cursor: not-allowed; }
.club-info-note { display: flex; gap: 9px; align-items: center; margin: 12px 0; padding: 10px 12px; border: 1px solid #e7d58e; border-radius: 12px; color: #6a591e; background: #fff9dd; }
.club-info-note > span { display: grid; place-items: center; flex: 0 0 21px; width: 21px; height: 21px; border-radius: 50%; background: var(--yellow); font-size: 9px; font-weight: 950; }.club-info-note p { margin: 0; font-size: 6.8px; line-height: 1.45; }
.club-filter-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }.club-filter-row::-webkit-scrollbar { display: none; }
.club-filter-row button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 11px; border: 1px solid #dfd8e4; border-radius: 99px; color: #716979; background: white; cursor: pointer; white-space: nowrap; font-size: 7px; font-weight: 800; }
.club-filter-row button.active { color: white; border-color: #5b248e; background: #5b248e; }.club-filter-row button span { font-size: 8px; }
.club-reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.club-reward-card { display: grid; align-content: start; min-height: 218px; padding: 14px; border: 1px solid #e3dce7; border-radius: 17px; background: white; }
.club-reward-card.unavailable { opacity: .48; filter: grayscale(.25); }
.club-reward-top { display: flex; justify-content: space-between; align-items: center; }
.club-reward-top > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #5b248e; background: #eee5f5; font-size: 13px; font-weight: 950; }
.club-reward-top b { padding: 4px 6px; border-radius: 99px; font-size: 5.5px; letter-spacing: .08em; }.club-reward-top .tier-club { color: #685348; background: #eee1da; }.club-reward-top .tier-plus { color: #5b248e; background: #eadff1; }.club-reward-top .tier-pro { color: #624a00; background: #fff0a2; }
.club-reward-card h3 { margin: 12px 0 5px; font-size: 10px; line-height: 1.25; }.club-reward-card > p { min-height: 30px; margin: 0; color: #81798a; font-size: 6.5px; line-height: 1.45; }
.club-reward-card dl { display: grid; gap: 6px; margin: 10px 0 0; }.club-reward-card dl > div { display: grid; grid-template-columns: 50px 1fr; gap: 6px; }.club-reward-card dt { color: #9a8fa0; font-size: 5.8px; }.club-reward-card dd { margin: 0; color: #4e3d58; font-size: 6.2px; font-weight: 800; line-height: 1.35; }
.club-reward-locations { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }.club-reward-locations span { padding: 3px 5px; border-radius: 6px; color: #6e6576; background: #f3f0f5; font-size: 5.5px; }
.club-reward-bottom { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eee9f1; }.club-reward-bottom strong { color: #7b5c00; font-size: 6px; letter-spacing: .02em; }.club-reward-bottom button { min-height: 29px; padding: 0 10px; border: 0; border-radius: 8px; color: white; background: #5b248e; cursor: pointer; font-size: 6px; font-weight: 850; }.club-reward-bottom button:disabled { color: #968e9d; background: #ece8ef; cursor: not-allowed; }
.club-receipt-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 13px; }
.club-upload-panel { padding: 17px; }.club-upload-panel > h2 { margin-bottom: 12px; }
.club-source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.club-source-grid button { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 0 9px; border: 1px solid #e1dbe5; border-radius: 11px; color: #706878; background: white; cursor: pointer; font-size: 7.5px; font-weight: 850; }
.club-source-grid button span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: white; background: #5b248e; font-size: 8px; font-weight: 950; }.club-source-grid button:nth-child(2) span { background: #45c9a5; }.club-source-grid button:nth-child(3) span { background: #f3a034; }
.club-source-grid button.active { border-color: #5b248e; background: #faf6fd; box-shadow: 0 0 0 2px rgba(91,36,142,.07); }
.club-verified-points { margin-top: 9px; padding: 9px 11px; border-radius: 10px; color: #176346; background: #eaf8f1; font-size: 9px; font-weight: 950; text-align: right; }
.club-direct-order { display: flex; align-items: center; justify-content: space-between; min-height: 39px; margin-top: 10px; padding: 0 12px; border-radius: 11px; color: #32134f; background: var(--yellow); font-size: 7px; font-weight: 950; text-decoration: none; }
.club-dropzone { display: grid; place-items: center; margin-top: 13px; padding: 30px 18px; border: 1px dashed #bcaac8; border-radius: 16px; background: #faf8fc; text-align: center; }
.club-dropzone > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: white; background: #5b248e; font-size: 16px; }.club-dropzone strong { margin-top: 10px; font-size: 10px; }.club-dropzone small { margin-top: 4px; color: #8f8797; font-size: 6.5px; }
.club-dropzone label, .club-dropzone button { min-height: 32px; margin-top: 12px; padding: 0 12px; border-radius: 9px; cursor: pointer; font-size: 6.5px; font-weight: 850; }
.club-dropzone label { display: inline-flex; align-items: center; color: white; background: #5b248e; }.club-dropzone label input { position: absolute; width: 1px; height: 1px; opacity: 0; }.club-dropzone button { margin-top: 7px; border: 1px solid #ddd4e3; color: #5b248e; background: white; }
.club-verified-receipt { display: grid; grid-template-columns: 40px 1fr auto; gap: 11px; align-items: center; margin-top: 13px; padding: 19px; border: 1px solid #bee3d3; border-radius: 16px; background: #f1faf6; }
.club-verified-receipt > span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; color: white; background: #16845b; font-size: 16px; font-weight: 950; }.club-verified-receipt small, .club-verified-receipt strong, .club-verified-receipt p, .club-verified-receipt b { display: block; }.club-verified-receipt small { color: #6f847a; font-size: 6px; }.club-verified-receipt strong { margin-top: 3px; font-size: 9px; }.club-verified-receipt p { margin: 4px 0 0; color: #16845b; font-size: 6px; }.club-verified-receipt > div:last-child { text-align: right; }.club-verified-receipt > div:last-child strong { font-size: 13px; }.club-verified-receipt b { margin-top: 2px; color: #16845b; font-size: 11px; }
.club-limit-note { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 9px 10px; border-radius: 10px; color: #675b29; background: #fff8da; }.club-limit-note span { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); font-size: 8px; font-weight: 950; }.club-limit-note p { margin: 0; font-size: 6.5px; line-height: 1.35; }
.club-receipt-history { padding: 0 14px 14px; }.club-receipt-history > div { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; min-height: 58px; border-top: 1px solid #eee9f1; }.club-receipt-history > div:first-child { border-top: 0; }.club-receipt-history > div > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; font-size: 9px; font-weight: 950; }.club-receipt-history span.approved { color: #16845b; background: #e3f5ed; }.club-receipt-history span.review { color: #8c6900; background: #fff1ad; }.club-receipt-history p { margin: 0; }.club-receipt-history strong, .club-receipt-history small { display: block; }.club-receipt-history strong { font-size: 7.5px; }.club-receipt-history small { margin-top: 3px; color: #91899a; font-size: 6px; }.club-receipt-history b { color: #16845b; font-size: 8px; }.club-receipt-history em { color: #80630a; font-size: 6px; font-style: normal; }
.club-primary-small { min-height: 38px; padding: 0 13px; border: 0; border-radius: 11px; color: #27133e; background: var(--yellow); cursor: pointer; font-size: 7px; font-weight: 900; }
.club-child-form { display: grid; grid-template-columns: 1fr .7fr 1fr auto; gap: 9px; align-items: end; margin-bottom: 13px; padding: 15px; }
.club-child-form label, .admin-adjust-panel label { display: grid; gap: 5px; color: #655d6d; font-size: 6.5px; font-weight: 800; }.club-child-form input, .club-child-form select, .admin-adjust-panel input, .admin-adjust-panel select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #ddd6e2; border-radius: 10px; color: var(--ink); background: #faf9fb; outline: 0; font-size: 8px; }.club-child-form button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; color: white; background: #5b248e; cursor: pointer; font-size: 7px; font-weight: 850; }.club-child-form button:disabled { opacity: .4; cursor: not-allowed; }
.club-child-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.club-child-grid article { position: relative; overflow: hidden; min-height: 255px; padding: 20px; border: 1px solid #e2dbe7; border-radius: 20px; background: white; box-shadow: 0 11px 28px rgba(40,16,63,.04); }.club-child-grid article::after { content: ""; position: absolute; right: -35px; top: -35px; width: 110px; height: 110px; border-radius: 50%; background: #f1e8f7; }
.club-child-avatar { position: relative; z-index: 1; display: grid; place-items: center; width: 53px; height: 53px; margin-bottom: 17px; border-radius: 18px; color: white; background: linear-gradient(135deg, #5b248e, #d43f91); font-size: 19px; font-weight: 950; }.club-child-grid article > span { color: #8b36ad; font-size: 6px; font-weight: 950; letter-spacing: .1em; }.club-child-grid h2 { margin: 5px 0 3px; font-size: 19px; }.club-child-grid p { margin: 0; color: #8d8595; font-size: 7px; }.club-child-grid article > div:not(.club-child-avatar) { display: flex; align-items: baseline; gap: 5px; margin-top: 19px; }.club-child-grid article > div strong { font-size: 22px; }.club-child-grid article > div small { color: #8d8595; font-size: 6px; }.club-child-grid button { width: 100%; min-height: 36px; margin-top: 15px; border: 1px solid #d6c6df; border-radius: 10px; color: #5b248e; background: #faf7fc; cursor: pointer; font-size: 7px; font-weight: 850; }
.club-profile-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 12px; }.club-profile-card { grid-row: span 2; display: grid; justify-items: center; align-content: start; padding: 25px; text-align: center; }.club-profile-avatar { display: grid; place-items: center; width: 75px; height: 75px; border-radius: 50%; color: white; background: linear-gradient(135deg, #32134f, #8c38b6); box-shadow: 0 13px 28px rgba(63,21,93,.18); font-size: 20px; font-weight: 950; }.club-profile-card h2 { margin: 14px 0 3px; font-size: 20px; }.club-profile-card > span { color: #73319d; font-size: 6.5px; font-weight: 900; letter-spacing: .08em; }.club-profile-card dl { width: 100%; margin: 22px 0 0; text-align: left; }.club-profile-card dl > div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-top: 1px solid #eee9f1; }.club-profile-card dt { color: #8c8494; font-size: 7px; }.club-profile-card dd { margin: 0; font-size: 7px; font-weight: 850; }
.club-settings-card { padding: 18px; }.club-settings-card > h2 { margin: 0 0 8px; }.club-settings-card > h2:nth-of-type(2) { margin-top: 18px; padding-top: 15px; border-top: 1px solid #eee9f1; }.club-setting-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; min-height: 53px; border-top: 1px solid #eee9f1; }.club-setting-row > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #5b248e; background: #efe7f5; }.club-setting-row p { margin: 0; }.club-setting-row strong, .club-setting-row small { display: block; }.club-setting-row strong { font-size: 8px; }.club-setting-row small { margin-top: 3px; color: #908897; font-size: 6px; }.club-setting-row button { border: 0; color: #5b248e; background: transparent; cursor: pointer; font-size: 6.5px; font-weight: 850; }
.club-toggle { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; min-height: 52px; border-top: 1px solid #eee9f1; cursor: pointer; }.club-toggle strong, .club-toggle small { display: block; }.club-toggle strong { font-size: 8px; }.club-toggle small { margin-top: 3px; color: #16845b; font-size: 6px; }.club-toggle input { position: absolute; opacity: 0; }.club-toggle i { position: relative; width: 36px; height: 21px; border-radius: 99px; background: #dcd6e0; }.club-toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: .18s; }.club-toggle input:checked + i { background: #5b248e; }.club-toggle input:checked + i::after { transform: translateX(15px); }
.club-legal-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; padding: 15px; }.club-legal-card > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #2b1542; background: var(--yellow); font-weight: 950; }.club-legal-card strong { font-size: 7.5px; }.club-legal-card p { margin: 4px 0 0; color: #8c8494; font-size: 6px; }.club-legal-card button { border: 0; color: #5b248e; background: transparent; cursor: pointer; font-size: 6px; font-weight: 850; }.club-legal-card button.danger { grid-column: 2 / -1; justify-self: start; color: #a33b4f; font-weight: 750; }
.admin-heading .club-page-heading span { color: #a57900; }.club-admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 12px; }.club-admin-stats article { display: grid; grid-template-columns: 35px 1fr; gap: 9px; align-items: center; min-height: 78px; padding: 13px; border: 1px solid #e3dde7; border-radius: 15px; background: white; }.club-admin-stats article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #5b248e; background: #eee6f4; font-size: 12px; }.club-admin-stats small, .club-admin-stats strong, .club-admin-stats em { display: block; }.club-admin-stats small { color: #8c8494; font-size: 6px; }.club-admin-stats strong { margin-top: 3px; font-size: 17px; }.club-admin-stats em { margin-top: 2px; color: #16845b; font-size: 5.5px; font-style: normal; }
.club-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.club-admin-grid > article { padding: 16px; }.club-admin-grid > article > h2 { margin-bottom: 12px; }
.club-admin-search { display: grid; grid-template-columns: 28px 1fr; align-items: center; min-height: 39px; border: 1px solid #ddd6e2; border-radius: 10px; background: #faf9fb; }.club-admin-search span { text-align: center; color: #6c2a98; }.club-admin-search input { min-width: 0; height: 37px; border: 0; outline: 0; background: transparent; font-size: 7px; }
.club-member-results { margin-top: 9px; }.club-member-results > div { display: grid; grid-template-columns: 31px 1fr auto; gap: 8px; align-items: center; min-height: 49px; border-top: 1px solid #eee9f1; }.club-member-results > div:first-child { border-top: 0; }.club-member-results > div > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: white; background: #5b248e; font-size: 7px; font-weight: 900; }.club-member-results p { margin: 0; }.club-member-results strong, .club-member-results small { display: block; }.club-member-results strong { font-size: 7.5px; }.club-member-results small { margin-top: 2px; color: #8d8595; font-size: 5.8px; }.club-member-results b { font-size: 8px; }
.club-role-strip { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee9f1; }.club-role-strip > span { color: #8b8393; font-size: 5.5px; text-transform: uppercase; }.club-role-strip > div { padding: 7px; border-radius: 8px; background: #f5f2f7; }.club-role-strip b, .club-role-strip small { display: block; }.club-role-strip b { font-size: 6px; }.club-role-strip small { margin-top: 2px; color: #8c8494; font-size: 5px; }
.club-admin-receipts > div { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; min-height: 66px; border-top: 1px solid #eee9f1; }.club-admin-receipts > div:first-child { border-top: 0; }.club-admin-receipts > div > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: white; background: #48c9a6; font-size: 8px; font-weight: 950; }.club-admin-receipts > div:nth-child(2) > span { background: #f2a033; }.club-admin-receipts p { margin: 0; }.club-admin-receipts strong, .club-admin-receipts small { display: block; }.club-admin-receipts strong { font-size: 7px; }.club-admin-receipts small { margin-top: 3px; color: #8d8595; font-size: 5.8px; }.club-admin-receipts section { display: flex; gap: 4px; }.club-admin-receipts button { min-height: 27px; padding: 0 7px; border: 1px solid #d7cfe0; border-radius: 8px; color: #5b248e; background: white; cursor: pointer; font-size: 5.5px; font-weight: 850; }.club-admin-receipts button:first-child { color: white; border-color: #16845b; background: #16845b; }.club-admin-receipts b { padding: 5px 7px; border-radius: 7px; font-size: 5.5px; }.club-admin-receipts b.approved { color: #126a49; background: #e0f4eb; }.club-admin-receipts b.rejected { color: #9d3449; background: #fbe5e9; }
.club-code-input { display: grid; grid-template-columns: 1fr auto; gap: 7px; }.club-code-input input { min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid #d9d1df; border-radius: 10px; outline: 0; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }.club-code-input button { padding: 0 12px; border: 0; border-radius: 10px; color: white; background: #5b248e; cursor: pointer; font-size: 6.5px; font-weight: 850; }.club-code-result { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; margin-top: 10px; padding: 10px; border-radius: 10px; }.club-code-result.valid { color: #126a49; background: #e8f7f0; }.club-code-result.invalid { color: #9d3449; background: #fbe7ea; }.club-code-result > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: white; background: currentColor; font-size: 12px; font-weight: 950; }.club-code-result strong, .club-code-result small { display: block; }.club-code-result strong { font-size: 7px; }.club-code-result small { margin-top: 3px; font-size: 5.8px; }.club-test-hint { display: block; margin-top: 7px; color: #9a929f; font-size: 5.5px; }
.admin-adjust-panel { display: grid; grid-template-columns: 1fr .55fr; gap: 9px; }.admin-adjust-panel h2 { grid-column: 1 / -1; }.admin-adjust-panel label:nth-of-type(3) { grid-column: 1 / -1; }.admin-adjust-panel > p { grid-column: 1 / -1; margin: 0; padding: 7px 8px; border-radius: 8px; color: #735f12; background: #fff5c7; font-size: 6px; }.admin-adjust-panel > button { grid-column: 1 / -1; min-height: 36px; border: 0; border-radius: 10px; color: white; background: #5b248e; cursor: pointer; font-size: 6.5px; font-weight: 850; }.admin-adjust-panel > button:disabled { opacity: .4; cursor: not-allowed; }.club-adjust-saved { grid-column: 1 / -1; color: #16845b; font-size: 6px; }
.admin-audit-panel > div { display: grid; grid-template-columns: 31px 1fr auto; gap: 8px; align-items: center; min-height: 51px; border-top: 1px solid #eee9f1; }.admin-audit-panel > div:first-of-type { border-top: 0; }.admin-audit-panel > div > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #5b248e; background: #eee5f5; font-size: 6px; font-weight: 950; }.admin-audit-panel p { margin: 0; }.admin-audit-panel strong, .admin-audit-panel small { display: block; }.admin-audit-panel strong { font-size: 7px; }.admin-audit-panel small { margin-top: 3px; color: #8c8494; font-size: 5.8px; }.admin-audit-panel time { color: #9a929f; font-size: 5.5px; }
.club-policy-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.club-policy-highlights > article { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; min-height: 72px; padding: 12px; border: 1px solid #e3dae8; border-radius: 15px; background: white; }
.club-policy-highlights > article > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #32134f; background: var(--yellow); font-size: 11px; font-weight: 950; }.club-policy-highlights > article:last-child > span { color: white; background: #5b248e; }.club-policy-highlights strong, .club-policy-highlights small { display: block; }.club-policy-highlights strong { font-size: 8px; }.club-policy-highlights small { margin-top: 4px; color: #81768a; font-size: 6.2px; line-height: 1.4; }
.club-referral-card { display: grid; grid-template-columns: 72px minmax(180px, 1fr) minmax(210px, 1fr) auto; gap: 17px; align-items: center; padding: 22px; color: white; background: linear-gradient(135deg, #2a1047, #742d9f); }
.club-referral-art { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; color: #31134e; background: var(--yellow); font-size: 28px; font-weight: 950; }.club-referral-card > div:nth-child(2) > span { color: #ffe760; font-size: 6px; font-weight: 900; letter-spacing: .12em; }.club-referral-card h2 { margin: 5px 0; font-size: 17px; }.club-referral-card p { margin: 0; color: rgba(255,255,255,.68); font-size: 7px; line-height: 1.45; }.club-referral-card label { display: grid; gap: 5px; }.club-referral-card label span { color: rgba(255,255,255,.55); font-size: 6px; }.club-referral-card input { min-width: 0; height: 37px; padding: 0 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: white; background: rgba(255,255,255,.09); font: inherit; font-size: 7px; }.club-referral-card > button { min-height: 37px; padding: 0 13px; border: 0; border-radius: 10px; color: #2b153f; background: var(--yellow); cursor: pointer; font-size: 7px; font-weight: 950; }
.club-referral-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }.club-referral-steps article { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; min-height: 51px; padding: 10px; border: 1px solid #e4dce8; border-radius: 13px; background: white; }.club-referral-steps b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: white; background: #5b248e; font-size: 8px; }.club-referral-steps strong { font-size: 6.5px; line-height: 1.35; }
.club-required-check { grid-column: 1 / -1; display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }.club-required-check input { width: 16px !important; height: 16px !important; }.club-required-check span { font-size: 7px !important; }
.club-enroll-form { width: min(760px, 100%); padding: 22px; }.club-enroll-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.club-enroll-fields label { display: grid; gap: 6px; }.club-enroll-fields label span, .club-consent-group > strong { color: #766a7e; font-size: 7px; font-weight: 850; }.club-enroll-fields input { min-height: 42px; padding: 0 12px; border: 1px solid #dcd1e2; border-radius: 11px; color: #2e183f; background: white; font: inherit; font-size: 9px; }
.club-consent-group { display: grid; gap: 9px; margin-top: 15px; padding: 14px; border: 1px solid #e5dee9; border-radius: 13px; background: #faf8fb; }.club-consent-group.required { border-color: #d7c3e2; background: #f8f2fb; }.club-consent-group label { display: flex; gap: 9px; align-items: flex-start; color: #4f4357; font-size: 8px; line-height: 1.45; }.club-consent-group input { flex: 0 0 16px; width: 16px; height: 16px; accent-color: #5b248e; }.club-consent-group a { color: #5b248e; font-weight: 850; }
.club-welcome-lock { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 13px; color: #66530c; background: #fff7cf; }.club-welcome-lock > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--yellow); font-size: 12px; }.club-welcome-lock strong, .club-welcome-lock small { display: block; }.club-welcome-lock strong { font-size: 8px; }.club-welcome-lock small { margin-top: 3px; font-size: 6.5px; line-height: 1.4; }.club-enroll-submit { min-height: 44px; margin-top: 15px; padding: 0 18px; border: 0; border-radius: 11px; color: #29143e; background: var(--yellow); cursor: pointer; font-size: 8px; font-weight: 950; }.club-enroll-submit:disabled { opacity: .45; cursor: not-allowed; }
.club-legal-card > a { color: #5b248e; font-size: 7px; font-weight: 850; text-decoration: none; }
.club-mobile-nav { display: none; }

@media (max-width: 1120px) {
  .club-layout { grid-template-columns: 185px minmax(0, 1fr); }
  .club-workspace { padding-inline: 23px; }
  .club-reward-grid { grid-template-columns: repeat(2, 1fr); }
  .club-admin-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .club-layout { grid-template-columns: 160px minmax(0, 1fr); }
  .club-sidebar { padding-inline: 11px; }
  .club-sidebar-head { grid-template-columns: 32px 1fr; padding-inline: 3px; }
  .club-sidebar-logo { width: 31px; height: 31px; }
  .club-sidebar nav button { padding-inline: 7px; }
  .club-hero-grid, .club-content-grid, .club-receipt-layout, .club-profile-grid { grid-template-columns: 1fr; }
  .club-referral-card { grid-template-columns: 60px 1fr; }.club-referral-card label, .club-referral-card > button { grid-column: 1 / -1; }
  .club-profile-card { grid-row: auto; }
  .club-quick-grid { grid-template-columns: 1fr; }
  .club-child-grid { grid-template-columns: repeat(2, 1fr); }
  .club-child-form { grid-template-columns: 1fr 1fr; }
  .club-child-form button { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .club-shell { padding: 15px 0 82px; min-height: 100dvh; overflow-y: visible; }
  .club-glow { display: none; }
  .club-topbar { padding-inline: 14px; margin-bottom: 14px; }
  .club-header-actions .module-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 14px; }
  .club-header-actions .module-switch button { min-width: 0; padding-inline: 4px; border-radius: 10px; font-size: 7px; white-space: nowrap; }
  .club-layout { display: block; min-height: calc(100dvh - 142px); border: 0; border-radius: 25px 25px 0 0; background: #f6f3f9; box-shadow: none; }
  .club-sidebar { display: none; }
  .club-workspace { min-height: calc(100dvh - 142px); padding: 23px 15px 45px; }
  .club-page-heading { align-items: center; margin-bottom: 17px; }
  .club-page-heading h1 { font-size: 27px; }
  .club-page-heading p { font-size: 8px; }
  .club-profile-chip { flex: 0 0 auto; }
  .club-hero-grid { gap: 10px; }
  .club-points-card, .club-status-card { min-height: 188px; }
  .club-points-top strong { font-size: 43px; }
  .club-quick-grid { gap: 8px; }
  .club-content-grid { margin-top: 10px; }
  .club-active-reward { grid-template-columns: 42px 1fr 58px; gap: 9px; padding: 13px; }
  .club-active-reward .club-code { grid-column: 2; text-align: left; }
  .club-active-reward > .club-qr { grid-column: 3; grid-row: 1 / 3; width: 57px; height: 57px; }
  .club-active-reward > p { grid-column: 2 / -1; }
  .club-saved-rewards > div:last-child { grid-template-columns: 1fr; }
  .club-filter-row { margin-inline: -15px; padding-inline: 15px; }
  .club-reward-grid { grid-template-columns: 1fr; }
  .club-reward-card { min-height: 200px; }
  .club-policy-highlights, .club-enroll-fields { grid-template-columns: 1fr; }
  .club-source-grid { grid-template-columns: 1fr 1fr; }
  .club-source-grid button { justify-content: flex-start; }
  .club-verified-receipt { grid-template-columns: 34px 1fr; padding: 14px; }
  .club-verified-receipt > div:last-child { grid-column: 2; text-align: left; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 5px; align-items: baseline; }
  .club-child-grid { grid-template-columns: 1fr; }
  .club-child-form { grid-template-columns: 1fr; }
  .club-child-form button { grid-column: auto; }
  .club-admin-stats, .club-admin-grid { grid-template-columns: 1fr; }
  .club-role-strip { grid-template-columns: 1fr; }
  .club-role-strip > span { margin-bottom: 2px; }
  .club-referral-steps { grid-template-columns: 1fr 1fr; }
  .club-mobile-nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); min-height: 67px; padding: 7px 8px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #e4dee8; background: rgba(255,255,255,.96); box-shadow: 0 -12px 30px rgba(31,11,51,.1); backdrop-filter: blur(15px); }
  .club-mobile-nav button { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; border-radius: 10px; color: #8a8292; background: transparent; cursor: pointer; }
  .club-mobile-nav button span { font-size: 12px; font-weight: 950; }.club-mobile-nav button small { font-size: 6px; font-weight: 800; }.club-mobile-nav button.active { color: #5b248e; background: #f0e8f6; }
  .club-child-banner { grid-template-columns: auto 1fr; }.club-child-banner button { grid-column: 1 / -1; grid-row: auto; min-height: 30px; }.club-child-banner > span { grid-row: 1 / 3; }
}

@media (max-width: 380px) {
  .club-topbar { padding-inline: 10px; }
  .club-header-actions .module-switch button { font-size: 6.3px; }
  .club-workspace { padding-inline: 12px; }
  .club-points-card { padding: 18px; }
  .club-points-top strong { font-size: 38px; }
  .club-qr { width: 58px; height: 58px; }
  .club-page-heading h1 { font-size: 24px; }
  .club-balance-chip { min-width: 105px; }
  .club-admin-receipts section { display: grid; }
}

/* Kooglana AI assistant */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.kooglana-assistant { position: fixed; z-index: 1000; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); color: #28143e; font-family: inherit; }
.assistant-launcher { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 11px; align-items: center; min-width: 208px; min-height: 62px; padding: 8px 17px 8px 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 19px; color: white; background: linear-gradient(135deg, #32134f 0%, #642591 64%, #8f2b9d 100%); box-shadow: 0 17px 42px rgba(45,14,70,.31), inset 0 1px 0 rgba(255,255,255,.18); cursor: pointer; text-align: left; transition: transform .2s ease, box-shadow .2s ease; }
.assistant-launcher:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(45,14,70,.38), inset 0 1px 0 rgba(255,255,255,.2); }
.assistant-launcher:focus-visible, .assistant-window button:focus-visible, .assistant-window input:focus-visible { outline: 3px solid #ffd90a; outline-offset: 2px; }
.assistant-launcher-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #35144f; background: linear-gradient(145deg, #ffe936, #ffc900); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.assistant-launcher-icon b { font-size: 21px; font-weight: 950; line-height: 1; }.assistant-launcher-icon i { position: absolute; right: -4px; bottom: -3px; padding: 3px 4px; border: 2px solid #5d2188; border-radius: 6px; color: white; background: #dd3d93; font-size: 7px; font-style: normal; font-weight: 950; letter-spacing: .04em; }
.assistant-launcher-copy { display: grid; gap: 2px; }.assistant-launcher-copy small { color: rgba(255,255,255,.58); font-size: 8px; font-weight: 900; letter-spacing: .13em; }.assistant-launcher-copy strong { font-size: 14px; font-weight: 900; white-space: nowrap; }
.assistant-launcher > em { position: absolute; right: -5px; top: -6px; display: grid; place-items: center; width: 21px; height: 21px; border: 3px solid white; border-radius: 50%; color: white; background: #e53e91; font-size: 9px; font-style: normal; font-weight: 950; }
.kooglana-assistant.open .assistant-launcher { min-width: 62px; width: 62px; grid-template-columns: 1fr; padding: 8px; border-radius: 19px; }.kooglana-assistant.open .assistant-launcher-copy { display: none; }.kooglana-assistant.open .assistant-launcher-icon { margin: auto; }

.assistant-window { position: absolute; right: 0; bottom: 76px; display: grid; grid-template-rows: 70px 38px minmax(0, 1fr) 66px 32px; width: min(392px, calc(100vw - 28px)); height: min(630px, calc(100dvh - 120px)); overflow: hidden; border: 1px solid rgba(74,31,103,.16); border-radius: 26px; background: white; box-shadow: 0 28px 70px rgba(32,10,52,.28); transform-origin: right bottom; animation: assistant-pop .24s cubic-bezier(.2,.9,.25,1); }
@keyframes assistant-pop { from { opacity: 0; transform: translateY(13px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.assistant-header { display: grid; grid-template-columns: 45px 1fr 34px 34px; gap: 9px; align-items: center; padding: 12px 14px; color: white; background: linear-gradient(135deg, #2d1148, #61248a); }
.assistant-avatar { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #35144f; background: #ffd90a; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }.assistant-avatar span { font-size: 21px; font-weight: 950; }.assistant-avatar i { position: absolute; right: -4px; bottom: -3px; padding: 3px 4px; border: 2px solid #5c2085; border-radius: 6px; color: white; background: #dd3d93; font-size: 7px; font-style: normal; font-weight: 950; }
.assistant-header > div:nth-child(2) { min-width: 0; }.assistant-header strong, .assistant-header span { display: block; }.assistant-header strong { font-size: 15px; }.assistant-header > div:nth-child(2) > span { display: flex; gap: 6px; align-items: center; margin-top: 4px; color: rgba(255,255,255,.66); font-size: 9px; }.assistant-header > div:nth-child(2) > span i { width: 7px; height: 7px; border-radius: 50%; background: #4fe2a4; box-shadow: 0 0 0 3px rgba(79,226,164,.12); }
.assistant-reset, .assistant-close { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: white; background: rgba(255,255,255,.08); cursor: pointer; font-size: 18px; transition: background .16s ease; }.assistant-reset { font-size: 15px; }.assistant-reset:hover, .assistant-close:hover { background: rgba(255,255,255,.17); }
.assistant-context-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; border-bottom: 1px solid #eee8f2; color: #6f6279; background: #faf8fc; }.assistant-context-strip span { padding: 5px 8px; border-radius: 8px; background: #f0e8f5; font-size: 9px; font-weight: 850; }.assistant-context-strip span:last-child { color: #7a2ea7; background: #f4eafa; }
.assistant-messages { min-height: 0; overflow-y: auto; padding: 16px 13px 18px; background: linear-gradient(180deg, #fff 0%, #fcfafd 100%); scrollbar-width: thin; scrollbar-color: #d9cce2 transparent; }
.assistant-message-row { display: flex; gap: 7px; align-items: flex-end; margin-top: 14px; }.assistant-message-row:first-child { margin-top: 0; }.assistant-message-row.assistant { align-items: flex-start; }.assistant-message-row.user { justify-content: flex-end; }
.assistant-mini-avatar { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; margin-top: 2px; border-radius: 9px; color: #31134d; background: #ffd90a; font-size: 10px; font-weight: 950; }
.assistant-message-wrap { display: grid; gap: 8px; max-width: 84%; }.assistant-message-row.user .assistant-message-wrap { justify-items: end; }
.assistant-bubble { padding: 11px 13px; border-radius: 7px 17px 17px 17px; color: #3c2c48; background: #f1ebf5; font-size: 11px; line-height: 1.55; white-space: pre-line; box-shadow: inset 0 0 0 1px rgba(84,41,110,.035); }.assistant-message-row.user .assistant-bubble { border-radius: 17px 7px 17px 17px; color: white; background: linear-gradient(135deg, #5b248e, #7c2fa9); }
.assistant-actions { display: grid; gap: 6px; width: 100%; }.assistant-actions button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 37px; padding: 0 11px; border: 1px solid #d9c7e4; border-radius: 11px; color: #5b248e; background: white; cursor: pointer; font-size: 9px; font-weight: 900; text-align: left; }.assistant-actions button:hover { border-color: #8f55ae; background: #faf5fd; }.assistant-actions button span { font-size: 13px; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }.assistant-suggestions button { min-height: 31px; padding: 0 9px; border: 1px solid #ddd2e4; border-radius: 99px; color: #65566f; background: white; cursor: pointer; font-size: 8.5px; font-weight: 750; }.assistant-suggestions button:hover { color: #5b248e; border-color: #9f73b7; background: #fbf7fd; }
.assistant-typing { display: flex; gap: 4px; align-items: center; min-width: 55px; min-height: 38px; padding: 0 13px; border-radius: 7px 17px 17px 17px; background: #f1ebf5; }.assistant-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8f74a0; animation: assistant-dot 1.05s infinite ease-in-out; }.assistant-typing i:nth-child(2) { animation-delay: .14s; }.assistant-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes assistant-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.assistant-composer { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #ece5f0; background: white; }.assistant-composer input { min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #ddd3e3; border-radius: 14px; color: #2c173f; background: #faf8fb; outline: 0; font: inherit; font-size: 11px; }.assistant-composer input::placeholder { color: #9b8fa2; }.assistant-composer input:focus { border-color: #8650a5; background: white; box-shadow: 0 0 0 3px rgba(101,39,145,.08); }.assistant-composer button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 14px; color: #32134f; background: #ffd90a; cursor: pointer; box-shadow: 0 5px 12px rgba(171,134,0,.18); }.assistant-composer button span { font-size: 20px; font-weight: 950; transform: translateY(-1px); }.assistant-composer button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.assistant-disclaimer { display: grid; place-items: center; margin: 0; padding: 0 13px 6px; color: #9a909f; background: white; font-size: 7.5px; line-height: 1.3; text-align: center; }

@media (max-width: 640px) {
  .kooglana-assistant { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  .assistant-launcher { width: calc((100vw - 36px) / 2); min-width: 0; min-height: 56px; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; padding: 8px 10px 8px 9px; border-radius: 17px; }.assistant-launcher-icon { width: 40px; height: 40px; }.assistant-launcher-copy strong { font-size: 13px; }
  .kooglana-assistant.open .assistant-launcher { width: 56px; min-width: 56px; min-height: 56px; }
  .assistant-window { position: fixed; left: 12px; right: 12px; bottom: calc(145px + env(safe-area-inset-bottom)); width: auto; height: min(650px, calc(100dvh - 163px)); border-radius: 24px; }

  /* A dedicated utility band keeps both persistent controls off page content. */
  body::after { content: ""; position: fixed; z-index: 900; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); height: 72px; border-top: 1px solid #ece7ef; background: rgba(255,255,255,.98); box-shadow: 0 -10px 26px rgba(30,10,55,.06); pointer-events: none; }
  body.landing-page::after { display: none; }
  body:has(.landing-shell)::after { display: none; }
  /* Reserve space below the CTA for the whole utility band. Keeping that space
     above the CTA pushed the button underneath the floating controls on iOS. */
  .booking-footer, .birthday-footer, .laser-footer { padding-top: 13px; padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .birthday-footer, .laser-footer { padding-top: 14px; }
}

@media (max-width: 380px) {
  .assistant-launcher-copy small { font-size: 7px; }.assistant-launcher-copy strong { font-size: 12px; }
  .assistant-window { left: 8px; right: 8px; bottom: calc(142px + env(safe-area-inset-bottom)); height: calc(100dvh - 154px); }
  .assistant-message-wrap { max-width: 88%; }
}

@media (max-width: 370px) {
  .all-content-trigger { width: 56px; min-width: 56px; grid-template-columns: 1fr; padding: 8px; }
  .all-content-trigger > strong { display: none; }
  .all-content-trigger > span:last-child { display: none; }
  .all-content-trigger-icon { margin: auto; }
  .assistant-launcher { width: 56px; min-width: 56px; grid-template-columns: 1fr; padding: 8px; }
  .assistant-launcher-copy { display: none; }
  .assistant-launcher-icon { margin: auto; }
}

/* Live integrations: Loyalty, Court Register, calendar and booking management */
.loyalty-connection { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 11px 13px; border: 1px solid #d9cde1; border-radius: 12px; color: #594d61; background: #faf8fc; font-size: 8.5px; line-height: 1.45; }
.loyalty-connection.connected { border-color: #a8ddca; color: #176346; background: #f1fbf7; }.loyalty-connection.connected strong, .loyalty-connection.connected span { display: block; }.loyalty-connection.error { border-color: #e9b9c4; color: #9c2945; background: #fff5f7; }
.loyalty-connection .spinner { width: 14px; height: 14px; flex: 0 0 14px; }
.oib-lookup-cell { display: grid; gap: 7px; }.oib-lookup-cell label { display: grid; gap: 5px; }.oib-lookup-button { min-height: 31px; padding: 0 10px; border: 1px solid #cdb6da; border-radius: 9px; color: #5b248e; background: #faf6fc; cursor: pointer; font-size: 7.5px; font-weight: 900; }.oib-lookup-button:disabled { opacity: .45; cursor: not-allowed; }
.oib-lookup-status { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; padding: 10px 12px; border: 1px solid #ddcfaf; border-radius: 11px; color: #705b1c; background: #fffae8; font-size: 8px; line-height: 1.55; }.oib-lookup-status > span { display: grid; place-items: center; flex: 0 0 20px; height: 20px; border-radius: 50%; color: #35213f; background: #ffd409; font-weight: 950; }.oib-lookup-status p { margin: 0; }.oib-lookup-status a { color: #5b248e; font-weight: 900; }.oib-lookup-status.found { border-color: #9ed8bf; color: #176346; background: #f1fbf7; }.oib-lookup-status.found > span { color: white; background: #25956b; }.oib-lookup-status.invalid, .oib-lookup-status.error, .oib-lookup-status.not-found { border-color: #e7b8c2; color: #992e46; background: #fff4f6; }
.booking-api-error { display: flex; gap: 9px; align-items: center; margin-top: 10px; padding: 11px 12px; border: 1px solid #e7b8c2; border-radius: 11px; color: #992e46; background: #fff4f6; font-size: 8.5px; }.booking-api-error > span { display: grid; place-items: center; flex: 0 0 21px; height: 21px; border-radius: 50%; color: white; background: #c53b5a; font-weight: 950; }.booking-api-error p { margin: 0; }
.success-actions button:disabled { opacity: .45; cursor: not-allowed; }.calendar-notice { margin: 7px 0 0; color: #177050; font-size: 8px; font-weight: 850; text-align: center; }

.club-account-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid #ddd2e4; border-radius: 15px; background: white; box-shadow: 0 8px 22px rgba(42,14,60,.05); }.club-account-banner > div { display: grid; gap: 3px; min-width: 0; flex: 1; }.club-account-banner strong { color: #271438; font-size: 10.5px; }.club-account-banner small { color: #7f7488; font-size: 7.5px; line-height: 1.45; }.club-account-banner > a, .club-account-banner > button { flex: 0 0 auto; min-height: 34px; padding: 0 13px; border: 0; border-radius: 10px; color: #29153c; background: #ffd409; cursor: pointer; font-size: 8px; font-weight: 900; text-decoration: none; display: inline-grid; place-items: center; }.club-account-banner.connected { border-color: #9ed8bf; background: #f3fbf7; }.club-account-banner.connected > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: white; background: #25956b; font-weight: 950; }.club-account-banner.connected > a { color: #5b248e; background: white; border: 1px solid #cdb6da; }.club-account-banner.loading { justify-content: center; color: #5b248e; }.club-account-error { margin: -8px 0 16px; padding: 10px 12px; border-radius: 10px; color: #992e46; background: #fff4f6; font-size: 8px; font-weight: 800; }.club-empty-state { margin: 0; padding: 17px; color: #8a7f91; font-size: 8.5px; text-align: center; }

.loyalty-legal-page { min-height: 100dvh; padding: 42px 16px; color: #2d1a3e; background: radial-gradient(circle at 8% 5%, rgba(127,46,165,.34), transparent 28rem), linear-gradient(145deg, #1a0a2c, #4b1d68); font-family: Arial, Helvetica, sans-serif; }.loyalty-legal-page > article { width: min(900px, 100%); margin: 0 auto; overflow: hidden; border-radius: 26px; background: #fbf9fc; box-shadow: 0 28px 80px rgba(10,3,18,.35); }.loyalty-legal-page header { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: center; padding: 28px 34px; color: white; background: linear-gradient(135deg, #2a1047, #702b99); }.loyalty-legal-page header > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px 18px 6px 18px; color: #2d153f; background: var(--yellow); font-size: 27px; font-weight: 950; }.loyalty-legal-page header small { color: #ffe865; font-size: 8px; font-weight: 950; letter-spacing: .15em; }.loyalty-legal-page h1 { margin: 6px 0 3px; font-size: clamp(27px, 5vw, 44px); letter-spacing: -.035em; }.loyalty-legal-page header p { margin: 0; color: rgba(255,255,255,.65); font-size: 9px; }.loyalty-legal-page section { padding: 22px 34px; border-top: 1px solid #e9e1ed; }.loyalty-legal-page section h2 { margin: 0 0 10px; font-size: 15px; }.loyalty-legal-page section p, .loyalty-legal-page section li, .loyalty-legal-page section dd { color: #6e6276; font-size: 10px; line-height: 1.68; }.loyalty-legal-page section p { margin: 8px 0; }.loyalty-legal-page section ul { display: grid; gap: 6px; margin: 0; padding-left: 19px; }.loyalty-legal-page section dl { display: grid; gap: 10px; margin: 0; }.loyalty-legal-page section dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 14px; padding: 10px; border-radius: 11px; background: white; }.loyalty-legal-page dt { color: #4b2567; font-size: 9px; font-weight: 900; }.loyalty-legal-page dd { margin: 0; }.loyalty-legal-page section a { color: #5b248e; font-weight: 850; }.loyalty-legal-page footer { display: flex; justify-content: space-between; gap: 12px; padding: 22px 34px 30px; border-top: 1px solid #e9e1ed; }.loyalty-legal-page footer a { color: #5b248e; font-size: 9px; font-weight: 900; text-decoration: none; }

.manage-page { min-height: 100dvh; padding: 38px 18px; color: #251533; background: radial-gradient(circle at 10% 10%, rgba(184,71,183,.28), transparent 34%), linear-gradient(145deg, #1d0b31, #542070 60%, #2c1247); font-family: Arial, Helvetica, sans-serif; }.manage-card { width: min(760px, 100%); margin: 0 auto; padding: 28px; border-radius: 26px; background: #fbf9fc; box-shadow: 0 28px 75px rgba(12,3,20,.32); }.manage-brand { display: flex; gap: 11px; align-items: center; }.manage-brand > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: #2b153e; background: #ffd409; font-size: 22px; font-weight: 950; }.manage-brand > div { display: grid; gap: 2px; }.manage-brand strong { font-size: 14px; letter-spacing: .08em; }.manage-brand small { color: #7f7188; font-size: 8px; letter-spacing: .13em; }.manage-heading { margin: 30px 0 20px; }.manage-heading > span { display: inline-flex; padding: 6px 9px; border-radius: 99px; color: #176346; background: #e5f6ee; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }.manage-heading h1 { margin: 9px 0 5px; font-size: clamp(26px, 6vw, 42px); }.manage-heading p { margin: 0; color: #786d80; font-size: 11px; line-height: 1.5; }.manage-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.manage-summary > div { display: grid; gap: 5px; padding: 15px; border: 1px solid #e3dbe8; border-radius: 14px; background: white; }.manage-summary span { color: #8c8193; font-size: 7.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }.manage-summary strong { font-size: 12px; }.manage-summary small { color: #756b7d; font-size: 8.5px; line-height: 1.4; }.manage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }.manage-actions button { min-height: 48px; border: 0; border-radius: 13px; color: #241238; background: #ffd409; cursor: pointer; font-size: 10px; font-weight: 900; }.manage-actions button.secondary { border: 1px solid #cfbfd9; color: #5b248e; background: white; }.manage-actions button:disabled { opacity: .45; cursor: not-allowed; }.manage-note { margin: 15px 0; padding: 13px; border-radius: 12px; color: #706478; background: #f2edf5; font-size: 8.5px; line-height: 1.55; }.manage-note a { color: #5b248e; font-weight: 850; }.manage-home { display: inline-flex; padding: 9px 0; color: #5b248e; font-size: 9px; font-weight: 900; text-decoration: none; }.manage-alert, .manage-loading { margin-top: 24px; padding: 16px; border-radius: 13px; color: #766a7e; background: #f1ecf4; font-size: 10px; }.manage-alert.error { color: #992e46; background: #fff1f4; }

@media (max-width: 640px) {
  .club-account-banner { align-items: flex-start; flex-wrap: wrap; }.club-account-banner > a, .club-account-banner > button { width: 100%; }.club-account-banner.connected > a { width: auto; margin-left: auto; }
  .manage-page { padding: 18px 10px; }.manage-card { padding: 20px 15px; border-radius: 21px; }.manage-summary, .manage-actions { grid-template-columns: 1fr; }
  .loyalty-legal-page { padding: 12px 8px; }.loyalty-legal-page > article { border-radius: 20px; }.loyalty-legal-page header, .loyalty-legal-page section, .loyalty-legal-page footer { padding-left: 18px; padding-right: 18px; }.loyalty-legal-page section dl > div { grid-template-columns: 1fr; gap: 4px; }.loyalty-legal-page footer { display: grid; }
}

/* Keep the two persistent launchers perfectly aligned. Their different icon
   and padding rules previously produced a two-pixel height mismatch on iOS. */
html body .all-content-trigger,
html body .assistant-launcher {
  height: 62px;
  min-height: 62px;
  max-height: 62px;
}

@media (max-width: 640px) {
  html body .all-content-trigger,
  html body .assistant-launcher {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding-block: 7px;
  }

  html body .kooglana-assistant.open .assistant-launcher {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }
}

/* ===============================================================
   RiNET T19-7 - v2b.css dodatak 1.0.2 - 20.08.2026
   Autor: Damir Radulic - RiNET <damir@rinet.one>
   Lokacija: FRONT /var/www/kooglana-clone/rodjendan-v2/v2b.css
   Svrha: gasi Codex "demo dock" traku - body:after je fixed bijeli
          pravokutnik (height 72px, rgba(255,255,255,.98), bottom
          calc(76px+safe-area), pointer-events:none) koji na mobitelu
          lebdi PREKO sadrzaja wizarda. Bio je podloga Codexovim demo
          launcherima kojih u nasoj integraciji nema.
          Footer se NE dira (1.0.1 je to probao i slomio
          ui_rez_v2_smoke socks checkbox -> vraceno).
   =============================================================== */
@media (width<=640px){ body:after{display:none!important} }

/* s25 24.08.2026 P0-B: mobilna dodirna zona min 44x44 (bilo 40) */
.counter-control button{min-width:44px;min-height:44px;width:44px;height:44px}

/* ═══════════════════════════════════════════════════════════════
   Fajl: v2b.css · dodatak KOOGL CHROME 1.0.1 · Datum: 24.08.2026
   Autor: Damir Radulić — RiNET <damir@rinet.one>
   Lokacija: FRONT /var/www/kooglana-clone/rodjendan-v2/v2b.css
   Svrha: s.26 opcija 1 — izjednacava GLOBALNI CHROME lasertaga s
          rodjendanom. Blizanac bloka KOOGL CHROME u
          rezervacija-v2/v2.css (bowling). Isti fajl sluzi
          rodjendan-v2 I lasertag (/rodjendan/v2b.css).
          Dira ISKLJUCIVO tipografiju zajednickih elemenata.
          NE dira tok, NE dira kartice, NE dira laser paletu
          (cyan/tamnoplava ostaje — odluka Damir 24.08., opcija 1).
   RODJENDAN OSTAJE NEPROMIJENJEN: sve vrijednosti ovdje jednake su
          onima koje rodjendan vec dobiva preko sloja
          .birthday-shell:not(.laser-shell) (specificnost 0,3,x >
          ovaj blok 0,1,x). Provjereno mjerenjem prije i poslije.
   Uzrok #1 (nav): P0-C (s25d) je neaktivne nav stavke dodao kao
          <a>, a CSS je pisan samo za button -> na rodjendanu i
          lasertagu su bile 16px/400 nestilizirane, aktivna 10px/850.
          Bowling ima sve <button> pa je bio jedini konzistentan.
          Ovdje <a> dobiva identican stil kao button.
   Zavisi od: — · Utjece na: rodjendan-v2 + lasertag
   Cron/Service: manual
   Rollback: obrisi ovaj blok ili vrati .bak_s26chrome_*
   ═══════════════════════════════════════════════════════════════ */

/* 1 · naslov ekrana — zakljucava clamp protiv media pravila 27px */
.screen h2,
.birthday-screen h2 { font-size: clamp(25px, 3vw, 34px); font-weight: 700; line-height: 1.14; }

/* 2 · lead ispod naslova: lasertag je bio 13px/1.6 */
.screen-lead { font-size: 14px; line-height: 1.55; }

/* 3 · progress meta ("Korak 1 od 8"): lasertag je bio 9px mob / 11px desk.
      1.0.1: specificnost dignuta na (0,2,0) jer
      @media(max-width:420px) .birthday-progress .progress-meta{9px}
      nadglasava golo .progress-meta bez obzira na redoslijed. */
.progress-meta,
.birthday-progress .progress-meta,
.laser-progress .progress-meta,
.progress-wrap .progress-meta { font-size: 12px; }

/* 4 · nav pilule — <a> dobiva PUNI stil buttona (P0-C regresija) */
.module-switch button,
.module-switch a {
  min-height: 29px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  color: rgba(255,255,255,.68);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.module-switch a.active,
.module-switch button.active { color: var(--purple-950); background: white; box-shadow: 0 4px 12px rgba(15,4,28,.13); }

/* 5 · jezicne pilule: lasertag je bio 8px mob / 9px desk */
.language-switch button { font-size: 10px; }

/* 6 · brand podnaslov i podnozje: lasertag je bio 7px mob / 9px desk */
.brand-city,
.page-footer,
.birthday-page-footer { font-size: 10px; }

/* 7 · footer akcije: rodjendan back 11px / primary 12px */
.booking-footer .back-button,
.birthday-footer .back-button,
.laser-footer .back-button { font-size: 11px; }
.booking-footer .primary-button,
.birthday-footer .primary-button,
.laser-footer .primary-button { font-size: 12px; }

/* 8 · mobilni: sve nav stavke jednake sirine (kao bowling) */
@media (max-width: 640px) {
  .header-actions .module-switch a,
  .module-switch a { flex: 1; min-width: 0; padding-inline: 8px; }
}

/* ═══ kraj KOOGL CHROME 1.0.1 ═══ */