/* ===================================
   Emporiant — Dark Theme Override
   Based on: style.css (Montserrat/NunitoSans template)
   Load order: LAST after all other stylesheets
=================================== */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ===================================
   VARIABLES
=================================== */
:root {
    --color-bg:           #070707;
    --color-surface:      #1f2025;
    --color-border:       #2a2a2a;
    --color-text:         #fdfdfd;
    --color-muted:        #abb8c3;
    --color-accent:       #36c4af;
    --color-accent-hover: #2aa898;
    --color-accent-dim:   rgba(54, 196, 175, 0.10);
    --font-base:          "Open Sans", sans-serif;
    --fs-xs:              13px;
    --fs-sm:              14px;
    --transition:         0.2s ease;

    /* Override template HSL vars to match dark theme */
    --white: 0 0% 7%;          /* makes hsl(var(--white)) = #121212 */
    --black-h: 0;
    --black-s: 0%;
    --black-l: 99%;            /* makes hsl(var(--black)) = near white text */
    --body-color: 0 0% 99%;
    --heading-color: 0 0% 99%;
    --border-color: #2a2a2a;
    --border-color-dashboard: 0, 0%, 17%;
    --section-bg: hsl(225, 10%, 13%);
}

/* ===================================
   BASE
=================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Apply font to everything except icon elements */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fad):not(.fal):not([class^="la-"]):not([class*=" la-"]) {
    font-family: var(--font-base) !important;
}

/* Explicitly restore Font Awesome fonts */
.fa, .fas, .far {
    font-family: "Font Awesome 5 Free" !important;
}
.fab {
    font-family: "Font Awesome 5 Brands" !important;
}

/* Restore Font Awesome on pseudo-elements */
.fa::before, .fas::before, .far::before {
    font-family: "Font Awesome 5 Free" !important;
}
.fab::before {
    font-family: "Font Awesome 5 Brands" !important;
}

/* Restore Line Awesome (used in dashboard) */
[class^="la-"]::before,
[class*=" la-"]::before {
    font-family: "Line Awesome Free" !important;
}

body {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-size: var(--fs-sm) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text) !important;
    font-weight: 700 !important;
}

a {
    color: var(--color-accent) !important;
    transition: color var(--transition);
    text-decoration: none !important;
}
a:hover { color: var(--color-accent-hover) !important; }

/* ===================================
   LOADING OVERLAY
=================================== */
#overlayer {
    background-color: var(--color-bg) !important;
}
#overlayer .loader { border-color: var(--color-accent) !important; }
#overlayer .loader .loader-inner { background-color: var(--color-accent) !important; }
.body-overlay, .sidebar-overlay {
    background-color: rgba(7,7,7,0.85) !important;
}

/* ===================================
   HIDE DECORATIVE CHROME
   The giant teal image is figure.highlight-background
   containing animation.svg — hidden here
=================================== */
figure.highlight-background,
figure.figure,
.register-element-one,
.banner-section,
.inner-banner-section,
.banner-shape-one,
.banner-shape-two,
.banner-shape-three,
.breadcrumb-area,
nav[aria-label="breadcrumb"],
.breadcrumb,
.scroll-top,
.scrollToTop,
/* The account::after blue glow blob */
.account::after {
    display: none !important;
}

/* ===================================
   HEADER
   style.css: .header has max-height:88px, bg white
   The nav sits inside .header directly (no .header-section)
=================================== */
.header {
    background-color: var(--color-bg) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: none !important;
    max-height: none !important;    /* remove 88px cap */
    position: relative !important;
    z-index: 999 !important;
}

.header.fixed-header {
    background-color: var(--color-bg) !important;
    box-shadow: none !important;
}

/* Also cover .header-section wrapper used on some pages */
.header-section {
    background-color: var(--color-bg) !important;
}
.header-section .header {
    background-color: var(--color-bg) !important;
}

/* Logo — 34px tall, matching emporiant.com */
.site-logo img,
.site-title img,
.navbar-brand img,
.navbar-brand.logo img {
    height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
    max-width: 140px !important;
    display: block !important;
}

/* Site title next to logo */
.site-logo,
.site-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.site-logo:hover,
.site-title:hover {
    color: var(--color-accent) !important;
}

/* Header bar height and padding */
.header .navbar,
.header-bottom-area .navbar,
.header-menu-content .navbar {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.header-bottom-area {
    background-color: var(--color-bg) !important;
}

/* ===================================
   LAYOUT — 1280px max, 24px margins
=================================== */
.container {
    max-width: 1280px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Responsive container padding */
@media (max-width: 768px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ===================================
   RESPONSIVE NAV
=================================== */

/* Mobile hamburger button */
.navbar-toggler {
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    padding: 6px 10px !important;
}
.navbar-toggler:focus {
    box-shadow: none !important;
}
.navbar-toggler .fas.fa-bars {
    color: var(--color-text) !important;
    font-size: 18px !important;
}

/* Mobile nav collapse panel */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        padding: 16px !important;
        margin-top: 8px !important;
    }

    .main-menu li {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .main-menu li > a {
        padding: 10px 0 !important;
        display: block !important;
        border-bottom: 1px solid var(--color-border) !important;
        color: var(--color-text) !important;
    }

    .main-menu li:last-child > a {
        border-bottom: none !important;
    }

    /* Account sub-menu on mobile */
    .menu_has_children > .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid var(--color-border) !important;
        margin-left: 12px !important;
        background: transparent !important;
        min-width: unset !important;
    }
}

/* Language dropdown — properly contained in nav */
.custom--dropdown {
    display: inline-block !important;
    position: relative !important;
    border-color: var(--color-border) !important;
    background-color: var(--color-surface) !important;
    min-width: 120px !important;
    border-radius: 0 !important;
}

.custom--dropdown::after {
    color: var(--color-muted) !important;
}

/* Selected display */
.custom--dropdown > .custom--dropdown__selected {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-radius: 0 !important;
    padding: 6px 28px 6px 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
}
.custom--dropdown > .custom--dropdown__selected .text {
    color: var(--color-text) !important;
}

/* Dropdown list — CLOSED by default, JS adds .open to show */
.custom--dropdown > .dropdown-list {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    min-width: 140px !important;
    margin-top: 5px !important;
    /* These four properties keep it hidden — mirror dashboard.css */
    opacity: 0 !important;
    transform: scaleY(0) !important;
    -webkit-transform-origin: top center !important;
    transform-origin: top center !important;
    visibility: hidden !important;
    z-index: -1 !important;
    transition: .25s ease-in-out !important;
    max-height: 230px !important;
    overflow-y: auto !important;
}

/* Open state — JS adds .open, we show and override the #fff !important */
html body .custom--dropdown.open > .dropdown-list {
    opacity: 1 !important;
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    visibility: visible !important;
    z-index: 9999 !important;
    background: var(--color-surface) !important;
}

.dropdown-list > .dropdown-list__item {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
}
.dropdown-list > .dropdown-list__item .text {
    color: var(--color-text) !important;
}
.dropdown-list > .dropdown-list__item:hover,
.dropdown-list > .dropdown-list__item.selected {
    background-color: var(--color-bg) !important;
    color: var(--color-accent) !important;
}
.dropdown-list > .dropdown-list__item:hover .text,
.dropdown-list > .dropdown-list__item.selected .text {
    color: var(--color-accent) !important;
}

/* Flag images */
.custom--dropdown .flag,
.dropdown-list__item .flag {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Nav links — style.css uses .nav-menu .nav-item .nav-link */
.nav-menu .nav-item .nav-link,
.main-menu li > a,
.navbar-nav li > a {
    color: var(--color-text) !important;
    font-size: var(--fs-sm) !important;
}
.nav-menu .nav-item .nav-link:hover,
.nav-menu .nav-item.active .nav-link,
.main-menu li > a:hover,
.main-menu li > a.active {
    color: var(--color-accent) !important;
}

/* Remove underline animation bar from nav */
.nav-menu .nav-item .nav-link::before {
    background-color: var(--color-accent) !important;
}

/* Dropdown sub-menu */
.dropdown-menu {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}
.dropdown-menu .dropdown-item,
.dropdown-menu__link {
    color: var(--color-muted) !important;
    font-size: var(--fs-xs) !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu__link:hover {
    color: var(--color-accent) !important;
    background-color: var(--color-bg) !important;
}

/* Sub-menu — Account dropdown (Login/Register) */
.sub-menu {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.sub-menu li > a {
    color: var(--color-muted) !important;
    font-size: var(--fs-xs) !important;
    padding: 10px 16px !important;
    display: block !important;
}
.sub-menu li > a:hover {
    color: var(--color-accent) !important;
    background-color: var(--color-bg) !important;
}

/* Ensure sub-menu drops under "Account" on desktop */
@media (min-width: 992px) {
    /* Anchor point — the li itself */
    .menu_has_children {
        position: relative !important;
    }
    .menu_has_children > .sub-menu {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        min-width: 160px !important;
        z-index: 9999 !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }
    .menu_has_children:hover > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Mobile — show on click via Bootstrap collapse */
@media (max-width: 991px) {
    .menu_has_children .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid var(--color-border) !important;
        margin-left: 12px !important;
        padding-left: 8px !important;
    }
}

/* ===================================
   LANGUAGE DROPDOWN
   Uses transform/opacity/visibility — NOT display:none
   dashboard.css open state hardcodes background:#fff !important
   We need to beat it with even higher specificity
=================================== */
.custom--dropdown {
    border-color: var(--color-border) !important;
    background-color: var(--color-surface) !important;
}
.custom--dropdown::after { color: var(--color-muted) !important; }

.custom--dropdown > .custom--dropdown__selected {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-radius: 0 !important;
}
.custom--dropdown > .custom--dropdown__selected .text {
    color: var(--color-text) !important;
}

/* Closed list panel */
.custom--dropdown > .dropdown-list {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

/* Open state — override the !important white in dashboard.css */
html body .custom--dropdown.open > .dropdown-list {
    background: var(--color-surface) !important;
    z-index: 9999 !important;
}

.dropdown-list > .dropdown-list__item {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}
.dropdown-list > .dropdown-list__item .text {
    color: var(--color-text) !important;
}
.dropdown-list > .dropdown-list__item:hover,
.dropdown-list > .dropdown-list__item.selected {
    background-color: var(--color-bg) !important;
    color: var(--color-accent) !important;
}
.dropdown-list > .dropdown-list__item:hover .text,
.dropdown-list > .dropdown-list__item.selected .text {
    color: var(--color-accent) !important;
}

/* ===================================
   LOGIN / REGISTER — .account layout
   style.css: .account is min-height:100vh flex
   .account .account-thumb = left 50% image side
   .account .account-content = right 50% form side
   BUT the login page HTML uses .register-section with
   .change-catagory-area and .register-form-area instead.
   We cover both.
=================================== */

/* Wrapper sections */
.account,
.register-section {
    background-color: var(--color-bg) !important;
}

/* Kill the blue glow blob on .account */
.account::after { display: none !important; }

/* Account thumb (left image panel in account layout) */
.account .account-thumb {
    background-color: var(--color-surface) !important;
    border-right: 1px solid var(--color-border) !important;
}

/* Account content (right form panel in account layout) */
.account .account-content {
    background-color: var(--color-bg) !important;
}

/* Account form box */
.account-form {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
}

/* ---- register-section layout (login/register pages) ---- */
.register-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    position: relative !important;
    z-index: 1 !important;
}

.signup-area, .login-area, .account-area, .change-form {
    background: transparent !important;
    border: none !important;
}

/* Form panel */
.register-form-area,
.common-form-style,
.bg-one {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    padding: 40px 36px !important;
    height: 100% !important;
}

/* CTA panel (image side with placeholder bg) */
.change-catagory-area {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 420px !important;
    height: 100% !important;
    padding: 40px 30px !important;
    background-color: #0e0e12 !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid var(--color-border) !important;
    overflow: hidden !important;
}

/* Hide the broken placeholder image inside CTA panel */
.change-catagory-area img:not(.account-control-button img) {
    display: none !important;
}
.change-catagory-area::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(7,7,7,0.72) !important;
    z-index: 0 !important;
}
.change-catagory-area > * {
    position: relative !important;
    z-index: 1 !important;
}

/* CTA button */
.btn--base-active,
a.btn--base-active {
    display: inline-block !important;
    background-color: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important;
    color: var(--color-bg) !important;
    font-weight: 700 !important;
    font-size: var(--fs-sm) !important;
    padding: 12px 32px !important;
    margin-top: 16px !important;
    transition: background-color var(--transition) !important;
}
.btn--base-active:hover, a.btn--base-active:hover {
    background-color: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    color: var(--color-bg) !important;
}

/* "Or" divider */
.social-or { color: var(--color-muted) !important; }
.social-or::before, .social-or::after {
    background-color: var(--color-border) !important;
}

/* ===================================
   FORMS
=================================== */
.form--control,
.form-control,
.form-select {
    background-color: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    font-size: var(--fs-sm) !important;
    border-radius: 0 !important;
}
.form--control::placeholder, .form-control::placeholder {
    color: var(--color-muted) !important;
    font-style: italic;
}
.form--control:focus, .form-control:focus, .form-select:focus {
    background-color: var(--color-bg) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px var(--color-accent-dim) !important;
    color: var(--color-text) !important;
}

/* Autofill dark */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #0f0f0f inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
    caret-color: var(--color-text) !important;
}

.form-label, .form--label, label.required {
    color: var(--color-text) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
}
.form-group { margin-bottom: 20px !important; }

/* Remember Me + Forgot Password row */
.checkbox-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.checkbox-wrapper .checkbox-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.checkbox-wrapper .checkbox-item label {
    color: var(--color-muted) !important;
    font-size: var(--fs-xs) !important;
    margin: 0 !important;
}

/* Register page checkbox */
.form-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
}
.form-checkbox label {
    color: var(--color-muted) !important;
    font-size: var(--fs-xs) !important;
    margin: 0 !important;
}

.text--base {
    color: var(--color-accent) !important;
    font-size: var(--fs-xs) !important;
}
.text--base:hover { color: var(--color-accent-hover) !important; }

/* Input group (country code etc.) */
.input-group-text {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* ===================================
   BUTTONS
   style.css .btn has border:2px solid hsl(var(--black))
   and color:hsl(var(--black)) — we override both
=================================== */
.btn {
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}
.btn:hover, .btn:focus {
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

.btn--base,
.btn--base:focus,
.btn--base:active {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-bg) !important;
}
.btn--base:hover {
    background-color: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    color: var(--color-bg) !important;
}

.btn-outline--base {
    background-color: transparent !important;
    border: 1px solid var(--color-accent) !important;
    color: var(--color-accent) !important;
}
.btn-outline--base:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-bg) !important;
}

.btn--dark {
    background-color: var(--color-border) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
.btn--dark:hover { background-color: #3a3a3a !important; }

.h-45 { height: 45px !important; }

/* ===================================
   MODALS
=================================== */
.modal-content {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    border-radius: 0 !important;
}
.modal-header, .modal-footer {
    border-color: var(--color-border) !important;
    background-color: var(--color-surface) !important;
}
.modal-title { color: var(--color-text) !important; }
.modal .close, .modal [data-bs-dismiss="modal"], .dashboard-modal .btn-close {
    color: var(--color-muted) !important;
    background: none !important;
    border: none !important;
}
.modal .close:hover, .modal [data-bs-dismiss="modal"]:hover,
.dashboard-modal .btn-close:hover {
    color: var(--color-text) !important;
}

/* ===================================
   FOOTER
   style.css: .footer-area has bg hsl(var(--black))
   and ::before #ffe799 gold blob, ::after #b1ecff blue blob
   The login page HTML uses .footer-section > .footer-area
=================================== */
.footer-section, footer {
    background-color: var(--color-bg) !important;
    background-image: none !important;
    border-top: 1px solid var(--color-border) !important;
}

.footer-area {
    background-color: var(--color-bg) !important;
    background-image: none !important;
}

/* Kill the gold and blue glow blobs — multiple selectors for specificity */
.footer-area::before,
.footer-area::after,
footer .footer-area::before,
footer .footer-area::after,
.footer-section .footer-area::before,
.footer-section .footer-area::after {
    display: none !important;
    background: transparent !important;
    filter: none !important;
}

/* Kill column-level backgrounds */
.footer-section [class*="col-"],
.footer-widget {
    background: transparent !important;
    background-image: none !important;
}

.footer-widget .widget-title,
.footer-item__title {
    color: var(--color-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
}

.footer-widget ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-widget ul li,
.footer-widget ul li a,
.footer-widget p,
.footer-menu__link,
.footer-item__desc {
    color: var(--color-muted) !important;
    font-size: var(--fs-xs) !important;
    line-height: 2 !important;
}
.footer-widget ul li a:hover,
.footer-menu__link:hover {
    color: var(--color-accent) !important;
}

/* Bottom footer bar */
.privacy-area, .privacy-area--style, .bottom-footer {
    background-color: var(--color-surface) !important;
    background-image: none !important;
    border-top: 1px solid var(--color-border) !important;
}
.privacy-area p, .copyright p, .bottom-footer-text {
    color: var(--color-muted) !important;
    font-size: var(--fs-xs) !important;
    margin: 0 !important;
}

/* ===================================
   ALERTS
=================================== */
.alert {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    border-radius: 0 !important;
}

/* ===================================
   DASHBOARD — HEADER
=================================== */
.dashboard .header,
.dashboard .header-section {
    background-color: var(--color-bg) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}

/* ===================================
   DASHBOARD — SIDEBAR
=================================== */
.dashboard .sidebar-menu {
    background-color: var(--color-bg) !important;
    border-right: 1px solid var(--color-border) !important;
}
.dashboard .sidebar-menu-list__link {
    color: var(--color-text) !important;
    font-size: var(--fs-sm) !important;
}
.dashboard .sidebar-menu-list__link:hover,
.dashboard .sidebar-menu-list__item.active > a {
    background-color: var(--color-accent-dim) !important;
    color: var(--color-accent) !important;
}
.dashboard .sidebar-menu-list__link::before {
    background: var(--color-accent) !important;
}
.dashboard .sidebar-submenu-list__link {
    color: var(--color-muted) !important;
}
.dashboard .sidebar-submenu-list__link:hover {
    color: var(--color-accent) !important;
}

/* ===================================
   DASHBOARD — BODY & CARDS
=================================== */
.dashboard,
.dashboard__right,
.dashboard .dashboard-body,
.dashboard-section {
    background-color: var(--color-bg) !important;
}

.custom--card,
.custom--card .card-body,
.custom--card .card-header,
.custom--card .card-footer,
.card-header,
.dashboard .dashboard-widget {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
.dashboard .dashboard-widget:hover {
    border-color: var(--color-accent) !important;
}
.dashboard .dashboard-widget__number { color: var(--color-text) !important; }
.dashboard .dashboard-widget__text { color: var(--color-muted) !important; }

/* ===================================
   DASHBOARD — TABLES
=================================== */
.dashboard .table thead tr th {
    background-color: var(--color-surface) !important;
    color: var(--color-muted) !important;
    border-color: var(--color-border) !important;
}
.dashboard .table tbody {
    background-color: var(--color-bg) !important;
}
.dashboard .table tbody tr td {
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
.dashboard .table tbody tr:hover td {
    background-color: var(--color-surface) !important;
}

/* ===================================
   DASHBOARD — BADGES & PAGINATION
=================================== */
.dashboard .badge--base {
    background-color: var(--color-accent-dim) !important;
    color: var(--color-accent) !important;
}
.pagination .page-item .page-link {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    border-radius: 0 !important;
}
.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-bg) !important;
}

/* ===================================
   DASHBOARD — ACCORDION
=================================== */
.custom--accordion .accordion-item {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}
.custom--accordion .accordion-button {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}
.custom--accordion .accordion-button:not(.collapsed) {
    background-color: var(--color-bg) !important;
    color: var(--color-accent) !important;
    box-shadow: none !important;
}
.custom--accordion .accordion-body {
    background-color: var(--color-surface) !important;
}

/* ===================================
   SELECT2
=================================== */
.select2-dropdown,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--color-text) !important;
}
.select2-results__option {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}
.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable,
.select2-results__option.select2-results__option--selected {
    background-color: var(--color-bg) !important;
    color: var(--color-accent) !important;
}


/* ===================================
   SPACING — 24px minimum throughout
   Matches emporiant.com baseline
=================================== */

/* Header — comfortable 24px vertical padding */
.header .navbar,
.header-bottom-area .navbar,
.header-menu-content .navbar {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* Gap between header and main content */
.register-section,
.account {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* Form panel internal padding — 24px min */
.register-form-area,
.common-form-style,
.bg-one,
.account-form {
    padding: 40px 40px !important;
}

/* Form groups — 24px gap between fields */
.form-group {
    margin-bottom: 24px !important;
}

/* Form labels — breathing room above inputs */
.form-label,
.form--label,
label.required {
    margin-bottom: 8px !important;
    display: block !important;
}

/* Inputs — comfortable height and padding */
.form--control,
.form-control,
.form-select {
    padding: 12px 16px !important;
    height: 48px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

textarea.form--control,
textarea.form-control {
    height: auto !important;
    min-height: 120px !important;
}

/* Login button — full weight */
.btn.w-100 {
    padding: 14px 24px !important;
    height: auto !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
}

/* Remember Me row — 24px top margin */
.checkbox-wrapper,
.form-group:has([type="checkbox"]) {
    margin-top: 4px !important;
    margin-bottom: 24px !important;
}

/* Page title spacing */
.register-form-area h4,
.register-form-area h5,
.common-form-style h4,
.common-form-style h5 {
    margin-bottom: 32px !important;
    font-size: 22px !important;
    letter-spacing: -0.2px !important;
}

/* CTA panel — vertically centered with 40px breathing room */
.change-catagory-area {
    min-height: 480px !important;
    padding: 40px !important;
}

/* Footer — 48px vertical padding, 24px between columns */
.footer-section .footer-area,
.footer-section .main-footer {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

.footer-widget {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.footer-widget .widget-title {
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--color-muted) !important;
}

.footer-widget ul li {
    padding: 4px 0 !important;
    line-height: 1.6 !important;
}

/* Copyright bar */
.privacy-area,
.privacy-area--style {
    padding: 16px 0 !important;
}

/* Nav links — 24px horizontal gap between items */
.main-menu > li,
.navbar-nav > li {
    margin-left: 8px !important;
}

.main-menu li > a,
.navbar-nav li > a {
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Sub-menu items */
.sub-menu li > a {
    padding: 10px 16px !important;
    display: block !important;
}

/* ===================================
   SCROLLBAR
=================================== */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background-color: var(--color-accent); }

/* ===================================
   CONTRAST FIX — Light surface overrides
   Targets elements that end up on white/light backgrounds
=================================== */

/* Main dashboard content area & any white cards */
.dashboard__right,
.dashboard-body,
.dashboard-body .custom--card,
.dashboard-body .card,
.dashboard-body .card-body,
.dashboard-body .card-header,
.dashboard-body .card-footer,
.order-card,
.new-order-card,
[class*="order-form"],
[class*="dashboard-card"] {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

/* Any element with an explicit white or near-white background
   that might have been set inline or by the template */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:white"],
[style*="background-color: white"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"] {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

/* Labels and text inside the order form */
.dashboard label,
.dashboard .form--label,
.dashboard .form-label,
.dashboard p,
.dashboard span:not(.badge):not([class*="btn"]),
.dashboard h1,
.dashboard h2,
.dashboard h3,
.dashboard h4,
.dashboard h5,
.dashboard h6 {
    color: var(--color-text) !important;
}

/* Service info panel on the right (Service Name, Min Qty etc.) */
.order-details,
.service-details,
[class*="service-info"],
[class*="order-info"] {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.order-details p,
.order-details span,
.service-details p,
.service-details span {
    color: var(--color-text) !important;
}

/* ===================================
   SIDEBAR — Full accent highlight on active/hover
=================================== */

/* Active top-level item */
.dashboard .sidebar-menu-list__item.active > a,
.dashboard .sidebar-menu-list__link:hover {
    background-color: var(--color-accent) !important;
    color: #070707 !important;
}

/* Active item icon and text */
.dashboard .sidebar-menu-list__item.active > a .text,
.dashboard .sidebar-menu-list__item.active > a .icon,
.dashboard .sidebar-menu-list__item.active > a i,
.dashboard .sidebar-menu-list__link:hover .text,
.dashboard .sidebar-menu-list__link:hover .icon,
.dashboard .sidebar-menu-list__link:hover i {
    color: #070707 !important;
}

/* Active submenu item */
.dashboard .sidebar-submenu-list__item.active > a,
.dashboard .sidebar-submenu-list__link:hover {
    background-color: var(--color-accent) !important;
    color: #070707 !important;
}

.dashboard .sidebar-submenu-list__item.active > a .text,
.dashboard .sidebar-submenu-list__link:hover .text {
    color: #070707 !important;
}

/* Remove the left-bar indicator since we're doing full highlight */
.dashboard .sidebar-menu-list__link::before {
    display: none !important;
}

/* ===================================
   DASHBOARD WIDGETS — Remove glow/box-shadow
=================================== */
.dashboard-widget,
.dashboard-widget:hover {
    box-shadow: none !important;
    filter: none !important;
}

.dashboard-widget__icon,
.dashboard-widget__icon::before,
.dashboard-widget__icon::after {
    box-shadow: none !important;
    filter: none !important;
    background-color: var(--color-accent-dim) !important;
    color: var(--color-accent) !important;
}

.dashboard-widget__icon i {
    filter: none !important;
    text-shadow: none !important;
}

.dashboard-widget a {
    filter: none !important;
}

/* Hide public nav links from dashboard header */
ul.navbar-nav.main-menu {
    display: none !important;
}

/* ===================================
   LOADER — Replace spinner with logo
=================================== */

/* Hide the original spinner */
.loader,
.loader-inner {
    border: none !important;
    background: none !important;
    animation: none !important;
    width: auto !important;
    height: auto !important;
}

/* Use the loader div itself to show the logo */
.loader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

.loader::after {
    content: "" !important;
    display: block !important;
    width: 120px !important;
    height: 60px !important;
    background-image: url("https://emporiant.com/wp-content/uploads/2025/11/cropped-NL_Emps.png") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    animation: logo-pulse 1.2s ease-in-out infinite !important;
}

@keyframes logo-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.92); }
}