/* 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 */
  --theme-night-blue:#0e1b2b;  /* dark tile surfaces - deal tiles, the Basic gate, homepage tiles */
  --theme-yellow-ink:#1c1e22;  /* text and icons sitting on --theme-yellow */
  --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) */
  /* Membership Premium purple: the gradient dresses anything that sells Premium (the locked search
     CTA, the premium gate tile, the locked tiles' Go pill), --premium-dark doubles as Premium ink
     on white, and --premium-light as the flat chip fill */
  --premium-dark:#321b5e;
  --premium-light:#6c3bff;
  --premium-gradient:linear-gradient(160deg, var(--premium-dark) 0%, #4b2a8a 55%, var(--premium-light) 130%);
  --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{height:100%}
/* Sticky footer: body is a min-full-height column and main grows (see main.wrap below), so on
   short pages the footer still sits at the viewport bottom with nothing below it */
body{
  margin:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  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 ========== */
/* Little headroom at the top - the black navbar already separates the page from the browser chrome */
.wrap{max-width:var(--maxw);margin:0 auto;padding:12px 18px 28px}
main.wrap{flex:1 0 auto;width:100%}  /* grows to fill the viewport so the footer ends the page */
.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 16px}
/* Both intros ship in the markup and exactly one is ever displayed. The wide one carries desktop's
   longer title and its extra live-row point; it is hidden by default so narrow screens keep the copy
   and type they have always had, and the 901px block further down swaps which one shows. */
.landing-intro--wide{display:none}
/* Both wrap onto two lines on a phone, so they set their own leading rather than taking the body's
   1.55, which left them looking like separate paragraphs */
.landing-intro__title{margin:0 0 6px;font-size:24px;line-height:1.2;letter-spacing:.2px}
.landing-intro__sub{margin:0;color:var(--muted);font-size:16px;line-height:1.4}
/* Live-deal line: the same uppercase micro-label treatment as the deal pages' field labels */
.landing-intro__live{
  display:flex; align-items:center; gap:8px; margin:8px 0 0;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); opacity:.85;
}
/* Pulses outwards like a radar ping, then holds so the beat is visible */
.landing-intro__dot{
  width:8px; height:8px; border-radius:50%; background:var(--good); flex:none;
  animation:live-pulse 2.6s infinite;
}
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 50%, transparent) }
  70%{ box-shadow:0 0 0 8px transparent }
  100%{ box-shadow:0 0 0 0 transparent }
}
@media (prefers-reduced-motion: reduce){ .landing-intro__dot{ animation:none; } }
/* Desktop intro: the wide copy takes over, set larger because at this width the 24px title and the
   12px live row read as undersized against the tiles below them */
@media (min-width: 901px){
  .landing-intro--narrow{ display:none; }
  .landing-intro--wide{ display:block; }
  /* Headroom above the h1 - .wrap's 12px is tight once the title is this size */
  main.wrap{ padding-top:28px; }
  .landing-intro--wide .landing-intro__title{ font-size:28px; }
  .landing-intro--wide .landing-intro__live{ 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 12px;
}
.how-block{
  break-inside: avoid;
  display: inline-block;    /* flows like a card when .grid uses columns */
  width: 100%;
  margin: 0 0 12px;
}
/* Column headings for the homepage's desktop layout. Hidden by default rather than shown and then
   suppressed on mobile, so nothing about the narrow rendering has to be undone - the 901px block
   below is the only place they turn on. */
.grid__heading{ display:none; }

/* Homepage grid: two equal columns. Carousel over How it works on the left, the deal tiles over the
   search tile on the right, each column's half headed by its own title. */
@media (min-width: 901px){
  .grid--home{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    /* The right column sets the row heights and the left column's two blocks span them, which is
       what keeps "Search" level with "How it works" whatever the tiles wrap to */
    grid-template-areas:
      "carousel dealshead"
      "carousel bargains"
      "carousel direct"
      "carousel multi"
      "how      searchhead"
      "how      search";
  }
  .grid--home > *{ margin:0; }
  /* Fill the left grid column; the equal column tracks keep the bottom row an even 50/50 split. */
  .grid--home .homepage-carousel{ grid-area:carousel; width:100%; }
  /* On the homepage, let the carousel frame fill the exact height occupied by the three deal-tile
     rows opposite it. Its title occupies the same first row as the Deals heading. */
  .grid--home:not(.grid--campaign) .homepage-carousel{
    display:grid; grid-template-rows:auto minmax(0, 1fr);
  }
  .grid--home:not(.grid--campaign) .homepage-carousel__frame{ height:auto; }
  .grid--home .grid__heading{ display:block; }
  .grid--home .grid__heading--deals{ grid-area:dealshead; }
  .grid--home .grid__heading--search{ grid-area:searchhead; }
  .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; }

  /* Campaign pages keep the homepage's two-column relationship but have one purposeful deal tile. */
  .grid--home.grid--campaign{
    grid-template-areas:
      "carousel dealshead"
      "carousel featured"
      "how      searchhead"
      "how      search";
  }
  .grid--campaign .homepage-carousel__frame{ height:300px; }
  /* Keep the single Deals heading + tile as one compact group beside the taller carousel. Without
     these alignments the two grid rows stretch them apart to fill the carousel's height. */
  .grid--campaign .grid__heading--deals{ align-self:end; }
  .grid--campaign .card--featured{ grid-area:featured; align-self:start; }
}
.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) }

/* ===== Homepage deal tiles =====
   Two lines each - [title + unit pill] then [explanation + CTA] - on .card's own surface, border,
   shadow and hover, with a coloured strip down the left edge naming the category. */
.grid--home .card--pop,
.grid--home .card--sky,
.grid--home .card--two{
  overflow:hidden;                 /* clips the strip to the card's radius */
  min-height:auto;
  justify-content:flex-start;
  gap:6px;
  padding:14px 16px 14px 19px;     /* the extra left padding clears the strip */
  background:var(--theme-white);   /* not .card's panel tint (dark theme at the foot of this file) */
}
.grid--home .card--pop::before,
.grid--home .card--sky::before,
.grid--home .card--two::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--theme-blue);
}
.grid--home .card--sky::before{ background:var(--theme-yellow); }   /* the lead tile */
.grid--home .card--featured::before{ background:var(--theme-yellow); }

.card__top{ display:flex; align-items:center; gap:10px; }
.grid--home .card__title{ margin:0; font-size:17px; line-height:1.2; }
/* The unit the price is quoted in - the uppercase micro-label, in a badge-sized pill */
.card__unit{
  margin-left:auto; flex:none;
  padding:3px 10px; border-radius:999px; border:1px solid var(--border);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.card__row{ display:flex; align-items:center; gap:12px; }
.grid--home .card__meta{ margin:0; min-width:0; font-size:13px; line-height:1.4; }
/* Claims the width the CTA pill leaves. Only inside .card__row: as a direct child of the card's
   own column (the search tiles) it would claim the leftover HEIGHT and push the controls down */
.grid--home .card__row .card__meta{ flex:1; }
/* A pill, at .tile__go's size - the carousel's CTA is bigger because it sits on a hero image.
   No transition, matching .tile__go */
.card__cta{
  flex:none; padding:8px 14px; border-radius:999px;
  font-weight:900; font-size:13px; white-space:nowrap;
  background:var(--theme-blue); color:#fff;
}
.card--sky .card__cta{ background:var(--theme-yellow); color:var(--theme-yellow-ink); }
.card--featured .card__cta{ background:var(--theme-yellow); color:var(--theme-yellow-ink); }
.card:hover .card__cta{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(7,59,76,.18), 0 2px 6px rgba(7,59,76,.12);
}

/* ================= 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).
   ======================================================================================== */

/* The homepage deal tiles carry no skin of their own - they take .card's surface and are told apart
   by the coloured strip and CTA set in the Homepage deal tiles block above. */

/* 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:var(--premium-gradient);
  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:var(--theme-yellow); color:var(--premium-dark); 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; }
  /* Phone type scale for the intro: at the desktop sizes this block ate most of the first screen
     before any deal was visible. Only the narrow intro is displayed at this width, so these only
     ever apply to it. */
  .landing-intro__title{ font-size:20px; }
  .landing-intro__sub{ font-size:14px; }
  .landing-intro__live{ font-size:10px; }
  /* Same step down for the homepage's How it works heading. Scoped to .how-block because
     .section__title is shared with the deal, search, about and 404 pages, which are not in scope. */
  .how-block .section__title{ font-size:20px; }
  .quotes{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr }
  .card{ padding-top: 2.5rem; } /* room for one row of badges */
  /* Both search tiles carry their badge inline in .searchv2__head, so they need no clearance */
  .card--search.card--searchform.v2{ padding-top:18px; }
  /* Full-width cards below this, so the CTA drops under the explanation rather than squeezing it */
  .card__row{ flex-wrap:wrap; }
  .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) */
/* Family and size only, never the `font` shorthand: the shorthand also resets weight, and this
   selector outweighs every component rule below, so it silently flattened each control's weight */
.card--search.card--searchform.v2 input,
.card--search.card--searchform.v2 select,
.card--search.card--searchform.v2 button{
  font-family:inherit; font-size:inherit;
}

/* === Search v2 layout (scoped) ===
   Shared by the Premium search form and the locked CTA tile, so upgrading swaps the contents of a
   panel that looks the same either way. */
.card--search.card--searchform.v2{
  /* Ink for the controls that stay white in both themes (swap button, month pill) - they cannot
     inherit the page text colour, which goes near-white in dark */
  --ink:var(--theme-black);
  /* Pack to the top, so when the grid row is taller than the card the slack falls below the
     submit rather than above the title (.card defaults to flex-end) */
  justify-content:flex-start;
  background:linear-gradient(165deg, var(--theme-white) 0%, var(--theme-light-blue) 100%);
  /* Accent border and glow rather than .card's neutral pair - both search tiles are selling */
  border-color:color-mix(in srgb, var(--theme-blue) 55%, transparent);
  box-shadow:0 16px 40px color-mix(in srgb, var(--theme-blue) 18%, transparent),
             0 2px 10px color-mix(in srgb, var(--theme-blue) 12%, transparent);
  /* No overflow:hidden here: it would clip the From/To dropdown panels at the tile edge, which
     on small screens leaves only a couple of options visible. The loading overlay rounds its own
     corners instead (see .searchv2__loading). */
  min-height: 336px; /*160x2 + 16 margin*/
}

/* Title and the Premium chip share a line, so the chip leaves the card's absolute corner */
.searchv2__head{ display:flex; align-items:center; gap:10px; }
.card--search.card--searchform.v2 .badges{ position:static; margin:0 0 0 auto; flex:none; }
.card--search.card--searchform.v2 .card__title{ margin:0; }
.card--search.card--searchform.v2 .card__meta{ margin:.25rem 0 .75rem; }
/* Names the tier the search belongs to - the uppercase micro-label on the membership purple */
.badge--premium{
  background:var(--premium-light); color:#fff; border-color:transparent;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* ===== Locked search CTA tile =====
   The panel and From/To pickers of the search form, minus the swap button, so the pair splits the
   row. Selector carries the form's full class list plus one, to outrank the swap-column rules. */
.card--search.card--searchform.v2.card--searchcta .searchv2__row--places{ grid-template-columns:1fr 1fr; }
.searchv2__benefits{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.searchv2__benefits li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:13px; line-height:1.4; color:var(--muted);
}
/* Set by landing.js on the line the visitor has just demonstrated they want */
.searchv2__benefits li.is-hi{ color:var(--text); font-weight:700; }
/* Padding turns the icon itself into the disc. Black ink clears 7:1 on both the blue disc and the
   gold one in dark theme; white manages ~3:1 */
.searchv2__benefits svg{
  flex:none; margin-top:1px; box-sizing:border-box;
  width:18px; height:18px; padding:3.5px; border-radius:50%;
  background:var(--theme-blue); color:var(--theme-black);
}
.searchv2__price{ display:flex; align-items:baseline; gap:8px; margin:12px 0 8px; }
.searchv2__price b{ font-size:24px; font-weight:900; color:var(--theme-blue); }
.searchv2__price span{ font-size:12px; font-weight:600; color:var(--muted); }
.card--search.card--searchform.v2 .searchv2__submit small{
  display:block; margin-top:2px; font-size:11px; font-weight:600; opacity:.8;
}

/* 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:600;
  border-radius:14px; padding:.9rem 1rem;
  border:none; cursor:pointer;
  /* No transition: the hover lift must react instantly - any easing reads as lag on buttons */
}
.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);
}
/* Locked variant (public/basic trees): search is Premium-only, so the CTA is an <a> to /membership
   dressed like the membership Premium tile - same purple gradient and passing glint */
.card--search.card--searchform.v2 .searchv2__submit--locked{
  position:relative; overflow:hidden;
  display:block; text-align:center; text-decoration:none;
  background:var(--premium-gradient); font-weight:800;  /* heavier than Explore! - this one sells */
}
.card--search.card--searchform.v2 .searchv2__submit--locked::after{
  content:""; position:absolute; 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;
}
/* Same lift as the Explore submit, with the shadow in the Premium purple */
.card--search.card--searchform.v2 .searchv2__submit--locked:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(108,59,255,.35), 0 2px 8px rgba(108,59,255,.25);
}
.card--search.card--searchform.v2 .searchv2__submit--free{
  margin-top:.55rem; text-align:center; text-decoration:none;
  background:var(--theme-yellow); color:var(--theme-yellow-ink); font-weight:800;
}
.card--search.card--searchform.v2 .searchv2__submit--free:hover{
  box-shadow:0 10px 24px rgba(7,59,76,.18), 0 2px 8px rgba(7,59,76,.12);
}
@media (prefers-reduced-motion: reduce){ .searchv2__submit--locked::after{ animation:none; } }

/* Mobile guards */
.card--search.card--searchform.v2 .searchv2__row > *{ min-width:0; }
/* === 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; }

/* 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);
  border-radius: var(--radius);          /* match the card corners - the card can't overflow:hidden-clip this */
  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); } }

/* ================================================================================================================
   LOCATION PICKER (.lp)
   The site's location dropdown - the search tile's From/To and the deal pages' From. Markup is built
   by js/location-picker.js around the <select> the location_select macro renders; these styles are
   shared by every page that uses one, which is why they live here rather than in a page sheet.
   Colours come from the semantic variables at the top of this file, so the panel follows the theme
   with only the two accents below needing a dark override.
   ============================================================================================================= */
.lp{ position:relative; }

/* Closed control: the theme's own accent, so it reads as the page's primary control */
.lp-btn{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  padding:.75rem 1rem; border:1px solid var(--theme-blue); border-radius:14px; text-align:left;
  background:var(--theme-blue); color:#fff; font:inherit; font-size:16px; font-weight:700;
}
.lp-btn:hover,
.lp[data-open="true"] .lp-btn{ border-color:rgba(255,255,255,.7); }
.lp-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.lp-btn__value{
  flex:1; min-width:0; display:block; font-weight:600;   /* a chosen city reads bolder than the chrome */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp-btn__value.is-placeholder{ color:rgba(255,255,255,.75); font-weight:600; }
/* The note only earns its place on the closed control where it is a live figure - see deal-page.css */
.lp-btn__note{ display:none; }
.lp-btn__chev{ flex:none; color:rgba(255,255,255,.85); transition:transform .12s ease-out; }
.lp[data-open="true"] .lp-btn__chev{ transform:rotate(180deg); }

/* Panel: free to be wider than the control it hangs off, because a two-up row of pickers is much
   narrower than a city name plus its country. data-align="right" is for the picker nearest the
   page edge - it pins the panel's right edge to the button's so it opens inwards. */
.lp-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:50;   /* 50 = open menus, per the note above */
  min-width:max(100%, 240px); width:max-content; max-width:min(88vw, 360px);
  background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden; display:none;
}
.lp[data-align="right"] .lp-panel{ left:auto; right:0; }
.lp[data-open="true"] .lp-panel{ display:block; }

.lp-search{ padding:10px; border-bottom:1px solid var(--border); }
.lp-search input{
  -webkit-appearance:none; appearance:none;  /* iOS otherwise adds an inset shadow and its own radius */
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:9px;
  font:inherit; font-size:16px; color:var(--text); background:var(--bg);
}
.lp-search input::placeholder{ color:var(--muted); }

.lp-list{ max-height:300px; overflow-y:auto; padding:6px; }
.lp-grp{
  padding:9px 10px 5px; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--theme-blue);
}
.lp-opt{
  -webkit-appearance:none; appearance:none;  /* keep iOS from restyling the button (as .lp-btn) */
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  padding:9px 10px; border:0; border-radius:8px; background:none; font:inherit; font-size:16px;
  color:var(--text); text-align:left;
}
.lp-opt:hover{ background:var(--panel); }
/* Right-hand column: the city's country, or how many deals it has today on the deal pages */
.lp-opt__note{ margin-left:auto; font-size:11.5px; color:var(--muted); flex:none; font-variant-numeric:tabular-nums; }
.lp-opt__note--dim{ opacity:.6; }
.lp-none{ padding:12px 10px; font-size:13.5px; color:var(--muted); line-height:1.45; }

/* The pinned group's heading and the chosen city share the theme's accent, so the two things worth
   finding in a 178-row list are the two things that are not grey */
.lp-grp--pinned{ color:var(--theme-blue); }
.lp-opt[aria-current="true"]{ color:var(--theme-blue); font-weight:600; }

/* ================================================================================================================
   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; }
/* Homepage deal tiles take the same night blue as the deal tiles rather than the panel tint */
:root[data-theme="dark"] .grid--home .card--pop,
:root[data-theme="dark"] .grid--home .card--sky,
:root[data-theme="dark"] .grid--home .card--two{ background:var(--theme-night-blue); }

/* 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); }

/* Search tile: the same night blue as the deal and homepage tiles. The accents that are brand blue
   on the light panel go gold here, matching the From/To pickers, which flip in landing.css above.
   The locked CTA keeps its membership purple, so it is excluded from the submit rule. */
:root[data-theme="dark"] .card--search.card--searchform.v2{
  background:var(--theme-night-blue);
  border-color:color-mix(in srgb, var(--premium-light) 55%, transparent);
  box-shadow:0 16px 40px color-mix(in srgb, var(--premium-light) 28%, transparent);
}
:root[data-theme="dark"] .card--search.card--searchform.v2 .searchv2__submit:not(.searchv2__submit--locked){
  background:var(--theme-yellow); color:var(--theme-yellow-ink);
}
:root[data-theme="dark"] .searchv2__benefits svg{ background:var(--theme-yellow); }
:root[data-theme="dark"] .searchv2__price b{ color:var(--theme-yellow); }
/* Dates are the same class of control as the From/To pickers, so they flip with them */
:root[data-theme="dark"] .card--search.card--searchform.v2 input[type="date"]{
  background:var(--theme-yellow); color:var(--theme-yellow-ink);
}

/* Location picker: brand blue goes flat on the dark page, so the accent flips to gold - the closed
   control, the pinned heading and the chosen city all together. The panel itself needs nothing:
   it rides --bg/--border/--text/--muted, which have already flipped above. */
:root[data-theme="dark"] .lp-btn{
  background:var(--theme-yellow); border-color:var(--theme-yellow); color:var(--theme-yellow-ink);
}
:root[data-theme="dark"] .lp-btn__value.is-placeholder{ color:rgba(28,30,34,.62); }
:root[data-theme="dark"] .lp-btn__chev{ color:rgba(28,30,34,.75); }
:root[data-theme="dark"] .lp-btn:hover,
:root[data-theme="dark"] .lp[data-open="true"] .lp-btn{ border-color:var(--theme-yellow-ink); }
:root[data-theme="dark"] .lp-grp{ color:var(--theme-yellow); }
:root[data-theme="dark"] .lp-opt[aria-current="true"]{ color:var(--theme-yellow); }