/*
    Theme: Gaming Dark
    Style: Modern Esports / Gaming Store
    Compatible with: Prometheus IPN 1.6+
*/

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* =============================================
   ROOT VARIABLES
   ============================================= */
:root {
    --g-bg-primary:    #080c14;
    --g-bg-secondary:  #0d1221;
    --g-bg-card:       #111827;
    --g-bg-card-alt:   #0f172a;
    --g-bg-navbar:     #060a14;
    --g-accent:        #00d4ff;
    --g-accent-glow:   rgba(0, 212, 255, 0.20);
    --g-accent2:       #7c3aed;
    --g-cta:           #f43f5e;
    --g-cta-hover:     #e11d48;
    --g-text:          #e2e8f0;
    --g-text-muted:    #64748b;
    --g-border:        rgba(0, 212, 255, 0.10);
    --g-border-strong: rgba(0, 212, 255, 0.25);
}

/* =============================================
   GLOBAL
   ============================================= */
html, body, .wrap {
    font-family: 'Inter', 'Open Sans', sans-serif !important;
    background-color: var(--g-bg-primary) !important;
    color: var(--g-text) !important;
}

body {
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 0%, rgba(0, 212, 255, 0.06) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
}

h1, h2, h3, h4, h5, .header {
    font-family: 'Rajdhani', 'BebasNeue', sans-serif !important;
    letter-spacing: 1px !important;
    color: #fff !important;
}

h2 { color: #f1f5f9 !important; }
h6 { color: var(--g-accent) !important; }

a { color: var(--g-accent) !important; }
a:hover, a:focus { color: #fff !important; }

hr {
    border-color: var(--g-border-strong) !important;
    margin: 16px 0 !important;
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar-inverse {
    background: linear-gradient(180deg, #050810 0%, var(--g-bg-navbar) 100%) !important;
    border-bottom: 1px solid var(--g-border-strong) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6) !important;
}

.navbar-inverse .navbar-nav > li > a {
    color: #94a3b8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #fff !important;
    background-color: rgba(0, 212, 255, 0.08) !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: var(--g-accent) !important;
    background-color: rgba(0, 212, 255, 0.10) !important;
}

/* =============================================
   BANNER
   ============================================= */
.banner {
    background: linear-gradient(135deg, #050810 0%, #0d1221 50%, #070b16 100%) !important;
    border-bottom: 1px solid var(--g-border) !important;
    position: relative !important;
    overflow: hidden !important;
}

.banner::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(90deg, rgba(0,212,255,0.04) 0%, transparent 50%, rgba(124,58,237,0.04) 100%) !important;
    pointer-events: none !important;
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
    background: linear-gradient(180deg, var(--g-bg-secondary) 0%, #050810 100%) !important;
    border-top: 1px solid var(--g-border-strong) !important;
    color: var(--g-text-muted) !important;
}

.footer a { color: var(--g-accent) !important; }
.footer a:hover { color: #fff !important; }
.version { color: rgba(0,212,255,0.4) !important; }

/* =============================================
   CONTENT BOXES / CARDS
   ============================================= */
.options,
.panel-body,
.stat-box,
#sortable li,
.dashboard-widget-small-box,
.darker-box,
.info-box {
    background: var(--g-bg-card) !important;
    border: 1px solid var(--g-border) !important;
    color: #94a3b8 !important;
    border-radius: 4px !important;
    transition: border-color 0.2s ease !important;
}

.options:hover, .panel-body:hover {
    border-color: var(--g-border-strong) !important;
}

.panel-body > .panel-header,
.stat-box-header {
    background: var(--g-bg-card-alt) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--g-border-strong) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 4px 4px 0 0 !important;
}

.panel-body .panel-inner { color: var(--g-text-muted) !important; }

.info-box {
    border-left: 3px solid var(--g-accent) !important;
    background: rgba(0, 212, 255, 0.04) !important;
}

/* =============================================
   DASHBOARD WIDGETS
   ============================================= */
.dashboard-widget-small-box {
    background: var(--g-bg-card) !important;
    border-top: 2px solid var(--g-accent) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

.dashboard-widget-small-box .element { color: var(--g-accent) !important; }
.dashboard-widget-small-box .caption { color: var(--g-text-muted) !important; }
.dashboard-widget-small-box i,
#sortable li i { color: var(--g-accent) !important; }

/* =============================================
   STORE / SHOP CARDS
   ============================================= */
.store-box {
    background: var(--g-bg-card) !important;
    border: 1px solid var(--g-border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.store-box:hover {
    border-color: var(--g-border-strong) !important;
    box-shadow: 0 8px 32px rgba(0,212,255,0.10) !important;
    transform: translateY(-2px) !important;
}

.store-box-header {
    background: linear-gradient(135deg, #0d1221 0%, #111827 100%) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--g-border-strong) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 1.1rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.store-box-upper span,
.store-box-upper li {
    border-color: var(--g-border) !important;
    color: #e2e8f0 !important;
}

/* =============================================
   BUY BUTTON
   ============================================= */
.buy-btn {
    background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%) !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(244,63,94,0.3) !important;
}

.buy-btn:hover, .buy-btn:focus {
    background: linear-gradient(135deg, #e11d48 0%, #b91c1c 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(244,63,94,0.5) !important;
    transform: translateY(-1px) !important;
}

/* =============================================
   CATEGORY LINKS
   ============================================= */
.categoryLink {
    background: rgba(0, 212, 255, 0.08) !important;
    color: var(--g-accent) !important;
    border: 1px solid var(--g-border-strong) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
}

.categoryLink:hover {
    background: rgba(0, 212, 255, 0.18) !important;
    color: #fff !important;
    border-color: var(--g-accent) !important;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-prom {
    background: var(--g-bg-card-alt) !important;
    color: #e2e8f0 !important;
    border: 1px solid var(--g-border-strong) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
}

.btn-prom:hover, .btn-prom:focus {
    background: rgba(0,212,255,0.08) !important;
    color: var(--g-accent) !important;
    border-color: var(--g-accent) !important;
}

.btn-default {
    background: var(--g-bg-card) !important;
    color: #e2e8f0 !important;
    border-color: var(--g-border-strong) !important;
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
    background: rgba(0,212,255,0.08) !important;
    border-color: var(--g-accent) !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(16,185,129,0.3) !important;
}

.btn-success:hover { box-shadow: 0 4px 15px rgba(16,185,129,0.5) !important; }

.btn-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%) !important;
    border-color: transparent !important;
}

/* =============================================
   FORMS & INPUTS
   ============================================= */
.form-control {
    background: rgba(255,255,255,0.04) !important;
    color: #e2e8f0 !important;
    border: 1px solid var(--g-border-strong) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.form-control:focus {
    background: rgba(0,212,255,0.05) !important;
    border-color: var(--g-accent) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,0.10) !important;
    color: #fff !important;
}

.form-control::placeholder { color: var(--g-text-muted) !important; }

.icheckbox_line-red, .iradio_line-red {
    background: var(--g-bg-card) !important;
    color: #fff !important;
    border-color: var(--g-border-strong) !important;
}

.icheckbox_line-red.checked, .iradio_line-red.checked {
    border-color: var(--g-accent) !important;
}

/* =============================================
   DROPDOWN
   ============================================= */
.dropdown-menu {
    background: #0d1221 !important;
    border: 1px solid var(--g-border-strong) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    border-radius: 4px !important;
    color: #fff !important;
}

.dropdown-menu > li > a { color: #e2e8f0 !important; }

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: rgba(0,212,255,0.08) !important;
    color: var(--g-accent) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: rgba(0,212,255,0.15) !important;
    color: var(--g-accent) !important;
}

/* =============================================
   TABLES
   ============================================= */
.table-striped thead {
    background: var(--g-bg-card-alt) !important;
    color: var(--g-accent) !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
}

.table-striped thead th {
    border-bottom: 1px solid var(--g-border-strong) !important;
}

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

.table { color: #94a3b8 !important; }

/* =============================================
   DASHBOARD NAV
   ============================================= */
.dashboard-nav,
.dashboard-nav a {
    background: var(--g-bg-card-alt) !important;
    border-bottom: 1px solid var(--g-border) !important;
}

.dashboard-nav a {
    color: #94a3b8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-bottom: none !important;
}

.dashboard-nav a:hover,
.dashboard-nav a:focus {
    background: rgba(0,212,255,0.08) !important;
    color: var(--g-accent) !important;
}

.dashboard-nav a.active {
    background: rgba(0,212,255,0.12) !important;
    color: var(--g-accent) !important;
    border-bottom: 2px solid var(--g-accent) !important;
}

/* =============================================
   MAIN SIDE MENU
   ============================================= */
.main-menu-box, .version-marker {
    background: var(--g-bg-card-alt) !important;
    border-right: 1px solid var(--g-border) !important;
}

.main-menu-box ul li {
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    transition: all 0.15s ease !important;
}

.main-menu-box ul li:hover {
    background: rgba(0,212,255,0.08) !important;
    color: var(--g-accent) !important;
    padding-left: 20px !important;
}

.main-menu-box ul li.active {
    background: rgba(0,212,255,0.12) !important;
    color: var(--g-accent) !important;
    border-left: 3px solid var(--g-accent) !important;
}

.version-marker { color: var(--g-text-muted) !important; }

.main-menu-box .sub-menu { background: #060912 !important; }
.main-menu-box ul.sub-menu .submenu-header { color: var(--g-accent) !important; }

.content-page-top {
    background: var(--g-bg-card-alt) !important;
    border-bottom: 1px solid var(--g-border) !important;
}
.content-page-top > span { color: #94a3b8 !important; }
.content-page-top > span > i { color: var(--g-accent) !important; }
.content-page-top:after { border-color: var(--g-bg-card-alt) transparent transparent !important; }

/* =============================================
   PAGINATION
   ============================================= */
.pagination li a {
    background: var(--g-bg-card) !important;
    color: #94a3b8 !important;
    border-color: var(--g-border) !important;
}

.pagination li a:hover,
.pagination li a:focus {
    background: rgba(0,212,255,0.1) !important;
    color: var(--g-accent) !important;
    border-color: var(--g-accent) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    background: var(--g-accent) !important;
    color: #000 !important;
    border-color: var(--g-accent) !important;
}

/* =============================================
   BS CALLOUTS
   ============================================= */
.bs-callout {
    background: var(--g-bg-card) !important;
    border: 1px solid var(--g-border) !important;
    color: #e2e8f0 !important;
    border-radius: 4px !important;
}

.bs-callout-info    { border-left: 3px solid #38bdf8 !important; }
.bs-callout-danger  { border-left: 3px solid #f43f5e !important; }
.bs-callout-success { border-left: 3px solid #10b981 !important; }

/* =============================================
   MODAL
   ============================================= */
.modal-content {
    background: var(--g-bg-card) !important;
    border: 1px solid var(--g-border-strong) !important;
    color: #e2e8f0 !important;
    border-radius: 6px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
}

.modal-header {
    background: var(--g-bg-card-alt) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--g-border-strong) !important;
    border-radius: 6px 6px 0 0 !important;
}

.modal-footer {
    background: var(--g-bg-card-alt) !important;
    border-top: 1px solid var(--g-border) !important;
    border-radius: 0 0 6px 6px !important;
}

/* =============================================
   CREDITS / STORE SALE BOX
   ============================================= */
.credits {
    background: linear-gradient(135deg, #0f2027 0%, #0d1221 100%) !important;
    border: 1px solid var(--g-border-strong) !important;
    color: #e2e8f0 !important;
    border-radius: 4px !important;
}

.credit-content {
    border-color: var(--g-border) !important;
    color: var(--g-accent) !important;
}

.credit-content span { color: #94a3b8 !important; }

.sale-box {
    background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%) !important;
    color: #fff !important;
}

/* =============================================
   TICKET
   ============================================= */
.ticket-header {
    background: var(--g-bg-card-alt) !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid var(--g-border) !important;
}

/* =============================================
   NEWS
   ============================================= */
.news-block {
    background: var(--g-bg-card) !important;
    border: 1px solid var(--g-border) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}

.news-block:hover { border-color: var(--g-border-strong) !important; }
.news-block a { color: var(--g-accent) !important; }
.news-block a:hover { color: #fff !important; }
.news-block span { color: var(--g-text-muted) !important; }

/* =============================================
   PKG STEP (Package purchase flow)
   ============================================= */
.pkg-step {
    background: var(--g-bg-card) !important;
    border: 1px solid var(--g-border) !important;
    color: #94a3b8 !important;
    border-radius: 4px !important;
}

/* =============================================
   SRV BOX (Server selector)
   ============================================= */
.srv-box:hover {
    background: rgba(0,212,255,0.06) !important;
    border-color: var(--g-border-strong) !important;
}

.srv-box:hover .fa { color: var(--g-accent) !important; }

.srv-label {
    background: var(--g-accent) !important;
    color: #000 !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
}

/* =============================================
   NOTIFY ICON
   ============================================= */
.notify-icon {
    background: var(--g-accent) !important;
    border: 1px solid var(--g-accent) !important;
    color: #000 !important;
    border-radius: 2px !important;
    font-weight: 700 !important;
}

/* =============================================
   SELECT / BOOTSTRAP SELECT
   ============================================= */
select,
select.form-control {
    background: #0d1221 !important;
    color: #e2e8f0 !important;
    border: 1px solid var(--g-border-strong) !important;
    border-radius: 4px !important;
}

select option,
select.form-control option {
    background: #0d1221 !important;
    color: #e2e8f0 !important;
}

/* Bootstrap Select button toggle */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > button,
.bootstrap-select .btn,
.bootstrap-select .btn-default {
    background: #0d1221 !important;
    color: #e2e8f0 !important;
    border: 1px solid var(--g-border-strong) !important;
    border-radius: 4px !important;
}

.bootstrap-select .filter-option,
.bootstrap-select .filter-option-inner,
.bootstrap-select .filter-option-inner-inner {
    color: #e2e8f0 !important;
    background: transparent !important;
}

/* The open dropdown panel */
.bootstrap-select.open > .dropdown-menu,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu.inner,
ul.dropdown-menu.inner {
    background: #0d1221 !important;
    border: 1px solid var(--g-border-strong) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8) !important;
}

/* Every list item */
.bootstrap-select .dropdown-menu li,
.bootstrap-select .dropdown-menu li > a,
.bootstrap-select .dropdown-menu li > a > span,
.bootstrap-select .dropdown-menu > li > a,
.bootstrap-select .dropdown-menu > li > a .text {
    background: #0d1221 !important;
    color: #e2e8f0 !important;
}

/* Hover state */
.bootstrap-select .dropdown-menu li > a:hover,
.bootstrap-select .dropdown-menu li > a:focus,
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li > a:focus {
    background: rgba(0,212,255,0.12) !important;
    color: var(--g-accent) !important;
    outline: none !important;
}

/* Selected / active item */
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li.active > a,
.bootstrap-select .dropdown-menu > .selected > a,
.bootstrap-select .dropdown-menu > .active > a {
    background: rgba(0,212,255,0.18) !important;
    color: var(--g-accent) !important;
}

/* Search input inside bootstrap-select */
.bootstrap-select .bs-searchbox,
.bootstrap-select .bs-searchbox input,
.bootstrap-select .bs-searchbox .form-control {
    background: #060912 !important;
    color: #e2e8f0 !important;
    border-color: var(--g-border-strong) !important;
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: var(--g-bg-primary) !important; }
::-webkit-scrollbar-thumb {
    background: rgba(0,212,255,0.3) !important;
    border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.6) !important; }

/* =============================================
   SELECTION
   ============================================= */
::selection { background: rgba(0,212,255,0.3) !important; color: #fff !important; }