/* Saved vehicles — shared band
   -------------------------------------------------------------------------
   Styles for src/pages/tire_search/shared/savedVehicles.js, loaded by both the
   "tire-search" and "tire-search-size" bundles so the band renders identically
   on the by-vehicle and by-size pages.

   Self-contained on purpose: the tokens, the shell width and the band heading
   are declared here rather than borrowed from a page sheet, because the two
   pages mount under different ids and name their equivalents tsv- and tss-.
   Nothing here is qualified by a mount id for the same reason; where a globally
   loaded sheet would otherwise win on specificity, the selector chains through
   .sv-band instead.
   ------------------------------------------------------------------------- */

.sv-band {
    --sv-blue: #1D4288;
    /* Bright #3EB049 is 2.7:1 on white, so green text takes this darker tone. */
    --sv-green-text: #237A2E;
    --sv-red: #EF4444;
    --sv-ink: #1A1A1A;
    --sv-muted: #555;
    --sv-radius: 6px;
    /* The elevation the tire-search pages use for every raised white surface. */
    --sv-elevation: 0 4px 20px rgba(0, 0, 0, .1);

    /* The band's ground travels with its heading colour, so a page picking a
       variant never has to restate the second one. */
    --sv-band-bg: var(--sv-blue);
    --sv-title: #fff;

    background: var(--sv-band-bg);
    /* A step under the 56px the surrounding content bands take: the cards carry
       their own padding, so the band reads roomy at less. */
    padding-block: 44px;
}

/* For a page whose section above is white and below is brand blue, where a
   third blue band would run straight into the one under it. */
.sv-band--slate {
    --sv-band-bg: #F3F4F6;
    --sv-title: var(--sv-blue);
}

/* For a page whose section above is already tinted, where a tinted band here
   would merge with it. */
.sv-band--white {
    --sv-band-bg: #fff;
    --sv-title: var(--sv-blue);
}

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

/* Centred rather than filling the row: there are at most three saved vehicles,
   so stretching them across a 1400px band left the cards oversized and the
   band lopsided at one or two. */
.sv-title {
    font-family: BebasNeue;
    font-size: 36px;
    line-height: 1;
    text-align: center;
    color: var(--sv-title);
    margin: 0 0 28px;
}

/* Focus lands here after a card is removed. It is a heading rather than a
   control, so no ring: the announcement is the point, not a target to press. */
.sv-title:focus {
    outline: none;
}

.sv-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.sv-grid > * {
    flex: 0 1 360px;
}

.sv-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--sv-radius);
    padding: 20px 22px 22px;
    box-shadow: var(--sv-elevation);
}

.sv-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sv-card__title {
    font-family: Inter;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sv-blue);
    margin: 0;
}

.sv-card__trim {
    font-family: Inter;
    font-size: 14px;
    line-height: 20px;
    color: var(--sv-muted);
    margin: 2px 0 0;
}

/* Red because it removes a saved vehicle: the only destructive control on
   either page, and the one place red appears, so it never competes with the
   green CTAs. #EF4444 is the red already in main.css rather than a new value. */
.sv-card__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--sv-red);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.sv-card__remove:hover {
    background: rgba(239, 68, 68, .12);
}

.sv-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 16px 0 18px;
}

.sv-size {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sv-size dt {
    font-family: Inter;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sv-blue);
}

.sv-size dd {
    font-family: Inter;
    font-size: 15px;
    font-weight: 700;
    color: var(--sv-ink);
    margin: 0;
}

.sv-card__cta {
    width: 100%;
    margin-top: auto;
}

/* Takes the place of the card's CTA while a removal is armed, so the confirm
   sits where the shopper is already looking and nothing shifts around it. Red
   removes, green keeps. */
.sv-confirm {
    margin-top: auto;
}

.sv-confirm__copy {
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    color: var(--sv-ink);
    margin: 0 0 10px;
}

.sv-confirm__actions {
    display: flex;
    gap: 10px;
}

.sv-btn-danger,
.sv-btn-keep {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Inter;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 11px 16px;
    border-radius: var(--sv-radius);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

/* Chained through the band: a plain class rule lost its colour to a
   higher-specificity selector in the globally loaded sheets, leaving both
   buttons with the browser's default black label. */
.sv-band .sv-confirm__actions .sv-btn-danger {
    color: #fff;
    background: var(--sv-red);
    border: 1px solid var(--sv-red);
}

.sv-band .sv-confirm__actions .sv-btn-danger:hover {
    color: #fff;
    background: #D32F2F;
    border-color: #D32F2F;
}

.sv-band .sv-confirm__actions .sv-btn-keep {
    color: var(--sv-green-text);
    background: #fff;
    border: 1px solid var(--sv-green-text);
}

.sv-band .sv-confirm__actions .sv-btn-keep:hover {
    color: #fff;
    background: var(--sv-green-text);
}

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

@media (max-width: 767px) {
    .sv-band {
        padding-block: 28px;
    }

    .sv-shell {
        padding-inline: 16px;
    }

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

    .sv-grid > * {
        flex: 1 1 100%;
    }
}