/* ════════════════════════════════════════
   DARK OVERRIDE — loads last, wins always
   ════════════════════════════════════════ */

/* BASE */
html, body {
    background-color: #0D0D0D !important;
    background-image: none !important;
    color: #EAEAEA !important;
}

/* HIDE OLD HEADER ELEMENTS */
.header_top,
.header-middle,
.header-bottom,
.navbar,
.navbar-default,
.navbar-header,
#menuTop,
.jackpotMobile,
#jackpotMobile,
.carosel,
#caro,
#footer,
.back-to-top {
    display: none !important;
}

/* CONTAINER */
.container,
.container-fluid {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* INPUTS & SELECTS */
input,
input.form-control,
select,
select.form-control,
textarea,
textarea.form-control {
    background: #161616 !important;
    background-color: #161616 !important;
    border: 1px solid #252525 !important;
    border-radius: 8px !important;
    color: #EAEAEA !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input:focus,
input.form-control:focus,
select:focus,
select.form-control:focus,
textarea:focus,
textarea.form-control:focus {
    border-color: #C9A84C !important;
    box-shadow: none !important;
    background-color: #161616 !important;
    color: #EAEAEA !important;
}

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

/* BUTTONS */
.btn,
.btn-primary,
.btn-default,
.btn-group > .btn {
    background: #161616 !important;
    background-color: #161616 !important;
    border: 1px solid #252525 !important;
    color: #EAEAEA !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: #252525 !important;
    background-color: #252525 !important;
    color: #C9A84C !important;
    border-color: #C9A84C !important;
    box-shadow: none !important;
}

/* BTN GROUP */
.btn-group,
.btn-group-justified,
.btn-group-lg {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* DROPDOWNS */
.dropdown-menu,
.provider-list {
    background: #1A1A1A !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

.dropdown-menu > li > a,
.provider-item {
    color: #EAEAEA !important;
    background: transparent !important;
}

.dropdown-menu > li > a:hover,
.provider-item:hover {
    background: #222 !important;
    color: #C9A84C !important;
}

/* TABLES */
table,
.table {
    color: #EAEAEA !important;
    background: transparent !important;
}

.table > thead > tr > th {
    border-bottom: 1px solid #252525 !important;
    color: #555 !important;
    background: transparent !important;
}

.table > tbody > tr > td {
    border-top: 1px solid #1A1A1A !important;
    background: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.02) !important;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(201,168,76,0.05) !important;
}

/* CARDS / PANELS */
.panel,
.panel-default,
.panel-body,
.panel-heading {
    background: #161616 !important;
    border-color: #252525 !important;
    color: #EAEAEA !important;
}

/* LINKS */
a { color: #EAEAEA !important; }
a:hover { color: #C9A84C !important; text-decoration: none !important; }

/* MAIN CONTENT SPACING */
.main-content {
    padding-bottom: 80px !important;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0D0D0D; }
::-webkit-scrollbar-thumb { background: #252525; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #C9A84C; }

/* ════════════════════════════════════════
   HEADER
   ════════════════════════════════════════ */

.top-header {
    background: #0D0D0D !important;
    border-bottom: 1px solid #252525 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

.top-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
}

.header-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.header-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #C9A84C !important;
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

.header-username {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #EAEAEA !important;
}

.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.balance-pill {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #161616 !important;
    border: 1px solid #252525 !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
}

.balance-amount {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #C9A84C !important;
}

.balance-currency {
    font-size: 11px !important;
    color: #555 !important;
}

.reload-btn {
    font-size: 16px !important;
    color: #555 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: color 0.15s !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.reload-btn:hover { color: #C9A84C !important; }

.menu-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: #161616 !important;
    border: 1px solid #252525 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: #EAEAEA !important;
}

.menu-btn:hover { border-color: #C9A84C !important; }

.btn-login {
    background: #C9A84C !important;
    color: #000 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.btn-login:hover { opacity: 0.85 !important; color: #000 !important; }

/* ════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════ */

.sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.7) !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s !important;
}

.sidebar-overlay.open { opacity: 1 !important; pointer-events: all !important; }

.sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 280px !important;
    height: 100% !important;
    background: #161616 !important;
    border-left: 1px solid #252525 !important;
    z-index: 1001 !important;
    transform: translateX(100%) !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
}

.sidebar.open { transform: translateX(0) !important; }

.sidebar-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #252525 !important;
}

.sidebar-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #C9A84C !important;
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar-name { font-size: 14px !important; font-weight: 600 !important; color: #EAEAEA !important; }
.sidebar-role { font-size: 11px !important; color: #555 !important; }

.close-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #252525 !important;
    border: none !important;
    color: #555 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar-balance {
    margin: 14px 16px !important;
    background: rgba(201,168,76,0.08) !important;
    border: 1px solid rgba(201,168,76,0.2) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
}

.sb-label { font-size: 10px !important; color: #555 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 4px !important; }
.sb-amount { font-size: 22px !important; font-weight: 600 !important; color: #C9A84C !important; }
.sb-currency { font-size: 12px !important; color: #555 !important; margin-left: 4px !important; }

.sidebar-nav { flex: 1 !important; padding: 8px 10px !important; }

.sidebar-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 8px !important;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
}

.sidebar-item:hover { background: rgba(255,255,255,0.04) !important; color: #EAEAEA !important; }
.sidebar-item.active { background: rgba(201,168,76,0.08) !important; color: #C9A84C !important; }

.sidebar-divider { height: 1px !important; background: #252525 !important; margin: 6px 10px !important; }

.sidebar-logout { padding: 14px 16px !important; border-top: 1px solid #252525 !important; }

.logout-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #c0392b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
}

.logout-link:hover { background: rgba(192,57,43,0.08) !important; color: #c0392b !important; }

/* ════════════════════════════════════════
   BOTTOM NAV
   ════════════════════════════════════════ */

.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    background: #161616 !important;
    border-top: 1px solid #252525 !important;
    padding: 10px 0 20px !important;
    z-index: 100 !important;
}

.nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 0 !important;
    text-decoration: none !important;
    color: #555 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.nav-item:hover { color: #EAEAEA !important; text-decoration: none !important; }
.nav-item.active { color: #C9A84C !important; }
.nav-icon { font-size: 20px !important; line-height: 1 !important; }

/* ════════════════════════════════════════
   JACKPOT & TIERS
   ════════════════════════════════════════ */

.jackpot-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: #161616 !important;
    border-bottom: 1px solid #2A2208 !important;
    text-decoration: none !important;
}

.jackpot-banner-label {
    font-size: 10px !important;
    color: #555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 2px !important;
}

.jackpot-banner-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #C9A84C !important;
}

.tiers {
    display: flex !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    background: #0D0D0D !important;
}

.tier {
    flex: 1 !important;
    background: #161616 !important;
    border: 1px solid #252525 !important;
    border-radius: 8px !important;
    padding: 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
}

.tier-icon { font-size: 20px !important; line-height: 1 !important; }
.tier-val  { font-size: 13px !important; font-weight: 600 !important; color: #EAEAEA !important; }
.tier:nth-child(1) .tier-val { color: #CD7F32 !important; }
.tier:nth-child(2) .tier-val { color: #B0B0BE !important; }
.tier:nth-child(3) .tier-val { color: #C9A84C !important; }

.welcome-text {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.guest-avatar {
    background: #252525 !important;
    color: #555 !important;
}

.header-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}