/* VRGoo VIP Page - vrmoo.net Inspired Design v2.0 */

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

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

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ===== TOP SECTION (Header with member cards) - HIDDEN ===== */
.vip-top {
    display: none !important;
}

/* Also hide via other possible selectors */
.vip-count {
    display: none !important;
}

.vip-current {
    display: none !important;
}

/* Top section is hidden - no styles needed */

/* ===== CORE PRIVILEGES SECTION (Injected) ===== */
.vrgoo-privileges {
    background: linear-gradient(180deg, #e8f4fd 0%, #f8f9ff 100%) !important;
    padding: 50px 20px 30px !important;
    text-align: center !important;
}

.vrgoo-priv-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #d4a017 !important;
    margin: 0 0 30px !important;
    letter-spacing: 1px !important;
}

.vrgoo-priv-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}

.vrgoo-priv-item {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
    border: 1px solid #eef2f7 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    text-align: left !important;
}

.vrgoo-priv-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
    border-color: #d4a017 !important;
}

.vrgoo-priv-icon {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 24px !important;
    line-height: 32px !important;
    text-align: center !important;
}

.vrgoo-priv-icon img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

.vrgoo-priv-text h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin: 0 0 5px !important;
}

.vrgoo-priv-text p {
    font-size: 12.5px !important;
    color: #888 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ===== DONATE TO MEMBERS HEADER ===== */
.vrgoo-donate-header {
    text-align: center !important;
    padding: 30px 20px 10px !important;
    background: #f8f9ff !important;
    width: 100% !important;
}

.vrgoo-donate-header h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #4a9eff !important;
    margin: 0 auto !important;
    letter-spacing: 1px !important;
    display: block !important;
    text-align: center !important;
}

/* ===== PRICING CARDS SECTION ===== */
.vip-page {
    background: #f8f9ff !important;
    padding: 50px 20px 60px !important;
}

.vip-page .site-main {
    max-width: 1100px !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vip-list {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.vip-item {
    flex: 1 !important;
    min-width: 240px !important;
    max-width: 270px !important;
    float: none !important;
    padding: 0 !important;
    animation: fadeInUp 0.5s ease forwards;
}

.vip-list-in {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 35px 22px 28px !important;
    box-shadow: 0 5px 30px rgba(0,0,0,0.06) !important;
    border: 2px solid #f0f0f0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
}

.vip-list-in:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(102,126,234,0.15) !important;
    border-color: #667eea !important;
}

/* Highlight Diamond (4th card) */
.vip-item:nth-child(4) .vip-list-in {
    border-color: #667eea !important;
    background: linear-gradient(180deg, #f8f7ff 0%, #fff 100%) !important;
}

.vip-item:nth-child(4) .vip-list-in::after {
    content: '🔥 BEST DEAL';
    position: absolute;
    top: 14px;
    right: -30px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    padding: 5px 36px;
    font-size: 9px;
    font-weight: 800;
    transform: rotate(45deg);
    letter-spacing: 1px;
}

/* Highlight Platinum (3rd card) */
.vip-item:nth-child(3) .vip-list-in::after {
    content: '⭐ POPULAR';
    position: absolute;
    top: 14px;
    right: -30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 5px 36px;
    font-size: 9px;
    font-weight: 800;
    transform: rotate(45deg);
    letter-spacing: 1px;
}

/* Plan name - colored like vrmoo */
.vip-list-in h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 15px !important;
    text-align: center !important;
}

/* Silver = gray-blue */
.vip-item:nth-child(1) .vip-list-in h2 {
    color: #7f8fa6 !important;
}
/* Gold = orange */
.vip-item:nth-child(2) .vip-list-in h2 {
    color: #e67e22 !important;
}
/* Platinum = dark navy */
.vip-item:nth-child(3) .vip-list-in h2 {
    color: #2d3436 !important;
}
/* Diamond = green */
.vip-item:nth-child(4) .vip-list-in h2 {
    color: #00b894 !important;
}

/* ===== PRICE - inline "Was" on left like vrmoo ===== */
.vip-price {
    text-align: center !important;
    margin: 0 0 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    position: relative !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Fake original prices - inline before the price */
.vip-item:nth-child(1) .vip-price::before { content: 'Was $25'; }
.vip-item:nth-child(2) .vip-price::before { content: 'Was $45'; }
.vip-item:nth-child(3) .vip-price::before { content: 'Was $79'; }
.vip-item:nth-child(4) .vip-price::before { content: 'Was $99'; }

.vip-price::before {
    font-size: 13px !important;
    color: #bbb !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    order: -1 !important;
}

/* Discount badges - after the duration */
.vip-item:nth-child(1) .vip-price-day::after { content: ' • 60% OFF'; color: #e74c3c; font-weight: 700; font-size: 11px; }
.vip-item:nth-child(2) .vip-price-day::after { content: ' • 62% OFF'; color: #e74c3c; font-weight: 700; font-size: 11px; }
.vip-item:nth-child(3) .vip-price-day::after { content: ' • 59% OFF'; color: #e74c3c; font-weight: 700; font-size: 11px; }
.vip-item:nth-child(4) .vip-price-day::after { content: ' • 58% OFF'; color: #e74c3c; font-weight: 700; font-size: 11px; }

.vip-price-money {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #222 !important;
    line-height: 1 !important;
}

.vip-price-day {
    font-size: 13px !important;
    color: #888 !important;
}

/* ===== Features List ===== */
.vip-row ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.vip-row li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid #f8f8f8 !important;
    font-size: 12.5px !important;
    color: #555 !important;
}

.vip-row li:last-child {
    border-bottom: none !important;
}

.vip-row li.allow {
    color: #222 !important;
}

.vip-row li.allow::before {
    content: '✓';
    color: #27ae60;
    font-weight: 700;
    margin-right: 6px;
}

/* ===== Join Button ===== */
.vip-list-in > button,
.vip-list-in button.b2-radius {
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    color: #fff !important;
    letter-spacing: 0.5px !important;
}

.vip-item:nth-child(1) .vip-list-in > button,
.vip-item:nth-child(1) .vip-list-in button.b2-radius {
    background: linear-gradient(135deg, #bdc3c7, #95a5a6) !important;
}

.vip-item:nth-child(2) .vip-list-in > button,
.vip-item:nth-child(2) .vip-list-in button.b2-radius {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
}

.vip-item:nth-child(3) .vip-list-in > button,
.vip-item:nth-child(3) .vip-list-in button.b2-radius {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
}

.vip-item:nth-child(4) .vip-list-in > button,
.vip-item:nth-child(4) .vip-list-in button.b2-radius {
    background: linear-gradient(135deg, #00b894, #00cec9) !important;
    animation: pulse 2.5s ease-in-out infinite;
}

.vip-list-in > button:hover,
.vip-list-in button.b2-radius:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
}

/* Purchased state */
.vip-list-in > button.vrgoo-purchased,
.vip-list-in button.b2-radius.vrgoo-purchased {
    background: #95a5a6 !important;
    cursor: default !important;
    animation: none !important;
    opacity: 0.8 !important;
}

.vip-list-in > button.vrgoo-purchased:hover,
.vip-list-in button.b2-radius.vrgoo-purchased:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ===== FAQ SECTION ===== */
.vip-faq {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-top: 40px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
}

.vip-faq h2,
.vip-faq .vip-faq-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    color: #333 !important;
}

/* ===== DARK MODE SUPPORT ===== */
.dark-theme .vrgoo-privileges,
.dark .vrgoo-privileges {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%) !important;
}

.dark-theme .vrgoo-priv-title,
.dark .vrgoo-priv-title {
    color: #f0c040 !important;
}

.dark-theme .vrgoo-priv-item,
.dark .vrgoo-priv-item {
    background: #1e1e3a !important;
    border-color: #2a2a4a !important;
}

.dark-theme .vrgoo-priv-text h3,
.dark .vrgoo-priv-text h3 {
    color: #eee !important;
}

.dark-theme .vrgoo-priv-text p,
.dark .vrgoo-priv-text p {
    color: #aaa !important;
}

.dark-theme .vrgoo-donate-header,
.dark .vrgoo-donate-header {
    background: #0f0f1a !important;
}

.dark-theme .vrgoo-donate-header h2,
.dark .vrgoo-donate-header h2 {
    color: #6cb4ff !important;
}

.dark-theme .vip-page,
.dark .vip-page {
    background: #0f0f1a !important;
}

.dark-theme .vip-list-in,
.dark .vip-list-in {
    background: #1a1a2e !important;
    border-color: #2a2a4a !important;
}

.dark-theme .vip-list-in h2,
.dark .vip-list-in h2 {
    opacity: 0.9 !important;
}

.dark-theme .vip-price-money,
.dark .vip-price-money {
    color: #fff !important;
}

.dark-theme .vip-row li,
.dark .vip-row li {
    color: #ccc !important;
    border-color: #2a2a4a !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .vrgoo-priv-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .vrgoo-priv-title {
        font-size: 20px !important;
    }
    .vrgoo-priv-item {
        padding: 16px 14px !important;
    }
    .vrgoo-priv-icon {
        width: 28px !important;
        height: 28px !important;
    }
    .vrgoo-priv-icon img {
        width: 28px !important;
        height: 28px !important;
    }
    .vip-item {
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .vip-list {
        flex-direction: column !important;
        align-items: center !important;
    }
    .vip-item:nth-child(3) .vip-list-in::after,
    .vip-item:nth-child(4) .vip-list-in::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .vrgoo-priv-grid {
        grid-template-columns: 1fr !important;
    }
    .vrgoo-privileges {
        padding: 30px 15px 20px !important;
    }
}