/**
 * Ha55a Exchange — Dark mode
 * Colors only on the REAL orange_oasis UI. Layout/spacing untouched.
 */
html { color-scheme: light; }

[data-theme="dark"] {
    color-scheme: dark;

    --heading: 222 25% 92%;
    --body: 220 12% 72%;
    --border: 220 12% 26%;

    --light-h: 222;
    --light-s: 16%;
    --light-l: 11%;
    --light: var(--light-h) var(--light-s) var(--light-l);
    --light-50: var(--light-h) var(--light-s) calc(var(--light-l) + 2%);
    --light-100: var(--light-h) var(--light-s) calc(var(--light-l) + 4%);
    --light-200: var(--light-h) var(--light-s) calc(var(--light-l) + 6%);
    --light-300: var(--light-h) var(--light-s) calc(var(--light-l) + 8%);
    --light-400: var(--light-h) var(--light-s) calc(var(--light-l) + 10%);
    --light-600: var(--light-h) var(--light-s) calc(var(--light-l) + 12%);
    --light-700: var(--light-h) var(--light-s) calc(var(--light-l) + 16%);
    --light-800: var(--light-h) var(--light-s) calc(var(--light-l) + 20%);
    --light-900: var(--light-h) var(--light-s) calc(var(--light-l) + 24%);

    --accent-h: 230;
    --accent-s: 28%;
    --accent-l: 14%;

    --dark: 222 25% 92%;
    --secondary: 220 10% 58%;

    --dm-page: #0f1218;
    --dm-card: #171b24;
    --dm-input: #1e2430;
    --dm-line: #2a3140;
    --dm-text: #e8ebf2;
    --dm-muted: #97a0b0;
}

[data-theme="dark"] body {
    background-color: var(--dm-page) !important;
    color: hsl(var(--body));
}

[data-theme="dark"] .preloader {
    background: var(--dm-page);
}

.theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon { display: none !important; }
.theme-toggle .icon-moon,
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block !important; }

/* Toggle in header — visible next to login buttons */
.theme-toggle {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #ff6b31;
    background: #fff;
    color: #ff6b31;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(255, 107, 49, 0.25);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    position: relative;
    z-index: 5;
}
.theme-toggle:hover {
    background: #ff6b31;
    color: #fff;
    transform: translateY(-1px);
}
.theme-toggle i { font-size: 18px; line-height: 1; }
[data-theme="dark"] .theme-toggle {
    background: #1e2430;
    border-color: #ff6b31;
    color: #ffb080;
}
[data-theme="dark"] .theme-toggle:hover {
    background: #ff6b31;
    color: #fff;
}

/* ===== Header (live site) ===== */
[data-theme="dark"] .header {
    background: var(--dm-card) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] ul.menu > li > a { color: var(--dm-text) !important; }
[data-theme="dark"] ul.menu > li > a:hover,
[data-theme="dark"] ul.menu > li > a.active {
    color: #ff6b31 !important;
    background: rgba(255, 107, 49, 0.08) !important;
}
[data-theme="dark"] .btn-logout,
[data-theme="dark"] .mobile-auth .m-logout {
    border-color: var(--dm-line) !important;
    color: var(--dm-muted) !important;
}
@media (max-width: 991px) {
    [data-theme="dark"] ul.menu {
        background: var(--dm-card) !important;
    }
    [data-theme="dark"] .mobile-auth {
        border-top-color: var(--dm-line) !important;
    }
}

/* ===== Auth navbar ===== */
[data-theme="dark"] .user-navbar {
    background: var(--dm-card) !important;
    border-bottom-color: var(--dm-line) !important;
}
[data-theme="dark"] .user-navbar .nav-links > li > a,
[data-theme="dark"] .user-navbar .dropdown-menu li a,
[data-theme="dark"] .user-navbar .mobile-menu .m-item {
    color: var(--dm-text) !important;
}
[data-theme="dark"] .user-navbar .dropdown-menu,
[data-theme="dark"] .user-navbar .mobile-menu {
    background: var(--dm-card) !important;
    border-color: var(--dm-line) !important;
}
[data-theme="dark"] .user-navbar .dropdown-menu .divider,
[data-theme="dark"] .user-navbar .mobile-menu .m-divider {
    background: var(--dm-line) !important;
}
[data-theme="dark"] .user-navbar .nav-user .user-info .name,
[data-theme="dark"] .user-navbar .mobile-toggle { color: var(--dm-text) !important; }
[data-theme="dark"] .user-navbar .nav-links > li > a:hover,
[data-theme="dark"] .user-navbar .nav-links > li > a.active,
[data-theme="dark"] .user-navbar .dropdown-menu li a:hover,
[data-theme="dark"] .user-navbar .mobile-menu .m-item:hover,
[data-theme="dark"] .user-navbar .mobile-menu .m-item.active {
    color: #ff6b31 !important;
    background: rgba(255, 107, 49, 0.08) !important;
}

/* ===== Home banner + exchange widget (real classes) ===== */
[data-theme="dark"] .banner-section,
[data-theme="dark"] .bg--light,
[data-theme="dark"] .full-display {
    background-color: var(--dm-page) !important;
}
[data-theme="dark"] .banner-title,
[data-theme="dark"] .banner-section h2,
[data-theme="dark"] .banner-section h6,
[data-theme="dark"] .custom-widget h6,
[data-theme="dark"] .title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .custom-widget {
    background-color: var(--dm-card) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35) !important;
    color: var(--dm-text);
}

/* Home form inputs are #ECF1F7 in light — map to dark input fill */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form--control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group > .form-control,
[data-theme="dark"] .input-group > .form-select,
[data-theme="dark"] .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}
[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--dm-card) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-results__option--highlighted {
    background: rgba(255, 107, 49, 0.2) !important;
    color: var(--dm-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--dm-input) !important;
}
[data-theme="dark"] .form-label,
[data-theme="dark"] label,
[data-theme="dark"] .rate--txt {
    color: var(--dm-muted) !important;
}

/* Cards / offers / sections used on homepage */
[data-theme="dark"] .card,
[data-theme="dark"] .custom--card,
[data-theme="dark"] .offerHomeCont,
[data-theme="dark"] .affiliation,
[data-theme="dark"] .offerContItm,
[data-theme="dark"] .testimonial-item,
[data-theme="dark"] .blog-item,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .cookies-card {
    background: var(--dm-card) !important;
    border-color: var(--dm-line) !important;
    color: var(--dm-text);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background: var(--dm-input) !important;
    border-color: var(--dm-line) !important;
    color: var(--dm-text);
}

/* Tables (latest exchanges etc.) */
[data-theme="dark"] .table {
    background-color: var(--dm-card) !important;
    color: var(--dm-text);
}
[data-theme="dark"] .table thead tr th {
    background: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}
[data-theme="dark"] .table tbody tr td {
    border-color: var(--dm-line) !important;
    color: var(--dm-text) !important;
}
[data-theme="dark"] .table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}
[data-theme="dark"] .table tbody tr:nth-child(odd) {
    background-color: transparent !important;
}
[data-theme="dark"] .custom-widget__inner .table thead {
    background: var(--dm-input) !important;
}

/* User area cards (same structure, color only) */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .exchange-table,
[data-theme="dark"] .exchanges-card,
[data-theme="dark"] .details-header,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .auth-wrap {
    background: var(--dm-card) !important;
    border-color: var(--dm-line) !important;
    color: var(--dm-text);
}
[data-theme="dark"] .auth-wrap { background: var(--dm-page) !important; }
[data-theme="dark"] .stat-card__value,
[data-theme="dark"] .section-header h5,
[data-theme="dark"] .exchanges-header h5,
[data-theme="dark"] .auth-title,
[data-theme="dark"] .exchange-table tbody td,
[data-theme="dark"] .exchanges-table tbody td {
    color: var(--dm-text) !important;
}
[data-theme="dark"] .stat-card__label,
[data-theme="dark"] .auth-sub,
[data-theme="dark"] .auth-footer { color: var(--dm-muted) !important; }
[data-theme="dark"] .exchange-table thead tr,
[data-theme="dark"] .exchanges-table thead tr {
    background: var(--dm-input) !important;
}
[data-theme="dark"] .exchange-table thead th,
[data-theme="dark"] .exchanges-table thead th,
[data-theme="dark"] .exchange-table tbody td,
[data-theme="dark"] .exchanges-table tbody td {
    border-color: var(--dm-line) !important;
    color: var(--dm-text) !important;
}
[data-theme="dark"] .filter-tab {
    background: var(--dm-card) !important;
    border-color: var(--dm-line) !important;
    color: var(--dm-muted) !important;
}
[data-theme="dark"] .filter-tab.active {
    background: #ff6b31 !important;
    border-color: #ff6b31 !important;
    color: #fff !important;
}
[data-theme="dark"] .kyc-alert.danger { background: rgba(239, 68, 68, 0.12) !important; }
[data-theme="dark"] .kyc-alert.warning { background: rgba(245, 158, 11, 0.12) !important; }
[data-theme="dark"] .exchange-id {
    background: var(--dm-input) !important;
    color: var(--dm-muted) !important;
}

/* Chat */
[data-theme="dark"] #chat-box,
[data-theme="dark"] #chat-input-area { background: var(--dm-card) !important; border-color: var(--dm-line) !important; }
[data-theme="dark"] #chat-messages { background: var(--dm-page) !important; }
[data-theme="dark"] .chat-msg.bot .chat-bubble {
    background: var(--dm-input) !important;
    border-color: var(--dm-line) !important;
    color: var(--dm-text) !important;
}
[data-theme="dark"] #chat-input,
[data-theme="dark"] #chat-identifier {
    background: var(--dm-input) !important;
    border-color: var(--dm-line) !important;
    color: var(--dm-text) !important;
}
[data-theme="dark"] #chat-identifier-bar {
    background: rgba(255, 107, 49, 0.12) !important;
    border-bottom-color: rgba(255, 107, 49, 0.28) !important;
}

/* Brand buttons unchanged */
[data-theme="dark"] .btn--base,
[data-theme="dark"] .btn-register,
[data-theme="dark"] .btn-dashboard,
[data-theme="dark"] .btn--brand,
[data-theme="dark"] .btn-download,
[data-theme="dark"] .user-navbar .btn-dashboard {
    color: #fff !important;
}

/*
 * Hero phones use z-index: -1 in home.blade.php.
 * With an opaque dark body background they paint behind it and "disappear".
 * Isolate the hero so decorative layers stay visible above the page bg.
 */
[data-theme="dark"] .banner-section {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
}
[data-theme="dark"] .rs_contain__image {
    isolation: isolate;
    position: relative;
    z-index: 1;
    background: transparent !important;
    /* keep overflow as designed, but don't clip the download CTA */
    overflow: visible !important;
    min-height: 100vh;
    height: auto !important;
}
[data-theme="dark"] .rs_mobile__img,
[data-theme="dark"] .rs_mobile__img_2 {
    position: relative;
    z-index: 2 !important;
}
[data-theme="dark"] .shap-1,
[data-theme="dark"] .shap-2,
[data-theme="dark"] .shap-3,
[data-theme="dark"] .shap-4,
[data-theme="dark"] .shap-5 {
    z-index: 1 !important;
}
[data-theme="dark"] .div-btn-download {
    z-index: 5 !important;
    position: relative !important;
    bottom: auto !important;
    margin: 16px auto 24px;
}

/* Form wallet logos strip (brand-slider) */
[data-theme="dark"] .brand-section .brand-item {
    background: #fff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

/* Sister projects */
[data-theme="dark"] .sister-projects {
    background: transparent !important;
}
[data-theme="dark"] .sister-projects__title {
    color: hsl(var(--heading)) !important;
}
[data-theme="dark"] .sister-projects__desc {
    color: hsl(var(--body)) !important;
}
[data-theme="dark"] .sister-card {
    background: #171b24 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .sister-card:hover {
    border-color: rgba(255, 107, 49, 0.45) !important;
}
[data-theme="dark"] .sister-card__name {
    color: #f3f5f8 !important;
}
[data-theme="dark"] .sister-card__text,
[data-theme="dark"] .sister-card__domain {
    color: rgba(226, 232, 240, 0.72) !important;
}
[data-theme="dark"] .sister-card--pro .sister-card__points li {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .sister-card__logo {
    background: #fff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
[data-theme="dark"] .btn-login {
    border-color: #ff6b31 !important;
    color: #ff6b31 !important;
    background: transparent !important;
}
[data-theme="dark"] .btn-login:hover {
    background: #ff6b31 !important;
    color: #fff !important;
}