/*
 * BANCO DIGITAL — Crystal Sky User Template NEXUS Override v6.0
 * Dark-first. Uses --nx-* tokens from bd-design-system.css.
 * Bridge vars --bd-* are defined in design system and map to --nx-*.
 */

/* ════════════════════════════════════════════════════════
   §0  TEMPLATE ELEMENT SUPPRESSION
════════════════════════════════════════════════════════ */
.header-top       { display: none !important; }
.header-area      { display: none !important; }
.preloader        { display: none !important; }
.body-overlay     { display: none !important; }

/* ════════════════════════════════════════════════════════
   §1  TEMPLATE COLOR VARS OVERRIDE
════════════════════════════════════════════════════════ */
:root {
    --main: 239 68% 61%;
    --base: 239 68% 61%;
    --black: 222 47% 6%;
    --white: 0 0% 100%;
}

/* ════════════════════════════════════════════════════════
   §2  GLOBAL BODY
════════════════════════════════════════════════════════ */
html, body {
    background: var(--nx-d1) !important;
    color: var(--nx-t2) !important;
}

/* ════════════════════════════════════════════════════════
   §3  USER DASHBOARD LAYOUT
════════════════════════════════════════════════════════ */
.dashboard         { display: flex; min-height: 100vh; background: var(--nx-d1); }
.dashboard__inner  { display: flex; width: 100%; }
.dashboard__right  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dashboard-body    { padding: 1.5rem !important; background: var(--nx-d1) !important; flex: 1; }

/* Dashboard header */
.dashboard-header {
    background: rgba(10,15,30,.92) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--nx-border) !important;
    padding: .875rem 1.5rem !important;
    position: sticky; top: 0; z-index: 100;
}
.dashboard-header__title { font-size: .9375rem !important; font-weight: 700 !important; color: var(--nx-t1) !important; margin: 0 !important; }
.dashboard-body__bar-icon {
    width: 36px; height: 36px; border-radius: var(--nx-r2);
    border: 1.5px solid var(--nx-border); display: flex; align-items: center;
    justify-content: center; color: var(--nx-t3); cursor: pointer; font-size: 1.1rem;
    background: rgba(255,255,255,.04); transition: all var(--nx-t1s);
}
.dashboard-body__bar-icon:hover { background: rgba(255,255,255,.08); color: var(--nx-t1); border-color: var(--nx-border-brand-l); }

/* ════════════════════════════════════════════════════════
   §4  USER SIDEBAR
════════════════════════════════════════════════════════ */
.sidebar-menu {
    width: 248px; min-width: 248px;
    background: var(--nx-d2) !important;
    border-right: 1px solid var(--nx-border);
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; flex-shrink: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
}
.sidebar-menu::-webkit-scrollbar { width: 3px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

.sidebar-logo { padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--nx-border); flex-shrink: 0; }
.sidebar-menu__inner { flex: 1; overflow-y: auto; padding-bottom: 1rem; }

.sidebar-menu-list { list-style: none; margin: 0; padding: 0 .625rem; }
.sidebar-menu-list__item { margin: 1px 0; }
.sidebar-menu-list__link {
    display: flex; align-items: center; gap: .7rem;
    padding: .575rem .875rem; border-radius: var(--nx-r2);
    font-size: .8125rem; font-weight: 500;
    color: var(--nx-t3) !important; text-decoration: none !important;
    transition: all var(--nx-t1s); position: relative;
}
.sidebar-menu-list__link:hover { background: rgba(255,255,255,.04) !important; color: var(--nx-t1) !important; }
.sidebar-menu-list__item.active .sidebar-menu-list__link {
    background: var(--nx-brand-alpha) !important;
    color: var(--nx-brand-l) !important; font-weight: 600 !important;
}
.sidebar-menu-list__item.active .sidebar-menu-list__link::before {
    content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 3px; background: var(--nx-brand); border-radius: 0 3px 3px 0;
}
.sidebar-menu-list__link .icon { font-size: 1rem; width: 18px; text-align: center; opacity: .65; flex-shrink: 0; }
.sidebar-menu-list__item.active .sidebar-menu-list__link .icon,
.sidebar-menu-list__link:hover .icon { opacity: 1; }

.user-logout { border-top: 1px solid var(--nx-border); padding: .5rem 0; flex-shrink: 0; }

/* Mobile */
.sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 1049;
    background: rgba(0,0,0,.55) !important; backdrop-filter: blur(2px) !important;
}
.sidebar-overlay.show { display: block; }
@media (max-width: 1199px) {
    .sidebar-menu { position: fixed; left: 0; top: 0; height: 100vh; z-index: 1050; transform: translateX(-100%); transition: transform var(--nx-t3s); }
    .sidebar-menu.show-sidebar { transform: translateX(0); }
    .sidebar-menu .sidebar-menu__close { display: flex !important; }
}

/* ════════════════════════════════════════════════════════
   §4b SIDEBAR — OVERRIDES (beats main.css 0,2,0 + !important)
════════════════════════════════════════════════════════ */
.dashboard .sidebar-menu {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important; top: 0 !important;
    width: 248px !important; min-width: 248px !important;
    height: 100vh !important;
    background: var(--nx-d2) !important;
    border-right: 1px solid var(--nx-border) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    z-index: 1050 !important;
    flex-shrink: 0 !important;
}
.dashboard .sidebar-menu-list { margin-top: 0 !important; padding: 0 .625rem !important; }
.dashboard .sidebar-menu__inner { padding: .5rem 0 !important; width: 100% !important; flex: 1 !important; overflow-y: visible !important; }
.dashboard__right { margin-left: 248px !important; background: var(--nx-d1) !important; min-height: 100vh !important; }
@media (max-width: 1399px) { .dashboard .sidebar-menu { width: 248px !important; } }
@media (max-width: 1199px) { .dashboard__right { margin-left: 0 !important; } }

/* ════════════════════════════════════════════════════════
   §5  CARDS
════════════════════════════════════════════════════════ */
.card, .custom-card {
    background: var(--nx-d2) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-r4) !important;
    box-shadow: var(--nx-sh-sm) !important;
    color: var(--nx-t2) !important;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--nx-border) !important;
    padding: 1rem 1.25rem !important;
}
.card-title, .card-header__title { color: var(--nx-t1) !important; font-weight: 700 !important; }
.card-body  { padding: 1.25rem !important; }
.card-footer { background: transparent !important; border-top: 1px solid var(--nx-border) !important; }

/* ════════════════════════════════════════════════════════
   §6  TABLES
════════════════════════════════════════════════════════ */
.table, table { color: var(--nx-t2) !important; border-color: var(--nx-border) !important; }
.table thead th, thead th {
    font-size: .68rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .08em !important;
    color: var(--nx-t4) !important; background: rgba(255,255,255,.02) !important;
    border-bottom: 1px solid var(--nx-border) !important;
    padding: .75rem 1rem !important; white-space: nowrap;
}
.table tbody tr { border-color: var(--nx-border-l) !important; }
.table tbody tr:hover td { background: rgba(255,255,255,.02) !important; }
.table tbody td { color: var(--nx-t2) !important; border-color: var(--nx-border-l) !important; padding: .875rem 1rem !important; font-size: .8375rem !important; vertical-align: middle !important; }
.table--responsive--md { font-size: .8125rem !important; }
.table-responsive { border-radius: var(--nx-r3); border: 1px solid var(--nx-border); }

/* ════════════════════════════════════════════════════════
   §7  FORMS
════════════════════════════════════════════════════════ */
.form--control, .form-control {
    background: var(--nx-d3) !important;
    border: 1.5px solid var(--nx-border) !important;
    border-radius: var(--nx-r2) !important;
    color: var(--nx-t1) !important;
    font-size: .875rem !important;
    padding: .65rem .875rem !important;
    transition: border-color var(--nx-t1s), box-shadow var(--nx-t1s) !important;
    font-family: var(--nx-font) !important;
}
.form--control::placeholder, .form-control::placeholder { color: var(--nx-t5) !important; }
.form--control:focus, .form-control:focus {
    border-color: var(--nx-brand) !important;
    box-shadow: 0 0 0 3px var(--nx-brand-alpha) !important;
    background: var(--nx-d4) !important;
    outline: none !important;
}
label, .form-label { color: var(--nx-t2) !important; font-size: .8125rem !important; font-weight: 600 !important; margin-bottom: .35rem !important; }

/* ════════════════════════════════════════════════════════
   §8  BUTTONS
════════════════════════════════════════════════════════ */
.btn--base {
    background: var(--nx-brand) !important; border: none !important;
    border-radius: var(--nx-r2) !important; font-weight: 700 !important;
    font-size: .875rem !important; color: #fff !important;
    box-shadow: 0 4px 12px var(--nx-brand-glow) !important;
    transition: all var(--nx-t2s) !important; padding: .65rem 1.5rem !important;
}
.btn--base:hover { background: var(--nx-brand-d) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px var(--nx-brand-glow) !important; color: #fff !important; }
.btn-outline-base { border: 1.5px solid var(--nx-brand) !important; color: var(--nx-brand-l) !important; background: transparent !important; border-radius: var(--nx-r2) !important; font-weight: 600 !important; }
.btn-outline-base:hover { background: var(--nx-brand-alpha) !important; }
.btn-sm { padding: .35rem .75rem !important; font-size: .72rem !important; }

/* ════════════════════════════════════════════════════════
   §9  BADGES
════════════════════════════════════════════════════════ */
.badge { font-size: .68rem !important; font-weight: 700 !important; padding: .25rem .5rem !important; border-radius: 6px !important; }
.badge-success, .bg-success { background: rgba(16,185,129,.15) !important; color: var(--nx-ok) !important; }
.badge-danger,  .bg-danger  { background: rgba(239,68,68,.15) !important;  color: var(--nx-err) !important; }
.badge-warning, .bg-warning { background: rgba(245,158,11,.15) !important; color: var(--nx-warn) !important; }
.badge-info,    .bg-info    { background: rgba(6,182,212,.15) !important;  color: var(--nx-info) !important; }
.badge-primary, .bg-primary { background: var(--nx-brand-alpha) !important; color: var(--nx-brand-l) !important; }

/* ════════════════════════════════════════════════════════
   §10  MODALS
════════════════════════════════════════════════════════ */
.modal-content { background: var(--nx-d2) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r4) !important; color: var(--nx-t2) !important; }
.modal-header  { background: transparent !important; border-bottom: 1px solid var(--nx-border) !important; padding: 1.125rem 1.5rem !important; }
.modal-title   { font-size: .9375rem !important; font-weight: 700 !important; color: var(--nx-t1) !important; }
.modal-body    { padding: 1.25rem 1.5rem !important; }
.modal-footer  { border-top: 1px solid var(--nx-border) !important; }
.btn-close     { filter: invert(1) !important; opacity: .6 !important; }
.btn-close:hover { opacity: 1 !important; }
.modal-backdrop.show { opacity: .6 !important; }

/* ════════════════════════════════════════════════════════
   §11  DROPDOWNS
════════════════════════════════════════════════════════ */
.dropdown-menu { background: var(--nx-d3) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r3) !important; box-shadow: var(--nx-sh-lg) !important; padding: .4rem !important; }
.dropdown-item { font-size: .8125rem !important; padding: .55rem .875rem !important; border-radius: var(--nx-r1) !important; color: var(--nx-t2) !important; }
.dropdown-item:hover { background: rgba(255,255,255,.06) !important; color: var(--nx-t1) !important; }
.dropdown-divider { border-color: var(--nx-border) !important; }

/* Template-specific dropdown item class */
.dropdown-menu__item {
    display: flex !important; align-items: center; gap: .625rem;
    padding: .6rem .875rem !important; border-radius: var(--nx-r1) !important;
    color: var(--nx-t2) !important; text-decoration: none !important;
    font-size: .8125rem !important; transition: background var(--nx-t1s) !important;
    cursor: pointer;
}
.dropdown-menu__item:hover { background: rgba(255,255,255,.06) !important; color: var(--nx-t1) !important; }

/* Language switcher */
.language_switcher__list { background: var(--nx-d3) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r3) !important; box-shadow: var(--nx-sh-lg) !important; }
.language_switcher__item a.thumb { color: var(--nx-t3) !important; border-radius: var(--nx-r1) !important; }
.language_switcher__item a.thumb:hover { background: rgba(255,255,255,.06) !important; color: var(--nx-t1) !important; }
.language_switcher__item.selected a.thumb { color: var(--nx-brand-l) !important; }

/* Divider */
.bd-divider { height: 1px; background: var(--nx-border); }

/* ════════════════════════════════════════════════════════
   §12  ALERTS
════════════════════════════════════════════════════════ */
.alert { border-radius: var(--nx-r3) !important; border: none !important; font-size: .8375rem !important; }
.alert-success { background: rgba(16,185,129,.1) !important; color: var(--nx-ok) !important;   border-left: 3px solid var(--nx-ok) !important; }
.alert-danger  { background: rgba(239,68,68,.1) !important;  color: var(--nx-err) !important;  border-left: 3px solid var(--nx-err) !important; }
.alert-warning { background: rgba(245,158,11,.1) !important; color: var(--nx-warn) !important; border-left: 3px solid var(--nx-warn) !important; }
.alert-info    { background: rgba(6,182,212,.1) !important;  color: var(--nx-info) !important; border-left: 3px solid var(--nx-info) !important; }

/* ════════════════════════════════════════════════════════
   §13  PAGINATION
════════════════════════════════════════════════════════ */
.pagination { gap: .25rem; }
.page-item .page-link { background: var(--nx-d2) !important; border: 1px solid var(--nx-border) !important; color: var(--nx-t3) !important; border-radius: var(--nx-r1) !important; font-size: .8125rem !important; transition: all var(--nx-t1s) !important; }
.page-item .page-link:hover { background: rgba(255,255,255,.06) !important; color: var(--nx-t1) !important; }
.page-item.active .page-link { background: var(--nx-brand) !important; border-color: var(--nx-brand) !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: .4 !important; }

/* ════════════════════════════════════════════════════════
   §14  BREADCRUMB
════════════════════════════════════════════════════════ */
.breadcrumb-section {
    background: var(--nx-d2) !important;
    border-bottom: 1px solid var(--nx-border) !important;
    padding: 1.25rem 0 !important;
}
.breadcrumb-section .breadcrumb-heading { color: var(--nx-t1) !important; font-weight: 800 !important; font-size: 1.25rem !important; }
.breadcrumb-section .breadcrumb-item a  { color: var(--nx-brand-l) !important; }
.breadcrumb-section .breadcrumb-item.active { color: var(--nx-t4) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nx-t5) !important; }
.breadcrumb { background: transparent !important; margin: 0 !important; padding: 0 !important; }

/* ════════════════════════════════════════════════════════
   §15  TABS
════════════════════════════════════════════════════════ */
.nav-tabs { border-bottom: 1px solid var(--nx-border) !important; gap: .25rem !important; }
.nav-tabs .nav-link { border: none !important; font-size: .8125rem !important; font-weight: 600 !important; color: var(--nx-t4) !important; padding: .6rem 1rem !important; border-radius: var(--nx-r2) var(--nx-r2) 0 0 !important; transition: all var(--nx-t1s) !important; }
.nav-tabs .nav-link.active { color: var(--nx-brand-l) !important; background: var(--nx-brand-alpha) !important; border-bottom: 2px solid var(--nx-brand) !important; }
.nav-tabs .nav-link:hover { color: var(--nx-t2) !important; }

/* ════════════════════════════════════════════════════════
   §16  DATE RANGE PICKER
════════════════════════════════════════════════════════ */
.daterangepicker { background: var(--nx-d3) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r4) !important; box-shadow: var(--nx-sh-xl) !important; color: var(--nx-t2) !important; }
.daterangepicker .calendar-table { background: transparent !important; border: none !important; }
.daterangepicker td, .daterangepicker th { color: var(--nx-t2) !important; }
.daterangepicker td.off { color: var(--nx-t5) !important; }
.daterangepicker td.available:hover { background: var(--nx-brand-alpha) !important; color: var(--nx-brand-l) !important; border-radius: var(--nx-r1) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--nx-brand) !important; border-radius: var(--nx-r1) !important; color: #fff !important; }
.daterangepicker td.in-range { background: rgba(99,102,241,.08) !important; }
.daterangepicker .ranges li { color: var(--nx-t3) !important; font-size: .8125rem !important; border-radius: var(--nx-r1) !important; }
.daterangepicker .ranges li.active { background: var(--nx-brand-alpha) !important; color: var(--nx-brand-l) !important; }
.daterangepicker .drp-buttons { border-top: 1px solid var(--nx-border) !important; background: transparent !important; }
.daterangepicker .cancelBtn { background: transparent !important; border-color: var(--nx-border) !important; color: var(--nx-t3) !important; }
.daterangepicker .applyBtn { background: var(--nx-brand) !important; border-color: var(--nx-brand) !important; }

/* ════════════════════════════════════════════════════════
   §17  FRONTEND PUBLIC PAGES
════════════════════════════════════════════════════════ */

/* Header */
.header-area {
    background: rgba(15,23,42,.95) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    position: sticky !important; top: 0 !important; z-index: 1000 !important;
}
.header-nav .nav-link { color: rgba(255,255,255,.75) !important; font-weight: 500 !important; font-size: .875rem !important; }
.header-nav .nav-link:hover { color: #fff !important; }
.header-action .btn--base { padding: .5rem 1.25rem !important; border-radius: var(--nx-r2) !important; font-size: .8125rem !important; }

/* Hero / Banner */
.banner-section {
    background: linear-gradient(145deg, var(--nx-d0) 0%, #1e1b4b 50%, var(--nx-d0) 100%) !important;
    position: relative; overflow: hidden;
}
.banner-section::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(99,102,241,.12); top: -200px; right: -100px; pointer-events: none; }
.banner-section::after  { content: ''; position: absolute; width: 350px; height: 350px; border-radius: 50%; background: rgba(20,184,166,.07); bottom: -100px; left: -80px; pointer-events: none; }
.banner-content__title    { font-size: clamp(2rem,4vw,3.25rem) !important; font-weight: 900 !important; color: #fff !important; line-height: 1.15 !important; }
.banner-content__subtitle { color: rgba(255,255,255,.7) !important; }

.happy-user { background: rgba(255,255,255,.08) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: var(--nx-r3) !important; padding: .875rem !important; }
.happy-user__title { color: #fff !important; font-weight: 800 !important; }
.happy-user__desc  { color: rgba(255,255,255,.65) !important; }

/* Section headings */
.section-heading__subtitle { color: var(--nx-brand-l) !important; font-weight: 700 !important; font-size: .78rem !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
.section-heading__title    { font-size: clamp(1.5rem,3vw,2.2rem) !important; font-weight: 800 !important; color: var(--nx-t1) !important; }

/* Feature / service cards (public pages) — dark glass */
.service-card, .feature-card {
    background: var(--nx-d2) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-r4) !important;
    box-shadow: var(--nx-sh-sm) !important;
    transition: box-shadow var(--nx-t2s), transform var(--nx-t2s) !important;
}
.service-card:hover, .feature-card:hover { box-shadow: var(--nx-sh-md) !important; transform: translateY(-3px) !important; border-color: var(--nx-border-brand-l) !important; }
.service-card__title, .feature-card__title { color: var(--nx-t1) !important; font-weight: 700 !important; }
.service-card__desc, .feature-card__desc   { color: var(--nx-t3) !important; }

/* Footer */
.footer-section { background: linear-gradient(175deg, #1e1b4b 0%, var(--nx-d0) 100%) !important; }
.footer-menu__link        { color: rgba(255,255,255,.6) !important; font-size: .875rem !important; }
.footer-menu__link:hover  { color: var(--nx-brand-l) !important; }
.footer-bottom            { border-top: 1px solid rgba(255,255,255,.08) !important; }
.footer-bottom__text      { color: rgba(255,255,255,.4) !important; font-size: .8125rem !important; }

/* Slick carousel */
.slick-prev::before, .slick-next::before { color: var(--nx-brand-l) !important; }

/* Scroll top */
.scroll-top { background: var(--nx-brand) !important; border-radius: var(--nx-r2) !important; }

/* ════════════════════════════════════════════════════════
   §18  AUTH PAGES (login / register — these are fully rewritten
         by individual blade templates; these rules add a fallback)
════════════════════════════════════════════════════════ */
.account { min-height: 100vh; display: flex; }
.account__left {
    flex: 1;
    background: linear-gradient(145deg, var(--nx-d0) 0%, #1e1b4b 50%, #1e3a5f 100%) !important;
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; padding: 3rem; position: relative; overflow: hidden;
}
.account__left::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(99,102,241,.12); top: -150px; right: -150px; }
.account__left::after  { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(20,184,166,.07); bottom: -80px; left: -60px; }
.account__right { width: 480px; flex-shrink: 0; background: var(--nx-d2); display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem; overflow-y: auto; }
.account-form { background: var(--nx-d3); border-radius: var(--nx-r4); padding: 2.5rem; border: 1px solid var(--nx-border); }
.account-form .form--control { background: var(--nx-d4) !important; border: 1.5px solid var(--nx-border) !important; }
.account-form .form--control:focus { border-color: var(--nx-brand) !important; box-shadow: 0 0 0 3px var(--nx-brand-alpha) !important; background: var(--nx-d4) !important; }
.have-account__text { font-size: .875rem; color: var(--nx-t3); }
.have-account__link { color: var(--nx-brand-l) !important; font-weight: 600 !important; }
.forgot-password    { color: var(--nx-brand-l) !important; font-size: .8rem; font-weight: 500; }
@media (max-width: 992px) { .account__left { display: none; } .account__right { width: 100%; } }

/* ════════════════════════════════════════════════════════
   §19  TRANSACTION HISTORY & INNER PAGES
════════════════════════════════════════════════════════ */
/* Detail list (used in deposit/withdraw/loan/transfer details) */
.caption-list, .caption-list-two {
    list-style: none; margin: 0; padding: 0 !important;
}
.caption-list li, .caption-list-two li {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: .75rem 0; border-bottom: 1px solid var(--nx-border-l);
    font-size: .8375rem; gap: 1rem;
}
.caption-list li:last-child, .caption-list-two li:last-child { border-bottom: none; }
.caption-list li .caption, .caption-list-two li .caption { color: var(--nx-t4); font-weight: 500; flex-shrink: 0; }
.caption-list li .value, .caption-list-two li .value { color: var(--nx-t1); font-weight: 600; text-align: right; }

/* Profile / settings cards */
.profile-thumb { position: relative; display: inline-block; }
.profile-thumb img { border: 3px solid var(--nx-brand) !important; border-radius: 50% !important; }
.profile-thumb-edit { position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--nx-brand) !important; color: #fff !important; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .75rem; }

/* Template utility classes */
.section-bg {
    background: var(--nx-d2) !important; border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-r4) !important; padding: 1.5rem !important;
}
.flex-align { display: flex !important; align-items: center !important; }
.nav-buttons { display: flex !important; flex-wrap: wrap; gap: .5rem; }

/* User info card (profile) */
.user-info-card { list-style: none; padding: 0; margin: 1rem 0 0; }
.user-info-card__list { padding: .625rem 0; border-bottom: 1px solid var(--nx-border-l); gap: 1rem; }
.user-info-card__list:last-child { border-bottom: none; }
.user-info-card__name  { color: var(--nx-t4) !important; font-size: .78rem !important; font-weight: 500 !important; margin: 0 !important; }
.user-info-card__value { color: var(--nx-t1) !important; font-weight: 600 !important; font-size: .875rem !important; margin: 0 !important; }

/* Profile picture */
.man-thumb { width: 100px !important; height: 100px !important; border-radius: 50% !important; border: 3px solid var(--nx-brand) !important; object-fit: cover !important; }
.profile-image-preview { margin-bottom: 1rem; }

/* Account level badge */
.account-level { display: flex; align-items: center; gap: .35rem; justify-content: center; margin-top: .5rem; font-size: .72rem; font-weight: 600; color: var(--nx-warn); }
.account-level img { width: 18px; height: 18px; }

/* Form group */
.form-group { margin-bottom: 1.125rem; }

/* Plan cards (DPS / FDR / Loan) */
.plan-card {
    background: var(--nx-d2) !important; border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-r4) !important; padding: 1.5rem !important;
    transition: all var(--nx-t2s) !important;
}
.plan-card:hover { border-color: var(--nx-border-brand-l) !important; transform: translateY(-2px) !important; box-shadow: var(--nx-sh-md) !important; }
.plan-card__head { border-bottom: 1px solid var(--nx-border) !important; padding-bottom: 1rem; margin-bottom: 1rem; }
.plan-card__title { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--nx-t1) !important; }
.plan-card__amount { font-size: 1.75rem !important; font-weight: 800 !important; color: var(--nx-brand-l) !important; font-family: var(--nx-mono) !important; }
.plan-card__meta { color: var(--nx-t4) !important; font-size: .78rem !important; }
.plan-card__body ul { list-style: none; padding: 0; margin: 0; }
.plan-card__body ul li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .8125rem; color: var(--nx-t2); }
.plan-card__body ul li i { color: var(--nx-ok); font-size: .875rem; }


.trx-icon { width: 40px; height: 40px; border-radius: var(--nx-r2); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; }
.trx-icon--credit { background: rgba(16,185,129,.12); color: var(--nx-ok); }
.trx-icon--debit  { background: rgba(239,68,68,.12);   color: var(--nx-err); }

/* Copy input for addresses/keys */
.copyInput { display: inline-block; line-height: 50px; position: absolute; top: 0; right: 0; width: 40px; text-align: center; font-size: 14px; cursor: pointer; transition: all .3s; }
.copied::after { position: absolute; top: 8px; right: 12%; width: 100px; display: block; content: "COPIADO"; font-size: .875em; padding: 5px; color: #fff; background: var(--nx-brand); border-radius: 6px; opacity: 0; animation: showcopied 1.5s ease; }
@keyframes showcopied { 0%{opacity:0;transform:translateX(100%)} 50%{opacity:.7;transform:translateX(40%)} 70%{opacity:1;transform:translateX(0)} 100%{opacity:0} }

/* Hover input popup (password strength etc) */
.hover-input-popup .input-popup { background: var(--nx-d3) !important; border-radius: var(--nx-r3) !important; border: 1px solid var(--nx-border) !important; }
.input-popup p.error::before   { color: var(--nx-err) !important; }
.input-popup p.success::before { color: var(--nx-ok) !important; }

/* Cookies banner */
.cookies-card { background: var(--nx-d3) !important; border-radius: var(--nx-r4) !important; border: 1px solid rgba(255,255,255,.08) !important; color: rgba(255,255,255,.8) !important; }

/* ════════════════════════════════════════════════════════
   §20  TEXT UTILITIES
════════════════════════════════════════════════════════ */
.text-muted   { color: var(--nx-t4) !important; }
.text-dark    { color: var(--nx-t1) !important; }
.text-primary { color: var(--nx-brand-l) !important; }
.text-success { color: var(--nx-ok) !important; }
.text-danger  { color: var(--nx-err) !important; }
.text-warning { color: var(--nx-warn) !important; }
.text-info    { color: var(--nx-info) !important; }
.bg-light     { background: var(--nx-d3) !important; }
.bg-white     { background: var(--nx-d2) !important; }
.border       { border-color: var(--nx-border) !important; }
hr { border-color: var(--nx-border) !important; opacity: .5 !important; }

/* ════════════════════════════════════════════════════════
   §20b  TEMPLATE DOUBLE-DASH CLASSES
         Crystal Sky template uses .btn--base, .text--primary etc.
════════════════════════════════════════════════════════ */
.text--primary { color: var(--nx-brand-l) !important; }
.text--success { color: var(--nx-ok) !important; }
.text--danger  { color: var(--nx-err) !important; }
.text--warning { color: var(--nx-warn) !important; }
.text--info    { color: var(--nx-info) !important; }
.text--dark    { color: var(--nx-t1) !important; }
.text--muted   { color: var(--nx-t4) !important; }

.btn--sm {
    padding: .35rem .75rem !important; font-size: .72rem !important;
    border-radius: var(--nx-r1) !important; font-weight: 600 !important;
}
.btn-outline--base {
    border: 1.5px solid var(--nx-brand) !important; color: var(--nx-brand-l) !important;
    background: transparent !important; border-radius: var(--nx-r2) !important;
    font-weight: 600 !important; transition: all var(--nx-t2s) !important;
}
.btn-outline--base:hover { background: var(--nx-brand-alpha) !important; color: var(--nx-brand-l) !important; }
.btn-outline--success { border: 1.5px solid var(--nx-ok) !important;   color: var(--nx-ok) !important;   background: transparent !important; border-radius: var(--nx-r2) !important; }
.btn-outline--danger  { border: 1.5px solid var(--nx-err) !important;  color: var(--nx-err) !important;  background: transparent !important; border-radius: var(--nx-r2) !important; }
.btn-outline--warning   { border: 1.5px solid var(--nx-warn) !important; color: var(--nx-warn) !important;     background: transparent !important; border-radius: var(--nx-r2) !important; }
.btn-outline--secondary { border: 1.5px solid var(--nx-border) !important; color: var(--nx-t3) !important;       background: transparent !important; border-radius: var(--nx-r2) !important; }
.btn-outline--info      { border: 1.5px solid var(--nx-info) !important;   color: var(--nx-info) !important;     background: transparent !important; border-radius: var(--nx-r2) !important; }
.btn-outline--secondary:hover { background: rgba(255,255,255,.06) !important; color: var(--nx-t1) !important; }

/* Card header nav (search form + action button row) */
.header-nav {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .625rem; padding: .25rem 0;
}
.header-nav .btn { flex-shrink: 0; }

/* Status badges (returned by ->statusBadge PHP property) */
.badge--success { background: rgba(16,185,129,.15) !important; color: var(--nx-ok) !important; border-radius: 6px !important; font-size: .68rem !important; font-weight: 700 !important; padding: .2rem .5rem !important; }
.badge--danger  { background: rgba(239,68,68,.15) !important;  color: var(--nx-err) !important; border-radius: 6px !important; font-size: .68rem !important; font-weight: 700 !important; padding: .2rem .5rem !important; }
.badge--warning { background: rgba(245,158,11,.15) !important; color: var(--nx-warn) !important; border-radius: 6px !important; font-size: .68rem !important; font-weight: 700 !important; padding: .2rem .5rem !important; }
.badge--primary { background: var(--nx-brand-alpha) !important; color: var(--nx-brand-l) !important; border-radius: 6px !important; font-size: .68rem !important; font-weight: 700 !important; padding: .2rem .5rem !important; }
.badge--info    { background: rgba(6,182,212,.15) !important;   color: var(--nx-info) !important;  border-radius: 6px !important; font-size: .68rem !important; font-weight: 700 !important; padding: .2rem .5rem !important; }

/* Filter card */
.responsive-filter-card {
    background: var(--nx-d2) !important; border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-r4) !important; margin-bottom: 1.25rem;
}
.showFilterBtn { font-size: .78rem !important; }

/* Input group */
.input-group .form--control, .input-group .form-control { border-radius: var(--nx-r2) 0 0 var(--nx-r2) !important; }
.input-group-text {
    background: var(--nx-d3) !important; border: 1.5px solid var(--nx-border) !important;
    border-left: none !important; color: var(--nx-t3) !important;
    border-radius: 0 var(--nx-r2) var(--nx-r2) 0 !important;
    transition: all var(--nx-t1s) !important;
}
.input-group-text:hover { color: var(--nx-brand-l) !important; }

/* Search form */
.custom-icon-field { position: relative; }
.custom-icon-field input { padding-left: 2.25rem !important; }
.custom-icon-field .input-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--nx-t5); pointer-events: none; }

/* ════════════════════════════════════════════════════════
   §20c  PAYMENT GATEWAY MODAL
════════════════════════════════════════════════════════ */
.payment-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 1rem; border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-r3); cursor: pointer;
    transition: all var(--nx-t2s); background: var(--nx-d3) !important;
}
.payment-item:hover { border-color: var(--nx-border-brand-l) !important; }
.payment-item__info { display: flex; align-items: center; gap: .5rem; }
.payment-item__check {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--nx-border); flex-shrink: 0; display: flex;
    align-items: center; justify-content: center;
    transition: all var(--nx-t1s);
}
input[type=radio]:checked + .payment-item .payment-item__check,
.payment-item input[type=radio]:checked ~ .payment-item__check,
label.payment-item:has(input:checked) .payment-item__check {
    border-color: var(--nx-brand); background: var(--nx-brand);
}
.payment-item__name { font-size: .8125rem; font-weight: 600; color: var(--nx-t2) !important; }
.payment-item__thumb { flex-shrink: 0; }
.payment-item__thumb-img { max-height: 32px; max-width: 80px; object-fit: contain; filter: brightness(0) invert(1) opacity(.7); }

/* Gateway card / deposit form */
.gateway-card { background: transparent !important; }
.gateway-option-list { max-height: 280px; overflow-y: auto; }

/* ════════════════════════════════════════════════════════
   §21  CHARTS
════════════════════════════════════════════════════════ */
.apexcharts-canvas                     { background: transparent !important; }
.apexcharts-tooltip                    { background: var(--nx-d3) !important; border: 1px solid var(--nx-border) !important; color: var(--nx-t1) !important; border-radius: var(--nx-r2) !important; }
.apexcharts-tooltip-title              { background: var(--nx-d4) !important; color: var(--nx-t1) !important; border-bottom: 1px solid var(--nx-border) !important; }

/* ════════════════════════════════════════════════════════
   §22  ANIMATION UTILITIES
════════════════════════════════════════════════════════ */
@keyframes nx-pulse-glow {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.6; transform:scale(1.3); }
}
@keyframes nx-fade-up {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes nx-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.nx-afu { animation: nx-fade-up .4s var(--nx-ease) both; }
.nx-afu:nth-child(2) { animation-delay:.05s; }
.nx-afu:nth-child(3) { animation-delay:.1s; }
.nx-afu:nth-child(4) { animation-delay:.15s; }

/* Skeleton shimmer */
.nx-skel {
    background: linear-gradient(90deg, var(--nx-d3) 25%, var(--nx-d4) 50%, var(--nx-d3) 75%);
    background-size: 200% 100%;
    animation: nx-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--nx-r1);
}

/* ════════════════════════════════════════════════════════
   §23  LIGHT THEME
════════════════════════════════════════════════════════ */
html.light {
    /* Depths — inverted to light surfaces */
    --nx-d0: #e2e8f0;
    --nx-d1: #f8fafc;
    --nx-d2: #ffffff;
    --nx-d3: #f1f5f9;
    --nx-d4: #e2e8f0;
    --nx-d5: #cbd5e1;

    /* Glass */
    --nx-glass:     rgba(255,255,255,.9);
    --nx-glass-l:   rgba(248,250,252,.85);
    --nx-glass-nav: rgba(255,255,255,.95);

    /* Borders */
    --nx-border:       rgba(0,0,0,.08);
    --nx-border-l:     rgba(0,0,0,.05);
    --nx-border-brand: rgba(99,102,241,.25);
    --nx-border-brand-l: rgba(99,102,241,.1);

    /* Text — inverted */
    --nx-t1: #0f172a;
    --nx-t2: #1e293b;
    --nx-t3: #334155;
    --nx-t4: #64748b;
    --nx-t5: #94a3b8;

    /* Brand — slightly darker for light bg readability */
    --nx-brand-l: #4f46e5;

    /* Shadows — lighter */
    --nx-sh-xs: 0 1px 2px rgba(0,0,0,.05);
    --nx-sh-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --nx-sh-md: 0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
    --nx-sh-lg: 0 10px 30px rgba(0,0,0,.11), 0 4px 12px rgba(0,0,0,.06);
    --nx-sh-xl: 0 20px 50px rgba(0,0,0,.13), 0 8px 20px rgba(0,0,0,.07);
}

/* Necessary overrides where !important hardcodes color values not using tokens */
html.light body         { background: var(--nx-d1) !important; color: var(--nx-t2) !important; }
html.light .dashboard,
html.light .dashboard-body { background: var(--nx-d1) !important; }
html.light .sidebar-menu { background: #fff !important; border-right-color: rgba(0,0,0,.07) !important; }
html.light .dashboard-header { background: rgba(255,255,255,.96) !important; border-bottom-color: rgba(0,0,0,.07) !important; }
html.light .sidebar-overlay { background: rgba(0,0,0,.3) !important; }
html.light .nx-balance::before { background: linear-gradient(135deg,rgba(99,102,241,.04) 0%,rgba(20,184,166,.02) 60%,transparent 100%); }
html.light .nx-balance::after  { background: linear-gradient(90deg,transparent,rgba(99,102,241,.2),rgba(20,184,166,.15),transparent); }
html.light .banner-section { background: linear-gradient(145deg,#f0f4ff 0%,#e8eeff 50%,#f0f4ff 100%) !important; }
html.light .banner-content__title   { color: #0f172a !important; }
html.light .banner-content__subtitle{ color: #334155 !important; }
html.light .footer-section { background: linear-gradient(175deg,#e8eeff 0%,#f0f4ff 100%) !important; }
html.light .footer-menu__link  { color: rgba(0,0,0,.6) !important; }
html.light .footer-bottom      { border-top-color: rgba(0,0,0,.07) !important; }
html.light .footer-bottom__text{ color: rgba(0,0,0,.4) !important; }
html.light .account__left { background: linear-gradient(145deg,#e8eeff 0%,#dde3ff 50%,#e0eeff 100%) !important; }
html.light .modal-backdrop.show { background: rgba(0,0,0,.4) !important; }

/* ════════════════════════════════════════════════════════
   §24  THEME TOGGLE BUTTON
════════════════════════════════════════════════════════ */
.nx-theme-toggle {
    width: 36px; height: 36px; border-radius: var(--nx-r2);
    border: 1.5px solid var(--nx-border); background: rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--nx-t3); font-size: 1.0625rem;
    transition: all var(--nx-t1s); flex-shrink: 0;
}
.nx-theme-toggle:hover { background: rgba(255,255,255,.08); color: var(--nx-t1); border-color: var(--nx-border-brand-l); }
html.light .nx-theme-toggle { background: rgba(0,0,0,.04); }
html.light .nx-theme-toggle:hover { background: rgba(0,0,0,.07); }
html.light .nx-theme-toggle .nx-icon-moon   { display: none; }
html.light .nx-theme-toggle .nx-icon-sun    { display: inline; }
html.dark  .nx-theme-toggle .nx-icon-moon   { display: inline; }
html.dark  .nx-theme-toggle .nx-icon-sun    { display: none; }
.nx-theme-toggle .nx-icon-sun    { display: none; }
.nx-theme-toggle .nx-icon-moon   { display: inline; }