/* ── Stack v2 design tokens (subset) ──────────────────────────────────
* Direct port of the relevant pieces from search.css + search-v2.css.
* No external CSS file — same inline pattern as the rest of the site. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.55;
background: #0B1220;
color: #E2E8F0;
min-height: 100vh;
}
a { color: #5EEAD4; text-decoration: none; }
a:hover { color: #fff; }
button { font-family: inherit; }
/* Skip link */
/* ── Hero ───────────────────────────────────────────────────────── */
.sp-root { background: linear-gradient(180deg, #0B1220 0%, #0F172A 100%); }
.sp-hero { position: relative; padding: 3rem 2.5rem 2rem; overflow: hidden; }
.sp-hero-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse at 20% 30%, rgba(20,184,166,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(8,145,178,0.14) 0%, transparent 55%),
repeating-linear-gradient(0deg, rgba(94,234,212,0.025) 0 1px, transparent 1px 60px),
repeating-linear-gradient(90deg, rgba(94,234,212,0.025) 0 1px, transparent 1px 60px);
}
.sp-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; }
.sp-hero-eyebrow { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.22em; color: #5EEAD4; }
.sp-hero-title { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-top: 0.4rem; line-height: 1.05; }
.sp-hero-sub { font-size: 1rem; color: #94A3B8; margin-top: 0.6rem; max-width: 64ch; line-height: 1.55; }
@media (max-width: 700px) { .sp-hero { padding: 2rem 1rem 1.5rem; } .sp-hero-title { font-size: 1.85rem; } }
/* ── Search form ────────────────────────────────────────────────── */
.sp-form {
margin-top: 1.5rem;
background: rgba(15,23,42,0.85);
border: 1px solid rgba(94,234,212,0.25);
border-radius: 14px;
padding: 1rem 1.1rem 1.1rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(94,234,212,0.05) inset;
backdrop-filter: blur(14px);
}
.sp-form-tabs { display: flex; gap: 0.3rem; margin-bottom: 0.85rem; }
.sp-tab { background: transparent; border: 1px solid rgba(148,163,184,0.25); color: #CBD5E1; padding: 0.42rem 1rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.sp-tab.active { background: linear-gradient(135deg, #14B8A6, #0891B2); color: #fff; border-color: transparent; }
.sp-form-grid {
display: grid;
grid-template-columns: 1fr 36px 1fr 1fr 1fr 0.8fr 0.7fr auto;
gap: 0.5rem; align-items: stretch;
}
.sp-form-grid.ow { grid-template-columns: 1fr 36px 1fr 1fr 0.8fr 0.7fr auto; }
/* Tablet: 2-column pairs (FROM/TO, DEPART/RETURN, CABIN/PAX) with the swap
button spanning so it never squishes a field into the 36px lane. */
@media (max-width: 980px) {
.sp-form-grid, .sp-form-grid.ow {
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
}
.sp-form-grid .sp-swap, .sp-form-grid.ow .sp-swap { grid-column: 1 / -1; justify-self: center; margin: -2px 0; }
.sp-form-grid > .sp-search-btn, .sp-form-grid.ow > .sp-search-btn { grid-column: 1 / -1; }
}
/* Phone: keep the 2-column pairing rather than collapsing to one column.
WEB-233: single-column stacked six full-width cards, making the form 819px tall,
so #sp-search landed at y=1128 on an 844px screen - the site's primary action was
284px below the fold on the device most people use. Paired rows bring it above.
The fields are compacted below so two fit 390px without the overlap the original
single-column rule was guarding against. */
@media (max-width: 560px) {
.sp-form-grid, .sp-form-grid.ow {
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
}
.sp-form-grid .sp-input, .sp-form-grid.ow .sp-input {
padding: 0.4rem 0.55rem;
min-width: 0; /* let grid items shrink instead of overflowing */
}
.sp-form-grid .sp-input label { font-size: 0.8125rem; letter-spacing: 0.1em; }
.sp-form-grid .sp-input-text,
.sp-form-grid input[type="date"],
.sp-form-grid select { font-size: 1rem; max-width: 100%; min-width: 0; }
.sp-form-grid .sp-input.compact span { white-space: nowrap; }
/* WEB-365: do not float the swap over FROM/TO. WEB-364 reserved 30px so the
44px control cleared the One way tab, but translate(-50%,-50%) still dropped
the bottom half onto the field cards (~19x22px on each). check_control_overlap
missed it because it measured the inner inputs, not the cards. Named areas
put FROM | swap | TO on one row so the 44px hit target owns its own column. */
.sp-form-grid, .sp-form-grid.ow {
grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
margin-top: 0;
}
.sp-form-grid {
grid-template-areas:
"from swap to"
"depart . ret"
"cabin . have"
"pax pax pax"
"go go go";
}
.sp-form-grid.ow {
grid-template-areas:
"from swap to"
"depart depart depart"
"cabin . have"
"pax pax pax"
"go go go";
}
#sp-from-wrap { grid-area: from; }
#sp-to-wrap { grid-area: to; }
#sp-depart-wrap { grid-area: depart; }
#sp-return-wrap { grid-area: ret; }
#sp-cabin-wrap { grid-area: cabin; }
#sp-card-wrap { grid-area: have; }
#sp-pax-wrap { grid-area: pax; }
.sp-form-grid > .sp-search-btn,
.sp-form-grid.ow > .sp-search-btn { grid-area: go; }
.sp-form-grid .sp-swap,
.sp-form-grid.ow .sp-swap {
grid-area: swap;
position: static;
top: auto; left: auto;
transform: none;
z-index: auto;
margin: 0;
align-self: center;
justify-self: center;
width: 44px; height: 44px;
min-width: 44px; min-height: 44px;
}
}
/* WEB-233: reclaim first-screen height so the primary action clears the fold. */
@media (max-width: 560px) {
.sp-hero { padding-top: 18px !important; padding-bottom: 16px !important; }
.sp-hero-title { line-height: 1.12; margin-top: 2px; }
.sp-hero-sub { margin-top: 6px; }
.sp-form { margin-top: 12px !important; padding: 12px !important; }
.sp-form-tabs { margin-bottom: 8px; }
.site-header { padding-top: 8px !important; padding-bottom: 8px !important; }
}
.sp-input {
position: relative;
background: rgba(94,234,212,0.04);
border: 1px solid rgba(94,234,212,0.12);
border-radius: 10px;
padding: 0.55rem 0.85rem;
display: flex; flex-direction: column; gap: 0.18rem;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.sp-input:hover, .sp-input.focused { border-color: #5EEAD4; background: rgba(94,234,212,0.08); }
.sp-input label { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.16em; color: #94A3B8; pointer-events: none; }
.sp-input-text {
background: transparent; border: none; outline: none;
color: #fff; font-family: ui-monospace, monospace; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.02em;
padding: 0; width: 100%;
}
.sp-input-text::placeholder { color: #475569; }
.sp-city { font-size: 0.8125rem; color: #94A3B8; min-height: 1em; }
.sp-date-d { font-size: 1rem; font-weight: 700; color: #fff; }
.sp-date-y { font-size: 0.8125rem; color: #94A3B8; margin-left: 0.4rem; }
.sp-input.compact { justify-content: center; }
.sp-input.compact select {
background: transparent; border: none; outline: none;
color: #fff; font-size: 0.875rem; font-weight: 700;
padding: 0; cursor: pointer;
font-family: inherit;
appearance: none;
padding-right: 1rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.1rem center;
}
.sp-input.compact select option { background: #0F172A; color: #fff; }
.sp-input.compact input[type="date"] {
background: transparent; border: none; outline: none;
color: #fff; font-size: 0.875rem; font-weight: 700;
padding: 0; font-family: inherit;
color-scheme: dark;
}
.sp-swap {
align-self: center; justify-self: center;
width: 32px; height: 32px;
background: rgba(94,234,212,0.12); border: 1px solid rgba(94,234,212,0.3);
color: #5EEAD4; border-radius: 50%;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.sp-swap:hover { background: rgba(94,234,212,0.22); transform: rotate(180deg); }
.sp-search-btn {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
background: linear-gradient(135deg, #14B8A6 0%, #0891B2 100%);
color: #fff; border: none; padding: 0 1.4rem;
border-radius: 10px;
font-size: 1rem; font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 18px rgba(20,184,166,0.35);
transition: transform 0.15s, box-shadow 0.15s;
min-height: 56px;
}
.sp-search-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(20,184,166,0.5); }
/* Autocomplete popover */
.sp-ac-pop {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
background: #0F172A; border: 1px solid rgba(94,234,212,0.3);
border-radius: 10px; max-height: 360px; overflow-y: auto;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
display: none;
}
.sp-ac-pop.open { display: block; }
.sp-ac-section { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.18em; color: #5EEAD4; padding: 0.6rem 0.85rem 0.3rem; }
.sp-ac-row {
display: grid; grid-template-columns: 44px 1fr auto;
gap: 0.7rem; align-items: center;
width: 100%; padding: 0.6rem 0.85rem;
background: transparent; border: none; cursor: pointer; text-align: left;
color: inherit;
}
.sp-ac-row:hover, .sp-ac-row.kbd-active { background: rgba(94,234,212,0.08); }
.sp-ac-code { font-family: ui-monospace, monospace; font-size: 0.875rem; font-weight: 800; color: #5EEAD4; background: rgba(94,234,212,0.12); padding: 0.18rem 0.4rem; border-radius: 4px; text-align: center; letter-spacing: 0.04em; }
.sp-ac-city { font-size: 0.875rem; font-weight: 700; color: #fff; }
.sp-ac-airport { font-size: 0.8125rem; color: #94A3B8; margin-top: 0.05rem; }
.sp-ac-country { font-size: 0.8125rem; color: #94A3B8; }
.sp-ac-empty { padding: 1rem; color: #64748B; font-size: 0.875rem; text-align: center; }
/* Form extras row */
/* WEB-232: the newsletter is a standalone band after the data sections now; it
used to sit inside the search form's extras row and inherit that box. Both
.sp-empty and .sp-results-v2 supply their own 1200px/auto constraint and the
band is inside neither, so without this it went full-bleed to 1440 while the
cards above it sat at 1120. Matching .sp-empty's padding keeps the band's
edges on the same line as those cards in the empty state, which is the view
a first-time visitor actually gets. */
.sp-newsletter { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem 2.5rem; }
.sp-newsletter-inner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; background: rgba(94,234,212,0.06); border: 1px solid rgba(94,234,212,0.15); border-radius: 10px; padding: 0.55rem 0.9rem; }
.sp-newsletter-text { font-size: 0.8125rem; color: #94a3b8; font-weight: 600; }
.sp-newsletter-form { display: flex; gap: 0.4rem; }
.sp-newsletter-form input { background: rgba(15,23,42,0.6); border: 1px solid rgba(94,234,212,0.2); color: #e2e8f0; padding: 0.35rem 0.6rem; border-radius: 6px; font-size: 0.8125rem; min-width: 160px; }
.sp-newsletter-form button { background: linear-gradient(135deg, #14b8a6, #0891b2); color: #fff; border: none; padding: 0.35rem 0.85rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.sp-newsletter-form button:hover { opacity: 0.9; }
.sp-form-extras {
margin-top: 0.85rem;
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.sp-chip {
display: inline-flex; align-items: center; gap: 0.4rem;
background: transparent; border: 1px solid rgba(148,163,184,0.25);
color: #CBD5E1; padding: 0.4rem 0.85rem; border-radius: 999px;
font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.sp-chip:hover { border-color: #5EEAD4; color: #5EEAD4; }
.sp-chip.on { background: rgba(94,234,212,0.15); border-color: #5EEAD4; color: #5EEAD4; }
.sp-recent-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem; border-radius: 999px; background: rgba(15,23,42,0.6); border: 1px solid rgba(148,163,184,0.18); color: #CBD5E1; font-size: 0.8125rem; cursor: pointer; }
.sp-recent-chip:hover { border-color: #5EEAD4; color: #fff; }
.sp-recent-when { color: #64748B; font-size: 0.8125rem; margin-left: 0.3rem; }
.sp-link { background: transparent; border: none; color: #5EEAD4; cursor: pointer; font-family: inherit; font-size: 0.8125rem; }
/* ── Transfer bonuses marquee ───────────────────────────────────── */
.sp-tx-strip {
display: flex; align-items: center; gap: 1rem;
padding: 0.7rem 2.5rem;
background: rgba(15,23,42,0.7);
border-top: 1px solid rgba(94,234,212,0.1);
border-bottom: 1px solid rgba(94,234,212,0.1);
overflow: hidden;
}
.sp-tx-lbl {
display: flex; align-items: center; gap: 0.4rem;
font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.18em; color: #fbbf24;
white-space: nowrap; flex-shrink: 0;
/* Sit on top of the marquee track. The track is in the same clipped
strip and uses translateX() to scroll, so its content visually
crosses into the label's flex cell. Opaque bg + higher z-index
hide any item that scrolls behind the label. */
position: relative; z-index: 2;
background: #0F172A; padding: 0.4rem 0.85rem 0.4rem 0; margin: -0.4rem 0;
}
.sp-tx-pulse {
width: 8px; height: 8px; border-radius: 50%; background: #fbbf24;
box-shadow: 0 0 10px #fbbf24;
animation: sp-pulse 1.4s infinite;
}
@keyframes sp-pulse { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:0.4; transform: scale(1.3); } }
.sp-tx-track {
display: flex; gap: 1.5rem;
flex: 0 0 auto;
width: max-content;
animation: sp-marquee 50s linear infinite;
white-space: nowrap; will-change: transform;
}
.sp-tx-track:has(.sp-tx-empty) { animation: none; width: auto; }
@keyframes sp-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.sp-tx { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: #CBD5E1; flex-shrink: 0; }
.sp-tx-from, .sp-tx-to { font-weight: 600; color: #fff; }
.sp-tx-bonus { font-family: ui-monospace, monospace; font-weight: 800; color: #5EEAD4; }
.sp-tx.hot .sp-tx-bonus { color: #fbbf24; }
.sp-tx-time { font-size: 0.8125rem; color: #64748B; }
.sp-tx-empty { font-size: 0.8125rem; color: #64748B; padding: 0 1rem; }
/* Phone: LIVE TRANSFER BONUSES is ~248px with letter-spacing. In a row with
the track it left a ~120px sliver on the right -- the only part that moved.
Stack the label, then let the marquee use the full strip. width:max-content
on the track is load-bearing: translateX(-50%) is 50% of the element box,
not the content, so flex:1 made the loop crawl by half the sliver. */
@media (max-width: 700px) {
.sp-tx-strip {
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
padding: 0.55rem 1rem 0.7rem;
}
.sp-tx-lbl {
padding: 0 1rem;
margin: 0;
background: transparent;
position: static;
z-index: auto;
}
.sp-tx-empty { padding: 0 1rem; }
}
/* ── Empty state ────────────────────────────────────────────────── */
.sp-empty { padding: 2.5rem; max-width: 1200px; margin: 0 auto; }
.sp-empty-section { margin-bottom: 2.5rem; }
.sp-section-head {
display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
margin-bottom: 1.1rem; padding-bottom: 0.7rem;
border-bottom: 1px solid rgba(94,234,212,0.1);
}
.sp-section-eyebrow { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.18em; color: #5EEAD4; }
.sp-section-title { font-size: 1.125rem; font-weight: 800; color: #fff; }
/* WEB-237: colour key for the card CPP values. Mirrors .atlas-legend on explore
so the two pages read as one product. margin-left:auto parks it at the right
of the section head on desktop; the head wraps it onto its own line when the
title no longer leaves room. 11px matches the WEB-234 nav-label floor. */
.sp-cpp-key {
margin-left: auto; display: flex; flex-wrap: wrap;
gap: 0.3rem 0.85rem; font-size: 11px; color: #94A3B8; font-weight: 600;
}
.sp-cpp-key > div { display: flex; align-items: center; gap: 0.35rem; }
.sp-cpp-key .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
@media (max-width: 560px) {
.sp-cpp-key { margin-left: 0; width: 100%; justify-content: space-between; row-gap: 0.3rem; }
.sp-cpp-key > div { flex: 0 0 calc(50% - 0.45rem); }
}
.sp-popular-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.sp-popular-card {
background: #0F172A;
border: 1px solid rgba(94,234,212,0.15);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sp-popular-card:hover, .sp-popular-card:focus { transform: translateY(-2px); border-color: #5EEAD4; box-shadow: 0 6px 24px rgba(0,0,0,0.4); outline: none; }
/* WEB-236: the 130px gradient block is gone. It was a two-stop colour field tied to
nothing -- not value, not program, not region -- so Lisbon, Paris and Rome differed
only by hue while the numbers people actually came for sat underneath it in 0.75rem
grey. The card now leads with the figure. The only colour left is the CPP value's,
which carries the same four-band meaning as the key above the grid. */
.sp-popular-head {
position: relative;
padding: 0.85rem 1rem 0.6rem;
border-bottom: 1px solid rgba(94,234,212,0.12);
color: #fff;
}
.sp-popular-route { font-family: ui-monospace, monospace; font-size: 0.8125rem; font-weight: 700; color: #5EEAD4; letter-spacing: 0.06em; }
.sp-popular-city { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin-top: 0.25rem; display: flex; align-items: center; gap: 0.4rem; }
.sp-popular-glyph { font-size: 1.125rem; opacity: 0.85; }
.sp-popular-country { font-size: 0.8125rem; color: #94A3B8; margin-top: 0.15rem; }
.sp-popular-deal { position: absolute; top: 12px; right: 12px; background: rgba(15,23,42,0.85); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; padding: 0.2rem 0.45rem; border-radius: 4px; }
.sp-popular-body { padding: 0.8rem 1rem 0.95rem; }
/* the number is the point of the card, so it is the largest thing on it */
.sp-popular-figure { display: flex; gap: 0.6rem; align-items: baseline; }
.sp-popular-miles { font-family: ui-monospace, monospace; font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.sp-popular-cpp { margin-left: auto; font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 800; }
.sp-popular-prog { font-size: 0.8125rem; color: #94A3B8; margin-top: 0.4rem; }
.sp-popular-nodata { color: #64748B; font-size: 0.8125rem; }
.sp-sweet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; }
.sp-sweet { background: rgba(15,23,42,0.6); border: 1px solid rgba(94,234,212,0.12); border-radius: 10px; padding: 0.85rem 1rem; display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.sp-sweet:hover, .sp-sweet:focus { border-color: #5EEAD4; background: rgba(94,234,212,0.06); outline: none; }
.sp-sweet-icon { font-size: 1.6rem; flex-shrink: 0; }
.sp-sweet-title { font-size: 0.875rem; font-weight: 700; color: #fff; }
.sp-sweet-note { font-size: 0.8125rem; color: #94A3B8; margin-top: 0.18rem; }
/* ── Results layout ─────────────────────────────────────────────── */
.sp-results-v2 {
max-width: 1200px; margin: 0 auto;
padding: 1.25rem 2rem 3rem;
display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem;
}
/* Respect the [hidden] attribute on the results pane. Our .sp-results-v2
{ display: grid } rule was overriding the browser default
[hidden] { display: none }, so the pane (and its results-count filler
header + filter sidebar) leaked into the empty-state view before
the user had searched. */
.sp-results-v2[hidden] { display: none !important; }
/* .sp-input is display:flex, which overrides the [hidden] attribute's
display:none — so the RETURN field stayed visible in one-way mode.
Force it. (Same fix pattern as the results pane above.) */
.sp-input[hidden] { display: none !important; }
@media (max-width: 900px) { .sp-results-v2 { grid-template-columns: 1fr; padding: 1rem; } }
.sp-sidebar {
background: #0F172A; border: 1px solid rgba(94,234,212,0.12);
border-radius: 12px; padding: 1rem;
align-self: start;
position: sticky; top: 90px;
}
.sp-sidebar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.85rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(94,234,212,0.1); }
.sp-sidebar-title { font-size: 1rem; font-weight: 800; color: #fff; }
.sp-sidebar-clear { background: transparent; border: none; color: #5EEAD4; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.sp-side-group { margin-bottom: 1rem; }
.sp-side-glabel { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.16em; color: #94A3B8; margin-bottom: 0.5rem; display: flex; justify-content: space-between; }
.sp-side-glabel .count { color: #5EEAD4; font-family: ui-monospace, monospace; }
.sp-range input[type="range"] { width: 100%; appearance: none; background: transparent; height: 18px; cursor: pointer; }
.sp-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #5EEAD4 var(--pct, 100%), rgba(148,163,184,0.18) var(--pct, 100%)); }
.sp-range input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #16213e; border: 2px solid #14B8A6; margin-top: -5px; box-shadow: 0 2px 8px rgba(20,184,166,0.4); }
.sp-range input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #16213e; border: 2px solid #14B8A6; cursor: pointer; }
.sp-range-head { display: flex; justify-content: space-between; font-size: 0.8125rem; color: #64748B; font-family: ui-monospace, monospace; margin-top: 0.2rem; }
/* Results head */
.sp-results-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.sp-results-count { font-size: 1rem; font-weight: 800; color: #fff; }
.sp-results-sub { font-size: 0.8125rem; color: #94A3B8; margin-top: 0.15rem; }
.sp-controls { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sp-toggle {
display: inline-flex; gap: 2px; padding: 2px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(148,163,184,0.25);
border-radius: 7px;
}
.sp-toggle-btn { background: transparent; border: none; padding: 0.32rem 0.7rem; font-size: 0.8125rem; font-weight: 700; color: #94A3B8; cursor: pointer; border-radius: 5px; }
.sp-toggle-btn.active { background: linear-gradient(135deg, #14B8A6, #0891B2); color: #fff; }
.sp-sort {
background: transparent; border: 1px solid rgba(148,163,184,0.3);
color: #CBD5E1; padding: 0.34rem 0.7rem; border-radius: 6px;
font-size: 0.8125rem; font-family: inherit;
appearance: none; padding-right: 1.4rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 0.4rem center;
cursor: pointer;
}
.sp-sort option { background: #0F172A; color: #fff; }
/* Result rows */
.sp-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.sp-row {
background: #0F172A; border: 1px solid rgba(94,234,212,0.12);
border-radius: 10px; overflow: hidden;
transition: border-color 0.15s, transform 0.12s;
}
.sp-row:hover { border-color: rgba(94,234,212,0.4); }
.sp-row.best { border-color: rgba(94,234,212,0.5); box-shadow: 0 0 0 1px rgba(94,234,212,0.2); }
.sp-row-main {
display: grid; grid-template-columns: 36px 1.6fr 1fr 100px 24px;
gap: 0.7rem; padding: 0.85rem 1rem;
align-items: center;
background: transparent; border: none; cursor: pointer; text-align: left; width: 100%; color: inherit;
}
/* Mobile: the 5-column desktop grid collided on phones — program names
overprinted the miles column on every row (audit, 16/16 rows at
390px). Restack: program on top, price under it, CPP pill on the
right spanning both rows. Chevron hidden (the whole row is the
button). */
@media (max-width: 560px) {
.sp-row-main {
grid-template-columns: 24px minmax(0, 1fr) auto;
grid-template-areas:
"rank prog cpp"
"rank price cpp";
row-gap: 0.35rem;
}
.sp-row-rank { grid-area: rank; }
.sp-row-prog { grid-area: prog; }
.sp-row-price { grid-area: price; text-align: left; }
.sp-row-cpp { grid-area: cpp; }
.sp-row-chev { display: none; }
}
.sp-row-main:hover { background: rgba(94,234,212,0.04); }
.sp-row-rank { font-family: ui-monospace, monospace; font-size: 0.8125rem; color: #475569; font-weight: 700; }
.sp-row.best .sp-row-rank { color: #5EEAD4; }
.sp-row-prog { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.sp-row-prog-tile {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 26px; border-radius: 4px; flex-shrink: 0;
font-family: ui-monospace, monospace; font-size: 0.8125rem; font-weight: 800;
color: #fff; letter-spacing: 0.02em;
}
.sp-row-prog-name { font-size: 1rem; font-weight: 700; color: #fff; }
.sp-row-prog-meta { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.18rem; }
.sp-pill-direct, .sp-pill-saver, .sp-pill-stop { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.13rem 0.42rem; border-radius: 3px; }
.sp-pill-direct { background: rgba(94,234,212,0.15); color: #5EEAD4; }
.sp-pill-saver { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.sp-row-seats { font-size: 0.8125rem; color: #64748B; }
.sp-why { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.13rem 0.42rem; border-radius: 3px; background: rgba(94,234,212,0.08); color: #5EEAD4; border: 1px solid rgba(94,234,212,0.18); }
.sp-why.warn { background: rgba(251,146,60,0.1); color: #fb923c; border-color: rgba(251,146,60,0.2); }
.sp-row-price { text-align: right; }
.sp-row-miles { font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 800; color: #fff; }
.sp-row-tax { font-size: 0.8125rem; color: #94A3B8; margin-top: 0.1rem; }
.sp-live-dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: #5EEAD4; box-shadow: 0 0 6px #5EEAD4;
margin-right: 0.35rem; vertical-align: middle;
animation: sp-live-pulse 1.6s infinite;
}
@keyframes sp-live-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
.sp-row-cpp { display: flex; align-items: baseline; justify-content: center; gap: 0.18rem; padding: 0.4rem 0.55rem; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.sp-row-cpp .cpp-num { font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 800; color: var(--cpp-color, #5EEAD4); }
.sp-row-cpp .cpp-suffix { font-size: 0.8125rem; color: #94A3B8; }
.sp-row-chev { color: #64748B; font-size: 1.125rem; text-align: center; }
.sp-row-badge { background: linear-gradient(135deg, #14B8A6, #0891B2); color: #fff; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; padding: 0.3rem 1rem; }
.sp-row-expand { padding: 0.85rem 1rem 1rem; border-top: 1px solid rgba(94,234,212,0.08); background: rgba(15,23,42,0.4); }
.sp-row-expand-section { margin-bottom: 0.85rem; }
.sp-row-expand-section:last-child { margin-bottom: 0; }
.sp-row-expand-head { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; color: #94A3B8; margin-bottom: 0.4rem; }
.sp-sweet-callout { font-size: 0.8125rem; color: #fbbf24; display: flex; gap: 0.4rem; align-items: flex-start; }
.sp-sweet-callout::before { content: "⭐"; flex-shrink: 0; }
.sp-row-cards { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sp-row-card-chip { background: rgba(94,234,212,0.08); color: #5EEAD4; border: 1px solid rgba(94,234,212,0.18); border-radius: 5px; padding: 0.3rem 0.6rem; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.sp-row-card-chip:hover { background: rgba(94,234,212,0.18); color: #fff; }
.sp-row-cta {
display: inline-flex; align-items: center; gap: 0.4rem;
background: linear-gradient(135deg, #14B8A6, #0891B2);
color: #fff; border: none; padding: 0.55rem 1.1rem; border-radius: 8px;
font-size: 0.875rem; font-weight: 700; cursor: pointer; text-decoration: none;
}
.sp-row-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20,184,166,0.35); }
/* Loading skeleton */
.sp-skel { background: rgba(15,23,42,0.6); border: 1px solid rgba(94,234,212,0.1); border-radius: 10px; padding: 0.85rem 1rem; }
.sp-skel-line { height: 14px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04)); border-radius: 4px; background-size: 200% 100%; animation: sp-shimmer 1.4s linear infinite; }
@keyframes sp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Below-the-fold (preserved sections) */
.below-fold { background: #1a1a2e; color: #E2E8F0; padding: 3rem 2rem 2rem; }
html[data-theme="dark"] .below-fold { background: #16213E; color: #E2E8F0; }
.below-fold-inner { max-width: 1200px; margin: 0 auto; }
.below-fold h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.below-fold p { line-height: 1.6; margin-bottom: 1rem; max-width: 70ch; color: #475569; }
html[data-theme="dark"] .below-fold p { color: #94A3B8; }
/* Light mode overrides */
/* Stacked layout: the sticky sidebar bled ~16px into the results header
after the auto-scroll (audit: "N results" overlapped the sidebar small
print at 390px). Sticky has no purpose when stacked. This override
must sit AFTER the base .sp-sidebar rule to win the cascade. */
@media (max-width: 900px) { .sp-sidebar { position: static; } }