/* Readability pass (Oct 2026), loaded last on every customer page, light and dark.
   Rules: nothing under 16px, one clear font (Poppins), and anything orange keeps the bright brand orange with bold
   dark navy writing (never a darker orange). Mint badges keep dark writing. This file has the final say,
   hence the !important on colours. */

/* Everything coloured orange: the bright brand orange, bold dark navy writing, in both modes */
:root {
  --cta: #ff8a2b;
  --candy: linear-gradient(180deg, #ffb35c 0%, #ff8a2b 55%, #ff7a1f 100%);
  --candy-hover: linear-gradient(180deg, #ffc077 0%, #ff9640 55%, #ff8429 100%);
}
html :is(.quick-pick, .kind-switch button[aria-pressed="true"], .day.picked, .wide[aria-pressed="true"], .chip[aria-pressed="true"],
  .ticket .band, .next-steps .n, .wc-go, .wide.slot .go, .age[aria-pressed="true"], .tabs button[aria-pressed="true"], .b-main, .b-orange,
  .tour-badge, .cp-ico, .hear, .jmap .card.now, .wide.slot.longer .tag, .skip, .btn-main, .steps .n, .score, .ts-score b) {
  background: var(--candy) !important; color: #14112e !important; text-shadow: none; font-weight: 700;
}
html :is(.quick-pick b, .kind-switch button[aria-pressed="true"] *, .day.picked *, .wide[aria-pressed="true"] *, .chip[aria-pressed="true"] *,
  .ticket .band *, .b-main *, .b-orange *, .tabs button[aria-pressed="true"] *, .score *, .tour-badge *, .wc-go *) { color: #14112e !important; }
html :is(.b-main, .b-orange, .btn-main):hover { background: var(--candy-hover) !important; }
/* the day on a "soonest free" card, a touch bigger; the time sits in a white pill with dark writing */
html .quick-pick b { font-size: 17px; font-weight: 700; }
html .quick-pick span { background: #fff !important; color: #1d1a3d !important; text-shadow: none; }
/* mint badges: dark writing */
html :is(.sd .df, .wc-free, .soon-btn[aria-expanded="true"]) { color: #1d1a3d !important; }

/* Calendar: fully booked days a stronger red, past and closed days still readable */
html:not([data-mode="dark"]) .cal-wrap.big .day.day-booked:disabled { color: #a8182b; }
html.silver:not([data-mode="dark"]) :is(.day-closed, .day-closed .dnum) { color: #75729a; }

/* Small green labels: a darker green on light backgrounds */
html.silver:not([data-mode="dark"]) .dh-kicker { color: #0b6b53; }

/* Quieter text is still clearly readable */
html:not([data-mode="dark"]) { --ink-muted: #4f4c70; }
html .b-text { font-size: 16px; }

/* Header: the website's links get their own row until there is room for them on one line, and wrap rather than scroll */
@media (max-width: 1199px) {
  html.silver .site-links { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 2px; }
  html.silver .site-links a { padding: 8px 12px; }
}

/* Step tabs on a phone: the words wrap onto two lines rather than run off the edge */
@media (max-width: 479px) {
  .steps2 { border-radius: 22px; }
  .steps2 > span { display: flex; align-items: center; justify-content: center; white-space: normal; line-height: 1.2; padding: 8px 4px; border-radius: 18px; }
}
html.silver:not([data-mode="dark"]) .steps2 > span.done { color: #0b6b53; }

/* On a phone the two-row header scrolls away instead of covering a third of the screen */
@media (max-width: 699px) { html.silver .wl-head { position: relative; top: 0; } }

/* Home page links: wrap onto a second line on narrower screens instead of scrolling out of sight */
@media (max-width: 979px) {
  .links { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 2px; }
}

/* Footer: more space between lines and links so it can be read and tapped */
.foot { line-height: 1.9; }
.foot-inner { gap: 12px !important; }
.foot a { display: inline-block; padding: 2px 4px; }
.foot .fine { opacity: 1 !important; }