/* WeBeyt 2.8.4. Shared visual layer; layout and operational status colours stay in their modules. */
@font-face{font-family:WeBeytJakarta;src:url('/fonts/PlusJakartaSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:WeBeytJakarta;src:url('/fonts/PlusJakartaSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{--wb-orange:var(--site-accent);--wb-orange-dark:var(--site-accent);--wb-orange-light:var(--site-tint);--wb-ink:var(--site-brand);--wb-muted:var(--site-muted);--wb-page:var(--site-tint);--wb-line:var(--site-tint);--wb-surface:var(--site-surface);--wb-shadow:0 5px 24px color-mix(in srgb,var(--site-brand) 3.53%,transparent);font-family:WeBeytJakarta,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--wb-ink);background:var(--wb-page)}
body{background:var(--wb-page);color:var(--wb-ink)}
button,input,select,textarea{font-family:inherit}
h1,h2,h3{color:var(--wb-ink);letter-spacing:-.025em}
input,select,textarea{border-color:var(--site-border);color:var(--wb-ink);background:var(--site-surface)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--wb-orange-dark);outline-offset:2px;border-color:var(--wb-orange)}
input[type=checkbox],input[type=radio]{accent-color:var(--wb-orange-dark)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--wb-orange-dark);outline-offset:3px}
button,.button,.btn{border-radius:10px;color:var(--wb-ink);border-color:var(--site-border)}
button:hover:not(:disabled),.button:hover,.btn:hover:not(:disabled){border-color:var(--wb-orange)}
a{color:var(--wb-orange-dark)}
.card,.panel,section.panel,.booking-row,.registration-box,.event-card{border-color:var(--wb-line);box-shadow:var(--wb-shadow);border-radius:14px;background:var(--wb-surface)}
.muted,.subtle,.field-hint,.event-description,.events-intro p,.recurrence-text{color:var(--wb-muted)}
.eyebrow,.category-label{color:var(--wb-orange-dark)}
.brand,.home-brand h1,.guest-shell .brand{color:var(--wb-ink)!important}
.brand span,.guest-shell .brand span{color:var(--wb-orange-dark)}
.btn.green,.btn.dark,.tile.primary,button.primary,.button.primary,.main-button{background:var(--wb-orange);border-color:var(--wb-orange);color:var(--wb-ink);font-weight:700;box-shadow:0 3px 9px color-mix(in srgb,var(--site-accent) 9.41%,transparent)}
.tile.primary small{color:var(--wb-ink)}
.btn.green:hover:not(:disabled),button.primary:hover:not(:disabled),.button.primary:hover,.main-button:hover:not(:disabled){background:var(--site-accent);border-color:var(--site-accent)}
.btn.red,button.danger,.button.danger{color:#a22b25;border-color:#e5b5ae;background:#fff1ef}
button.active:not(.navbtn),.filters button.active,.tool-tabs .active,.stepnav .active,.settingsnav .active{background:var(--wb-orange-light);border-color:var(--wb-orange);color:var(--wb-orange-dark)}
.sidebar{background:var(--wb-ink);color:var(--site-on-brand)}
.sidebar .brand{color:var(--site-on-brand)!important}.sidebar .brand span{color:var(--site-on-brand-accent)}
.navbtn{color:var(--site-on-brand);border:0;border-radius:10px}
.navbtn.active,.navbtn:hover{background:var(--site-brand);color:var(--site-on-brand);box-shadow:inset 3px 0 var(--wb-orange)}
.sidefoot{border-color:var(--site-brand);color:var(--site-on-brand)}
.bottomnav{background:var(--site-surface);border-color:var(--wb-line);box-shadow:0 -4px 18px color-mix(in srgb,var(--site-brand) 3.14%,transparent)}
.bottomnav button{color:var(--wb-muted)}
.bottomnav button.active{color:var(--wb-orange-dark);background:var(--wb-orange-light)}
.more-menu,.more-shade .more-menu{background:var(--site-surface);border-color:var(--wb-line)}
.more-link.active{background:var(--wb-orange-light);color:var(--wb-orange-dark)}
.settingsnav,.wizard-controls,.booking-wizard-actions{background:var(--wb-page)}
.home-main-actions .symbol{background:var(--wb-orange-light)}
.home-main-actions .tile.primary .symbol{background:color-mix(in srgb,var(--site-surface) 31.37%,transparent)}
.home-brand p{color:var(--wb-muted)}
.tile,.tablebtn,.take-product,.guest-product,.space{color:var(--wb-ink);border-color:var(--wb-line)}
.tile:hover,.tablebtn:hover,.product:hover,.take-product:hover,.guest-product:hover{border-color:var(--wb-orange);box-shadow:0 4px 16px color-mix(in srgb,var(--site-accent) 7.06%,transparent)}
.take-types button.active,.take-cats button.active,.take-tabs button.active,.category-tabs button.active,.space.selected{background:var(--wb-orange-light);border-color:var(--wb-orange);color:var(--wb-orange-dark)}
.take-order,.guest-cart{border-color:var(--site-surface)}
.take-product:active,.guest-product:active{background:var(--site-tint)}
.guest-product span,.guest-product small,.guest-intro p{color:var(--wb-orange-dark)}
.guest-head{border-color:var(--wb-line)}
.guest-shell .category{color:var(--wb-ink)}
.view-take .send-dock.take-send{background:var(--wb-orange);color:var(--wb-ink)}
.view-take .send-dock.take-send .btn{color:var(--wb-ink)}
.wizard-controls,.booking-wizard-controls{border-color:var(--wb-line)}
.calendar-head,.sectionheading{color:var(--wb-ink)}
/* Shared public events, enrolment and parent area. */
body[data-mode]{--green:var(--wb-orange-dark);--light:var(--wb-orange-light);--ink:var(--wb-ink)}
body[data-mode] header{border-color:var(--wb-line)}
body[data-mode] header nav a{color:var(--wb-ink);font-weight:700}
body[data-mode] header nav a:hover{color:var(--wb-orange-dark)}
.event-card{border-radius:14px}
.image-placeholder{background:linear-gradient(135deg,var(--site-tint),var(--site-tint));color:var(--wb-orange-dark)}
.image-price{background:var(--site-surface);color:var(--wb-ink)}
.category-label{background:var(--wb-orange-light);border-radius:5px;padding:4px 8px;display:inline-block}
.event-meta svg,.event-facts svg,.registration-date svg,.poster-link svg{color:var(--wb-orange-dark)}
.event-meta small,.event-meta p,.event-facts p{color:var(--wb-muted)}
.event-facts,.contact-section,.confirmation-ticket .ticket-facts{border-color:var(--wb-line)}
.registration-choice input:checked+span,.weekdays input:checked+span{background:var(--wb-orange-light);border-color:var(--wb-orange);color:var(--wb-orange-dark)}
.registration-date,.person,.summarybox,.confirmation-ticket,.receipt,.eligibility{background:var(--site-tint);border-color:var(--site-border);color:var(--wb-ink)}
.registration-total,.price-text,.metric{color:var(--wb-ink)}
.registration-box h2,.confirmation-page h1{color:var(--wb-ink)}
.mobile-register-bar{background:color-mix(in srgb,var(--site-tint) 96.08%,transparent);border-color:var(--wb-line)}
footer,.app-footer{color:var(--site-muted);border-color:var(--wb-line)}
#notice,#message,#toast{background:var(--wb-ink);color:var(--site-on-brand)}
/* Customer room booking. */
#public-booking header small,#public-booking p{color:var(--wb-muted)}
#public-booking .switch,#public-booking .top-actions button{color:var(--wb-orange-dark)}
#public-booking .space.selected{background:var(--wb-orange-light);border-color:var(--wb-orange)}
/* Status colours keep their operational meaning, independent of branding. */
.shift-card.running{background:#e7f8e9;border-color:#43aa62}.shift-card.running h2{color:#105d35}
.shift-card.running .btn{background:#187344;border-color:#187344;color:var(--site-on-brand)}
.availability:not(.few):not(.full){background:var(--site-tint);color:#226139}
.availability.few{background:#fff0ed;color:#a02d24}.availability.full{background:var(--site-background);color:var(--site-muted)}
.public-screen{background:#113e2c;color:var(--site-on-brand)}.public-screen h1,.public-screen h2,.public-screen h3{color:inherit}
.public-screen .public-header{border-color:var(--site-border)}.public-screen .brand{color:var(--site-on-brand)!important}
.public-screen .btn{background:var(--site-surface);color:var(--site-text);box-shadow:none}
.kitchen-flash{background:rgba(210,40,35,.68)}
@media(prefers-reduced-motion:no-preference){button,.button,.btn,.event-card{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}}
@media print{body{background:var(--site-surface)}a{color:var(--wb-ink)}.card,.panel{box-shadow:none}}
body{font-family:WeBeytJakarta,system-ui,-apple-system,'Segoe UI',sans-serif}
.take-kinds button.active{background:var(--wb-orange);border-color:var(--wb-orange);color:var(--wb-ink)}
.take-kinds button:not(.active){background:var(--site-surface);color:var(--wb-ink);border-color:var(--wb-line)}
.take-cart-mini{background:var(--site-tint);border-color:var(--site-border)}.take-cart-lines span{background:var(--site-tint);color:var(--wb-ink)}
.menu-group{border-color:var(--wb-line)}.menu-group>strong{color:var(--wb-muted)}
.guest-head .pill{background:var(--wb-orange-light);color:var(--wb-orange-dark)}
.booking-wizard-controls,.planning-head p{color:var(--wb-muted)}
/* 2.8.4: legibility, mobile course booking and recurrence controls. */
[hidden]{display:none!important}
.image-price{background:var(--site-surface)!important;color:var(--site-text)!important;border:2px solid var(--site-accent)!important;box-shadow:0 3px 12px #0003;font-weight:800;padding:9px 14px!important;border-radius:999px}
.price-text{display:inline-block;background:var(--site-tint);border:1px solid var(--site-accent);border-radius:999px;padding:8px 14px;font-weight:800;color:var(--site-accent-link)}
.take-table{background:var(--site-tint)!important;color:var(--site-accent-link)!important;border:1px solid var(--site-surface)}
.course-rule,.package-total{background:var(--site-tint);padding:16px;border-radius:12px}.package-total{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.course-context{color:var(--site-muted);line-height:1.6}
.grade-choices{display:flex;gap:8px;flex-wrap:wrap}.grade-choices label{background:var(--site-tint);padding:8px;border-radius:8px}
.editable-date{display:grid;grid-template-columns:110px minmax(160px,1fr) minmax(150px,1fr);align-items:center;gap:12px;border-bottom:1px solid var(--site-border);padding:10px 0}.editable-date label{margin:0}.date-clash{background:#fff0ee;padding:12px;border-radius:8px;color:#a12620}
.child-package,.parent-registration{border:1px solid var(--site-border);border-radius:12px;padding:14px;margin:12px 0}.child-package summary{font-weight:700;cursor:pointer;padding:8px 0}.course-slot{align-items:flex-start;border-bottom:1px solid var(--site-border);padding:12px 0}.course-slot span{line-height:1.7}.privacy-dialog{max-width:550px;border:0;border-radius:18px;padding:28px;line-height:1.7}.privacy-dialog::backdrop{background:color-mix(in srgb,var(--site-brand) 50.20%,transparent)}
.planning-filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.community-planning-row{padding:12px 16px!important;min-height:0!important}.community-planning-row .booking-families,.community-planning-row .booking-payments{display:none}
@media(max-width:600px){.editable-date{grid-template-columns:1fr}.grade-choices label{flex:1 0 100px}.parent-booking{padding:16px}.package-total span{display:block;width:100%}.course-slot{font-size:16px}.privacy-dialog{width:calc(100% - 32px);padding:20px}.parent-registration .actions{flex-wrap:wrap}}
/* 2.8.4: direct course calendar and unmistakable filters. */
header>a img,.with-logo img,.login-brand img{mix-blend-mode:multiply;background:transparent!important}
.course-detail-layout{display:block!important}.inline-course-booking{max-width:850px;margin:24px auto}.child-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.child-tabs button{flex:1;padding:12px}.child-tabs small{display:block;font-weight:400}.child-tabs .active{border:2px solid var(--site-accent);background:var(--site-tint)}.course-price-options{display:flex;gap:10px;flex-wrap:wrap;background:var(--site-tint);border-radius:12px;padding:14px;margin:14px 0}.course-price-options span{font-weight:600}.calendar-toolbar{display:flex;align-items:end;gap:8px;margin-bottom:12px}.calendar-toolbar label{flex:1;margin:0}.calendar-toolbar button{height:46px;padding:8px 16px}.course-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.course-calendar-grid .weekday{text-align:center;color:var(--site-muted);padding:6px}.calendar-day{min-height:64px;padding:7px 3px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--site-border)!important;background:var(--site-surface)!important;box-shadow:none!important;gap:3px}.calendar-day small{font-size:11px}.calendar-day:disabled{color:var(--site-muted);background:var(--site-background)!important;opacity:.7}.calendar-day.today{outline:2px solid var(--site-brand);outline-offset:-3px}.calendar-day.chosen{background:var(--site-accent)!important;border:2px solid var(--site-accent)!important;color:white!important}.calendar-day.focused:not(.chosen){outline:2px solid var(--site-accent);outline-offset:-3px}.calendar-day.full{color:#a12424;background:#ffe9e9!important}.mix-day-slots{margin:14px 0}.mix-day-slots button{display:flex;justify-content:space-between;gap:10px;width:100%;margin:8px 0}.mix-day-slots .chosen{background:var(--site-tint);border-color:var(--site-accent)}.selection-summary{padding:14px;background:var(--site-tint);border-radius:12px}.selection-summary summary{font-weight:700;cursor:pointer}.selection-summary>div{padding:12px 0;border-bottom:1px solid var(--site-border)}.selection-warning{color:#9b341d}.mix-book-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:var(--site-surface);margin-top:12px;position:sticky;bottom:12px;border:1px solid var(--site-border);border-radius:12px;box-shadow:0 4px 18px #0001;z-index:3}.payment-notice{background:var(--site-tint);border-left:3px solid var(--site-accent);padding:14px;line-height:1.6}.class-label{display:inline-block;font-weight:700;border:1px solid var(--site-surface);background:var(--site-tint);border-radius:999px;padding:4px 8px;margin:5px}.preview-dates-summary{display:flex;flex-wrap:wrap;gap:8px}.preview-dates-summary span{background:var(--site-tint);padding:6px;border-radius:6px}.planning-filters [aria-pressed=true]{border:3px solid var(--site-accent)!important;box-shadow:0 0 0 2px var(--site-surface)!important;background:var(--site-tint)!important;color:var(--site-accent-link)!important}.planning-resource-filter{max-width:400px;margin:12px 0}.package-overview{padding:12px 0;border-bottom:1px solid var(--site-border)}
@media(max-width:600px){.inline-course-booking{padding:14px}.calendar-day{min-height:58px}.calendar-day small{font-size:10px}.course-calendar-grid{gap:3px}.mix-book-controls{bottom:8px;flex-wrap:wrap}.mix-book-controls button{width:100%}.calendar-toolbar button{padding:8px 12px}.calendar-toolbar select{padding:8px;min-width:0}.child-tabs button{min-width:110px}.inline-course-booking input,.inline-course-booking select{font-size:16px!important}}
/* 2.8.5: fast public welcome, no loading overlay or change to staff screens. */
body[data-mode="public"] #community {animation:portal-arrive .28s ease-out both}
.portal-welcome{position:relative;overflow:hidden;padding:clamp(24px,4vw,54px);margin:0 0 28px;border-radius:28px;background:linear-gradient(115deg,#f8e9ed,var(--site-tint) 65%,var(--site-background));border:1px solid var(--site-border);isolation:isolate}
.portal-welcome h1{font-size:clamp(30px,4.6vw,58px);letter-spacing:-.055em;line-height:1.08;max-width:650px;margin:14px 0;color:var(--site-text)}
.portal-welcome p{font-size:clamp(16px,1.7vw,20px);max-width:560px;color:var(--site-muted);line-height:1.6;margin:0}
.welcome-orbit{position:absolute;z-index:-1;right:-25px;bottom:-110px;width:340px;height:340px;border:38px solid #cf759629;border-radius:50%;animation:portal-orbit .65s ease-out both}
body[data-mode="public"] .card{transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){body[data-mode="public"] .card:hover{transform:translateY(-3px);box-shadow:0 14px 32px color-mix(in srgb,var(--site-brand) 8.63%,transparent)}}
.event-share{margin-top:24px;padding-top:18px;border-top:1px solid var(--site-border)}
.share-dialog{width:min(480px,calc(100% - 32px));border:0;border-radius:24px;padding:24px;box-shadow:0 20px 80px #0003;color:var(--site-text)}
.share-dialog::backdrop{background:color-mix(in srgb,var(--site-brand) 40.00%,transparent)}.share-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.share-dialog input{width:100%;font-size:16px;box-sizing:border-box}.staff-entry{display:inline-block;margin-left:12px;color:inherit;font-size:11px;opacity:.7}
@keyframes portal-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes portal-orbit{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@media(max-width:600px){.portal-welcome{border-radius:22px;padding:26px 22px}.welcome-orbit{width:220px;height:220px;right:-75px;bottom:-130px}.share-options{grid-template-columns:1fr}.staff-entry{display:block;margin:8px 0 0}}
@media(prefers-reduced-motion:reduce){body[data-mode="public"] #community,.welcome-orbit{animation:none}body[data-mode="public"] .card{transition:none}body[data-mode="public"] .card:hover{transform:none}}
body[data-mode="public"] .event-card{transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){body[data-mode="public"] .event-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px color-mix(in srgb,var(--site-brand) 8.63%,transparent)}}
body[data-mode="public"] :is(button,a,input,select):focus-visible{outline:3px solid var(--site-accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){body[data-mode="public"] .event-card{transition:none}body[data-mode="public"] .event-card:hover{transform:none}}