/* =========================================================
   MOTOMART.LK
   GLOBAL DARK MODE
   ALL PAGES
========================================================= */


/* =========================================================
   BASE
========================================================= */

html.dark-mode {
    background:#0f172a !important;
}

html.dark-mode body,
body.dark-mode {

    background:#0f172a !important;
    background-image:none !important;

    color:#e5e7eb !important;

    transition:
        background .25s ease,
        color .25s ease;
}


/* =========================================================
   PAGE WRAPPER
========================================================= */

html.dark-mode .page-wrap,
body.dark-mode .page-wrap,

html.dark-mode main,
body.dark-mode main,

html.dark-mode .main-content,
body.dark-mode .main-content,

html.dark-mode .content,
body.dark-mode .content {

    background:#0f172a !important;
    color:#e5e7eb !important;
}


/* =========================================================
   COMMON WHITE BACKGROUNDS
========================================================= */

html.dark-mode .container,
html.dark-mode .container-box,
html.dark-mode .box,
html.dark-mode .card,
html.dark-mode .panel,
html.dark-mode .section,
html.dark-mode .content-box,
html.dark-mode .form-box,
html.dark-mode .details-box,
html.dark-mode .profile-box,
html.dark-mode .payment-box,
html.dark-mode .white-box,

body.dark-mode .container,
body.dark-mode .container-box,
body.dark-mode .box,
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .section,
body.dark-mode .content-box,
body.dark-mode .form-box,
body.dark-mode .details-box,
body.dark-mode .profile-box,
body.dark-mode .payment-box,
body.dark-mode .white-box {

    background:#111827 !important;

    color:#e5e7eb !important;

    border-color:#334155 !important;
}


/* =========================================================
   ALL TEXT
========================================================= */

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,

html.dark-mode p,
html.dark-mode span,
html.dark-mode label,
html.dark-mode strong,
html.dark-mode small,
html.dark-mode li,

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,

body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode strong,
body.dark-mode small,
body.dark-mode li {

    color:#e5e7eb !important;
}


/* =========================================================
   LINKS
========================================================= */

html.dark-mode a,
body.dark-mode a {

    color:#93c5fd;
}


/* =========================================================
   NAVBAR
========================================================= */

html.dark-mode .navbar,
body.dark-mode .navbar,

html.dark-mode header,
body.dark-mode header {

    background:#0b1220 !important;

    color:#fff !important;

    border-color:#334155 !important;
}


/* Navbar text */

html.dark-mode .navbar a,
html.dark-mode .navbar span,
html.dark-mode .navbar button,
html.dark-mode .logo-text,

body.dark-mode .navbar a,
body.dark-mode .navbar span,
body.dark-mode .navbar button,
body.dark-mode .logo-text {

    color:#f8fafc !important;
}


/* =========================================================
   SUB NAVBAR
========================================================= */

html.dark-mode .sub-navbar,
body.dark-mode .sub-navbar {

    background:#111827 !important;

    color:#f8fafc !important;

    border-color:#334155 !important;
}


html.dark-mode .sub-navbar a,
body.dark-mode .sub-navbar a {

    color:#f8fafc !important;
}


/* =========================================================
   LOGO
========================================================= */

html.dark-mode .logo-text,
body.dark-mode .logo-text {

    color:#e63946 !important;

    background:rgba(255,255,255,.05) !important;

    border-color:#fff !important;
}


/* =========================================================
   SEARCH
========================================================= */

html.dark-mode .search-input,
html.dark-mode .search-category,
html.dark-mode .search-box,
html.dark-mode .nav-search input,
html.dark-mode .filter-bar input,
html.dark-mode .filter-bar select,

body.dark-mode .search-input,
body.dark-mode .search-category,
body.dark-mode .search-box,
body.dark-mode .nav-search input,
body.dark-mode .filter-bar input,
body.dark-mode .filter-bar select {

    background:#1e293b !important;

    color:#fff !important;

    border-color:#475569 !important;
}


/* Search placeholder */

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {

    color:#94a3b8 !important;
}


/* Search button */

html.dark-mode .search-btn,
html.dark-mode .filter-bar button,

body.dark-mode .search-btn,
body.dark-mode .filter-bar button {

    background:#2563eb !important;

    color:#fff !important;

    border-color:#2563eb !important;
}


/* =========================================================
   INPUTS
========================================================= */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {

    background:#111827 !important;

    color:#f8fafc !important;

    border:1px solid #475569 !important;
}


/* Select option */

html.dark-mode option,
body.dark-mode option {

    background:#111827 !important;

    color:#fff !important;
}


/* =========================================================
   BUTTONS
========================================================= */

html.dark-mode button:not(.dark-btn),
body.dark-mode button:not(.dark-btn) {

    color:#fff !important;

    border-color:#475569 !important;
}


/* =========================================================
   DARK MODE BUTTON
========================================================= */

.dark-btn {

    margin-left:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    width:75px;

    height:30px;

    background:#334155;

    color:#fff !important;

    font-size:10px;

    font-weight:600;

    text-decoration:none;

    border:none;

    border-radius:6px;

    border:1px solid #475569;

    box-shadow:
        0 4px 0 #1e293b,
        0 8px 18px rgba(0,0,0,.25);

    transition:all .2s ease;

    transform:translateY(0);

    cursor:pointer;

    user-select:none;
}


.dark-btn:hover {

    background:#475569;

    box-shadow:
        0 5px 0 #0f172a,
        0 10px 22px rgba(0,0,0,.28);

    transform:translateY(-2px);
}


.dark-btn:active {

    transform:translateY(3px);

    box-shadow:
        0 2px 0 #0f172a,
        0 4px 10px rgba(0,0,0,.2);
}


.dark-btn:focus {

    outline:none;
}


/* =========================================================
   FEATURED SECTION
========================================================= */

html.dark-mode .featured-container,
html.dark-mode .featured-slider,

body.dark-mode .featured-container,
body.dark-mode .featured-slider {

    background:#0f172a !important;
}


/* Featured cards */

html.dark-mode .featured-card,
body.dark-mode .featured-card {

    background:#1e293b !important;

    color:#fff !important;

    border:1px solid #334155 !important;
}


html.dark-mode .featured-card h1,
html.dark-mode .featured-card h2,
html.dark-mode .featured-card h3,
html.dark-mode .featured-card p,
html.dark-mode .featured-card span,

body.dark-mode .featured-card h1,
body.dark-mode .featured-card h2,
body.dark-mode .featured-card h3,
body.dark-mode .featured-card p,
body.dark-mode .featured-card span {

    color:#fff !important;
}


/* Slider fade */

html.dark-mode .featured-slider::before,
body.dark-mode .featured-slider::before {

    background:
        linear-gradient(
            to right,
            #0f172a,
            transparent
        ) !important;
}


html.dark-mode .featured-slider::after,
body.dark-mode .featured-slider::after {

    background:
        linear-gradient(
            to left,
            #0f172a,
            transparent
        ) !important;
}


/* =========================================================
   CATEGORY
========================================================= */

html.dark-mode .category-section,
html.dark-mode .cat-item,
html.dark-mode .main-cat,
html.dark-mode .sub-category,

body.dark-mode .category-section,
body.dark-mode .cat-item,
body.dark-mode .main-cat,
body.dark-mode .sub-category {

    background:#111827 !important;

    color:#fff !important;

    border-color:#334155 !important;
}


html.dark-mode .category-section h2,
html.dark-mode .category-section a,
html.dark-mode .category-section span,
html.dark-mode .category-section b,

html.dark-mode .main-cat,
html.dark-mode .main-cat span,
html.dark-mode .main-cat b,

html.dark-mode .sub-category a,

body.dark-mode .category-section h2,
body.dark-mode .category-section a,
body.dark-mode .category-section span,
body.dark-mode .category-section b,

body.dark-mode .main-cat,
body.dark-mode .main-cat span,
body.dark-mode .main-cat b,

body.dark-mode .sub-category a {

    color:#f8fafc !important;
}


html.dark-mode .cat-item,
body.dark-mode .cat-item {

    border-bottom:1px solid #334155 !important;
}


html.dark-mode .sub-category a:hover,
body.dark-mode .sub-category a:hover {

    background:#1e293b !important;
}


/* =========================================================
   ADS
========================================================= */

html.dark-mode .ads-container,
body.dark-mode .ads-container {

    background:transparent !important;
}


html.dark-mode .ad-row,
body.dark-mode .ad-row {

    background:#1e293b !important;

    color:#fff !important;

    border:1px solid #334155 !important;
}


/* Ad text */

html.dark-mode .ad-row h1,
html.dark-mode .ad-row h2,
html.dark-mode .ad-row h3,
html.dark-mode .ad-row p,
html.dark-mode .ad-row span,
html.dark-mode .ad-row .price,
html.dark-mode .ad-row .specs,
html.dark-mode .ad-row .location,
html.dark-mode .ad-row .time,

body.dark-mode .ad-row h1,
body.dark-mode .ad-row h2,
body.dark-mode .ad-row h3,
body.dark-mode .ad-row p,
body.dark-mode .ad-row span,
body.dark-mode .ad-row .price,
body.dark-mode .ad-row .specs,
body.dark-mode .ad-row .location,
body.dark-mode .ad-row .time {

    color:#fff !important;
}


/* =========================================================
   TOP ADS
========================================================= */

html.dark-mode .top-card,
html.dark-mode .top-ad,
html.dark-mode .top-ad-card,

body.dark-mode .top-card,
body.dark-mode .top-ad,
body.dark-mode .top-ad-card {

    background:#1e293b !important;

    color:#fff !important;

    border-color:#334155 !important;
}


/* =========================================================
   GRID BANNER
========================================================= */

html.dark-mode .grid-banner,
body.dark-mode .grid-banner {

    background:#1e293b !important;

    color:#fff !important;

    border-color:#334155 !important;
}


/* =========================================================
   POST AD / FORMS
========================================================= */

html.dark-mode form,
html.dark-mode .post-form,
html.dark-mode .ad-form,

body.dark-mode form,
body.dark-mode .post-form,
body.dark-mode .ad-form {

    color:#e5e7eb !important;
}


html.dark-mode .form-group,
html.dark-mode .form-section,
html.dark-mode .form-card,

body.dark-mode .form-group,
body.dark-mode .form-section,
body.dark-mode .form-card {

    background:#111827 !important;

    color:#e5e7eb !important;

    border-color:#334155 !important;
}


/* =========================================================
   PAYMENT
========================================================= */

html.dark-mode .payment-box,
html.dark-mode .payment-container,
html.dark-mode .payment-section,

body.dark-mode .payment-box,
body.dark-mode .payment-container,
body.dark-mode .payment-section {

    background:#111827 !important;

    color:#e5e7eb !important;

    border-color:#334155 !important;
}


/* =========================================================
   PROFILE
========================================================= */

html.dark-mode .profile,
html.dark-mode .profile-card,
html.dark-mode .profile-container,
html.dark-mode .user-box,

body.dark-mode .profile,
body.dark-mode .profile-card,
body.dark-mode .profile-container,
body.dark-mode .user-box {

    background:#111827 !important;

    color:#e5e7eb !important;

    border-color:#334155 !important;
}


/* =========================================================
   TABLES
========================================================= */

html.dark-mode table,
body.dark-mode table {

    background:#111827 !important;

    color:#e5e7eb !important;

    border-color:#334155 !important;
}


html.dark-mode th,
body.dark-mode th {

    background:#1e293b !important;

    color:#fff !important;

    border-color:#334155 !important;
}


html.dark-mode td,
body.dark-mode td {

    color:#e5e7eb !important;

    border-color:#334155 !important;
}


/* =========================================================
   DROPDOWNS
========================================================= */

html.dark-mode .dropdown-content,
html.dark-mode .dropdown-menu,
html.dark-mode .dropdown,

body.dark-mode .dropdown-content,
body.dark-mode .dropdown-menu,
body.dark-mode .dropdown {

    background:#1e293b !important;

    color:#fff !important;

    border-color:#334155 !important;
}


html.dark-mode .dropdown-content a,
html.dark-mode .dropdown-menu a,

body.dark-mode .dropdown-content a,
body.dark-mode .dropdown-menu a {

    color:#fff !important;
}


html.dark-mode .dropdown-content a:hover,
html.dark-mode .dropdown-menu a:hover,

body.dark-mode .dropdown-content a:hover,
body.dark-mode .dropdown-menu a:hover {

    background:#334155 !important;
}


/* =========================================================
   MOBILE MENU
========================================================= */

html.dark-mode .mobile-menu,
html.dark-mode .mobile-drawer,
html.dark-mode .category-drawer,

body.dark-mode .mobile-menu,
body.dark-mode .mobile-drawer,
body.dark-mode .category-drawer {

    background:#111827 !important;

    color:#fff !important;

    border-color:#334155 !important;
}


/* =========================================================
   MODALS
========================================================= */

html.dark-mode .modal,
html.dark-mode .modal-content,
html.dark-mode .login-modal,
html.dark-mode .login-box,
html.dark-mode .modal-box,

body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .login-modal,
body.dark-mode .login-box,
body.dark-mode .modal-box {

    background:#111827 !important;

    color:#e5e7eb !important;

    border-color:#334155 !important;
}


/* Modal inputs */

html.dark-mode .modal input,
html.dark-mode .modal textarea,
html.dark-mode .modal select,
html.dark-mode .login-modal input,
html.dark-mode .login-modal textarea,
html.dark-mode .login-modal select,

body.dark-mode .modal input,
body.dark-mode .modal textarea,
body.dark-mode .modal select,
body.dark-mode .login-modal input,
body.dark-mode .login-modal textarea,
body.dark-mode .login-modal select {

    background:#0f172a !important;

    color:#fff !important;

    border-color:#475569 !important;
}


/* =========================================================
   FOOTER
========================================================= */

html.dark-mode footer,
html.dark-mode .site-footer,

body.dark-mode footer,
body.dark-mode .site-footer {

    background:#0b1220 !important;

    color:#fff !important;

    border-color:#334155 !important;
}


html.dark-mode footer a,
html.dark-mode footer p,
html.dark-mode footer h2,
html.dark-mode footer h3,
html.dark-mode footer span,

html.dark-mode .site-footer a,
html.dark-mode .site-footer p,
html.dark-mode .site-footer h2,
html.dark-mode .site-footer h3,
html.dark-mode .site-footer span,

body.dark-mode footer a,
body.dark-mode footer p,
body.dark-mode footer h2,
body.dark-mode footer h3,
body.dark-mode footer span,

body.dark-mode .site-footer a,
body.dark-mode .site-footer p,
body.dark-mode .site-footer h2,
body.dark-mode .site-footer h3,
body.dark-mode .site-footer span {

    color:#fff !important;
}


/* =========================================================
   PAGINATION
========================================================= */

html.dark-mode .pagination a,
body.dark-mode .pagination a {

    background:#1e293b !important;

    color:#fff !important;

    border:1px solid #334155 !important;
}


html.dark-mode .pagination a:hover,
body.dark-mode .pagination a:hover {

    background:#334155 !important;
}


html.dark-mode .pagination a.active,
body.dark-mode .pagination a.active {

    background:#2563eb !important;

    color:#fff !important;
}


/* =========================================================
   ALERTS
========================================================= */

html.dark-mode .alert,
html.dark-mode .success,
html.dark-mode .error,
html.dark-mode .warning,

body.dark-mode .alert,
body.dark-mode .success,
body.dark-mode .error,
body.dark-mode .warning {

    border-color:#475569 !important;
}


/* =========================================================
   IMAGES
========================================================= */

html.dark-mode img {
    /* Keep original image brightness */
    filter:none !important;
}


/* =========================================================
   HR / BORDERS
========================================================= */

html.dark-mode hr,
body.dark-mode hr {

    border-color:#334155 !important;
}


/* =========================================================
   SCROLLBAR
========================================================= */

html.dark-mode ::-webkit-scrollbar {

    width:10px;

}


html.dark-mode ::-webkit-scrollbar-track {

    background:#0f172a;

}


html.dark-mode ::-webkit-scrollbar-thumb {

    background:#334155;

    border-radius:10px;

}


html.dark-mode ::-webkit-scrollbar-thumb:hover {

    background:#475569;

}


























/* =========================================================
   FEATURED SLIDER - DARK MODE
========================================================= */

/* Main featured cards */
html.dark-mode .featured-card,
body.dark-mode .featured-card {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}


/* TOP AD CARD */
html.dark-mode .featured-card.top,
body.dark-mode .featured-card.top {
    background: #29251a !important;
}


/* FEATURED AD CARD */
html.dark-mode .featured-card.featured,
body.dark-mode .featured-card.featured {
    background: #17263a !important;
}


/* =========================================================
   CARD DETAILS
========================================================= */

html.dark-mode .featured-card .card-details,
body.dark-mode .featured-card .card-details {
    background: #1e293b !important;
    color: #e5e7eb !important;
}


/* TOP CARD DETAILS */
html.dark-mode .featured-card.top .card-details,
body.dark-mode .featured-card.top .card-details {
    background: #29251a !important;
}


/* FEATURED CARD DETAILS */
html.dark-mode .featured-card.featured .card-details,
body.dark-mode .featured-card.featured .card-details {
    background: #17263a !important;
}


/* =========================================================
   TITLE
========================================================= */

html.dark-mode .featured-card .card-details h3,
body.dark-mode .featured-card .card-details h3 {
    color: #f8fafc !important;
}


/* =========================================================
   PRICE
========================================================= */

html.dark-mode .featured-card .card-details .price,
body.dark-mode .featured-card .card-details .price {
    color: #ffb74d !important;
}


/* =========================================================
   DETAILS / YEAR / MILEAGE
========================================================= */

html.dark-mode .featured-card .details-inline,
body.dark-mode .featured-card .details-inline {
    color: #cbd5e1 !important;
}


html.dark-mode .featured-card .detail-item,
body.dark-mode .featured-card .detail-item {
    color: #cbd5e1 !important;
}


/* MATERIAL ICONS */
html.dark-mode .featured-card .detail-item .material-symbols-outlined,
body.dark-mode .featured-card .detail-item .material-symbols-outlined {
    color: #cbd5e1 !important;
}


/* DIVIDER */
html.dark-mode .featured-card .divider,
body.dark-mode .featured-card .divider {
    color: #64748b !important;
}


/* =========================================================
   FEATURED SECTION BACKGROUND
========================================================= */

html.dark-mode .featured-section,
body.dark-mode .featured-section {
    background: #0f172a !important;
}


/* SECTION TITLE */
html.dark-mode .featured-section h2,
body.dark-mode .featured-section h2 {
    color: #e5e7eb !important;
}


/* =========================================================
   SLIDER FADE
========================================================= */

html.dark-mode .featured-slider::before {
    background: linear-gradient(
        to right,
        #0f172a,
        transparent
    );
}

html.dark-mode .featured-slider::after {
    background: linear-gradient(
        to left,
        #0f172a,
        transparent
    );
}


/* =========================================================
   VERIFIED BADGE - KEEP WHITE
========================================================= */

html.dark-mode .verified-badge-circle,
body.dark-mode .verified-badge-circle {
    background: #ffffff !important;
}

html.dark-mode .verified-badge-circle .label,
body.dark-mode .verified-badge-circle .label {
    color: #1877f2 !important;
}












/* =========================================================
   DARK MODE - CATEGORIES
========================================================= */

/* Main category boxes */
body.dark-mode .category-section > a,
body.dark-mode .category-section .main-cat {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

/* Category heading */
body.dark-mode .category-section h2,
body.dark-mode .category-section .category-header h2 {
    color: #f1f5f9 !important;
}

/* Main category hover */
body.dark-mode .category-section > a:hover,
body.dark-mode .category-section .main-cat:hover {
    background: #009688 !important;
    color: #ffffff !important;
}

/* Sub-category area */
body.dark-mode .sub-category {
    border-left-color: #334155 !important;
}

/* Sub-category links */
body.dark-mode .sub-category a {
    color: #cbd5e1 !important;
}

/* Sub-category hover */
body.dark-mode .sub-category a:hover {
    background: #334155 !important;
    color: #009688 !important;
}

/* Category header */
body.dark-mode .category-section .category-header {
    background: #0f172a !important;
    border-color: #334155 !important;
}

/* Category count badge stays visible */
body.dark-mode .category-section > a b {
    background: #e91e63 !important;
    color: #ffffff !important;
}
















/* =========================================================
   FLOATING HEADER - DARK MODE
========================================================= */

body.dark-mode .floating-header {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

body.dark-mode .floating-header h2 {
    color: #f8fafc !important;
}

body.dark-mode .floating-header p {
    color: #cbd5e1 !important;
}

body.dark-mode .floating-header #headerBadge {
    color: #f8fafc !important;
}




















/* =========================================================
   SEARCH BUTTON - DARK MODE
========================================================= */

body.dark-mode form button[type="submit"] {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #475569 !important;
}

body.dark-mode form button[type="submit"]:hover {
    background: #334155 !important;
    color: #ffffff !important;
}















/* =========================================================
   NAVBAR SEARCH BUTTON - DARK MODE
========================================================= */

body.dark-mode .search-btn {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #475569 !important;
}

body.dark-mode .search-btn:hover {
    background: #334155 !important;
    color: #ffffff !important;
}







/* =========================================================
   INSURANCE SUBMIT BUTTON - DARK MODE
========================================================= */

body.dark-mode .insurance-layout .insurance-right .insurance-form button[type="submit"] {
    background: #1e293b !important;
    background-image: none !important;
    color: #f8fafc !important;
    border: 1px solid #475569 !important;
    box-shadow: none !important;
}

body.dark-mode .insurance-layout .insurance-right .insurance-form button[type="submit"]:hover {
    background: #334155 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}



/* =========================================================
   MOBILE
========================================================= */

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

    html.dark-mode body {

        background:#0f172a !important;

    }


    html.dark-mode .page-wrap {

        background:#0f172a !important;

    }


    html.dark-mode .ad-row {

        background:#1e293b !important;

        border-color:#334155 !important;
    }


    html.dark-mode .featured-card {

        background:#1e293b !important;

    }


    html.dark-mode .category-section {

        background:#111827 !important;

    }


    html.dark-mode .mobile-menu,
    html.dark-mode .category-drawer {

        background:#111827 !important;

    }











/* =========================================================
   DARK MODE - BROWSE BY TYPE TOGGLE
========================================================= */

body.dark-mode .category-toggle {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

body.dark-mode .category-toggle span {
    color: #f1f5f9 !important;
}

body.dark-mode .category-toggle .material-symbols-outlined {
    color: #f1f5f9 !important;
}


/* Hover */
body.dark-mode .category-toggle:hover {
    background: #273449 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}


/* Active / clicked */
body.dark-mode .category-toggle:active {
    background: #334155 !important;
}
















/* =========================================================
   MOBILE BOTTOM BAR - DARK MODE
========================================================= */

body.dark-mode .mobile-bottom-bar {
    background: #111827 !important;
    border-top: 1px solid #334155 !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .mobile-bottom-bar a,
body.dark-mode .mobile-bottom-bar button {
    background: transparent !important;
    color: #e5e7eb !important;
    border: none;
}

body.dark-mode .mobile-bottom-bar small {
    color: #cbd5e1 !important;
}

body.dark-mode .mobile-bottom-bar a:hover,
body.dark-mode .mobile-bottom-bar button:hover {
    color: #ffffff !important;
}


/* =========================================================
   CALCULATOR OVERLAY - DARK MODE
========================================================= */

body.dark-mode .calculator-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}


/* =========================================================
   CALCULATOR DRAWER - DARK MODE
========================================================= */

body.dark-mode .calculator-drawer {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
}


/* =========================================================
   CALCULATOR HEADER
========================================================= */

body.dark-mode .sheet-header {
    background: #0f172a !important;
}

body.dark-mode .sheet-handle {
    background: #64748b !important;
}

body.dark-mode #calcClose {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #475569 !important;
}


/* =========================================================
   CALCULATOR CONTAINER
========================================================= */

body.dark-mode .calc-container {
    background: #0f172a !important;
}


/* =========================================================
   CALCULATOR DISPLAY
========================================================= */

body.dark-mode .calc-display {
    background: #020617 !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}


/* =========================================================
   CALCULATOR BUTTONS
========================================================= */

body.dark-mode .calc-buttons button {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .calc-buttons button:hover {
    background: #334155 !important;
}

body.dark-mode .calc-buttons button:active {
    background: #475569 !important;
    transform: scale(0.96);
}


/* =========================================================
   OPERATOR BUTTONS
========================================================= */

body.dark-mode .calc-buttons button.op {
    background: #334155 !important;
    color: #60a5fa !important;
}

body.dark-mode .calc-buttons button.op:hover {
    background: #475569 !important;
}


/* =========================================================
   EQUAL BUTTON
========================================================= */

body.dark-mode #calcEqual {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

body.dark-mode #calcEqual:hover {
    background: #1d4ed8 !important;
}


/* =========================================================
   MOBILE BOTTOM BAR IMAGE
   Keep PNG images visible
========================================================= */

body.dark-mode .mobile-bottom-bar img {
    opacity: 1 !important;
}


/* =========================================================
   TOP BUTTON
   If using PNG top.png
========================================================= */

body.dark-mode .mobile-bottom-bar button img {
    opacity: 1 !important;
}














































}
















/* =========================================================
   VEHICLE RENTALS - DARK MODE
   DESKTOP + MOBILE
========================================================= */


/* =========================================================
   GLOBAL PAGE
========================================================= */

body.dark-mode {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

body.dark-mode .rentals-layout {
    background: #0f172a !important;
    color: #e5e7eb !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 769px) {

    /* MAIN LAYOUT */
    body.dark-mode .rentals-layout {
        background: #0f172a !important;
    }

    /* LEFT SIDEBAR */
    body.dark-mode .filter-sidebar {
        background: #111827 !important;
        color: #e5e7eb !important;
        border-color: #374151 !important;
    }


    /* =========================
       SEARCH
    ========================= */

    body.dark-mode .search-box {
        background: #111827 !important;
        border: 1px solid #374151 !important;
        color: #e5e7eb !important;
    }

    body.dark-mode .search-box form {
        background: transparent !important;
    }

    body.dark-mode .search-box input {
        background: #1f2937 !important;
        color: #ffffff !important;
        border: 1px solid #4b5563 !important;
    }

    body.dark-mode .search-box input::placeholder {
        color: #9ca3af !important;
    }

    body.dark-mode .search-box input:focus {
        background: #1f2937 !important;
        color: #ffffff !important;
        border-color: #38bdf8 !important;
        outline: none !important;
    }

    body.dark-mode .search-box .search-btn {
        background: #2563eb !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
    }

    body.dark-mode .search-box .search-btn:hover {
        background: #1d4ed8 !important;
    }


    /* =========================
       CATEGORY BOX
    ========================= */

    body.dark-mode .category-box {
        background: #111827 !important;
        color: #e5e7eb !important;
        border: 1px solid #374151 !important;
    }

    body.dark-mode .category-box h3 {
        color: #ffffff !important;
    }


    /* CATEGORY LINKS */

    body.dark-mode .category-box a {
        background: #111827 !important;
        color: #d1d5db !important;
        border-color: #374151 !important;
    }

    body.dark-mode .category-box a span {
        color: #d1d5db !important;
    }

    body.dark-mode .category-box a b {
        background: #374151 !important;
        color: #ffffff !important;
    }


    /* CATEGORY HOVER */

    body.dark-mode .category-box a:hover {
        background: #1f2937 !important;
        color: #38bdf8 !important;
    }

    body.dark-mode .category-box a:hover span {
        color: #38bdf8 !important;
    }


    /* ACTIVE CATEGORY */

    body.dark-mode .category-box a.active {
        background: #1e3a5f !important;
        color: #60a5fa !important;
        border-color: #2563eb !important;
    }

    body.dark-mode .category-box a.active span {
        color: #60a5fa !important;
    }

    body.dark-mode .category-box a.active b {
        background: #2563eb !important;
        color: #ffffff !important;
    }


    /* =========================
       DRIVER FILTER
    ========================= */

    body.dark-mode .driver-box {
        background: #111827 !important;
        color: #e5e7eb !important;
        border: 1px solid #374151 !important;
    }

    body.dark-mode .driver-check {
        color: #e5e7eb !important;
    }

    body.dark-mode .driver-check input[type="checkbox"] {
        accent-color: #2563eb !important;
    }


    /* =========================
       RENTAL CONTENT
    ========================= */

    body.dark-mode .rentals-content,
    body.dark-mode .rental-content,
    body.dark-mode .rentals-main {
        background: #0f172a !important;
        color: #e5e7eb !important;
    }


    /* =========================
       RENTAL CARDS
    ========================= */

    body.dark-mode .rental-card,
    body.dark-mode .rental-item,
    body.dark-mode .rental-box,
    body.dark-mode .rental-card-item,
    body.dark-mode .vehicle-card {
        background: #111827 !important;
        color: #e5e7eb !important;
        border-color: #374151 !important;
    }

    body.dark-mode .rental-card h1,
    body.dark-mode .rental-card h2,
    body.dark-mode .rental-card h3,
    body.dark-mode .rental-card h4,
    body.dark-mode .rental-item h1,
    body.dark-mode .rental-item h2,
    body.dark-mode .rental-item h3,
    body.dark-mode .rental-item h4,
    body.dark-mode .vehicle-card h1,
    body.dark-mode .vehicle-card h2,
    body.dark-mode .vehicle-card h3,
    body.dark-mode .vehicle-card h4 {
        color: #ffffff !important;
    }

    body.dark-mode .rental-card p,
    body.dark-mode .rental-item p,
    body.dark-mode .vehicle-card p {
        color: #cbd5e1 !important;
    }


    /* PRICE */

    body.dark-mode .price {
        color: #4ade80 !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    /* PAGE */

    body.dark-mode {
        background: #0f172a !important;
    }

    body.dark-mode .rentals-layout {
        background: #0f172a !important;
        color: #e5e7eb !important;
    }


    /* =========================
       SIDEBAR
    ========================= */

    body.dark-mode .filter-sidebar {
        background: #111827 !important;
        color: #e5e7eb !important;
        border-color: #374151 !important;
    }


    /* =========================
       SEARCH
    ========================= */

    body.dark-mode .search-box {
        background: #111827 !important;
        border: 1px solid #374151 !important;
    }

    body.dark-mode .search-box form {
        background: transparent !important;
    }

    body.dark-mode .search-box input {
        background: #1f2937 !important;
        color: #ffffff !important;
        border: 1px solid #4b5563 !important;
    }

    body.dark-mode .search-box input::placeholder {
        color: #9ca3af !important;
    }

    body.dark-mode .search-box .search-btn {
        background: #2563eb !important;
        color: #ffffff !important;
    }


    /* =========================
       CATEGORIES
    ========================= */

    body.dark-mode .category-box {
        background: #111827 !important;
        color: #ffffff !important;
        border: 1px solid #374151 !important;
    }

    body.dark-mode .category-box h3 {
        color: #ffffff !important;
    }


    body.dark-mode .category-box a {
        background: #111827 !important;
        color: #d1d5db !important;
        border-color: #374151 !important;
    }

    body.dark-mode .category-box a span {
        color: #d1d5db !important;
    }

    body.dark-mode .category-box a b {
        background: #374151 !important;
        color: #ffffff !important;
    }


    /* ACTIVE */

    body.dark-mode .category-box a.active {
        background: #1e3a5f !important;
        color: #60a5fa !important;
        border-color: #2563eb !important;
    }

    body.dark-mode .category-box a.active span {
        color: #60a5fa !important;
    }

    body.dark-mode .category-box a.active b {
        background: #2563eb !important;
        color: #ffffff !important;
    }


    /* =========================
       DRIVER
    ========================= */

    body.dark-mode .driver-box {
        background: #111827 !important;
        color: #e5e7eb !important;
        border: 1px solid #374151 !important;
    }

    body.dark-mode .driver-check {
        color: #e5e7eb !important;
    }

    body.dark-mode .driver-check input[type="checkbox"] {
        accent-color: #2563eb !important;
    }


    /* =========================
       MOBILE RENTAL CARDS
    ========================= */

    body.dark-mode .rental-card,
    body.dark-mode .rental-item,
    body.dark-mode .rental-box,
    body.dark-mode .rental-card-item,
    body.dark-mode .vehicle-card {
        background: #111827 !important;
        color: #e5e7eb !important;
        border-color: #374151 !important;
    }

    body.dark-mode .rental-card h1,
    body.dark-mode .rental-card h2,
    body.dark-mode .rental-card h3,
    body.dark-mode .rental-card h4,
    body.dark-mode .rental-item h1,
    body.dark-mode .rental-item h2,
    body.dark-mode .rental-item h3,
    body.dark-mode .rental-item h4,
    body.dark-mode .vehicle-card h1,
    body.dark-mode .vehicle-card h2,
    body.dark-mode .vehicle-card h3,
    body.dark-mode .vehicle-card h4 {
        color: #ffffff !important;
    }

    body.dark-mode .rental-card p,
    body.dark-mode .rental-item p,
    body.dark-mode .vehicle-card p {
        color: #cbd5e1 !important;
    }





/* =========================================================
   LIGHT MODE RESTORE
   FIX FILTER BUTTON + CATEGORY TOGGLE AFTER DARK MODE
========================================================= */

/* FILTER / SEARCH BUTTON */
html:not(.dark-mode) .search-btn,
body:not(.dark-mode) .search-btn,
html:not(.dark-mode) .filter-btn,
body:not(.dark-mode) .filter-btn,
html:not(.dark-mode) .filter-toggle,
body:not(.dark-mode) .filter-toggle {
    background: #ffffff !important;
    color: #222222 !important;
    border-color: #dddddd !important;
    box-shadow: none !important;
}


/* CATEGORY TOGGLE */
html:not(.dark-mode) .category-toggle,
body:not(.dark-mode) .category-toggle {
    background: #ffffff !important;
    color: #222222 !important;
    border-color: #dddddd !important;
    box-shadow: none !important;
}


/* CATEGORY TOGGLE TEXT */
html:not(.dark-mode) .category-toggle span,
body:not(.dark-mode) .category-toggle span {
    color: #222222 !important;
}


/* CATEGORY TOGGLE ICON */
html:not(.dark-mode) .category-toggle .material-symbols-outlined,
body:not(.dark-mode) .category-toggle .material-symbols-outlined {
    color: #222222 !important;
}


/* CATEGORY TOGGLE HOVER */
html:not(.dark-mode) .category-toggle:hover,
body:not(.dark-mode) .category-toggle:hover {
    background: #f5f5f5 !important;
    color: #222222 !important;
    border-color: #cccccc !important;
}


/* FILTER BUTTON HOVER */
html:not(.dark-mode) .filter-btn:hover,
body:not(.dark-mode) .filter-btn:hover {
    background: #f5f5f5 !important;
    color: #222222 !important;
    border-color: #cccccc !important;
}











/* =========================================================
   RENTALS VEHICLE TYPE FILTER - DARK MODE
========================================================= */

/* Category box */
html.dark-mode .rentals-layout .category-box,
body.dark-mode .rentals-layout .category-box {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
}

/* Heading */
html.dark-mode .rentals-layout .category-box h3,
body.dark-mode .rentals-layout .category-box h3 {
    color: #ffffff !important;
}

/* Vehicle type buttons */
html.dark-mode .rentals-layout .category-box a,
body.dark-mode .rentals-layout .category-box a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: #111827 !important;
    color: #d1d5db !important;

    border-color: #374151 !important;
}

/* Text inside buttons */
html.dark-mode .rentals-layout .category-box a span,
body.dark-mode .rentals-layout .category-box a span {
    color: #d1d5db !important;
}

/* Count */
html.dark-mode .rentals-layout .category-box a b,
body.dark-mode .rentals-layout .category-box a b {
    background: #374151 !important;
    color: #ffffff !important;
}

/* Hover */
html.dark-mode .rentals-layout .category-box a:hover,
body.dark-mode .rentals-layout .category-box a:hover {
    background: #1f2937 !important;
    color: #38bdf8 !important;
    border-color: #475569 !important;
}

html.dark-mode .rentals-layout .category-box a:hover span,
body.dark-mode .rentals-layout .category-box a:hover span {
    color: #38bdf8 !important;
}

/* Active vehicle type */
html.dark-mode .rentals-layout .category-box a.active,
body.dark-mode .rentals-layout .category-box a.active {
    background: #1e3a5f !important;
    color: #60a5fa !important;
    border-color: #2563eb !important;
}

/* Active text */
html.dark-mode .rentals-layout .category-box a.active span,
body.dark-mode .rentals-layout .category-box a.active span {
    color: #60a5fa !important;
}

/* Active count */
html.dark-mode .rentals-layout .category-box a.active b,
body.dark-mode .rentals-layout .category-box a.active b {
    background: #2563eb !important;
    color: #ffffff !important;
}


/* =========================================================
   RENTALS VEHICLE TYPE FILTER - LIGHT MODE RESTORE
========================================================= */

html:not(.dark-mode) .rentals-layout .category-box,
body:not(.dark-mode) .rentals-layout .category-box {
    background: #ffffff !important;
    color: #222222 !important;
    border-color: #dddddd !important;
}

html:not(.dark-mode) .rentals-layout .category-box h3,
body:not(.dark-mode) .rentals-layout .category-box h3 {
    color: #222222 !important;
}

html:not(.dark-mode) .rentals-layout .category-box a,
body:not(.dark-mode) .rentals-layout .category-box a {
    background: #ffffff !important;
    color: #333333 !important;
    border-color: #dddddd !important;
}

html:not(.dark-mode) .rentals-layout .category-box a span,
body:not(.dark-mode) .rentals-layout .category-box a span {
    color: #333333 !important;
}

html:not(.dark-mode) .rentals-layout .category-box a b,
body:not(.dark-mode) .rentals-layout .category-box a b {
    background: #eeeeee !important;
    color: #333333 !important;
}

html:not(.dark-mode) .rentals-layout .category-box a:hover,
body:not(.dark-mode) .rentals-layout .category-box a:hover {
    background: #f5f5f5 !important;
    color: #222222 !important;
}

html:not(.dark-mode) .rentals-layout .category-box a:hover span,
body:not(.dark-mode) .rentals-layout .category-box a:hover span {
    color: #222222 !important;
}

html:not(.dark-mode) .rentals-layout .category-box a.active,
body:not(.dark-mode) .rentals-layout .category-box a.active {
    background: #eaf4ff !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}

html:not(.dark-mode) .rentals-layout .category-box a.active span,
body:not(.dark-mode) .rentals-layout .category-box a.active span {
    color: #2563eb !important;
}

html:not(.dark-mode) .rentals-layout .category-box a.active b,
body:not(.dark-mode) .rentals-layout .category-box a.active b {
    background: #2563eb !important;
    color: #ffffff !important;
}














}