/* Global Font - Michroma applied to entire plugin */
#cld-wrapper,
#cld-wrapper * {
    font-family: 'Michroma', sans-serif !important;
}

/* Pagination */

.cus-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 30px;
}

.cus-pagination a {
    min-width: 42px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #000;
    text-align: center;
}

.cus-pagination a.active {
    background: #000;
    color: #fff;
}


/* end */

#results-search {
    background: #fff;
    border: 1px solid #ddd;
    max-height: 350px;
    overflow-y: auto;
    top: 70px;
    font-size: 14px;
    position: absolute;
}

#results-search p {
    margin: 0;
}

.search-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-list li {
    padding: 8px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

.search-list li a {
    text-decoration: none;
    color: #000;
}

.custom-select-wrap {
    position: relative;
    font-family: 'Michroma', sans-serif;
    cursor: pointer;
    width: 100%;
}

.custom-select-selected {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 6px;
    color: #807b7b;
    border-radius: 1px;
    font-size: 14px;
    user-select: none;
}

.custom-select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
    z-index: 999;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.custom-select-items div {
    padding: 6px;
    transition: background 0.2s;
    font-size: 14px;
}

.custom-select-items div:hover {
    background-color: black;
    color: white;
}

.group-filter .hidden-item {
    display: none;
}

.read-more-filter {
    margin-top: 6px;
    font-size: 13px !Important;
    color: #fff;
    background: #000;
    border: none;
    padding: 8px 14px !Important;
    cursor: pointer;
    border-radius: 1px;
}

.read-more-filter:hover {
    color: #fff;
    background: #000;
}

.read-more-filter:focus {
    color: #fff;
    background: #000;
}


/* Sidebar Pills Styling */

.group-filter span {
    display: inline-block;
    margin: 5px 3px;
    border: 1px solid #ddd;
    border-radius: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f9f9f9;
    font-size: 13px;
}


/* Active State - Jab Click ho */

.group-filter span.active {
    background: #000000;
    /* Aapka brand color */
    color: #fff;
    border-color: #000000;
}


/* Color Circles Selection */

.options-color span.active {
    outline: 2px solid #000;
    outline-offset: 2px;
}


/* Grid Layout */

.cars-grid {
    display: grid;
    /* More compact cards so ~4 can fit per row on desktop */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    transition: opacity 0.3s;
}

.box-grid {
    width: 100%;
}

.icon-options,
.pill-small-btn {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 0;
}

.pill-btn,
.pill-small-btn span {
    padding: 6px 12px;
    background: #f1f1f1;
    border-radius: 1px;
    cursor: pointer;
    font-size: 12px;
}

.group-filter input {
    margin: 5px 3px;
    border: 1px solid #ddd !important;
}

.range-inputs {
    display: flex;
    gap: 5px;
}

.range-inputs input {
    width: 50%;
    padding: 8px;
    border: 1px solid #ddd !important;
    border-radius: 1px;
}

.options-color {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.options-color span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.options-color span:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.options-color span:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #222;
    pointer-events: none;
    z-index: 9999;
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.advanced-filter-form {
    width: -webkit-fill-available;
}

.btn-clear {
    flex: 0 0 40%;
    background: #fff !important;
    border: 1px solid #000 !important;
    font-size: 14px !important;
    padding: 10px !important;
    color: #000 !important;
    width: 40%;
}

.btn-clear:hover {
    background: #fff !important;
    border: 1px solid #000 !important;
    color: #000 !important;
}

.filters-apply {
    flex: 0 0 55%;
    font-size: 14px !important;
    width: 55%;
    background: #000;
    color: #fff;
    border: none;
    padding: 10px !important;
}

.filters-apply:hover {
    background: #000;
    color: #fff;
}

.filters-apply:focus {
    background: #000;
    color: #fff;
}


/* filter */

.filter-box {
    max-height: calc(73vh - 120px);
    overflow-y: auto;
}

.filter-car-bar {
    display: grid;
    grid-template-columns: 0.5fr 1.1fr 1.2fr 1fr 1.2fr 1.2fr 1.3fr;
    background: #fff;
    position: sticky !important;
    top: 105px!important;
    z-index: 999;
    border: 1px solid #ddd;
    border-radius: 0;
    align-items: center;
    padding: 0;
    margin-top: 0;
    margin-bottom: 15px;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.08);
}

.filter-cell {
    padding: 12px;
    border-right: 1px solid #eee;
    position: relative;
    display: flex;
    flex-direction: column;
}

.filter-cell:last-child {
    border-right: none;
}


/* LABEL */

.filter-cell label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #777;
    margin-bottom: 3px;
}


/* SELECT + INPUT */

.filter-cell select,
.filter-cell input {
    width: 100%;
    height: 34px !important;
    border: 1px solid #e5e5e5 !important;
    background: #fff;
    border-radius: 1px;
    padding: 0 10px;
    font-size: 13px;
    margin: 5px 3px;
    outline: none;
}


/* SELECT DROPDOWN ARROW */

.filter-cell.select select {
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg fill='black' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
    background-size: 12px;
}


/* SEARCH BUTTON */

.search-btn {
    position: absolute;
    right: 25px;
    bottom: 27px;
    padding: 0 !important;
    border: none;
    background-color: transparent !important;
    border-radius: 1px;
    display: flex;
    align-items: center;
    border-color: inherit !important;
    justify-content: center;
    cursor: pointer;
}

.search-btn:hover {
    background: transparent;
}

.search-btn:focus {
    background: transparent;
}

.search-btn svg {
    display: block;
}


/* ADV FILTER TEXT BLOCK */

.filter-cell.adv strong {
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 7px;
}

.filter-cell.adv span {
    font-size: 13px;
    color: #888;
}


/* FILTER ICON BUTTON */

.filter-cell.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.filter-cell.icon-btn svg {
    opacity: 0.7;
}

.car-grid-wrapper {
    flex: 1;
    overflow: hidden;
    max-width: 1350px;
    margin: auto;
}


/* GRID */


/* CARD */

.car-card {
    background: #fff;
    border-radius: 2px;
    /* tighter card */
    padding: 12px;
    border: 1px solid #EEE;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: .3s;
    position: relative;
}

.car-card:hover {
    transform: translateY(-4px);
}


/* HEAD */

.post-meta {
    font-size: 13px;
    color: #737373;
    margin-bottom: 6px;
}

.card-title {
    font-size: 20px;
    margin: 0;
    max-width: 100%;
    height: 60px;
    line-height: normal;
    font-weight: 700;
}


/* BADGE */

.badge {
    position: absolute;
    top: 32px;
    right: -10px;
    background: #000;
    color: #fff !important;
    padding: 5px 18px 5px 6px;
    font-size: 12px;
    line-height: normal;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-new {
    background: #222 !important;
}

.badge-sold {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #444 !important;
}

.badge-hot {
    background: #555 !important;
}


/* IMAGE */

.card-image {
    width: 100%;
    height: 220px;
    /* smaller so card becomes thinner */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* PRICE */

.car-price {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}


/* SPECS */

.spec-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: #000;
    line-height: 1.4;
}

.spec-row-single {
    justify-content: flex-start;
}

.spec-row-single span {
    word-break: break-word;
}

.car-specs {
    margin-bottom: 4px;
}


/* BUTTON */

.details-btn {
    display: block;
    width: fit-content;
    text-align: center;
    margin: 0 auto;
    margin-top: 16px;
    padding: 10px 16px;
    border: 1px solid #000;
    color: #000;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: .3s;
}

.details-btn:hover {
    background: #000;
    color: #fff;
}


/* Main vehicle list wrapper */

.vehicle-list {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}


/* WRAPPER - flexbox container with relative positioning */

.car-listing-container {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.group-filter {
    border-bottom: 1.3px solid #B3B3B3;
    padding: 12px 0;
}


/* SIDEBAR - Animates width to hide */

.sidebar-car {
    position: sticky;
    top: 105px;
    left: 0;
    width: 0;
    height: fit-content;
    padding: 0;
    background: #fff;
    border: 1px solid #b5b3b3;
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 998;
    /* HIDE - smooth drawer slide */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease, visibility 0.25s ease;
}


/* Sidebar scrollbar */

.filter-box::-webkit-scrollbar {
    width: 6px;
}

.filter-box::-webkit-scrollbar-thumb {
    background-color: #151515;
    border-radius: 10px;
}

.filter-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}


/* When the sidebar is active (visible) */

.sidebar-car.active {
    width: 300px;
    padding: 1.125rem 0.9rem 0.875rem 0.9rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.12);
}


/* Cars grid wrapper */

.car-grid-wrapper {
    width: 100%;
    overflow: inherit;
}


/* Filter bar styling */

.filter-car-bar {
    margin-left: 0;
    width: 100%;
}


/* CLOSE BUTTON */

.close-sidebar {
    position: absolute;
    top: 10px;
    background: #fff;
    right: 1px;
    cursor: pointer;
    z-index: 10;
    padding: 10px 8px;
    display: flex;
    border-radius: 50%;
    border: 1px solid #000;
}


/* Filter box scrollable */

.sidebar-car .filter-box {
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
}


/* Cars grid - ensure it takes full width */

.cars-grid {
    width: 100%;
}


/* HIDE DESKTOP FILTERS IN MOBILE */

@media(max-width:1199px) {
    /* Mobile sidebar - overlay, not sticky */
    .sidebar-car {
        position: fixed;
        width: 0;
        z-index: 99999;
        height: calc(100vh - 0px);
        top: 0px;
        padding: 0;
        overflow: hidden;
        transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .sidebar-car.active {
        width: 280px;
        padding: 1.125rem 0.9rem 0.875rem 0.9rem;
    }
    .filter-box {
        max-height: calc(90vh - 115px);
        overflow-y: auto;
        margin-top: 10px;
    }
}


/* MOBILE FILTER BAR */

.mobile-filter-bar {
    display: none;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    align-items: center;
    gap: 10px;
}

@media(max-width:768px) {
    .mobile-filter-bar {
        display: flex;
        position: sticky;
        top: 120px;
        margin-bottom: 10px;
        z-index: 43;
    }
    .filter-car-bar {
        display: none;
    }
    .cars-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Filter Button (LEFT) --- */

.mob-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    width: 58px;
    height: 44px;
    background: #ffffff !important;
    border: 1.5px solid #000 !important;
    border-radius: 5px;
    cursor: pointer;
    padding: 7px 6px 5px;
    box-sizing: border-box;
    -webkit-appearance: none !important;
}


/* CSS 3-line hamburger icon */

.mob-filter-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    width: 18px;
}

.mob-filter-icon::before,
.mob-filter-icon::after,
.mob-filter-icon {
    position: relative;
}

.mob-filter-icon::before {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: #000;
    border-radius: 1px;
}


/* Middle line via box-shadow trick */

.mob-filter-icon {
    width: 18px;
    height: 2px;
    background: #000;
    border-radius: 1px;
    box-shadow: 0 5px 0 #000, 0 -5px 0 #000;
    margin: 5px 0;
}

.mob-filter-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #000 !important;
    line-height: 1;
    display: block;
}

.mob-filter-btn:hover {
    background: #000 !important;
}

.mob-filter-btn:hover .mob-filter-icon {
    background: #fff;
    box-shadow: 0 5px 0 #fff, 0 -5px 0 #fff;
}

.mob-filter-btn:hover .mob-filter-label {
    color: #fff !important;
}


/* --- Search Row (RIGHT) --- */

.mob-search-row {
    flex: 1;
    display: flex;
    align-items: center;
    height: 44px;
    border: 1.5px solid #000;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.keyword-mob {
    flex: 1;
    height: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    padding: 0 12px;
    font-size: 14px;
    color: #222;
}

.keyword-mob::placeholder {
    color: #999;
}

.mob-search-btn {
    width: 44px;
    height: 100%;
    background: #ffffff !important;
    border: none !important;
    border-left: 1.5px solid #000 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    -webkit-appearance: none !important;
    position: relative;
}


/* CSS magnifying glass circle */

.mob-search-btn::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-58%, -58%);
    background: transparent;
}


/* CSS magnifying glass handle */

.mob-search-btn::after {
    content: '';
    display: block;
    width: 2px;
    height: 7px;
    background: #000;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, 25%) rotate(-45deg);
    transform-origin: top center;
}


/* HOVER — invert: black bg, white icon */

.mob-search-btn:hover,
.mob-search-btn:focus,
.mob-search-btn:active {
    background: #000 !important;
    outline: none !important;
    box-shadow: none !important;
}

.mob-search-btn:hover::before,
.mob-search-btn:focus::before,
.mob-search-btn:active::before {
    border-color: #fff;
}

.mob-search-btn:hover::after,
.mob-search-btn:focus::after,
.mob-search-btn:active::after {
    background: #fff;
}


/* hide old classes */

.mobile-search {
    display: none !important;
}

.mobile-tabs {
    display: none !important;
}

.m-tab {
    display: none !important;
}

@media(max-width:1024px) {
    .filter-car-bar {
        grid-template-columns: 1fr 1fr;
    }
    .search-btn {
        grid-column: 1 / -1;
        height: 30px;
        padding: 0 5px;
        width: fit-content;
        position: absolute;
        right: 18px;
        top: 30px;
    }
}

.car-listing-container {
    display: flex;
    gap: 20px;
    font-family: 'Michroma', sans-serif;
}

@media(max-width:768px) {
    .car-listing-container {
        flex-direction: column;
    }
    .car-grid-wrapper {
        width: 100%;
    }
}