/*
 * Webzen Modern Theme for WebEngine CMS
 * MODULAR ARCHITECTURE - MASTER CSS
 */

@import url('style_cms.css');
@import url('menu.css');
@import url('profiles.css');
@import url('footer.css');
@import url('top_ticker.css');
@import url('market.css');
@import url('popup.css');
@import url('cta_buttons.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Cinzel:wght@400;700&display=swap');

:root {
    --bg-color: #050608;
    --panel-bg: rgba(10, 12, 18, 0.98);
    --primary-gold: #d4af37;
    --border-color: rgba(212, 175, 55, 0.4);
    --text-main: #e0e0e0;
}

/* 1. GLOBAL CORE */
html, body {
    background-color: #000 !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('../img/bg.png') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center top !important;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

#container { background: transparent !important; width: 100% !important; max-width: 1240px !important; margin: 0 auto !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* 2. HEADER & LOGO */
.header-section { padding: 60px 0 !important; text-align: center; }
.webengine-mu-logo { width: 240px !important; max-width: 240px !important; height: auto !important; margin: 0 auto !important; display: block !important; mix-blend-mode: screen; }

/* 3. NAVBAR (Stlyes in menu.css) */

/* 4. SERVER STATUS */
.status-card {
    display: flex !important; flex-direction: row !important; justify-content: space-around !important; align-items: center !important;
    background: rgba(5, 8, 15, 0.98) !important; border: 1px solid var(--border-color) !important;
    border-radius: 12px !important; padding: 25px !important; width: 100% !important; margin-bottom: 20px;
}
.status-item { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 !important; justify-content: center !important; }
.status-item img { width: 22px !important; filter: sepia(1); }
.status-label { font-size: 11px; color: #888; text-transform: uppercase; line-height: 1; }
.status-value { font-family: 'Cinzel', serif; font-size: 14px; color: var(--primary-gold); font-weight: bold; }
.status-separator { width: 1px; height: 35px; background: rgba(212, 175, 55, 0.15); }

/* 5. AGGRESSIVE DARK MODE FOR MODULES (FIXES WHITE BACKGROUNDS) */
.module-container, .panel, .panel-default, .panel-body, .well, .alert {
    background: var(--panel-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
.panel-heading, .well-sm, .well-lg { background: rgba(212, 175, 55, 0.1) !important; border-bottom: 1px solid var(--border-color) !important; }

/* FIXING WHITE BACKGROUNDS IN RANKINGS & TITLES */
.rankings-title, .module-title { 
    background: transparent !important;
    color: var(--primary-gold) !important; 
    font-family: 'Cinzel', serif !important; 
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* 6. TABLES & DATA */
.table { background: transparent !important; margin-bottom: 0 !important; }
.table tr { background: transparent !important; }
.table tr:hover { background: rgba(255,255,255,0.02) !important; }

/* Fixing table headers backgrounds */
.table tr:first-child, .table thead th { 
    background: rgba(212,175,55,0.15) !important; 
    color: var(--primary-gold) !important; 
    font-weight: bold !important;
    border: 0 !important;
}
.table td { border-top: 1px solid rgba(255,255,255,0.05) !important; border-bottom: 0 !important; padding: 15px !important; color: #ccc !important; vertical-align: middle !important; }
.table a { color: #fff !important; }
.table a:hover { color: var(--primary-gold) !important; text-decoration: none; }

/* Ranking Specific Medals */
.ranking-gold { background: rgba(212,175,55,0.12) !important; }
.ranking-silver { background: rgba(192,192,192,0.08) !important; }
.ranking-bronze { background: rgba(205,127,50,0.08) !important; }

/* MISC */
.gold-text { color: var(--primary-gold) !important; }
.btn-primary { background: var(--primary-gold) !important; color: #000 !important; border: 0 !important; font-weight: bold !important; }
.pulse-icon { width: 10px; height: 10px; background: #2ecc71; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } }