/*
    assets/css/finder-legacy.css

    The geocoder, address-suggestion and staged-vehicle styling that came with
    the finder when it was extracted from slider.php. Moved out of an inline
    <style> block on 2026-08-20.

    It was 396 lines of CSS shipped inline in the markup of every page that
    renders the finder. Two reasons that had to stop:

      - It is 396 lines re-sent on every request, uncacheable, ahead of the
        content.
      - It put a <style> element between #banner and .finder-wrap in the DOM,
        which silently broke `#banner + .finder-wrap` -- the rule that gives
        the card its 64px overlap of the hero. The card was sitting 24px BELOW
        the hero instead of overlapping it, and nothing about that looked like
        an error until the computed margin was measured.

    Mostly Mapbox geocoder internals, which is why it is still one blob rather
    than split by component. Retuned onto the tokens already; the structure is
    inherited.
*/

.slider-address-fixed {
    opacity:0;
    visibility:hidden;

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;

    transform:
        translate(-50%, -46%);
	position:absolute;
    z-index:50;
    left:50%;
    top:45%;
    transform:translate(-50%, -50%);
    width:100%;
    max-width:540px;
    pointer-events:auto;
}
.slider-address-fixed.loaded {
    opacity:1;
    visibility:visible;

    transform:
        translate(-50%, -50%);
}
/*
    Restyled 2026-08-20 onto the ozroofracks.shop palette (assets/css/tokens.css).
    These live inline rather than in assets/css/slider-shop.css because most of
    them carry !important -- an external file loaded earlier in the document
    could not win against them, and adding a second layer of !important to fight
    a block that is only used here would be worse than editing it in place.

    Modelled on .shop's .finder card: 14px radius, 24px padding, white, with
    48px inputs on a #cedae3 border.
*/
.slider-address-box {
    width:100%;
    margin:0 auto;
    padding:22px 20px;
    background:rgba(255,255,255,0.96);
    border-radius:14px;
    box-shadow:0 18px 44px rgba(3,16,28,0.28), 0 2px 6px rgba(3,16,28,0.10);
    text-align:center;
}

.slider-address-title {
    margin:0 0 0.3em 0 !important;
    font-family:var(--font-display);
    font-size:20px !important;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-0.02em;
    color:var(--ink) !important;
    text-transform:none !important;
    text-shadow:none !important;
}

.slider-address-subtitle {
    margin:0 0 0.85em 0;
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
}

.slider-vehicle-step[hidden],
.slider-address-step[hidden] {
    display:none !important;
}

.slider-vehicle-help {
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:0 0 0.6em;
    margin-left:3px;
    font-size:12px !important;
    font-weight:700;
    text-transform:none;
    color:var(--blue) !important;
    text-decoration:none;
}

.slider-vehicle-help:hover {
    text-decoration:underline;
}

.slider-vehicle-search-wrap {
    position:relative;
    text-align:left;
}

/*
    While the vehicle/address panel is up, hide the rotating slide's own
    "We deliver to..." heading and CTA buttons underneath it - they sit in
    the same #banner stacking context and were bleeding through around the
    panel's edges (it doesn't span the full slide width). #slider-address-fixed
    only exists in the DOM until vehicle+address are both on file, so this
    naturally stops applying the moment that's true.
*/
#slider-address-fixed ~ article .hero-headline,
#slider-address-fixed ~ article .slider-actions {
    display:none !important;
}

.slider-vehicle-search-wrap .vp-search-input {
    width:100%;
    height:48px;
    margin:0;
    padding:0 12px;
    border:1px solid #cedae3;
    border-radius:8px;
    background:#fff;
    color:var(--ink);
}

.slider-vehicle-search-wrap .vp-search-input:focus {
    border-color:var(--blue);
    outline:none;
    box-shadow:0 0 0 3px rgba(8,119,201,0.14);
}

.slider-vehicle-search-wrap .vp-search-results {
    max-height:260px;
    overflow-y:auto;
    z-index:999999;
}

.slider-vehicle-staged {
    display:flex;
    margin:0 0 0.75em;
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:none;
    color:var(--ink) !important;
    text-decoration:none;
}

.slider-vehicle-staged .vp-search-result-label,
.slider-vehicle-staged .vp-search-result-sub {
    color:var(--ink) !important;
}

.slider-vehicle-staged .vp-search-result-label {
    display:flex;
    align-items:center;
    gap:8px;
}

.slider-vehicle-staged .ozfa-reset-vehicle {
    margin-left:auto;
    color:#c62828 !important;
    font-size:1.05em;
    line-height:1;
    text-decoration:none;
}

.slider-vehicle-staged[hidden] {
    display:none !important;
}

.slider-vehicle-staged::after {
    content:'View compatible products';
    margin-left:auto;
    align-self:center;
    padding-left:10px;
    color:var(--blue);
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.slider-vehicle-error {
    margin:0.55em 0 0;
    color:#a23a3a;
    font-size:0.82em;
}

.slider-address-box #checkout-warning,
.slider-address-box #map,
.slider-address-box #logger,
.slider-address-box #badder,
.slider-address-box .success,
.slider-address-box .warning {
    display:none !important;
}

.slider-address-box .col-12 {
    margin:0 !important;
}

.slider-address-box .address-topline {
    width:100% !important;
    max-width:100% !important;
    justify-content:center;
    margin:0 0 0.45em 0 !important;
}

.slider-address-box .address-note {
    color:#444 !important;
    font-size:0.82em !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
}

.slider-address-box .address-row {
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    justify-content:center !important;
}

.slider-address-box .geocoder,
.slider-address-box .mapboxgl-ctrl-geocoder,
.slider-address-box input.mapboxgl-ctrl-geocoder--input,
.slider-address-box input#address {
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
}

.slider-address-box input.mapboxgl-ctrl-geocoder--input,
.slider-address-box input#address {
    height:48px !important;
    font-size:0.95em !important;
    color:var(--ink) !important;
    background:#fff !important;
    border:1px solid #cedae3 !important;
    border-radius:8px !important;
}

.slider-address-box .geomarker {
    right:13px !important;
    color:var(--blue) !important;
}

.slider-actions {
    margin-top:0.7em;
}

@media screen and (max-width:768px) {

    .slider-address-fixed {
        top:46%;
        width:92%;
        max-width:92%;
    }

    .slider-address-box {
        padding:0.9em;
    }

    .slider-address-title {
        font-size:17px !important;
    }

    .slider-address-subtitle {
        font-size:0.82em;
    }

    .slider-address-box input.mapboxgl-ctrl-geocoder--input,
    .slider-address-box input#address {
        height:46px !important;
    }

}
/* =========================
   Slider Geocoder Suggestions Fix
========================= */

.slider-address-box .mapboxgl-ctrl-geocoder {
    position:relative !important;
    text-align:left !important;
}

.slider-address-box .mapboxgl-ctrl-geocoder .suggestions {
    position:absolute !important;

    top:100% !important;
    left:0 !important;

    width:100% !important;

    background:#fff !important;

    border:1px solid var(--line) !important;
    border-radius:0 0 10px 10px !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.18) !important;

    overflow:hidden !important;

    z-index:999999 !important;

    text-align:left !important;
}

/* Individual suggestion rows */

.slider-address-box .suggestions > li,
.slider-address-box .suggestions .mapboxgl-ctrl-geocoder--suggestion {
    color:var(--ink) !important;

    border:0 !important;


    text-align:left !important;

    font-size:1em !important;
    line-height:1.35 !important;

    cursor:pointer !important;
}

/* Hover */

.slider-address-box .suggestions > li:hover,
.slider-address-box .suggestions .mapboxgl-ctrl-geocoder--suggestion:hover,
.slider-address-box .active {
    background:var(--surface) !important;
    color:var(--ink) !important;
}

/* Suggestion titles */

.slider-address-box .mapboxgl-ctrl-geocoder--suggestion-title {
    color:var(--ink) !important;
    font-weight:700 !important;
}

/* Suggestion address */

.slider-address-box .mapboxgl-ctrl-geocoder--suggestion-address {
    color:var(--muted) !important;
    font-size:0.82em !important;
}

/* Keep input aligned */

.slider-address-box .address-row {
    align-items:flex-start !important;
}
/* =========================
   Mobile Geocoder Focus Mode
========================= */

@media screen and (max-width:768px) {

    .slider-address-fixed {
        transition:
            top 0.35s ease,
            left 0.35s ease,
            right 0.35s ease,
            width 0.35s ease,
            max-width 0.35s ease,
            transform 0.35s ease;
    }

    .slider-address-box {
        transition:
            border-radius 0.35s ease,
            box-shadow 0.35s ease;
    }

    body.geocoder-mobile-focus .slider-address-fixed {
        position:fixed !important;

        top:4em !important;
        left:12px !important;
        right:12px !important;

        width:auto !important;
        max-width:none !important;

        transform:none !important;

        z-index:999999 !important;
    }

    body.geocoder-mobile-focus .slider-address-box {
        border-radius:12px !important;

        box-shadow:
            0 12px 40px rgba(0,0,0,0.22) !important;
    }

    body.geocoder-mobile-focus .mapboxgl-ctrl-geocoder .suggestions {
        max-height:40vh !important;
        overflow-y:auto !important;
    }

}