/* ===============================================
   ATLANTIC STORE - STRAINDEZ STYLE
   Criado por Kiro AI para Atlantic Anarchy
   Design baseado no Straindez original
   =============================================== */

/* ROOT VARIABLES - Straindez Color Palette */
:root {
    /* Core Colors */
    --straindez-bg: #0B0E13;
    --straindez-card: #13161C;
    --straindez-border: #1F232C;
    
    /* Accent Colors - SUAVIZADAS */
    --straindez-accent: #6C5CE7;
    --straindez-accent-dark: #5F4DD6;
    --straindez-cyan: #4A9FB5;
    --straindez-pink: #B8658F;
    --straindez-green: #4CAF7E;
    --straindez-orange: #D9774F;
    --straindez-yellow: #D4B65A;
    --straindez-discord: #5865F2;
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #B8BCC8;
    --text-muted: #6B7280;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow-purple: 0 0 30px rgba(108, 92, 231, 0.4);
    --shadow-glow-cyan: 0 0 30px rgba(0, 217, 255, 0.4);
}

/* RESET & BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--straindez-bg);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Background Grid Pattern - DESATIVADO (causa lag) */
body::before {
    display: none; /* REMOVIDO - Causa lag extremo */
}

/* Background Gradient Overlay - DESATIVADO (causa lag) */
body::after {
    display: none; /* REMOVIDO - Causa lag extremo */
}

#wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.flex {
    display: flex;
    gap: 24px;
}

/* ==================== HEADER ==================== */
#top {
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.15;
}

.header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
}

.header-main {
    background: rgba(11, 14, 19, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--straindez-border);
    padding: 28px 0; /* Aumentado de 16px para 28px */
    position: relative;
}

.header-main .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-main .left,
.header-main .right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-main .right {
    flex: 1;
    padding-left: 0;
    justify-content: space-between;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 90px; /* Aumentado de 64px para 90px */
    filter: drop-shadow(0 0 20px rgba(108, 92, 231, 0.6));
    transition: var(--transition-normal);
    background: transparent; /* Garante fundo transparente */
    mix-blend-mode: normal; /* Remove qualquer blend que cause fundo branco */
}

.logo img:hover {
    filter: drop-shadow(0 0 30px rgba(108, 92, 231, 0.9));
    transform: scale(1.05);
}

/* Player Wrap (Server Info & Discord) */
.player-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px; /* Aumentado de 12px 20px para 16px 24px */
    background: rgba(31, 35, 44, 0.5);
    border: 1px solid var(--straindez-border);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.player-wrap:hover {
    background: rgba(31, 35, 44, 0.8);
    border-color: var(--straindez-accent);
    transform: translateY(-2px);
}

.player-wrap.ip-address-element:hover {
    border-color: var(--straindez-cyan);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
}

.pw-icon {
    width: 48px; /* Aumentado de 40px para 48px */
    height: 48px; /* Aumentado de 40px para 48px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--straindez-accent), var(--straindez-accent-dark));
    border-radius: 10px;
    font-size: 22px; /* Aumentado de 18px para 22px */
    color: white;
}

.player-wrap:last-child .pw-icon {
    background: linear-gradient(135deg, var(--straindez-discord), #4752C4);
}

.pw-text {
    text-align: left;
}

.pw-text small {
    display: block;
    font-size: 12px; /* Aumentado de 11px para 12px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.pw-text h4 {
    font-size: 16px; /* Aumentado de 14px para 16px */
    font-weight: 700;
    background: linear-gradient(90deg, var(--straindez-cyan), var(--straindez-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==================== HEADER BOTTOM (User Bar) ==================== */
.header-bottom {
    background: rgba(19, 22, 28, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--straindez-border);
    padding: 20px 0; /* Aumentado de 16px para 20px */
}

.header-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* User Card */
.user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px; /* Aumentado de 8px 16px para 10px 20px */
    background: rgba(31, 35, 44, 0.6);
    border: 1px solid var(--straindez-border);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.user-card:hover {
    background: rgba(31, 35, 44, 0.9);
    border-color: var(--straindez-accent);
    transform: translateX(-4px);
}

.user-card .avatar {
    width: 48px; /* Aumentado de 42px para 48px */
    height: 48px; /* Aumentado de 42px para 48px */
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--straindez-accent);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.5);
}

.user-card .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-card .text small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.user-card .text h3 {
    font-size: 17px; /* Aumentado de 15px para 17px */
    font-weight: 700;
    color: var(--text-primary);
}

/* Header Buttons Toolbar */
.header .buttons .toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn {
    padding: 12px 24px; /* Aumentado de 10px 20px para 12px 24px */
    font-family: 'Poppins', sans-serif;
    font-size: 14px; /* Aumentado de 13px para 14px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-info {
    background: linear-gradient(135deg, var(--straindez-accent), var(--straindez-accent-dark));
    color: white;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.5);
}

.btn-default {
    background: rgba(31, 35, 44, 0.8);
    color: var(--text-primary);
    border: 1px solid var(--straindez-border);
}

.btn-default:hover {
    background: rgba(31, 35, 44, 1);
    border-color: var(--straindez-accent);
}

.discord-nav-button .btn-info {
    background: linear-gradient(135deg, var(--straindez-discord), #4752C4);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}

.discord-nav-button .btn-info:hover {
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.5);
}

/* Cart Badge */
.basket .btn-info {
    position: relative;
}

#cart-count {
    background: var(--straindez-pink);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

/* ==================== MAIN CONTENT ==================== */
.main-content {
    padding: 40px 0 80px;
}

/* ==================== TIME CRATE BANNER ==================== */
.sdz-samurai-hero {
    position: relative;
    height: 320px;
    background: linear-gradient(135deg, #1a0a2e 0%, #3d1e5c 50%, #7b2cbf 100%);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 40px;
    cursor: pointer;
    border: 1px solid rgba(123, 44, 191, 0.3);
    transition: var(--transition-normal);
}

.sdz-samurai-hero:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(123, 44, 191, 0.4);
    border-color: rgba(123, 44, 191, 0.6);
}

/* ==================== MAGMA BANNER - GALÁXIA VERMELHA ==================== */
.magma-banner {
    background: radial-gradient(ellipse at center, #330000 0%, #1a0000 50%, #0d0000 100%) !important;
    height: 400px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 51, 51, 0.5) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.magma-banner:hover {
    border-color: rgba(255, 51, 51, 0.8) !important;
    box-shadow: 0 20px 60px rgba(255, 0, 0, 0.6) !important;
}

/* Fundo Galáxia com Estrelas e Nebulosas */
.magma-galaxy-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

/* Estrelas */
.magma-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.magma-star:nth-child(1) { top: 20%; left: 15%; animation: twinkle 3s infinite; }
.magma-star:nth-child(2) { top: 40%; left: 30%; animation: twinkle 2.5s infinite 0.5s; }
.magma-star:nth-child(3) { top: 60%; left: 50%; animation: twinkle 2s infinite 1s; }
.magma-star:nth-child(4) { top: 30%; left: 70%; animation: twinkle 3.5s infinite 0.3s; }
.magma-star:nth-child(5) { top: 80%; left: 20%; animation: twinkle 2.8s infinite 0.8s; }
.magma-star:nth-child(6) { top: 15%; left: 85%; animation: twinkle 3.2s infinite 0.2s; }
.magma-star:nth-child(7) { top: 70%; left: 75%; animation: twinkle 2.3s infinite 1.2s; }
.magma-star:nth-child(8) { top: 50%; left: 10%; animation: twinkle 2.7s infinite 0.7s; }

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.5); }
}

/* Nebulosas Vermelhas */
.magma-nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.magma-nebula-1 {
    width: 500px;
    height: 500px;
    top: -250px;
    left: -100px;
    background: radial-gradient(circle, rgba(255, 50, 0, 0.8) 0%, rgba(200, 0, 0, 0.3) 40%, transparent 70%);
}

.magma-nebula-2 {
    width: 450px;
    height: 450px;
    bottom: -200px;
    right: -150px;
    background: radial-gradient(circle, rgba(255, 100, 0, 0.7) 0%, rgba(150, 0, 0, 0.4) 40%, transparent 70%);
}

.magma-nebula-3 {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 0, 0, 0.6) 0%, rgba(100, 0, 0, 0.3) 40%, transparent 70%);
}

/* Texto ATRÁS (z-index 2) */
.magma-text-background {
    position: absolute;
    top: 40%; /* Movido de 50% para 40% para subir o texto */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    opacity: 0.15;
    pointer-events: none;
}

.magma-text-background .sdz-samurai-word {
    font-size: 140px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 20px;
    line-height: 1;
    text-shadow: 0 0 60px rgba(255, 100, 100, 0.5);
}

.magma-text-background .sdz-samurai-subword {
    font-size: 22px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-top: 10px;
}

/* Chave NO MEIO (z-index 5) */
.magma-key-foreground {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
}

.magma-key-glow-circle {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 100, 0, 0.3) 0%, rgba(255, 0, 0, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    z-index: -1;
}

.magma-key-foreground .sdz-samurai-key {
    width: 350px;
    height: auto;
    filter: drop-shadow(0 0 40px rgba(255, 100, 0, 1))
            drop-shadow(0 0 80px rgba(255, 0, 0, 0.8))
            drop-shadow(0 20px 50px rgba(0, 0, 0, 0.9));
    transition: transform 0.3s ease;
}

.magma-banner:hover .magma-key-foreground .sdz-samurai-key {
    transform: scale(1.1) translateY(-10px) rotate(5deg);
}

/* Botão EMBAIXO (z-index 10) */
.magma-button-bottom {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.magma-button-bottom .sdz-samurai-cta {
    display: inline-block;
    padding: 18px 50px;
    background: white;
    color: #990000;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    transition: var(--transition-normal);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7),
                0 0 40px rgba(255, 100, 100, 0.6);
}

.magma-button-bottom .sdz-samurai-cta:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8),
                0 0 60px rgba(255, 100, 100, 0.9);
    background: #FFF;
}

.magma-button-bottom .sdz-samurai-cta-main {
    display: block;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: #CC0000;
    font-weight: 800;
}

.magma-button-bottom .sdz-samurai-cta-sub {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #FF6B35;
    margin-top: 6px;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 768px) {
    .magma-banner {
        height: 350px;
    }
    
    .magma-text-background .sdz-samurai-word {
        font-size: 80px;
        letter-spacing: 10px;
    }
    
    .magma-text-background .sdz-samurai-subword {
        font-size: 16px;
    }
    
    .magma-text-background {
        top: 35%; /* Ajuste para mobile também */
    }
    
    .magma-key-foreground .sdz-samurai-key {
        width: 250px;
    }
    
    .magma-button-bottom {
        bottom: 20px;
    }
    
    .magma-button-bottom .sdz-samurai-cta {
        padding: 14px 36px;
    }
}

/* Animated Petals - REMOVIDO (não usado mais) */

/* Time Crate Title - REMOVIDO (redesenhado no magma-banner) */

/* Floating Key Image - REMOVIDO (redesenhado no magma-banner) */

/* CTA Button - REMOVIDO (redesenhado no magma-banner) */

/* ==================== ATLANTIC PLUS CARD ==================== */
.sdz-plus-card {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    background: linear-gradient(135deg, var(--straindez-accent) 0%, var(--straindez-accent-dark) 100%);
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 40px;
    cursor: pointer;
    border: 1px solid rgba(108, 92, 231, 0.3);
    position: relative;
    overflow: hidden;
    transition: transform 0.1s linear;
}

.sdz-plus-card::before {
    display: none; /* Animação removida */
}

.sdz-plus-card:hover {
    transform: translateY(-2px);
}

.sdz-plus-left {
    position: relative;
    z-index: 2;
}

.sdz-plus-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.sdz-plus-icon {
    font-size: 24px;
    font-weight: 900;
    color: white;
}

.sdz-plus-title {
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
}

.sdz-offer-tag {
    background: var(--straindez-yellow);
    color: #1a0a2e;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Plus Features List */
.sdz-plus-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.sdz-plus-features li {
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding-left: 24px;
    position: relative;
}

.sdz-plus-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--straindez-green);
    font-weight: 700;
    font-size: 16px;
}

/* Plus Button */
.sdz-plus-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: white;
    color: var(--straindez-accent);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-normal);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.sdz-plus-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.sdz-plus-btn-arrow {
    font-size: 18px;
}

/* Plus Character */
.sdz-plus-right {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sdz-plus-right img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
    /* Animação removida para performance */
}

/* ==================== CATEGORY GRID ==================== */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Mudado de 2 para 3 colunas */
    gap: 24px;
    margin-bottom: 40px;
}

.category-card {
    position: relative;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-normal);
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    transition: var(--transition-normal);
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.category-card:hover::before {
    background: rgba(0, 0, 0, 0.1);
}

.category-card img {
    position: relative;
    z-index: 2;
    width: 200px; /* Aumentado de 120px para 200px */
    height: 200px; /* Aumentado de 120px para 200px */
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    transition: var(--transition-normal);
}

.category-card:hover img {
    transform: scale(1.1) translateY(-10px);
}

.category-card h2 {
    position: relative;
    z-index: 2;
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    margin-top: auto;
    padding-bottom: 30px;
}

/* ==================== CUSTOM RANK CARD ==================== */
.sdz-rank-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    background: linear-gradient(135deg, #7b2cbf 0%, #9d4edd 50%, #c77dff 100%);
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 40px;
    cursor: pointer;
    border: 1px solid rgba(157, 78, 221, 0.3);
    overflow: hidden;
    transition: transform 0.1s linear;
}

.sdz-rank-bg {
    display: none; /* Animação removida */
}

.sdz-rank-card:hover {
    transform: translateY(-2px);
}

/* ==================== BOOSTERS CARD - TEMA CORAÇÕES (VERMELHO/ROSA) ==================== */
.boosters-card {
    background: linear-gradient(135deg, #FF1744 0%, #E91E63 50%, #C2185B 100%) !important;
    border: 1px solid rgba(255, 23, 68, 0.4) !important;
    overflow: visible !important; /* Permite Steve sair do card */
}

.boosters-card .sdz-rank-art {
    position: relative;
    right: -50px; /* Move Steve 50px para a direita (metade fora) */
    overflow: visible;
}

.boosters-card .sdz-rank-art img {
    max-width: 450px; /* Steve maior */
    height: auto;
}

.boosters-card:hover {
    border-color: rgba(255, 23, 68, 0.7) !important;
    box-shadow: 0 20px 60px rgba(255, 23, 68, 0.4) !important;
}

.boosters-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle at top right, rgba(255, 100, 120, 0.2) 0%, transparent 60%),
                radial-gradient(circle at bottom left, rgba(233, 30, 99, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

.boosters-card .sdz-rank-btn {
    background: white !important;
    color: #C2185B !important;
}

.boosters-card .sdz-rank-btn:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

.sdz-rank-left {
    position: relative;
    z-index: 2;
}

.sdz-rank-kicker {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
}

.sdz-rank-heading {
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: white;
    line-height: 1.2;
    margin-bottom: 8px;
}

.sdz-rank-heading span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
}

/* Rank Features */
.sdz-rank-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 32px 0;
}

.sdz-rank-features li {
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding-left: 24px;
    position: relative;
}

.sdz-rank-features li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--straindez-yellow);
    font-size: 16px;
}

/* Rank Button */
.sdz-rank-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: white;
    color: #7b2cbf;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-normal);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.sdz-rank-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.sdz-rank-btn span {
    font-size: 18px;
}

/* Rank Art */
.sdz-rank-art {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sdz-rank-art img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
    /* Animação removida para performance */
}

/* ==================== FOOTER ==================== */
.bottom-content {
    background: var(--straindez-card);
    border-top: 1px solid var(--straindez-border);
}

.footer-top {
    padding: 60px 0 40px;
}

.footer-top .container.flex {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

.footer-top h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.footer-top p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
}

.footer-top b {
    color: var(--straindez-cyan);
    font-weight: 700;
}

.link-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.link-list a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition-fast);
}

.link-list a:hover {
    color: var(--straindez-accent);
    padding-left: 8px;
}

.footer-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 24px;
    background: var(--straindez-discord);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    transition: var(--transition-normal);
}

.footer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(88, 101, 242, 0.4);
}

.footer-bottom {
    background: rgba(11, 14, 19, 0.5);
    padding: 30px 0;
    border-top: 1px solid var(--straindez-border);
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom .left h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.footer-bottom .left strong {
    background: linear-gradient(90deg, var(--straindez-cyan), var(--straindez-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-bottom .left p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.footer-bottom .left a {
    color: var(--straindez-cyan);
    text-decoration: none;
}

.footer-bottom .left a:hover {
    text-decoration: underline;
}

.footer-bottom .right ul {
    display: flex;
    gap: 12px;
    list-style: none;
}

.footer-bottom .right a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(31, 35, 44, 0.8);
    border: 1px solid var(--straindez-border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 18px;
    text-decoration: none;
    transition: var(--transition-normal);
}

.footer-bottom .right a:hover {
    background: var(--straindez-accent);
    border-color: var(--straindez-accent);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .sdz-plus-card,
    .sdz-rank-card {
        grid-template-columns: 1fr;
    }
    
    .sdz-plus-right,
    .sdz-rank-art {
        display: none;
    }
    
    .grid-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-main .right {
        flex-direction: column;
        gap: 12px;
    }
    
    .player-wrap {
        width: 100%;
    }
    
    .sdz-samurai-word {
        font-size: 48px;
    }
    
    .sdz-samurai-key-wrap {
        right: 40px;
    }
    
    .sdz-samurai-key {
        width: 120px;
    }
    
    .sdz-plus-features,
    .sdz-rank-features {
        grid-template-columns: 1fr;
    }
    
    .footer-top .container.flex {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom .container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .sdz-samurai-hero {
        height: 250px;
    }
    
    .sdz-samurai-title-stack {
        left: 30px;
    }
    
    .sdz-samurai-word {
        font-size: 36px;
    }
    
    .sdz-samurai-content {
        left: 30px;
        bottom: 20px;
    }
}

/* ==================== UTILITY CLASSES ==================== */
.hidden-xs { display: none !important; }
.hidden-sm { display: none !important; }

@media (min-width: 768px) {
    .hidden-xs { display: flex !important; }
}

@media (min-width: 992px) {
    .hidden-sm { display: flex !important; }
    .hidden-md { display: none !important; }
    .hidden-lg { display: none !important; }
}

@media (max-width: 991px) {
    .hidden-md { display: flex !important; }
    .hidden-lg { display: flex !important; }
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(108, 92, 231, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(108, 92, 231, 0.8);
    }
}

/* Apply entrance animations */
.category-card,
.sdz-plus-card,
.sdz-rank-card,
.sdz-samurai-hero {
    animation: fadeInUp 0.6s ease backwards;
}

.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.2s; }
.category-card:nth-child(3) { animation-delay: 0.3s; }
.category-card:nth-child(4) { animation-delay: 0.4s; }

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background: var(--straindez-accent);
    color: white;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--straindez-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--straindez-accent);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--straindez-accent-dark);
}

/* ==================== LOADING STATES ==================== */
.loading {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(100%);
}

/* ==================== GLASSMORPHISM EFFECT ==================== */
.glass {
    background: rgba(31, 35, 44, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==================== TEXT EFFECTS ==================== */
.text-gradient {
    background: linear-gradient(90deg, var(--straindez-cyan), var(--straindez-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-glow {
    text-shadow: 0 0 20px rgba(108, 92, 231, 0.6);
}

/* ==================== CARD HOVER EFFECTS ==================== */
.card-hover-effect {
    transition: var(--transition-normal);
}

.card-hover-effect:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* ==================== RUBIS PAGE - LARGE CENTERED IMAGES ==================== */
/* Estilos específicos para a página de Rubis com imagens GRANDES e CENTRALIZADAS */

/* Container de Rubis */
.category.packages-image {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 32px;
    padding: 20px 0;
}

/* Card de Rubis - AUMENTADO */
.packages-image .package {
    background: var(--straindez-card);
    border: 2px solid var(--straindez-border);
    border-radius: 20px;
    overflow: hidden; /* IMPORTANTE: Impede imagens de sair */
    transition: var(--transition-normal);
    position: relative;
}

/* Wrapper da Imagem - CENTRALIZADO E CONTROLADO */
.packages-image .package-image-wrap {
    position: relative;
    width: 100%;
    height: 300px; /* Reduzido de 420px para 300px */
    display: flex;
    align-items: flex-end; /* ALTERADO: Imagens para baixo (era center) */
    justify-content: center;
    margin-bottom: 20px;
    padding: 30px 30px 40px 30px; /* Mais padding no fundo */
    overflow: hidden;
}

/* Imagens dos Rubis - TAMANHOS REDUZIDOS E VARIADOS */
.packages-image .package-image-main,
.packages-image .package-image-glow {
    width: auto;
    height: 220px; /* Tamanho base reduzido de 320px para 220px */
    max-width: 75%; /* Reduzido de 85% para 75% */
    max-height: 90%; /* Limita altura */
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Tamanhos progressivos - REDUZIDOS */
.rubis-size-small .package-image-main,
.rubis-size-small .package-image-glow {
    height: 180px; /* Reduzido de 260px */
}

.rubis-size-medium .package-image-main,
.rubis-size-medium .package-image-glow {
    height: 200px; /* Reduzido de 300px */
}

.rubis-size-large .package-image-main,
.rubis-size-large .package-image-glow {
    height: 220px; /* Reduzido de 340px */
}

.rubis-size-xlarge .package-image-main,
.rubis-size-xlarge .package-image-glow {
    height: 240px; /* Reduzido de 370px */
}

.rubis-size-huge .package-image-main,
.rubis-size-huge .package-image-glow {
    height: 260px; /* Reduzido de 400px */
}

/* Glow Effect para Rubis - DESATIVADO (causa lag) */
.packages-image .rubis-glow {
    display: none; /* Completamente desativado para performance */
}

.packages-image .package-image-main {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 20px rgba(228, 0, 58, 0.3));
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                filter 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Effect - OTIMIZADO */
.packages-image .package:hover .package-image-main {
    transform: scale(1.02) translateY(-3px) translateZ(0);
    filter: drop-shadow(0 10px 25px rgba(228, 0, 58, 0.4));
}

/* Card de Rubis - SIMPLIFICADO */
.packages-image .package {
    background: var(--straindez-card);
    border: 2px solid var(--straindez-border);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.1s linear, border-color 0.1s linear;
    position: relative;
}

.packages-image .package:hover {
    transform: translateY(-2px);
    border-color: rgba(228, 0, 58, 0.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Badge de Bonus */
.rubis-bonus-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, var(--straindez-yellow), var(--straindez-orange));
    color: var(--straindez-bg);
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.rubis-bonus-badge i {
    font-size: 14px;
}

/* Info Section */
.packages-image .package .info {
    padding: 24px;
    text-align: center;
}

.rubis-amount {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #E4003A, #FF4D7D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.rubis-amount i {
    font-size: 28px;
    color: #E4003A;
    filter: drop-shadow(0 0 10px rgba(228, 0, 58, 0.6));
}

.packages-image .package .name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: 1px;
}

/* Price Section */
.packages-image .package .price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.packages-image .package .discount {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 14px;
    font-weight: 600;
}

.packages-image .package .package-active-price {
    font-size: 24px;
    font-weight: 900;
    color: var(--straindez-cyan);
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

/* Button */
.rubis-add-cart {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #E4003A, #FF1744);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(228, 0, 58, 0.4);
}

.rubis-add-cart:hover {
    background: linear-gradient(135deg, #FF1744, #FF4D7D);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(228, 0, 58, 0.6);
}

.rubis-add-cart i {
    font-size: 16px;
}

/* Theme-specific glows */
.package-ruby-small-card:hover {
    box-shadow: 0 20px 60px rgba(228, 0, 58, 0.3);
}

.package-ruby-medium-card:hover {
    box-shadow: 0 20px 60px rgba(255, 69, 58, 0.35);
}

.package-ruby-large-card:hover {
    box-shadow: 0 20px 60px rgba(255, 77, 125, 0.4);
}

.package-ruby-mega-card:hover {
    box-shadow: 0 20px 60px rgba(255, 107, 53, 0.45);
}

.package-ruby-ultra-card:hover {
    box-shadow: 0 20px 60px rgba(255, 209, 102, 0.5);
}

.package-ruby-legendary-card:hover {
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.6);
}

/* Responsive para Rubis */
@media (max-width: 1200px) {
    .category.packages-image {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .packages-image .package-image-wrap {
        height: 280px;
    }
    
    .rubis-size-small .package-image-main,
    .rubis-size-small .package-image-glow { height: 160px; }
    
    .rubis-size-medium .package-image-main,
    .rubis-size-medium .package-image-glow { height: 180px; }
    
    .rubis-size-large .package-image-main,
    .rubis-size-large .package-image-glow { height: 200px; }
    
    .rubis-size-xlarge .package-image-main,
    .rubis-size-xlarge .package-image-glow { height: 220px; }
    
    .rubis-size-huge .package-image-main,
    .rubis-size-huge .package-image-glow { height: 240px; }
}

@media (max-width: 768px) {
    .category.packages-image {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .packages-image .package-image-wrap {
        height: 260px;
        padding: 25px;
    }
    
    .rubis-size-small .package-image-main,
    .rubis-size-small .package-image-glow { height: 150px; }
    
    .rubis-size-medium .package-image-main,
    .rubis-size-medium .package-image-glow { height: 170px; }
    
    .rubis-size-large .package-image-main,
    .rubis-size-large .package-image-glow { height: 190px; }
    
    .rubis-size-xlarge .package-image-main,
    .rubis-size-xlarge .package-image-glow { height: 210px; }
    
    .rubis-size-huge .package-image-main,
    .rubis-size-huge .package-image-glow { height: 230px; }
    
    .rubis-amount {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .packages-image .package-image-wrap {
        height: 240px;
        padding: 20px;
    }
    
    .rubis-size-small .package-image-main,
    .rubis-size-small .package-image-glow { height: 130px; }
    
    .rubis-size-medium .package-image-main,
    .rubis-size-medium .package-image-glow { height: 150px; }
    
    .rubis-size-large .package-image-main,
    .rubis-size-large .package-image-glow { height: 170px; }
    
    .rubis-size-xlarge .package-image-main,
    .rubis-size-xlarge .package-image-glow { height: 190px; }
    
    .rubis-size-huge .package-image-main,
    .rubis-size-huge .package-image-glow { height: 210px; }
}

/* ==================== END OF STRAINDEZ STYLE ==================== */

/* ==================== CHECKOUT PAGE - TEBEX SIMPLE ==================== */
.checkout-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    margin-top: 40px;
}

.checkout-form {
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 20px;
    overflow: hidden;
}

.checkout-section {
    padding: 0;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    background: rgba(31, 35, 44, 0.5);
    border-bottom: 1px solid var(--straindez-border);
}

.step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--straindez-accent), var(--straindez-accent-dark));
    border-radius: 10px;
    font-size: 18px;
    font-weight: 900;
    color: white;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.section-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.section-body {
    padding: 32px;
}

/* Tebex Simple Box */
.tebex-simple-box {
    text-align: center;
}

.tebex-icon-big {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--straindez-accent), var(--straindez-accent-dark));
    border-radius: 50%;
    font-size: 48px;
    color: white;
    box-shadow: 0 10px 40px rgba(108, 92, 231, 0.4);
}

.tebex-simple-box h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(90deg, var(--straindez-cyan), var(--straindez-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tebex-simple-box > p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Cart Preview */
.cart-items-preview {
    background: rgba(31, 35, 44, 0.4);
    border: 1px solid var(--straindez-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
}

.cart-preview-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.cart-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(19, 22, 28, 0.6);
    border: 1px solid var(--straindez-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.cart-preview-item span:first-child {
    color: var(--text-secondary);
}

.cart-preview-item span:last-child {
    font-weight: 700;
    color: var(--straindez-cyan);
}

.cart-preview-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 2px solid var(--straindez-border);
    font-size: 18px;
    color: var(--text-primary);
}

.cart-preview-total strong {
    font-weight: 800;
}

.cart-preview-total strong:last-child {
    color: var(--straindez-accent);
    font-size: 24px;
}

/* Tebex Big Button */
.btn-tebex-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 24px 40px;
    background: linear-gradient(135deg, var(--straindez-accent), var(--straindez-accent-dark));
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 10px 40px rgba(108, 92, 231, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-tebex-big::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: var(--transition-slow);
}

.btn-tebex-big:hover::before {
    left: 100%;
}

.btn-tebex-big:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(108, 92, 231, 0.6);
}

.btn-tebex-big i {
    font-size: 24px;
    color: white;
}

.btn-tebex-big span {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
}

.btn-tebex-big small {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
}

/* Tebex Features Simple */
.tebex-features-simple {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--straindez-border);
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.feature-item i {
    font-size: 24px;
    color: var(--straindez-accent);
}

.feature-item span {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tebex Note */
.tebex-note {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(0, 217, 255, 0.05);
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 12px;
    margin-top: 32px;
}

.tebex-note i {
    font-size: 24px;
    color: var(--straindez-cyan);
    flex-shrink: 0;
}

.tebex-note p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

.tebex-note strong {
    color: var(--straindez-cyan);
    font-weight: 700;
}

/* Order Summary Sidebar */
.checkout-summary {
    position: sticky;
    top: 120px;
    height: fit-content;
}

.summary-card {
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 20px;
    padding: 32px;
}

.summary-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.summary-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.summary-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.summary-item-info img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid var(--straindez-border);
    object-fit: cover;
}

.summary-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-item-qty {
    font-size: 12px;
    color: var(--text-muted);
}

.summary-item-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--straindez-cyan);
}

.summary-divider {
    height: 1px;
    background: var(--straindez-border);
    margin: 16px 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.summary-row.summary-total {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 16px;
    margin-bottom: 0;
}

.summary-row.summary-total span:last-child {
    color: var(--straindez-accent);
    font-size: 28px;
}

.summary-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 230, 118, 0.05);
    border: 1px solid rgba(0, 230, 118, 0.2);
    border-radius: 10px;
    margin-top: 24px;
}

.summary-note i {
    color: var(--straindez-green);
    font-size: 20px;
}

.summary-note p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

/* Title with Return Button */
.title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.title .return {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 18px;
    transition: var(--transition-normal);
}

.title .return:hover {
    background: var(--straindez-accent);
    border-color: var(--straindez-accent);
    transform: translateX(-4px);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.title h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
}

/* Responsive Checkout */
@media (max-width: 1200px) {
    .checkout-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .checkout-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    .tebex-features-simple {
        flex-direction: column;
        gap: 16px;
    }
    
    .btn-tebex-big {
        max-width: 100%;
    }
    
    .section-body {
        padding: 24px 16px;
    }
}

/* ==================== KEYS SPECIFIC STYLES (from Straindez) ==================== */

/* Package image styles */
.package-image-main {
    position: relative;
    z-index: 3;
}

.package-image-glow {
    z-index: 1;
}

.package-limited-note {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffcf7a;
    text-shadow: 0 0 10px rgba(255, 97, 22, 0.34), 0 0 18px rgba(255, 178, 62, 0.22);
}

.package-bonus-badge {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 4;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 126px;
    padding: 9px 12px 8px;
    border-radius: 4px;
    color: #fff2c7;
    background: linear-gradient(90deg, rgba(77, 38, 16, 0.22) 0 2px, rgba(255, 255, 255, 0) 2px 10px), 
                linear-gradient(180deg, #b86b2f 0%, #9a4d21 48%, #6f3518 100%);
    border: 2px solid #4a2411;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), 0 0 18px rgba(255, 126, 25, 0.12), 
                inset 0 2px 0 rgba(255, 207, 126, 0.22), inset 0 -3px 0 rgba(64, 27, 9, 0.30);
    text-align: center;
    text-shadow: 0 2px 0 rgba(65, 27, 10, 0.58);
    transform: rotate(-2deg);
}

.package-bonus-badge::before,
.package-bonus-badge::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 7px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(180deg, #5b2c14, #32170a);
    box-shadow: inset 0 1px 0 rgba(255, 210, 142, 0.22);
}

.package-bonus-badge::before {
    left: 18px;
}

.package-bonus-badge::after {
    right: 18px;
}

.package-bonus-badge span:first-child {
    color: #ffe08a;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: .96;
}

.package-bonus-badge span:last-child {
    color: #ffffff;
    font-size: 9px;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* Key card themes */
#keys-container .package.package-magma-card,
#keys-container .package.package-atlantic-card,
#keys-container .package.package-dev-card,
#keys-container .package.package-straindez-card {
    border: 0 !important;
}

/* Magma Key Theme - VERMELHO */
.package-magma-card {
    --key-card-glow: #FF3333;
    --key-button-bg: linear-gradient(135deg, #FF3333 0%, #CC0000 100%);
    --key-button-shadow: 0 8px 24px rgba(255, 51, 51, 0.4);
}

/* Atlantic Key Theme - AZUL */
.package-atlantic-card {
    --key-card-glow: #00A3FF;
    --key-button-bg: linear-gradient(135deg, #00A3FF 0%, #0077CC 100%);
    --key-button-shadow: 0 8px 24px rgba(0, 163, 255, 0.4);
}

/* Dev Key Theme - VERDE */
.package-dev-card {
    --key-card-glow: #00FF66;
    --key-button-bg: linear-gradient(135deg, #00FF66 0%, #00CC44 100%);
    --key-button-shadow: 0 8px 24px rgba(0, 255, 102, 0.4);
}

/* Keys Package Cards */
.category.packages-image {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.package {
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 16px;
    padding: 24px;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.package:hover {
    transform: translateY(-8px);
    border-color: var(--key-card-glow);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 40px var(--key-card-glow);
}

/* Package Image Container */
.package .image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin-bottom: 24px;
}

.package-image-wrap {
    position: relative;
    width: 180px;
    height: 180px;
}

.package-image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.package-image-glow {
    filter: blur(20px);
    opacity: 0.3;
    will-change: opacity, transform;
    animation: pulseGlow 3s ease-in-out infinite;
}

.package-image-main {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    will-change: transform;
    animation: floatKey 4s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.2;
        transform: scale3d(0.95, 0.95, 1);
    }
    50% {
        opacity: 0.4;
        transform: scale3d(1.05, 1.05, 1);
    }
}

/* Package Info */
.package .info {
    text-align: center;
}

.package .info .text .name {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: white;
    margin-bottom: 12px;
}

.package .info .text .price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.package .info .text .price .discount {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: line-through;
}

.package .info .text .price .package-active-price {
    font-size: 26px;
    font-weight: 900;
    color: var(--key-card-glow);
    text-shadow: 0 0 20px var(--key-card-glow);
}

/* Quantity Options */
.package-quantity-options {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.package-quantity-option {
    padding: 10px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: rgba(31, 35, 44, 0.8);
    border: 2px solid var(--straindez-border);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.package-quantity-option:hover {
    background: rgba(31, 35, 44, 1);
    border-color: var(--key-card-glow);
    color: white;
}

.package-quantity-option.is-active {
    background: var(--key-button-bg);
    border-color: var(--key-card-glow);
    color: white;
    box-shadow: var(--key-button-shadow);
}

/* Add to Cart Button */
.package .button {
    width: 100%;
}

.package-active-action {
    width: 100%;
    padding: 14px 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    background: var(--key-button-bg);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--key-button-shadow);
}

.package-active-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 30px var(--key-card-glow);
}

.package-active-action:active {
    transform: translateY(0);
}

/* ==================== PAGE TITLE ==================== */
.title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.title .return {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-normal);
}

.title .return:hover {
    background: var(--straindez-accent);
    border-color: var(--straindez-accent);
    color: white;
    transform: translateX(-4px);
}

.title h2 {
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, var(--straindez-cyan), var(--straindez-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==================== RESPONSIVE FOR KEYS ==================== */
@media (max-width: 768px) {
    .category.packages-image {
        grid-template-columns: 1fr;
    }
    
    .package-quantity-options {
        flex-wrap: wrap;
    }
    
    .package-quantity-option {
        flex: 1 1 calc(50% - 4px);
        min-width: 70px;
    }
}

/* ==================== END OF KEYS STYLES ==================== */;
    background: radial-gradient(circle at 50% 18%, var(--key-card-glow) 0%, rgba(255, 120, 24, 0) 34%), 
                linear-gradient(180deg, #14233a 0%, #10233d 100%);
    overflow: hidden;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18);
}

/* Magma Key Theme - VERMELHO (Orange/Pink → Red) */
#keys-container .package.package-magma-card {
    --key-border: rgba(255, 51, 51, 0.18);
    --key-card-glow: rgba(255, 30, 30, 0.18);
    --key-card-shadow: rgba(204, 0, 0, 0.10);
    --key-note: #ffaaaa;
    --key-note-shadow-a: rgba(255, 51, 51, 0.34);
    --key-note-shadow-b: rgba(255, 80, 80, 0.22);
    --key-active-text: #fff0f0;
    --key-active-border: rgba(255, 100, 100, 0.95);
    --key-active-bg: linear-gradient(180deg, #ff6666 0%, #ff3333 44%, #cc0000 100%);
    --key-active-shadow-a: rgba(255, 51, 51, 0.34);
    --key-active-shadow-b: rgba(255, 80, 80, 0.28);
    --key-button-border: rgba(255, 100, 100, 0.74);
    --key-button-bg: linear-gradient(135deg, #ff6666 0%, #ff3333 45%, #cc0000 100%);
    --key-button-hover-bg: linear-gradient(135deg, #ff8888 0%, #ff4444 45%, #dd1111 100%);
    --key-button-shadow-a: rgba(255, 51, 51, 0.26);
    --key-button-shadow-b: rgba(255, 80, 80, 0.16);
    --key-image-filter: blur(22px) saturate(1.35) brightness(1.02) sepia(.22) hue-rotate(0deg);
}

/* Atlantic Key Theme - AZUL (Cyan/Turquoise → Blue) */
#keys-container .package.package-atlantic-card {
    --key-border: rgba(0, 163, 255, 0.18);
    --key-card-glow: rgba(0, 140, 255, 0.17);
    --key-card-shadow: rgba(0, 119, 204, 0.10);
    --key-note: #66c3ff;
    --key-note-shadow-a: rgba(0, 163, 255, 0.34);
    --key-note-shadow-b: rgba(0, 140, 255, 0.18);
    --key-active-text: #e6f5ff;
    --key-active-border: rgba(51, 180, 255, 0.92);
    --key-active-bg: linear-gradient(180deg, #66c3ff 0%, #00a3ff 46%, #0077cc 100%);
    --key-active-shadow-a: rgba(0, 163, 255, 0.32);
    --key-active-shadow-b: rgba(51, 180, 255, 0.24);
    --key-button-border: rgba(51, 180, 255, 0.68);
    --key-button-bg: linear-gradient(135deg, #66c3ff 0%, #00a3ff 48%, #0077cc 100%);
    --key-button-hover-bg: linear-gradient(135deg, #88d4ff 0%, #22b5ff 48%, #0088dd 100%);
    --key-button-shadow-a: rgba(0, 163, 255, 0.24);
    --key-button-shadow-b: rgba(51, 180, 255, 0.16);
    --key-image-filter: blur(22px) saturate(1.38) brightness(1.04) hue-rotate(0deg);
}

/* Dev Key Theme - VERDE (Yellow/Pink → Green) */
#keys-container .package.package-dev-card {
    --key-border: rgba(0, 255, 102, 0.20);
    --key-card-glow: rgba(0, 230, 92, 0.15);
    --key-card-shadow: rgba(0, 204, 68, 0.10);
    --key-note: #66ff99;
    --key-note-shadow-a: rgba(0, 255, 102, 0.28);
    --key-note-shadow-b: rgba(0, 230, 92, 0.20);
    --key-active-text: #e6fff0;
    --key-active-border: rgba(51, 255, 128, 0.95);
    --key-active-bg: linear-gradient(180deg, #66ff99 0%, #00ff66 45%, #00cc44 100%);
    --key-active-shadow-a: rgba(0, 255, 102, 0.30);
    --key-active-shadow-b: rgba(0, 230, 92, 0.24);
    --key-button-border: rgba(51, 255, 128, 0.72);
    --key-button-bg: linear-gradient(135deg, #66ff99 0%, #00ff66 47%, #00cc44 100%);
    --key-button-hover-bg: linear-gradient(135deg, #88ffaa 0%, #22ff77 47%, #00dd55 100%);
    --key-button-shadow-a: rgba(0, 255, 102, 0.24);
    --key-button-shadow-b: rgba(0, 230, 92, 0.16);
    --key-image-filter: blur(22px) saturate(1.32) brightness(1.03) hue-rotate(80deg);
}

/* Apply colors to limited note */
#keys-container .package.package-magma-card .package-limited-note,
#keys-container .package.package-atlantic-card .package-limited-note,
#keys-container .package.package-dev-card .package-limited-note {
    color: var(--key-note);
    text-shadow: 0 0 10px var(--key-note-shadow-a), 0 0 18px var(--key-note-shadow-b);
}

/* Apply filter to glow images */
#keys-container .package.package-magma-card .package-image-glow,
#keys-container .package.package-atlantic-card .package-image-glow,
#keys-container .package.package-dev-card .package-image-glow {
    opacity: 0.46;
    filter: var(--key-image-filter);
}

/* Active quantity button */
#keys-container .package.package-magma-card .package-quantity-option.is-active,
#keys-container .package.package-atlantic-card .package-quantity-option.is-active,
#keys-container .package.package-dev-card .package-quantity-option.is-active {
    color: var(--key-active-text) !important;
    border-color: var(--key-active-border) !important;
    background: var(--key-active-bg) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24) inset, 
                0 12px 26px var(--key-active-shadow-a), 
                0 0 28px var(--key-active-shadow-b) !important;
    text-shadow: 0 1px 0 rgba(15, 24, 45, 0.36) !important;
}

/* Active button styling */
#keys-container .package.package-magma-card .package-active-action,
#keys-container .package.package-atlantic-card .package-active-action,
#keys-container .package.package-dev-card .package-active-action {
    color: var(--key-active-text) !important;
    border-color: var(--key-button-border) !important;
    background: var(--key-button-bg) !important;
    box-shadow: 0 14px 32px var(--key-button-shadow-a), 
                0 0 26px var(--key-button-shadow-b), 
                0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
    text-shadow: 0 1px 0 rgba(15, 24, 45, 0.36) !important;
}

#keys-container .package.package-magma-card .package-active-action:hover,
#keys-container .package.package-atlantic-card .package-active-action:hover,
#keys-container .package.package-dev-card .package-active-action:hover {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    background: var(--key-button-hover-bg) !important;
    box-shadow: 0 16px 36px var(--key-button-shadow-a), 
                0 0 32px var(--key-button-shadow-b), 
                0 0 0 1px rgba(255, 255, 255, 0.22) inset !important;
}


/* ==================== RANKS SPECIFIC STYLES ==================== */

/* Rank Card Color Themes - SIMPLIFICADO */
.package-vip-card {
    --rank-color: #8B7355;
    --rank-glow: rgba(139, 115, 85, 0.2);
}

.package-vipplus-card {
    --rank-color: #00E676;
    --rank-glow: rgba(0, 230, 118, 0.2);
}

.package-mvp-card {
    --rank-color: #3E3E3E;
    --rank-glow: rgba(62, 62, 62, 0.2);
}

.package-mvpplus-card {
    --rank-color: #FFD166;
    --rank-glow: rgba(255, 209, 102, 0.2);
}

.package-marshal-card {
    --rank-color: #D8D8D8;
    --rank-glow: rgba(216, 216, 216, 0.2);
}

.package-mythic-card {
    --rank-color: #FFD700;
    --rank-glow: rgba(255, 215, 0, 0.2);
}

.package-celestial-card {
    --rank-color: #00D9FF;
    --rank-glow: rgba(0, 217, 255, 0.2);
}

.package-elite-card {
    --rank-color: #9D4EDD;
    --rank-glow: rgba(157, 78, 221, 0.2);
}

.package-legend-card {
    --rank-color: #FF6B35;
    --rank-glow: rgba(255, 107, 53, 0.2);
}

/* Rank cards hover - SIMPLIFICADO sem neon */
.package-rank-card:hover {
    border-color: var(--rank-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.package-rank-card .package-active-action {
    background: var(--rank-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    filter: brightness(1);
}

.package-rank-card .package-active-action:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Rank Modal Styles */
.rank-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rank-modal.active {
    display: flex;
}

.rank-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.rank-modal-content {
    position: relative;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rank-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--straindez-border);
    border-radius: 10px;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-modal-close:hover {
    background: var(--straindez-pink);
    border-color: var(--straindez-pink);
    transform: rotate(90deg);
}

/* Modal Header */
.rank-modal-header {
    margin-bottom: 32px;
    text-align: center;
}

.rank-modal-header h2 {
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
    text-shadow: 0 0 30px currentColor;
}

.rank-modal-description {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Modal Body */
.rank-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

/* Features List */
.rank-modal-features h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rank-modal-features ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rank-modal-features li {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    padding-left: 28px;
    position: relative;
    line-height: 1.6;
}

.rank-modal-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--straindez-green);
    font-weight: 700;
    font-size: 18px;
}

/* Kit Preview */
.rank-modal-kit {
    display: flex;
    flex-direction: column;
}

.rank-modal-kit h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rank-modal-kit h3 span {
    color: var(--straindez-cyan);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
}

/* Kit Image Wrapper */
.rank-kit-image-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--straindez-border);
    background: linear-gradient(135deg, #1a1d24 0%, #13161C 100%);
    transition: var(--transition-normal);
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-kit-image-wrap:hover {
    border-color: var(--rank-color);
}

.rank-kit-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 400px;
}

/* Modal Footer */
.rank-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 32px;
    border-top: 1px solid var(--straindez-border);
}

.rank-modal-price {
    flex: 1;
}

.rank-modal-price span {
    font-size: 36px;
    font-weight: 900;
    text-shadow: 0 0 20px currentColor;
}

.rank-modal-add-cart {
    padding: 16px 40px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive for Ranks Modal */
@media (max-width: 768px) {
    .rank-modal-content {
        padding: 24px;
        max-height: 95vh;
    }
    
    .rank-modal-header h2 {
        font-size: 32px;
    }
    
    .rank-modal-body {
        grid-template-columns: 1fr;
    }
    
    #modal-inventory {
        grid-template-columns: repeat(9, 1fr);
        gap: 2px;
    }
    
    .inventory-slot .item-icon {
        font-size: 16px;
    }
    
    .rank-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .rank-modal-add-cart {
        width: 100%;
    }
}

@media (max-width: 480px) {
    #modal-inventory {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .rank-modal-price span {
        font-size: 28px;
    }
}

/* ==================== END OF RANKS STYLES ==================== */


/* ==================== RUBIS SPECIFIC STYLES ==================== */

/* Rubis Theme Colors - Red/Ruby gradient */
.package-ruby-small-card {
    --key-card-glow: #E4003A;
    --key-button-bg: linear-gradient(135deg, #E4003A 0%, #C00030 100%);
    --key-button-shadow: 0 8px 24px rgba(228, 0, 58, 0.4);
}

.package-ruby-medium-card {
    --key-card-glow: #FF1744;
    --key-button-bg: linear-gradient(135deg, #FF1744 0%, #E4003A 100%);
    --key-button-shadow: 0 8px 24px rgba(255, 23, 68, 0.4);
}

.package-ruby-large-card {
    --key-card-glow: #FF4569;
    --key-button-bg: linear-gradient(135deg, #FF4569 0%, #FF1744 100%);
    --key-button-shadow: 0 8px 24px rgba(255, 69, 105, 0.4);
}

.package-ruby-mega-card {
    --key-card-glow: #FF6B9D;
    --key-button-bg: linear-gradient(135deg, #FF6B9D 0%, #FF4569 100%);
    --key-button-shadow: 0 8px 24px rgba(255, 107, 157, 0.4);
}

.package-ruby-ultra-card {
    --key-card-glow: #FF1493;
    --key-button-bg: linear-gradient(135deg, #FF1493 0%, #C71585 100%);
    --key-button-shadow: 0 8px 24px rgba(255, 20, 147, 0.5);
}

.package-ruby-legendary-card {
    --key-card-glow: #FFD700;
    --key-button-bg: linear-gradient(135deg, #FFD700 0%, #FF1493 50%, #E4003A 100%);
    --key-button-shadow: 0 8px 32px rgba(255, 215, 0, 0.6);
}

/* Rubis Glow Effect */
.rubis-glow {
    filter: blur(25px) brightness(1.5);
    opacity: 0.5;
}

/* Rubis Amount Display */
.rubis-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 32px;
    font-weight: 900;
    color: #E4003A;
    text-shadow: 0 0 20px rgba(228, 0, 58, 0.8),
                 0 0 30px rgba(228, 0, 58, 0.5);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.rubis-amount i {
    font-size: 28px;
    animation: gemPulse 2s ease-in-out infinite;
}

@keyframes gemPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(228, 0, 58, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 16px rgba(228, 0, 58, 1));
    }
}

/* Rubis Bonus Badge */
.rubis-bonus-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a0a2e;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.rubis-bonus-badge i {
    font-size: 14px;
    animation: starSpin 3s linear infinite;
}

@keyframes starSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Rubis Card Name Override */
[class*="ruby-"] .name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

/* Legendary Package Special Effects */
.package-ruby-legendary-card {
    position: relative;
    overflow: hidden;
}

.package-ruby-legendary-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 70%
    );
    animation: legendaryShine 3s linear infinite;
}

@keyframes legendaryShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.package-ruby-legendary-card:hover {
    border-color: #FFD700;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 
                0 0 60px rgba(255, 215, 0, 0.6),
                inset 0 0 20px rgba(255, 215, 0, 0.1);
}

/* ==================== END OF RUBIS STYLES ==================== */


/* ==================== CART/CHECKOUT STYLES ==================== */

/* Cart Panel */
.cart-panel {
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
    background: rgba(31, 35, 44, 0.5);
    border-bottom: 1px solid var(--straindez-border);
}

.cart-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cart-total-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 28px;
    font-weight: 900;
    color: var(--straindez-cyan);
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

.cart-total-header small {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.cart-body {
    padding: 30px;
    min-height: 300px;
}

/* Empty Cart Message */
.empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 60px 20px;
    text-align: center;
}

.empty-cart i {
    font-size: 80px;
    color: var(--text-muted);
    opacity: 0.3;
}

.empty-cart h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.empty-cart p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

.empty-cart .btn {
    margin-top: 10px;
    padding: 14px 28px;
}

/* Cart Table */
.cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.cart-table thead th {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--straindez-border);
}

.cart-item-row {
    background: rgba(31, 35, 44, 0.4);
    border: 1px solid var(--straindez-border);
    transition: var(--transition-normal);
}

.cart-item-row:hover {
    background: rgba(31, 35, 44, 0.6);
    border-color: var(--straindez-accent);
}

.cart-item-row td {
    padding: 16px;
    vertical-align: middle;
}

.cart-item-row td:first-child {
    border-radius: 10px 0 0 10px;
}

.cart-item-row td:last-child {
    border-radius: 0 10px 10px 0;
}

/* Cart Item Image */
.cart-item-image {
    width: 80px;
}

.cart-item-image img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--straindez-border);
    padding: 4px;
    background: rgba(0, 0, 0, 0.3);
}

/* Cart Item Name */
.cart-item-name .item-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cart-item-name .item-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--straindez-cyan);
    opacity: 0.7;
}

/* Cart Item Price */
.cart-item-price {
    text-align: center;
}

.cart-item-price .price-amount {
    font-size: 20px;
    font-weight: 800;
    color: var(--straindez-yellow);
}

.cart-item-price small {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Quantity Controls */
.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 92, 231, 0.2);
    border: 1px solid var(--straindez-border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.qty-btn:hover {
    background: var(--straindez-accent);
    border-color: var(--straindez-accent);
    transform: scale(1.1);
}

.qty-input {
    width: 50px;
    height: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--straindez-border);
    border-radius: 6px;
    outline: none;
}

.qty-input:focus {
    border-color: var(--straindez-cyan);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

/* Remove from input spinner arrows */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input[type=number] {
    -moz-appearance: textfield;
}

/* Cart Item Actions */
.cart-item-actions {
    text-align: center;
}

.btn-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(219, 72, 69, 0.2);
    border: 1px solid rgba(219, 72, 69, 0.3);
    border-radius: 8px;
    color: #ff6b6b;
    cursor: pointer;
    transition: var(--transition-normal);
}

.btn-icon:hover {
    background: #db4845;
    border-color: #db4845;
    color: white;
    transform: scale(1.1);
}

/* Coupon Section */
.cart-coupon {
    padding: 30px;
    border-top: 1px solid var(--straindez-border);
    background: rgba(0, 0, 0, 0.2);
}

.cart-coupon h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coupon-input-group {
    display: flex;
    gap: 12px;
}

.coupon-input-group .form-control {
    flex: 1;
    height: 50px;
    font-size: 14px;
    padding: 0 20px;
    background: var(--straindez-bg);
    border: 1px solid var(--straindez-border);
    border-radius: 10px;
    color: var(--text-primary);
    outline: none;
    transition: var(--transition-normal);
}

.coupon-input-group .form-control:focus {
    border-color: var(--straindez-cyan);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.3);
}

.coupon-input-group .btn {
    padding: 0 24px;
    height: 50px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.coupon-message {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: none;
}

.coupon-success {
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    color: var(--straindez-green);
}

.coupon-error {
    background: rgba(219, 72, 69, 0.1);
    border: 1px solid rgba(219, 72, 69, 0.3);
    color: #ff6b6b;
}

/* Cart Footer */
.cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 30px;
    border-top: 1px solid var(--straindez-border);
    background: rgba(108, 92, 231, 0.05);
}

.cart-footer-info {
    flex: 1;
}

.cart-footer-info p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.cart-footer-info p strong {
    color: var(--text-primary);
}

.cart-footer-actions {
    flex-shrink: 0;
}

.btn-purchase {
    padding: 18px 36px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--straindez-green) 0%, #00C853 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 10px 30px rgba(0, 230, 118, 0.3);
}

.btn-purchase:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 230, 118, 0.5);
    filter: brightness(1.1);
}

.btn-purchase i:last-child {
    font-size: 14px;
}

/* Responsive Cart */
@media (max-width: 768px) {
    .cart-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .cart-body {
        padding: 20px 15px;
    }
    
    .cart-table {
        display: block;
        overflow-x: auto;
    }
    
    .cart-table thead {
        display: none;
    }
    
    .cart-item-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 10px;
    }
    
    .cart-item-row td {
        padding: 8px;
        border: none;
    }
    
    .cart-item-image {
        width: 100%;
        text-align: center;
        margin-bottom: 12px;
    }
    
    .cart-item-name {
        width: 100%;
        text-align: center;
        margin-bottom: 12px;
    }
    
    .cart-item-price,
    .cart-item-quantity {
        width: 50%;
        text-align: center;
    }
    
    .cart-item-actions {
        width: 100%;
        margin-top: 12px;
    }
    
    .cart-footer {
        flex-direction: column;
        text-align: center;
    }
    
    .cart-footer-actions {
        width: 100%;
    }
    
    .btn-purchase {
        width: 100%;
        justify-content: center;
    }
    
    .coupon-input-group {
        flex-direction: column;
    }
    
    .coupon-input-group .btn {
        width: 100%;
    }
}

/* ==================== END OF CART STYLES ==================== */


/* ==================== BATTLE PASS (RANK UPGRADES) PAGE ==================== */

/* Battle Pass Container */
#battlepass-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

/* Battle Pass Card Base */
.battlepass-card {
    position: relative;
    background: var(--straindez-card);
    border: 2px solid var(--straindez-border);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition-normal);
    cursor: pointer;
}

.battlepass-card:hover {
    transform: translateY(-8px);
    border-color: var(--bp-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 
                0 0 40px var(--bp-color);
}

/* Special Badge */
.battlepass-special-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    animation: pulseGlow 2s ease-in-out infinite;
}

.battlepass-special-badge i {
    margin-right: 4px;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6), 0 0 20px var(--bp-color);
    }
}

/* Battle Pass Subtitle */
.battlepass-subtitle {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 16px;
}

/* Benefits List */
.battlepass-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: var(--transition-fast);
}

.benefit-item:hover {
    background: rgba(0, 0, 0, 0.4);
    padding-left: 12px;
}

.benefit-item i {
    color: var(--straindez-green);
    font-size: 14px;
    min-width: 14px;
}

/* Battle Pass Button */
.battlepass-add-cart {
    width: 100%;
    padding: 16px;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.battlepass-add-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.battlepass-add-cart:active {
    transform: translateY(0);
}

/* Image Styles for Battle Pass */
.battlepass-card .image {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    position: relative;
    overflow: hidden;
}

.battlepass-card .image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, var(--bp-color), transparent);
    opacity: 0.1;
    will-change: transform;
    animation: rotateBg 8s linear infinite;
}

@keyframes rotateBg {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.battlepass-card .package-image-wrap {
    position: relative;
    z-index: 2;
}

.battlepass-card .package-image-main,
.battlepass-card .package-image-glow {
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

.battlepass-card .package-image-glow {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
    filter: blur(20px);
}

/* Info Section */
.battlepass-card .info {
    padding: 24px;
}

.battlepass-card .name {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    text-align: center;
}

/* Price Display */
.battlepass-card .price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 24px;
    font-weight: 900;
}

.battlepass-card .price .discount {
    font-size: 16px;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Responsive Battle Pass */
@media (max-width: 768px) {
    #battlepass-container {
        grid-template-columns: 1fr;
    }
    
    .battlepass-progression {
        flex-direction: column;
        gap: 12px;
    }
    
    .progression-arrow {
        transform: rotate(90deg);
    }
}

/* Title Section */
.title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--straindez-border);
}

.title .return {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--straindez-card);
    border: 2px solid var(--straindez-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 20px;
    text-decoration: none;
    transition: var(--transition-normal);
}

.title .return:hover {
    background: var(--straindez-accent);
    border-color: var(--straindez-accent);
    color: white;
    transform: translateX(-4px);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.title h2 {
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, var(--straindez-cyan), var(--straindez-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==================== END BATTLE PASS STYLES ==================== */


/* ==================== PAYMENT & CHECKOUT SYSTEM ==================== */

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 14, 19, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#loading-overlay .loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(108, 92, 231, 0.2);
    border-top-color: var(--straindez-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#loading-overlay p {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

/* Payment Modal */
.payment-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.payment-modal-content {
    position: relative;
    z-index: 2;
    background: var(--straindez-card);
    border: 2px solid var(--straindez-border);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.payment-modal-content h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 24px;
    text-align: center;
}

.payment-modal-content .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.payment-modal-content .modal-close:hover {
    background: var(--button-danger);
    color: white;
}

/* Payment Summary */
.payment-summary {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.payment-summary p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.payment-summary strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* PayPal Button Container */
#paypal-button-container {
    margin: 20px 0;
}

.payment-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 16px;
}

/* Payment Methods Selector */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.payment-method-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--straindez-card);
    border: 2px solid var(--straindez-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
}

.payment-method-btn:hover {
    background: rgba(108, 92, 231, 0.1);
    border-color: var(--straindez-accent);
    transform: translateX(8px);
}

.payment-method-btn i {
    font-size: 32px;
    color: var(--straindez-accent);
}

/* Custom Alert */
.custom-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.alert-content {
    background: var(--straindez-card);
    border: 2px solid var(--straindez-border);
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.alert-content i {
    font-size: 60px;
    margin-bottom: 20px;
}

.alert-success i {
    color: var(--straindez-green);
}

.alert-error i {
    color: var(--button-danger);
}

.alert-warning i {
    color: var(--straindez-yellow);
}

.alert-info i {
    color: var(--straindez-cyan);
}

.alert-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.alert-content p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.alert-content button {
    padding: 12px 32px;
    background: var(--straindez-accent);
    border: none;
    border-radius: 10px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.alert-content button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

/* Checkout Button Loading State */
#purchase-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

#purchase-btn.loading::after {
    content: '';
    margin-left: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.6s linear infinite;
}

/* Responsive */
@media (max-width: 600px) {
    .payment-modal-content {
        padding: 30px 20px;
    }
    
    .alert-content {
        padding: 30px 20px;
    }
    
    .payment-method-btn {
        padding: 16px;
    }
}

/* ==================== END PAYMENT SYSTEM ==================== */


/* ==================== BATTLE PASS STYLES ==================== */

/* Battle Pass Card */
.battlepass-card {
    position: relative;
    overflow: hidden;
}

.battlepass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bp-color), transparent);
    animation: battlePassGlow 2s ease-in-out infinite;
}

@keyframes battlePassGlow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Special Badge */
.battlepass-special-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a0a2e;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
    animation: badgePulse 2s ease-in-out infinite;
}

.battlepass-special-badge i {
    animation: starSpin 3s linear infinite;
}

/* Rank Progression */
.battlepass-progression {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.rank-badge {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.rank-badge.from-rank {
    opacity: 0.7;
}

.rank-badge.to-rank {
    box-shadow: 0 0 15px currentColor;
}

.progression-arrow {
    font-size: 20px;
    color: var(--bp-color);
    animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(4px);
        opacity: 1;
    }
}

/* Benefits List */
.battlepass-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.benefit-item i {
    color: var(--bp-color);
    font-size: 12px;
    flex-shrink: 0;
}

/* Battle Pass Button */
.battlepass-add-cart {
    position: relative;
    overflow: hidden;
}

.battlepass-add-cart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.battlepass-add-cart:hover::before {
    width: 300px;
    height: 300px;
}

/* Battle Pass Card Hover */
.battlepass-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.battlepass-card:hover::before {
    height: 4px;
}

/* Responsive Battle Pass */
@media (max-width: 768px) {
    .battlepass-progression {
        flex-direction: column;
        gap: 8px;
    }
    
    .progression-arrow {
        transform: rotate(90deg);
    }
    
    .battlepass-benefits {
        padding: 10px;
    }
    
    .benefit-item {
        font-size: 12px;
    }
}

/* ==================== END OF BATTLE PASS STYLES ==================== */


/* ==================== CHECKOUT PAGE STYLES ==================== */

.checkout-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    margin-top: 40px;
}

/* Checkout Form */
.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.checkout-section {
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 16px;
    padding: 30px;
    transition: var(--transition-normal);
}

.checkout-section-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(100%);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--straindez-accent), var(--straindez-accent-dark));
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    color: white;
}

.section-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.section-body {
    padding-left: 55px;
}

.section-description {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(31, 35, 44, 0.6);
    border: 1px solid var(--straindez-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    transition: var(--transition-normal);
}

.form-input:focus {
    outline: none;
    border-color: var(--straindez-accent);
    background: rgba(31, 35, 44, 0.8);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.input-feedback {
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

.feedback-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.feedback-success {
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    color: #00E676;
}

.feedback-loading {
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.3);
    color: var(--straindez-accent);
}

.feedback-warning {
    background: rgba(255, 214, 102, 0.1);
    border: 1px solid rgba(255, 214, 102, 0.3);
    color: var(--straindez-yellow);
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn-success {
    background: linear-gradient(135deg, #00E676, #00C853) !important;
}

/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.payment-method {
    background: rgba(31, 35, 44, 0.4);
    border: 2px solid var(--straindez-border);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition-normal);
}

.payment-method:has(input:checked) {
    border-color: var(--straindez-accent);
    background: rgba(108, 92, 231, 0.1);
}

.payment-method-header {
    padding: 16px 20px;
    cursor: pointer;
}

.payment-method-header label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-method-header input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--straindez-accent);
    cursor: pointer;
}

.payment-method-header i {
    font-size: 24px;
    color: var(--straindez-accent);
}

.payment-method-body {
    display: none;
    padding: 0 20px 20px;
}

.payment-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

#paypal-button-container {
    margin-top: 15px;
}

/* Checkout Summary */
.checkout-summary {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.summary-card {
    background: var(--straindez-card);
    border: 1px solid var(--straindez-border);
    border-radius: 16px;
    padding: 30px;
}

.summary-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 25px;
}

.summary-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.summary-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.summary-item-info img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
}

.summary-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-item-qty {
    font-size: 12px;
    color: var(--text-secondary);
}

.summary-item-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-divider {
    height: 1px;
    background: var(--straindez-border);
    margin: 20px 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.summary-total {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 10px;
}

.summary-total span:last-child {
    background: linear-gradient(90deg, var(--straindez-cyan), var(--straindez-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.summary-note {
    margin-top: 25px;
    padding: 15px;
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.summary-note i {
    color: var(--straindez-green);
    font-size: 16px;
    margin-top: 2px;
}

.summary-note p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1200px) {
    .checkout-container {
        grid-template-columns: 1fr;
    }
    
    .checkout-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    .section-body {
        padding-left: 0;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==================== END CHECKOUT STYLES ==================== */


/* ==================== RANKS PAGE IMPROVEMENTS ==================== */

/* Ranks Container - Grid uniforme */
#ranks-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

/* Rank Cards - Design MODERNO e BONITO - OTIMIZADO */
#ranks-container .package {
    display: flex;
    flex-direction: column;
    height: 520px;
    min-height: 520px;
    max-height: 520px;
    background: rgba(19, 22, 28, 0.95);
    border: 2px solid;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    will-change: transform;
}

/* Brilho interno no card - REMOVIDO para melhor performance */

/* Linha brilhante no topo - REMOVIDA */
#ranks-container .package::after {
    display: none;
}

/* Cores das bordas - SIMPLES SEM LED */
#ranks-container .package {
    border: 2px solid var(--straindez-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

#ranks-container .package:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: var(--rank-color);
}



/* Imagem do rank - MAIS DESTAQUE */
#ranks-container .package .image {
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, 
        rgba(0, 0, 0, 0.4) 0%, 
        rgba(0, 0, 0, 0.2) 100%);
    z-index: 5;
}

/* Glow atrás da imagem - REMOVIDO */
#ranks-container .package .image::before {
    display: none;
}

#ranks-container .package:hover .image::before {
    opacity: 0.25;
}

#ranks-container .package .package-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

#ranks-container .package .package-image-main,
#ranks-container .package .package-image-glow {
    max-width: 220px;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
    will-change: transform;
}

#ranks-container .package:hover .package-image-main {
    transform: scale(1.08);
}

#ranks-container .package .package-image-glow {
    display: none; /* REMOVIDO - Sem glow */
}

#ranks-container .package .package-image-main {
    position: relative;
    z-index: 2;
}

/* Info section - Espaçamento ajustado */
#ranks-container .package .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px; /* Reduzido de 24px para 20px */
    gap: 12px;
    background: var(--straindez-card);
}

#ranks-container .package .info .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduzido de 12px para 8px */
    justify-content: center;
}

/* Nome do rank - SIMPLES */
#ranks-container .package .name {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
}

/* Preço - SIMPLES */
#ranks-container .package .price {
    text-align: center;
    margin: 0;
}

#ranks-container .package .price .package-active-price {
    font-size: 28px;
    font-weight: 900;
    color: var(--rank-color);
    position: relative;
}

/* Linha decorativa removida */
#ranks-container .package .price .package-active-price::before {
    display: none;
}

/* Botão - Tamanho fixo e cor correta - VISÍVEL */
#ranks-container .package .button {
    margin-top: 0;
    display: block !important; /* Força visibilidade */
    opacity: 1 !important;
    visibility: visible !important;
}

#ranks-container .package .btn-info,
#ranks-container .package .rank-view-details {
    width: 100%;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--rank-color);
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#ranks-container .package .btn-info:hover,
#ranks-container .package .rank-view-details:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}

/* Linha decorativa embaixo do card com a cor do rank */
#ranks-container .package::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--rank-color);
}

/* Responsive - Mantém tamanho */
@media (max-width: 1400px) {
    #ranks-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    #ranks-container {
        grid-template-columns: 1fr;
    }
    
    #ranks-container .package {
        height: 480px; /* Reduzido de 580px */
        min-height: 480px;
        max-height: 480px;
    }
    
    #ranks-container .package .image {
        height: 240px; /* Reduzido */
        min-height: 240px;
        max-height: 240px;
        padding: 15px;
    }
    
    #ranks-container .package .package-image-main,
    #ranks-container .package .package-image-glow {
        max-width: 180px; /* Reduzido */
        max-height: 180px; /* Reduzido */
    }
    
    #ranks-container .package .name {
        font-size: 20px;
    }
    
    #ranks-container .package .price .package-active-price {
        font-size: 18px;
    }
}

/* ==================== END RANKS IMPROVEMENTS ==================== */


/* ==================== TEBEX INTEGRATION STYLES ==================== */

.tebex-info-box {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.1), rgba(0, 217, 255, 0.1));
    border: 2px solid rgba(108, 92, 231, 0.3);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
}

.tebex-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.tebex-logo i {
    font-size: 32px;
    color: var(--straindez-accent);
}

.tebex-logo h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.tebex-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tebex-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.tebex-features li i {
    color: var(--straindez-green);
    font-size: 16px;
}

.tebex-checkout-methods {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.btn-tebex-main {
    background: linear-gradient(135deg, var(--straindez-accent), var(--straindez-accent-dark));
    color: white;
    padding: 18px 32px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.btn-tebex-main small {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 500;
}

.btn-tebex-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 92, 231, 0.5);
}

.btn-secondary {
    background: rgba(31, 35, 44, 0.8);
    color: var(--text-primary);
    border: 2px solid var(--straindez-border);
    padding: 16px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.btn-secondary small {
    font-size: 12px;
    opacity: 0.7;
    font-weight: 500;
}

.btn-secondary:hover {
    background: rgba(31, 35, 44, 1);
    border-color: var(--straindez-accent);
    transform: translateY(-2px);
}

.divider-text {
    text-align: center;
    position: relative;
    margin: 10px 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.divider-text::before,
.divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: var(--straindez-border);
}

.divider-text::before {
    left: 0;
}

.divider-text::after {
    right: 0;
}

.tebex-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.2);
    border-radius: 8px;
}

.tebex-note i {
    color: var(--straindez-green);
    font-size: 16px;
    margin-top: 2px;
}

.tebex-note p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.btn-primary {
    background: linear-gradient(135deg, var(--straindez-accent), var(--straindez-accent-dark));
    box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4);
}

/* ==================== END TEBEX STYLES ==================== */


/* ==================== KEY CARD THEMED BACKGROUNDS ==================== */
/* Fundo temático dentro de cada card de key */
.key-card-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* Garante que o conteúdo do card fique acima do fundo */
.package-bulk-card {
    position: relative;
    overflow: hidden;
}

.package-bulk-card .image,
.package-bulk-card .info {
    position: relative;
    z-index: 10;
}

/* ==================== MAGMA KEY CARD BACKGROUND ==================== */
.package-magma-card {
    background: radial-gradient(ellipse at center, #1a0000 0%, #0d0000 100%) !important;
    border: 2px solid rgba(255, 51, 51, 0.4) !important;
}

.magma-card-bg .magma-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    animation: twinkle 3s infinite;
}

.magma-card-bg .magma-star:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.magma-card-bg .magma-star:nth-child(2) { top: 40%; left: 80%; animation-delay: 0.5s; }
.magma-card-bg .magma-star:nth-child(3) { top: 70%; left: 30%; animation-delay: 1s; }
.magma-card-bg .magma-star:nth-child(4) { top: 85%; left: 70%; animation-delay: 1.5s; }

.magma-card-bg .magma-nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
}

.magma-card-bg .magma-nebula-1 {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -50px;
    background: radial-gradient(circle, rgba(255, 80, 0, 0.6) 0%, transparent 70%);
}

.magma-card-bg .magma-nebula-2 {
    width: 250px;
    height: 250px;
    bottom: -100px;
    right: -50px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.7) 0%, transparent 70%);
}

/* ==================== ATLANTIC KEY CARD BACKGROUND ==================== */
.package-atlantic-card {
    background: linear-gradient(135deg, #001f3f 0%, #003d6b 100%) !important;
    border: 2px solid rgba(0, 163, 255, 0.4) !important;
}

.atlantic-card-bg .atlantic-wave {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 40px;
    background: rgba(0, 163, 255, 0.15);
    border-radius: 50%;
}

.atlantic-card-bg .atlantic-wave-1 {
    left: -50%;
    animation: wave 8s linear infinite;
}

.atlantic-card-bg .atlantic-wave-2 {
    left: -50%;
    animation: wave 6s linear infinite 2s;
    opacity: 0.5;
}

.atlantic-card-bg .atlantic-wave-3 {
    left: -50%;
    animation: wave 10s linear infinite 4s;
    opacity: 0.3;
}

@keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.atlantic-card-bg .atlantic-fish {
    position: absolute;
    font-size: 20px;
    opacity: 0.6;
    animation: swim 15s linear infinite;
}

.atlantic-card-bg .atlantic-fish-1 {
    top: 25%;
    left: -30px;
    animation-delay: 0s;
}

.atlantic-card-bg .atlantic-fish-2 {
    top: 55%;
    left: -30px;
    animation-delay: 5s;
    font-size: 16px;
}

.atlantic-card-bg .atlantic-fish-3 {
    top: 75%;
    left: -30px;
    animation-delay: 10s;
    font-size: 18px;
}

@keyframes swim {
    0% { transform: translateX(0); }
    100% { transform: translateX(450px); }
}

.atlantic-card-bg .atlantic-bubble {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    bottom: 0;
    animation: bubble 6s ease-in infinite;
}

.atlantic-card-bg .atlantic-bubble:nth-child(7) { left: 20%; animation-delay: 0s; }
.atlantic-card-bg .atlantic-bubble:nth-child(8) { left: 50%; animation-delay: 2s; }
.atlantic-card-bg .atlantic-bubble:nth-child(9) { left: 80%; animation-delay: 4s; }

@keyframes bubble {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-600px) scale(1.5); opacity: 0; }
}

/* ==================== DEV KEY CARD BACKGROUND ==================== */
.package-dev-card {
    background: linear-gradient(135deg, #0a0e13 0%, #0d1117 50%, #161b22 100%) !important;
    border: 2px solid rgba(0, 255, 102, 0.5) !important;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.1) !important;
}

.package-dev-card:hover {
    border-color: rgba(0, 255, 102, 0.8) !important;
    box-shadow: 0 0 30px rgba(0, 255, 102, 0.2) !important;
}

/* Linhas de código scrollando */
.dev-card-bg .dev-code-line {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 255, 102, 0.8);
    white-space: nowrap;
    animation: scrollCode 12s linear infinite;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.6);
    letter-spacing: 0.5px;
}

.dev-card-bg .dev-code-line:nth-child(1) { 
    top: 15%; 
    left: 100%; 
    animation-delay: 0s; 
}

.dev-card-bg .dev-code-line:nth-child(2) { 
    top: 30%; 
    left: 100%; 
    animation-delay: 2.4s; 
    font-size: 11px;
}

.dev-card-bg .dev-code-line:nth-child(3) { 
    top: 50%; 
    left: 100%; 
    animation-delay: 4.8s; 
}

.dev-card-bg .dev-code-line:nth-child(4) { 
    top: 70%; 
    left: 100%; 
    animation-delay: 7.2s;
    font-size: 10px;
}

.dev-card-bg .dev-code-line:nth-child(5) { 
    top: 85%; 
    left: 100%; 
    animation-delay: 9.6s; 
    font-size: 11px;
}

@keyframes scrollCode {
    0% { 
        transform: translateX(0); 
        opacity: 0; 
    }
    5% { 
        opacity: 1; 
    }
    95% { 
        opacity: 1; 
    }
    100% { 
        transform: translateX(-700px); 
        opacity: 0; 
    }
}

/* Código binário Matrix caindo */
.dev-card-bg .dev-matrix {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    color: rgba(0, 255, 102, 0.7);
    animation: matrixFall 8s linear infinite;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.9);
    letter-spacing: 2px;
}

.dev-card-bg .dev-matrix:nth-child(6) { 
    left: 20%; 
    top: -40px; 
    animation-delay: 0s; 
}

.dev-card-bg .dev-matrix:nth-child(7) { 
    left: 40%; 
    top: -40px; 
    animation-delay: 2s; 
    font-size: 16px;
}

.dev-card-bg .dev-matrix:nth-child(8) { 
    left: 60%; 
    top: -40px; 
    animation-delay: 4s; 
}

.dev-card-bg .dev-matrix:nth-child(9) { 
    left: 80%; 
    top: -40px; 
    animation-delay: 6s; 
    font-size: 20px;
}

@keyframes matrixFall {
    0% { 
        transform: translateY(0); 
        opacity: 0; 
    }
    5% { 
        opacity: 1; 
    }
    95% { 
        opacity: 1; 
    }
    100% { 
        transform: translateY(700px); 
        opacity: 0; 
    }
}

/* Grid de fundo estilo hacker */
.dev-card-bg .dev-grid {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 102, 0.1) 50%, 
        transparent 100%);
}

.dev-card-bg .dev-grid:nth-child(10) {
    top: 25%;
    animation: gridPulse 3s ease-in-out infinite;
}

.dev-card-bg .dev-grid:nth-child(11) {
    top: 50%;
    animation: gridPulse 3s ease-in-out infinite 1s;
}

.dev-card-bg .dev-grid:nth-child(12) {
    top: 75%;
    animation: gridPulse 3s ease-in-out infinite 2s;
}

@keyframes gridPulse {
    0%, 100% { 
        opacity: 0.3;
        transform: scaleY(1);
    }
    50% { 
        opacity: 0.8;
        transform: scaleY(2);
    }
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}


/* ==================== BOOSTERS PAGE ==================== */
.package-booster-card {
    position: relative;
    background: linear-gradient(135deg, #13161C 0%, #1a1d24 100%);
    border: 2px solid var(--booster-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.package-booster-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border-width: 3px;
}

/* Fundo animado dos boosters */
.booster-card-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

/* Partículas flutuando */
.booster-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--booster-color);
    border-radius: 50%;
    opacity: 0.6;
    animation: floatParticle 6s ease-in-out infinite;
}

.booster-particle:nth-child(1) {
    left: 20%;
    bottom: -10px;
    animation-delay: 0s;
}

.booster-particle:nth-child(2) {
    left: 40%;
    bottom: -10px;
    animation-delay: 1.2s;
}

.booster-particle:nth-child(3) {
    left: 60%;
    bottom: -10px;
    animation-delay: 2.4s;
}

.booster-particle:nth-child(4) {
    left: 80%;
    bottom: -10px;
    animation-delay: 3.6s;
}

.booster-particle:nth-child(5) {
    left: 50%;
    bottom: -10px;
    animation-delay: 4.8s;
}

@keyframes floatParticle {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-600px) scale(1.5);
        opacity: 0;
    }
}

/* Ondas de energia - REMOVIDAS */

/* Ícone do booster */
.booster-icon-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 20px;
}

.booster-icon {
    font-size: 80px;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    animation: pulseIcon 3s ease-in-out infinite;
}

@keyframes pulseIcon {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Info do booster */
.package-booster-card .info {
    position: relative;
    z-index: 10;
    padding: 0 24px 24px;
}

.package-booster-card .name {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--booster-color);
    text-align: center;
    margin-bottom: 8px;
}

.booster-description {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 16px;
    opacity: 0.8;
}

.booster-multiplier {
    font-size: 18px;
    font-weight: 800;
    color: var(--booster-color);
    text-align: center;
    margin-bottom: 12px;
    text-shadow: 0 0 10px var(--booster-color);
}

.package-booster-card .price {
    text-align: center;
    margin-bottom: 20px;
}

.package-booster-card .package-active-price {
    font-size: 28px;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Botões de duração */
.booster-duration-options {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.booster-duration-option {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.booster-duration-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--booster-color);
    color: var(--booster-color);
}

.booster-duration-option.is-active {
    background: var(--booster-color);
    border-color: var(--booster-color);
    color: white;
}

/* Botão add to cart */
.package-booster-card .booster-active-action {
    width: 100%;
    padding: 16px 32px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.package-booster-card .booster-active-action::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.package-booster-card .booster-active-action:hover::before {
    width: 300px;
    height: 300px;
}

.package-booster-card .booster-active-action:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 
                0 0 40px var(--booster-color);
    filter: brightness(1.15);
}

.package-booster-card .booster-active-action:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.package-booster-card .booster-active-action i {
    margin-right: 8px;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .booster-icon {
        font-size: 60px;
    }
    
    .package-booster-card .name {
        font-size: 20px;
    }
    
    .booster-duration-options {
        flex-wrap: wrap;
    }
    
    .booster-duration-option {
        padding: 8px 16px;
        font-size: 11px;
    }
}


/* ==================== FUNDOS TEMÁTICOS DOS BOOSTERS ==================== */

/* XP Booster - Estrelas e constelações douradas */
.booster-bg-xp-booster::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
}

.booster-bg-xp-booster::after {
    content: '✦';
    position: absolute;
    font-size: 40px;
    color: rgba(255, 215, 0, 0.2);
    top: 20%;
    right: 15%;
    animation: twinkle 4s ease-in-out infinite;
}

/* Money Booster - Moedas flutuantes */
.booster-bg-money-booster::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 30% 40%, rgba(0, 230, 118, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(0, 230, 118, 0.1) 0%, transparent 50%);
}

.booster-bg-money-booster::after {
    content: '$';
    position: absolute;
    font-size: 100px;
    font-weight: bold;
    color: rgba(0, 230, 118, 0.08);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Drop Booster - Caixas e itens */
.booster-bg-drop-booster::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 25% 35%, rgba(157, 78, 221, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 65%, rgba(157, 78, 221, 0.1) 0%, transparent 50%);
}

.booster-bg-drop-booster::after {
    content: '◆';
    position: absolute;
    font-size: 60px;
    color: rgba(157, 78, 221, 0.15);
    top: 25%;
    left: 20%;
    transform: rotate(45deg);
    animation: floatDiamond 5s ease-in-out infinite;
}

@keyframes floatDiamond {
    0%, 100% {
        transform: rotate(45deg) translateY(0);
    }
    50% {
        transform: rotate(45deg) translateY(-20px);
    }
}

/* Speed Booster - Raios e relâmpagos */
.booster-bg-speed-booster::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, transparent 0%, rgba(0, 217, 255, 0.1) 50%, transparent 100%),
        radial-gradient(circle at 50% 50%, rgba(0, 217, 255, 0.1) 0%, transparent 60%);
}

.booster-bg-speed-booster::after {
    content: '⚡';
    position: absolute;
    font-size: 80px;
    color: rgba(0, 217, 255, 0.15);
    top: 15%;
    right: 10%;
    transform: rotate(-15deg);
    animation: lightning 3s ease-in-out infinite;
}

@keyframes lightning {
    0%, 100% {
        opacity: 0.15;
        transform: rotate(-15deg) scale(1);
    }
    50% {
        opacity: 0.3;
        transform: rotate(-15deg) scale(1.1);
    }
}

/* Strength Booster - Chamas e poder */
.booster-bg-strength-booster::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at bottom, rgba(255, 107, 53, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 30%, rgba(255, 107, 53, 0.1) 0%, transparent 50%);
}

.booster-bg-strength-booster::after {
    content: '🔥';
    position: absolute;
    font-size: 50px;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.3;
    filter: blur(2px);
    animation: flame 2s ease-in-out infinite;
}

@keyframes flame {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateX(-50%) translateY(-10px) scale(1.1);
        opacity: 0.5;
    }
}

/* Adicionar mais estrelas pequenas no XP booster */
.booster-bg-xp-booster {
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(255, 215, 0, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 85% 25%, rgba(255, 215, 0, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 25% 80%, rgba(255, 215, 0, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 75% 85%, rgba(255, 215, 0, 0.3) 1px, transparent 1px);
}

/* Adicionar símbolos de dinheiro no Money booster */
.booster-bg-money-booster {
    background-image: 
        radial-gradient(circle at 10% 15%, rgba(0, 230, 118, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 90% 20%, rgba(0, 230, 118, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 20% 85%, rgba(0, 230, 118, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 80% 90%, rgba(0, 230, 118, 0.2) 2px, transparent 2px);
}


/* ==================== FUNDOS TEMÁTICOS DOS VIPS - REMOVIDOS ==================== */
/* Fundo temático dentro de cada card de VIP - DESATIVADO */
.rank-card-bg {
    display: none;
}

#ranks-container .package .image,
#ranks-container .package .info {
    position: relative;
    z-index: 10;
}

/* Todos os fundos temáticos removidos */
.rank-bg-vip::before,
.rank-bg-vip::after,
.rank-bg-mvp::before,
.rank-bg-mvp::after,
.rank-bg-marshal::before,
.rank-bg-marshal::after,
.rank-bg-mythic::before,
.rank-bg-mythic::after,
.rank-bg-celestial::before,
.rank-bg-celestial::after {
    display: none;
}

/* ==================== MELHORAR BOTÕES DOS VIPS ==================== */
#ranks-container .package .rank-view-details {
    width: 100%;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#ranks-container .package .rank-view-details::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

#ranks-container .package .rank-view-details:hover::before {
    width: 300px;
    height: 300px;
}

#ranks-container .package .rank-view-details:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}

#ranks-container .package .rank-view-details i {
    margin-right: 6px;
}

/* ==================== MELHORAR MODAL DOS VIPS ==================== */
.rank-modal {
    backdrop-filter: blur(8px);
}

.rank-modal-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(0px);
}

.rank-modal-content {
    background: linear-gradient(135deg, #13161C 0%, #1a1d24 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.rank-modal-header h2 {
    font-size: 42px;
    text-shadow: none;
}

.rank-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.rank-modal-close:hover {
    background: rgba(255, 70, 70, 0.8);
    border-color: rgba(255, 70, 70, 1);
    transform: rotate(90deg) scale(1.1);
}

.rank-modal-add-cart {
    padding: 16px 40px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.2px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.rank-modal-add-cart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.rank-modal-add-cart:hover::before {
    width: 300px;
    height: 300px;
}

.rank-modal-add-cart:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    filter: brightness(1.1);
}

.rank-modal-price span {
    font-size: 32px;
    text-shadow: none;
}

/* Remover glows excessivos */
.rank-modal-features li::before {
    color: var(--straindez-green);
    text-shadow: none;
}

.rank-kit-image-wrap {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
}

.rank-kit-image-wrap:hover {
    border-color: rgba(0, 217, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 217, 255, 0.2);
}