/* "Fresh" look for the customer pages (Oct 2026): same layout and journey, a more modern finish.
   Still fun, never corporate: a richer night sky with soft colour glows, glossy candy buttons, soft-edged cards
   instead of thick black outlines, and a brighter calendar. Loaded after wonderland.css and the page's own styles. */
:root {
  --navy: #06071a; --navy-2: #0f1130; --navy-3: #181b42; --navy-4: #14163a; --navy-line: rgba(255, 255, 255, .16);
  --ink: #1d1a3d; --ink-muted: #6b6890;
  --orange: #ff8a2b; --orange-2: #ffab5e; --orange-deep: #c2560a;
  --mint: #5fe0c0; --mint-2: #a5f0dd; --mint-soft: #e6fbf5;
  --pink: #ff5fa2; --sky: #59b8ff; --sun: #ffd23f;
  --on-navy: #ffffff; --on-navy-muted: #b7b9d4;
  --candy: linear-gradient(180deg, #ffb35c 0%, #ff8a2b 55%, #ff6a1a 100%);
  --candy-hover: linear-gradient(180deg, #ffc077 0%, #ff9640 55%, #ff7426 100%);
  --mint-candy: linear-gradient(180deg, #8ff0d6 0%, #5fe0c0 100%);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -18px rgba(5, 3, 40, .55), 0 2px 6px rgba(5, 3, 40, .18);
  --lift: 0 10px 30px -14px rgba(5, 3, 40, .6);
  --lift-sm: 0 6px 16px -8px rgba(5, 3, 40, .5);
  --lift-orange: 0 14px 30px -12px rgba(255, 122, 30, .65);
  --lift-sm-orange: 0 8px 18px -10px rgba(255, 122, 30, .7);
  --lift-mint: 0 14px 30px -14px rgba(95, 224, 192, .55);
  --lift-sm-mint: 0 6px 16px -8px rgba(95, 224, 192, .55);
  --glow-cta: 0 14px 30px -10px rgba(255, 110, 20, .75), 0 0 0 4px rgba(255, 138, 43, .16);
  --glow-cta-hover: 0 18px 36px -10px rgba(255, 110, 20, .85), 0 0 0 6px rgba(255, 138, 43, .2);
  --press: inset 0 -4px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .45);
}

/* The sky: a deep midnight navy, almost black, with one soft warm glow at the top. Calm and grown-up;
   the colour comes from the cards and buttons, not the background. The checkerboard floor and suits stay, very faint. */
body { background:
  radial-gradient(90% 55% at 50% -12%, rgba(255, 150, 70, .13), transparent 62%),
  radial-gradient(60% 40% at 100% 100%, rgba(95, 224, 192, .05), transparent 70%),
  linear-gradient(180deg, #11132f 0%, #0a0c24 45%, #06071a 100%) fixed; }
.floor { opacity: .05; }
.suit-deco { opacity: .28; }

/* Header */
.wl-head .logo { transform: rotate(-3deg); }
.wl-head .logo img { border-radius: 12px; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6); }
.wl-head .title { letter-spacing: -.01em; }
.pill-out { border: 0; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.pill-out:hover { background: rgba(255, 255, 255, .2); }

/* Step tabs: a soft segmented bar */
.steps2 { gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.steps2 > span { border: 0; border-radius: 999px; padding: 7px 4px; }
.steps2 > span.on { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); }
.steps2 > span.done { color: var(--mint); background: rgba(95, 224, 192, .12); }

/* Cards: white, soft edged, gently lifted (no thick black outline) */
.card-ink, .cal-wrap, .speech, .jbar, .ticket { border: 0; box-shadow: var(--card-shadow); }
.card-ink { border-radius: 24px; }
.cal-wrap, .cal-wrap.big { border-radius: 26px; box-shadow: var(--card-shadow); }
.speech { border-radius: 22px 22px 22px 8px; transform: rotate(.5deg); }
.rabbit-card { border: 0; background: linear-gradient(160deg, #23264f, #12142f); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .25); border-radius: 18px; }
.tilt-l { transform: rotate(-.6deg); } .tilt-r { transform: rotate(.6deg); }

/* Buttons: glossy candy, rounder, they lift on hover and squish when pressed */
.b { border: 0; background: #fff; box-shadow: var(--lift-sm), inset 0 0 0 2px rgba(29, 26, 61, .12); transition: transform .12s var(--ease), box-shadow .12s, filter .12s; }
.b:hover { transform: translateY(-1px); }
.b:active { transform: translateY(2px) scale(.99); box-shadow: var(--lift-sm), inset 0 0 0 2px rgba(29, 26, 61, .12); }
.b-main, .b-orange { background: var(--candy); color: #fff; box-shadow: var(--glow-cta), var(--press); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.b-main:hover, .b-orange:hover { background: var(--candy-hover); box-shadow: var(--glow-cta-hover), var(--press); color: #fff; }
.b-main:active, .b-orange:active { box-shadow: var(--lift-sm-orange), inset 0 3px 6px rgba(0, 0, 0, .15); }
.b-purple { background: linear-gradient(180deg, #a34dff, #6d28d9); box-shadow: 0 14px 30px -12px rgba(140, 60, 240, .7), var(--press); }
.b:disabled, .b[aria-disabled="true"] { background: rgba(255, 255, 255, .55); color: var(--ink-muted); box-shadow: none; text-shadow: none; transform: none; filter: saturate(.4); }
.hear { border: 0; background: var(--candy); box-shadow: var(--lift-sm-orange); }
.b-text { text-underline-offset: 3px; }

/* Chips */
.chip { border: 0; background: #fff; box-shadow: var(--lift-sm), inset 0 0 0 2px rgba(29, 26, 61, .1); transition: transform .12s var(--ease), background .12s; }
.chip:hover { transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--candy); color: #fff; box-shadow: var(--lift-sm-orange), var(--press); }
.chips.filt .chip, .yours .chip { box-shadow: var(--lift-sm), inset 0 0 0 2px rgba(29, 26, 61, .1); }

/* Wide choice pills (times): glassy on the night sky, candy when picked */
.wide { border: 0; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(95, 224, 192, .55), var(--lift-sm); backdrop-filter: blur(6px); transition: transform .12s var(--ease), background .12s; }
.wide:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.wide[aria-pressed="true"] { background: var(--candy); color: #fff; box-shadow: var(--glow-cta), var(--press); }

/* Soonest free weekends */
.quick-pick { border: 0; background: var(--candy); box-shadow: var(--lift-orange), var(--press); border-radius: 20px; transition: transform .12s var(--ease); }
.quick-pick:hover { transform: translateY(-2px); }
.quick-pick:active { transform: translateY(2px); box-shadow: var(--lift-sm-orange), inset 0 3px 6px rgba(0, 0, 0, .15); }

/* Calendar: bright tiles, no grey boxes */
.cal-head h3 { font-size: 20px; }
.cal-head button { border: 0; background: var(--mint-soft); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(29, 26, 61, .08); transition: background .12s, transform .12s; }
.cal-head button:hover:not(:disabled) { background: var(--mint-2); transform: scale(1.05); }
.cal .dow { color: #9a97bd; letter-spacing: .04em; }
.day { border: 0; border-radius: 14px; background: #f4f3fb; color: #b4b1cf; transition: transform .1s var(--ease), box-shadow .1s, background .1s; }
.day-blank { background: transparent; }
.day-closed { background: transparent; border: 0; color: #cfcde3; }
.day-available { background: linear-gradient(180deg, #effdf8, #d5f7ec); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(95, 224, 192, .75); }
.day-available:hover { background: var(--mint-candy); transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(40, 170, 140, .8); }
.day .dfree { color: #138a6c; }
.cal-wrap.big .day.day-booked:disabled { background: #fff0f2; border: 0; box-shadow: inset 0 0 0 2px #ffc9d1; color: #d33a4d; }
.day.picked, .day.picked:hover { background: var(--candy); color: #fff; box-shadow: 0 8px 18px -8px rgba(255, 110, 20, .9), inset 0 0 0 2px rgba(255, 255, 255, .5); transform: translateY(-2px); }
.cal-key i { border-radius: 5px; border: 0; }
.cal-key .k-free { background: #d5f7ec; box-shadow: inset 0 0 0 2px rgba(95, 224, 192, .75); }
.cal-key .k-booked { background: #fff0f2; box-shadow: inset 0 0 0 2px #ffc9d1; }

/* Date strip */
.sd { border: 0; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); border-radius: 18px; }
.sd.we { box-shadow: inset 0 0 0 2px rgba(95, 224, 192, .6); }
.sd .df { background: var(--mint-candy); }
.sd[aria-selected="true"] { background: #fff; box-shadow: var(--glow-cta); }

/* Form fields: soft, with a bright focus ring */
.f input, .f textarea, .f select, .yours .inp { border: 0; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(29, 26, 61, .14), 0 2px 0 rgba(255, 255, 255, .06); transition: box-shadow .12s; }
.f input:focus, .f textarea:focus, .f select:focus, .yours .inp:focus { outline: none; box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 5px rgba(255, 138, 43, .25); }
.check input { accent-color: var(--orange); }

/* Counters and steppers */
.counter .step, .stepper button, .jbar .back, .age { border: 0; background: #fff; box-shadow: var(--lift-sm), inset 0 0 0 2px rgba(29, 26, 61, .12); }
.counter .big { border: 0; box-shadow: var(--lift-orange), inset 0 0 0 4px rgba(255, 138, 43, .5); }
.age[aria-pressed="true"] { background: var(--candy); box-shadow: var(--lift-sm-orange), var(--press); }
.sl-track { border: 0; background: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); }
.sl-fill { border: 0; background: var(--candy); }
.sl-thumb { border: 0; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(29, 26, 61, .15); }

/* Pay options */
.pay-opt { border: 0; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.pay-opt[aria-pressed="true"] { background: #fff; box-shadow: var(--glow-cta); }

/* The bottom bar: frosted */
.jbar { background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border-radius: 24px; }

/* Booked: the golden ticket */
.ticket { border-radius: 24px; transform: rotate(-1deg); }
.ticket .band { background: var(--candy); border-bottom: 2px dashed rgba(42, 19, 0, .35); }
.golden .rabbit-card.big { border: 0; box-shadow: var(--glow-cta); }
.next-steps .n { background: var(--candy); color: #fff; box-shadow: var(--lift-sm-orange); }

/* Little touches */
.note-box { border: 0; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.wait-nudge { border: 0; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); }
.wait-nudge:hover { box-shadow: inset 0 0 0 2px var(--orange); }
.sticker { border-width: 1.5px; }

@media (prefers-reduced-motion: reduce) {
  .b, .chip, .wide, .quick-pick, .day, .cal-head button { transition: none; }
  .b:hover, .chip:hover, .wide:hover, .quick-pick:hover, .day-available:hover, .day.picked { transform: none; }
}

/* Boxes further down the page: cancellation list, photos, 360 tour, auctions, pop-ups */
.wait-card { border: 0; background: linear-gradient(180deg, #f0fdf9, #dcf8ef); box-shadow: var(--card-shadow); border-radius: 24px; }
.wc-free { border: 0; background: var(--mint-candy); }
.wc-go { border: 0; background: var(--candy); color: #fff; box-shadow: var(--lift-sm-orange), var(--press); }
.photo, .photo.tour { border: 0; border-radius: 22px; box-shadow: var(--card-shadow); }
.photo.tour { box-shadow: var(--card-shadow), 0 0 0 3px rgba(255, 138, 43, .55); }
.tour-badge { border: 0; background: var(--candy); color: #fff; box-shadow: var(--glow-cta), var(--press); }
.ls-photo { border-bottom: 0; }
.au-banner { border: 0; box-shadow: var(--card-shadow); }
.au-date, .au-go { border: 0; }
.toast { border: 0; box-shadow: var(--lift); }
.toast-bad { box-shadow: inset 0 0 0 2px var(--bad), var(--lift); }
.wa-round { border: 0; box-shadow: 0 8px 18px -8px rgba(37, 211, 102, .8), inset 0 -3px 0 rgba(0, 0, 0, .12); }
dialog.modal { border: 0; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.jbar .back, .jbar .souv .v { border: 0; box-shadow: inset 0 0 0 2px rgba(29, 26, 61, .14); }
.jmap .card.now { border: 0; background: var(--candy); }

/* Free times: bright white tickets you want to tap, price and arrow in orange */
.wide.slot { background: #fff; color: var(--ink); box-shadow: var(--card-shadow); backdrop-filter: none; }
.wide.slot:hover { background: #fff; box-shadow: var(--card-shadow), 0 0 0 3px rgba(255, 138, 43, .6); }
.wide.slot .side { color: var(--orange-deep); }
.wide.slot .go { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--candy); color: #fff; font-size: 22px; box-shadow: var(--lift-sm-orange); }
.kind-switch button[aria-pressed="true"] { background: var(--candy); box-shadow: var(--lift-sm-orange), var(--press); }