@media (max-width: 768px) {
            .filteritems .btn:not([style*="background-color: #D6DDF5"]) {
                display: none !important;
            }

            .filteritems .btn[style*="background-color: #D6DDF5"] {
                display: inline-flex !important;
            }

            .filteritems {
                gap: 0.5rem !important;
            }
        }

        @media (min-width: 769px) {
            .dropdown-menu.show {
                max-height: 250px;
                overflow-y: auto;
            }
        }

        .custom-select-list .dropdown-item {
            @media(max-width:1440px) {
                padding-top: 18px !important;
                padding-bottom: 18px !important;
            }
        }

        .dropdown.custom-dropdown .dropdown-toggle {
            @media (max-width: 1440px) {
                font-size: 15px !important;
                height: 46px !important;
                color: rgb(33, 37, 41) !important;
                font-weight: 300 !important;
            }
        }

        .dropdown.custom-dropdown .dropdown-menu .dropdown-item {
            font-size: 13px;
            padding: 10px 16px;
            color: #0E121B;
            white-space: normal;
            position: relative;
            padding-left: 40px;
        }

        .scrollable-dropdown {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 0;
            margin: 0;
        }

        .selected-option {
            background-color: #e3f2fd !important;
            font-weight: bold;
        }

        .dropdown-menu {

            width: 100%;
            max-height: 400px;
            box-sizing: border-box;
            text-align: left;
            white-space: nowrap;

        }

        .filter-scroll-container {
            position: fixed;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            z-index: 997;
            display: flex;

        }

        .filter-scroll-button {
            background-color: #D6DDF5;
            color: black;
            border: 2px solid #D6DDF5;
            border-radius: 10px;
            padding: 10px 20px;
            cursor: pointer;
        }

        .filter-scroll-container .filter-scroll-button:first-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            border-right: 2px solid white;

        }

        .filter-scroll-container .filter-scroll-button:last-child {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;

        }

        .filter-scroll-button .pc-scroll-arrow {
            display: inline-block;
            width: 20px;
            height: 20px;
            font-family: Arial, sans-serif !important;
            font-size: 20px !important;
            line-height: 18px !important;
            font-weight: 600;
            text-align: center;
            color: currentColor;
            overflow: hidden;
        }

        button[disabled] {
            border: none;
            background-color: transparent;
            pointer-events: none;
            box-shadow: none;
        }

        .dropdown-toggle[disabled]::after {
            content: none;
        }

        .search_color {
            background-color: rgb(255, 255, 255) !important;
        }

        @media (min-width: 999px) {
            #topbarpadding {
                position: sticky;
                top: 0;
                z-index: 1000;
                /* Ensures it stays on top */
                background: white;
                /* Add a background to avoid transparency issues */
                border: none;
                box-shadow: none;
                /* Removes any shadow */
                height: 70px !important;
            }

            .desktopfooter {
                padding-top: 30px;
            }

        }

        .scroll-to-top {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: white;
            color: black;
            border: 2px solid black;
            border-radius: 10px;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 16px;
            z-index: 1000;
        }

        /* Show the button only on small screens */
        @media (max-width: 768px) {
            .scroll-to-top {
                display: block;
            }

            .filter-item:has(#bodytypeList),
            .filter-item:has(#fueltypeList),
            .filter-item:has(#gearboxList),
            .filter-item:has(#maxmilesList),
            .filter-item:has(#enginesizeList),
            .filter-item:has(#doorsList),
            .filter-item:has(#colorsList),
            .filter-item:has(#sellertypeList) {
                display: inline !important;
            }
        }


        @media screen and (max-width: 990px) {

            .filteritems {
                display: flex !important;
                flex-wrap: nowrap !important;
                /* Prevent wrapping */
                align-items: center !important;
                /* Align vertically */
                justify-content: flex-start !important;
                /* Align to left */
                overflow-x: auto !important;
                /* Enable horizontal scrolling if needed */
                white-space: nowrap !important;
                padding: 10px !important;
                padding-left: 0px !important;
                gap: 10px !important;
            }

            .filteritems button:not(:has(span)) {
                display: none !important;
            }

            .filteritems div {
                display: inline-block !important;
                min-width: 100px !important;
                text-align: center !important;
                background: #eee !important;
                padding: 10px !important;
                border-radius: 5px !important;
            }

            #usedcarsfound {

                margin-bottom: 0 !important;
                padding-bottom: 0 !important;
            }

            #mobilelayout {

                margin-top: 0 !important;
                padding-top: 0 !important;
            }

            .filter-button {
                display: block !important;

            }

            .filter-button {
                display: none !important;
            }

            /* When filter modal is open on mobile: hide navbar and lock body scroll */
            body.forsale-filter-open .navbar,
            body.forsale-filter-open .pc-header {
                display: none !important;
            }

            body.forsale-filter-open {
                overflow: hidden !important;
                position: fixed !important;
                width: 100% !important;
                height: 100% !important;
            }

            #filterModal {
                padding: 0 !important;
                background: white !important;
            }

            #filterModal .modal-dialog {
                margin: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
                height: 100vh !important;
                height: 100dvh !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
            }

            #filterModal .modal-content {
                border-radius: 0 !important;
                margin-top: 0 !important;
                padding-top: 0 !important;

                background: white !important;
                border: none !important;
                height: 100vh !important;
                height: 100dvh !important;
                display: flex !important;
                flex-direction: column !important;
                box-shadow: none !important;
                overflow: hidden !important;

            }

            #filterModal .modal-header {
                flex-shrink: 0 !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                background: white !important;
                z-index: 1000 !important;
                padding: 1rem !important;
                border: none !important;
                border-bottom: 1px solid #eee !important;
            }

            #filterModal .modal-body {
                flex: 1 !important;
                min-height: 0 !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                padding: 1rem !important;
                padding-bottom: 100px !important;
                padding-top: 0.5rem !important;
                margin-top: 0 !important;
            }

            #filterModal .modal-footer {
                flex-shrink: 0 !important;
                position: sticky !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                background: white !important;
                z-index: 1000 !important;
                padding: 1rem !important;
                border: none !important;
                border-top: 1px solid #eee !important;
            }

            .bottonbuttons {
                margin-bottom: 20px !important;
            }

            #filterModal .modal-footer {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                gap: 10px !important;
                flex-wrap: nowrap !important;
            }

            #filterModal .modal-footer>div {
                display: flex !important;
                gap: 10px !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                flex-shrink: 0 !important;
            }

            #filterModal .modal-footer .bottonbuttons {
                white-space: nowrap !important;
                flex-shrink: 0 !important;
                margin-bottom: 0 !important;
                padding: 8px 16px !important;
                min-width: auto !important;
            }



        }

        .paddingmobile {
            margin-bottom: 5px !important;

        }

        .paddingmobile {
            position: relative;
            padding-bottom: 10px;
            /* Space before the line */
        }

        .paddingmobile::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 5%;
            width: 90% !important;
            height: 1px;
            background-color: #ccc;
            /* Light grey separator */
        }

        @media screen and (max-width: 990px) {

            /* Hide radio buttons in filter selects on mobile */
            #filterModal input[type="radio"],
            #filterModal .dropdown-menu input[type="radio"],
            .dropdown-menu input[type="radio"],
            #filterModal .dropdown-item input[type="radio"],
            .dropdown-item input[type="radio"],
            #filterModal li input[type="radio"],
            #filterModal .dropdown-menu li input[type="radio"],
            .dropdown-menu li input[type="radio"],
            #filterModal .form-check-input[type="radio"],
            #filterModal .form-check,
            #filterModal .form-check-label::before,
            #filterModal .form-check-label::after {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                width: 0 !important;
                height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Hide any circular indicators that might look like radio buttons */
            /*#filterModal .dropdown-item::before,
                    #filterModal .dropdown-item::after,
                    .dropdown-item::before,
                    .dropdown-item::after {
                        display: none !important;
                        content: none !important;
                        }*/

            /* Specifically hide circles in dropdown menu items */
            /*#filterModal .dropdown-menu li::before,
                    #filterModal .dropdown-menu li::after,
                    .dropdown-menu li::before,
                    .dropdown-menu li::after {
                        display: none !important;
                        content: none !important;
                        }*/

            #externalDropdownList {
                list-style: none;
                padding: 30px !important;
                margin: 0;
            }

            #externalDropdownList li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #ddd;
                font-size: 16px;
                position: relative;
            }


            #externalDropdownList li:last-child {
                border-bottom: none;
            }

            /* Adding an unfilled black circle at the end of each list item */
            #externalDropdownList li::after {
                content: "";
                width: 12px;
                /* Adjust size of the circle */
                height: 12px;
                border: 2px solid black;
                /* Black border for unfilled effect */
                border-radius: 50%;
                margin-left: 10px;
            }

            .search-form-modal {
                display: none;
                position: fixed;
                z-index: 1002;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0, 0, 0, 0.775);
                padding-top: 60px;
            }


            .closemobile {
                color: #aaa;
                float: right !important;
                font-size: 35px;
                font-weight: bold;
                cursor: pointer;
                top: 20px;
                margin-left: auto;

                margin-right: 10px;

            }

            .closemobile:hover,
            .closemobile:focus {
                color: black;
                text-decoration: none;
            }

            .modal-contentmobile {
                background-color: #fefefe;
                border: 1px solid #888;
                border-radius: 10px 10px 0 0;
                margin: auto auto 0 auto;
                max-width: 100%;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                width: 480px;
                max-height: calc(100% - 60px);
                overflow-y: auto;
            }

        }

        .dropdown-toggle .fa-chevron-down {
            font-size: 12px;
            color: #888;
            transition: transform 0.2s ease;

        }

        .modal.fade .modal-dialog {
            transform: translateY(100%);
            transition: transform 0.3s ease-out;
        }

        .modal.show .modal-dialog {
            transform: translateY(0);
        }

        .modal-dialog {
            transform: translateX(-50%);
        }

        @media screen and (min-width: 991px) {
            .filter-button {
                position: static;
                transform: none;

            }
        }

        .search-filter-bar .header {
            padding: 10px 12px;
            border-bottom: 1px solid #f1efef;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .search-filter-bar .header .header-title {
            font-size: 18px;
            color: #000;
        }

        .search-filter-bar .header .header-times {
            color: #000;
            font-size: 27px;
            height: 2rem;
            width: 1rem;
            margin-top: -10px;
        }

        @media (min-width: 768px) {
            .display-desktop-none {
                display: none !important;
            }
        }

        @media (max-width: 768px) {

            /* Container scroll rahega, but native scrollbar hide ho jayegi */
            .desktop-hero-section-text {
                overflow-y: auto;
                overflow-x: hidden;
                position: relative;
                padding-right: 18px;
                /* indicator space */
                scrollbar-gutter: stable;
            }

            /* ✅ Hide native scrollbar - Chrome/Edge/Safari */
            .desktop-hero-section-text::-webkit-scrollbar {
                width: 0 !important;
                height: 0 !important;
            }

            /* ✅ Hide native scrollbar - Firefox */
            .desktop-hero-section-text {
                scrollbar-width: none;
                /* hides scrollbar */
            }

            /* ✅ Hide native scrollbar - old Edge/IE */
            .desktop-hero-section-text {
                -ms-overflow-style: none;
            }

            /* ✅ Permanent custom indicator */
            .desktop-hero-section-text .scroll-indicator {
                position: absolute;
                top: 8px;
                right: 6px;
                width: 6px;
                height: calc(100% - 16px);
                background: rgba(0, 0, 0, .12);
                border-radius: 999px;
                pointer-events: none;
                z-index: 10;
            }

            .desktop-hero-section-text .scroll-indicator .thumb {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 40px;
                /* JS update karega */
                background: rgba(0, 0, 0, .45);
                border-radius: 999px;
                transform: translateY(0);
            }

            /* Hide radio buttons in filter selects on mobile */
            #filterModal input[type="radio"],
            #filterModal .dropdown-menu input[type="radio"],
            .dropdown-menu input[type="radio"],
            #filterModal .dropdown-item input[type="radio"],
            .dropdown-item input[type="radio"],
            #filterModal li input[type="radio"],
            #filterModal .dropdown-menu li input[type="radio"],
            .dropdown-menu li input[type="radio"],
            #filterModal .form-check-input[type="radio"],
            #filterModal .form-check,
            #filterModal .form-check-label::before,
            #filterModal .form-check-label::after {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                width: 0 !important;
                height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Hide any circular indicators that might look like radio buttons */
            /*#filterModal .dropdown-item::before,
                    #filterModal .dropdown-item::after,
                    .dropdown-item::before,
                    .dropdown-item::after {
                        display: none !important;
                        content: none !important;
                        }*/

            /* Specifically hide circles in dropdown menu items */
            /*#filterModal .dropdown-menu li::before,
                    #filterModal .dropdown-menu li::after,
                    .dropdown-menu li::before,
                    .dropdown-menu li::after {
                        display: none !important;
                        content: none !important;
                        }*/

            .navbar.navbar-expand-lg {
                z-index: 80 !important;
            }

            .show.display-mobile-none li .dropdown-item,
            .display-mobile-none {
                display: none !important;
            }

            .desktop-hero-section-text {
                padding: 0px !important;
                position: absolute;
                top: -100vh;
                left: 0;
                right: 0;
                width: 100%;
                z-index: 75 !important;
                background: #ffffff;
                overflow: hidden;
                height: 100vh !important;
                height: 100dvh !important;
                overflow: scroll !important;
            }



            .desktop-hero-section-text.show {
                padding: 16px !important;
                animation: slideDown 0.6s ease forwards;
            }

            @keyframes slideDown {
                from {
                    top: -100vh;
                }

                to {
                    top: 0;
                }
            }

            .search-filter-bar {
                z-index: 10 !important;
            }

            /* For-sale page only: show the "Close" button inside the search form (mobile only) */
            #mobileSearchForm .pc-mobile-search-close {
                display: inline-flex !important;
                justify-content: center !important;
                align-items: center !important;
                text-align: center !important;
            }

            /* Keep the mobile search completely out of layout until Search is pressed.
               Desktop is deliberately untouched and uses the original search block. */
            #mobileSearchForm:not(.show) {
                display: none !important;
            }

            #mobileSearchForm.show {
                display: block !important;
                position: fixed !important;
                inset: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                height: 100dvh !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                background: #fff !important;
                z-index: 1002 !important;
                padding: 16px !important;
            }

            /* PureCar mobile bottom controls: visual-only update, no flow changes. */
            .search-filter-bar {
                left: 12px !important;
                right: 12px !important;
                bottom: max(10px, env(safe-area-inset-bottom)) !important;
                width: auto !important;
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 50px !important;
                gap: 8px !important;
                padding: 8px !important;
                background: rgba(255, 255, 255, .97) !important;
                border: 1px solid #e2e4e8 !important;
                border-radius: 17px !important;
                box-shadow: 0 8px 28px rgba(0, 0, 0, .14) !important;
                overflow: visible !important;
                backdrop-filter: blur(12px);
            }

            .search-filter-bar > .dropdown {
                min-width: 0 !important;
                width: 100% !important;
            }

            .search-filter-bar .bar-section {
                width: 100% !important;
                min-width: 0 !important;
                height: 50px !important;
                min-height: 50px !important;
                margin: 0 !important;
                padding: 0 14px !important;
                border-radius: 11px !important;
                font-size: 16px !important;
                line-height: 1 !important;
                font-weight: 600 !important;
                letter-spacing: 0 !important;
                box-shadow: none !important;
            }

            #mobile-search-button {
                background: #17191d !important;
                color: #fff !important;
                border: 1px solid #17191d !important;
            }

            #sortDropdown {
                background: #fff !important;
                color: #17191d !important;
                border: 1px solid #cfd3d8 !important;
            }

            .search-filter-bar .arrow-section {
                width: 50px !important;
                padding: 0 !important;
                background: #17191d !important;
                color: #fff !important;
                border: 1px solid #17191d !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .search-filter-bar .arrow-section svg {
                width: 17px !important;
                height: 17px !important;
                flex: 0 0 17px !important;
            }

            .search-filter-bar .dropdown-menu {
                border: 1px solid #e0e2e6 !important;
                border-radius: 14px !important;
                box-shadow: 0 12px 30px rgba(0, 0, 0, .16) !important;
                overflow: hidden !important;
            }
        }

        #sortList .dropdown-item {
            padding: 10px 34px !important;
            font-size: 16px !important;
        }

        .dropdowns.custom-dropdown .dropdown-menu .dropdown-item::before {
            background-color: red !important;
        }

        /*dropdown css*/
        #sortList .dropdown-item {
            position: relative !important;
            padding-left: 44px !important;
        }

        /* Outer ring (unselected) */
        #sortList .dropdown-item::before {
            content: "" !important;
            position: absolute !important;
            left: 18px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 18px !important;
            height: 18px !important;
            border-radius: 50% !important;
            border: 2px solid #cbd5e1 !important;
            background: #fff !important;
            /* ring ke andar white */
        }

        /* Inner dot (hidden by default) */
        #sortList .dropdown-item::after {
            content: "" !important;
            position: absolute !important;
            left: 23px !important;
            /* (14 + 18/2) - (8/2) = 23 */
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 8px !important;
            height: 8px !important;
            border-radius: 50% !important;
            background: #0d6efd !important;
            opacity: 0 !important;
            /* default hide */
        }

        /* Selected: ring blue + show inner dot */
        #sortList .dropdown-item.sort-selected::before {
            border-color: #0d6efd !important;
        }

        #sortList .dropdown-item.sort-selected::after {
            opacity: 1 !important;
        }

        /* Safety: Bootstrap active background off */
        #sortList .dropdown-item.active,
        #sortList .dropdown-item:active {
            background: transparent !important;
            color: inherit !important;
        }

        .dropdown-item.active,
        .dropdown-item:active {
            background-color: transparent;
        }