/* ============================================================
   DESIGNI-STYLE DARK MODE — Banglastock
   Main BG: #1C1C1C | Surface: #242424 | Hover: #2A2A2A
   Border: #2E2E2E | Text: #FFF / #BFBFBF / #8A8A8A
   Brand accent kept as-is: hsl(var(--base))
============================================================ */:root {
    /* MAGNIFIC OFFICIAL DARK TOKENS */
    --color-surface-0: #101010;
    --color-surface-1: #1a1a1a;
    --color-surface-2: #2b2b2b;
    --color-surface-3: #353535;
    --color-surface-4: #424242;
    --color-surface-modal: #141414;
    --color-surface-accent-0: #4f69f2;
    --color-surface-accent-1: #4f69f21a;
    --color-surface-border-solid-0: #101010;
    --color-surface-border-solid-1: #1a1a1a;
    --color-surface-border-solid-2: #2b2b2b;
    --color-surface-border-solid-3: #353535;
    --color-surface-border-solid-4: #424242;
    --color-surface-border-solid-10: #f5f5f5;
    --color-surface-border-alpha-0: #ffffff0d;
    --color-surface-border-alpha-1: #ffffff1a;
    --color-surface-border-alpha-2: #ffffff33;
    --color-surface-border-accent-solid-0: #4f69f2;
    --color-surface-border-accent-alpha-0: #ffffff4d;
    --color-surface-foreground-0: #f5f5f5;
    --color-surface-foreground-1: #e3e3e3;
    --color-surface-foreground-2: #c5c5c5;
    --color-surface-foreground-3: #aaaaaa;
    --color-surface-foreground-4: #737373;
    --color-surface-foreground-accent-0: #4f69f2;
    --color-primary-0: #4f69f2;
    --color-primary-1: #344ce7;
    --color-primary-2: #2236d2;
    --color-primary-foreground-0: #fafafa;

    /* Mapped Variables */
    --dk-bg:         #101010;
    --dk-surface:    #1a1a1a;
    --dk-card:       #1a1a1a;
    --dk-hover:      #2b2b2b;
    --dk-border:     rgba(255, 255, 255, 0.1);
    --dk-text:       #f5f5f5;
    --dk-text-sub:   #e3e3e3;
    --dk-text-muted: #aaaaaa;
    --dk-trans:      all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Override light theme variables so they don't show as white */
    --light-h: 0;
    --light-s: 0%;
    --light-l: 14%;
}

/* ── 1. BODY ── */
body { background-color: var(--dk-bg) !important; color: var(--dk-text) !important; }
h1,h2,h3,h4,h5,h6 { color: var(--dk-text) !important; }
p, span, li, td, th, label, legend, figcaption { color: var(--dk-text-sub) !important; }
.text-dark, .text-heading, .text-body { color: var(--dk-text) !important; }
.text-muted, small, .text-secondary { color: var(--dk-text-muted) !important; }
a { color: var(--dk-text-sub); transition: var(--dk-trans); }
a:hover { color: var(--dk-text) !important; }

/* ── 2. HEADER / NAVBAR ── */
.header-primary {
    background-color: var(--dk-bg) !important;
    border-bottom: 1px solid var(--dk-border) !important;
    box-shadow: none !important;
}
.primary-menu__link { color: var(--dk-text-sub) !important; }
.primary-menu__link:hover,
.primary-menu__link.active { color: var(--dk-text) !important; }

.primary-menu__sub {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.primary-menu__sub-link { background-color: transparent !important; color: var(--dk-text-sub) !important; }
.primary-menu__sub-link:hover { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }

.mega-menu-wrapper__title,
.mega-menu-wrapper__title.collection { color: var(--dk-text) !important; }
.mega-menu__item a { color: var(--dk-text-sub) !important; }
.mega-menu__item a:hover { color: var(--dk-text) !important; }

.nav-container { background: transparent !important; }
@media (max-width: 991px) {
    .nav-container { background-color: var(--dk-surface) !important; }
}

/* ── 3. HERO / BANNER ── */
/* .hero__container { background-image: none !important; background-color: var(--dk-bg) !important; } */
.banner__area, .banner-two__area { background-color: var(--dk-bg) !important; }

/* ── 4. FORMS / INPUTS ── */
.form--control, .form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
textarea, select, .bls-inp {
    /* background-color: var(--dk-bg) !important; */
    /* border: 1px solid var(--dk-border) !important; */
    color: var(--dk-text) !important;
    border-radius: 6px !important;
}
.form--control::placeholder, .form-control::placeholder { color: var(--dk-text-muted) !important; }
.form--control:focus, .form-control:focus {
    background-color: var(--dk-bg) !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsla(var(--primary), 0.2) !important;
    color: var(--dk-text) !important;
}

.input-group-text {
    background-color: var(--dk-bg) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text-muted) !important;
    border-right: none !important;
}
.input-group .form-control {
    border-left: none !important;
}
.input-group .form-control:focus {
    border-color: var(--dk-border) !important;
}

/* Autofill Fix for Dark Mode */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--dk-bg) inset !important;
    -webkit-text-fill-color: var(--dk-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ── 5. SEARCH BAR ── */
.search--form, .hero-search, .search-form {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
}
.header-secondary, .primary-search, .search-category {
    background-color: var(--dk-bg) !important;
    border-bottom-color: var(--dk-border) !important;
}
.search-page__filter {
    border-bottom-color: var(--dk-border) !important;
}

/* Category pills — Designi style: flat, no bright color */
.search-category__btn, .tab-menu__link {
    background-color: transparent !important;
    color: var(--dk-text-sub) !important;
    border-color: var(--dk-border) !important;
    transition: var(--dk-trans) !important;
}
.search-category__btn:hover, .tab-menu__link:hover {
    background-color: var(--dk-hover) !important;
    color: var(--dk-text) !important;
    border-color: #3E3E3E !important;
}
.search-category__btn.active, .tab-menu__link.active {
    background-color: hsl(var(--base)) !important;
    color: #000000 !important;
    border-color: hsl(var(--base)) !important;
}

.tab-menu, .tab-menu__content {
    background-color: var(--dk-bg) !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
.popular-tag, .hero__tag, .search-tag,
.hero__search-tags a, .hero__search-tags span, .popular-search a {
    color: var(--dk-text-muted) !important;
    background: transparent !important;
}
.hero__search-tags a:hover, .popular-search a:hover { color: var(--dk-text-sub) !important; }

.search-bar, .search-bar__input, .primary-search__filter,
.filter-clear, .search-category__list { border-color: var(--dk-border) !important; }
.primary-search__filter {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text-sub) !important;
    transition: var(--dk-trans) !important;
}
.primary-search__filter:hover {
    background-color: var(--dk-hover) !important;
    color: var(--dk-text) !important;
}

/* Fix: white scroll arrow on category pills */
.search-category__arrow {
    background: var(--dk-surface) !important;
    color: var(--dk-text-sub) !important;
    border: 1px solid var(--dk-border) !important;
}
.search-category__arrow:hover {
    background: var(--dk-hover) !important;
    color: var(--dk-text) !important;
}

/* Fix: white hsl(var(--light-dark)) backgrounds in dark mode */
[style*="background: hsl(var(--light"],
[style*="background-color: hsl(var(--light"] {
    background-color: var(--dk-surface) !important;
    background: var(--dk-surface) !important;
}

/* ── 6. CATEGORY DROPDOWN ── */
.category-wrapper .banner-search-category-box {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.banner-search-category__item { color: var(--dk-text-sub) !important; }
.banner-search-category__item:hover { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }
.banner-search-category__item.active { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }
.banner-search-category-box__item { border-top: 1px solid var(--dk-border) !important; }
.banner-search-category-box__item .form-check-label { color: var(--dk-text-sub) !important; }
.banner-search-category-box__item .form-check-input { border: 1px solid var(--dk-border) !important; }

/* ── 7. FILTER SIDEBAR ── */
.filter-sidebar, .search-page__filter, .responsive-filter-card {
    background-color: var(--dk-surface) !important;
    border-right: 1px solid var(--dk-border) !important;
}
.filter-sidebar__title-text, .filter-sidebar__text, .filter__head { color: var(--dk-text) !important; }
.filter-btn__is {
    background-color: transparent !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
    border-radius: 50px !important;
    transition: var(--dk-trans) !important;
}
.filter-btn__is:hover {
    background-color: var(--dk-hover) !important;
    color: var(--dk-text) !important;
    border-color: #3E3E3E !important;
}
.filter-btn__is.active {
    background-color: hsl(var(--base)) !important;
    color: #000000 !important;
    border-color: hsl(var(--base)) !important;
}

/* ── 8. CATEGORY TABS ── */
.category-item, .category-item__thumb, .category-thumb,
.category-filter, .category-tabs .tab, .type-tab {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text-sub) !important;
    border: 1px solid var(--dk-border) !important;
    transition: var(--dk-trans) !important;
}
.category-item__name { color: var(--dk-text-sub) !important; }
.category-thumb:hover {
    background-color: var(--dk-hover) !important;
    color: var(--dk-text) !important;
}
.category-thumb.active {
    background-color: var(--dk-hover) !important;
    color: var(--dk-text) !important;
    border-color: #4A4A4A !important;
}

/* ── 9. GALLERY ── */
.gallery__title, .gallery__content-title, .image-title, .item-title { color: var(--dk-text) !important; }
.gallery__meta, .image-meta, .item-meta, .creator-name { color: var(--dk-text-muted) !important; }

/* ── 10. PAGINATION ── */
.page-link {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
    transition: var(--dk-trans) !important;
}
.page-link:hover { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }
.page-item.active .page-link {
    background-color: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
    color: #000000 !important;
}

/* ── 11. MODALS ── */
.modal-content {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.modal-header, .modal-footer { border-color: var(--dk-border) !important; color: var(--dk-text) !important; }
.modal-title, .modal-header h5 { color: var(--dk-text) !important; }
.btn-close { filter: invert(1) brightness(0.7); }

/* ── 12. DROPDOWNS ── */
.dropdown-menu {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.dropdown-item { color: var(--dk-text-sub) !important; }
.dropdown-item:hover { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }

/* ── 13. TABLES ── */
.table { color: var(--dk-text-sub) !important; }
.table th, .table td {
    border-color: var(--dk-border) !important;
    background-color: var(--dk-surface) !important;
    color: var(--dk-text-sub) !important;
}
.table thead th { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }
.table-striped tbody tr:nth-of-type(odd) td { background-color: var(--dk-bg) !important; }

/* ── 14. ALERTS ── */
.alert {
    border-color: var(--dk-border) !important;
    background-color: var(--dk-surface) !important;
    color: var(--dk-text-sub) !important;
}

/* ── 15. BADGES & TAGS ── */
.tag, .idd-tag, .label, .badge-soft, span.badge, .image-tag, .collection__tag {
    background-color: var(--dk-hover) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
    transition: var(--dk-trans) !important;
}
.tag:hover, .idd-tag:hover, .image-tag:hover, .collection__tag:hover {
    background-color: #333333 !important;
    color: var(--dk-text) !important;
}

/* ── 16. BUTTONS & BASE BACKGROUNDS — Black text on base brand background ── */
.btn--base, .base-btn, .btn-base, .bg--base, .badge--base, .upload--button,
.bls-btn, .btn-primary, button[class*="btn--base"], a[class*="btn--base"],
[style*="hsl(var(--base))"], [style*="var(--base)"],
.ags-tag-chip:hover, .b3-cat-pill.active {
    color: #000000 !important;
}

.btn--base *, .base-btn *, .btn-base *, .bg--base *, .badge--base *, .upload--button *,
.bls-btn *, .btn-primary *, button[class*="btn--base"] *, a[class*="btn--base"] * {
    color: #000000 !important;
    stroke: #000000 !important;
}

.btn--base:hover, .base-btn:hover, .btn-base:hover, .upload--button:hover,
.bls-btn:hover, .btn-primary:hover {
    color: #000000 !important;
}

.btn--base:hover *, .base-btn:hover *, .btn-base:hover *, .bls-btn:hover * {
    color: #000000 !important;
    stroke: #000000 !important;
}

.btn-outline {
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
    background: transparent !important;
    transition: var(--dk-trans) !important;
}
.btn-outline:hover { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }
a.btn[href*="login"], a[href*="login"].btn {
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
    background: transparent !important;
}
a.btn[href*="login"]:hover, a[href*="login"].btn:hover {
    background-color: var(--dk-hover) !important;
    color: var(--dk-text) !important;
}

/* ── 17. AUTH / LOGIN PAGES ── */
.login-form, .account-wrapper, .user-form, .bls-right {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.bls-title { color: var(--dk-text) !important; }
.bls-sub { color: var(--dk-text-muted) !important; }
.bls-lbl { color: var(--dk-text-sub) !important; }
.bls-ico { color: var(--dk-text-muted) !important; }
.bls-x { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }
.bls-x:hover { background-color: #3e3e3e !important; }
.bls-forgot, .bls-sa, .bls-switch { color: var(--dk-text-muted) !important; }
.bls-chk-lbl span { color: var(--dk-text-sub) !important; }
.soc-btn, .soc-google-face { background-color: #262626 !important; border: 1px solid rgba(255,255,255,0.16) !important; color: #ffffff !important; font-weight: 500 !important; }
.soc-btn:hover, .soc-google-face:hover { background-color: #333333 !important; color: #ffffff !important; border-color: rgba(255,255,255,0.3) !important; }
.soc-divider::before, .soc-divider::after { background-color: var(--dk-border) !important; }
.bls-switch a, .bls-forgot { color: hsl(var(--base)) !important; }

/* Autofill Fix for Modal */
.bls-inp:-webkit-autofill,
.bls-inp:-webkit-autofill:hover, 
.bls-inp:-webkit-autofill:focus, 
.bls-inp:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1a1a1a inset !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ── 18. PROFILE / MEMBER ── */
.member-nav, .member-profile { background-color: var(--dk-bg) !important; color: var(--dk-text) !important; }
.user-gallery { background-color: transparent !important; color: var(--dk-text) !important; }
.profile-bar { background-color: var(--dk-surface) !important; border-bottom: 1px solid var(--dk-border) !important; }
.profile-bar__name { color: var(--dk-text) !important; }
.profile-bar__username, .profile-bar__bio, .profile-bar__since,
.profile-bar__stat-label, .profile-bar__stat-num { color: var(--dk-text-muted) !important; }
.contributor__name { color: var(--dk-text) !important; }
.contributor__contributons { color: var(--dk-text-muted) !important; }

/* ── 19. DASHBOARD ── */
.dashboard-menu, .sidebar-menu, .user-sidebar {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.dashboard-menu .nav-item a, .sidebar-menu .nav-item a {
    color: var(--dk-text-sub) !important;
    border-bottom: 1px solid var(--dk-border) !important;
    transition: var(--dk-trans) !important;
}
.dashboard-menu .nav-item a:hover, .dashboard-menu .nav-item.active a,
.sidebar-menu .nav-item a:hover, .sidebar-menu .nav-item.active a {
    background-color: var(--dk-hover) !important;
    color: var(--dk-text) !important;
    border-left: 3px solid hsl(var(--base)) !important;
}

/* ── 20. CTA PANELS ── */
.cta__area, .cta-area, .fb-join--section, .fb-join,
.info-section, .stats-section, .inner-section {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
}

/* ── 21. PRICING ── */
.price-section { background-color: var(--dk-bg) !important; }
.price-card {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
    transition: var(--dk-trans) !important;
}
.price-card:hover { background-color: var(--dk-hover) !important; border-color: #3E3E3E !important; }
.price-card__head { border-bottom: 1px solid var(--dk-border) !important; }
.price-card__price { color: var(--dk-text) !important; }
.price-card__time, .price-card__subtitle { color: var(--dk-text-muted) !important; }
.price-card__title { color: var(--dk-text) !important; }
.price-card__body { color: var(--dk-text-sub) !important; }
.price-card__footer .base-btn { color: #000000 !important; }
.login-section { background-color: var(--dk-bg) !important; }
.list--check li::before { color: hsl(var(--base)) !important; }
.form-check-label { color: var(--dk-text-sub) !important; }
.form-check-input { background-color: var(--dk-hover) !important; border-color: var(--dk-border) !important; }

/* ── 22. FOOTER ── */
.footer-top, footer, .footer {
    background-color: #09090b !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.footer-top__title, .footer-title { color: var(--dk-text) !important; }
.footer-top__link, .footer-link, footer a { color: var(--dk-text-muted) !important; transition: var(--dk-trans) !important; }
.footer-top__link:hover, footer a:hover { color: var(--dk-text-sub) !important; }

/* ── 23. SELECT2 ── */
.select2-dropdown { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; }
.select2-results__option { background-color: var(--dk-surface) !important; color: var(--dk-text-sub) !important; }
.select2-results__option--highlighted, .select2-results__option--selected {
    background-color: var(--dk-hover) !important; color: var(--dk-text) !important;
}
.select2-container--default .select2-selection--single {
    background-color: var(--dk-hover) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dk-text) !important; }

/* ── 24. SOCIAL BUTTONS ── */
.soc-btn, .soc-google-face {
    background-color: #262626 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: var(--dk-trans) !important;
}
.soc-btn:hover, .soc-google-face:hover { background-color: #333333 !important; color: #ffffff !important; border-color: rgba(255,255,255,0.3) !important; }

/* ── 25. FILE UPLOAD ── */
.image-upload-wrapper, .upload-box, .file-upload-wrapper, .dropzone {
    background-color: var(--dk-surface) !important;
    border: 2px dashed var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
    transition: var(--dk-trans) !important;
}
.dropzone:hover, .image-upload-wrapper:hover { border-color: #4A4A4A !important; background-color: var(--dk-hover) !important; }

/* ── 26. UTILITY OVERRIDES ── */
.bg-white, .bg-light, .bg--white, .bg--light {
    background-color: var(--dk-surface) !important; color: var(--dk-text) !important;
}

/* ── 27. AUTH WRAPPERS ── */
.login-wrapper, .auth-wrapper, .auth-form-wrapper,
.right-half, .left-half, .author-card,
.member-profile-details, .member-header, .nav-tabs {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.auth-title, .soc-divider, .about-card__title { color: var(--dk-text) !important; }

/* ── 28. PRELOADER ── */
.preloader { background-color: var(--dk-bg) !important; }

/* ── 29. BREADCRUMB ── */
.breadcrumb-item a { color: var(--dk-text-muted) !important; }
.breadcrumb-item.active { color: var(--dk-text-sub) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--dk-text-muted) !important; }

/* ── 30. SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--dk-bg); }
::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #4A4A4A; }

/* ── Selection ── */
::selection { background: rgba(255,255,255,0.1); color: #ffffff; }

/* ── Back to top ── */
.back-to-top {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
    transition: var(--dk-trans) !important;
}
.back-to-top:hover { background-color: var(--dk-hover) !important; color: var(--dk-text) !important; }

/* ── 31. IMAGE DETAILS PAGE (IDD) ── */
.idd-img-panel, .idd-card {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
.idd-img-box {
    background-color: #111 !important;
}
.idd-img-meta, .idd-action-bar, .idd-keywords {
    border-color: var(--dk-border) !important;
}
.idd-card-head, .idd-detail-row, .idd-software-row, .idd-download-row {
    border-bottom-color: var(--dk-border) !important;
}
.idd-img-title, .idd-detail-val, .idd-software-name, .idd-download-res, 
.idd-designer-name, .idd-related-title, .idd-card-head, .idd-price-amount {
    color: var(--dk-text) !important;
}
.idd-img-description, .idd-action-btn, .idd-detail-key, .idd-price-label, 
.idd-designer-sub, .idd-share-label, .idd-donation-text, .idd-likes-note {
    color: var(--dk-text-sub) !important;
}
.idd-action-btn, .idd-tag, .idd-profile-btn, .idd-follow-btn, .idd-social-btn, .idd-like-btn-sm {
    background-color: transparent !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
}
.idd-action-btn:hover, .idd-tag:hover, .idd-profile-btn:hover, 
.idd-follow-btn:hover, .idd-social-btn:hover, .idd-like-btn-sm:hover {
    background-color: var(--dk-hover) !important;
    border-color: #3E3E3E !important;
    color: var(--dk-text) !important;
}
.idd-edit-badge {
    background-color: rgba(59, 91, 219, 0.15) !important;
    border-color: rgba(59, 91, 219, 0.3) !important;
}
.idd-badge-free {
    background-color: rgba(5, 150, 105, 0.15) !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
}
.idd-badge-premium {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
.idd-designer-avatar {
    background-color: var(--dk-bg) !important;
    border-color: var(--dk-border) !important;
}
.idd-donate-btn {
    background-color: rgba(217, 119, 6, 0.15) !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    color: #fcd34d !important;
}
.idd-donate-btn:hover {
    background-color: rgba(217, 119, 6, 0.25) !important;
    color: #fde68a !important;
}

/* ── 32. DASHBOARD SPECIFIC LAYERED COLOR STYLES ── */

.dashboard-section {
    background-color: #0d0d0d !important;
}

.dashboard-section .card, 
.dashboard-section .custom--card, 
.dashboard-section .form-card, 
.dashboard-section .photo-upload-area, 
.dashboard-section .file-upload, 
.dashboard-section .image-upload-wrap,
.dashboard-section .dashboard-menu, 
.dashboard-section .sidebar-menu, 
.dashboard-section .user-sidebar {
    background-color: #1a1a1a !important;
    /* border: 1px solid rgba(255,255,255,0.12) !important; */
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.dashboard-section .card-body {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Dashboard Form Controls & Inputs */
.dashboard-section .form-control, 
.dashboard-section .form--control, 
.dashboard-section .form-select, 
.dashboard-section input[type="text"], 
.dashboard-section input[type="email"], 
.dashboard-section input[type="password"], 
.dashboard-section input[type="number"], 
.dashboard-section input[type="file"], 
.dashboard-section textarea, 
.dashboard-section select, 
.dashboard-section .bls-inp {
    background-color: #262626 !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.dashboard-section .form-control:focus, 
.dashboard-section .form--control:focus, 
.dashboard-section .form-select:focus, 
.dashboard-section textarea:focus, 
.dashboard-section select:focus {
    background-color: #2a2a2a !important;
    border-color: hsl(var(--base)) !important;
    color: #ffffff !important;
}

.dashboard-section .form-control::placeholder, 
.dashboard-section .form--control::placeholder, 
.dashboard-section input::placeholder, 
.dashboard-section textarea::placeholder {
    color: rgba(255,255,255,0.45) !important;
}

.dashboard-section .input-group-text {
    background-color: #2b2b2b !important;
    border-color: rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
}

/* Select2 Inputs & Dropdowns */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #262626 !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    min-height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: 40px !important;
}
.select2-dropdown {
    background-color: #262626 !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
}
.select2-results__option {
    background-color: #262626 !important;
    color: rgba(255,255,255,0.85) !important;
}
.select2-results__option--highlighted,
.select2-results__option--selected {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Dashboard Sidebar Specific Fix */
.dashboard-menu__link { 
    background-color: transparent !important;
}
.dashboard-menu__link.active {
    background-color: var(--dk-hover) !important;
}

/* Base Headings & Texts inside Cards */
.card-header, .card-footer, .modal-header, .modal-footer, 
.custom--card .card-header, .support-card .card-header {
    background-color: #222222 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

.card-title, .widget-title, .title, .sub-title, .section-title, 
.auth-title, .login-title, .register-title, .form-label, h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

.card-text, .widget-desc, .desc, .text, .text-muted, .text-secondary, 
.sub-text, p {
    color: rgba(255,255,255,0.8) !important;
}

/* Tables & Lists */
.table, .custom-table, .transaction-table, .table-responsive table {
    color: var(--dk-text-sub) !important;
    border-color: var(--dk-border) !important;
    background-color: transparent !important;
}

.table thead th, .custom-table thead th {
    background-color: var(--dk-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

.table tbody tr, .custom-table tbody tr {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

.table tbody tr:hover, .custom-table tbody tr:hover {
    background-color: var(--dk-hover) !important;
}

.list-group, .list-group-item {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
}

/* Auth Pages & Form specific */
.account-inner, .account-form, .login-area, .register-area, .contact-form, .contact-area {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
}

.input-group-text {
    background-color: var(--dk-hover) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-sub) !important;
}

.form-group label {
    color: var(--dk-text-sub) !important;
}

/* Tickets & Chat */
.message__chatbox, .message__chat {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
.message__chatbox__header {
    background-color: var(--dk-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.message__reply {
    background-color: var(--dk-hover) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

/* Misc UI fix */
hr {
    border-color: var(--dk-border) !important;
}
.divider {
    background-color: var(--dk-border) !important;
}
.text-dark {
    color: var(--dk-text) !important;
}
.bg-transparent {
    background-color: transparent !important;
}

/* Swal2 Fixes (if using SweetAlert) */
.swal2-popup {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
}
.swal2-title {
    color: var(--dk-text) !important;
}
.swal2-html-container {
    color: var(--dk-text-sub) !important;
}

/* ── 33. USER DASHBOARD ── */
.dashboard-sidebar { 
    background-color: var(--dk-surface) !important; 
    border: 1px solid var(--dk-border) !important; 
    border-radius: 12px !important;
    overflow: hidden;
}
.dashboard-menu__link { 
    color: var(--dk-text-sub) !important; 
    border-radius: 8px !important; 
    margin: 4px 12px !important; 
    padding: 10px 15px !important;
    transition: var(--dk-trans) !important;
}
.dashboard-menu__link:hover, .dashboard-menu__link.active { 
    background-color: var(--dk-hover) !important; 
    color: var(--dk-text) !important; 
}
.dashboard-menu__icon { color: var(--dk-text-muted) !important; font-size: 1.1rem !important; }
.dashboard-menu__link.active .dashboard-menu__icon { color: hsl(var(--base)) !important; }

.dashboard-menu__head { 
    background-color: var(--dk-bg) !important; 
    border-bottom: 1px solid var(--dk-border) !important; 
    padding: 15px 20px !important;
}
.dashboard-menu__head-text { color: var(--dk-text) !important; font-weight: 600 !important; }

.dashboard-widget {
    background-color: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    transition: var(--dk-trans) !important;
    position: relative;
    overflow: hidden;
}
.dashboard-widget:hover { 
    transform: translateY(-3px); 
    box-shadow: var(--shadow-md) !important; 
    border-color: hsl(var(--primary), 0.3) !important; 
}
.dashboard-widget__icon { 
    background-color: var(--dk-hover) !important; 
    color: hsl(var(--base)) !important; 
    border-radius: 10px !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
}
.dashboard-widget__title { color: var(--dk-text-muted) !important; font-size: 0.85rem !important; font-weight: 500 !important; }
.dashboard-widget__amount { color: var(--dk-text) !important; font-weight: 700 !important; margin-top: 5px !important; }
.dashboard-widget__overlay-icon { 
    position: absolute !important;
    right: -10px !important;
    bottom: -10px !important;
    font-size: 5rem !important;
    color: var(--dk-text) !important; 
    opacity: 0.03 !important; 
}

.profile__user { 
    border: 4px solid var(--dk-surface) !important; 
    background-color: var(--dk-surface) !important; 
    border-radius: 50% !important;
    overflow: hidden;
}
.profile__img { border: none !important; }
.profile__bg { filter: brightness(0.7); }

.accordion-item { background-color: transparent !important; border: none !important; }
.accordion-button { 
    background-color: transparent !important; 
    color: var(--dk-text-sub) !important; 
    box-shadow: none !important; 
    padding: 10px 15px !important;
    margin: 4px 12px !important;
    border-radius: 8px !important;
}
.accordion-button:not(.collapsed) { 
    background-color: rgba(255,255,255,0.06) !important; 
    color: #ffffff !important; 
}
.accordion-button::after { filter: invert(1) grayscale(1) brightness(2); }

.accordion-body {
    padding: 4px 10px 10px 10px !important;
    background: transparent !important;
}

.dashboard-menu__inner { 
    list-style: none !important;
    padding: 0 0 0 16px !important; 
    margin: 4px 0 4px 14px !important; 
    border-left: 2px solid rgba(255, 255, 255, 0.14) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.dashboard-menu__inner > li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.dashboard-menu__inner-link { 
    color: rgba(255, 255, 255, 0.75) !important; 
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
    border: none !important;
}

.dashboard-menu__inner-link:hover { 
    color: #ffffff !important; 
    background: rgba(255, 255, 255, 0.08) !important;
    padding-left: 16px !important;
}

.dashboard-menu__inner-link.active { 
    color: hsl(var(--base, 78 100% 45%)) !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ApexCharts Text Color */
.apexcharts-canvas text { fill: var(--dk-text-muted) !important; }
.apexcharts-canvas .apexcharts-xaxis-label, .apexcharts-canvas .apexcharts-yaxis-label { fill: var(--dk-text-muted) !important; }
.apexcharts-canvas .apexcharts-gridline { stroke: var(--dk-border) !important; }
.apexcharts-tooltip.apexcharts-theme-light {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.apexcharts-tooltip-title {
    background: var(--dk-hover) !important;
    border-bottom: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* ── 34. UPLOAD PAGE FIXES ── */
.photo-upload-area, .file-upload { background-color: var(--dk-surface) !important; }
.image-upload-wrap { border-color: var(--dk-border) !important; background-color: var(--dk-bg) !important; }
.image-upload-wrap:hover { background-color: var(--dk-hover) !important; }
.drag-text .title { color: var(--dk-text-muted) !important; text-shadow: none !important; }

/* Select2 Multiple (Colors, Extensions, Tags) */
.select2-container--default .select2-selection--multiple {
    background-color: var(--dk-bg) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 6px !important;
    min-height: 45px !important;
    padding: 2px 5px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: hsl(var(--primary)) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--dk-hover) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    margin-top: 5px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--dk-text-muted) !important;
    border-right: 1px solid var(--dk-border) !important;
    margin-right: 5px !important;
    padding: 0 5px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: rgba(255, 77, 77, 0.1) !important;
    color: #ff4d4d !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--dk-text) !important;
    margin-top: 7px !important;
}

/* Pricing & Extra Elements */
.extraPriceElement { border-bottom: 1px solid var(--dk-border) !important; }
.pricing-set-number { color: hsl(var(--base)) !important; font-weight: 700 !important; }
.maximum-price { color: var(--dk-text-muted) !important; }

/* ── 35. WITHDRAW & DEPOSIT PAYMENT METHODS FIX ── */
.gateway-card {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 20px !important;
}

.payment-card-title {
    background-color: #222222 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

.payment-system-list {
    background-color: #1f1f1f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

.payment-item {
    background-color: #262626 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 4px solid transparent !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    transition: all 0.18s ease !important;
}

.payment-item:first-child {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.payment-item:hover {
    background-color: #2e2e2e !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.payment-item:has(.payment-item__radio:checked) {
    background-color: #2e2e2e !important;
    border-color: hsl(var(--base, 78 100% 45%)) !important;
    border-left: 4px solid hsl(var(--base, 78 100% 45%)) !important;
    border-radius: 10px !important;
}

.payment-item__name {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

.payment-item__check {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
    border: 2px solid hsl(var(--base, 78 100% 45%)) !important;
    background-color: hsl(var(--base, 78 100% 45%)) !important;
}

.payment-item__thumb img {
    border-radius: 6px !important;
}

.deposit-info .text, .deposit-info__title .text, .info-text .text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.9rem !important;
}

.gateway-limit, .processing-fee, .final-amount, .in-currency, .gateway-currency {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.deposit-info__input-group {
    background-color: #262626 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.deposit-info__input-group-text {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 0 14px !important;
}

.deposit-info__input-group .amount {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-align: right !important;
}

.deposit-info__input-group .amount::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.withdraw-form hr, .deposit-info hr {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── REMOVE ALL BOX SHADOWS GLOBALLY ── */
.card, .custom--card, .form-card, .dashboard-menu, .sidebar-menu, .user-sidebar,
.hdr, .hdr.scrolled, .hdr-drawer, .hdr-user-drop .primary-menu__sub,
#b3-float-card, .bls-content, .bls-btn, .soc-btn, .btn--base, .base-btn,
.d-widget, .widget, .dropdown-menu, .modal-content, .gateway-card, .payment-system-list {
    box-shadow: none !important;
}