/**
 * SA Motorlease — Custom Vehicle Filter styles.
 * Self-contained; namespaced under .sa-vf so it can't clash with the theme
 * or the old WBW filter while both are present.
 */

/* Brand tokens live on every widget wrapper so the shared .sa-vf-card looks
   identical wherever it renders — the filter grid, the featured slider and the
   location archive (the featured strip sits outside .sa-vf, so it needs its
   own copy of the variables). */
.sa-vf,
.sa-vf-featured,
.sa-vf-archive {
    --sa-vf-orange: #f47b24;      /* brand orange */
    --sa-vf-orange-dark: #d9661a; /* darker shade for hover states */
    --sa-vf-navy: #003b65;
    --sa-vf-border: #d9dde2;
    --sa-vf-muted: #6b7280;
    --sa-vf-bg: #ffffff;
    --sa-vf-radius: 6px;
}
.sa-vf {
    /* Height of the site's sticky header — sticky sidebar + scroll offsets
       clear this so nothing hides under it. Adjust if the header height changes. */
    --sa-vf-header: 80px;
    --sa-vf-sticky-top: calc(var(--sa-vf-header) + 16px);
    box-sizing: border-box;
    font-family: inherit;
    color: var(--sa-vf-navy);
    /* Centered container so the widget doesn't sit flush against the edges. */
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 24px 48px;
}
/* On location archives the .sa-vf-archive wrapper already provides the
   container, so don't double the gutters on the inner widget. */
.sa-vf-archive .sa-vf { max-width: none; margin: 0; padding: 0; }
/* Inside the archive wrapper the container already provides the gutters, so
   the featured strip aligns to the same edges as the title/filter. */
.sa-vf-archive .sa-vf-featured { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.sa-vf *, .sa-vf *::before, .sa-vf *::after,
.sa-vf-featured *, .sa-vf-featured *::before, .sa-vf-featured *::after,
.sa-vf-archive *, .sa-vf-archive *::before, .sa-vf-archive *::after { box-sizing: border-box; }

/* When logged in, the WordPress admin bar (32px, 46px on small screens) sits
   above the fixed header, pushing it down — so the sticky offset needs to clear
   it too. Only affects logged-in users; public visitors have no admin bar. */
.admin-bar .sa-vf { --sa-vf-sticky-top: calc(var(--sa-vf-header) + 16px + 32px); }
@media screen and (max-width: 782px) {
    .admin-bar .sa-vf { --sa-vf-sticky-top: calc(var(--sa-vf-header) + 16px + 46px); }
}

/* The [hidden] attribute must always win over the component's display rules
   (e.g. .sa-vf__loading{display:flex} / .sa-vf-btn{display:inline-block}),
   otherwise the loader and hidden "load more" button stay permanently visible. */
.sa-vf [hidden] { display: none !important; }

/* ------------------------------------------- location archive wrapper */
/* Flatsome still renders its (now empty) shop/category title banner above our
   takeover on product_cat archives — hide it; we draw our own title inside
   .sa-vf-archive. */
.tax-product_cat .shop-page-title,
.tax-product_cat .page-title.shop-page-title { display: none !important; }

.sa-vf-archive {
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 24px 56px;
}
.sa-vf-archive__title {
    font-size: 26px;
    font-weight: 800;
    color: #003b65;
    margin: 0 0 6px;
}
.sa-vf-archive__desc {
    color: #6b7280;
    margin: 0 0 22px;
    max-width: 70ch;
}

/* ------------------------------------------- featured listings carousel */
.sa-vf-featured {
    max-width: 1360px;
    margin: 0 auto;
    padding: 12px 24px 8px;
    background: transparent;
}
/* Panel variant (e.g. qualified carousel) — sits as a contained card. */
.sa-vf-featured--panel {
    padding: 22px 24px 18px;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
/* Frosted, see-through panel — blurs whatever sits behind it. */
.sa-vf-featured--glass {
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.5);
}
/* Full-bleed variant: break out of any container to the full viewport width. */
.sa-vf-featured--full {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}
.sa-vf-featured--full .sa-vf-featured__track { grid-auto-columns: 300px; }
.sa-vf-featured__msg {
    text-align: center;
    color: #6b7280;
    font-size: 15px;
    padding: 26px 20px;
    margin: 0;
}
/* Centred heading flanked by rules. */
.sa-vf-featured__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    color: #003b65;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.sa-vf-featured__title::before,
.sa-vf-featured__title::after {
    content: "";
    height: 1px;
    background: #d9dde2;
    flex: 1 1 auto;
    max-width: 300px;
}

.sa-vf-featured__viewport { position: relative; padding: 0 38px; }
.sa-vf-featured__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 66px) / 4); /* 4 across, rest scroll */
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
    scrollbar-width: none; /* the arrows/drag are the affordance */
    cursor: grab;
}
.sa-vf-featured__track::-webkit-scrollbar { display: none; }
.sa-vf-featured__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}
.sa-vf-featured__item {
    scroll-snap-align: start;
    display: flex; /* stretch card to full column height */
}
.sa-vf-featured__item .sa-vf-card { width: 100%; }
.sa-vf-featured__item .sa-vf-card__img { -webkit-user-drag: none; user-select: none; }
/* On the carousel cards the "p/m - RENT TO BUY" sits on its own line below the
   price (the listings grid keeps it inline). */
.sa-vf-featured .sa-vf-card__price { display: block; }
.sa-vf-featured .sa-vf-card__price strong { display: block; line-height: 1.1; margin-bottom: 2px; }

/* Prev/next arrows — circles with a crisp CSS chevron (recolours on hover via
   currentColor). !important + specificity so the theme's own <button> styling
   can't square/resize them. */
.sa-vf-featured .sa-vf-featured__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--sa-vf-border, #d9dde2);
    background: #fff;
    color: #003b65;
    font-size: 0; /* hide the fallback glyph; the chevron is drawn below */
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    z-index: 3;
    transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.sa-vf-featured .sa-vf-featured__nav::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.sa-vf-featured .sa-vf-featured__nav--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.sa-vf-featured .sa-vf-featured__nav--next::before { transform: rotate(45deg);   margin-right: 3px; }
.sa-vf-featured .sa-vf-featured__nav--prev { left: 0; }
.sa-vf-featured .sa-vf-featured__nav--next { right: 0; }
.sa-vf-featured .sa-vf-featured__nav:hover {
    background: #f47b24;
    color: #fff;
    border-color: #f47b24;
    box-shadow: 0 4px 14px rgba(244,123,36,.4);
}
.sa-vf-featured .sa-vf-featured__nav:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 1024px) {
    .sa-vf-featured__track { grid-auto-columns: calc((100% - 44px) / 3); }
}
@media (max-width: 768px) {
    .sa-vf-featured__track { grid-auto-columns: calc((100% - 22px) / 2); }
    .sa-vf-featured__title::before, .sa-vf-featured__title::after { max-width: 90px; }
}
@media (max-width: 520px) {
    .sa-vf-featured { padding: 12px 8px 8px; }
    .sa-vf-featured__viewport { padding: 0 34px; }
    .sa-vf-featured__track,
    .sa-vf-featured--full .sa-vf-featured__track { grid-auto-columns: 84%; }
    .sa-vf-featured .sa-vf-featured__nav { width: 30px !important; height: 30px !important; }
    .sa-vf-featured .sa-vf-featured__nav::before { width: 7px; height: 7px; }
}

/* ------------------------------------------- title row + breadcrumb + disclaimer */
.sa-vf-archive__head { margin-bottom: 6px; }
/* Title left, breadcrumb far right on the same row (all pages). */
.sa-vf-archive__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.sa-vf-archive__subtitle {
    color: #003b65;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 4px 0 6px;
}
.sa-vf-crumbs {
    margin-left: auto; /* push to the far right of the title row */
    text-align: right;
    font-size: 13px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.sa-vf-crumbs a { color: #6b7280; text-decoration: none; }
.sa-vf-crumbs a:hover { color: #f47b24; }
.sa-vf-crumbs__current { color: #003b65; font-weight: 600; }
.sa-vf-crumbs__sep { margin: 0 6px; color: #c2c7cf; }
.sa-vf-disclaimer {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    margin: 6px 0 24px;
}
.sa-vf-disclaimer p { margin: 0 0 8px; }
.sa-vf-disclaimer p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- layout */
.sa-vf__layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

/* --------------------------------------------------------------- sidebar */
.sa-vf__sidebar {
    background: var(--sa-vf-bg);
    border: 1px solid var(--sa-vf-border);
    border-radius: var(--sa-vf-radius);
    padding: 14px 13px;
    position: sticky;
    top: var(--sa-vf-sticky-top);
}
.sa-vf-field { margin-bottom: 7px; position: relative; }

/* Per-field clear (×) — sits inside the field, left of the chevron, only
   while that field has a selection. */
.sa-vf .sa-vf-x {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 50%;
    background: #e8ebef !important;
    box-shadow: none !important;
    color: var(--sa-vf-navy);
    font-size: 15px;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    cursor: pointer;
    z-index: 2;
    transition: background .15s ease, color .15s ease;
}
.sa-vf .sa-vf-x:hover { background: var(--sa-vf-orange) !important; color: #fff; }
/* Widen the select's right padding while the × is shown so the value text
   never runs underneath it. */
.sa-vf .sa-vf-has-x .sa-vf-select { padding-right: 60px; }

/* Extra specificity + !important so the theme's own <select> styling (native
   arrow, background-size that was blowing our icon up huge) can't win. */
.sa-vf .sa-vf-select {
    width: 100%;
    height: auto;
    min-height: 38px;
    /* Flatsome gives every <select>/<button> a margin-bottom — kill it, the
       .sa-vf-field wrappers own the spacing. */
    margin: 0 !important;
    padding: 8px 32px 8px 11px; /* extra right padding clears the arrow */
    border: 1px solid var(--sa-vf-border);
    border-radius: var(--sa-vf-radius);
    background-color: #fff;
    font-size: 14px;
    line-height: 1.4; /* stop the theme squeezing option text vertically */
    color: var(--sa-vf-navy);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23003b65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 12px 8px !important; /* pin the arrow size, ignore theme */
    cursor: pointer;
}
.sa-vf .sa-vf-select::-ms-expand { display: none; } /* legacy Edge/IE arrow */
.sa-vf .sa-vf-select:focus { outline: none; border-color: var(--sa-vf-orange); }

.sa-vf-field--check { margin-top: 9px; }
.sa-vf-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.sa-vf-check input { width: 16px; height: 16px; accent-color: var(--sa-vf-orange); }
.sa-vf-check__hint {
    margin: 3px 0 0 24px;
    font-size: 11px;
    color: var(--sa-vf-muted);
}

/* buttons */
.sa-vf-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.sa-vf-btn {
    display: inline-block;
    width: 100%;
    /* margin/min-height/line-height guards stop the theme's global button
       styling (min-height 2.5em, line-height 2.4em, margin-bottom) from
       inflating these back to the old oversized look. */
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 7px 14px;
    border: none;
    border-radius: var(--sa-vf-radius);
    background: var(--sa-vf-orange);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease;
}
.sa-vf-btn:hover { background: var(--sa-vf-orange-dark); }
.sa-vf-btn--clear { background: var(--sa-vf-navy); }
.sa-vf-btn--clear:hover { background: #002a49; }

/* ------------------------------------------- searchable dropdown (combo) */
.sa-vf-combo { position: relative; }
/* The native select stays as the form's source of truth but is hidden from
   view (not display:none — some browsers skip firing events on those). */
.sa-vf-combo__native {
    position: absolute !important;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: -1px;
    overflow: hidden;
}
.sa-vf .sa-vf-combo__display {
    display: block;
    text-align: left;
    color: var(--sa-vf-muted);
}
.sa-vf .sa-vf-combo__display.has-value { color: var(--sa-vf-navy); }
.sa-vf-combo__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 30;
    background: #fff;
    border: 1px solid var(--sa-vf-border);
    border-radius: var(--sa-vf-radius);
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    overflow: hidden;
}
.sa-vf .sa-vf-combo__search {
    display: block;
    width: calc(100% - 16px);
    margin: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    padding: 7px 10px;
    border: 1px solid var(--sa-vf-border);
    border-radius: var(--sa-vf-radius);
    font-size: 14px;
    color: var(--sa-vf-navy);
    background: #fff;
}
.sa-vf .sa-vf-combo__search:focus { outline: none; border-color: var(--sa-vf-orange); }
.sa-vf-combo__list {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 4px;
}
.sa-vf-combo__item {
    display: block;
    width: 100%;
    margin: 0 !important;      /* theme button margin guard */
    min-height: 0 !important;
    line-height: 1.4 !important;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    color: var(--sa-vf-navy);
    cursor: pointer;
}
.sa-vf-combo__item:hover { background: #fff3ea; }
.sa-vf-combo__item.is-selected { color: var(--sa-vf-orange); font-weight: 700; }
.sa-vf-combo__empty {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--sa-vf-muted);
}

/* --------------------------------------------------------------- results */
.sa-vf__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.sa-vf__count { font-size: 14px; color: var(--sa-vf-muted); }
.sa-vf__sortwrap { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sa-vf__sortwrap span { color: var(--sa-vf-muted); white-space: nowrap; }
.sa-vf__sort { width: auto; min-width: 190px; }

/* --------------------------------------------------- active filter chips */
/* Lives at the top of the sidebar, above the first field (client request):
   on desktop that's the top of the sticky filter card; in the mobile drawer
   it's right under the "Filters" header. */
.sa-vf__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sa-vf-border);
}
.sa-vf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;      /* theme button margin guard */
    min-height: 0 !important;
    padding: 4px 10px;
    border: 1px solid var(--sa-vf-border);
    border-radius: 999px;
    background: #fff;
    color: var(--sa-vf-navy);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sa-vf-chip:hover { border-color: var(--sa-vf-orange); color: var(--sa-vf-orange); }
.sa-vf-chip__x {
    font-size: 16px;
    line-height: 1;
    color: var(--sa-vf-muted);
}
.sa-vf-chip:hover .sa-vf-chip__x { color: var(--sa-vf-orange); }
.sa-vf-chip--all {
    border-color: transparent;
    background: none;
    color: var(--sa-vf-muted);
    text-decoration: underline;
}
.sa-vf-chip--all:hover { background: none; color: var(--sa-vf-orange); }

/* results is the positioning context for the loading overlay */
.sa-vf__results { position: relative; }

.sa-vf__grid {
    display: grid;
    /* minmax(0,1fr) stops image content from blowing the columns past the
       container (which pushed the 3rd card off-screen). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    transition: opacity .15s ease;
}
/* Dim + lock the grid while a request is in flight. */
.sa-vf__results.is-loading .sa-vf__grid { opacity: .35; pointer-events: none; }

/* cards */
.sa-vf-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 5px 18px rgba(0,0,0,.09);
    transition: box-shadow .18s ease, transform .18s ease;
}
.sa-vf-card:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
    transform: translateY(-3px);
}
.sa-vf-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f2f3f5;
    overflow: hidden;
}
.sa-vf-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Hover image is stacked on top and fades in — the main image below is never
   removed, so it can't blank out on hover the way a src-swap does. */
.sa-vf-card__img--hover {
    opacity: 0;
    transition: opacity .3s ease;
}
.sa-vf-card:hover .sa-vf-card__img--hover { opacity: 1; }
.sa-vf-card__sold {
    position: absolute;
    top: 12px; right: 0;
    background: var(--sa-vf-orange);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .08em;
    padding: 5px 12px;
    border-radius: 3px 0 0 3px;
}
/* Dim only the BASE image on sold cards — not the hover overlay, which must
   stay at opacity:0 (otherwise both images show at once = double exposure). */
.sa-vf-card.is-sold .sa-vf-card__img:not(.sa-vf-card__img--hover) { opacity: .82; }

.sa-vf-card__body { padding: 15px 18px 20px; }
.sa-vf-card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--sa-vf-navy);
    /* Always reserve two lines (and clamp longer names) so the price + km row
       lines up across cards regardless of how long the vehicle name is. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em; /* 2 lines × 1.3 line-height */
}
.sa-vf-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--sa-vf-orange);
    margin-bottom: 10px;
}
.sa-vf-card__price strong { font-size: 22px; font-weight: 800; }
.sa-vf-card__pm { font-size: 14px; font-weight: 600; color: #374151; }
.sa-vf-card__rtb { font-size: 12px; color: var(--sa-vf-muted); text-transform: uppercase; letter-spacing: .04em; }
.sa-vf-card__km {
    display: inline-block;
    background: var(--sa-vf-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 999px; /* pill, matching the reference card */
}

/* empty + pager + loading */
.sa-vf-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--sa-vf-muted);
    border: 1px dashed var(--sa-vf-border);
    border-radius: 8px;
}
.sa-vf__pager { margin-top: 28px; }
.sa-vf-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.sa-vf-page {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sa-vf-border);
    border-radius: var(--sa-vf-radius);
    background: #fff;
    color: var(--sa-vf-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sa-vf-page:hover:not(:disabled):not(.is-current) {
    border-color: var(--sa-vf-orange);
    color: var(--sa-vf-orange);
}
.sa-vf-page.is-current {
    background: var(--sa-vf-orange);
    border-color: var(--sa-vf-orange);
    color: #fff;
    cursor: default;
}
.sa-vf-page:disabled { opacity: .4; cursor: not-allowed; }
.sa-vf-page--gap {
    border: none;
    background: none;
    min-width: 20px;
    color: var(--sa-vf-muted);
    cursor: default;
}
/* Overlay covering the results while loading — impossible to miss. */
.sa-vf__loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: rgba(255,255,255,.75);
}
/* Keep the spinner + label centred in view even when the grid is tall. */
.sa-vf__loading-inner {
    position: sticky;
    top: calc(var(--sa-vf-sticky-top) + 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    color: var(--sa-vf-navy);
    font-size: 15px;
    font-weight: 600;
}
.sa-vf__spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--sa-vf-border);
    border-top-color: var(--sa-vf-orange);
    border-radius: 50%;
    animation: sa-vf-spin .7s linear infinite;
}
@keyframes sa-vf-spin { to { transform: rotate(360deg); } }

/* mobile filter toggle — a floating action button (hidden on desktop) */
.sa-vf-toggle {
    display: none;
    position: fixed;
    left: 50%;
    /* Sized/positioned so its centre lines up with the WhatsApp float (HT
       Click to Chat: 50px circle at bottom 15px → centre 40px off the bottom).
       Explicit height + margin/line-height guards keep the theme's button
       styling (margin-bottom 13px, line-height 2.4em) from shifting it. */
    bottom: 20px;
    height: 40px;
    margin: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
    transform: translateX(-50%);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
    padding: 0 22px;
    border: none;
    border-radius: 999px;
    background: var(--sa-vf-orange);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 4px rgba(244,123,36,.18);
    animation: sa-vf-toggle-pulse 2.4s ease-in-out infinite;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.sa-vf-toggle:hover { background: var(--sa-vf-orange-dark); }
@keyframes sa-vf-toggle-pulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 4px rgba(244,123,36,.18); }
    50%      { box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 8px rgba(244,123,36,.05); }
}
/* Hidden until the user scrolls past the featured-vehicles carousel (see vehicle-filter.js). */
.sa-vf-toggle--hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
    visibility: hidden;
    pointer-events: none;
    animation: none;
}
.sa-vf-toggle__count {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fff;
    color: var(--sa-vf-orange);
    font-size: 11px;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
}

/* drawer chrome — only shown in the mobile overlay */
.sa-vf__drawer-head,
.sa-vf__drawer-foot { display: none; }

/* --------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .sa-vf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .sa-vf { padding: 16px 16px 40px; }
    .sa-vf-archive { padding: 16px 16px 40px; }

    .sa-vf__layout { grid-template-columns: 1fr; }
    .sa-vf-toggle { display: inline-flex; }
    /* The floating button would sit on top of the open drawer — hide it then. */
    body.sa-vf-open .sa-vf-toggle { display: none; }

    /* Filter sidebar becomes a full-screen slide-in drawer. The site's WhatsApp
       floating button sits at z-index 99999999, so the drawer must top that to
       cover it while filtering. */
    .sa-vf__sidebar {
        position: fixed;
        inset: 0;
        z-index: 100000001;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform .25s ease;
        visibility: hidden;
    }
    .sa-vf__sidebar.is-open { transform: translateX(0); visibility: visible; }

    /* Compact drawer header — one slim row, no wasted space above the fields. */
    .sa-vf__drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 8px 16px;
        border-bottom: 1px solid var(--sa-vf-border);
        font-size: 15px;
        font-weight: 700;
        color: var(--sa-vf-navy);
    }
    /* !important guards: Flatsome's global button styling (min-height 65px,
       margin 26px at this font size) otherwise balloons the head to ~108px. */
    .sa-vf .sa-vf__drawer-close {
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
        height: auto !important;
        font-size: 26px;
        line-height: 1 !important;
        color: var(--sa-vf-navy);
        cursor: pointer;
        padding: 0 6px !important;
    }
    .sa-vf__sidebar-scroll {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* don't chain scroll to the page behind */
        padding: 10px 16px 14px;
    }
    .sa-vf-actions { display: none; }    /* footer provides Clear + Show results */

    .sa-vf__drawer-foot {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 10px;
        flex: 0 0 auto;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--sa-vf-border);
        background: #fff;
        box-shadow: 0 -3px 12px rgba(0,0,0,.06);
    }
    .sa-vf__drawer-foot .sa-vf-btn { margin: 0; padding-top: 10px; padding-bottom: 10px; }

    /* Bigger touch targets inside the drawer. */
    .sa-vf-field { margin-bottom: 10px; }
    .sa-vf .sa-vf-select { min-height: 44px; font-size: 15px; }
    .sa-vf .sa-vf-x { width: 26px; height: 26px !important; right: 36px; font-size: 17px; }
    .sa-vf-check { font-size: 15px; padding: 4px 0; }
    .sa-vf-check__hint { font-size: 12px; }
}
/* Pin the body while the drawer is open — overflow:hidden alone doesn't stop
   iOS Safari scrolling the page behind; JS stores/restores the scroll offset. */
body.sa-vf-open {
    position: fixed;
    left: 0; right: 0;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 520px) {
    .sa-vf__grid { grid-template-columns: 1fr; }
    .sa-vf__topbar { flex-direction: column; align-items: stretch; }
    .sa-vf__sort { width: 100%; min-height: 46px; }
}