/* ============================================================================
   XPlay Gaming theme for the older pages built on css/style.css
   (donate, rules, stats, bans, news, rewards, terms, privacy, tracker, discord_* ...).
   Same look as vip.php / skins.php (xplay-theme.css). Load it LAST in <head>.
   ============================================================================ */
:root {
    --bg-color: #050a16;
    --primary: #38bdf8;
    --primary-glow: rgba(56, 189, 248, 0.55);
    --secondary: #0e7fc1;
    --text-main: #eef4ff;
    --text-muted: #a9b6cb;
    --xp-cyan: #00d2ff;
    --xp-blue2: #0e7fc1;
    --xp-gold: #fbbf24;
    --xp-card: rgba(11, 18, 34, 0.72);
    --xp-line: rgba(56, 189, 248, 0.16);
}

body {
    font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    background:
        radial-gradient(1200px 620px at 50% -12%, rgba(14, 127, 193, 0.32), transparent 62%),
        linear-gradient(rgba(5, 10, 22, 0.86), rgba(5, 10, 22, 0.95)),
        url('../images/bg_premium_shop_1.webp') center top / cover no-repeat fixed,
        #050a16 !important;
    color: var(--text-main);
}
#particles {
    background:
        radial-gradient(700px circle at 0% 0%, rgba(14, 127, 193, 0.22), transparent 55%),
        radial-gradient(700px circle at 100% 100%, rgba(124, 58, 237, 0.14), transparent 55%) !important;
}
::selection { background: var(--primary); color: #021018; }

/* ── header ── */
header {
    background: rgba(5, 10, 22, 0.78) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.14) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.logo.xp-logo { display: inline-flex; align-items: center; gap: 10px; font-family: Inter, sans-serif; text-transform: none; }
.xp-logo img { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
               box-shadow: 0 0 0 2px #0b1222, 0 0 0 3.5px var(--primary), 0 6px 18px -4px rgba(56, 189, 248, 0.8); transition: transform .3s; }
.xp-logo:hover img { transform: rotate(-8deg) scale(1.06); }
.xp-logo .xp-name { display: flex; flex-direction: column; line-height: 1.05; color: #fff !important; }
.xp-logo .xp-name b { font-family: Orbitron, Inter, sans-serif; font-size: 1.02rem; font-weight: 900; letter-spacing: .08em; color: #fff; }
.xp-logo .xp-name small { font-size: .55rem; font-weight: 700; letter-spacing: .32em; color: var(--primary); }

nav a {
    font-family: Inter, sans-serif !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: rgba(230, 240, 255, 0.72) !important;
    border-radius: 10px !important;
}
nav a:hover, nav a.active { color: #fff !important; background: rgba(56, 189, 248, 0.12) !important; }
nav a.active { box-shadow: inset 0 -2px 0 var(--primary); }
nav .nav-cta {
    background: linear-gradient(135deg, var(--xp-blue2), var(--xp-cyan)) !important;
    color: #021018 !important;
    border: 0 !important;
    box-shadow: 0 8px 22px -10px rgba(0, 210, 255, 0.85);
}
@media (max-width: 768px) {
    nav a { font-size: .74rem !important; padding: 6px 9px !important; }
}

/* ── headings ── */
h1, h2, h3, .section-title, .hero-title { letter-spacing: .01em; }
.subtitle span, .text-accent { color: var(--primary) !important; }

/* ── cards / boxes: one look everywhere ── */
.card, .don-card, .tier-box, .lead-row, .rv-card, .status-container, .rules-card, .rule-card, .news-card, .stat-card, .glass-card {
    border-radius: 20px !important;
    border-color: var(--xp-line) !important;
    background: linear-gradient(160deg, rgba(56, 189, 248, 0.06), var(--xp-card)) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.card:hover { border-color: rgba(56, 189, 248, 0.5) !important; }

/* ── buttons ── */
.btn-main, .btn.btn-main {
    background: linear-gradient(135deg, var(--xp-blue2), var(--xp-cyan)) !important;
    color: #021018 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px -10px rgba(0, 210, 255, 0.85) !important;
}
.btn-main:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--xp-blue2), var(--xp-cyan)) !important; }
.btn-sec { border-color: rgba(56, 189, 248, 0.4) !important; border-radius: 14px !important; }
.copy-btn { border-radius: 12px !important; }

/* ── inputs ── */
input, select, textarea { font-family: Inter, sans-serif; }

/* ── footer ── */
footer { background: rgba(5, 10, 22, 0.75) !important; border-top: 1px solid rgba(56, 189, 248, 0.12) !important; }
.footer-text span { font-family: Orbitron, Inter, sans-serif; color: var(--primary) !important; }