/* UKCGR Dealer Portal – all site styles.
   Loaded after Bootstrap 5.3.3. Bootstrap's CSS is in cascade layers and this file isn't, so anything set here
   overrides Bootstrap regardless of selector specificity. Sections are in cascade order: shared rules first,
   then page-specific rules. */

/* ######################################################################
   Shared: tokens, base, Bootstrap resets, navbar, footer
   ###################################################################### */

:root {
    /* Colors */
    --color-dark-blue: #00214a;
    --color-dark-blue-disabled: #8090a5;
    --color-light-blue: #5f89c6;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #14243a;
    --color-text-muted: #5d6b7c;
    --color-dark-grey: #535353;
    --color-border: #e6eaf0;
    --color-outline: #cad3df;
    --color-surface: #f7f9fc;
    --color-placeholder: #d2d2d2;
    --color-error: #b42318;
    --color-success: #067647;
    /* Typography */
    --font-primary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-brand: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --fs-heading: 32px;
    --fs-brand: 21px;
    --fs-lg: 16px;
    --fs-md: 15px;
    --fs-body: 16px;
    --fs-sm: 14px;
    --fs-xs: 13px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-normal: normal;
    --lh-body: 1.5;
    --lh-heading: 1.2;
    --ls-brand: -1.05px;
    --fs-lead: 19.778px;
    /* Spacing */
    --space-4: 4px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-50: 50px;
    --space-56: 56px;
    --space-80: 80px;
    --space-13: 13px;
    --space-14: 14px;
    --space-20: 20px;
    --space-33: 33px;
    --space-51: 51px;
    --space-53: 53px;
    --space-58: 58px;
    /* Sizes */
    --navbar-height: 100px;
    --footer-height: 64px;
    --content-width: 1028px;
    --content-min-height: 900px;
    --about-image-size: 318px;
    --icon-size: 18px;
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-round: 50%;
    /* Motion */
    --transition-menu: 300ms ease;
    --transition-nav: 250ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

/* Bootstrap 6 opts the page into light/dark colour schemes, tints native controls with its accent
   colour and turns off the mobile tap highlight. This design is light-only and uses the browser's
   own control colours, so put those back to the browser defaults. */
:root {
    color-scheme: normal;
    accent-color: auto;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    font-family: var(--font-primary);
    line-height: var(--lh-normal);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: revert;
    -webkit-text-size-adjust: revert;
    text-size-adjust: revert;
}

/* The sign-in and search pages use a white page background instead of the light grey surface. */
.body--white {
    background-color: var(--color-white);
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: auto;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--color-light-blue);
    outline-offset: 2px;
}

/* ========== Bootstrap components ========== */
/* Bootstrap's buttons and form controls come with their own sizing, rounded corners, inset shadow, transitions
   and disabled styling. This design sets its own look on each element (in the page stylesheets, which load
   after this file), so these rules only switch off the Bootstrap extras that those element rules don't
   already override. */
.btn {
    justify-content: normal;
    min-height: auto;
    gap: normal;
    vertical-align: baseline;
    white-space: normal;
    user-select: auto;
    transition: none;
}

    .btn:disabled {
        opacity: 1;
        pointer-events: auto;
    }

.form-control {
    display: block;
    appearance: auto;
    min-height: auto;
    background-clip: border-box;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

.form-label {
    margin-bottom: 0;
    font-weight: inherit;
    color: inherit;
}

/* Bootstrap draws its own tick with ::before; the design's tick is the ::after in the page stylesheet. */
.check {
    position: static;
    inset: auto;
    transition: none;
}

    .check::before {
        content: none;
    }

.navbar-toggler {
    transition: none;
}

.chip {
    height: auto;
    gap: normal;
}

.card {
    color: inherit;
    overflow-wrap: normal;
}

/* ========== Navbar ========== */
.navbar {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    display: block;
    min-height: 0;
    padding: 0;
    container-type: normal;
    color: inherit;
    background-color: var(--color-dark-blue);
    border-bottom: 1px solid var(--color-border);
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--navbar-height);
    padding: 0 var(--space-50);
}

.navbar__brand {
    display: flex;
    align-items: flex-end;
    gap: var(--space-10);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    font-weight: inherit;
}

.navbar__logo {
    width: 163px;
    height: 36px;
}

.navbar__title {
    font-family: var(--font-brand);
    font-size: var(--fs-brand);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-brand);
    color: var(--color-white);
    white-space: nowrap;
}

.navbar__toggle {
    display: none;
}

.navbar__menu {
    flex: 1 0 0;
    min-width: 1px;
}

.navbar__list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar__item {
    display: list-item;
}

.navbar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: normal;
    padding: 0 var(--space-16);
    border: 0;
    border-radius: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-white);
    white-space: nowrap;
    transition: color var(--transition-nav);
}

    .navbar__link:hover,
    .navbar__link:focus-visible {
        color: var(--color-light-blue);
    }

/* Hover/focus underline: grows out from the centre of the words to their full width (the span keeps it to the text,
   not the link's padding or the full-width links in the mobile menu). */
.navbar__link-text {
    position: relative;
}

    .navbar__link-text::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4px;
        height: 2px;
        background-color: var(--color-light-blue);
        border-radius: 1px;
        transform: scaleX(0);
        transition: transform var(--transition-nav);
    }

.navbar__link:hover .navbar__link-text::after,
.navbar__link:focus-visible .navbar__link-text::after {
    transform: scaleX(1);
}

/* ========== Footer ========== */
.footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    height: var(--footer-height);
    padding: 0 var(--space-80);
    overflow: hidden;
    background-color: var(--color-light-blue);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--color-white);
    white-space: nowrap;
}

/* ========== Tablet ========== */
@media (max-width: 1024px) {
    .navbar__inner {
        padding: 0 var(--space-32);
    }

    .navbar__toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        margin-right: -10px;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .navbar__toggle-bar {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-white);
        border-radius: 1px;
        transition: transform var(--transition-menu), opacity var(--transition-menu);
    }

    .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .navbar__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: grid;
        grid-template-rows: 0fr;
        background-color: var(--color-dark-blue);
        visibility: hidden;
        transition: grid-template-rows var(--transition-menu), visibility var(--transition-menu);
    }

        /* Bootstrap's Collapse plugin adds .show to open the menu. The menu deliberately doesn't use
     Bootstrap's .collapse class: its height animation needs interpolate-size, which Safari lacks,
     so the grid-row animation above is kept instead. */
        .navbar__menu.show {
            grid-template-rows: 1fr;
            visibility: visible;
            border-bottom: 1px solid var(--color-border);
        }

    .navbar__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        overflow: hidden;
    }

    .navbar__link {
        justify-content: flex-start;
        padding: var(--space-16) var(--space-32);
    }

    .footer {
        padding: 0 var(--space-50);
    }
}

/* ========== Mobile ========== */
@media (max-width: 768px) {
    :root {
        --fs-heading: 28px;
    }

    .navbar__inner {
        height: 72px;
        padding: 0 var(--space-16);
    }

    .navbar__logo {
        width: 117px;
        height: 26px;
    }

    .navbar__title {
        font-size: 16px;
        letter-spacing: -0.8px;
    }

    .navbar__link {
        padding: var(--space-16);
    }




    .footer {
        height: auto;
        min-height: var(--footer-height);
        padding: var(--space-16);
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar__menu,
    .navbar__toggle-bar,
    .navbar__link,
    .navbar__link-text::after {
        transition: none;
    }
}

/* ######################################################################
   Content pages: about.html, how-it-works.html, contact.html
   ###################################################################### */

/* ========== Content page ========== */
.page {
    flex: 1 0 auto;
    min-height: var(--content-min-height);
    padding: var(--space-32) var(--space-50) var(--space-48);
}

.page__wrapper {
    display: flex;
    justify-content: center;
    gap: var(--space-58);
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-51) 0;
}

.page__content {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-33);
    overflow-wrap: break-word;
}

.page__title {
    width: 100%;
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--color-dark-blue);
}

.page__text,
.page__subheading {
    width: 100%;
    margin: 0;
    font-family: var(--font-brand);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

.page__text {
    font-weight: var(--fw-regular);
}

.page__subheading {
    font-weight: var(--fw-bold);
}

.page__lead {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--color-dark-blue);
}

.page__highlight {
    font-weight: var(--fw-bold);
    color: var(--color-light-blue);
}

.page__divider {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-outline);
    opacity: 1;
}

@media (max-width: 1024px) {
    :root {
        --fs-lead: 18px;
    }

    .page {
        min-height: 0;
        padding: var(--space-32);
    }

    .page__wrapper {
        padding: var(--space-32) 0;
    }
}

@media (max-width: 768px) {
    .page {
        padding: var(--space-24) var(--space-16) var(--space-32);
    }

    .page__wrapper {
        padding: var(--space-24) 0;
    }
}

/* ######################################################################
   about.html
   ###################################################################### */

/* ========== About ========== */
.about__media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-58);
    flex-shrink: 0;
}

.about__image {
    width: var(--about-image-size);
    height: var(--about-image-size);
    border-radius: var(--radius-round);
    background-color: var(--color-placeholder);
}

@media (max-width: 1024px) {
    :root {
        --about-image-size: 240px;
    }

    .page--about .page__wrapper {
        gap: var(--space-48);
    }

    .about__media {
        gap: var(--space-48);
    }
}

@media (max-width: 768px) {
    .page--about .page__wrapper {
        flex-direction: column;
        gap: var(--space-33);
    }

    .page--about .page__content {
        flex: none;
        width: 100%;
    }

    .about__media {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-24);
        width: 100%;
    }

    .about__image {
        width: min(var(--about-image-size), calc((100vw - 56px) / 2));
        height: auto;
        aspect-ratio: 1;
    }
}

/* ######################################################################
   how-it-works.html
   ###################################################################### */

/* ========== How it works ========== */
:root {
    --fs-submit: 18px;
    --step-label-height: 19.5px;
    --step-indicator-size: 72px;
    --space-30: 30px;
    --space-28: 28px;
    --space-9: 9px;
    --radius-sm: 4px;
    --radius-lg: 8px;
}

/* Page heading with the strapline under it */
.page__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    width: 100%;
}

.page__link {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
}

/* 3-step timeline: a light blue line runs behind the step circles, from the centre of the first to the centre of the last. */
.steps {
    --steps-gap: var(--space-48);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--steps-gap);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .steps::before {
        content: "";
        position: absolute;
        top: calc(var(--step-label-height) + var(--space-20) + var(--step-indicator-size) / 2 - 2px);
        left: calc((100% - var(--steps-gap) * 2) / 6);
        right: calc((100% - var(--steps-gap) * 2) / 6);
        height: 4px;
        background-color: var(--color-light-blue);
        border-radius: 2px;
    }

.steps__item {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);
    font-family: var(--font-brand);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-align: center;
}

.steps__label {
    padding: 0 var(--space-9);
    background-color: var(--color-light-blue);
    border-radius: 38px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    color: var(--color-white);
    text-transform: uppercase;
    white-space: nowrap;
}

.steps__indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--step-indicator-size);
    height: var(--step-indicator-size);
    background-color: var(--color-dark-blue);
    border-radius: var(--radius-round);
    filter: drop-shadow(0 8px 9px rgba(0, 33, 74, 0.1));
}

.steps__icon--24 {
    width: 24px;
    height: 24px;
}

.steps__icon--20 {
    width: 20px;
    height: 20px;
}

.steps__icon--18 {
    width: 18px;
    height: 18px;
}

.steps__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    width: 100%;
}

.steps__title {
    margin: 0;
    font-size: inherit;
    font-weight: var(--fw-bold);
    line-height: inherit;
    color: var(--color-dark-blue);
}

.steps__text {
    margin: 0;
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
}

/* Reveal: js/steps-reveal.js adds steps--reveal (hidden state) and then steps--revealed once the timeline is on screen
   (straight away if it already is when the page loads).
   The line draws from the first circle to the last; each step pops its circle and fades its tag and text in as the line
   reaches it (--step-delay). On mobile the vertical joins between the circles draw downwards in the same rhythm. */
.steps--reveal {
    --step-stagger: 550ms;
}

    .steps--reveal .steps__item:nth-child(2) {
        --step-delay: var(--step-stagger);
    }

    .steps--reveal .steps__item:nth-child(3) {
        --step-delay: calc(var(--step-stagger) * 2);
    }

    .steps--reveal::before {
        scale: 0 1;
        transform-origin: left center;
    }

    .steps--reveal .steps__item::after {
        scale: 1 0;
        transform-origin: center top;
    }

    .steps--reveal .steps__indicator {
        opacity: 0;
        scale: 0.5;
    }

    .steps--reveal .steps__label,
    .steps--reveal .steps__body {
        opacity: 0;
        translate: 0 16px;
    }

/* The transitions only apply on the way in, so arming the hidden state doesn't animate anything out. */
.steps--revealed::before {
    scale: 1;
    transition: scale calc(var(--step-stagger) * 2) cubic-bezier(0.45, 0, 0.55, 1) 150ms;
}

.steps--revealed .steps__item::after {
    scale: 1;
    transition: scale var(--step-stagger) cubic-bezier(0.45, 0, 0.55, 1) calc(var(--step-delay, 0ms) + 250ms);
}

.steps--revealed .steps__indicator {
    opacity: 1;
    scale: 1;
    transition: opacity 300ms ease var(--step-delay, 0ms), scale 600ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--step-delay, 0ms);
}

.steps--revealed .steps__label,
.steps--revealed .steps__body {
    opacity: 1;
    translate: 0 0;
    transition: opacity 600ms var(--ease-hero) calc(var(--step-delay, 0ms) + 150ms), translate 600ms var(--ease-hero) calc(var(--step-delay, 0ms) + 150ms);
}

/* Tick lists */
.ticks {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticks__item {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    font-family: var(--font-brand);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

    .ticks__item::before {
        content: "";
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNoZWNrYm94Ij4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMuNTcxNDMgMUMyLjE1MzI5IDEgMSAyLjE1MzI5IDEgMy41NzE0M1YxNi40Mjg2QzEgMTcuODQ2NyAyLjE1MzI5IDE5IDMuNTcxNDMgMTlIMTYuNDI4NkMxNy44NDY3IDE5IDE5IDE3Ljg0NjcgMTkgMTYuNDI4NlYzLjU3MTQzQzE5IDIuMTUzMjkgMTcuODQ2NyAxIDE2LjQyODYgMUgzLjU3MTQzWk0zLjU3MTQzIDE2LjQyODZWMy41NzE0M0gxNi40Mjg2TDE2LjQzMTEgMTYuNDI4NkgzLjU3MTQzWiIgZmlsbD0iIzVGODlDNiIvPgo8cGF0aCBpZD0iVmVjdG9yXzIiIGQ9Ik05LjE4MDUxIDEwLjM0MDFMNy42MDQ5MyA4LjY2NTg0TDUuOTAyOTIgMTAuNTQ5Nkw5LjE5MDIzIDE0LjAzNjVMMTQuOTAyOSA3LjkwOTcxTDEzLjE5MzYgNi4wMzY1TDkuMTgwNTEgMTAuMzQwMVoiIGZpbGw9IiM1Rjg5QzYiLz4KPC9nPgo8L3N2Zz4K") no-repeat center / 20px 20px;
    }

/* Newsletter */
.newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    width: 100%;
    padding: var(--space-48) var(--space-56);
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 36px -8px rgba(0, 33, 74, 0.08);
}

.newsletter__heading {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-heading);
    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
    letter-spacing: -1.6px;
    color: var(--color-dark-blue);
}

.newsletter__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.newsletter__heading-text {
    flex: 1 0 0;
    min-width: 1px;
}

.newsletter__form {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-10);
    width: 100%;
    margin: 0;
}

.newsletter__field {
    flex: 1 1 0;
    min-width: 0;
}

.newsletter__input {
    display: block;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0 var(--space-16);
    background-color: var(--color-white);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text);
}

    .newsletter__input::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    .newsletter__input:focus-visible {
        outline-offset: 1px;
    }

/* Manufacturer dropdown: styled like the text inputs, with Figma's up/down "select arrows" icon (402:930). */
.newsletter__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M0 4L4 0L8 4H0ZM0 8L4 12L8 8H0Z' fill='%235E6E85'/%3E%3C/svg%3E") no-repeat right 16px center / 8px 12px;
    cursor: pointer;
}

    /* Until a manufacturer is chosen the required select is :invalid, so its "Manufacturer" prompt reads like a placeholder. */
    .newsletter__select:invalid {
        color: var(--color-text-muted);
    }

    .newsletter__select option {
        color: var(--color-text);
    }

.newsletter__submit {
    flex: 0 0 111px;
    min-width: 111px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-9);
    height: 54px;
    padding: 0 var(--space-16);
    background-color: var(--color-dark-blue);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--fs-submit);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    color: var(--color-white);
    white-space: nowrap;
}

    .newsletter__submit:disabled {
        background-color: var(--color-dark-blue-disabled);
        cursor: not-allowed;
    }

.newsletter__form[aria-busy="true"] .newsletter__submit {
    cursor: progress;
}

.newsletter__hint {
    margin: var(--space-8) 0 0;
    font-family: var(--font-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-error);
}

.newsletter__status {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--color-success);
}

.newsletter__status--error {
    color: var(--color-error);
}

/* Figma 74:498 (latest): body text on this page is dark blue rather than the muted grey, at 18px. */
.page--how .page__content {
    gap: var(--space-30);
}

.page--how .page__text,
.page--how .steps__text,
.page--how .ticks__item {
    color: var(--color-dark-blue);
}

.page--how .page__text {
    font-size: 18px;
    line-height: 1.6;
}

.page--how .page__text--small {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.page--how .ticks {
    gap: var(--space-8);
}

.page--how .ticks__item {
    line-height: 1.6;
}

/* Figma's "3 step wrapper" (613:8015) adds 40px above and below the timeline, and its "Sign up wrapper" (613:8016)
   40px below the newsletter, on top of the content gap. */
.page--how .steps {
    margin-block: var(--space-40);
}

.page--how .newsletter {
    margin-bottom: var(--space-40);
}

@media (max-width: 768px) {
    .page--how .steps {
        margin-block: var(--space-24);
    }

    .page--how .newsletter {
        margin-bottom: var(--space-24);
    }
}

/* Proxy bids */
.how-proxy {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    width: 100%;
    padding-top: var(--space-30);
}

.how-proxy__title {
    margin: 0;
    font-size: var(--fs-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--color-dark-blue);
}

.how-proxy__button {
    align-self: flex-start;
    margin-top: var(--space-10);
    padding: 13px var(--space-20);
}

@media (max-width: 1024px) {
    .steps {
        --steps-gap: var(--space-24);
    }

    .newsletter {
        padding: var(--space-32);
    }

    .newsletter__heading {
        font-size: 28px;
        letter-spacing: -1.4px;
    }

    .newsletter__form {
        flex-wrap: wrap;
    }

    /* Two fields per row, then a full-width Submit underneath. */
    .newsletter__field {
        flex-basis: calc(50% - var(--space-10) / 2);
    }

    .newsletter__submit {
        flex-basis: 100%;
    }
}

@media (max-width: 768px) {
    /* Figma "3 steps timeline mobile" (354:1328): left-aligned, each step's circle on the left with its tag, title and
     text beside it, and the line running down between the circles. */
    .steps {
        flex-direction: column;
        gap: var(--space-28);
    }

        .steps::before {
            content: none;
        }

    .steps__item {
        position: relative;
        flex: none;
        display: grid;
        grid-template-columns: var(--step-indicator-size) minmax(0, 1fr);
        align-items: start;
        column-gap: var(--space-24);
        row-gap: var(--space-10);
        width: 100%;
        text-align: left;
    }

        /* Each step draws the line from the bottom of its circle to the top of the next one. */
        .steps__item:not(:last-child)::after {
            content: "";
            position: absolute;
            top: var(--step-indicator-size);
            bottom: calc(var(--space-28) * -1);
            left: calc(var(--step-indicator-size) / 2 - 2px);
            width: 4px;
            background-color: var(--color-light-blue);
        }

    .steps__indicator {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .steps__item:nth-child(2) .steps__indicator {
        background-color: var(--color-light-blue);
    }

    .steps__label {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }

    .steps__body {
        grid-column: 2;
        grid-row: 2;
    }

    .newsletter {
        gap: var(--space-24);
        padding: var(--space-32) var(--space-24);
    }

    .newsletter__heading {
        align-items: flex-start;
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    .newsletter__icon {
        width: 29px;
        height: 29px;
    }

    .newsletter__form {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-16);
    }

    .newsletter__field {
        flex: none;
    }

    .newsletter__submit {
        flex: none;
        width: 100%;
    }
}

/* ######################################################################
   contact.html
   ###################################################################### */

:root {
    --contact-width: var(--content-width);
    --contact-signup-width: 410px;
}

/* ========== Contact ========== */
.page__title--preserve {
    white-space: pre-wrap;
}

.contact__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    width: 100%;
}

/* Figma 146:549: the contact details on the left and the newsletter sign-up (the same form as index.html and
   how-it-works.html) in a 410px panel on the right, within the usual 1028px content width. Text is dark blue. */
.page--contact .page__title {
    font-size: 30px;
    font-weight: var(--fw-bold);
}

.page--contact .page__text {
    line-height: 1.6;
    color: var(--color-dark-blue);
}

.page--contact .contact__section .page__text {
    line-height: var(--lh-body);
}

.contact__button {
    align-self: flex-start;
    /* Figma puts it 26px under the last expert item (16px list gap + 10px); the page's own gap is 33px. */
    margin-top: calc(var(--space-16) + var(--space-10) - var(--space-33));
    padding: 13px var(--space-20);
}

.page--contact .page__wrapper {
    max-width: var(--contact-width);
}

.contact__signup {
    flex: 0 0 var(--contact-signup-width);
    align-self: flex-start;
}

/* Stacked newsletter (Figma's "mobile" sign-in panel): every field full width, one under another. Only above the
   tablet breakpoint; below it the panel goes full width and the newsletter's own tablet and mobile layouts apply. */
@media (min-width: 1025px) {
    /* Doubled class so the tighter padding beats newsletter--dark's, which comes later in this file. */
    .newsletter.newsletter--stacked {
        gap: var(--space-32);
        padding: var(--space-24);
    }

    .newsletter--stacked .newsletter__heading {
        align-items: flex-start;
        line-height: 1.4;
    }

    .newsletter--stacked .newsletter__form {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-10);
    }

    .newsletter--stacked .newsletter__field,
    .newsletter--stacked .newsletter__submit {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .page--contact .page__wrapper {
        flex-direction: column;
        gap: var(--space-48);
    }

    .contact__signup {
        flex: none;
        align-self: stretch;
    }
}

/* Icon lists: contact details and "Speak to an expert" */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.contact-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--color-light-blue);
    border-radius: var(--radius-round);
}

.contact-list__content {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-list__label {
    margin: 0;
    font-family: var(--font-brand);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    color: var(--color-dark-blue);
}

.contact-list__value {
    flex: 1 0 0;
    min-width: 1px;
    margin: 0;
    font-family: var(--font-brand);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-dark-blue);
}

.contact-list__link:hover {
    text-decoration: underline;
}

/* ######################################################################
   index.html (home)
   Figma 445:2155. Reuses the shared navbar and footer, the newsletter (.newsletter*, here with the
   newsletter--dark modifier), the how-it-works 3-step timeline (.steps, here with steps--large) and the
   car-details action buttons (.details-action).
   ###################################################################### */

/* ========== Home ========== */
:root {
    --home-gutter: 150px;
    --home-content-width: 1208px;
    --hero-photo-height: 234px;
    --ease-hero: cubic-bezier(0.22, 1, 0.36, 1);
    --radius-xl: 24px;
    --space-40: 40px;
    --space-60: 60px;
    --space-64: 64px;
    --color-dark-error: #ffb4ab;
    --color-dark-success: #9fe0b4;
}

.home {
    flex: 1 0 auto;
    overflow-x: clip;
    color: var(--color-dark-blue);
}

.home__highlight {
    font-weight: var(--fw-bold);
    color: var(--color-light-blue);
}

.home__section-title {
    margin: 0;
    font-size: 36px;
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    letter-spacing: -0.03em;
    color: var(--color-dark-blue);
}

/* Hero: white panel with the title over three rounded photos. Figma puts a wide black ellipse behind it whose drop
   shadow shows as a soft shadow under the hero; the ::before does the same. */
.hero-holder {
    position: relative;
    z-index: 1;
}

    /* Anchored 13px above the hero's bottom edge (as in Figma) so the ellipse itself stays hidden behind the hero at any
   height and only its shadow shows. */
    .hero-holder::before {
        content: "";
        position: absolute;
        bottom: 13px;
        left: 50%;
        z-index: -1;
        width: 121.4%;
        height: 278px;
        max-height: calc(100% - 13px);
        background-color: var(--color-black);
        border-radius: var(--radius-round);
        box-shadow: 0 26px 35px rgba(0, 0, 0, 0.25);
        transform: translateX(-50%);
    }

.hero {
    display: flex;
    flex-direction: column;
    gap: 39px;
    padding: 70px var(--home-gutter);
    overflow: hidden;
    background-color: var(--color-white);
}

/* Load-in: the title rises and fades in, then the three photos follow, staggered. The animations use the individual
   `translate` and `opacity` properties so they don't clash with the parallax, which uses `transform`. */
@keyframes hero-rise {
    from {
        opacity: 0;
        translate: 0 32px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes hero-photo-in {
    from {
        opacity: 0;
        translate: 0 48px;
        scale: 0.96;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/* Parallax: js/home.js sets --hero-scroll (pixels scrolled, while the hero is on screen). The title and each photo drift
   down at a slightly different fraction of that, so they lag behind the page at different depths. The hero clips them. */
.hero__title,
.hero__photo {
    transform: translate3d(0, calc(var(--hero-scroll, 0) * var(--parallax-rate, 0) * 1px), 0);
    will-change: transform;
}

.hero__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: 21px 0;
}

.hero__title {
    --parallax-rate: 0.4;
    margin: 0;
    animation: hero-rise 800ms var(--ease-hero) both;
    font-size: 68px;
    font-weight: var(--fw-bold);
    line-height: 1.03;
    letter-spacing: -0.03em;
    color: var(--color-light-blue);
}

/* Photos keep Figma's 706 : 370 : 304 widths at 1728px and scale with the window (Figma 595:7842). */
.hero__gallery {
    display: grid;
    grid-template-columns: 706fr 370fr 304fr;
    grid-template-rows: var(--hero-photo-height);
    gap: var(--space-24);
}

.hero__photo {
    width: 100%;
    min-width: 0;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
    animation: hero-photo-in 900ms var(--ease-hero) both;
}

.hero__photo--profile {
    --parallax-rate: 0.18;
    animation-delay: 200ms;
}

.hero__photo--front {
    --parallax-rate: 0.24;
    animation-delay: 340ms;
}

.hero__photo--detail {
    --parallax-rate: 0.3;
    animation-delay: 480ms;
}

/* Figma crops the headlight from the left and the parked cars a little in from the left. */
.hero__photo--front {
    object-position: left center;
}

.hero__photo--detail {
    object-position: 38% center;
}

/* Main content: one 1208px column. */
.home__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-60);
    max-width: calc(var(--home-content-width) + var(--home-gutter) * 2);
    margin: 0 auto;
    padding: var(--space-80) var(--home-gutter);
}

.home-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.home-intro__title {
    margin: 0;
    font-size: 41px;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--color-dark-blue);
}

/* The UKCGR logo stands in for the word "UKCGR" (Figma 3:29). Its letters are all capitals, so it is sized to the
   heading's cap height and sits on the baseline, matching the text at every heading size. */
.home-intro__logo {
    display: inline;
    width: auto;
    height: 0.72em;
    height: 1cap;
    vertical-align: baseline;
}

.home-intro__lead {
    margin: 0;
    font-size: 26px;
    line-height: 1.42;
}

/* "Who we are" uses a smaller heading than "How it works". */
.home-about .home__section-title {
    font-size: 30px;
}

.home-about {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.home-about__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.home-about__body {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
}

.home-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    max-width: 800px;
}

    .home-actions .details-action {
        padding: 13px var(--space-20);
    }

/* Dark newsletter panel (Figma 533:6774): same form and validation, on navy, no border. */
.newsletter--dark {
    padding: var(--space-40);
    background-color: var(--color-dark-blue);
    border: 0;
    border-radius: var(--radius-xl);
}

    .newsletter--dark .newsletter__heading {
        color: var(--color-white);
    }

    .newsletter--dark .newsletter__input {
        border-color: var(--color-light-blue);
    }

    .newsletter--dark .newsletter__submit {
        background-color: var(--color-light-blue);
    }

        .newsletter--dark .newsletter__submit:disabled {
            background-color: color-mix(in srgb, var(--color-light-blue) 45%, var(--color-dark-blue));
            color: rgba(255, 255, 255, 0.7);
        }

    /* The light-background red and green don't show on navy, so the hints and status use lighter tints. */
    .newsletter--dark .newsletter__hint,
    .newsletter--dark .newsletter__status--error {
        color: var(--color-dark-error);
    }

    .newsletter--dark .newsletter__status {
        color: var(--color-dark-success);
    }

    .newsletter--dark .newsletter__status--error {
        color: var(--color-dark-error);
    }

/* How it works: the same timeline as how-it-works.html, a size up (Figma 594:7683). */
.home-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 49px;
}

.steps--large .steps__item {
    font-size: 18px;
    line-height: 1.6;
}

.home-steps__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-14);
    padding: var(--space-24) 36px;
    background-color: var(--color-dark-blue);
    border: 1px solid var(--color-white);
    border-radius: var(--radius-pill);
    font-size: 18px;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    letter-spacing: 0.08em;
    color: var(--color-white);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 150ms ease;
}

    .home-steps__button:hover {
        background-color: var(--color-light-blue);
    }

.home-steps__button-icon {
    width: 16px;
    height: 16px;
}

/* Band above the footer */
.invitation {
    padding: var(--space-48) 88px;
    background-color: var(--color-dark-blue);
}

.invitation__title {
    margin: 0;
    font-size: 44px;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    letter-spacing: -0.03em;
    color: var(--color-white);
}

@media (max-width: 1440px) {
    :root {
        --home-gutter: var(--space-64);
        --hero-photo-height: clamp(170px, 16vw, 234px);
    }

    .hero__title {
        font-size: 60px;
    }
}

@media (max-width: 1024px) {
    :root {
        --home-gutter: var(--space-32);
    }

    .hero {
        gap: var(--space-24);
        padding-top: var(--space-48);
        padding-bottom: var(--space-48);
    }

    .hero__title {
        font-size: 52px;
    }

    /* Two photos: the SUV and the headlight. */
    .hero__gallery {
        grid-template-columns: 706fr 370fr;
    }

    .hero__photo--detail {
        display: none;
    }

    .home__content {
        gap: var(--space-48);
        padding-top: var(--space-64);
        padding-bottom: var(--space-64);
    }

    .home-intro__title {
        font-size: 36px;
    }

    .home-intro__lead {
        font-size: 22px;
    }

    .home__section-title {
        font-size: 32px;
    }

    .home-about .home__section-title {
        font-size: 28px;
    }

    .home-about {
        gap: var(--space-40);
    }


    .newsletter--dark {
        padding: var(--space-32);
    }

    .invitation {
        padding: var(--space-40) var(--home-gutter);
    }

    .invitation__title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    :root {
        --home-gutter: var(--space-16);
        --hero-photo-height: 200px;
    }

    .hero {
        gap: var(--space-16);
        padding-top: var(--space-24);
        padding-bottom: var(--space-32);
    }

    .hero__heading {
        padding: 0;
    }

    .hero__title {
        font-size: 40px;
    }

    /* One photo, the SUV. */
    .hero__gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__photo--front {
        display: none;
    }

    .hero__photo {
        border-radius: var(--space-16);
    }

    .home__content {
        gap: var(--space-40);
        padding-top: var(--space-48);
        padding-bottom: var(--space-48);
    }

    .home-intro {
        gap: var(--space-16);
    }

    .home-intro__title {
        font-size: 30px;
    }

    .home-intro__lead {
        font-size: 20px;
    }

    .home__section-title,
    .home-about .home__section-title {
        font-size: 26px;
    }

    .home-about {
        gap: var(--space-32);
    }

    .home-about__text {
        gap: var(--space-16);
    }

    .home-about__body {
        font-size: var(--fs-body);
        line-height: 1.6;
    }

    .home-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-12);
    }

    .newsletter--dark {
        padding: var(--space-24);
        border-radius: var(--space-16);
    }

    .home-steps {
        align-items: stretch;
        gap: var(--space-32);
    }

        .home-steps .home__section-title {
            text-align: left;
        }

    .steps--large .steps__item {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
    }

    .home-steps__button {
        align-self: center;
        padding: var(--space-16) 28px;
        font-size: var(--fs-body);
    }

    .invitation {
        padding: var(--space-32) var(--home-gutter);
    }

    .invitation__title {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-steps__button {
        transition: none;
    }

    .hero__title,
    .hero__photo {
        animation: none;
        transform: none;
    }
}

/* ######################################################################
   sign in page.html
   ###################################################################### */

/* ========== Sign in page ========== */
:root {
    --panel-width: 560px;
    --control-height: 54px;
    /* Shadow */
    --shadow-panel: 0 12px 36px -8px rgba(0, 33, 74, 0.08);
}

/* :where() keeps this as weak as a plain `input` selector, so .form__input's own font-size still wins. */
:where(.sign-in) input {
    font: inherit;
    color: inherit;
}

/* ========== Sign in area ========== */
.sign-in {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-48) var(--space-16);
}

.sign-in__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
}

.sign-in__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-32);
    width: 100%;
    max-width: var(--panel-width);
    padding: var(--space-48) var(--space-56);
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
}

.sign-in__welcome {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    width: 100%;
}

.sign-in__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-10);
    margin: 0;
    font-size: var(--fs-heading);
    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
    color: var(--color-dark-blue);
}

.sign-in__heading-text {
    white-space: nowrap;
}

.sign-in__logo {
    width: 119px;
    height: 27px;
    flex-shrink: 0;
}

/* ========== Form ========== */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    width: 100%;
    margin: 0;
}

.form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
}

.form__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text);
}

.form__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--space-16);
    background-color: var(--color-white);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

    .form__control:focus-within {
        outline: 2px solid var(--color-light-blue);
        outline-offset: 1px;
    }

.form__input {
    flex: 1 0 0;
    min-width: 1px;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text);
}

    .form__input::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

.form__input--password::placeholder {
    color: var(--color-text);
}

.form__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-shrink: 0;
    padding: var(--space-8) 0 var(--space-8) var(--space-16);
    border: 0;
    background: none;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
}

.form__icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
}

.form__preferences {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    width: 100%;
}

.form__remember {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text);
    white-space: nowrap;
}

.form__checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: grid;
    place-content: center;
}

    .form__checkbox:checked {
        background-color: var(--color-dark-blue);
        border-color: var(--color-dark-blue);
    }

        .form__checkbox:checked::after {
            content: "";
            width: 5px;
            height: 9px;
            margin-top: -2px;
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

.form__forgot {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
    text-decoration: underline;
    text-decoration-color: var(--color-dark-blue);
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
    white-space: nowrap;
}

.form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--control-height);
    padding: 0;
    background-color: var(--color-dark-blue);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-white);
}

/* ========== Panel footer items ========== */
.sign-in__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background-color: var(--color-border);
}

.sign-in__create {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sign-in__create-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-black);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
    white-space: nowrap;
}

.sign-in__support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    width: 100%;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}

.sign-in__support-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
}

.sign-in__support-link {
    font-weight: var(--fw-semibold);
    color: var(--color-dark-blue);
}

/* ========== Mobile ========== */
@media (max-width: 768px) {
    .sign-in {
        padding: var(--space-32) var(--space-16);
    }

    .sign-in__panel {
        gap: var(--space-24);
        padding: var(--space-32) var(--space-24);
    }

    .form__preferences {
        flex-wrap: wrap;
    }
}

/* ######################################################################
   Search results, shared: OLD/search-old.html and search.html (results, cards, chips, pagination, .filter*)
   ###################################################################### */

/* ========== Search results ========== */
:root {
    --color-pill: #f1f5f9;
    --fs-filter-title: 18px;
    --fs-caption: 12px;
    --sidebar-width: 280px;
    --results-gap: 50px;
    --grid-columns: 4;
    --space-5: 5px;
    --space-6: 6px;
    --space-9: 9px;
    --space-15: 15px;
    --space-18: 18px;
    --filter-height: 36px;
    --filter-height-open: 38px;
    --transition-filter: 320ms cubic-bezier(0.22, 1, 0.36, 1);
    --radius-pill: 999px;
    --shadow-results: 0 12px 18px rgba(0, 33, 74, 0.08);
}

.results {
    flex: 1 0 auto;
    padding: 0 var(--space-50);
    background-color: var(--color-surface);
}

.results__panel {
    display: flex;
    gap: var(--results-gap);
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-32) 0;
    border-radius: var(--radius-lg);
    filter: drop-shadow(var(--shadow-results));
}

/* Filters */
.filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: var(--sidebar-width);
    flex-shrink: 0;
    padding: var(--space-20);
    background-color: var(--color-dark-blue);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.filters__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-12);
}

.filters__title {
    margin: 0;
    font-size: var(--fs-filter-title);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-white);
    white-space: nowrap;
}

.filters__reset {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
}

.filters__reset-icon {
    width: 13px;
    height: 13px;
}

.filters__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow var(--transition-filter);
}

    /* Each filter's body is opened and closed by Bootstrap's Collapse plugin, which adds .show to the body and
   sets aria-expanded on its toggle. The bodies don't use Bootstrap's .collapse class: its height animation
   needs interpolate-size, which Safari lacks, so the grid-row animation below is kept instead. */
    .filter:has(> .filter__toggle[aria-expanded="true"]) {
        box-shadow: inset 0 0 0 1px var(--color-border);
    }

.filter__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--filter-height);
    padding: 0 var(--space-12);
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text);
    transition: height var(--transition-filter), padding var(--transition-filter);
}

    .filter__toggle[aria-expanded="true"] {
        align-items: flex-start;
        height: var(--filter-height-open);
        padding: var(--space-12) var(--space-12) 0;
    }

.filter__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-filter);
}

.filter__toggle[aria-expanded="true"] .filter__chevron {
    transform: rotate(90deg);
}

.filter__body {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--transition-filter), visibility var(--transition-filter);
}

    .filter__body.show {
        grid-template-rows: 1fr;
        visibility: visible;
    }

.filter__inner {
    min-height: 0;
    overflow: hidden;
}

.filter__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    padding: 0 var(--space-12) var(--space-18);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms ease, transform var(--transition-filter);
}

.filter__body.show .filter__fields {
    opacity: 1;
    transform: none;
    transition: opacity 250ms ease 80ms, transform var(--transition-filter);
}

.filter__range {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-15);
}

.filter__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.filter__label {
    font-family: var(--font-brand);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-black);
}

.filter__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: var(--space-5) 32px var(--space-5) var(--space-10);
    background: var(--color-white) url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTIgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJlcDphcnJvdy1yaWdodC1ib2xkIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMuOTcwMzEgMS4yMjY5NUMzLjgyOTY5IDEuMzY3NiAzLjc1MDcgMS41NTgzNCAzLjc1MDcgMS43NTcyM0MzLjc1MDcgMS45NTYxMSAzLjgyOTY5IDIuMTQ2ODUgMy45NzAzMSAyLjI4NzVMNy42ODI4MSA2TDMuOTcwMzEgOS43MTI1QzMuODM3OTkgOS44NTQ2NCAzLjc2NTk2IDEwLjA0MjYgMy43NjkzOCAxMC4yMzY3QzMuNzcyOCAxMC40MzA5IDMuODUxNCAxMC42MTYyIDMuOTg4NjQgMTAuNzUzNkM0LjEyNTg4IDEwLjg5MSA0LjMxMTA3IDEwLjk2OTggNC41MDUyMyAxMC45NzM0QzQuNjk5NCAxMC45NzcgNC44ODc0IDEwLjkwNTIgNS4wMjk2OSAxMC43NzNMOS4yNzMwNSA2LjUzMDg2QzkuNDEzNjYgNi4zOTAyMSA5LjQ5MjY2IDYuMTk5NDcgOS40OTI2NiA2LjAwMDU5QzkuNDkyNjYgNS44MDE3IDkuNDEzNjYgNS42MTA5NiA5LjI3MzA1IDUuNDcwMzFMNS4wMzA4NiAxLjIyNjk1QzQuODkwMjEgMS4wODYzNCA0LjY5OTQ3IDEuMDA3MzQgNC41MDA1OSAxLjAwNzM0QzQuMzAxNyAxLjAwNzM0IDQuMTEwOTYgMS4wODYzNCAzLjk3MDMxIDEuMjI2OTVaIiBmaWxsPSJibGFjayIvPgo8L2c+Cjwvc3ZnPgo=") no-repeat right 11px center / 12px 12px;
    border: 1px solid var(--color-black);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-brand);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-black);
}

/* Mobile filters toggle (hidden on larger screens) */
.filters-toggle {
    display: none;
}

/* Results column */
.results__main {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

.toolbar,
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.toolbar__meta {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.results__count {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.results__count-number {
    font-weight: var(--fw-bold);
    color: var(--color-light-blue);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-10) var(--space-14);
    background-color: var(--color-white);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.chip--active {
    padding: calc(var(--space-10) + 1px) calc(var(--space-14) + 1px);
    background-color: var(--color-light-blue);
    border: 0;
    color: var(--color-white);
}

.chip--current {
    padding: calc(var(--space-10) + 1px) calc(var(--space-14) + 1px);
    background-color: var(--color-dark-blue);
    border: 0;
    color: var(--color-white);
}

.pill {
    display: inline-flex;
    padding: var(--space-8) var(--space-12);
    background-color: var(--color-white);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.results__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--space-16);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Vehicle card */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-light-blue);
    border-radius: var(--radius-lg);
}

.card__media {
    aspect-ratio: 310.5 / 180;
    overflow: hidden;
}

.card__image {
    width: 103.7%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

.card__image--offset {
    margin-left: -3.2%;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-16);
}

.card__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-10);
}

.card__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-black);
}

.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.card {
    position: relative;
}

.card__add {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 18px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.card__add-icon {
    width: 20px;
    height: 22px;
    max-width: none;
    margin-left: -1px;
}

.card__spec {
    margin: 0;
    font-family: var(--font-brand);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

.card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.card__grade {
    padding: var(--space-6) var(--space-10);
    background-color: var(--color-pill);
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.card__price {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-black);
    white-space: nowrap;
}

.pagination__list {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1440px) {
    :root {
        --grid-columns: 3;
    }
}

@media (max-width: 1024px) {
    :root {
        --grid-columns: 2;
        --sidebar-width: 240px;
        --results-gap: 24px;
    }

    .results {
        padding: 0 var(--space-32);
    }
}

@media (max-width: 768px) {
    :root {
        --grid-columns: 2;
    }

    .results {
        padding: 0 var(--space-16);
    }

    .results__panel {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-24);
        padding: var(--space-24) 0;
    }

    .filters-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-12);
        width: 100%;
        min-height: 44px;
        padding: var(--space-12) var(--space-20);
        background-color: var(--color-dark-blue);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        cursor: pointer;
        font-size: var(--fs-lg);
        font-weight: var(--fw-semibold);
        line-height: var(--lh-normal);
        color: var(--color-white);
        text-align: left;
    }

    .filters-toggle__chevron {
        width: 9px;
        height: 9px;
        margin-right: var(--space-4);
        border: solid var(--color-white);
        border-width: 0 2px 2px 0;
        transform: translateY(-2px) rotate(45deg);
        transition: transform var(--transition-menu);
    }

    .filters-toggle[aria-expanded="true"] .filters-toggle__chevron {
        transform: translateY(2px) rotate(-135deg);
    }

    .filters-panel {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        margin-top: calc(var(--space-24) * -1);
        transition: grid-template-rows var(--transition-menu), visibility var(--transition-menu), margin-top var(--transition-menu);
    }

        .filters-panel.show {
            grid-template-rows: 1fr;
            visibility: visible;
            margin-top: calc(var(--space-12) - var(--space-24));
        }

    .filters-panel__inner {
        min-height: 0;
        overflow: hidden;
    }

    .filters {
        width: 100%;
    }

    .filter__range {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }

    .results__main {
        flex: none;
        width: 100%;
    }

    .toolbar__group .results__count {
        flex-basis: 100%;
    }

    .pagination {
        flex-direction: column-reverse;
        align-items: center;
    }
}

@media (max-width: 540px) {
    :root {
        --grid-columns: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .filter,
    .filter__toggle,
    .filter__chevron,
    .filter__body,
    .filter__fields,
    .filters-toggle__chevron,
    .filters-panel {
        transition: none !important;
    }
}

/* ######################################################################
   search.html (formerly search-v2.html)
   Reuses the shared search results styles above (chips, cards, pagination) and filter accordion (.filter*),
   with the filters moved out of the sidebar into a Bootstrap Dialog opened from "Filter and sort".
   ###################################################################### */

/* ========== Search results v2 ========== */
:root {
    --color-yellow: #ffcc00;
    --fs-dialog-title: 20px;
    --fs-badge: 7px;
    --ls-dialog-title: 0.6px;
    --dialog-width: 499px;
    --dialog-margin: 32px;
    --filter-row-height: 55px;
    --submit-height: 54px;
    --backdrop: rgba(0, 0, 0, 0.35);
    --transition-dialog: 300ms cubic-bezier(0, 0, 0.58, 1);
    --transition-card: 100ms cubic-bezier(0, 0, 0.58, 1);
    --shadow-card-hover: 0 0 8px 5px var(--color-light-blue);
}

.results--v2 {
    --grid-columns: 5;
}

/* Toolbar */
.toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    margin-right: var(--space-6);
    padding: var(--space-10) var(--space-20);
    background-color: var(--color-dark-blue);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-white);
    white-space: nowrap;
}

    .filter-trigger:hover,
    .filter-trigger:active {
        background-color: var(--color-dark-blue);
        color: var(--color-white);
    }

.filter-trigger__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.filter-trigger__image {
    width: 20px;
    height: 20px;
}

.filter-trigger__badge {
    position: absolute;
    top: 0;
    left: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    overflow: hidden;
    background-color: var(--color-yellow);
    border: 1px solid var(--color-dark-blue);
    border-radius: 50px;
    font-size: var(--fs-badge);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
}

/* Vehicle card hover (Figma "Vehicle Card=hover"): a 3px light grey stroke inside the edge and a light blue glow.
   The stroke is an outline so it sits over the image without changing the card's size. */
.results--v2 .card {
    outline: 3px solid transparent;
    outline-offset: -3px;
    transition: outline-color var(--transition-card), box-shadow var(--transition-card);
}

    .results--v2 .card:hover {
        outline-color: var(--color-border);
        box-shadow: var(--shadow-card-hover);
    }

/* Vehicle card content (Figma 341:675): make and model with the reg plate, a one-line spec, then three stats split by
   thin dividers. These elements are only used on search.html. */
:root {
    --color-reg-plate: #fbc50f;
    --color-grade-green: #009343;
}

.card__heading--plate {
    padding-bottom: 7px;
    border-bottom: 0.5px solid var(--color-outline);
}

.card__make,
.card__model {
    display: block;
}

/* Keeps "M-Sport" from splitting at its hyphen when the model name wraps on narrow cards. */
.card__trim {
    white-space: nowrap;
}

.card__plate {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 89px;
    height: 34px;
    padding: var(--space-5) var(--space-12);
    background-color: var(--color-reg-plate);
    border: 2px solid var(--color-black);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    color: var(--color-black);
    white-space: nowrap;
}

.card__details {
    margin: 0;
    font-family: var(--font-brand);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
    color: var(--color-dark-grey);
}

/* Figma 490:2106: green grade tab pinned 9px from the card's top-right corner (8px plus the card's 1px border). */
.card__grade-tag {
    position: absolute;
    top: var(--space-8);
    right: var(--space-8);
    padding: 0 var(--space-8);
    background-color: var(--color-grade-green);
    border: 1px solid var(--color-white);
    border-radius: 25px;
    font-family: var(--font-brand);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    color: var(--color-white);
    white-space: nowrap;
}

/* Figma's latest card spacing: 12px above and below the text, 10px under the name row. */
.results--v2 .card__body {
    padding: var(--space-12) var(--space-16);
}

.results--v2 .card__info {
    gap: var(--space-10);
}

/* As in Figma, the stats and the two dividers between them are spaced evenly across the card. The dividers are the
   list's ::before and ::after, slotted between the stats with order. */
.card__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

    .card__stats::before,
    .card__stats::after {
        content: "";
        align-self: stretch;
        width: 1px;
        background-color: var(--color-outline);
    }

.card__stat:nth-child(1) {
    order: 1;
}

.card__stats::before {
    order: 2;
}

.card__stat:nth-child(2) {
    order: 3;
}

.card__stats::after {
    order: 4;
}

.card__stat:nth-child(3) {
    order: 5;
}

.card__stat {
    display: flex;
    flex-direction: column-reverse;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    text-align: center;
}

.card__stat-label {
    font-size: var(--fs-caption);
    font-weight: inherit;
    color: var(--color-dark-grey);
}

.card__stat-value {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--color-black);
}

/* ========== Filters dialog ========== */
/* Bootstrap's Dialog plugin (data-bs-toggle="dialog") opens the native <dialog> with showModal(), closes it on
   Escape, a backdrop click or any [data-bs-dismiss="dialog"], and adds .hiding while it animates out.
   Figma: overlay centred, 35% black backdrop, "move in" over 300ms ease-out, from the bottom (Figma has it from the top). */
.filters-dialog {
    --bs-dialog-backdrop-bg: var(--backdrop);
    --bs-dialog-backdrop-blur: 0;
    --bs-dialog-transition-duration: 300ms;
    --bs-dialog-transition-timing: cubic-bezier(0, 0, 0.58, 1);
    width: var(--dialog-width);
    max-width: calc(100% - var(--dialog-margin) * 2);
    max-height: calc(100% - var(--dialog-margin) * 2);
    padding: 0;
    overflow: hidden;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    opacity: 1;
    transform: translateY(100vh);
    transition: transform var(--transition-dialog), visibility var(--transition-dialog);
}

    .filters-dialog:not([open]) {
        display: none;
    }

    .filters-dialog[open]:not(.hiding) {
        overflow: hidden;
        opacity: 1;
        transform: none;
    }

@starting-style {
    .filters-dialog[open]:not(.hiding) {
        transform: translateY(100vh);
    }
}

.filters-dialog__form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-20);
}

.filters-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding-bottom: var(--space-10);
}

.filters-dialog__title {
    margin: 0;
    font-size: var(--fs-dialog-title);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-dialog-title);
    color: var(--color-dark-blue);
    white-space: nowrap;
}

.filters-dialog__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.filters-dialog__close-icon {
    width: 28px;
    height: 28px;
}

/* The header and footer stay put; the filter list scrolls between them when the dialog is taller than the window. */
.filters-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Filter rows: full-width rows divided by outline-grey rules instead of the old sidebar's white tiles. */
.filters__list--dialog {
    gap: 0;
}

    .filters__list--dialog .filter {
        border-bottom: 1px solid var(--color-outline);
        border-radius: 0;
        box-shadow: none;
        transition: none;
    }

        /* Same selector as the old sidebar's open-filter outline, so it's switched off here. */
        .filters__list--dialog .filter:has(> .filter__toggle[aria-expanded="true"]) {
            box-shadow: none;
        }

        .filters__list--dialog .filter:first-child {
            border-top: 1px solid var(--color-outline);
        }

    /* Figma 341:603: 16px section titles with 18px above and below. Open, the content starts 9px under the title.
   The title row stays the same open or closed (the old sidebar's open state top-aligns it, which can't animate and made
   the title jump), and the content slides up into the last 9px of the row instead. */
    .filters__list--dialog .filter__toggle,
    .filters__list--dialog .filter__toggle[aria-expanded="true"] {
        align-items: center;
        height: var(--filter-row-height);
        padding: 0 var(--space-12);
        border-radius: 0;
        font-size: var(--fs-lg);
    }

    .filters__list--dialog .filter__body {
        transition: grid-template-rows var(--transition-filter), visibility var(--transition-filter), margin-top var(--transition-filter);
    }

        .filters__list--dialog .filter__body.show {
            margin-top: calc(var(--space-9) * -1);
        }

.filter__title {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.filter__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.filters__list--dialog .filter__range {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-15);
}

/* Single full-width dropdowns (Make and Model, Service History, Start Price, Auction Location) use 14px text. */
.filter__fields--large .filter__label,
.filter__fields--large .filter__select {
    font-size: var(--fs-sm);
}

/* Tick-box options: two columns (Colour, Fuel Type, Doors, Ready to Retail, Owners), or a single list with the box on
   the right (Sort by, which uses radio buttons drawn the same way, so only one can be chosen). */
.filter__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-15) 46px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.filter__options--list {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
}

.filter-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    cursor: pointer;
    font-family: var(--font-brand);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-black);
}

.filter-option--end {
    justify-content: space-between;
}

.filter-option__input {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNoZWNrYm94Ij4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMuNTcxNDMgMUMyLjE1MzI5IDEgMSAyLjE1MzI5IDEgMy41NzE0M1YxNi40Mjg2QzEgMTcuODQ2NyAyLjE1MzI5IDE5IDMuNTcxNDMgMTlIMTYuNDI4NkMxNy44NDY3IDE5IDE5IDE3Ljg0NjcgMTkgMTYuNDI4NlYzLjU3MTQzQzE5IDIuMTUzMjkgMTcuODQ2NyAxIDE2LjQyODYgMUgzLjU3MTQzWk0zLjU3MTQzIDE2LjQyODZWMy41NzE0M0gxNi40Mjg2TDE2LjQzMTEgMTYuNDI4NkgzLjU3MTQzWiIgZmlsbD0iIzVGODlDNiIvPgo8L2c+Cjwvc3ZnPgo=") no-repeat center / 20px 20px;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .filter-option__input:checked {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNoZWNrYm94Ij4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMuNTcxNDMgMUMyLjE1MzI5IDEgMSAyLjE1MzI5IDEgMy41NzE0M1YxNi40Mjg2QzEgMTcuODQ2NyAyLjE1MzI5IDE5IDMuNTcxNDMgMTlIMTYuNDI4NkMxNy44NDY3IDE5IDE5IDE3Ljg0NjcgMTkgMTYuNDI4NlYzLjU3MTQzQzE5IDIuMTUzMjkgMTcuODQ2NyAxIDE2LjQyODYgMUgzLjU3MTQzWk0zLjU3MTQzIDE2LjQyODZWMy41NzE0M0gxNi40Mjg2TDE2LjQzMTEgMTYuNDI4NkgzLjU3MTQzWiIgZmlsbD0iIzVGODlDNiIvPgo8cGF0aCBpZD0iVmVjdG9yXzIiIGQ9Ik05LjE4MDUxIDEwLjM0MDFMNy42MDQ5MyA4LjY2NTg0TDUuOTAyOTIgMTAuNTQ5Nkw5LjE5MDIzIDE0LjAzNjVMMTQuOTAyOSA3LjkwOTcxTDEzLjE5MzYgNi4wMzY1TDkuMTgwNTEgMTAuMzQwMVoiIGZpbGw9IiM1Rjg5QzYiLz4KPC9nPgo8L3N2Zz4K");
    }

.filters-dialog__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-16);
    padding-top: var(--space-16);
}

.filters-dialog__reset {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    background-color: var(--color-white);
    border: 0;
    border-bottom: 2px solid var(--color-light-blue);
    border-radius: 0;
    cursor: pointer;
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
    white-space: nowrap;
}

    .filters-dialog__reset:hover,
    .filters-dialog__reset:active {
        background-color: var(--color-white);
        border-color: var(--color-light-blue);
        color: var(--color-dark-blue);
    }

.filters-dialog__reset-icon {
    width: 13px;
    height: 13px;
}

.filters-dialog__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-9);
    height: var(--submit-height);
    padding: 0 22px;
    overflow: hidden;
    background-color: var(--color-dark-blue);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-white);
    white-space: nowrap;
}

    .filters-dialog__submit:hover,
    .filters-dialog__submit:active {
        background-color: var(--color-dark-blue);
        color: var(--color-white);
    }

.filters-dialog__count {
    font-weight: var(--fw-bold);
}

.filters-dialog__submit-icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 1600px) {
    .results--v2 {
        --grid-columns: 4;
    }
}

/* 4 columns from 1600px, 3 from 1280px, 2 from 960px and 1 from 640px, so a card never gets narrower than about 280px and its three
   stats keep room. */
@media (max-width: 1280px) {
    .results--v2 {
        --grid-columns: 3;
    }
}

@media (max-width: 960px) {
    .results--v2 {
        --grid-columns: 2;
    }
}

@media (max-width: 768px) {
    .results--v2 {
        --grid-columns: 2;
    }

        /* Filter and sort shrinks to a round icon button at the start of one row of chips, which scrolls sideways. */
        .results--v2 .toolbar {
            flex-wrap: nowrap;
            justify-content: flex-start;
        }

    .toolbar__chips {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .toolbar__chips::-webkit-scrollbar {
            display: none;
        }

    .filter-trigger {
        order: -1;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        margin-right: 0;
        padding: 0;
    }

    .filter-trigger__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* The dialog fills the whole window. */
    .filters-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .filters-dialog__submit {
        padding: 0 var(--space-16);
    }
}

@media (max-width: 640px) {
    .results--v2 {
        --grid-columns: 1;
    }
}

@media (max-width: 360px) {
    .filters-dialog__footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .filters-dialog__reset {
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .results--v2 .card,
    .filters-dialog {
        transition: none !important;
    }
}

/* ######################################################################
   car-details.html
   Opened from a vehicle card on search.html. Reuses the shared navbar and footer; --color-reg-plate,
   --color-grade-green and --color-dark-grey come from the search-v2 and contact sections.
   ###################################################################### */

/* ========== Car details ========== */
:root {
    --color-proxy-orange: #ff660e;
    --color-map-ground: #e5e7eb;
    --transition-action: 450ms cubic-bezier(0.22, 1, 0.36, 1);
    --details-summary-width: 640px;
    --space-26: 26px;
}

.details {
    flex: 1 0 auto;
    padding: 0 var(--space-50) 44px;
    background-color: var(--color-surface);
}

.details__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding-top: var(--space-32);
}

.details__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-black);
}

    .details__back:hover span {
        text-decoration: underline;
    }

.details__back-icon {
    width: 24px;
    height: 24px;
}

/* Desktop: photos and map on the left, the summary down the right. The summary spans both rows, and the 1fr second
   row takes up any extra height so the map stays tucked under the photos. */
.details__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--details-summary-width);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "gallery summary"
        "map summary";
    column-gap: var(--space-24);
    row-gap: calc(var(--space-12) + var(--space-26));
    align-items: start;
}

/* Gallery */
.gallery {
    grid-area: gallery;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.gallery__main {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-round);
    cursor: pointer;
    transform: translateY(-50%);
}

    .gallery__arrow img {
        width: 34px;
        height: 34px;
    }

.gallery__arrow--prev {
    left: 19px;
}

/* Figma uses the same left-arrow icon turned round for "next". */
.gallery__arrow--next {
    right: 19px;
}

    .gallery__arrow--next img {
        transform: rotate(180deg);
    }

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14.75px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 181 / 112;
    padding: 0;
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

    .gallery__thumb[aria-current="true"] {
        border-color: var(--color-light-blue);
        box-shadow: inset 0 0 0 1px var(--color-light-blue);
    }

.gallery__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Summary column */
.details__summary {
    grid-area: summary;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.details-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-20);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.details-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
}

.details-card__title--icon {
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.details-card__title-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.details__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-10);
}

.details__plate {
    display: flex;
    align-items: center;
    height: 34px;
    padding: var(--space-5) var(--space-12);
    background-color: var(--color-reg-plate);
    border: 2px solid var(--color-black);
    border-radius: var(--radius-sm);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    color: var(--color-black);
    white-space: nowrap;
}

.details__title {
    margin: 0;
    font-size: 24px;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--color-text);
}

.details__specs {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin-top: var(--space-4);
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-10);
    margin: 0;
}

.spec-grid--grades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: var(--space-8) var(--space-12);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    font-family: var(--font-brand);
    line-height: var(--lh-body);
    text-align: center;
}

.spec--grade {
    gap: var(--space-9);
    padding-bottom: var(--space-14);
}

.spec__label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--color-dark-grey);
    text-transform: uppercase;
}

.spec--grade .spec__label {
    font-size: var(--fs-sm);
}

.spec__value {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

    .spec__value abbr {
        text-decoration: none;
    }

.spec__grade {
    margin: 0;
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-grade-green);
    border: 1px solid var(--color-white);
    border-radius: 25px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    white-space: nowrap;
}

/* Action buttons */
.details-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
}

/* Figma's "Place proxy bid through UKCGR" is wider than its 20px side padding allows, so the sides are 12px. */
.details-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: 13px var(--space-12);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-white);
    text-align: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--action-colour);
}

    /* Hover/focus ripple: a 1px circle in the centre grows until it covers the button (120% of the width reaches the
   corners of every button here), starting as a lighter tint of the button's colour and deepening to the colour itself.
   It sits behind the icon and label. */
    .details-action::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -1;
        width: 1px;
        aspect-ratio: 1;
        background-color: color-mix(in srgb, var(--action-colour) 70%, var(--color-white));
        border-radius: var(--radius-round);
        transform: translate(-50%, -50%);
        transition: width var(--transition-action), background-color var(--transition-action);
    }

    .details-action:hover::before,
    .details-action:focus-visible::before {
        width: 120%;
        background-color: var(--action-colour);
    }

.details-action--dark {
    --action-colour: var(--color-dark-blue);
}

.details-action--orange {
    --action-colour: var(--color-proxy-orange);
}

.details-action--light {
    --action-colour: var(--color-light-blue);
}

.details-action--wide {
    grid-column: 1 / -1;
}

.details-action__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Auction information */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    margin: 0;
}

.info {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
    padding: var(--space-12);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
}

.info__label {
    font-family: var(--font-brand);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.info__value {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text);
}

/* Inspection reports */
.reports {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
    padding: 0;
    list-style: none;
}

.report {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-12);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    font-family: var(--font-brand);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

    .report:hover {
        color: var(--color-dark-blue);
    }

.report__icon {
    width: 42px;
    height: 52px;
    flex-shrink: 0;
}

/* Auction locations map */
.locations {
    grid-area: map;
    display: flex;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.locations__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    flex: 0 0 320px;
    padding: var(--space-24);
    background-color: var(--color-white);
    border-right: 1px solid var(--color-border);
}

.locations__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    font-family: var(--font-brand);
    font-weight: var(--fw-bold);
}

.locations__eyebrow {
    margin: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-normal);
    letter-spacing: 0.6px;
    color: var(--color-light-blue);
    text-transform: uppercase;
}

.locations__title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 24px;
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var(--color-dark-blue);
}

.locations__body {
    margin: 0;
    font-family: var(--font-brand);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--color-dark-grey);
}

.locations__button {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-14);
    margin-top: calc(var(--space-12) * -1);
    padding: 13px var(--space-20);
    background-color: var(--color-light-blue);
    border: 1px solid var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-white);
    white-space: nowrap;
    transition: background-color 150ms ease;
}

    /* Figma "ButtonStd=Hover": light blue turns dark blue. */
    .locations__button:hover {
        background-color: var(--color-dark-blue);
    }

.locations__button-icon {
    width: 16px;
    height: 16px;
}

.locations__map {
    position: relative;
    flex: 1 0 0;
    min-width: 1px;
    overflow: hidden;
    background-color: var(--color-map-ground);
}

/* The map image and its pin scale together when zoomed (js/car-details.js sets --map-zoom). */
.locations__canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 1134;
    overflow: hidden;
    transform: scale(var(--map-zoom, 1));
    transition: transform 250ms ease;
}

.locations__image {
    position: absolute;
    top: -6.15%;
    left: -4.69%;
    width: 109.37%;
    max-width: none;
    height: 109.43%;
    object-fit: cover;
}

.locations__pin {
    position: absolute;
    top: 29.6%;
    left: 18.6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.locations__pin-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--color-light-blue);
    border: 3px solid var(--color-white);
    border-radius: var(--radius-round);
}

    .locations__pin-dot img {
        width: 16px;
        height: 16px;
    }

.locations__pin-label {
    padding: var(--space-4) var(--space-8);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-brand);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
    white-space: nowrap;
}

.locations__zoom {
    position: absolute;
    top: var(--space-20);
    right: var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.locations__zoom-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .locations__zoom-button:hover {
        background-color: var(--color-surface);
    }

    .locations__zoom-button:disabled {
        cursor: default;
        opacity: 0.35;
    }

    .locations__zoom-button img {
        width: 20px;
        height: 20px;
    }

/* Below Figma's width the two columns share the space equally, so the summary keeps room for both action buttons on
   one line (they need about 628px). */
@media (max-width: 1684px) {
    .details__content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Too narrow for the buttons side by side: stack them, each on one line, until the page goes to one column. */
@media (max-width: 1380px) and (min-width: 1025px) {
    .details-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* In the narrower two-column widths the left column is too slim for the map beside its 320px text panel, so the text
   sits above the map (as it does on phones). */
@media (max-width: 1440px) and (min-width: 1025px) {
    .locations {
        flex-direction: column;
    }

    .locations__text {
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .locations__map {
        flex: none;
    }
}

/* One column: photos, then the summary, then the map. */
@media (max-width: 1024px) {
    .details__content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "gallery"
            "summary"
            "map";
        row-gap: var(--space-24);
    }
}

@media (max-width: 1024px) {
    .details {
        padding: 0 var(--space-32) var(--space-32);
    }
}

@media (max-width: 768px) {
    .details {
        padding: 0 var(--space-16) var(--space-24);
    }

    .details__panel {
        gap: var(--space-16);
        padding-top: var(--space-24);
    }

    .gallery__thumbs {
        gap: var(--space-8);
    }

    .gallery__arrow--prev {
        left: var(--space-10);
    }

    .gallery__arrow--next {
        right: var(--space-10);
    }

    .details-card {
        padding: var(--space-16);
    }

    .details__title {
        font-size: 21px;
    }

    .info-grid {
        gap: var(--space-10);
    }

    /* The map panel stacks: text on top, map underneath. */
    .locations {
        flex-direction: column;
    }

    .locations__text {
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .locations__map {
        flex: none;
    }
}

/* Phones: specs two to a row and the action buttons stacked (side by side they need about 628px). */
@media (max-width: 660px) {
    .spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-12);
    }
}

@media (max-width: 400px) {
    .spec-grid--grades {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .locations__canvas,
    .locations__button {
        transition: none;
    }

    .details-action::before {
        display: none;
    }
}