/*
    assets/css/finder-shop.css

    .shop's .finder -- the vehicle/delivery card that overlaps the bottom of
    the hero. Added 2026-08-20 with template/finder.php.

    Replaces a panel that was absolutely positioned OVER the middle of the
    slider and faded in 250ms after load. That panel covered the photo and had
    to hide the slide's own headline and buttons to stop them bleeding around
    its edges. Sitting below the hero and overlapping it by 64px, the way .shop
    does, gives the hero its copy back and reads as the next step instead of an
    interruption.

    Values from ozroofracks.shop/app/globals.css:
      .finder-wrap   position relative, z-index 5, margin-top -64px
      .finder        grid, 24px padding, 14px radius, white, 12px gap
      .finder-icon   45x45, 10px radius, --blue on --sky
      label span     11px/800 uppercase .07em --muted, 7px below
      controls       48px, 1px #cedae3, 8px radius

    The grid is three columns, not .shop's six. .shop has four selects
    (MAKE/MODEL/YEAR/ROOF) plus a submit; this has one type-ahead vehicle
    search and one address geocoder, because those are the controls that
    actually drive the shipping quote and 1-click checkout here. Same card,
    same controls sizing, laid out around what exists.
*/

/*
ONE INCLUDE, ANY PAGE. Dropping

    include $config['wrapper'].'template/finder.php';

anywhere in a page is all it takes -- but the -64px overlap only makes sense
directly under a hero. On a page with no #banner it would pull the card up
into the fixed header. So the overlap is conditional on actually following
the banner, and everywhere else the card just sits with normal spacing.
That is what makes the include safe to paste without thinking about it.
*/
.finder-wrap {
    position: relative;
    z-index: 5;
    max-width: 1180px;
    margin: 24px auto 0;
    padding: 0 1.5em;
}

#banner + .finder-wrap {
    margin-top: -64px;
}

.finder {
    display: grid;
    grid-template-columns: auto 1.2fr 1.2fr auto;
    align-items: end;
    gap: 12px 18px;
    padding: 24px;
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 18px 44px rgba(3, 16, 28, .18), 0 2px 6px rgba(3, 16, 28, .08);
}

.finder-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
}

/*
    template/finder.php marks this hidden once a vehicle AND an address are
    both on file ($sliderIsSetUp), but the rule above was defeating it: the
    UA stylesheet's `[hidden] { display: none }` loses to ANY author rule
    that sets display, so the heading kept asking for details already given.

    The same pairing already exists in this file for .finder-step and
    .finder-help -- the heading was simply missed. Any new .finder-* block
    that sets display needs its own [hidden] partner too.
*/
.finder-heading[hidden] {
    display: none;
}

.finder-heading strong,
.finder-heading small {
    display: block;
}

.finder-heading strong {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
}

.finder-heading small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.finder-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    color: var(--blue);
    background: var(--sky);
    font-size: 18px;
}

.finder-field {
    display: block;
    margin: 0;
    min-width: 0;          /* grid children default to min-content; without
                              this a long geocoder value widens the column
                              and pushes the card past its container */
}

.finder-field > span {
    display: block;
    margin: 0 0 7px;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.finder-help {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: center;
    white-space: nowrap;
    color: var(--blue);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    border: 0;
}

/* the compat strip rides inside the card, spanning it */
.finder .compat-carousel-wrap {
    grid-column: 1 / -1;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

@media screen and (max-width: 1100px) {
    .finder {
        grid-template-columns: 1fr 1fr;
    }

    .finder-heading,
    .finder-help {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 736px) {
    #banner + .finder-wrap {
        margin-top: -40px;
    }

    .finder {
        grid-template-columns: 1fr;
        padding: 18px;
    }
}

/* -------------------------------------------------- cascading selects */

/*
.shop's finder is a single row: heading, four selects, submit. Its grid is
`1.25fr repeat(4, .85fr) 1.3fr`. Here the four selects live in their own
.finder-selects grid inside the card, because the card also has to hold a
second step (the address) that appears in the same place once a vehicle is
chosen -- .shop has no second step to make room for.
*/
.finder-step {
    grid-column: 1 / -1;
    min-width: 0;
}

.finder-step[hidden] {
    display: none;
}

.finder-selects {
    display: grid;
    grid-template-columns: repeat(4, .85fr) 1.3fr;
    align-items: end;
    gap: 12px;
}

.finder select {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border: 1px solid #cedae3;
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 14px;
}

/* .shop greys a select that has nothing to choose from yet, rather than
   hiding it -- the sequence stays visible so you can see what is coming. */
.finder select:disabled {
    color: #8997a2;
    background: #f3f6f8;
    cursor: not-allowed;
}

.finder select:focus {
    border-color: var(--blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 119, 201, .14);
}

.finder button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    text-transform: none;
    cursor: pointer;
}

.finder button[type="submit"]:disabled {
    background: #aab9c4;
    cursor: not-allowed;
}

.finder button[type="submit"]:not(:disabled):hover {
    background: #1591e6;
}

@media screen and (max-width: 1100px) {
    .finder-selects {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 640px) {
    .finder-selects {
        grid-template-columns: 1fr;
    }
}

/*
address.php renders an "Help choosing your address" link above its input. In
the finder that duplicates the card's own subheading, which already says it --
so it is hidden HERE rather than removed from address.php, because that file
is shared with the cart checkout where the link is the only help affordance
on the page.
*/
.finder .address-icon {
    display: none;
}

.finder-help[hidden] {
    display: none;
}

/*
The staged-vehicle chip carries the chosen vehicle and a "View compatible
products" affordance (its ::after, set in finder-legacy.css). In the address
step it sits above the field, so it reads as "here is the vehicle you picked,
now tell us where it goes".
*/
.finder #sliderVehicleStaged {
    grid-column: 1 / -1;
    margin-bottom: 12px;
    padding: 10px 14px;
    cursor: pointer;
}

/*
compatible-simple.php ships two CTAs as `button green shine` and
`button blue shine` -- migrate.css colours those #268821 and #00adee. Inside a
.shop finder card they read as buttons from a different site.

Onto the palette: the primary action takes --blue, the secondary becomes an
outline, both at the card's 44px control height. The .shine sweep is kept --
it is contained now (see the .shine note in grids-shop.css) and it is the only
motion in the card.
*/
.finder .button.green,
.finder .button.blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
}

.finder .button.green {
    background-color: var(--blue);
    color: var(--white) !important;
}

.finder .button.green:hover {
    background-color: #1591e6;
}

.finder .button.blue {
    border: 1px solid #cedae3;
    background-color: var(--white);
    color: var(--ink) !important;
}

.finder .button.blue:hover {
    border-color: var(--blue);
    color: var(--blue) !important;
}

/* the partial centres them; the card is left-aligned */
.finder center {
    text-align: left;
}

/*
THE FINDER FORCED A HORIZONTAL SCROLLBAR ON MOBILE.

At 375px the document measured 921px wide. The card itself was a correct
329px, but its single grid track computed to 880px and every child stretched
to match.

`1fr` is `minmax(auto, 1fr)`, and that `auto` floor is min-content -- so a
track only shrinks as far as its least-shrinkable child allows. The compat
carousel sits in this grid at `grid-column: 1 / -1` with fourteen tiles in a
flex row; even though the row is an overflow-x:auto scroller, its automatic
minimum size is content-based, so it reported ~880px of min-content and the
track obeyed.

minmax(0, 1fr) removes the floor, and min-width:0 on the children stops any
future addition doing the same thing again. Applied at both narrow
breakpoints, since the two-column one has the same flaw.
*/
@media screen and (max-width: 1100px) {
    .finder {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media screen and (max-width: 736px) {
    .finder {
        grid-template-columns: minmax(0, 1fr);
    }
}

.finder > * {
    min-width: 0;
}

/*
NO SHADOW ON THE FINDER CARD.

.shop dropped it -- measured on the live site, .finder is white with a 14px
radius and box-shadow:none. This had a heavy 18px/44px drop under it, which
is what made the card sit on the page rather than in it.
*/
.finder {
    box-shadow: none;
}

/*
THE CARD ONCE THERE IS NOTHING LEFT TO ASK.

With a vehicle and an address on file the heading and both step panels hide,
and this takes their place: the two facts we hold, each labelled, and a way
to change them.

Labelled rows rather than one bold line over a quiet one -- the first version
printed the address directly under the words "Your vehicle", which read as
the vehicle being called Tuggerawong. Two facts need two labels.
*/
.finder-ready {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 45px;
}

.finder-ready .finder-icon {
    flex: 0 0 auto;
    background: #e7f6ec;
    color: #1c7a3e;
}

.finder-ready-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 34px;
    min-width: 0;
}

/*
    Each fact is now [icon][label + value], so it lays out as a ROW with the
    label and value stacked inside .finder-ready-text. It used to be a plain
    column because the single check icon lived outside this element -- which
    is exactly why the vehicle had no icon of its own.
*/
.finder-ready-fact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.finder-ready-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*
    Modifier classes rather than :has(). The green in .finder-ready
    .finder-icon applies to every icon in the block, so the van needed to opt
    back out -- and doing that by matching on the child icon would have leaned
    on :has() for something a class states plainly.

    Green reads as "confirmed", and the address is the one the geocoder had to
    validate. The van is identification, not a status, so it keeps the card's
    own blue-on-sky.
*/
.finder-ready .finder-icon--vehicle {
    background: var(--sky);
    color: var(--blue);
}

.finder-ready .finder-icon--vehicle .fa-shuttle-van {
    font-size: 17px;
}

.finder-ready-label {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.finder-ready-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.finder-ready-change {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
    color: var(--blue);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
}

.finder-ready-change:hover {
    color: var(--ink);
}