/* Cars for Sale listing page — redesign styles.

   Named listing.css on purpose. It was cars-for-sale.css, and Cloudflare
   challenges any path containing /cars-for-sale (the rule that guards the
   catalogue), so every visitor got a 403 for this file and the chips, the
   two-column layout and the results grid never applied. Do not give an
   asset a name with that string in it.

   :root variables (--royal-blue, --gray-*, --font-heading, etc.) and base
   resets come from header_redesign.css / redesign.min.css, loaded globally. */

/* ===================== BREADCRUMBS ===================== */
.breadcrumbs-bar {
    padding: 12px 0;
}

/* ===================== PAGE HEADER ===================== */
.page-header { padding: 16px 0 0; }
.page-header h1 {
    font-family: var(--font-heading); font-size: 32px; color: var(--gray-900);
    line-height: 1.2; margin: 0;
}
.page-header-count { font-size: 14px; color: var(--gray-500); margin-top: 4px; }
.page-header-count strong { color: var(--gray-900); }
@media (max-width: 640px) {
    .page-header h1 { font-size: 22px; }
}

/* ===================== STICKY FILTER BAR ===================== */
/* Sticks under the site header (--sr-header-h is measured by listing.php).
   The box-shadow + clip-path pair paints the white band edge to edge. */
.results-filterbar {
    position: sticky; top: var(--sr-header-h, 0px); z-index: 900;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; margin-bottom: 16px;
    background: var(--white); box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax);
    border-bottom: 1px solid var(--gray-100);
}
.filterbar-toggle {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 100px; border: 1.5px solid var(--gray-900);
    background: var(--gray-900); color: var(--white); font-size: 13px; font-weight: 700; cursor: pointer;
}
.filterbar-toggle svg circle { fill: var(--gray-900); }
.filterbar-toggle:hover { background: var(--royal-blue); border-color: var(--royal-blue); }
.filterbar-toggle:hover svg circle { fill: var(--royal-blue); }
.filterbar-count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px;
    background: var(--amber); color: #111827; font-size: 12px; line-height: 20px; text-align: center;
}

/* ===================== QUICK FILTER CHIPS ===================== */
.chips-scroll {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    padding: 0; width: 100%; min-width: 0; flex-wrap: nowrap;
}
.chips-scroll::-webkit-scrollbar { display: none; }
/* A swipeable row suits a phone. On a desktop, with the scrollbar hidden and
   no swipe, 13-17 of the 25 chips sat past the right edge with nothing to
   say they were there. Wrap them instead: two or three rows, all visible. */
@media (min-width: 992px) {
    .chips-scroll { flex-wrap: wrap; overflow-x: visible; }
}
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 100px; font-size: 13px; font-weight: 600;
    white-space: nowrap; cursor: pointer; transition: all 0.2s;
    border: 1.5px solid var(--gray-200); background: var(--white); color: var(--gray-700);
}
.chip:hover { border-color: var(--royal-blue); color: var(--royal-blue); background: var(--royal-blue-50); }
.chip.active { background: var(--royal-blue); color: var(--white); border-color: var(--royal-blue); }
@media (max-width: 380px) {
    .chip { padding: 6px 14px; font-size: 12px; }
}

/* ===================== TOOLBAR ===================== */
.toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}
.result-count { font-size: 14px; color: var(--gray-500); }
.result-count strong { color: var(--gray-900); font-weight: 700; }
@media (max-width: 640px) {
    .toolbar { flex-direction: column; align-items: flex-start; }
}

/* ===================== RESULTS LAYOUT ===================== */
.results-layout {
    display: grid; grid-template-columns: 280px 1fr; gap: 28px;
}
@media (max-width: 1200px) {
    .results-layout { grid-template-columns: 240px 1fr; gap: 20px; }
}
@media (max-width: 991px) {
    .results-layout { grid-template-columns: 1fr; }
}

/* ===================== SIDEBAR ===================== */
/* Desktop: sticky below the header and the filter bar. */
#col-filters.sidebar {
    --sidebar-top: calc(var(--sr-header-h, 0px) + var(--sr-filterbar-h, 0px) + 16px);
    position: sticky; top: var(--sidebar-top); align-self: start;
    max-height: calc(100vh - var(--sidebar-top) - 16px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent;
}
#col-filters.sidebar::-webkit-scrollbar { width: 4px; }
#col-filters.sidebar::-webkit-scrollbar-track { background: transparent; }
#col-filters.sidebar::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
@media (min-width: 992px) {
    .results-layout.filters-hidden { grid-template-columns: 1fr; }
    .results-layout.filters-hidden #col-filters { display: none; }
}

/* Phones and tablets: the sidebar becomes a slide-in drawer. */
.filters-drawer-head, .filters-drawer-foot { display: none; }
@media (max-width: 991px) {
    #col-filters.sidebar {
        /* align-self: the desktop "start" would stop a fixed grid child stretching top-to-bottom. */
        display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1101; align-self: stretch;
        width: min(380px, 90vw); max-width: none; max-height: none; margin: 0;
        padding: 0 14px !important; background: var(--gray-50, #f9fafb); overflow-y: auto;
        transform: translateX(-102%); visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        box-shadow: 8px 0 32px rgba(15,23,42,0.2);
    }
    body.filters-open #col-filters.sidebar { transform: none; visibility: visible; transition: transform .25s ease; }
    #col-filters.sidebar.no-transition { transition: none; }
    body.filters-open { overflow: hidden; }
    .filters-drawer-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(15,23,42,0.55); }
    .filters-drawer-backdrop[hidden] { display: none; }
    .filters-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 2; margin: 0 -14px 12px; padding: 14px 14px 12px;
        background: var(--white); border-bottom: 1px solid var(--gray-200); font-size: 17px;
    }
    .filters-drawer-close {
        width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--gray-100);
        font-size: 24px; line-height: 1; color: var(--gray-700); cursor: pointer;
    }
    .filters-drawer-foot {
        display: block; position: sticky; bottom: 0; z-index: 2; margin: 12px -14px 0;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--white);
        border-top: 1px solid var(--gray-200);
    }
    .filters-drawer-done {
        width: 100%; padding: 13px 16px; border: 0; border-radius: var(--radius-sm, 6px);
        background: var(--royal-blue); color: var(--white); font-size: 15px; font-weight: 700; cursor: pointer;
    }
}

/* Filters apply instantly; dim the grid while the next page loads. */
.listing-content.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* Filter card -> filter-group look */
#col-filters.sidebar .card {
    border: none; background: transparent; box-shadow: none;
}
#filters .bg-blue {
    background: var(--royal-blue) !important;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}

/* Each filter section -> its own card, matching the redesign's filter-group look */
#filters .filters-wrapper > div:not(.search-button) {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    padding: 0 !important;
    overflow: hidden;
}
.current-filters-wrapper {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}
#filters .filters-wrapper > .quick-filters-card > div { padding: 12px 16px; }
#filters .filters-wrapper > .quick-filters-card > div:last-child { border-bottom: none !important; }
#filters .search-button { padding: 0 0 4px; }

/* Collapsible filter blocks -> filter-group summary/body look */
.filters-block .collapse-button > a,
.years_range .filters-block > a,
.odometer_range .filters-block > a,
.bid_range .filters-block > a,
.acv_range .filters-block > a {
    padding: 14px 16px !important; margin: 0 !important;
    font-size: 13px; font-weight: 700; color: var(--gray-900);
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: background 0.2s;
}
.filters-block .collapse-button > a:hover,
.years_range .filters-block > a:hover,
.odometer_range .filters-block > a:hover,
.bid_range .filters-block > a:hover,
.acv_range .filters-block > a:hover {
    background: var(--gray-50);
}
.filters-block .collapse-button,
.years_range .filters-block,
.odometer_range .filters-block,
.bid_range .filters-block,
.acv_range .filters-block {
    border-bottom: none !important; padding: 0 !important; margin: 0 !important;
}
.filters-block .values,
.years_range .multi-collapse,
.odometer_range .multi-collapse,
.bid_range .multi-collapse,
.acv_range .multi-collapse {
    padding: 0 16px 16px !important; margin: 0 !important;
}
.filters-block .angle {
    width: 18px; height: 18px; display: inline-block; flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; transition: transform 0.3s;
    border: none !important;
}
.filters-block a[aria-expanded="true"] .angle { transform: rotate(180deg); }

/* Toggle switches -> royal blue style */
#filters .custom-control-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--royal-blue); border-color: var(--royal-blue);
}

/* Ajax-loaded checkbox lists -> check-list look */
#filters .values .scrollable label {
    display: flex; align-items: center; gap: 10px; padding: 7px 8px;
    border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s;
    font-size: 13px; color: var(--gray-700); font-weight: 500;
}
#filters .values .scrollable label:hover { background: var(--gray-50); }

/* ===================== RESULTS GRID / VEHICLE CARDS ===================== */
.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (min-width: 1400px) { .results-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (max-width: 900px) { .results-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 540px) { .results-grid { grid-template-columns: 1fr; } }

/* Card styles come from vehicle-card.css, shared with the homepage. */
.results-grid > .vehicle-card { min-width: 0; }