/* =========================================================
   BKDATADEALS GLOBAL THEME SYSTEM
   ONLY TWO THEMES:
   1. BLACK & GOLD
   2. BLUE TECH
   ========================================================= */


/* =========================================================
   DEFAULT = BLACK & GOLD
   ========================================================= */

:root,
html[data-theme="black-gold"],
body[data-theme="black-gold"]{

    --theme-bg:#080909;
    --theme-bg-2:#0d0f0e;
    --theme-panel:#111311;
    --theme-panel-2:#151715;

    --theme-text:#f7f4ec;
    --theme-text-soft:#d9d6ce;
    --theme-muted:#949991;

    --theme-primary:#e7b949;
    --theme-primary-2:#ffd66b;
    --theme-primary-dark:#a97d17;

    --theme-accent:#f0c85d;

    --theme-border:rgba(231,185,73,.20);
    --theme-border-soft:rgba(255,255,255,.10);

    --theme-glow:rgba(231,185,73,.18);

    --theme-success:#39dc98;
    --theme-danger:#ff6b6b;
    --theme-warning:#ffc857;

    --theme-input:#0d0f0e;

    --theme-button-text:#111;

    --theme-grid:
        rgba(231,185,73,.035);

}


/* =========================================================
   BLUE TECH THEME
   ========================================================= */

html[data-theme="blue-tech"],
body[data-theme="blue-tech"]{

    /* Compatibility key remains blue-tech, but this is the public Light mode. */
    --theme-bg:#f4f8fb;
    --theme-bg-2:#ffffff;
    --theme-panel:#ffffff;
    --theme-panel-2:#f1f6f9;

    --theme-text:#17212a;
    --theme-text-soft:#334554;
    --theme-muted:#667987;

    --theme-primary:#137ab8;
    --theme-primary-2:#2196d2;
    --theme-primary-dark:#0c5f93;

    --theme-accent:#137ab8;

    --theme-border:rgba(19,122,184,.28);
    --theme-border-soft:rgba(35,65,84,.14);

    --theme-glow:rgba(19,122,184,.10);

    --theme-success:#16945a;
    --theme-danger:#d7475c;
    --theme-warning:#a86d00;

    --theme-input:#ffffff;

    --theme-button-text:#ffffff;

    --theme-grid:
        rgba(19,122,184,.035);

}


/* =========================================================
   GLOBAL PAGE
   ========================================================= */

html,
body{

    background:
        radial-gradient(
            circle at 85% 10%,
            var(--theme-glow),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 80%,
            var(--theme-glow),
            transparent 25%
        ),
        var(--theme-bg) !important;

    color:var(--theme-text) !important;

    transition:
        background .35s ease,
        color .35s ease;

}


/* =========================================================
   TECH GRID
   ========================================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-5;

    opacity:.65;

    background-image:

        linear-gradient(
            var(--theme-grid) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            var(--theme-grid) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

}


/* =========================================================
   TEXT
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
strong,
small,
li{

    color:inherit;

}


/* Secondary text */

p,
.text-muted,
.muted,
.subtitle,
.description{

    color:var(--theme-muted);

}


/* =========================================================
   LINKS
   ========================================================= */

a{

    color:var(--theme-primary);

}


a:hover{

    color:var(--theme-primary-2);

}


/* =========================================================
   HEADER
   ========================================================= */

.topbar,
header{

    background:
        rgba(5,7,8,.92) !important;

    border-bottom:
        1px solid var(--theme-border-soft) !important;

    color:var(--theme-text) !important;

    backdrop-filter:
        blur(18px);

}


html[data-theme="blue-tech"] .topbar,
body[data-theme="blue-tech"] .topbar,
html[data-theme="blue-tech"] header,
body[data-theme="blue-tech"] header{

    background:
        rgba(255,255,255,.96) !important;
    border-bottom-color:rgba(35,65,84,.14) !important;
    box-shadow:0 8px 28px rgba(37,71,94,.08);

}


/* Navigation */

nav a,
.topbar a{

    color:var(--theme-text-soft) !important;

}


nav a:hover,
.topbar a:hover,
nav a.active{

    color:var(--theme-primary) !important;

}


/* =========================================================
   PANELS / CARDS
   ========================================================= */

.card,
.panel,
.order-panel,
.login-card,
.tech-card,
.network-box,
.bundle,
.stat-card,
.wallet-card,
.order-card,
.account-card,
.agent-card,
.dashboard-card{

    background:
        linear-gradient(
            145deg,
            var(--theme-panel),
            var(--theme-panel-2)
        ) !important;

    color:var(--theme-text) !important;

    border-color:
        var(--theme-border-soft) !important;

}


/* =========================================================
   INPUTS
   ========================================================= */

input,
textarea,
select{

    background:
        var(--theme-input) !important;

    color:
        var(--theme-text) !important;

    border:
        1px solid
        var(--theme-border-soft) !important;

}


input::placeholder,
textarea::placeholder{

    color:
        var(--theme-muted) !important;

}


input:focus,
textarea:focus,
select:focus{

    border-color:
        var(--theme-primary) !important;

    box-shadow:
        0 0 0 3px
        var(--theme-glow) !important;

}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.primary-btn,
.btn-primary,
.login-button,
.buy-button,
.action-button{

    color:
        var(--theme-button-text) !important;

    background:
        linear-gradient(
            135deg,
            var(--theme-primary),
            var(--theme-primary-2)
        ) !important;

    border-color:
        var(--theme-primary) !important;

}


button:hover,
.primary-btn:hover,
.btn-primary:hover,
.login-button:hover,
.buy-button:hover,
.action-button:hover{

    box-shadow:
        0 12px 35px
        var(--theme-glow) !important;

    transform:
        translateY(-1px);

}


/* Secondary buttons */

.secondary-btn,
.btn-secondary{

    color:
        var(--theme-text) !important;

    background:
        var(--theme-panel) !important;

    border:
        1px solid
        var(--theme-border-soft) !important;

}


.secondary-btn:hover,
.btn-secondary:hover{

    border-color:
        var(--theme-primary) !important;

    color:
        var(--theme-primary) !important;

}


/* =========================================================
   GOLD/BLUE ACCENT TEXT
   ========================================================= */

.eyebrow,
.section-label,
.login-eyebrow,
.bundle-network-name,
.bundle-price,
.tech-title,
.theme-accent{

    color:
        var(--theme-primary) !important;

}


/* =========================================================
   NETWORK BUTTONS
   ========================================================= */

.network{

    background:
        var(--theme-panel) !important;

    color:
        var(--theme-text) !important;

    border-color:
        var(--theme-border-soft) !important;

}


.network:hover{

    border-color:
        var(--theme-primary) !important;

}


.network.active{

    background:
        var(--theme-primary) !important;

    color:
        var(--theme-button-text) !important;

    border-color:
        var(--theme-primary) !important;

}


/* =========================================================
   BUNDLES
   ========================================================= */

.bundle{

    background:
        var(--theme-panel) !important;

    color:
        var(--theme-text) !important;

}


.bundle:hover{

    border-color:
        var(--theme-primary) !important;

}


.bundle.selected{

    background:
        linear-gradient(
            135deg,
            var(--theme-glow),
            transparent
        ) !important;

    border-color:
        var(--theme-primary) !important;

}


/* =========================================================
   ICON BOXES
   ========================================================= */

.bundle-icon,
.login-icon,
.tech-icon,
.step-number,
.announcement-icon{

    background:
        var(--theme-glow) !important;

    color:
        var(--theme-primary) !important;

    border-color:
        var(--theme-border) !important;

}


/* =========================================================
   STATUS
   ========================================================= */

.live,
.live-status,
.network-status,
.online,
.status-success{

    color:
        var(--theme-success) !important;

}


.live i,
.network-status i{

    background:
        var(--theme-success) !important;

    box-shadow:
        0 0 12px
        var(--theme-success);

}


/* =========================================================
   TABLES
   ========================================================= */

table{

    color:
        var(--theme-text) !important;

}


th{

    background:
        var(--theme-panel-2) !important;

    color:
        var(--theme-primary) !important;

}


td{

    background:
        var(--theme-panel) !important;

    color:
        var(--theme-text-soft) !important;

    border-color:
        var(--theme-border-soft) !important;

}


tr:hover td{

    background:
        var(--theme-panel-2) !important;

}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown,
.user-menu,
.account-menu,
.menu-dropdown{

    background:
        var(--theme-panel) !important;

    color:
        var(--theme-text) !important;

    border-color:
        var(--theme-border-soft) !important;

}


.dropdown a,
.user-menu a,
.account-menu a{

    color:
        var(--theme-text-soft) !important;

}


.dropdown a:hover,
.user-menu a:hover,
.account-menu a:hover{

    background:
        var(--theme-glow) !important;

    color:
        var(--theme-primary) !important;

}


/* =========================================================
   ANNOUNCEMENTS
   ========================================================= */

.live-announcement{

    background:
        linear-gradient(
            135deg,
            var(--theme-glow),
            rgba(255,255,255,.015)
        ) !important;

    border-color:
        var(--theme-border) !important;

}


.announcement-label{

    color:
        var(--theme-primary) !important;

}


/* =========================================================
   FOOTER
   ========================================================= */

footer{

    background:
        var(--theme-bg-2) !important;

    color:
        var(--theme-muted) !important;

    border-top:
        1px solid
        var(--theme-border-soft) !important;

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{

    width:9px;

}


::-webkit-scrollbar-track{

    background:
        var(--theme-bg);

}


::-webkit-scrollbar-thumb{

    background:
        var(--theme-primary-dark);

    border-radius:10px;

}


::-webkit-scrollbar-thumb:hover{

    background:
        var(--theme-primary);

}


/* =========================================================
   SELECTION
   ========================================================= */

::selection{

    background:
        var(--theme-primary);

    color:
        var(--theme-button-text);

}


/* =========================================================
   THEME SWITCHER
   ========================================================= */

.theme-switcher{

    display:flex;

    align-items:center;

    gap:8px;

    padding:5px;

    border:
        1px solid
        var(--theme-border-soft);

    border-radius:12px;

    background:
        var(--theme-panel);

}


.theme-option{

    border:0 !important;

    min-height:36px;

    padding:
        0 12px;

    border-radius:8px;

    background:
        transparent !important;

    color:
        var(--theme-muted) !important;

    font-size:11px;

    font-weight:900;

    cursor:pointer;

}


.theme-option:hover{

    color:
        var(--theme-text) !important;

    background:
        var(--theme-glow) !important;

    transform:none !important;

}


.theme-option.active{

    background:
        var(--theme-primary) !important;

    color:
        var(--theme-button-text) !important;

}


/* =========================================================
   BLUE TECH SPECIAL EFFECTS
   ========================================================= */

html[data-theme="blue-tech"] .tech-card,
body[data-theme="blue-tech"] .tech-card{

    box-shadow:
        0 30px 100px
        rgba(0,110,255,.18),
        inset 0 0 40px
        rgba(61,169,255,.025);

}


html[data-theme="blue-tech"] .tech-card::before,
body[data-theme="blue-tech"] .tech-card::before{

    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(61,169,255,.16),
            transparent 60%
        );

}


html[data-theme="blue-tech"] .network-line,
body[data-theme="blue-tech"] .network-line{

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(61,169,255,.75),
            transparent
        );

}


/* =========================================================
   MOBILE THEME SWITCHER
   ========================================================= */

@media(max-width:600px){

    .theme-switcher{

        width:100%;

        justify-content:center;

    }

    .theme-option{

        flex:1;

    }

}

/* =========================================================
   FINAL PUBLIC LIGHT-MODE CONSISTENCY
   ========================================================= */
html[data-theme="blue-tech"],
body[data-theme="blue-tech"]{color-scheme:light;}
html[data-theme="black-gold"],
body[data-theme="black-gold"]{color-scheme:dark;}
html[data-theme="blue-tech"] body,
body[data-theme="blue-tech"]{background:var(--theme-bg)!important;color:var(--theme-text)!important;}
html[data-theme="blue-tech"] :is(.page-card,.platform-card,.manager-card,.reseller-card,.track-card,.account-card,.wallet-card,.commission-section,.earnings-cards>div),
body[data-theme="blue-tech"] :is(.page-card,.platform-card,.manager-card,.reseller-card,.track-card,.account-card,.wallet-card,.commission-section,.earnings-cards>div){
    background:var(--theme-panel)!important;
    color:var(--theme-text)!important;
    border-color:var(--theme-border-soft)!important;
    box-shadow:0 14px 36px rgba(37,71,94,.08)!important;
}
html[data-theme="blue-tech"] :is(input,select,textarea),
body[data-theme="blue-tech"] :is(input,select,textarea){
    background:#fff!important;color:var(--theme-text)!important;border-color:rgba(35,65,84,.18)!important;
}
html[data-theme="blue-tech"] :is(input,textarea)::placeholder,
body[data-theme="blue-tech"] :is(input,textarea)::placeholder{color:#8292a0!important;}
html[data-theme="blue-tech"] :is(code,pre),
body[data-theme="blue-tech"] :is(code,pre){background:#eef4f8!important;color:#1f3342!important;border-color:rgba(35,65,84,.14)!important;}