/* IRIDESCENT_GLOBAL_THEME_V1 */

:root{
    --iri-bg:#11131d;
    --iri-bg2:#171322;

    --iri-panel:#211d30;
    --iri-panel2:#26374b;
    --iri-panel3:#182735;

    --iri-blue:#405d7c;
    --iri-cyan:#67ddc4;
    --iri-aqua:#6caeb5;

    --iri-pink:#b36488;
    --iri-magenta:#913f73;

    --iri-gold:#dfba93;
    --iri-cream:#ebeec8;

    --iri-text:#f2f2eb;
    --iri-muted:#969aaa;
    --iri-border:rgba(103,221,196,.13);
}


/* =========================
   FUNDO
   ========================= */

html,
body{
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(103,221,196,.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 92% 13%,
            rgba(179,100,136,.15),
            transparent 32%
        ),
        radial-gradient(
            circle at 55% 52%,
            rgba(223,186,147,.06),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #171322 0%,
            #101923 55%,
            #0b1018 100%
        ) !important;

    color:var(--iri-text) !important;
}


/* =========================
   CONTAINER PRINCIPAL
   ========================= */

.app-container,
.page-container,
.main-container,
.content-container{
    background:
        linear-gradient(
            180deg,
            rgba(24,22,37,.985),
            rgba(14,21,32,.99)
        ) !important;
}


/* =========================
   CABEÇALHOS
   ========================= */

.top-header,
.page-header,
.header,
.vip-top{
    background:
        linear-gradient(
            110deg,
            #211d30 0%,
            #26394d 48%,
            #51364d 100%
        ) !important;

    border-bottom:
        1px solid rgba(103,221,196,.14) !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.25) !important;
}

.header-title,
.page-title{
    color:var(--iri-text) !important;
}


/* =========================
   CARDS E BLOCOS
   ========================= */

.profile-card,
.vip-card,
.section-card,
.menu-group,
.menu-section,
.history-card,
.history-item,
.payment-card,
.method-card,
.deposit-card,
.withdraw-card,
.invite-box,
.rules,
.stats,
.stat-card,
.quick-action-btn,
.balance-card,
.security-card{
    background:
        linear-gradient(
            145deg,
            rgba(37,36,55,.98),
            rgba(20,31,44,.99)
        ) !important;

    border-color:
        rgba(108,174,181,.13) !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.20) !important;
}


/* =========================
   SALDO / NÚMEROS IMPORTANTES
   ========================= */

.balance,
.balance-value,
.saldo,
.saldo-value,
.valor-saldo,
.amount-balance{
    color:var(--iri-cyan) !important;
}


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

a{
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.gold,
.highlight,
.bonus-value,
.reward-value{
    color:var(--iri-gold) !important;
}


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

input,
select,
textarea{
    background:
        rgba(20,27,39,.96) !important;

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

    border:
        1px solid rgba(108,174,181,.22) !important;

    outline:none !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:
        rgba(103,221,196,.65) !important;

    box-shadow:
        0 0 0 2px rgba(103,221,196,.08) !important;
}

input::placeholder,
textarea::placeholder{
    color:#747b89 !important;
}


/* =========================
   BOTÕES PRINCIPAIS
   ========================= */

.primary-btn,
.confirm-btn,
.btn-primary,
.deposit-btn,
.withdraw-btn,
.action-btn,
.submit-btn{
    background:
        linear-gradient(
            120deg,
            #67ddc4 0%,
            #4d879b 48%,
            #913f73 100%
        ) !important;

    color:#fff !important;

    border:
        1px solid rgba(235,238,200,.22) !important;

    box-shadow:
        0 6px 18px rgba(103,221,196,.12) !important;
}

.primary-btn:active,
.confirm-btn:active,
.btn-primary:active,
.deposit-btn:active,
.withdraw-btn:active{
    transform:scale(.98);
}


/* =========================
   BOTÕES / OPÇÕES SECUNDÁRIAS
   ========================= */

.amount-option,
.option-btn,
.tab-btn,
.filter-btn{
    background:
        linear-gradient(
            180deg,
            #252437,
            #192431
        ) !important;

    color:#a3a9b6 !important;

    border:
        1px solid rgba(108,174,181,.12) !important;
}

.amount-option.active,
.option-btn.active,
.tab-btn.active,
.filter-btn.active{
    background:
        linear-gradient(
            135deg,
            #405d7c,
            #913f73
        ) !important;

    color:#fff !important;

    border-color:
        rgba(223,186,147,.60) !important;
}


/* =========================
   PERFIL
   ========================= */

.user-card,
.user-info,
.user-balance-area{
    background:
        linear-gradient(
            145deg,
            #252437,
            #182735
        ) !important;

    border-color:
        var(--iri-border) !important;
}

.user-avatar,
.avatar{
    background:
        linear-gradient(
            145deg,
            #67ddc4,
            #405d7c,
            #b36488
        ) !important;
}

.quick-action-btn i{
    color:var(--iri-gold) !important;
}


/* =========================
   CONVITES / BAÚS
   ========================= */

.current-vip-box,
.invite-box{
    background:
        linear-gradient(
            135deg,
            rgba(64,93,124,.42),
            rgba(145,63,115,.30)
        ) !important;

    border-color:
        rgba(223,186,147,.30) !important;
}

.compact-chest.ready,
.chest-ready{
    filter:
        drop-shadow(
            0 0 9px rgba(223,186,147,.34)
        );
}


/* =========================
   VIP
   ========================= */

.level-strip{
    background:
        linear-gradient(
            90deg,
            #221c30,
            #26394b,
            #4b3048
        ) !important;
}

.level-pill{
    background:#292837 !important;
    color:#999ead !important;
}

.level-pill.active{
    background:
        linear-gradient(
            120deg,
            #67ddc4,
            #405d7c,
            #913f73
        ) !important;

    color:#fff !important;
}

.level-pill.current-user-level{
    border-color:
        var(--iri-gold) !important;

    color:var(--iri-gold) !important;
}

.vip-level-card{
    background:
        linear-gradient(
            125deg,
            #bff4eb 0%,
            #90d9dc 45%,
            #b89db5 72%,
            #e0c3a5 100%
        ) !important;
}

.vip-medal,
.mini-medal{
    background:
        radial-gradient(
            circle,
            #379e82 0 49%,
            #116c65 50% 61%,
            #d5ad58 62% 70%,
            #5d436c 71%
        ) !important;
}


/* =========================
   DEPÓSITO / SAQUE
   ========================= */

.payment-method,
.withdraw-info,
.pix-box{
    background:
        linear-gradient(
            145deg,
            #24283a,
            #172637
        ) !important;

    border-color:
        var(--iri-border) !important;
}

.amount-btn,
.valor-btn{
    background:
        linear-gradient(
            180deg,
            #252437,
            #192431
        ) !important;

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

    border-color:
        rgba(108,174,181,.13) !important;
}

.amount-btn.active,
.valor-btn.active{
    background:
        linear-gradient(
            135deg,
            #405d7c,
            #913f73
        ) !important;

    border-color:
        var(--iri-gold) !important;
}


/* =========================
   MODAIS
   ========================= */

.custom-modal,
.modal-overlay{
    background:
        rgba(7,9,14,.78) !important;

    backdrop-filter:
        blur(7px);
}

.custom-modal-box,
.modal-box{
    background:
        linear-gradient(
            145deg,
            #282339,
            #172737
        ) !important;

    border:
        1px solid rgba(103,221,196,.20) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.5) !important;
}


/* =========================
   NAVEGAÇÃO INFERIOR
   ========================= */

.bottom-nav{
    background:
        linear-gradient(
            180deg,
            #211d30,
            #121b27
        ) !important;

    border-top:
        1px solid rgba(103,221,196,.11) !important;
}

.bottom-nav a{
    color:#858997 !important;
}

.bottom-nav a.active{
    color:var(--iri-cyan) !important;
}

.bottom-nav a.active i{
    color:var(--iri-gold) !important;
}


/* =========================
   LINHA IRIDESCENTE
   ========================= */

.top-header::after,
.page-header::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #67ddc4,
            #b36488,
            #dfba93,
            transparent
        );

    opacity:.48;

    pointer-events:none;
}


/* scrollbar */

::-webkit-scrollbar{
    width:5px;
    height:5px;
}

::-webkit-scrollbar-track{
    background:#151522;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            #4d879b,
            #913f73
        );

    border-radius:10px;
}

/* BIG_HEADER_FOOTER_ICONS_V1 */

/* FOOTER */
.bottom-nav i{
    font-size:24px !important;
    line-height:1 !important;
}

.bottom-nav a{
    min-height:62px !important;
    gap:5px !important;
}

.bottom-nav a span:not(.deposit-badge){
    font-size:10px !important;
}


/* HEADER - botões principais */
.header-btn,
.vip-back{
    min-width:36px !important;
    min-height:36px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.header-btn i,
.vip-back i,
.top-header .fa-bars,
.top-header .fa-headset,
.top-header .fa-gear,
.top-header .fa-chevron-left,
.top-header .fa-user{
    font-size:22px !important;
    line-height:1 !important;
}


/* não aumenta o pequeno refresh do saldo */
.saldo-refresh-btn i{
    font-size:11px !important;
}