/* ============================================
   Lucide.gg — Colorful/Playful Theme
   BloxKeys-inspired, more vibrant & inviting

   Usage: Add this CSS AFTER styles.css:
   <link rel="stylesheet" href="theme-colorful.css">
   ============================================ */

:root {
    /* Override base colors to navy blue gradient palette */
    --bg-primary: #070b14;
    --bg-secondary: #0c1220;
    --bg-card: #0f172a;
    --bg-card-border: rgba(59, 130, 246, 0.12);

    /* Brighter, more saturated blue accent */
    --accent: #2563EB;
    --accent-light: #60a5fa;
    --accent-glow: rgba(37, 99, 235, 0.4);
    --accent-subtle: rgba(37, 99, 235, 0.1);

    /* Slightly warmer text tones */
    --text-primary: #f1f5f9;
    --text-secondary: rgba(148, 163, 184, 0.85);
    --text-muted: rgba(100, 116, 139, 0.7);

    /* Playful font — rounder, friendlier */
    --font-display: 'Nunito', 'Sora', sans-serif;
}

/* ─── Body Background: Navy Gradient ─── */
body {
    background: linear-gradient(180deg, #070b14 0%, #0d1525 40%, #111d35 100%);
    background-attachment: fixed;
}

/* ─── Header: Slight navy tint ─── */
.header {
    background: rgba(7, 11, 20, 0.85);
    border-bottom-color: rgba(59, 130, 246, 0.08);
}

/* ─── Scroll Progress: Blue gradient ─── */
.scroll-progress {
    background: linear-gradient(90deg, #2563EB, #60a5fa, #93c5fd);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

/* ─── Hero: Navy gradient background ─── */
.hero {
    background: linear-gradient(180deg, #070b14 0%, #0d1525 100%);
}

.hero::before {
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
}

.hero-glow-1,
.hero-glow-2 {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
}

/* ─── Stats: Blue accent ─── */
.stat-value.accent {
    color: var(--accent-light);
}

/* ─── Section backgrounds: Navy gradient ─── */
.why-us,
.products,
.faq-section {
    background: transparent;
}

.why-us::after,
.products::after,
.faq-glow {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
}

/* ─── Cards: Navy with blue border glow ─── */
.why-card {
    background: linear-gradient(165deg, #111d35 0%, #0c1525 100%);
    border-color: rgba(59, 130, 246, 0.12);
}

.why-card::before {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), transparent 50%);
}

.why-card::after {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
}

.why-card:hover {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(37, 99, 235, 0.1);
}

/* ─── Stat gradient: White to blue ─── */
.why-card-stat {
    background: linear-gradient(135deg, #ffffff 30%, var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
}

.why-card-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.05));
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--accent-light);
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.15);
}

/* ─── Product Cards: Navy glass with blue hover ─── */
.product-card {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(12px);
}

.product-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(37, 99, 235, 0.1);
}

/* ─── Product Badges: Colorful pills ─── */
.product-badge.bestseller {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    padding: 4px 12px;
    border-radius: 100px;
}

.product-badge.hot {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
}

.product-badge.new {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #fff;
}

.product-badge.exclusive {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}

.product-badge.entry-fee {
    background: linear-gradient(135deg, #ca8a04, #eab308);
    color: #1a1a1a;
}

/* ─── Star Ratings (new element for colorful theme) ─── */
.product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.product-stars {
    color: #fbbf24;
    font-size: 13px;
    letter-spacing: 1px;
}

.product-rating-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* ─── Buttons: Solid blue, more rounded ─── */
.btn-primary {
    background: linear-gradient(135deg, #2563EB, #1d4ed8);
    box-shadow: 0 4px 24px rgba(37, 99, 235, 0.3);
    border-radius: 10px;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #3b82f6, #2563EB);
    box-shadow: 0 6px 32px rgba(37, 99, 235, 0.45), 0 0 60px rgba(37, 99, 235, 0.15);
}

.btn-outline {
    border-color: rgba(59, 130, 246, 0.2);
    border-radius: 10px;
}

.btn-outline:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(37, 99, 235, 0.06);
}

/* ─── Filter Buttons: Blue active ─── */
.filter-btn {
    border-radius: 100px;
    border-color: rgba(59, 130, 246, 0.15);
    background: rgba(59, 130, 246, 0.06);
}

.filter-btn:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.12);
}

.filter-btn.active {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.5);
    color: var(--accent-light);
}

/* ─── Section Labels: Blue accent bar ─── */
.section-label {
    color: var(--accent-light);
}

.section-label::before {
    background: var(--accent);
}

/* ─── Text Accents: Blue instead of default ─── */
.text-accent {
    color: var(--accent-light);
    text-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
}

/* ─── Terminal Card: Darker navy ─── */
.terminal-card {
    background: linear-gradient(180deg, #0c1525 0%, #080e1a 100%);
    border-color: rgba(59, 130, 246, 0.1);
}

.terminal-header {
    border-bottom-color: rgba(59, 130, 246, 0.08);
    background: rgba(59, 130, 246, 0.03);
}

/* ─── FAQ: Blue accent on open ─── */
.faq-item {
    background: linear-gradient(165deg, #111d35 0%, #0c1525 100%);
    border-color: rgba(59, 130, 246, 0.08);
}

.faq-item.faq-open {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: inset 3px 0 0 var(--accent), 0 4px 20px rgba(37, 99, 235, 0.06);
}

.faq-item.faq-open .faq-chevron {
    color: var(--accent-light);
}

/* ─── Footer: Navy gradient ─── */
.site-footer {
    background: linear-gradient(180deg, #080e1a 0%, #070b14 100%);
    border-top-color: rgba(59, 130, 246, 0.08);
}

.site-footer::before {
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ─── Payment Marquee: Blue-tinted ─── */
.payment-marquee {
    background: rgba(59, 130, 246, 0.03);
    border-top-color: rgba(59, 130, 246, 0.06);
}

.pay-logo {
    background: rgba(59, 130, 246, 0.04);
    border-color: rgba(59, 130, 246, 0.08);
}

/* ─── Support Panel: Navy ─── */
.support-panel {
    background: rgba(8, 14, 26, 0.9);
    border-color: rgba(59, 130, 246, 0.08);
}

.panel-header {
    border-bottom-color: rgba(59, 130, 246, 0.08);
    background: rgba(59, 130, 246, 0.04);
}

.sidebar-item.active {
    border-left-color: var(--accent);
    background: rgba(59, 130, 246, 0.06);
}

/* ─── Status Dots: Keep green ─── */
.status-dot {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.online-dot {
    background: #22c55e;
}

/* ─── Satisfaction Bar: Blue gradient ─── */
.satisfaction-fill {
    background: linear-gradient(90deg, var(--accent), #22c55e);
}

/* ─── Logo: Blue gradient text ─── */
.logo-text {
    background: linear-gradient(135deg, #f1f5f9 60%, rgba(96, 165, 250, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Nav highlight: Blue ─── */
.nav-link.active::after {
    background: var(--accent);
}

.nav-link.nav-highlight {
    background: var(--accent);
}

.nav-link.nav-highlight:hover {
    background: #3b82f6;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

/* ─── More Rounded Corners (playful feel) ─── */
.why-card,
.faq-item {
    border-radius: 16px;
}

.product-card {
    border-radius: 14px;
}

/* ─── Pricing Cards (product page, colorful variant) ─── */
.variant-card.selected {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.06);
}

.variant-badge-popular {
    background: var(--accent);
    color: white;
}

.btn-purchase {
    background: linear-gradient(135deg, #2563EB, #1d4ed8);
    border-radius: 10px;
}

.btn-purchase:hover {
    background: linear-gradient(135deg, #3b82f6, #2563EB);
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.4);
}

/* ─── Legal Pages: Blue accents ─── */
.legal-page::after {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.04) 0%, transparent 70%);
}

.legal-section h2::before {
    background: var(--accent);
}

.legal-section li::before {
    background: var(--accent);
}

.legal-section a {
    color: var(--accent-light);
}

/* ─── Overall Glow Adjustments ─── */
.hero-glow-1 { background: radial-gradient(circle, rgba(37, 99, 235, 0.07) 0%, transparent 70%); }
.hero-glow-2 { background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%); }
.why-us-glow { background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%); }
.products-glow { background: radial-gradient(circle, rgba(37, 99, 235, 0.04) 0%, transparent 70%); }

/* ─── Shine Sweep on Cards: Blue tint ─── */
.product-card::after {
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(96, 165, 250, 0.06) 45%,
        rgba(96, 165, 250, 0.12) 50%,
        rgba(96, 165, 250, 0.06) 55%,
        transparent 60%
    );
}