/* Theme 4: charcoal surfaces complement the white and gold brand mark. */
:root {
    color-scheme: dark;
    --default-bg: #101216;
    --separate-bg: #1b1e24;
    --clr-secondary: #15171c;
    --secondary-color: #15171c;
    --clr-main: #f5bc45;
    --gradient-bg: #f5bc45;
    --gradient-bg2: #e5a52b;
    --p-color: #b9bec9;
    --dark-text: #f3f4f7;
    --dark-muted: #b9bec9;
    --dark-border: #363c47;
    --dark-raised: #252a33;
}

html, body { background-color: var(--default-bg); color: var(--dark-text); }
body h1, body h2, body h3, body h4, body h5, body h6,
body .text-dark, body .text-black, body .site-color2 { color: var(--dark-text) !important; }
body h1 > a, body h2 > a, body h3 > a,
body h4 > a, body h5 > a, body h6 > a { color: inherit; }
body .text-muted, body .sp_text_muted { color: var(--dark-muted) !important; }
body .bg-white, body .bg-light { background-color: var(--separate-bg) !important; }
body .border, body .border-bottom, body .border-top { border-color: var(--dark-border) !important; }

/* Navigation and logo surfaces, including the fixed mobile account header. */
body .header, body .header.header-fixed .header-bottom,
body #header.header-inner-pages, body .mobile-header,
body .d-sidebar, body .footer-section {
    background: var(--clr-secondary) !important;
    color: var(--dark-text);
}
body .header .sp_main_menu li .sub-menu,
body .dropdown-menu, body .mobile-bottom-menu {
    background: var(--separate-bg);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}
body .header .sp_main_menu li a, body .dropdown-item,
body .d-sidebar-menu li a, body .mobile-bottom-menu li a {
    color: var(--dark-text) !important;
}
body .d-sidebar-menu li.active > a, body .d-sidebar-menu li a:hover,
body .dropdown-item:hover, body .dropdown-item:focus {
    background: var(--dark-raised);
    color: var(--clr-main) !important;
}
body .header .sp_main_menu li a:hover,
body .mobile-bottom-menu li a.active,
body .mobile-bottom-menu li a.active i,
body .mobile-bottom-menu li a.active .menu-text { color: var(--clr-main) !important; }

/* Shared content, account and form components. */
body .dashboard-body-part, body .mobile-view-container { background: var(--default-bg) !important; }
body .card, body .site-card, body .d-card, body .d-box-three,
body .account-wrapper, body .accordion-item, body .accordion-button,
body .modal-content, body .list-group-item, body .payment-box,
body .summary-card, body .active-wallet-card, body .wallet-card,
body .asset-card, body .wallet-summary-card, body .crypto-mover-card,
body .custom-column, body .custom-btn, body .cta-p2p-button,
body .cta-gift-card-button, body .swal2-popup {
    background-color: var(--separate-bg);
    color: var(--dark-text);
    border-color: var(--dark-border);
}
body .card-header, body .card-footer, body .site-card .card-header,
body .modal-header, body .modal-footer {
    background-color: var(--separate-bg);
    color: var(--dark-text);
    border-color: var(--dark-border);
}
body .form-control, body .form-control.form-control-sm, body .form-select,
body textarea, body select, body option, body .input-group-text,
body .selectric, body .selectric-items {
    background-color: var(--clr-secondary);
    color: var(--dark-text);
    border-color: var(--dark-border);
}
body .form-control:focus, body .form-select:focus,
body textarea:focus, body select:focus {
    background-color: var(--clr-secondary);
    color: var(--dark-text);
    border-color: var(--clr-main);
    box-shadow: 0 0 0 3px rgba(245, 188, 69, .18);
}
body .form-control::placeholder, body textarea::placeholder,
body .selectric .label { color: var(--dark-muted); opacity: 1; }
body .form-control:disabled, body .form-control[readonly],
body select:hover, body .selectric-items li:hover,
body .selectric-items li.selected { background-color: var(--dark-raised); color: var(--dark-text); }
body .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
body a:focus-visible, body button:focus-visible, body input:focus-visible,
body select:focus-visible, body textarea:focus-visible {
    outline: 2px solid var(--clr-main);
    outline-offset: 3px;
}
body .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #20242c;
    --bs-table-striped-color: var(--dark-text);
    --bs-table-active-bg: #292f39;
    --bs-table-active-color: var(--dark-text);
    --bs-table-hover-bg: #292f39;
    --bs-table-hover-color: var(--dark-text);
    color: var(--dark-text);
    border-color: var(--dark-border);
}
body .site-table thead, body .pagination .page-item .page-link {
    background-color: var(--dark-raised);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

/* Dashboard styles also appear in page-local style blocks. */
body .summary-label, body .portfolio-label, body .crypto-ticker .crypto-code,
body .eye-toggle, body .wallet-summary-card small { color: var(--dark-muted); }
body .summary-amount, body .summary-value, body .portfolio-value,
body .action-text, body .section-title, body .crypto-name, body .crypto-price,
body .active-wallet-card .amount-text, body .wallet-card .wallet-name,
body .wallet-card .wallet-balance, body .wallet-card .balance-amount,
body .asset-card .asset-currency, body .asset-card .asset-balance,
body .crypto-ticker .crypto-symbol, body .crypto-ticker .crypto-price,
body .summary-icon-wrapper i { color: var(--dark-text); }
body .crypto-ticker, body .action-circle, body .summary-icon-wrapper,
body .crypto-icon, body .tab-btn { background: var(--dark-raised); color: var(--dark-text); }
body .summary-divider { background: var(--dark-border); }
body .crypto-mover-card:hover, body .custom-btn:hover,
body .action-item:active .action-circle { background: var(--dark-raised); }
body .crypto-movers-grid::after {
    background: linear-gradient(to left, var(--default-bg), transparent);
}
body .crypto-change.positive { background-color: #123c2a; color: #70e5a4; }
body .crypto-change.negative { background-color: #482326; color: #ff9298; }
body .main-btn, body .main-btn:hover, body .subscription-form button,
body .tab-btn.active, body .pagination .page-item.active .page-link {
    background: var(--clr-main);
    color: #17130b;
    border-color: var(--clr-main);
}
body .main-btn2 span, body .bg-transparent.plan-btn::before {
    background-color: var(--dark-raised);
    color: var(--dark-text);
}
body .bg-transparent.plan-btn:hover::before { background: var(--clr-main); }
body .bg-transparent.plan-btn:hover { color: #17130b; }