:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --theme-bg: #0a0a0a;
    --theme-bg-secondary: #0d0d0d;
    --theme-surface: #1a1a1a;
    --theme-surface-2: #202020;
    --theme-text: #ffffff;
    --theme-text-secondary: #cccccc;
    --theme-muted: #8a8a8a;
    --theme-border: rgba(255,255,255,0.07);
    --theme-border-strong: rgba(255,255,255,0.12);
    --theme-input: rgba(255,255,255,0.06);
    --theme-input-focus: rgba(255,255,255,0.10);
    --theme-shadow: rgba(0,0,0,0.45);
    --theme-accent: #d67433;
    --theme-accent-hover: #b85f2a;

    /* Single source of truth for the hero image path.
       Adjust ONCE here if the path 404s from your CSS location. */
    --hero-image: url('../images/uploads/logo/background_image.jpg');
}

html[data-theme="light"] {
    color-scheme: light;
    --theme-bg: #f5f6f8;
    --theme-bg-secondary: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-2: #f0f1f3;
    --theme-text: #171717;
    --theme-text-secondary: #4f4f4f;
    --theme-muted: #667085;
    --theme-border: rgba(0,0,0,0.09);
    --theme-border-strong: rgba(0,0,0,0.15);
    --theme-input: #ffffff;
    --theme-input-focus: #ffffff;
    --theme-shadow: rgba(0,0,0,0.12);
}

/* -----------------------------
   2. BASE
   ----------------------------- */
html,
body,
main {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    transition: background-color .25s ease, color .25s ease;
}

a {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* -----------------------------
   3. NAVBAR / HEADER (theme toggle lives here)
   ----------------------------- */
nav.navbar,
.navbar.navbar-dark,
.navbar.bg-dark {
    background-color: var(--theme-bg) !important;
    border-bottom: 1px solid var(--theme-border-strong) !important;
    transition: background-color .25s ease, border-color .25s ease;
}

.navbar .nav-link,
.navbar .text-light {
    color: var(--theme-text) !important;
}

.navbar .nav-link:hover {
    color: var(--theme-accent) !important;
}

.navbar-toggler {
    border-color: var(--theme-border-strong) !important;
}

html[data-theme="light"] nav.navbar {
    background-color: #ffffff !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}

html[data-theme="light"] nav.navbar .nav-link,
html[data-theme="light"] nav.navbar .text-light {
    color: #343a40 !important;
}

html[data-theme="light"] nav.navbar .nav-link:hover {
    color: #d67433 !important;
}

html[data-theme="light"] .navbar-toggler-icon {
    filter: invert(1);
}

@media (max-width: 991.98px) {
    html[data-theme="light"] nav.navbar .navbar-collapse {
        background: transparent !important;
    }
}

/* Header dropdown menu */
.dropdown-menu {
    background: var(--theme-surface) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: 0 10px 40px var(--theme-shadow) !important;
}

.dropdown-item {
    color: var(--theme-text-secondary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(214,116,51,0.10) !important;
    color: var(--theme-accent) !important;
}

.dropdown-divider {
    border-color: var(--theme-border) !important;
}

/* Header outline buttons (incl. the theme switch button) */
.btn-outline-light {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background: rgba(255,255,255,0.1) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-outline-light,
html[data-theme="light"] nav.navbar .dropdown-toggle {
    color: #d67433 !important;
    border-color: rgba(214,116,51,0.5) !important;
}

html[data-theme="light"] .btn-outline-light:hover,
html[data-theme="light"] .btn-outline-light:focus,
html[data-theme="light"] .btn-outline-light:active,
html[data-theme="light"] nav.navbar .dropdown-toggle:hover,
html[data-theme="light"] nav.navbar .dropdown-toggle:focus {
    color: #fff !important;
    background: #d67433 !important;
    border-color: #d67433 !important;
}

/* -----------------------------
   4. HERO SECTIONS — IDENTICAL IN BOTH THEMES
   (No light-mode restyling: always dark overlay + image.)
   ----------------------------- */
.landing-hero,
.classifieds-hero {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(135deg,
            rgba(0,0,0,0.88) 0%,
            rgba(0,0,0,0.75) 50%,
            rgba(10,10,20,0.90) 100%),
        var(--hero-image) center / cover no-repeat;
    background-attachment: fixed;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.landing-hero > *,
.classifieds-hero > * {
    position: relative;
    z-index: 1;
}

/* Hero text stays light in BOTH themes — these beat any
   generic light-mode inline-style overrides further down. */
.landing-hero h1, .landing-hero h2, .landing-hero h3,
.classifieds-hero h1, .classifieds-hero h2, .classifieds-hero h3,
html[data-theme="light"] .landing-hero h1,
html[data-theme="light"] .landing-hero h2,
html[data-theme="light"] .landing-hero h3,
html[data-theme="light"] .classifieds-hero h1,
html[data-theme="light"] .classifieds-hero h2,
html[data-theme="light"] .classifieds-hero h3,
html[data-theme="light"] .landing-hero [style*="color: #ffffff"],
html[data-theme="light"] .landing-hero [style*="color:#ffffff"],
html[data-theme="light"] .classifieds-hero [style*="color: #ffffff"],
html[data-theme="light"] .classifieds-hero [style*="color:#ffffff"] {
    color: #ffffff !important;
}

.landing-hero p,
.classifieds-hero p,
html[data-theme="light"] .landing-hero p,
html[data-theme="light"] .classifieds-hero p,
html[data-theme="light"] .landing-hero [style*="color: #cccccc"],
html[data-theme="light"] .landing-hero [style*="color:#cccccc"],
html[data-theme="light"] .classifieds-hero [style*="color: #cccccc"],
html[data-theme="light"] .classifieds-hero [style*="color:#cccccc"] {
    color: #cccccc !important;
}

html[data-theme="light"] .landing-hero [style*="color: #8a8a8a"],
html[data-theme="light"] .landing-hero [style*="color:#8a8a8a"],
html[data-theme="light"] .classifieds-hero [style*="color: #8a8a8a"],
html[data-theme="light"] .classifieds-hero [style*="color:#8a8a8a"] {
    color: #8a8a8a !important;
}

/* Hero search inputs stay dark-styled in BOTH themes */
.landing-hero input,
.landing-hero .form-control,
.classifieds-hero input,
.classifieds-hero .form-control,
html[data-theme="light"] .landing-hero input,
html[data-theme="light"] .landing-hero .form-control,
html[data-theme="light"] .classifieds-hero input,
html[data-theme="light"] .classifieds-hero .form-control {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: none !important;
}

.landing-hero input::placeholder,
.classifieds-hero input::placeholder,
html[data-theme="light"] .landing-hero input::placeholder,
html[data-theme="light"] .classifieds-hero input::placeholder {
    color: #cccccc !important;
    opacity: 1 !important;
}

.landing-hero input:focus,
.classifieds-hero input:focus,
html[data-theme="light"] .landing-hero input:focus,
html[data-theme="light"] .classifieds-hero input:focus {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(214,116,51,0.6) !important;
    color: #ffffff !important;
}

/* Hero search/apply buttons stay brand orange in both themes */
.landing-hero form button,
.classifieds-hero form button,
html[data-theme="light"] .landing-hero form button,
html[data-theme="light"] .classifieds-hero form button {
    background: #d67433 !important;
    border-color: #d67433 !important;
    color: #ffffff !important;
}

/* Hero links + accent counters stay orange */
.landing-hero a,
.classifieds-hero a,
html[data-theme="light"] .landing-hero a,
html[data-theme="light"] .classifieds-hero a,
html[data-theme="light"] .classifieds-hero strong[style*="#d67433"] {
    color: #d67433 !important;
}

/* iOS/Android: fixed attachment is broken on touch devices.
   Specificity here beats the hero rule above, so it wins. */
@media (max-width: 991.98px) {
    html .landing-hero,
    html .classifieds-hero,
    html[data-theme="dark"] .landing-hero,
    html[data-theme="dark"] .classifieds-hero,
    html[data-theme="light"] .landing-hero,
    html[data-theme="light"] .classifieds-hero {
        background-attachment: scroll !important;
    }
}

/* -----------------------------
   5. HOMEPAGE SECTIONS
   ----------------------------- */
.hero-section {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%) !important;
    transition: background .25s ease;
}

html[data-theme="light"] .hero-section {
    background: linear-gradient(135deg, #f7f7f8 0%, #eceff2 50%, #ffffff 100%) !important;
}

html[data-theme="light"] .hero-section .display-3 { color: var(--theme-text) !important; }
html[data-theme="light"] .hero-section .lead { color: var(--theme-text-secondary) !important; }

.stats-section {
    background-color: var(--theme-bg-secondary) !important;
    border-top: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
    transition: background-color .25s ease, border-color .25s ease;
}

.features-section {
    background-color: var(--theme-bg) !important;
    transition: background-color .25s ease;
}

.feature-card {
    background: linear-gradient(145deg, var(--theme-surface), var(--theme-bg-secondary)) !important;
    border: 1px solid var(--theme-border) !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease,
                background-color .25s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(214,116,51,0.25) !important;
    box-shadow: 0 20px 40px var(--theme-shadow);
}

.feature-card h3 { color: var(--theme-text) !important; }
.feature-card p  { color: var(--theme-muted) !important; }

html[data-theme="light"] .feature-card {
    background: linear-gradient(145deg, #ffffff, #f3f4f6) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

.cta-section {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%) !important;
    border-top: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
    transition: background .25s ease, border-color .25s ease;
}

html[data-theme="light"] .cta-section {
    background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 50%, #ffffff 100%) !important;
}

/* Landing page cards (inline dark gradients in PHP) */
html[data-theme="light"] .landing-page-card,
html[data-theme="light"] div.landing-page-card {
    background: linear-gradient(145deg, #ffffff, #f5f6f8) !important;
    border-color: rgba(0,0,0,0.09) !important;
    color: #171717 !important;
}

/* Landing tool cards — smooth hover (both themes) */
.landing-tool-card {
    position: relative;
    transform: translate3d(0,0,0);
    transition: transform .45s cubic-bezier(.22,.61,.36,1),
                box-shadow .45s cubic-bezier(.22,.61,.36,1),
                border-color .35s ease;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.landing-tool-card:hover {
    transform: translate3d(0,-10px,0) !important;
    border-color: rgba(214,116,51,0.30) !important;
    box-shadow: 0 25px 55px rgba(0,0,0,0.22) !important;
}

.landing-tool-card > div:first-child {
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

.landing-tool-card:hover > div:first-child {
    transform: scale(1.06);
}

/* -----------------------------
   6. BRAND BUTTONS
   ----------------------------- */
.btn-primary-custom {
    background: #d67433 !important;
    border-color: #d67433 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    padding: 10px 30px !important;
    transition: all .3s ease;
}

.btn-primary-custom:hover {
    background: #b85f2a !important;
    border-color: #b85f2a !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(214,116,51,0.3);
}

.btn-outline-primary-custom {
    border-color: #d67433 !important;
    color: #d67433 !important;
    background: transparent !important;
    border-radius: 50px !important;
    padding: 10px 30px !important;
    font-weight: 600 !important;
    transition: all .3s ease;
}

.btn-outline-primary-custom:hover {
    background: #d67433 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(214,116,51,0.2);
}

/* -----------------------------
   7. FORMS & SELECTS (outside heroes — themed)
   ----------------------------- */
input.form-control,
textarea.form-control {
    background: var(--theme-input) !important;
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-border-strong) !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

input.form-control:focus,
textarea.form-control:focus {
    background: var(--theme-input-focus) !important;
    border-color: rgba(214,116,51,0.55) !important;
    box-shadow: 0 0 0 3px rgba(214,116,51,0.12) !important;
    color: var(--theme-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--theme-muted) !important;
    opacity: 1 !important;
}

select {
    background-color: var(--theme-surface) !important;
    border: 1px solid var(--theme-border-strong) !important;
    color: var(--theme-text) !important;
    border-radius: 8px !important;
    padding: 10px 40px 10px 14px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

select option {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

select:focus {
    border-color: rgba(214,116,51,0.55) !important;
    box-shadow: 0 0 0 3px rgba(214,116,51,0.12) !important;
    outline: none !important;
}

/* Dark arrow in light mode so it stays visible on white */
html[data-theme="light"] select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* -----------------------------
   8. CLASSIFIEDS - FILTTER BAR
   ----------------------------- */
.classifieds-filters {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    transition: background-color .25s ease, border-color .25s ease;
}

.classifieds-filters select,
.classifieds-filters input[type="number"] {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-border-strong) !important;
}

.classifieds-filters input::placeholder {
    color: var(--theme-muted) !important;
    opacity: 1 !important;
}

/* Apply button stays branded in both themes */
.classifieds-filters button[type="submit"] {
    background: #d67433 !important;
    border-color: #d67433 !important;
    color: #ffffff !important;
}

.classifieds-filters button[type="submit"]:hover {
    background: #b85f2a !important;
    border-color: #b85f2a !important;
}

/* Reset button */
.theme-reset-btn {
    background: rgba(255,255,255,0.05) !important;
    color: var(--theme-muted) !important;
    border: 1px solid var(--theme-border-strong) !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.theme-reset-btn:hover,
.theme-reset-btn:focus {
    background: rgba(255,255,255,0.10) !important;
    color: var(--theme-text) !important;
}

html[data-theme="light"] .theme-reset-btn {
    background: rgba(0,0,0,0.035) !important;
    color: #555555 !important;
    border-color: rgba(0,0,0,0.12) !important;
}

html[data-theme="light"] .theme-reset-btn:hover,
html[data-theme="light"] .theme-reset-btn:focus {
    background: rgba(0,0,0,0.07) !important;
    color: #171717 !important;
    border-color: rgba(0,0,0,0.18) !important;
}

/* -----------------------------
   9. CLASSIFIEDS - LISTINGS AREA
   ----------------------------- */
.classifieds-listings {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    transition: background-color .25s ease;
}

/* Result-count / info panel (inline dark gradient in PHP) */
html[data-theme="light"] .classifieds-listings > .container > div[style*="linear-gradient"] {
    background: linear-gradient(145deg, #ffffff, #f5f6f8) !important;
    color: #171717 !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Catch inline dark backgrounds inside listings (light mode only) */
html[data-theme="light"] .classifieds-listings [style*="background: #0a0a0a"],
html[data-theme="light"] .classifieds-listings [style*="background:#0a0a0a"],
html[data-theme="light"] .classifieds-listings [style*="background: #0d0d0d"],
html[data-theme="light"] .classifieds-listings [style*="background:#0d0d0d"] {
    background: #f5f6f8 !important;
}

html[data-theme="light"] .classifieds-listings [style*="linear-gradient(145deg, #1a1a1a"],
html[data-theme="light"] .classifieds-listings [style*="linear-gradient(145deg,#1a1a1a"] {
    background: linear-gradient(145deg, #ffffff, #f6f7f8) !important;
    border-color: rgba(0,0,0,0.09) !important;
}

/* Catch inline light text inside listings (light mode only).
   Heroes are excluded because their rules above are more specific. */
html[data-theme="light"] .classifieds-listings [style*="color: #ffffff"],
html[data-theme="light"] .classifieds-listings [style*="color:#ffffff"],
html[data-theme="light"] .classifieds-listings h1,
html[data-theme="light"] .classifieds-listings h2,
html[data-theme="light"] .classifieds-listings h3,
html[data-theme="light"] .classifieds-listings h4,
html[data-theme="light"] .classifieds-listings h5,
html[data-theme="light"] .classifieds-listings strong[style*="#ffffff"] {
    color: #171717 !important;
}

html[data-theme="light"] .classifieds-listings [style*="color: #cccccc"],
html[data-theme="light"] .classifieds-listings [style*="color:#cccccc"] {
    color: #4f4f4f !important;
}

html[data-theme="light"] .classifieds-listings [style*="color: #8a8a8a"],
html[data-theme="light"] .classifieds-listings [style*="color:#8a8a8a"],
html[data-theme="light"] .classifieds-listings [style*="color: #6c757d"],
html[data-theme="light"] .classifieds-listings [style*="color:#6c757d"] {
    color: #667085 !important;
}

/* Brand orange is never altered by the rules above */
html[data-theme="light"] .classifieds-listings [style*="#d67433"] {
    color: #d67433 !important;
}

/* -----------------------------
   10. CLASSIFIED CARDS
   ----------------------------- */
.classified-card {
    background: linear-gradient(145deg, var(--theme-surface), var(--theme-bg-secondary)) !important;
    border: 1px solid var(--theme-border) !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease,
                background-color .25s ease;
}

.classified-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px var(--theme-shadow);
    border-color: rgba(214,116,51,0.20) !important;
}

html[data-theme="light"] .classified-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
    color: #171717 !important;
}

html[data-theme="light"] .classified-card:hover {
    border-color: rgba(214,116,51,0.22) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}

/* Card image area — centered plate images (both themes) */
.classified-card-image {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden;
    background: var(--theme-bg-secondary) !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

.classified-card-image img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

html[data-theme="light"] .classified-card-image {
    background: #f8f9fa !important;
    border-bottom-color: rgba(0,0,0,0.06) !important;
}

html[data-theme="light"] .classified-card [style*="background: #0d0d0d"],
html[data-theme="light"] .classified-card [style*="background:#0d0d0d"] {
    background: #f8f9fa !important;
}

/* Card secondary text (light mode) */
html[data-theme="light"] .classified-card p[style*="color: #6c757d"],
html[data-theme="light"] .classified-card p[style*="color:#6c757d"],
html[data-theme="light"] .classified-card span[style*="color: #6c757d"],
html[data-theme="light"] .classified-card span[style*="color:#6c757d"],
html[data-theme="light"] .classified-card p[style*="color: #8a8a8a"],
html[data-theme="light"] .classified-card p[style*="color:#8a8a8a"],
html[data-theme="light"] .classified-card a[style*="color: #8a8a8a"],
html[data-theme="light"] .classified-card a[style*="color:#8a8a8a"] {
    color: #667085 !important;
}

html[data-theme="light"] .classified-card a[style*="color: #8a8a8a"]:hover,
html[data-theme="light"] .classified-card a[style*="color:#8a8a8a"]:hover {
    color: #d67433 !important;
}

/* Prices, icons, accents stay brand orange in both themes */
.classified-card [style*="color: #d67433"],
.classified-card [style*="color:#d67433"],
html[data-theme="light"] .classified-card [style*="color: #d67433"],
html[data-theme="light"] .classified-card [style*="color:#d67433"] {
    color: #d67433 !important;
}

/* "View Details" button */
html[data-theme="light"] .classified-card a[style*="rgba(214,116,51,0.1)"],
html[data-theme="light"] .classifieds-listings a[style*="rgba(214,116,51,0.1)"] {
    background: rgba(214,116,51,0.08) !important;
    border-color: rgba(214,116,51,0.20) !important;
    color: #d67433 !important;
}

html[data-theme="light"] .classified-card a[style*="rgba(214,116,51,0.1)"]:hover {
    background: rgba(214,116,51,0.16) !important;
}

/* Secondary card buttons on translucent white backgrounds */
html[data-theme="light"] .classifieds-listings a[style*="rgba(255,255,255,0.05)"] {
    background: rgba(0,0,0,0.035) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: #667085 !important;
}

/* Favourite button */
.theme-favourite-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--theme-border-strong) !important;
    color: var(--theme-muted) !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.theme-favourite-btn:hover,
.theme-favourite-btn:focus {
    background: rgba(220,53,69,0.12) !important;
    border-color: rgba(220,53,69,0.25) !important;
    color: #dc3545 !important;
}

html[data-theme="light"] .theme-favourite-btn {
    background: rgba(0,0,0,0.035) !important;
    border-color: rgba(0,0,0,0.11) !important;
    color: #667085 !important;
}

html[data-theme="light"] .theme-favourite-btn:hover,
html[data-theme="light"] .theme-favourite-btn:focus {
    background: rgba(220,53,69,0.08) !important;
    border-color: rgba(220,53,69,0.18) !important;
    color: #dc3545 !important;
}

/* Status badges (Featured / Premium / Boosted / Sold / Pending)
   keep their colored backgrounds and white text in BOTH themes —
   the background color is what identifies the status. */
.classified-card span[style*="linear-gradient(135deg, #d67433"],
.classified-card span[style*="linear-gradient(135deg, #17a2b8"],
.classified-card span[style*="linear-gradient(135deg, #dc3545"],
.classified-card span[style*="background: #6c757d"],
.classified-card span[style*="background: #ffc107"],
html[data-theme="light"] .classified-card span[style*="linear-gradient(135deg, #d67433"],
html[data-theme="light"] .classified-card span[style*="linear-gradient(135deg, #17a2b8"],
html[data-theme="light"] .classified-card span[style*="linear-gradient(135deg, #dc3545"],
html[data-theme="light"] .classified-card span[style*="background: #6c757d"] {
    color: #ffffff !important;
}

html[data-theme="light"] .classified-card span[style*="background: #ffc107"] {
    color: #171717 !important;
}

/* -----------------------------
   11. PAGINATION
   ----------------------------- */
.theme-page-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--theme-border-strong) !important;
    color: var(--theme-muted) !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.theme-page-btn:hover,
.theme-page-btn:focus {
    background: rgba(214,116,51,0.15) !important;
    border-color: rgba(214,116,51,0.30) !important;
    color: #d67433 !important;
}

html[data-theme="light"] .theme-page-btn {
    background: rgba(0,0,0,0.035) !important;
    border-color: rgba(0,0,0,0.11) !important;
    color: #667085 !important;
}

html[data-theme="light"] .theme-page-btn:hover,
html[data-theme="light"] .theme-page-btn:focus {
    background: rgba(214,116,51,0.10) !important;
    border-color: rgba(214,116,51,0.20) !important;
    color: #d67433 !important;
}

/* Current page number stays orange with white text in both themes */
.classifieds-listings span[style*="background: #d67433"],
html[data-theme="light"] .classifieds-listings span[style*="background: #d67433"] {
    background: #d67433 !important;
    color: #ffffff !important;
}

/* -----------------------------
   12. FOOTER
   ----------------------------- */
footer {
    background: linear-gradient(180deg, var(--theme-bg-secondary), var(--theme-bg)) !important;
    color: var(--theme-text) !important;
    border-top: 1px solid var(--theme-border) !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

footer a {
    color: var(--theme-muted) !important;
}

footer a:hover {
    color: #d67433 !important;
}

html[data-theme="light"] footer {
    background: linear-gradient(180deg, #ffffff, #f3f4f6) !important;
    color: #171717 !important;
    border-top-color: rgba(0,0,0,0.08) !important;
}

/* -----------------------------
   13. RESPONSIVE
   ----------------------------- */
@media (max-width: 767.98px) {
    .classifieds-filters form {
        width: 100%;
    }

    .classifieds-filters select,
    .classifieds-filters input[type="number"] {
        max-width: 100%;
    }
}

/* ========================================
   14. USER PAGES & DASHBOARD THEMING
   ======================================== */

/* Dashboard welcome section & stat cards (index.php) */
html[data-theme="light"] [style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"],
html[data-theme="light"] [style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d"];
html[data-theme="light"] [style*="background:linear-gradient(145deg,#1a1a1a,#0d0d0d)"] {
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Override white text in user dashboard containers */
html[data-theme="light"] [style*="color: #ffffff"],
html[data-theme="light"] [style*="color:#ffffff"] {
    color: #171717 !important;
}

/* Secondary/muted text override */
html[data-theme="light"] [style*="color: #8a8a8a"],
html[data-theme="light"] [style*="color:#8a8a8a"],
html[data-theme="light"] [style*="color: #cccccc"],
html[data-theme="light"] [style*="color:#cccccc"] {
    color: #667085 !important;
}

/* Form containers (add-listing.php, edit-listing.php, profile.php) */
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.06)"] {
    border: 1px solid rgba(0,0,0,0.10) !important;
}

/* Input fields */
html[data-theme="light"] input[style*="background: rgba(255,255,255,0.06)"],
html[data-theme="light"] textarea[style*="background: rgba(255,255,255,0.06)"],
html[data-theme="light"] select[style*="background: rgba(255,255,255,0.06)"],
html[data-theme="light"] input[style*="background:rgba(255,255,255,0.06)"],
html[data-theme="light"] textarea[style*="background:rgba(255,255,255,0.06)"],
html[data-theme="light"] select[style*="background:rgba(255,255,255,0.06)"] {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #171717 !important;
}

html[data-theme="light"] input[style*="border: 1px solid rgba(255,255,255,0.1)"],
html[data-theme="light"] textarea[style*="border: 1px solid rgba(255,255,255,0.1)"],
html[data-theme="light"] select[style*="border: 1px solid rgba(255,255,255,0.1)"] {
    border: 1px solid rgba(0,0,0,0.12) !important;
}

/* Select/dropdown with custom background */
html[data-theme="light"] select[style*="background: #2a2a2a"],
html[data-theme="light"] select[style*="background:#2a2a2a"] {
    background: #f5f6f8 !important;
    color: #171717 !important;
}

/* Profile image circle */
html[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"] {
    background: rgba(0,0,0,0.03) !important;
}

html[data-theme="light"] [style*="border: 2px solid rgba(214,116,51,0.2)"],
html[data-theme="light"] [style*="border:2px solid rgba(214,116,51,0.2)"] {
    border: 2px solid rgba(214,116,51,0.25) !important;
}

/* Loading overlay (add-listing.php) */
html[data-theme="light"] [style*="background: rgba(0,0,0,0.88)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.88)"] {
    background: rgba(255,255,255,0.94) !important;
}

/* Quick actions section with orange tint */
html[data-theme="light"] [style*="background: rgba(214,116,51,0.05)"],
html[data-theme="light"] [style*="background:rgba(214,116,51,0.05)"] {
    background: rgba(214,116,51,0.06) !important;
}

/* Package cards selection border (add-listing.php) */
html[data-theme="light"] [style*="background: rgba(214,116,51,0.08)"],
html[data-theme="light"] [style*="background:rgba(214,116,51,0.08)"] {
    background: rgba(214,116,51,0.09) !important;
    border-color: #d67433 !important;
}

/* Orphaned notice (favourites.php) */
html[data-theme="light"] [style*="background: rgba(220, 53, 69, 0.05)"],
html[data-theme="light"] [style*="background:rgba(220,53,69,0.05)"] {
    background: rgba(220, 53, 69, 0.06) !important;
}

html[data-theme="light"] [style*="border: 1px solid rgba(220, 53, 69, 0.15)"],
html[data-theme="light"] [style*="border:1px solid rgba(220,53,69,0.15)"] {
    border: 1px solid rgba(220, 53, 69, 0.20) !important;
}

/* Warning/info box (order-card.php) */
html[data-theme="light"] [style*="background: rgba(255,193,7,0.05)"],
html[data-theme="light"] [style*="background:rgba(255,193,7,0.05)"] {
    background: rgba(255,193,7,0.08) !important;
}

html[data-theme="light"] [style*="border: 1px solid rgba(255,193,7,0.1)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,193,7,0.1)"] {
    border: 1px solid rgba(255,193,7,0.15) !important;
}

/* Table styling (listings.php, orders.php) */
html[data-theme="light"] table[style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"] {
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
}

html[data-theme="light"] th[style*="color: #8a8a8a"],
html[data-theme="light"] th[style*="color:#8a8a8a"] {
    color: #667085 !important;
}

/* Status filter buttons (listings.php) */
html[data-theme="light"] button[style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"],
html[data-theme="light"] .btn[style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"] {
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    color: #171717 !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* Disclaimer modal & other modals (listings.php) */
html[data-theme="light"] .modal-content[style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"],
html[data-theme="light"] [class*="modal"][style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"] {
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* Empty state containers */
html[data-theme="light"] .empty-state[style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"],
html[data-theme="light"] [class*="empty"][style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"] {
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Card preview containers (order-card.php, favourites.php) */
html[data-theme="light"] .card-preview[style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"],
html[data-theme="light"] [class*="card"][style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"] {
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Status badges - preserve colored backgrounds across themes */
/* Green (Active/Verified/Paid) */
html[data-theme="light"] span[style*="background: #28a745"],
html[data-theme="light"] span[style*="background:#28a745"],
html[data-theme="light"] .badge[style*="background: #28a745"] {
    background: #28a745 !important;
    color: #ffffff !important;
}

/* Orange (Featured/Boosted) */
html[data-theme="light"] span[style*="background: #d67433"],
html[data-theme="light"] span[style*="background:#d67433"],
html[data-theme="light"] .badge[style*="background: #d67433"] {
    background: #d67433 !important;
    color: #ffffff !important;
}

/* Yellow (Pending) */
html[data-theme="light"] span[style*="background: #ffc107"],
html[data-theme="light"] span[style*="background:#ffc107"],
html[data-theme="light"] .badge[style*="background: #ffc107"] {
    background: #ffc107 !important;
    color: #171717 !important;
}

/* Gray (Sold/Inactive) */
html[data-theme="light"] span[style*="background: #6c757d"],
html[data-theme="light"] span[style*="background:#6c757d"],
html[data-theme="light"] .badge[style*="background: #6c757d"] {
    background: #6c757d !important;
    color: #ffffff !important;
}

/* Red (Failed/Error) */
html[data-theme="light"] span[style*="background: #dc3545"],
html[data-theme="light"] span[style*="background:#dc3545"],
html[data-theme="light"] .badge[style*="background: #dc3545"] {
    background: #dc3545 !important;
    color: #ffffff !important;
}

/* Cyan (Premium) */
html[data-theme="light"] span[style*="background: #17a2b8"],
html[data-theme="light"] span[style*="background:#17a2b8"],
html[data-theme="light"] .badge[style*="background: #17a2b8"] {
    background: #17a2b8 !important;
    color: #ffffff !important;
}

/* Preserve brand orange accent for plate numbers and key text */
html[data-theme="light"] [style*="color: #d67433"],
html[data-theme="light"] [style*="color:#d67433"] {
    color: #d67433 !important;
}

/* Form labels */
html[data-theme="light"] label[style*="color: #cccccc"],
html[data-theme="light"] label[style*="color:#cccccc"] {
    color: #4f4f4f !important;
}

/* Headings and page titles */
html[data-theme="light"] h1[style*="color: #ffffff"],
html[data-theme="light"] h2[style*="color: #ffffff"],
html[data-theme="light"] h3[style*="color: #ffffff"],
html[data-theme="light"] h4[style*="color: #ffffff"],
html[data-theme="light"] h5[style*="color: #ffffff"],
html[data-theme="light"] h6[style*="color: #ffffff"] {
    color: #171717 !important;
}

/* Sidebar navigation items (if present in user pages) */
html[data-theme="light"] .sidebar[style*="background: #1a1a1a"],
html[data-theme="light"] .sidebar[style*="background:#1a1a1a"],
html[data-theme="light"] [class*="side"][style*="background: #1a1a1a"] {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Ensure proper text contrast in all user page containers */
html[data-theme="light"] .user-dashboard *:not(span):not(.badge)[style*="color: #ffffff"] {
    color: #171717 !important;
}

html[data-theme="light"] .user-dashboard *[style*="color: #8a8a8a"],
html[data-theme="light"] .user-dashboard *[style*="color: #cccccc"] {
    color: #667085 !important;
}

/* Readonly/disabled input fields */
html[data-theme="light"] input[readonly],
html[data-theme="light"] input:disabled,
html[data-theme="light"] textarea[readonly],
html[data-theme="light"] textarea:disabled {
    background: #f5f6f8 !important;
    color: #667085 !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Focus states for inputs in light mode */
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    border-color: rgba(214,116,51,0.40) !important;
    box-shadow: 0 0 0 3px rgba(214,116,51,0.10) !important;
}

/* Button hover states in user pages */
html[data-theme="light"] button:hover:not(.badge):not([style*="background: #28a745"]):not([style*="background: #dc3545"]):not([style*="background: #ffc107"]):not([style*="background: linear-gradient"]),
html[data-theme="light"] .btn:hover:not(.badge) {
    background: rgba(214,116,51,0.08) !important;
    border-color: rgba(214,116,51,0.20) !important;
}

/* Specific index.php welcome gradient */
html[data-theme="light"] [style*="135deg, #1a1a2e, #0d0d0d"],
html[data-theme="light"] [style*="135deg, #1a1a2e"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Catch ALL dark gradient variations regardless of angle or exact hex */
html[data-theme="light"] [style*="linear-gradient"]:not([style*="#d67433"]):not([style*="#ffc107"]):not([style*="#28a745"]):not([style*="#dc3545"]):not([style*="#17a2b8"]) {
    /* Only override if it contains dark hex colors */
}

/* More targeted: any element with dark hex colors in gradient */
html[data-theme="light"] [style*="#1a1a2e"],
html[data-theme="light"] [style*="#1a1a1a"],
html[data-theme="light"] [style*="#0d0d0d"] {
    background: linear-gradient(135deg, #ffffff, #f5f6f8) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* Fix: catch ALL dark gradient variants from user pages */
html[data-theme="light"] [style*="#1a1a1a"],
html[data-theme="light"] [style*="#1a1a2e"],
html[data-theme="light"] [style*="#0d0d0d"],
html[data-theme="light"] [style*="#0a0a0a"][style*="linear-gradient"],
html[data-theme="light"] [style*="#0a0a0a"],
html[data-theme="light"] [style*="#0f0f0f"] {
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* Table rows */
html[data-theme="light"] tr[style*="border-bottom: 1px solid rgba(255,255,255,0.05)"],
html[data-theme="light"] tr[style*="border-bottom: 1px solid rgba(255,255,255,0.03)"] {
    border-bottom-color: rgba(0,0,0,0.08) !important;
}

/* Empty state icon */
html[data-theme="light"] [style*="color: #333"] {
    color: #999 !important;
}

/* ========================================
   16. USER PAGES - COMPREHENSIVE LIGHT MODE
   ======================================== */

/* HEADER - Light mode navigation */
html[data-theme="light"] .navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(15,23,42,0.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

html[data-theme="light"] .nav-link,
html[data-theme="light"] .navbar-nav .nav-link {
    color: #374151 !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .navbar-nav .nav-link:hover {
    color: #d67433 !important;
}

html[data-theme="light"] .mobile-hamburger {
    color: #374151 !important;
}

html[data-theme="light"] .dropdown-toggle {
    color: #374151 !important;
    border-color: rgba(15,23,42,0.15) !important;
}

html[data-theme="light"] .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.12) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
}

html[data-theme="light"] .dropdown-item {
    color: #374151 !important;
}

html[data-theme="light"] .dropdown-item:hover {
    background: #f3f4f6 !important;
    color: #d67433 !important;
}

/* ============================================
   DARK MODE NUCLEAR OPTION: Override ALL light backgrounds when switching back to dark
   ============================================ */
html[data-theme="dark"] .container *[style*="background: #ffffff"],
html[data-theme="dark"] .container *[style*="background:#ffffff"],
html[data-theme="dark"] .container *[style*="background: #fff"],
html[data-theme="dark"] .container *[style*="background:#fff"],
html[data-theme="dark"] .container *[style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] .container *[style*="background:rgb(255,255,255)"],
html[data-theme="dark"] .container div[style*="background: #ffffff"],
html[data-theme="dark"] .container div[style*="background:#ffffff"],
html[data-theme="dark"] .container section[style*="background: #ffffff"],
html[data-theme="dark"] .container section[style*="background:#ffffff"] {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

/* Override light gray backgrounds */
html[data-theme="dark"] .container *[style*="background: #f8f9fa"],
html[data-theme="dark"] .container *[style*="background:#f8f9fa"],
html[data-theme="dark"] .container *[style*="background: #f5f6f8"],
html[data-theme="dark"] .container *[style*="background:#f5f6f8"],
html[data-theme="dark"] .container *[style*="background: #f0f1f3"],
html[data-theme="dark"] .container *[style*="background:#f0f1f3"] {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

/* Override light text colors back to white */
html[data-theme="dark"] .container *[style*="color: #171717"],
html[data-theme="dark"] .container *[style*="color:#171717"],
html[data-theme="dark"] .container *[style*="color: #202124"],
html[data-theme="dark"] .container *[style*="color:#202124"],
html[data-theme="dark"] .container *[style*="color: #4f4f4f"],
html[data-theme="dark"] .container *[style*="color:#4f4f4f"] {
    color: #ffffff !important;
}

/* ============================================
   LIGHT MODE NUCLEAR OPTION: Override ALL dark backgrounds in light mode
   ============================================ */
html[data-theme="light"] .container *[style*="background: linear-gradient"],
html[data-theme="light"] .container *[style*="background:linear-gradient"] {
    background: #ffffff !important;
    border-color: rgba(15,23,42,0.10) !important;
}

/* Specific IDs and containers - HIGHEST PRIORITY */
html[data-theme="light"] #listing-form[style*="background"],
html[data-theme="light"] .col-lg-3 div[style*="background"],
html[data-theme="light"] .col-lg-9 div[style*="background"],
html[data-theme="light"] .container div[style*="background: linear-gradient(145deg, #1a1a1a"],
html[data-theme="light"] .container div[style*="background:linear-gradient(145deg,#1a1a1a"],
html[data-theme="light"] .container div[style*="background: linear-gradient(145deg, #1a1a1a, #0d0d0d)"],
html[data-theme="light"] .container div[style*="background:linear-gradient(145deg,#1a1a1a,#0d0d0d)"] {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}

/* Welcome / hero gradient containers (1a1a2e, 0d0d0d) */
html[data-theme="light"] [style*="135deg, #1a1a2e"],
html[data-theme="light"] [style*="135deg,#1a1a2e"] {
    background: linear-gradient(135deg, #fff7ee, #ffe7d1) !important;
    border: 1px solid rgba(214,116,51,0.18) !important;
}

/* Catch-all for any dark-gradient container in user pages */
html[data-theme="light"] div[style*="linear-gradient(145deg, #1a1a1a, #0d0d0d)"],
html[data-theme="light"] div[style*="linear-gradient(145deg,#1a1a1a,#0d0d0d)"],
html[data-theme="light"] [style*="linear-gradient(145deg, #1a1a1a"],
html[data-theme="light"] [style*="linear-gradient(145deg,#1a1a1a"],
html[data-theme="light"] [style*="linear-gradient(160deg, #1a1a1a"],
html[data-theme="light"] [style*="linear-gradient(160deg,#1a1a1a"],
html[data-theme="light"] [style*="linear-gradient(135deg, #1a1a1a"],
html[data-theme="light"] [style*="linear-gradient(135deg,#1a1a1a"],
html[data-theme="light"] [style*="linear-gradient(145deg, #17171d"],
html[data-theme="light"] [style*="linear-gradient(145deg,#17171d"],
html[data-theme="light"] section[style*="linear-gradient(145deg, #1a1a1a"],
html[data-theme="light"] section[style*="linear-gradient(145deg,#1a1a1a"] {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}

/* Sub-cards / inner cards with dark background (no gradient) */
html[data-theme="light"] [style*="background: #1a1a1a"]:not([style*="linear-gradient"]),
html[data-theme="light"] [style*="background:#1a1a1a"]:not([style*="linear-gradient"]),
html[data-theme="light"] [style*="background: #0d0d0d"]:not([style*="linear-gradient"]),
html[data-theme="light"] [style*="background:#0d0d0d"]:not([style*="linear-gradient"]),
html[data-theme="light"] [style*="background: #0f0f0f"]:not([style*="linear-gradient"]),
html[data-theme="light"] [style*="background:#0f0f0f"]:not([style*="linear-gradient"]) {
    background: #f8f9fa !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
}

/* Input/select backgrounds #2a2a2a → light */
html[data-theme="light"] [style*="background: #2a2a2a"],
html[data-theme="light"] [style*="background:#2a2a2a"] {
    background: #ffffff !important;
    border-color: rgba(15,23,42,0.12) !important;
    color: #171717 !important;
}

/* Subtle white-on-white inputs (rgba(255,255,255,0.06) etc) */
html[data-theme="light"] [style*="background: rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.03)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"] {
    background: #f5f6f8 !important;
    border-color: rgba(15,23,42,0.10) !important;
    color: #171717 !important;
}

/* Body / page text color #ffffff → dark */
html[data-theme="light"] [style*="color: #ffffff"]:not([style*="color: #ffc107"]):not([style*="background: #d67433"]):not([style*="color: #28a745"]):not([style*="color: #dc3545"]):not([style*="color: #5ddb7a"]):not([style*="color: #ff6b6b"]):not([style*="color: #ffffff;"]) {
    color: #171717 !important;
}
html[data-theme="light"] [style*="color:#ffffff"]:not([style*="background: #d67433"]) {
    color: #171717 !important;
}
/* Keep brand orange & status colors */
html[data-theme="light"] [style*="color: #d67433"],
html[data-theme="light"] [style*="color:#d67433"] {
    color: #b85f2a !important;
}
html[data-theme="light"] [style*="color: #ffc107"],
html[data-theme="light"] [style*="color:#ffc107"] {
    color: #b58900 !important;
}

/* Soft greys → readable greys */
html[data-theme="light"] [style*="color: #8a8a8a"],
html[data-theme="light"] [style*="color:#8a8a8a"] {
    color: #5a6275 !important;
}
html[data-theme="light"] [style*="color: #cccccc"],
html[data-theme="light"] [style*="color:#cccccc"] {
    color: #4f4f4f !important;
}
html[data-theme="light"] [style*="color: #6c757d"],
html[data-theme="light"] [style*="color:#6c757d"] {
    color: #6c757d !important;
}
html[data-theme="light"] [style*="color: #5ddb7a"] {
    color: #1f7a3a !important;
}
html[data-theme="light"] [style*="color: #ff6b6b"] {
    color: #c82333 !important;
}

/* Borders on white-translucent → subtle dark borders */
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.08)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.08)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.10)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.10)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.1)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.1)"] {
    border-color: rgba(15,23,42,0.10) !important;
}

/* Border-bottom on rows / dividers */
html[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.03)"],
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.03)"],
html[data-theme="light"] [style*="border-top: 1px solid rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255,0.05)"] {
    border-color: rgba(15,23,42,0.08) !important;
}

/* Page background override */
html[data-theme="light"] body {
    background: #f4f6f9 !important;
    color: #171717 !important;
}

/* Sidebar links hover (keep brand orange) */
html[data-theme="light"] [style*="color: #8a8a8a"]:hover {
    color: #b85f2a !important;
}

/* Login / register / forgot pages inputs (light mode clean look) */
html[data-theme="light"] input[style*="background: rgba(255,255,255,0.05)"],
html[data-theme="light"] input[style*="background:rgba(255,255,255,0.05)"],
html[data-theme="light"] input[style*="background: rgba(255,255,255,0.06)"],
html[data-theme="light"] input[style*="background:rgba(255,255,255,0.06)"] {
    background: #ffffff !important;
    color: #171717 !important;
    border-color: rgba(15,23,42,0.15) !important;
}

/* Page main wrappers - if any hardcoded black bg */
html[data-theme="light"] [style*="background: #000000"],
html[data-theme="light"] [style*="background:#000000"] {
    background: #f4f6f9 !important;
}

/* Status badge with white-translucent bg → light tinted bg */
html[data-theme="light"] [style*="background: rgba(40, 167, 69, 0.15)"],
html[data-theme="light"] [style*="background:rgba(40, 167, 69, 0.15)"] {
    background: rgba(40, 167, 69, 0.10) !important;
}
html[data-theme="light"] [style*="background: rgba(220, 53, 69, 0.15)"],
html[data-theme="light"] [style*="background:rgba(220, 53, 69, 0.15)"] {
    background: rgba(220, 53, 69, 0.10) !important;
}

/* Disabled/readonly inputs (slightly transparent) */
html[data-theme="light"] [style*="background: rgba(255,255,255,0.03)"]:not(input):not(textarea):not(select) {
    background: #f0f1f4 !important;
    color: #5a6275 !important;
}

/* ========================================
   17. AUTH PAGES (login, register, forgot) - LIGHT MODE
   ======================================== */

/* Auth page wrapper (solid dark → clean light, no background image) */
.auth-page {
    background: linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 100%) !important;
}
html[data-theme="light"] .auth-page {
    background: linear-gradient(180deg, #f4f5f7 0%, #ffffff 100%) !important;
}

/* Auth card (semi-transparent dark) → clean white card */
.auth-card {
    background: rgba(16, 16, 26, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6) !important;
}
html[data-theme="light"] .auth-card {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 20px 60px rgba(15,23,42,0.10) !important;
}

/* Auth card headings stay readable in both themes (also guards against legacy inline JS) */
.auth-card h2,
.auth-card h3,
.auth-card h4,
.auth-card h5 {
    color: #ffffff !important;
}
html[data-theme="light"] .auth-card h2,
html[data-theme="light"] .auth-card h3,
html[data-theme="light"] .auth-card h4,
html[data-theme="light"] .auth-card h5 {
    color: #171717 !important;
}

/* Decorative top line on auth card (keep brand orange) */
html[data-theme="light"] [style*="linear-gradient(90deg, transparent, #d67433, transparent)"] {
    background: linear-gradient(90deg, transparent, #d67433, transparent) !important;
    opacity: 0.8 !important;
}

/* Auth card titles (h2) */
html[data-theme="light"] [style*="color: #ffffff"][style*="font-weight: 700"][style*="letter-spacing: -0.5px"] {
    color: #171717 !important;
}

/* Subheadings "Login to your ..." */
html[data-theme="light"] [style*="color: rgba(255,255,255,0.4)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.4)"] {
    color: #5a6275 !important;
}

/* Form labels (UPPERCASE) */
html[data-theme="light"] [style*="color: rgba(255,255,255,0.6)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.6)"] {
    color: #5a6275 !important;
}

/* "Forgot password?" and similar very faded text */
html[data-theme="light"] [style*="color: rgba(255,255,255,0.3)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.3)"] {
    color: #6b7280 !important;
}

/* Footer copyright */
html[data-theme="light"] [style*="color: rgba(255,255,255,0.12)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.12)"] {
    color: #94a3b8 !important;
}

/* Footer even more faded (0.2) */
html[data-theme="light"] [style*="color: rgba(255,255,255,0.2)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.2)"] {
    color: #94a3b8 !important;
}

/* Input fields (background: rgba(255, 255, 255, 0.04)) */
html[data-theme="light"] input[style*="background: rgba(255, 255, 255, 0.04)"],
html[data-theme="light"] input[style*="background:rgba(255, 255, 255, 0.04)"],
html[data-theme="light"] input[style*="background: rgba(255,255,255,0.04)"],
html[data-theme="light"] input[style*="background:rgba(255,255,255,0.04)"],
html[data-theme="light"] input[style*="background: rgba(255, 255, 255, 0.08)"],
html[data-theme="light"] input[style*="background:rgba(255, 255, 255, 0.08)"] {
    background: #f5f6f8 !important;
    border-color: rgba(15,23,42,0.15) !important;
    color: #171717 !important;
}
html[data-theme="light"] input[style*="color: #ffffff"],
html[data-theme="light"] input[style*="color:#ffffff"] {
    color: #171717 !important;
}
html[data-theme="light"] input[style*="border: 1.5px solid rgba(255, 255, 255, 0.08)"],
html[data-theme="light"] input[style*="border:1.5px solid rgba(255, 255, 255, 0.08)"],
html[data-theme="light"] input[style*="border: 1.5px solid rgba(255,255,255,0.08)"],
html[data-theme="light"] input[style*="border:1.5px solid rgba(255,255,255,0.08)"] {
    border-color: rgba(15,23,42,0.15) !important;
}

/* Input icons (envelope/lock) - keep readable grey */
html[data-theme="light"] [style*="color: #6c757d"][style*="position: absolute"][style*="left: 14px"] {
    color: #94a3b8 !important;
}

/* Error message box */
html[data-theme="light"] [style*="background: rgba(220, 53, 69, 0.1)"],
html[data-theme="light"] [style*="background:rgba(220, 53, 69, 0.1)"] {
    background: rgba(220, 53, 69, 0.08) !important;
    border-color: rgba(220, 53, 69, 0.20) !important;
}
html[data-theme="light"] [style*="background: rgba(220, 53, 69, 0.15)"],
html[data-theme="light"] [style*="background:rgba(220, 53, 69, 0.15)"] {
    background: rgba(220, 53, 69, 0.12) !important;
}

/* Success message box (rgba(40, 167, 69, 0.1) / 0.12) */
html[data-theme="light"] [style*="background: rgba(40, 167, 69, 0.1)"],
html[data-theme="light"] [style*="background:rgba(40, 167, 69, 0.1)"],
html[data-theme="light"] [style*="background: rgba(40, 167, 69, 0.12)"],
html[data-theme="light"] [style*="background:rgba(40, 167, 69, 0.12)"] {
    background: rgba(40, 167, 69, 0.10) !important;
    border-color: rgba(40, 167, 69, 0.20) !important;
}

/* Info / hint box (orange tint rgba(214,116,51,0.06)) */
html[data-theme="light"] [style*="background: rgba(214,116,51,0.06)"],
html[data-theme="light"] [style*="background:rgba(214,116,51,0.06)"] {
    background: rgba(214,116,51,0.08) !important;
    border-color: rgba(214,116,51,0.20) !important;
}

/* Auth card border (rgba(255, 255, 255, 0.06)) */
html[data-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
html[data-theme="light"] [style*="border:1px solid rgba(255, 255, 255, 0.06)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.06)"] {
    border-color: rgba(15,23,42,0.10) !important;
}

/* Auth card "register link" divider */
html[data-theme="light"] [style*="border-top: 1px solid rgba(255, 255, 255, 0.04)"],
html[data-theme="light"] [style*="border-top:1px solid rgba(255, 255, 255, 0.04)"],
html[data-theme="light"] [style*="border-top: 1px solid rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255,0.04)"] {
    border-top-color: rgba(15,23,42,0.08) !important;
}

/* Auth submit button (gradient orange - keep brand in BOTH themes) */
.auth-submit-btn,
html[data-theme="light"] .auth-submit-btn,
html[data-theme="light"] button[style*="linear-gradient(135deg, #d67433"],
html[data-theme="light"] button[style*="background: linear-gradient(135deg, #d67433"] {
    background: linear-gradient(135deg, #d67433 0%, #b85f2a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(214,116,51,0.25) !important;
}

/* ---- Auth input fields (boxed: login / forgot / reset / resend) ---- */
.auth-input {
    background: rgba(255,255,255,0.04) !important;
    border: 1.5px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .auth-input {
    background: #ffffff !important;
    border: 1.5px solid rgba(15,23,42,0.18) !important;
    color: #171717 !important;
}
.auth-input:focus {
    border-color: rgba(214,116,51,0.50) !important;
    box-shadow: 0 0 0 3px rgba(214,116,51,0.10) !important;
}

/* ---- Register page inputs (minimalist underline in dark, boxed in light) ---- */
.auth-underline-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1.5px solid rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    outline: none !important;
}
html[data-theme="light"] .auth-underline-input {
    background: #ffffff !important;
    border: 1.5px solid rgba(15,23,42,0.18) !important;
    border-radius: 10px !important;
    color: #171717 !important;
}
.auth-underline-input:focus,
html[data-theme="light"] .auth-underline-input:focus {
    border-color: rgba(214,116,51,0.50) !important;
    box-shadow: 0 0 0 3px rgba(214,116,51,0.10) !important;
}

/* Faded body text alpha values not covered by the rules above */
html[data-theme="light"] [style*="color: rgba(255,255,255,0.5)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.5)"] {
    color: #5a6275 !important;
}
html[data-theme="light"] [style*="color: rgba(255,255,255,0.7)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.7)"] {
    color: #3a4256 !important;
}
html[data-theme="light"] [style*="color: rgba(255,255,255,0.35)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.35)"] {
    color: #667085 !important;
}

/* Brand-colored span inside heading (e.g. <span style="color: #d67433">Back</span>) */
html[data-theme="light"] span[style*="color: #d67433"]:not([style*="background"]) {
    color: #b85f2a !important;
}

/* Brand-colored icons inside labels (fa-envelope, fa-lock with color: #d67433) */
html[data-theme="light"] i[style*="color: #d67433"] {
    color: #b85f2a !important;
}

/* Forgot Password link (light) */
html[data-theme="light"] a[style*="color: rgba(255,255,255,0.3)"] {
    color: #6b7280 !important;
}
html[data-theme="light"] a[style*="color: rgba(255,255,255,0.3)"]:hover {
    color: #b85f2a !important;
}

/* Resend verification link inline in error */
html[data-theme="light"] [style*="color: #d67433"][style*="text-decoration: underline"] {
    color: #b85f2a !important;
}

/* ========================================
   15. FAVOURITE TOAST NOTIFICATION
   ======================================== */
.fav-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    padding: 14px 20px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 600;
    z-index: 99999;
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
    pointer-events: none;
}

.fav-toast-show {
    opacity: 1;
    transform: translateX(0);
}

.fav-toast-success {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.fav-toast-info {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.fav-toast-error {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.fav-toast i {
    font-size: 1.1rem;
}

@media (max-width: 575.98px) {
    .fav-toast {
        top: auto;
        bottom: 24px;
        right: 16px;
        left: 16px;
        max-width: none;
        transform: translateY(120%);
    }
    .fav-toast-show {
        transform: translateY(0);
    }
}

/* ============================================ */
/* RTL / ARABIC LANGUAGE SUPPORT                */
/* ============================================ */

/* Base Arabic font */
[lang="ar"] {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6 {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .text-start {
    text-align: right !important;
}

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* Navbar */
[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .nav-link {
    padding-left: 1rem;
    padding-right: 0;
}

/* Auth cards */
[dir="rtl"] .auth-card .fa-lock,
[dir="rtl"] .auth-card .fa-shield-alt,
[dir="rtl"] .auth-card .fa-user,
[dir="rtl"] .auth-card .fa-envelope,
[dir="rtl"] .auth-card .fa-phone {
    margin-right: 0;
    margin-left: 6px;
}

/* Mobile sidebar */
[dir="rtl"] .mobile-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
    /* RTL slides on transform, not left -- match the LTR 0.4s easing. */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[dir="rtl"] .mobile-sidebar.show,
[dir="rtl"] .mobile-sidebar.open {
    transform: translateX(0);
}

[dir="rtl"] .sidebar-overlay {
    left: 0;
    right: auto;
}

/* Footer columns */
[dir="rtl"] .footer-col h4 {
    text-align: right;
}

/* Classifieds cards */
[dir="rtl"] .cl-card {
    text-align: right;
}

[dir="rtl"] .cl-empty {
    text-align: center;
}

/* Breadcrumbs / text helpers */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-left: 0;
    padding-right: 0.5rem;
}

/* Pagination arrows flip */
[dir="rtl"] .page-link {
    text-align: center;
}

/* Form floating labels */
[dir="rtl"] .form-floating > .form-control,
[dir="rtl"] .form-floating > .form-select {
    text-align: right;
}

/* Badge alignment on cards */
[dir="rtl"] .cl-badge {
    margin-left: 0;
    margin-right: 0;
}

/* Hero slider text alignment */
[dir="rtl"] .hero-slider-overlay.align-left {
    text-align: right;
}

[dir="rtl"] .hero-slider-content {
    text-align: right;
}

/* Tool cards */
[dir="rtl"] .landing-tool-card {
    text-align: center;
}

/* Contact form / info blocks */
[dir="rtl"] .contact-info-item {
    text-align: right;
}

[dir="rtl"] .contact-form-area {
    text-align: right;
}

/* Search bar RTL */
[dir="rtl"] .cl-search input {
    border-radius: 0 50px 50px 0 !important;
}

[dir="rtl"] .cl-search button {
    border-radius: 50px 0 0 50px !important;
}

/* Dropdown menus */
[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* Mobile responsive RTL */
@media (max-width: 991.98px) {
    [dir="rtl"] .navbar-collapse.show {
        flex-direction: column-reverse;
    }
}

/* Light mode RTL fixes */
html[data-theme="light"][dir="rtl"] .cl-scope .cl-card {
    text-align: right;
}

/* Force visibility of listing action buttons in light mode */
html[data-theme="light"] .btn-outline-light,
html[data-theme="light"] .btn-outline-success,
html[data-theme="light"] .btn-outline-secondary,
html[data-theme="light"] .btn-outline-info,
html[data-theme="light"] .btn-outline-danger {
    color: #d67433 !important;
    border-color: #d67433 !important;
    background: rgba(214,116,51,0.08) !important;
}
html[data-theme="light"] .btn-outline-success { color: #28a745 !important; border-color: #28a745 !important; background: rgba(40,167,69,0.08) !important; }
html[data-theme="light"] .btn-outline-secondary { color: #6c757d !important; border-color: #6c757d !important; background: rgba(108,117,125,0.08) !important; }
html[data-theme="light"] .btn-outline-info { color: #0d6efd !important; border-color: #0d6efd !important; background: rgba(13,110,253,0.08) !important; }
html[data-theme="light"] .btn-outline-danger { color: #dc3545 !important; border-color: #dc3545 !important; background: rgba(220,53,69,0.08) !important; }