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

/* ============================================================
 * v3.0 — Full visual parity pass matching the approved mock
 * ============================================================
 * User feedback after shipping v2.3: "the styling looks nothing like
 * the mock." That feedback was correct — v2.3 only repositioned the
 * existing flat elements (stacked fields, right-anchored swap, a thin
 * dashed line) to fix the functional overlap. It shipped none of the
 * mock's actual visual language: one bordered/shadowed route card,
 * ringed glowing dots, a premium circular swap control, a brand-tinted
 * journey toggle, an icon-badge CTA. This section closes that gap.
 *
 * Still CSS-only, still reusing the exact classes already live in
 * search-form.php (.route-fields, .location-field, .field-dot,
 * .swap-button, .journey-modes, .search-assurance, .field,
 * .search-submit) — no markup or JS change, so Google Places
 * autocomplete, the swap handler, and the frontend-contract test are
 * all unaffected. This section supersedes v2.3's swap-button and dot
 * rules (updated below, not duplicated) and adds new rules for the
 * areas v2.3 never touched.
 */

/* ---- Route card: one bordered, shadowed unit, not two boxes ---- */
.search-card-scc .route-fields{
    border:1px solid #d9e3de;
    border-radius:10px;
    background:#fff;
    box-shadow:0 1px 2px rgba(4,35,26,.05);
    --scc-dot-top:34px;
    --scc-field-h:94px;
}
.search-card-scc .route-fields .location-field{
    border:1px solid transparent;
    border-radius:0;
    padding:13px 58px 13px 50px;
    transition:background .15s ease;
}
.search-card-scc .route-fields .location-field:first-of-type{
    border-radius:10px 10px 0 0;
}
.search-card-scc .route-fields .location-field:last-of-type{
    border-radius:0 0 10px 10px;
    border-top-color:#e9f0ec;
}
.search-card-scc .route-fields .location-field:focus-within{
    background:#f4faf7;
}
.search-card-scc .route-fields .location-field>span{
    font-family:'Manrope',sans-serif;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#7c8b85;
    margin-bottom:3px;
}
.search-card-scc .route-fields .location-field input{
    font-size:15px;
    font-weight:600;
    color:#0d221c;
}
.search-card-scc .route-fields .location-field .scc-google-address-status{
    font-size:10px;
    color:#7c8b85;
    margin-top:2px;
}
[dir=rtl] .search-card-scc .route-fields .location-field{padding:13px 50px 13px 58px}

/* Tail content (help text, "add a stop") sits inside the same card,
   below the two fields, separated by a rule — one coherent unit
   instead of card + loose text underneath. */
.search-card-scc .route-fields .route-field-help{
    margin:0;
    padding:10px 16px 12px 50px;
    border-top:1px solid #e9f0ec;
}
.search-card-scc .route-fields .journey-waypoints:not(:empty){padding:0 16px}
.search-card-scc .route-fields .add-waypoint{margin:10px 16px 14px}
.search-card-scc .route-fields .waypoint-help{margin:0 16px 14px}
[dir=rtl] .search-card-scc .route-fields .route-field-help{padding:10px 50px 12px 16px}

/* Dashed route line threading through both dot centres. z-index:1
   lifts it above the two fields' own backgrounds (both position:
   relative with no z-index) so the dashed stem is visible passing
   through both dot columns rather than just the seam between them. */
.search-card-scc .route-fields::before{
    content:'';
    position:absolute;
    z-index:1;
    left:19px;
    top:calc(var(--scc-dot-top) + 4px);
    height:calc(var(--scc-field-h) - 8px);
    width:2px;
    background:repeating-linear-gradient(to bottom, #d9e3de 0 4px, transparent 4px 9px);
    pointer-events:none;
}
[dir=rtl] .search-card-scc .route-fields::before{left:auto;right:19px}

/* Ringed, glowing pickup/drop-off dots — the mock's signature detail,
   and the specific element the user called "overlapping" and asked to
   see redone. White ring keeps the colour readable against the field
   background; the outer glow is the same brand-tint treatment already
   used elsewhere on the card (assurance badge, focus rings). */
.search-card-scc .route-fields .field-dot{
    left:19px;
    top:var(--scc-dot-top);
    width:11px;
    height:11px;
    z-index:2;
    border:2.5px solid #fff;
}
.search-card-scc .route-fields .pickup-dot{
    background:var(--brand);
    box-shadow:0 0 0 1px #d9e3de,0 0 0 5px rgba(0,107,77,.14);
}
.search-card-scc .route-fields .dropoff-dot{
    background:var(--accent);
    box-shadow:0 0 0 1px #d9e3de,0 0 0 5px rgba(131,201,52,.16);
}
[dir=rtl] .search-card-scc .route-fields .field-dot{left:auto;right:19px}

/* Premium circular swap control — right-anchored (HUT's proven spot),
   vertically self-centring, with a real border/shadow/hover state
   instead of the flat undecorated circle it shipped with. The icon is
   left unrotated: the ⇅ glyph is already a vertical swap symbol, and
   now that the fields are stacked vertically (not side-by-side) the
   90° rotation inherited from the old layout no longer makes sense —
   removing it makes the icon read correctly for the new layout. */
.search-card-scc .swap-button{
    left:auto;
    right:14px;
    top:calc(var(--scc-dot-top) + var(--scc-field-h) / 2);
    transform:translateY(-50%);
    z-index:3;
    width:36px;
    height:36px;
    border:1px solid #d9e3de;
    background:#fff;
    box-shadow:0 2px 6px rgba(4,35,26,.08);
    color:#05392a;
    font-size:16px;
    line-height:1;
    transition:box-shadow .18s ease,border-color .18s ease;
}
.search-card-scc .swap-button:hover{
    box-shadow:0 6px 16px rgba(4,35,26,.14);
    border-color:var(--brand);
}
[dir=rtl] .search-card-scc .swap-button{left:14px;right:auto}

/* ---- Journey mode toggle: soft brand-tinted pill track ---- */
.search-card-scc .journey-modes{
    background:#eef6f1;
    border-radius:99px;
    padding:4px;
    gap:4px;
    width:max-content;
    max-width:100%;
}
.search-card-scc .journey-modes button{
    border:0;
    background:transparent;
    color:#53605b;
    font-weight:700;
}
.search-card-scc .journey-modes button.is-active{
    background:#fff;
    color:#05392a;
    border-color:transparent;
    box-shadow:0 4px 10px rgba(4,35,26,.1);
}

/* ---- Assurance badge: brand tint + check icon, matching the mock -- */
.search-card-scc .search-assurance{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-color:#e9f0ec;
    background:#f4faf7;
    color:#05392a;
}
.search-card-scc .search-assurance::before{
    content:'';
    width:13px;
    height:13px;
    flex:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23006b4d' stroke-width='1.8'%3E%3Cpath d='M10 2.5l6.5 2.6v4.4c0 4.2-2.7 7.9-6.5 9-3.8-1.1-6.5-4.8-6.5-9V5.1L10 2.5z'/%3E%3Cpath d='M7.3 10l1.9 1.9 3.7-3.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:contain;
    background-repeat:no-repeat;
}

/* ---- Detail grid fields: tabular numerals, matching the mock's
   quieter numeric polish (no layout change, same 4-column grid). ---- */
.search-card-scc .detail-grid .field input,
.search-card-scc .detail-grid .field select{
    font-variant-numeric:tabular-nums;
}

/* ---- CTA: gradient + circular icon badge, matching the mock ---- */
.search-card-scc .search-submit{
    background:linear-gradient(135deg,var(--brand) 0%,#018058 100%);
    box-shadow:0 14px 30px -12px rgba(0,107,77,.55);
}
.search-card-scc .search-submit:hover{
    box-shadow:0 18px 38px -12px rgba(0,107,77,.65);
}
.search-card-scc .search-submit b{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--accent);
    color:#04231a;
    font-size:16px;
}