/* Tire Search — Browse by Size
   -------------------------------------------------------------------------
   Owned entirely by /{vanity}/tire-search/size.

   The page loads the "tire-search-size" bundle rather than "tire-search", so
   by_vehicle/index.css no longer reaches it. That sheet also dresses the
   vehicle wizard and the home tire-finder modal.

   The sibling by_size/index.css is left in the shared bundle untouched, on
   purpose. Removing rules from it would change what the vehicle page loads,
   which is the cross-page reach this redesign is avoiding. Its unscoped
   "path { fill: transparent }" and "text { fill: #FFFFFF }" simply stop
   applying here, along with the .tire-selection rules for the sidewall SVG
   this design replaces.

   Every class is namespaced tss- and the shared-component overrides at the
   bottom are qualified by the mount id, so nothing here escapes the page.

   Still available without this file, since SimpleLayout always loads them:
   Bootstrap 5.3 and the master-css bundle (global.css + main.css), which is
   where .btn-cta-green and .btn-cta-blue-solid live.
   ------------------------------------------------------------------------- */

#tire-finder-size {
    --tss-blue: #1D4288;
    /* Bright #3EB049 is 2.7:1 on white, so green text takes this darker tone
       throughout and the bright one is left to .btn-cta-green's fill. */
    --tss-green-text: #237A2E;
    --tss-red: #EF4444;
    --tss-ink: #1A1A1A;
    --tss-muted: #555;
    --tss-band: #F3F4F6;
    --tss-rule: #D9DCE1;
    --tss-radius: 6px;

    /* One elevation pair across the three tire-search pages, so a panel here
       and a card on brand or vehicle sit at the same height. */
    --tss-elevation: 0 4px 20px rgba(0, 0, 0, .1);
    --tss-elevation-hover: 0 8px 24px rgba(0, 0, 0, .12);

    background: #fff;

    /* SimpleLayout mounts Vuetify sidebars after the page body, and Vuetify's
       .v-application__wrap carries min-height: 100vh. main.css neutralises that
       only under #page-wrapper, which exists in Master.cshtml and not here, so
       the wrap blankets the first screenful and swallows clicks above the fold.
       Positioning lifts the page over that later sibling. */
    position: relative;
    z-index: 1;

    /* Body is a flex column at min-height 100vh with the footer pushed down by
       margin-top: auto, so the last band grows into the slack rather than
       leaving bare background above the footer. */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.tss-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding-inline: 24px;
    width: 100%;
}

/* ---------- Breadcrumb ----------
   SimpleLayout renders the breadcrumb above this page with its own gutter
   (px-2 px-md-11) and a large top margin, so it lined up with neither this
   page's column nor its intro band, leaving a white strip above the tint.
   Pulled onto the same column and into the band here.

   Not the hero-overlay-page treatment used by about, careers and warranty:
   that one turns the crumbs white to sit over a photo hero, and this page has
   a light band instead. Matched by sibling adjacency, and this sheet only
   loads on this page, so no other breadcrumb is touched. */
#breadcrumb:has(~ #tire-finder-size) {
    background: var(--tss-band, #F3F4F6);
    margin-bottom: 0;
}

#breadcrumb:has(~ #tire-finder-size) > div {
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 24px 24px 0 !important;
}

/* ---------- Band headings ---------- */

.tss-band-title {
    font-family: BebasNeue;
    font-size: 36px;
    line-height: 1;
    color: #fff;
    margin: 0 0 28px;
}

.tss-band-title--dark {
    color: var(--tss-blue);
}

/* ---------- Intro ---------- */

/* Lighter than the content bands below it, since the breadcrumb shares this
   band and already supplies clearance above the heading. */
.tss-intro {
    background: var(--tss-band);
    padding-block: 24px 40px;
}

.tss-intro__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.tss-title {
    font-family: BebasNeue;
    font-size: 48px;
    line-height: 1;
    color: var(--tss-blue);
    margin: 0;
}

.tss-intro__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* The label sits above the pair rather than beside it, so the two buttons stay
   a unit and the label reads as the question they answer. The buttons take
   their own row because a wrapping flex container reports the sum of its
   children as its intrinsic width: with the label inline the block measured
   label plus both buttons, which pushed the heading onto its own line a couple
   of hundred pixels earlier than it needed to. */
.tss-intro__actions-label {
    font-family: Inter;
    font-size: 15px;
    font-weight: 600;
    color: var(--tss-ink);
}

.tss-intro__actions-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Saved vehicles are a shared band: the component and its styles live in
   src/pages/tire_search/shared/savedVehicles.js and
   ~/css/pages/tire_search/shared/saved-vehicles.css, which the by-vehicle page
   loads too. It carries its own tokens, shell and heading, so nothing about it
   is defined here. */

/* ---------- Size search ---------- */

/* The step the by-vehicle page's content bands take, 44px in. Lighter below,
   because the where-to-find-your-size section follows rather than the footer. */
.tss-search {
    padding-block: 44px 32px;
}

/* Sits on the page background rather than a tinted band, so the elevation is
   what separates it. */
.tss-form {
    background: #fff;
    border-radius: var(--tss-radius);
    padding: 28px 28px 24px;
    box-shadow: var(--tss-elevation);
}

.tss-form__row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.tss-field {
    display: block;
    flex: 1 1 260px;
    min-width: 0;
    cursor: pointer;
}

/* With only the front field showing, letting it fill the panel stranded the
   Search button at the far edge. Capped at half so the two read as one
   control. Desktop only — the row stacks below lg, where the button is already
   beneath the field. */
@media (min-width: 992px) {
    .tss-form__row--single .tss-field {
        flex: 0 1 50%;
        max-width: 50%;
    }
}

.tss-field__label {
    display: block;
    font-family: Inter;
    font-size: 14px;
    font-weight: 700;
    color: var(--tss-blue);
    margin-bottom: 6px;
}

.tss-form__submit {
    flex: 0 0 auto;
    min-width: 140px;
    height: 52px;
}

.tss-stagger {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    font-family: Inter;
    font-size: 15px;
    font-weight: 600;
    color: var(--tss-blue);
    cursor: pointer;
}

/* The darker green rather than #3EB049: the browser draws a white tick on the
   fill, and white on the bright green is 2.7:1. */
.tss-stagger input {
    width: 18px;
    height: 18px;
    accent-color: var(--tss-green-text);
    cursor: pointer;
}

/* ---------- Where to find your size ---------- */

/* Where to find your tire size is a shared section: the markup is
   Views/Partials/WhereToFindTireSize.cshtml and the styles are
   ~/css/pages/tire_search/shared/where-to-find-size.css, which the by-vehicle
   page loads too. It carries its own tokens, shell and heading. */

/* ---------- Shared component overrides ----------
   TireSizeAutocomplete is shared with the home tire-finder and the listing
   sidebar, so its own markup is left alone and restyled from here. Every
   selector is qualified by the mount id, which keeps the override on this
   page. */

#tire-finder-size .tss-field .form-control {
    font-family: Inter;
    font-size: 16px;
    height: 52px;
    padding: 0 40px 0 16px;
    color: var(--tss-ink);
    background: #fff;
    border: 1px solid var(--tss-rule);
    border-radius: var(--tss-radius);
}

#tire-finder-size .tss-field .form-control::placeholder {
    color: var(--tss-muted);
}

/* The border takes the darker green: bright #3EB049 is 2.7:1 on white, under
   the 3:1 a focus indicator owes its surroundings. The glow can stay bright,
   since the border is what carries the contrast. */
#tire-finder-size .tss-field .form-control:focus {
    outline: none;
    border-color: var(--tss-green-text);
    box-shadow: 0 0 0 3px rgba(62, 176, 73, .25);
}

/* The autocomplete's clear control is an Iconify svg carrying .text-secondary,
   .fs-2 and an inline top: 4px tuned for a shorter input than this one. Pinned
   here so it reads as a quiet affordance rather than a 32px glyph floating near
   the top edge, and so its colour stops depending on what it inherits. */
#tire-finder-size .tss-field svg.position-absolute {
    top: 50% !important;
    right: 12px !important;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--tss-muted);
    transform: translateY(-50%);
    cursor: pointer;
}

#tire-finder-size .tss-field svg.position-absolute:hover {
    color: var(--tss-ink);
}

#tire-finder-size .tss-field .dropdown-menu {
    border: 1px solid var(--tss-rule);
    border-radius: var(--tss-radius);
    box-shadow: var(--tss-elevation-hover);
}

/* ---------- Responsive ---------- */

/* Phone: every band steps down together, including the intro. The intro used
   to sit outside this block, which is what left it tight while everything
   around it loosened. */
@media (max-width: 767px) {
    .tss-shell {
        padding-inline: 16px;
    }

    #breadcrumb:has(~ #tire-finder-size) > div {
        padding: 16px 16px 0 !important;
    }

    .tss-title {
        font-size: 36px;
    }

    .tss-band-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .tss-intro {
        padding-block: 16px 28px;
    }

    .tss-intro__inner {
        gap: 16px;
    }

    /* Everything in the header centres once the actions go full width: a
       left-aligned title above a centred label reads as two separate blocks. */
    .tss-intro__inner {
        justify-content: center;
        text-align: center;
    }

    .tss-intro__actions {
        width: 100%;
        align-items: stretch;
    }

    .tss-intro__actions-label {
        text-align: center;
    }

    .tss-intro__actions-row > * {
        flex: 1;
        justify-content: center;
    }

    .tss-search {
        padding-block: 28px 20px;
    }

    /* The panel's own padding stops competing with the 16px page gutter. */
    .tss-form {
        padding: 20px 20px 18px;
    }

    .tss-form__submit {
        width: 100%;
    }
}

@media (max-width: 479px) {
    /* The label above already says "shop", so the buttons drop the verb and stay
       side by side rather than stacking. They are the way out to another page,
       and two full-width rows took a lot of the first screen on a page that is
       not theirs. */
    .tss-intro__verb {
        display: none;
    }
}