/* === Custom Ranking Submenu Styling === */
#submenu {
    background: rgba(0, 0, 0, 0.65);
    padding: 8px 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #222;
    color: #fff !important;
    font-size: 15px;
}

/* submenu links */
#submenu a {
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
    margin: 0 1px;
    padding: 3px 4px;
    transition: color .2s ease, text-shadow .2s ease, border-bottom .2s ease;
}

/* HOVER — ONLY when NOT active */
#submenu a:not(.current-sub-menu):hover {
    color: #ffcc66 !important;
    text-shadow: 0 0 6px rgba(255, 204, 102, 0.9),
                 0 0 12px rgba(255, 204, 102, 0.5);
}

/* ACTIVE submenu (your gold highlight) */
#submenu a.current-sub-menu {
    color: #ffd24c !important;
    border-bottom: 2px solid #ffd24c;
    text-shadow: 0 0 6px rgba(255, 210, 76, 0.9),
                 0 0 12px rgba(255, 210, 76, 0.4);
}

/* ================================
   DARK RANKING TABLE STYLES
   ================================ */

/* table base */
.horizontal-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

/* header + cells text */
.horizontal-table th,
.horizontal-table td {
    color: #ffffff !important;            /* always white text */
    text-shadow: 0 0 3px #000 !important; /* readable over bg */
    border: 1px solid rgba(255,255,255,0.25) !important;
}

/* data rows (non-empty) */
.horizontal-table tr:not(.empty-row) td {
    background: rgba(0,0,0,0.45) !important;
}

/* header row */
.horizontal-table th {
    background: rgba(0,0,0,0.80) !important;
    color: #ffd24c !important; /* gold */
    font-weight: 700 !important;
}

/* hover effect */
.horizontal-table tr:hover td {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
}

/* empty rows (keep layout but almost invisible) */
.horizontal-table tr.empty-row td {
    background: rgba(0,0,0,0.25) !important;
    color: transparent !important;
}

/* Prevent ANY FluxCP CSS from overriding text color */
.horizontal-table td *,
.horizontal-table th * {
    color: #ffffff !important;
}

/* ================================
   RANKING BOX & TITLE (Downloads style)
   ================================ */

/* Ranking container using Downloads styles */
.ranking-box {
    margin-top: 15px; /* space under the submenu */
}

/* Ranking heading using Downloads glow, slightly tuned */
.ranking-heading {
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* ==========================================================
   MOBILE FOOTER FIX — RANKING PAGES
   ========================================================== */
@media (max-width: 768px) {

    /* Prevent top padding from pushing footer off-screen */
    body > .container {
        padding: 120px 15px 40px !important;
    }

    /* Force footer to full width on mobile */
    #footer {
        width: 100% !important;
        padding: 25px 0 !important;

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

        background-color: #222 !important;
    }

    /* Stack footer content vertically and center */
    .footer-row {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;

        gap: 15px !important;
    }

    /* Shrink icons for mobile view */
    .footer-icons img {
        width: 120px !important;
        margin: 0 !important;
    }
}