/* landing_2.css */

/* Site font - Dosis, matching the original site (static/css/style.css) */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

/* ================================================================================================================
   THEME - EDIT HERE
   The whole landing_2 palette lives in these primitives, matching the original site (static/css/style.css).
   To retheme the site, change these values (and the @import above for the font) - everything else derives
   from them through the semantic variables in the Base block below, which say what each colour is used FOR.
   The dark palette lives in the DARK THEME block at the bottom of this file (applied when the navbar toggle
   or the device preference sets data-theme="dark" - see theme_init()).
   ============================================================================================================= */
:root{
  --theme-yellow:#ffd700;      /* original site --color-2 (gold accents) */
  --theme-blue:#00a6ed;        /* original site --color-1 (primary) */
  --theme-light-blue:#E9FBFF;  /* original site --color-3 (panels) */
  --theme-black:#000000;       /* original site --color-0 (text, nav bar) */
  --theme-white:#ffffff;       /* page background */
  --font-family:'Dosis', sans-serif;
}

/* ========== Base ========== */
:root{
  /* Declare our own scheme so mobile browsers (Chrome/WebView "force-dark") don't
     algorithmically darken our light theme and mangle the colours. We ship our own
     dark palette via data-theme="dark" below, so the browser should never auto-invert. */
  color-scheme: light;

  /* Semantic variables - each one names what the theme primitives are used for */
  --bg:var(--theme-white);          /* page background */
  --panel:var(--theme-light-blue);  /* card/panel background */
  --text:var(--theme-black);        /* body text */
  --muted:#47555c;                  /* muted secondary text (softened --theme-black) */
  --brand:var(--theme-blue);        /* general accent / primary */
  --good:#1f9d57;                   /* savings / positive (deliberately stays green, off-theme) */
  --regal:var(--theme-blue);        /* premium accent folds into brand blue */
  --gold:var(--theme-yellow);       /* gold accent */
  --pop:var(--theme-blue);          /* pop accent folds into brand blue */
  --border:#cdeef7;                 /* soft border (a tint of --theme-light-blue) */
  --radius:16px;
  --maxw:90vw;
  --shadow:0 10px 28px rgba(0,0,0,.10);
  --lock-scale: 0.9; /* 1 = default, <1 smaller, >1 larger */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:16px/1.55 var(--font-family);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);overflow:hidden}

/* ========== Layout ========== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:28px 18px}
.section{padding-top: 0; padding-bottom:36px; padding-left: 0; padding-right: 0;}
.section__title{margin:0 0 16px;font-size:24px;letter-spacing:.2px}

/* ========== Landing intro + signoff ========== */
.landing-intro{margin:0 0 20px}
.landing-intro__title{margin:0 0 4px;font-size:28px;letter-spacing:.2px}
.landing-intro__sub{margin:0;color:var(--muted);font-size:17px}
.landing-signoff{margin:14px 0 0;color:var(--muted);font-weight:700}

/* ========== Grid / Cards ========== */
.grid{
  columns: 28vw;           /* desired column width */
  column-gap: 16px;
}
.card{
  break-inside: avoid;
  display: inline-block;    /* so cards respect column width */
  width: 100%;
  margin: 0 0 16px;
}
.how-block{
  break-inside: avoid;
  display: inline-block;    /* flows like a card when .grid uses columns */
  width: 100%;
  margin: 0 0 16px;
}
/* Homepage grid: pin the deal tiles to the top row, with How it works
   beside the tall search tile underneath */
@media (min-width: 901px){
  .grid--home{
    display:grid;
    /* 6 tracks: deal tiles span 2 each (thirds), how/search span 3 each (halves) */
    grid-template-columns:repeat(6,1fr);
    gap:16px;
    grid-template-areas:
      "direct direct bargains bargains multi multi"
      "how    how    how      search   search search";
  }
  .grid--home > *{ margin:0; }
  .grid--home .card--pop{ grid-area:direct; }
  .grid--home .card--sky{ grid-area:bargains; }
  .grid--home .card--two{ grid-area:multi; }
  .grid--home .card--search{ grid-area:search; }
  .grid--home .how-block{ grid-area:how; }
  /* Stack the steps so they fill the space beside the search form */
  .grid--home .steps{ grid-template-columns:1fr; }
}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:160px;
  padding:18px;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(0,0,0,.22) }
.card__title{ margin:0 0 6px; font-size:22px }
.card__meta{ margin:0; color:var(--muted) }

/* ================= Badges (self-arranging, right → left, then wrap) ================= */
.badges{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;   /* anchor to right edge */
  align-items:flex-start;
  gap:6px;                    /* both row + column spacing */
  max-width:calc(100% - 24px);
  z-index:2;
  pointer-events:none;        /* card remains clickable */
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:12px;
  line-height:1;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
  pointer-events:auto;        /* badge itself can be clicked */
}

/* Info badge - glassy white so it reads cleanly on the coloured card skins */
.badge--deal{
  background:rgba(255,255,255,.20);
  color:#fff;
  border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(2px);
  font-weight:600;
}

/* Lock badge (small icon chip) */
.badge--lock{
  padding:4px;                /* icon-only chip */
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.15);
  color:#111;
}
.badge--lock svg{ width:14px; height:14px; display:block; }

/* Optional: “new”, “beta”, etc. - solid white chip that pops on the coloured skins */
.badge--neutral{
  background:#ffffff;
  color:#0a5a86;
  border-color:transparent;
  font-weight:700;
}

/* ================= Select dropdowns (Choices.js) ================= */
/* Choices ships its open dropdown with z-index 1 (its --choices-z-index default), which loses to
   the tile chrome above (badges z-index 2-4, carousel dots 3). Lift open menus above all of it,
   but below the navbar (z-index 100). */
:root{ --choices-z-index: 50; }
.choices.is-open{ z-index: 50; }
/* Choices' filter input and dropdown items ship at 14px - under 16px, iOS auto-zooms the page
   when the visitor taps to type in the From/To search field */
:root{ --choices-font-size-md: 16px; }

/* ========================================================================================
   CARD SKINS - bold, on-brand gradient tiles: a blue family + a gold flagship, with a purple
   membership-style premium tile for multi-destination. Colours are hardcoded so each skin reads
   the same in light and dark themes (the dark block below only tweaks the search form + steps).
   ======================================================================================== */

/* Flagship cheapest / hottest deals (Under £30, 66%+ off) - GOLD, dark ink, faint brand-blue glow */
.card--pop{
  background:
    radial-gradient(240px 120px at 88% 0%, rgba(0,166,237,.30), transparent 60%),
    linear-gradient(150deg, #ffe27a 0%, #ffd700 50%, #f4b400 100%);
  border:1px solid rgba(0,0,0,.12);
}
.card--pop .card__title{ color:#3a2f00; }
.card--pop .card__meta{ color:#7a6200; }
.card--pop .badge--deal{ background:rgba(0,0,0,.16); color:#3a2f00; border-color:rgba(0,0,0,.22); }

/* Under £50 - bright BRAND BLUE */
.card--sky{
  background:linear-gradient(150deg, #39c0f0 0%, #00a6ed 55%, #0587c2 100%);
  border:1px solid rgba(255,255,255,.22);
}

/* Under £70 - deep TEAL (a distinct third blue in the family) */
.card--good{
  background:linear-gradient(150deg, #17b8b0 0%, #0a8ba6 55%, #076d90 100%);
  border:1px solid rgba(255,255,255,.20);
}

/* 40%+ off + two-destination - royal INDIGO blue with the route motif */
.card--two{
  background:linear-gradient(150deg, #2384db 0%, #0f5cb0 55%, #0e4a93 100%);
  border:1px solid rgba(255,255,255,.20);
  overflow:hidden;
}
.card--two .route{ position:absolute; left:8px; right:8px; top:8px; height:60px; }
.route__line{ fill:none; stroke:rgba(255,255,255,.75); stroke-width:2.5; stroke-dasharray:6 6; }
.route__dot{ fill:#ffd700; }

/* Shared: light title/meta for the coloured (non-gold) skins */
.card--sky, .card--good, .card--two{ color:#fff; }
.card--sky .card__title, .card--good .card__title, .card--two .card__title{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.18); }
.card--sky .card__meta, .card--good .card__meta, .card--two .card__meta{ color:rgba(255,255,255,.9); }

/* DIY Packages (kept for when the feature is restored) - dashed brand builder */
.card--diy{
  background:
    linear-gradient(180deg, rgba(0,166,237,.14), rgba(0,166,237,.04) 45%, transparent 46%),
    var(--panel);
  border:1px dashed rgba(0,166,237,.35);
}

/* Multi-destination - PREMIUM purple with a passing glint (mirrors the membership paid tile) */
.card--regal{
  background:linear-gradient(160deg, #321b5e 0%, #4b2a8a 55%, #6c3bff 130%);
  border:1px solid rgba(108,59,255,.55);
  box-shadow:0 16px 40px rgba(108,59,255,.35);
  color:#fff;
  overflow:hidden;
}
.card--regal > *{ position:relative; z-index:1; }        /* keep content above the glint */
.card--regal .card__title{ color:#ffd700; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.card--regal .card__meta{ color:#e4d8ff; }
.card--regal .badge--deal{ background:#ffd700; color:#321b5e; border-color:transparent; }
.card--regal::before{
  content:"👑"; position:absolute; top:12px; left:12px; font-size:20px; z-index:1;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.card--regal::after{
  content:""; position:absolute; z-index:0; top:-50%; left:-60%; width:35%; height:200%;
  transform:rotate(25deg);
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.3), rgba(255,255,255,0));
  animation:regal-glint 4.5s ease-in-out infinite; pointer-events:none;
}
@keyframes regal-glint{ 0%{left:-60%} 55%{left:130%} 100%{left:130%} }
@media (prefers-reduced-motion: reduce){ .card--regal::after{ animation:none; } }

/* ========== Steps & Quotes ========== */
.steps{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.steps li{
  display:flex; gap:10px; align-items:flex-start;
  background:#f4fdff; border:1px solid var(--border);
  border-radius:12px; padding:12px;
}
.steps li span{
  width:26px; height:26px; display:grid; place-items:center;
  flex:none;  /* flex items shrink by default, squishing the circle when the step text is long */
  border-radius:50%; background:rgba(0,166,237,.15);
  border:1px solid rgba(0,166,237,.35);
}
.quotes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.quotes blockquote{
  margin:0; padding:12px 14px; border-left:3px solid var(--brand);
  background:#f4fdff; border-radius:10px;
}

/* ========== Responsive ========== */
@media (max-width: 900px){
  .wrap{ max-width:100vw; }
  .grid{ grid-template-columns:1fr; columns: 100vw; }
  .quotes{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr }
  .card{ padding-top: 2.5rem; } /* room for one row of badges */
  .card--search.card--searchform.v2 .searchv2__row--places{
    grid-template-columns: 1fr 40px 1fr;
  }
}
/* ===== Locked cards: blur on hover/press and reveal overlay ===== */
.card.is-locked { position: relative; }

/* Hidden by default */
.lock-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:2;
}

/* Show overlay + dim the card’s own content on hover/focus/press/1st tap */
.card.is-locked:hover > :not(.lock-overlay),
.card.is-locked:focus-within > :not(.lock-overlay),
.card.is-locked.is-press > :not(.lock-overlay),
.card.is-locked.show-overlay > :not(.lock-overlay){
  filter: blur(2px) saturate(.9) brightness(.9);
  opacity:.55; pointer-events:none;
}
.card.is-locked:hover .lock-overlay,
.card.is-locked:focus-within .lock-overlay,
.card.is-locked.is-press .lock-overlay,
.card.is-locked.show-overlay .lock-overlay{
  opacity:1; pointer-events:auto;
}

/* Centered UI (no panel/border — sits inside tile) */
.lock-ui{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  transform: scale(var(--lock-scale));
  transform-origin: center;
}

/* Rounded square behind the lock icon */
.lock-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(0,166,237,.12);           /* subtle brand chip */
  border:1px solid rgba(0,166,237,.35);     /* soft brand outer line */
  box-shadow: inset 0 0 0 1px rgba(0,166,237,.15);
}

/* Brand lock silhouette */
.lock-icon svg{
  width:28px; height:28px; display:block;
  stroke:#065b7e; fill:none; stroke-width:2.2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* One-line helper copy (easy to remove later) */
.lock-copy{
  color:#0b3550; font-size:20px; line-height:1; white-space:nowrap;
}

/* ===== Unlock Feature Button ===== */
.lock-cta {
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:18px;
  line-height:1;
  background:var(--brand);
  color:#ffffff;
  border:1px solid transparent;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

/* 🟦 Hover / focus: behaves like a tile */
.lock-cta:hover,
.lock-cta:focus {
  transform: translateY(-2px);
  background:#0587c2;           /* darker brand blue */
  color:#ffffff;                /* white text */
  border-color: var(--brand);   /* highlight edge (matches tile accent) */
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  outline:none;
}

/* Active press feedback (optional) */
.lock-cta:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Prevent lift while overlay visible */
.card.is-locked:hover{ transform:none; }

/* ========== SEARCH TILE ========== */
/* Native form controls don't inherit the page font: without this they'd render in the system
   font at browser-default sizes, and any control under 16px makes iOS auto-zoom on focus
   (site one fixes the same thing via .input-box's font-family + 1rem font-size) */
.card--search.card--searchform.v2 input,
.card--search.card--searchform.v2 select,
.card--search.card--searchform.v2 button{
  font:inherit;
}

/* === Search v2 layout (scoped) === */
.card--search.card--searchform.v2{
  --ink:#3a2f00;
  --bg1:#ffe27a; --bg2:var(--theme-yellow);
  background:
    radial-gradient(240px 120px at 88% 0%, rgba(0,166,237,.25), transparent 60%),
    radial-gradient(120% 120% at 0% 100%, var(--bg1) 0%, var(--bg2) 60%, #f4b400 100%);
  color: var(--ink);
  /* The tile keeps its light-theme look in dark mode, so native widgets (swap button glyph,
     date-picker calendar icons, select dropdowns) must not switch to dark-scheme rendering */
  color-scheme: light;
  overflow: hidden;
  min-height: 336px; /*160x2 + 16 margin*/
}

.card--search.card--searchform.v2 .card__title{ color:#3a2f00; margin-bottom:.25rem; }
.card--search.card--searchform.v2 .card__meta{ color:#7a6200; margin-bottom:.75rem; }

/* Topbar */
.card--search.card--searchform.v2 .searchv2__topbar{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.5rem;
  margin-bottom:.6rem;
}
.card--search.card--searchform.v2 .searchv2__small{
  appearance: none;
  padding:.5rem .75rem;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#ffffffcc;
  color: var(--ink);  /* white pill in both themes - don't inherit dark theme's white text */
  font-weight:600;
  width:100%;
}

/* Place rows */
.card--search.card--searchform.v2 .searchv2__row{
  display:grid;
  gap:.6rem;
}
.card--search.card--searchform.v2 .searchv2__row--places{
  grid-template-columns: 1fr auto 1fr; /* from | swap | to */
  align-items:center;
  margin-bottom:.6rem;
}
.card--search.card--searchform.v2 .searchv2__row--dates{
  grid-template-columns: 1fr 1fr;
  align-items:center;
  margin-bottom:.6rem;
}
.card--search.card--searchform.v2 .searchv2__row--months{
  grid-template-columns: 1fr;
  margin-bottom:.6rem;
}

.card--search.card--searchform.v2 .field{ min-width:0; }

/* Swap button */
.card--search.card--searchform.v2 .searchv2__swap{
  border:none; border-radius:999px;
  width:42px; height:42px;
  display:grid; place-items:center;
  font-weight:700; cursor:pointer;
  background:#ffffffde;
  color:var(--ink);  /* explicit: native buttons otherwise flip glyph colour in dark scheme */
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.card--search.card--searchform.v2 .searchv2__swap:hover{ transform:translateY(-1px); }

/* Choices inside v2 */
.card--search.card--searchform.v2 .choices{ width:100%; }
.card--search.card--searchform.v2 .choices__inner{
  padding:.85rem 1rem !important;
  min-height:auto;
  border:none; border-radius:14px;
  background:var(--theme-blue); color:#fff; font-weight:600;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
}
.card--search.card--searchform.v2 .choices__list--dropdown{
  border:1px solid rgba(0,0,0,.15); border-radius:12px; overflow:hidden;
}
.card--search.card--searchform.v2 .choices__list--dropdown .choices__item--selectable{ color:#052a35; }
/* Selected value shown in the blue From/To pill stays white */
.card--search.card--searchform.v2 .choices__list--single .choices__item{ color:#fff; }

/* Dates (native inputs). appearance:none + min-width:0 matter on iOS WebKit: date inputs
   otherwise keep an intrinsic minimum width, ignore width:100% and overflow their grid cells */
.card--search.card--searchform.v2 input[type="date"]{
  -webkit-appearance:none; appearance:none;
  width:100%; min-width:0; padding:.9rem 1rem;
  border:none; border-radius:14px;
  background:var(--theme-blue); color:#fff; font-weight:600;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
}
/* iOS renders the value in this pseudo element, centered by default - match desktop's left align */
.card--search.card--searchform.v2 input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
}

/* Month picker (Choices multi) */
.card--search.card--searchform.v2 #month-picker .choices__inner{
  background:#ffffff; color:#063544; font-weight:600;
}

/* Submit */
.card--search.card--searchform.v2 .searchv2__submit{
  -webkit-appearance:none; appearance:none;  /* keep iOS from restyling the button (as site one) */
  width:100%; margin-top:.2rem;
  background:var(--theme-blue); color:#fff; font-weight:800;
  border-radius:14px; padding:.9rem 1rem;
  border:none; cursor:pointer;
}
.card--search.card--searchform.v2 .searchv2__submit:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 24px rgba(7,59,76,.22),0 2px 8px rgba(7,59,76,.15);
}

/* Mobile guards */
.card--search.card--searchform.v2 .searchv2__row > *{ min-width:0; }
@media (max-width:560px){
  .card--search.card--searchform.v2 .searchv2__row--places{
    grid-template-columns: 1fr 40px 1fr;
  }
}
/* === Fixes for Search v2 === */
.card--search.card--searchform.v2{
  --ctrl-h: 44px;                 /* single source of truth for controls */
}

/* Ensure hidden month/day rows really hide even if Choices injected DOM */
.card--search.card--searchform.v2 [hidden] { display: none !important; }

/* Topbar small selects as pills */
.card--search.card--searchform.v2 .searchv2__small{
  height: var(--ctrl-h);
  line-height: calc(var(--ctrl-h) - 2px);
  border-radius: 12px;
  background: #ffffffd9;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.14);
}

/* Normalize Choices height (From/To) */
.card--search.card--searchform.v2 .choices__inner{
  min-height: var(--ctrl-h) !important;
  height: var(--ctrl-h);
  display: flex;
  align-items: center;
  padding: 0 1rem !important;
}
.card--search.card--searchform.v2 .choices{
  width: 100%;
}

/* Native date inputs match height */
.card--search.card--searchform.v2 input[type="date"]{
  height: var(--ctrl-h);
  padding: 0 1rem;
  line-height: var(--ctrl-h);
  border-radius: 14px;
}

/* Swap button centered & consistent */
.card--search.card--searchform.v2 .searchv2__swap{
  width: var(--ctrl-h);
  height: var(--ctrl-h);
}

/* Grid min-width guards to prevent overflow */
.card--search.card--searchform.v2 .searchv2__row > *{ min-width: 0; }

/* Make the month picker (Choices multiple) look tidy when shown */
.card--search.card--searchform.v2 #month-picker .choices__inner{
  min-height: var(--ctrl-h) !important;
  height: auto;
  background:#fff; color:#063544; font-weight:600;
}
/* Thin control bar below pickers */
.card--search.card--searchform.v2{
  --ctrl-h: 44px;    /* main inputs */
  --thin-h: 34px;    /* small controls */
}

.card--search.card--searchform.v2 .searchv2__controls{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Trip | Filter | Flex */
  gap: .5rem;
  margin: .35rem 0 .5rem;
}

.card--search.card--searchform.v2 .searchv2__control{
  appearance: none;
  height: var(--thin-h);
  line-height: calc(var(--thin-h) - 2px);
  padding: 0 .6rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  background: #ffffffd9;
  /* Explicit ink: the pill stays white in dark theme, so inheriting the page text colour
     (white in dark theme) made the options invisible */
  color: var(--ink);
  font-weight: 600;
  width: 100%;
}

/* Hide helper still wins over Choices injected DOM */
.card--search.card--searchform.v2 [hidden]{ display:none !important; }

/* --- Loading overlay (Search v2) --- */
.card--search.card--searchform.v2 { position: relative; }
.card--search.card--searchform.v2 .searchv2__loading{
  position: absolute; inset: 0;
  display: none;                         /* hidden by default */
  flex-direction: column;                /* spinner above the text */
  align-items: center; justify-content: center;
  gap: .8rem;
  background: rgba(8, 48, 66, .25);
  backdrop-filter: blur(3px);
  z-index: 5;
  text-align: center;
}
.card--search.card--searchform.v2.is-loading .searchv2__loading{
  display: flex;                         /* show when form has .is-loading */
}
.card--search.card--searchform.v2 .searchv2__spinner{
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.6);
  border-top-color: #fff;
  animation: searchv2-spin 1s linear infinite;
}
.card--search.card--searchform.v2 .searchv2__loadingtext{
  color: #fff; font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  line-height: 1.2;
}
@keyframes searchv2-spin { to { transform: rotate(360deg); } }

/* ================================================================================================================
   DARK THEME
   The light theme above is the default (:root). Applying data-theme="dark" on <html> (see theme_init() /
   the navbar toggle) restores the original dark palette. Palette variables flip here; the handful of rules
   that hardcode a per-theme colour get their original dark values restored below.
   ============================================================================================================= */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0b0c10;
  --panel:#11131a;
  --text:#f4f6f8;
  --muted:#c9d0d6;
  --border:#222632;
  --shadow:0 10px 28px rgba(0,0,0,.35);
}

:root[data-theme="dark"] body{
  background:linear-gradient(180deg, var(--bg), #0a0b0e 60%, #0a0b0e);
}

:root[data-theme="dark"] .card:hover{ box-shadow:0 14px 36px rgba(0,0,0,.45); border-color:#2a2f3e; }

/* The bold card skins and the glassy .badge--deal / white .badge--neutral above are all
   theme-independent (hardcoded colours), so they carry straight into dark mode. Only the
   lock chip, the DIY builder wash and the steps/search need a dark tweak. */
:root[data-theme="dark"] .badge--lock{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff;
}
:root[data-theme="dark"] .card--diy{
  background:
    linear-gradient(180deg, rgba(79,140,255,.20), rgba(79,140,255,.06) 45%, transparent 46%),
    var(--panel);
  border:1px dashed rgba(79,140,255,.35);
}

:root[data-theme="dark"] .steps li{ background:#0f121a; }
:root[data-theme="dark"] .steps li span{ background:rgba(79,140,255,.2); border-color:rgba(79,140,255,.35); }
:root[data-theme="dark"] .quotes blockquote{ background:#0f121a; }

:root[data-theme="dark"] .lock-icon{
  background:rgba(0,0,0,.35); border-color:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .lock-icon svg{ stroke:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
:root[data-theme="dark"] .lock-copy{ color:#fff; }
:root[data-theme="dark"] .lock-cta{ background:#ffffff; color:#0e1b3a; box-shadow:0 10px 28px rgba(0,0,0,.28); }
:root[data-theme="dark"] .lock-cta:hover,
:root[data-theme="dark"] .lock-cta:focus{ background:#1c2b52; color:#fff; box-shadow:0 14px 36px rgba(0,0,0,.45); }

/* The gold search tile is theme-independent like the other card skins - no dark overrides. */