/*
 * Search widget v2 — Return journey layout fix.
 *
 * Purpose: the "Return journey" toggle/fields were added to search-form.php
 * and search.js (fully functional, already wired to the booking engine) but
 * the shared full-width grid rule in site.css was never updated to include
 * them, so on desktop widths where .taxi-search is a CSS grid (SCC brand,
 * >720px) the "When would you like to return?" panel rendered squeezed into
 * the first grid column instead of spanning the full card width like the
 * child-restraint and advanced-options panels beside it.
 *
 * This file is additive only: it does not modify site.css, scc.css, hut.css,
 * search-form.php or search.js, and changes no class name, data attribute or
 * behaviour the JS or the frontend-contract test depend on. It is enqueued
 * last in the theme's stylesheet chain (see functions.php) so its rules can
 * safely refine what already ships without needing !important.
 */

/* --- Fix: return-journey-fields must span the full card width, exactly
   like .child-restraint-panel and .search-advanced-panel already do. --- */
.return-journey-fields{grid-column:1/-1}

/* --- Brand-aligned panel styling -----------------------------------------
   Both panels currently ship with a single generic treatment shared by both
   brands. Elevate them to match each brand's already-distinct visual
   language used throughout the rest of the search card. */

/* Saudi Cab Co — square/corporate, brand green + lime accent, Manrope */
.search-card-scc .return-journey-fields{
    border-radius:6px;
    border:1px solid rgba(0,107,77,.16);
    border-left:3px solid var(--brand);
    background:linear-gradient(180deg,#f4faf7,#eef6f1);
}
.search-card-scc .return-journey-heading strong{
    font-family:'Manrope',sans-serif;
    color:var(--brand-dark);
}
.search-card-scc .child-restraint-panel{
    border-radius:6px;
    border:1px solid rgba(0,107,77,.16);
    border-left:3px solid var(--accent);
    background:#f4faf7;
}
.search-card-scc .child-restraint-panel strong{color:var(--brand-dark)}

/* Hajj Umrah Taxi — rounded, dark + gold accent, Noto Serif Display */
.search-card-hut .return-journey-fields{
    border-radius:14px;
    border:1px solid #ead89a;
    border-left:4px solid var(--accent);
    background:linear-gradient(180deg,#fffaf0,#fff6e2);
}
.search-card-hut .return-journey-heading strong{
    font-family:'Noto Serif Display',serif;
    color:#171300;
}
.search-card-hut .child-restraint-panel{
    border-radius:14px;
    border:1px solid #ead89a;
    border-left:4px solid #101418;
    background:#fffaf0;
}
.search-card-hut .child-restraint-panel strong{color:#171300}

/* --- Mobile: both panels become block-level children of a non-grid
   .taxi-search below 720px, so the fix above is a no-op there and this is
   purely a comfort/consistency pass, not a structural change. --- */
@media(max-width:720px){
    .search-card-scc .return-journey-fields,
    .search-card-scc .child-restraint-panel{padding:12px}
    .search-card-hut .return-journey-fields,
    .search-card-hut .child-restraint-panel{padding:14px}
}

/* ============================================================
 * v2.2 — Fix cramped/misaligned SCC desktop field columns
 * ============================================================
 * v2.1 (shipped earlier the same day, superseded below) reduced
 * .taxi-search from a 3-way grid (route-fields 1.25fr | detail-grid 1fr
 * | search-submit 255px) to a 2-way split (1fr 1fr). Live verification
 * on /airport-transfers/ after shipping it found a real regression: the
 * 7-field detail-grid was still squeezed into ~486px, forcing its own
 * 4-equal-column rule (scc.css) down to ~115px/field — narrow enough
 * that the pickup-time field's helper text wrapped across 3 lines and
 * made that row ~14px taller than the row below it. That row-height
 * mismatch is exactly the "misaligned boxes" being reported — a
 * genuine bug introduced by v2.1, not a false alarm.
 *
 * HUT (hajjumrahtaxi.co.uk, the reference for "what good looks like")
 * never had this problem: .search-card-hut .taxi-search was never split
 * into side-by-side columns, so its detail-grid always gets the FULL
 * card width to lay fields out in. Fix: match that proven, already-live
 * structure instead of inventing another one — stack route-fields /
 * detail-grid / search-submit as full-width rows on SCC too, exactly
 * like HUT (and like SCC's own homepage hero widget) already do.
 * detail-grid then falls back to SCC's own existing generic rule
 * (scc.css: grid-template-columns:1fr 1fr 1fr 1fr) with no override
 * needed here — at full card width that's ~236px per field on a
 * typical content page, versus the ~115px v2.1 produced.
 */
.search-card-scc .taxi-search{grid-template-columns:1fr}
.search-card-scc .search-submit{grid-column:1;grid-row:auto;margin-top:2px}

/* Modest polish on top of the extra room: slightly taller, better-spaced
   fields for a more premium feel, matching competitor field sizing. */
.search-card-scc .field{padding:10px 12px}
.search-card-scc .field input,.search-card-scc .field select{min-height:30px}

/* ------------------------------------------------------------
 * Homepage hero widget (.scc-home-booking .search-card-scc)
 * ------------------------------------------------------------
 * home-v2.css already stacks this widget full-width (unaffected by the
 * rule above — different, higher-specificity selector) but pins its
 * detail-grid to grid-template-columns:1.15fr 1.35fr .7fr — 3 columns
 * for 7 fields. Live verification found this produced 401px / 471px /
 * 244px columns with no relation to field content (a single "Pickup
 * time" field got 471px; "Adults" got 244px), AND stranded the 7th
 * field ("Show prices in") alone on row 3 with ~730px of empty space
 * beside it — the single clearest instance of "misaligned boxes"
 * on the page. Fix: drop the bespoke ratio and reuse the exact same
 * generic 4-equal-column rule the rest of the site already uses
 * (scc.css's .search-card-scc .detail-grid), so the homepage and every
 * content page share one consistent, already-tested column layout
 * instead of two different bespoke ones.
 */
.scc-home-booking .search-card-scc .detail-grid{grid-template-columns:1fr 1fr 1fr 1fr}

/* ============================================================
 * v2.1 — Remove the generic "glowing dot in a pill" pattern from SCC
 * ============================================================
 * HUT's equivalent elements (service bar, hero label) never used a
 * glowing status dot inside a blurred pill badge — a very recognisable
 * generic "AI-generated SaaS landing page" cliche. They use plain text or
 * a meaningful brand icon instead. Bring SCC in line with HUT's existing,
 * already-shipped, more distinctive treatment rather than inventing a new
 * one.
 */

/* Top utility bar: drop the dot entirely, matching HUT's plain-text bar
   (.hut-service-bar has no dot at all). */
.scc-corporate-bar i{display:none}

/* Homepage hero + "Designed for certainty" confidence-section eyebrows:
   removing the pill/glow-dot chrome lets both fall back to the exact
   dash-line eyebrow style already used, unmodified, in every other
   section of the same homepage (services, fleet, process, FAQ, business)
   — consistent with the site's own established pattern, not a new one. */
/* Verified regression: without a width constraint this element is a
   <p style="display:flex"> — a block-level flex container — so it
   stretches to the full width of its column (measured 760px on the
   hero) instead of hugging its own content the way the pill it
   replaced did (measured 302px). width:fit-content keeps it a compact
   label, matching every other .home-v2__eyebrow instance on the page. */
.scc-brand-scc.home .home-v2__eyebrow{
    display:flex;
    width:fit-content;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    backdrop-filter:none;
}
.scc-brand-scc.home .home-v2__eyebrow>span{
    width:22px;
    height:2px;
    border-radius:0;
    box-shadow:none;
}
/* The confidence section sits on a light background (#edf3f0); its eyebrow
   had inherited the hero's light mint colour meant for a dark photo
   background, which is low-contrast here. Revert it to the same brand
   green every other light-background eyebrow on the page already uses. */
.scc-brand-scc.home .scc-home-confidence__copy .home-v2__eyebrow{color:#006b4d}

/* ============================================================
 * v2.3 — Roll out the approved route-picker redesign (mock sign-off)
 * ============================================================
 * Traced root cause of the reported "overlapping" pickup/drop-off dots
 * and swap control: .search-card-scc .swap-button sits at left:50%,
 * top:17px — centred on the boundary of the two side-by-side location
 * fields at a fixed 17px from the top. That's inherently fragile (any
 * change to field padding/height drifts it into the label/input area)
 * and is the actual outlier: HUT's swap-button is right-anchored
 * (right:14px;top:51px in hut.css) and has never had this problem.
 *
 * Approved design (reviewed as a standalone mock first): stack pickup
 * above drop-off — the same pattern Uber/Bolt/Blacklane use — joined by
 * a dashed route line between the two dots, with the swap control
 * moved to a right-anchored, vertically self-centring position like
 * HUT's. No markup or JS change: .location-field, .field-dot,
 * .swap-button and data-swap keep their existing classes/attributes,
 * so search.js (Google Places autocomplete + swap handler) and the
 * frontend-contract test are untouched — this is a CSS-only
 * repositioning of elements that already exist. Because search-form.php
 * is one shared template, this single rule set applies everywhere the
 * SCC widget renders — homepage hero and every content/service page —
 * genuinely site-wide from one change.
 */

/* Stack pickup above drop-off; remove the gap and pair the two fields'
   corner radii/borders so they read as one merged route card (matching
   the approved mock) while remaining two real, unmodified elements
   underneath — .field-dot and the Google Places autocomplete on each
   input are completely unaffected by this. */
.search-card-scc .route-fields{grid-template-columns:1fr;gap:0}
.search-card-scc .route-fields .location-field{border-radius:0}
.search-card-scc .route-fields .location-field:first-of-type{
    border-radius:8px 8px 0 0;
    border-bottom:0;
}
.search-card-scc .route-fields .location-field:last-of-type{
    border-radius:0 0 8px 8px;
}

/* The input itself is width:100% (site.css), so without reserved space
   it runs the full field width and the right-anchored swap button below
   sits on top of it. Verified live after the first deploy: the swap
   button (right:14px, 34px wide) overlapped the drop-off input by 34px —
   a real regression caught before calling this done. Reserve the same
   width on both fields so the button never collides regardless of which
   field it visually sits nearest. */
.search-card-scc .route-fields .location-field{padding-right:56px}

/* Dashed route line threading through both dots — a new pseudo-element
   on .route-fields (already position:relative in site.css, unchanged),
   so it can't conflict with any existing rule. z-index:1 lifts it above
   the two field boxes' own opaque backgrounds — both are position:relative
   with no z-index, so without this the later-painted field boxes would
   hide the line — making the dashed stem visible passing through both
   dot columns rather than just the seam between them. left:19px and the
   32px top/bottom offsets align to the dot centres (.field-dot is
   left:15px;top:28px, 9px diameter, in scc.css). */
.search-card-scc .route-fields::before{
    content:'';
    position:absolute;
    z-index:1;
    left:19px;
    top:32px;
    bottom:32px;
    width:2px;
    background:repeating-linear-gradient(to bottom, rgba(0,107,77,.3) 0 4px, transparent 4px 9px);
    pointer-events:none;
}

/* Swap control: right-anchored and vertically self-centring between the
   two stacked fields — HUT's already-correct approach, improved slightly
   with top:50%/translateY(-50%) instead of a hardcoded px value so it
   stays centred even if field content height changes. */
.search-card-scc .swap-button{
    left:auto;
    right:14px;
    top:50%;
    transform:translateY(-50%) rotate(90deg);
    z-index:2;
}
[dir=rtl] .search-card-scc .swap-button{left:14px;right:auto}
[dir=rtl] .search-card-scc .route-fields::before{left:auto;right:19px}