/* ============================================================================
   XPlay Gaming theme — the blue "premium" look of checkout / success / rate pages,
   layered on top of the old Apocalypse design (index.php, vip.php, skins.php, reviews.php).
   Load it LAST (after Bootstrap, apocalypse.css and any inline <style>).
   ============================================================================ */
:root {
    --bg-900: #050a16;
    --bg-800: #07101f;
    --bg-700: #0b1426;
    --bg-card: rgba(11, 18, 34, 0.72);
    --border-soft: rgba(56, 189, 248, 0.16);
    --text-100: #eef4ff;
    --text-300: #a9b6cb;
    --text-500: #74829a;
    --text-muted: #8b97ab;

    --accent: #38bdf8;          /* XPlay blue (was zombie green) */
    --accent-2: #00d2ff;
    --primary: #00d2ff;
    --xp-blue2: #0e7fc1;
    --xp-violet: #7c3aed;
    --gold: #fbbf24;
    --gold-2: #f59e0b;

    --radius: 22px;
    --shadow-glow: 0 0 40px rgba(56, 189, 248, 0.22);
    --shadow-card: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}

body {
    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,
        var(--bg-900) !important;
}
body::before {
    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(--accent); color: #021018; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── navbar with the logo ── */
.navbar-glass { background: rgba(5, 10, 22, 0.62) !important; border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important; backdrop-filter: blur(16px); }
.navbar-glass.scrolled { background: rgba(5, 10, 22, 0.9) !important; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7); }
.navbar-brand.xp-brand { display: inline-flex !important; align-items: center; gap: 10px; font-family: var(--font-display); text-shadow: none !important; }
.xp-brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px #0b1222, 0 0 0 3.5px var(--accent), 0 6px 18px -4px rgba(56, 189, 248, 0.8); transition: transform .3s; }
.xp-brand:hover img { transform: rotate(-8deg) scale(1.06); }
.xp-brand .xp-name { display: flex; flex-direction: column; line-height: 1.05; }
.xp-brand .xp-name b { font-size: 1.02rem; font-weight: 900; letter-spacing: .08em; color: #fff; }
.xp-brand .xp-name small { font-size: .55rem; font-weight: 700; letter-spacing: .32em; color: var(--accent); }
.navbar-nav .nav-link::after { background: var(--accent) !important; }
.navbar-nav .nav-link.active { color: var(--accent) !important; }   /* Bootstrap makes the current page's link black */

/* ── buttons ── */
.btn-primary-game, .btn-game.btn-primary-game {
    background: linear-gradient(135deg, var(--xp-blue2), var(--accent-2)) !important; color: #021018 !important; border: 0 !important;
    box-shadow: 0 10px 26px -10px rgba(0, 210, 255, 0.85) !important;
}
.btn-primary-game:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-outline-game { border-color: rgba(56, 189, 248, 0.45) !important; color: #cdeafe !important; }
.btn-outline-game:hover { background: rgba(56, 189, 248, 0.12) !important; }
.btn-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)) !important; color: #1a1205 !important; box-shadow: 0 10px 26px -10px rgba(245, 158, 11, 0.85) !important; }

/* ── headings ── */
.page-hero h1, .section-title { letter-spacing: .02em; }
.text-accent, .glow-green { color: var(--accent) !important; text-shadow: 0 0 22px rgba(56, 189, 248, 0.45) !important; }
.section-eyebrow { border-color: rgba(56, 189, 248, 0.3) !important; background: rgba(56, 189, 248, 0.07) !important; color: var(--accent) !important; }

/* ── cards (VIP / points / skins / generic glass) ── */
.price-card, .glass, .perk, .pack-card, .skin-card, .stat-card {
    border-radius: var(--radius) !important;
    background: linear-gradient(160deg, rgba(56, 189, 248, 0.06), var(--bg-card)) !important;
    border: 1px solid var(--border-soft) !important;
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-card);
}
.price-card:hover, .perk:hover { border-color: rgba(56, 189, 248, 0.5) !important; box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.75), 0 0 34px -6px rgba(56, 189, 248, 0.35) !important; }
.price-card.trial { background: linear-gradient(160deg, rgba(168, 85, 247, 0.14), var(--bg-card)) !important; border-color: rgba(168, 85, 247, 0.38) !important; }
.price-card.owner { background: linear-gradient(160deg, rgba(251, 191, 36, 0.14), var(--bg-card)) !important; border-color: rgba(251, 191, 36, 0.42) !important; }
.price-card .price-val { text-shadow: 0 0 26px rgba(56, 189, 248, 0.35); }
.bonus-tag { background: rgba(56, 189, 248, 0.1) !important; color: var(--accent) !important; border-color: rgba(56, 189, 248, 0.3) !important; }
.buy-btn {
    position: relative; overflow: hidden; border-radius: 16px !important;
    background: linear-gradient(135deg, var(--xp-blue2), var(--accent-2)) !important; color: #021018 !important;
    box-shadow: 0 12px 28px -10px rgba(0, 210, 255, 0.85) !important;
}
.buy-btn::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: xpShine 3.4s ease-in-out infinite;
}
@keyframes xpShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.ribbon-green { background: linear-gradient(135deg, var(--xp-blue2), var(--accent-2)) !important; color: #021018 !important; }
.perk .ic { background: rgba(56, 189, 248, 0.12) !important; color: var(--accent) !important; }
.perk-group-title i { color: var(--accent) !important; }
.perk .tag { background: var(--accent) !important; color: #021018 !important; }

/* ── animated emoji used by the theme ── */
.xp-emo { display: inline-block; vertical-align: middle; object-fit: contain; }

/* ── trust strip (added under the hero) ── */
.xp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto 30px; padding: 0 16px; }
.xp-trust span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: #dbeafe;
                 background: rgba(11, 18, 34, 0.7); border: 1px solid var(--border-soft); backdrop-filter: blur(12px); }
.xp-trust .xp-emo { width: 20px; height: 20px; }

/* ── footer + back to top ── */
footer { border-top: 1px solid rgba(56, 189, 248, 0.12) !important; background: rgba(5, 10, 22, 0.7) !important; }
#backToTop { background: linear-gradient(135deg, var(--xp-blue2), var(--accent-2)) !important; color: #021018 !important; box-shadow: 0 10px 24px -8px rgba(0, 210, 255, 0.8) !important; }