/* ============================================================================
   SWIDEPRIME · Light Brand Theme  (Exness-grade, white/trust)
   Loaded LAST in bit_gold so it wins the cascade. Turns the dark starfield
   template into a bright, clean, professional light experience while keeping
   the SWIDEPRIME Prime Palette and Breakout-S discipline.
   ----------------------------------------------------------------------------
   Surfaces : Paper #F7F9FC canvas · White #FFFFFF cards · Cloud #E3E9F4 lines
   Ink      : #0A0F1E headings · slate #5A6B8C body text
   Gold     : #F0B429 fills (ink text) · #B7791F gold-on-light text
   Signals  : Rise #16C784 · Fall #EA3943 · Signal #3E7BFA (market only)
   Type     : Space Grotesk display · Inter UI · IBM Plex Mono data
   ========================================================================== */

:root {
    --sp-ink:        #0A0F1E;
    --sp-slate:      #5A6B8C;   /* body text on light   */
    --sp-mute:       #8B98B8;
    --sp-paper:      #F7F9FC;
    --sp-white:      #FFFFFF;
    --sp-cloud:      #E3E9F4;
    --sp-line:       #E8EDF6;
    --sp-gold:       #F0B429;
    --sp-gold-deep:  #B7791F;
    --sp-mono:       "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

    /* keep --second_color meaning "ink" so `color:var(--second_color)` = dark text */
    --second_color:  #0A0F1E;

    --sp-shadow-sm:  0 1px 2px rgba(10,15,30,.06), 0 2px 8px rgba(10,15,30,.05);
    --sp-shadow:     0 4px 12px rgba(10,15,30,.06), 0 16px 40px rgba(10,15,30,.08);
    --sp-shadow-lg:  0 12px 28px rgba(10,15,30,.10), 0 30px 60px rgba(10,15,30,.12);
    --sp-radius:     16px;
}

/* ============================ 1 · Foundation ============================ */
body {
    background-color: var(--sp-paper) !important;
    color: var(--sp-slate) !important;
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .003em;
}

h1,h2,h3,h4,h5,h6,
.hero__title,.section-title,.section-top-title,.box-header .title {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    color: var(--sp-ink) !important;
    letter-spacing: -.015em;
    font-weight: 700;
}

p { color: var(--sp-slate); }

a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
a:hover { color: var(--sp-gold-deep); }

.text-white,
.p--color, .h--color, .para-white {
    color: var(--sp-ink) !important;
}

/* kill the dark starfield — irrelevant on a bright canvas */
.full-wh, .bg-animation, #stars, #stars2, #stars3, #stars4 { display: none !important; }

::selection { background: var(--sp-gold); color: var(--sp-ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--sp-paper); }
::-webkit-scrollbar-thumb { background: #CBD5E8; border-radius: 8px; border: 2px solid var(--sp-paper); }
::-webkit-scrollbar-thumb:hover { background: #B4C1DA; }

/* prices, balances, order ids → tabular mono, honest and aligned */
.odometer, .balance, .amount, code, kbd,
.calculator-result, .package-card .price, .d-widget .amount,
td[data-label="Amount"], td[data-label="Trx"], td[data-label="Transaction"] {
    font-family: var(--sp-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* generous section rhythm, alternating white / paper */
section { position: relative; }
.section--bg, .cureency-section { background-color: var(--sp-paper) !important; }

/* =============================== 2 · Header ============================= */
.header__bottom {
    background-color: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--sp-line) !important;
}
.header.menu-fixed .header__bottom {
    background-color: rgba(255,255,255,.94) !important;
    box-shadow: var(--sp-shadow-sm);
    border-bottom: 1px solid var(--sp-line) !important;
}

.header .main-menu li a { color: var(--sp-ink) !important; font-weight: 500; }
.header .main-menu li a:hover,
.header .main-menu li a:focus,
.header .main-menu li.active > a { color: var(--sp-gold-deep) !important; }
.header .main-menu li.menu_has_children > a::before { color: var(--sp-slate); }

/* dropdown → white card, ink links */
.header .main-menu li .sub-menu {
    background-color: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud) !important;
    box-shadow: var(--sp-shadow) !important;
    border-radius: 12px;
}
.header .main-menu li .sub-menu li { border-bottom: 1px solid var(--sp-line) !important; }
.header .main-menu li .sub-menu li a { color: var(--sp-ink) !important; }
.header .main-menu li .sub-menu li a:hover {
    background-color: rgba(240,180,41,.10) !important;
    color: var(--sp-gold-deep) !important;
    text-decoration: none;
}

.navbar-collapse { background-color: var(--sp-white) !important; }
@media (max-width:1199px){
    .navbar-collapse { border: 1px solid var(--sp-cloud); border-radius: 14px; box-shadow: var(--sp-shadow); }
}

.menu-toggle:before, .menu-toggle:after, span.menu-toggle { background-color: var(--sp-ink) !important; }
.account-menu .icon i { background-color: var(--sp-gold); color: var(--sp-ink); }

/* =============================== 3 · Hero =============================== */
/* keep the banner image but lay an ink scrim so white hero copy stays crisp */
.hero { padding-top: 250px; }
.hero::before {
    display: block !important;
    background: linear-gradient(90deg, rgba(7,11,22,.82) 0%, rgba(7,11,22,.55) 42%, rgba(7,11,22,.12) 72%, rgba(7,11,22,0) 100%) !important;
    opacity: 1 !important;
}
.hero .text-white,
.hero__title .text-white { color: #fff !important; }
.hero__title { color: #fff !important; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero .base--color { color: var(--sp-gold) !important; }
.hero p.text-white { color: rgba(255,255,255,.9) !important; }

/* inner-hero (breadcrumb pages) → clean ink band */
.inner-hero::before {
    background: linear-gradient(120deg, #0A0F1E 0%, #13203D 100%) !important;
    opacity: 1 !important;
}

/* content sections that sat on dark image scrims → bright, clean light bands.
   The abstract bg image survives as a whisper under a paper wash. */
.overlay--one::before,
.overlay--radial::before,
.about-section::before {
    background: rgba(247,249,252,.94) !important;
    background-image: none !important;
    opacity: 1 !important;
}
.overlay--one, .overlay--radial, .about-section { background-color: var(--sp-paper); }

/* gold as *text* on light must use the deep tone for contrast (guide) */
.base--color { color: var(--sp-gold-deep) !important; }
.hero .base--color { color: var(--sp-gold) !important; }

/* why-choose feature cards → white cards, not dark glass */
.choose-card {
    background-color: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 14px !important;
    box-shadow: var(--sp-shadow) !important;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.choose-card:hover {
    transform: translateY(-5px);
    border-color: rgba(240,180,41,.5) !important;
    box-shadow: var(--sp-shadow-lg) !important;
}
.choose-card__icon, .choose-card__icon.base--color, .choose-card__icon i { color: var(--sp-gold-deep) !important; }
.choose-card__title, .choose-card__title.base--color { color: var(--sp-ink) !important; }

/* closing CTA → deliberate ink panel with gold action (a premium dark accent) */
.cta-wrapper {
    background: linear-gradient(120deg, #0A0F1E 0%, #13203D 100%) !important;
    border: 1px solid rgba(240,180,41,.25);
    border-radius: 20px !important;
    box-shadow: var(--sp-shadow-lg);
    padding: 56px 40px;
}
.cta-wrapper .title, .cta-wrapper h2, .cta-wrapper p { color: #fff !important; }
.cta-wrapper p { color: rgba(234,240,250,.8) !important; }

/* ============================== 4 · Buttons ============================= */
.btn--base, .btn {
    border-radius: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
}
.btn--base {
    background-color: var(--sp-gold) !important;
    color: var(--sp-ink) !important;
    box-shadow: 0 6px 18px rgba(240,180,41,.28) !important;
    border: 0 !important;
}
.btn--base:hover, .btn--base:focus, .btn--base:active {
    background-color: #FFC53D !important;
    color: var(--sp-ink) !important;
    box-shadow: 0 10px 26px rgba(240,180,41,.36) !important;
    transform: translateY(-1px);
}
.btn--base.active { background-color: var(--sp-gold-deep) !important; }

/* secondary / bordered → clean white ghost with ink text */
.border-btn, .cmn-btn2 {
    background-color: var(--sp-white) !important;
    color: var(--sp-ink) !important;
    border: 1px solid var(--sp-cloud) !important;
    box-shadow: var(--sp-shadow-sm) !important;
}
.border-btn:hover, .cmn-btn2:hover {
    background-color: var(--sp-white) !important;
    color: var(--sp-gold-deep) !important;
    border-color: var(--sp-gold) !important;
    box-shadow: 0 8px 22px rgba(240,180,41,.2) !important;
    transform: translateY(-1px);
}
.read-btn { background-color: rgba(240,180,41,.14); color: var(--sp-gold-deep); }

/* ======================= 5 · Cards & surfaces ========================== */
.card, .card .card-header, .cmn-accordion .card,
.package-card, .profit-calculator-wrapper, .brand-item,
.blog-card, .account-card, .contact-wrapper, .sidebar .widget {
    background-color: var(--sp-white) !important;
}

.card, .package-card, .profit-calculator-wrapper, .blog-card,
.account-card, .contact-wrapper, .sidebar .widget, .cmn-accordion .card {
    border: 1px solid var(--sp-cloud) !important;
    border-radius: var(--sp-radius) !important;
    box-shadow: var(--sp-shadow) !important;
}
.card .card-header { border-bottom: 1px solid var(--sp-line) !important; }

/* plan / package cards lift on hover — the beautiful moment */
.package-card, .blog-card {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.package-card:hover, .blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(240,180,41,.55) !important;
    box-shadow: var(--sp-shadow-lg) !important;
}

/* work / step icon chips → gold tint on ink glyph */
.work-card__icon { background-color: rgba(240,180,41,.12) !important; }
.work-card__icon .step-number { background-color: var(--sp-gold) !important; color: var(--sp-ink) !important; }
.d-widget .icon { background-color: rgba(240,180,41,.14) !important; color: var(--sp-gold-deep) !important; }

/* ============================== 6 · Tables ============================= */
.table { background-color: var(--sp-white) !important; border-radius: 14px; overflow: hidden; }
.table thead { background-color: var(--sp-paper) !important; }
.table thead tr th {
    background-color: var(--sp-paper) !important;
    color: var(--sp-ink) !important;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    border-bottom: 1px solid var(--sp-cloud) !important;
}
.table tbody tr td { border-color: var(--sp-line) !important; color: var(--sp-slate); }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background-color: var(--sp-paper) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(227,233,244,.35) !important; }

/* =============================== 7 · Forms ============================= */
.form-control, .form--control, textarea, select, .nice-select,
.select2-container--default .select2-selection--single {
    background-color: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 10px !important;
    color: var(--sp-ink) !important;
}
.form-control::placeholder, .form--control::placeholder { color: var(--sp-mute) !important; }
.form-control:focus, .form--control:focus, textarea:focus, select:focus, .nice-select.open {
    border-color: var(--sp-gold) !important;
    box-shadow: 0 0 0 3px rgba(240,180,41,.18) !important;
}
label, .form-label { color: var(--sp-ink); font-weight: 500; }
.input-group-text {
    background-color: var(--sp-paper) !important;
    border: 1px solid var(--sp-cloud) !important;
    color: var(--sp-gold-deep) !important;
}
.select2-dropdown { background: var(--sp-white) !important; border: 1px solid var(--sp-cloud) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--sp-gold) !important; color: var(--sp-ink) !important;
}

/* ============================== 8 · Footer ============================= */
.footer { border-top: 1px solid var(--sp-cloud); background-color: var(--sp-white); }
.footer::before { background: var(--sp-white) !important; opacity: 1 !important; }
.footer__bottom { background-color: var(--sp-paper) !important; border-top: 1px solid var(--sp-line); }
.footer h1,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6 { color: var(--sp-ink) !important; }
.footer p, .footer li, .footer a { color: var(--sp-slate) !important; }
.footer-short-menu li a, .social-link-list li a { color: var(--sp-slate) !important; }
.footer-short-menu li a:hover, .social-link-list li a:hover { color: var(--sp-gold-deep) !important; }

/* ============================ 9 · Odds & ends ========================== */
.scroll-to-top .scroll-icon {
    background-color: var(--sp-gold) !important;
    box-shadow: 0 8px 22px rgba(240,180,41,.35);
}
.scroll-to-top .scroll-icon i { color: var(--sp-ink) !important; }

.preloader { background-color: var(--sp-paper) !important; }

.cookies-card, .cookie__wrapper {
    background: var(--sp-white) !important;
    color: var(--sp-slate) !important;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 16px;
    box-shadow: var(--sp-shadow-lg) !important;
}

.modal-content { background-color: var(--sp-white); border: 1px solid var(--sp-cloud); border-radius: 18px; }
.modal-header, .modal-footer { border-color: var(--sp-line); }

.nav-tabs.custom--style .nav-item .nav-link,
.nav-tabs.custom--style-two .nav-item .nav-link { color: var(--sp-slate); }
.nav-tabs.custom--style .nav-item .nav-link.active,
.nav-tabs.custom--style-two .nav-item .nav-link.active { color: var(--sp-gold-deep); }

/* dashboard shell (logged-in area) */
.sidebar, .dashboard { background-color: var(--sp-paper) !important; }
.sidebar { border-right: 1px solid var(--sp-cloud); }

/* disabled / readonly fields → light, not dark */
.form-control:disabled, .form-control[readonly],
.form--control:disabled, .form--control[readonly] {
    background-color: #EEF2F9 !important;
    color: var(--sp-mute) !important;
    border-color: var(--sp-cloud) !important;
}
.invest-badge__thumb__mask { background: var(--sp-cloud) !important; }

/* accessible gold focus ring */
a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 2px solid rgba(240,180,41,.85); outline-offset: 2px;
}