/* "Silver" look (Oct 2026, the booking page's look): a light pearl-silver sky with a soft iridescent glow, dark ink text,
   the same orange candy buttons and white cards. Applies when <html class="silver">. */
html.silver {
  --on-navy: #1d1a3d; --on-navy-muted: #5d6080;
  --navy-line: rgba(29, 26, 61, .14);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 20px 44px -22px rgba(60, 64, 110, .45), 0 2px 8px rgba(60, 64, 110, .1);
  --lift: 0 10px 28px -14px rgba(60, 64, 110, .45);
  --lift-sm: 0 6px 16px -8px rgba(60, 64, 110, .4);
  background: #eceef5;
  color-scheme: light;
}
html.silver body { color: var(--on-navy); background:
  radial-gradient(70% 45% at 15% -5%, rgba(255, 190, 140, .45), transparent 65%),
  radial-gradient(60% 40% at 95% 10%, rgba(185, 175, 255, .38), transparent 65%),
  radial-gradient(70% 50% at 50% 105%, rgba(150, 230, 210, .35), transparent 65%),
  linear-gradient(180deg, #f7f8fc 0%, #e9ebf3 55%, #dfe2ec 100%) fixed; }
/* a slow shimmer across the sky, like light on silver */
html.silver .night::before { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 60%); animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { transform: translateX(-30%); opacity: .0; } 40%, 60% { opacity: 1; } 50% { transform: translateX(30%); } }
html.silver .floor { opacity: .06; background-image: conic-gradient(#3a3f6a 25%, transparent 0 50%, #3a3f6a 0 75%, transparent 0); }
html.silver .suit-deco { opacity: .18; }
html.silver a { color: var(--orange-deep); }

/* text that was white on the night sky */
html.silver .wl-head .title, html.silver .golden h1, html.silver .golden .ticket-h, html.silver .times-hint b, html.silver .th-inc > b,
html.silver .th-inc .inc strong, html.silver .dh-step b, html.silver .d-hero h2, html.silver .jbody .lbl, html.silver .times-head { color: var(--ink); }
html.silver .wl-foot, html.silver .muted, html.silver .jbody .lead { color: var(--on-navy-muted); }
html.silver .wl-foot a { color: var(--ink); }

/* glassy pieces become frosted white */
html.silver .pill-out, html.silver .steps2, html.silver .sd, html.silver .pay-opt, html.silver .note-box, html.silver .wait-nudge, html.silver .wide:not(.slot) {
  background: rgba(255, 255, 255, .6); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(29, 26, 61, .1), var(--lift-sm); backdrop-filter: blur(10px); }
html.silver .steps2 > span { color: var(--on-navy-muted); }
html.silver .steps2 > span.on { background: var(--ink); color: #fff; }
html.silver .steps2 > span.done { color: #138a6c; background: rgba(95, 224, 192, .2); }
html.silver .rabbit-card { background: linear-gradient(160deg, #ffffff, #dfe3ef); box-shadow: var(--card-shadow); }
html.silver .wl-head .logo img { box-shadow: 0 8px 18px -8px rgba(30, 30, 60, .5); }
html.silver .b-text { color: var(--on-navy-muted); }
html.silver .longer, html.silver [class*="longer"] { color: var(--ink); }
html.silver .dh-tour { color: var(--ink); }
html.silver .call-pill:hover { color: var(--ink); background: #fff; }
html.silver .wide.slot.longer { box-shadow: var(--card-shadow), inset 0 0 0 2px rgba(255, 138, 43, .6); }
html.silver .kind-switch { background: rgba(255, 255, 255, .65); box-shadow: inset 0 0 0 1.5px rgba(29, 26, 61, .1), var(--lift-sm); }
html.silver .kind-switch button { color: var(--ink); }
/* the big welcome on computers: dark words on the silver, not white */
html.silver .dh-kicker { color: #138a6c; }
html.silver .dh-facts li { color: var(--ink); }
html.silver .d-hero h2 span { color: var(--orange-deep); }
html.silver .cal .dow { color: #6f6c96; }
html.silver .day-closed, html.silver .day-closed .dnum { color: #a9a6c6; }
html.silver .suit-deco { color: #6f6c96 !important; }
/* buttons that are links keep their own dark writing (not the orange link colour) */
html.silver a.b, html.silver a.b:hover { color: var(--ink); }
html.silver a.b-main, html.silver a.b-orange, html.silver a.b-main:hover, html.silver a.b-orange:hover { color: #fff; }
html.silver .b-purple, html.silver .b-purple:hover { color: #fff; }

/* ---- The booking pages wear the website's clothes: the same top bar, sky, checkerboard and footer ---- */
html.silver .sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html.silver .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; animation: drift 24s ease-in-out infinite alternate; }
html.silver .b1 { width: 55vw; height: 55vw; left: -15vw; top: -20vw; background: #ffc59a; }
html.silver .b2 { width: 48vw; height: 48vw; right: -16vw; top: 30vh; background: #c3b9ff; animation-delay: -8s; }
html.silver .b3 { width: 60vw; height: 60vw; left: 15vw; bottom: -32vw; background: #b2f0e0; animation-delay: -16s; }
@keyframes drift { to { transform: translate(5vw, 4vh) scale(1.08); } }
html.silver .night::before, html.silver .floor { display: none; }
/* the top bar: a frosted pill that stays put, like the website's */
html.silver .wl-head { position: sticky; top: 10px; z-index: 30; width: min(1200px, calc(100% - 20px)); margin: 10px auto 0; padding: 8px 10px 8px 14px; gap: 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 14px 34px -18px rgba(45, 50, 100, .45); }
html.silver .wl-head .logo { transform: none; }
html.silver .wl-head .logo img { height: 36px; border-radius: 10px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
html.silver .wl-head .title { font-size: 18px; }
html.silver .site-links { display: none; gap: 2px; }
html.silver .site-links a { padding: 8px 12px; border-radius: 999px; color: #3d3a62; font: 600 16px var(--body); text-decoration: none; }
html.silver .site-links a:hover { background: rgba(29, 26, 61, .06); color: var(--ink); }
@media (min-width: 1200px) { html.silver .site-links { display: flex; } html.silver .wl-head .title { flex-grow: 0; } }
/* the footer: same as the website */
html.silver .book-rules { position: relative; z-index: 1; width: min(560px, calc(100% - 32px)); margin: 28px auto 18px; text-align: center; font-size: 16px; color: var(--on-navy-muted); }
html.silver .checker { position: relative; z-index: 1; height: 26px; background: conic-gradient(#1d1a3d 25%, #fff 0 50%, #1d1a3d 0 75%, #fff 0) 0 0 / 26px 26px; opacity: .9; }
html.silver .foot { position: relative; z-index: 1; padding: 44px 16px 60px; background: #1d1a3d; color: #c9c6ee; text-align: center; font-size: 16px; }
html.silver .foot-inner { display: grid; gap: 6px; justify-items: center; width: min(1200px, 100%); margin: 0 auto; }
html.silver .foot p { margin: 0; }
html.silver .foot a, html.silver .foot b { color: #fff; }
html.silver .foot-logo { height: 46px; width: auto; border-radius: 10px; margin-bottom: 10px; }
html.silver .foot .fine { margin-top: 10px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { html.silver .blob { animation: none; } }
/* other customer pages: headings and words that were white on the night sky */
html.silver .lv-hero h1, html.silver .lv-facts b, html.silver .lv-calc, html.silver .au-intro h1, html.silver .au-empty .big,
html.silver .au-sold h2, html.silver .au-how h2, html.silver .pt-section-title, html.silver #foot-links a, html.silver #foot-links button { color: var(--ink); }
html.silver .lv-kicker { color: #138a6c; }
html.silver .lv-hero h1 span { color: var(--orange-deep); }
html.silver .lv-calc { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(29, 26, 61, .1); }
html.silver .lv-wa, html.silver .lv-wa:hover { color: var(--ink); }
html.silver .wl-head .title { color: var(--ink); }
/* the big welcome on computers: the same soft photo frame and buttons as the website */
html.silver .dh-pic > img { border: 6px solid #fff; border-radius: 26px; box-shadow: 0 30px 60px -30px rgba(20, 16, 60, .7); }
html.silver .call-pill.desk-only { background: rgba(255, 255, 255, .75); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px rgba(29, 26, 61, .12); }
html.silver .call-pill .cp-ico { background: var(--candy); color: #fff; }
html.silver .call-pill small { color: var(--on-navy-muted); }
html.silver .times-hint { background: rgba(255, 255, 255, .7); border: 0; box-shadow: inset 0 0 0 1.5px rgba(29, 26, 61, .1); }
/* the top bar on every page: "Book a party" always there, a row of links on phones, crisp WhatsApp button */
html.silver .site-links .nl-book { color: var(--orange-deep); font-weight: 700; }
html.silver .wa-round { background: #25d366; color: #fff; box-shadow: 0 6px 14px -6px rgba(20, 150, 70, .8), inset 0 -3px 0 rgba(0, 0, 0, .14); }
@media (max-width: 1199px) {
  html.silver .wl-head { flex-wrap: wrap; border-radius: 24px; row-gap: 6px; }
  html.silver .site-links { display: flex; flex-wrap: nowrap; justify-content: flex-start; order: 3; width: 100%; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 4px; border-top: 1px solid rgba(29, 26, 61, .1); }
  html.silver .site-links::-webkit-scrollbar { display: none; }
  html.silver .site-links a { flex: none; padding: 7px 12px; font-size: 16px; }
}
html.silver .portal-foot-links { position: relative; z-index: 1; width: min(560px, calc(100% - 32px)); margin: 24px auto 18px; text-align: center; font-size: 16px; }
/* the top bar on booking pages: just the website's links and WhatsApp, so it stays on one line */
html.silver .wl-head nav .pill-out:not(.au-link):not(.back-btn) { display: none; }
@media (max-width: 1299px) { html.silver .wl-head .call-pill.desk-only { display: none; } }
/* party page "Want any extras?": dark words on white, easy to read */
html.silver .nudge, html.silver a.nudge, html.silver a.nudge:hover { background: #fff; color: var(--ink); border: 0; box-shadow: inset 0 0 0 2px rgba(29, 26, 61, .1), inset 6px 0 0 var(--orange), var(--lift-sm); }
html.silver .nudge .txt span { color: var(--on-navy-muted); opacity: 1; }
html.silver .nudge .chev { color: var(--orange-deep); }
/* Oct 2026 audit: the note under a time (another hire type that day) reads dark on the white slot card */
html.silver .wide.slot .slot-note { color: var(--ink-muted); }
/* phones: the floating card suits drifted over the words on the details step, so they only show on wider screens */
@media (max-width: 699px) { html.silver .suit-deco { display: none; } }