/* =============================================
   GUNPLA GUIDE - Visual Theme Identities
   Gradients, Symbols, Patterns, Overlays
   ============================================= */

/* ===== Theme Transition Helpers ===== */
.header,
.footer,
.filter-sidebar,
.product-card,
.detail-content,
.mobile-menu,
.compare-drawer {
    transition: background-color 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}

/* =============================================
   RX-78-2 GUNDAM - Federation Visual Theme
   ============================================= */

/* Federation tri-color gradient header accent */
[data-theme="rx78"] .header {
    background: linear-gradient(180deg, #0C1929 0%, rgba(19, 35, 55, 0.97) 100%);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #2563EB 0%, #FFFFFF 40%, #FFFFFF 60%, #DC2626 100%) 1;
}

/* V-Antenna symbol watermark on body */
[data-theme="rx78"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.025;
    background-image:
        /* V-Antenna shape using gradients */
        linear-gradient(135deg, transparent 48%, #2563EB 48%, #2563EB 50%, transparent 50%),
        linear-gradient(225deg, transparent 48%, #2563EB 48%, #2563EB 50%, transparent 50%);
    background-size: 120px 80px;
    background-position: center top;
    background-repeat: repeat;
}

/* Hexagonal mech pattern background */
[data-theme="rx78"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(37, 99, 235, 0.15) 50px, rgba(37, 99, 235, 0.15) 51px),
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(37, 99, 235, 0.15) 50px, rgba(37, 99, 235, 0.15) 51px);
}

/* Federation blue glow on cards */
[data-theme="rx78"] .product-card:hover {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.25), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Header logo uses federation blue */
[data-theme="rx78"] .logo-icon {
    color: #2563EB;
    text-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

/* Federation emblem pattern in sidebar */
[data-theme="rx78"] .filter-sidebar::before {
    content: '⬡';
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 80px;
    opacity: 0.04;
    color: #2563EB;
    pointer-events: none;
}

/* =============================================
   CHAR'S CUSTOM - Red Comet Visual Theme
   ============================================= */

/* Diagonal speed stripes (3x faster feel) */
[data-theme="char"] .header {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            rgba(220, 38, 38, 0.08) 10px,
            rgba(220, 38, 38, 0.08) 12px
        ),
        linear-gradient(180deg, #2D1515 0%, rgba(26, 10, 10, 0.97) 100%);
    border-bottom: 2px solid #DC2626;
}

/* Char's emblem watermark */
[data-theme="char"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.02;
    background-image:
        /* Diagonal scanlines */
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 3px,
            rgba(220, 38, 38, 0.2) 3px,
            rgba(220, 38, 38, 0.2) 4px
        );
}

/* Red comet star emblem */
[data-theme="char"] body::after {
    content: '★';
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 120px;
    opacity: 0.03;
    color: #DC2626;
    pointer-events: none;
    z-index: 0;
    text-shadow: 0 0 40px rgba(220, 38, 38, 0.3);
}

/* Red neon glow on cards */
[data-theme="char"] .product-card:hover {
    box-shadow: 0 0 25px rgba(220, 38, 38, 0.3), 0 0 50px rgba(220, 38, 38, 0.1), 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Char's blazing logo */
[data-theme="char"] .logo-icon {
    color: #EF4444;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
    animation: char-pulse 1.5s ease-in-out infinite;
}

@keyframes char-pulse {
    0%, 100% { text-shadow: 0 0 15px rgba(239, 68, 68, 0.6); }
    50% { text-shadow: 0 0 25px rgba(239, 68, 68, 0.9), 0 0 50px rgba(239, 68, 68, 0.3); }
}

/* Red accent on action buttons */
[data-theme="char"] .action-btn:hover,
[data-theme="char"] .action-btn-large:hover {
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
}

/* =============================================
   ZEON - Principality Visual Theme
   ============================================= */

/* Military gradient header */
[data-theme="zeon"] .header {
    background: linear-gradient(180deg, #132D1A 0%, rgba(10, 26, 15, 0.97) 100%);
    border-bottom: 2px solid #22C55E;
}

/* Military grid pattern */
[data-theme="zeon"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(34, 197, 94, 0.15) 40px, rgba(34, 197, 94, 0.15) 41px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(34, 197, 94, 0.15) 40px, rgba(34, 197, 94, 0.15) 41px);
}

/* Zeon emblem watermark */
[data-theme="zeon"] body::after {
    content: '◆';
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 100px;
    opacity: 0.04;
    color: #22C55E;
    pointer-events: none;
    z-index: 0;
}

/* Military angular style - reduce border radius */
[data-theme="zeon"] .product-card {
    border-radius: 2px;
}

[data-theme="zeon"] .product-card:hover {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="zeon"] .logo-icon {
    color: #22C55E;
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

/* Angular buttons */
[data-theme="zeon"] .filter-reset-btn,
[data-theme="zeon"] .theme-toggle-btn,
[data-theme="zeon"] .lang-toggle {
    border-radius: 2px;
}

/* =============================================
   UNICORN - Psycho-Frame Visual Theme
   ============================================= */

/* Psycho-frame gradient header */
[data-theme="unicorn"] .header {
    background:
        linear-gradient(90deg, rgba(232, 67, 147, 0.05) 0%, transparent 30%, transparent 70%, rgba(0, 229, 160, 0.05) 100%),
        linear-gradient(180deg, #16132B 0%, rgba(13, 11, 26, 0.97) 100%);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #E84393, #00E5A0) 1;
}

/* NT-D circuit pattern */
[data-theme="unicorn"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.025;
    background-image:
        /* Vertical circuit lines */
        repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(232, 67, 147, 0.2) 80px, rgba(232, 67, 147, 0.2) 81px),
        /* Horizontal circuit lines */
        repeating-linear-gradient(0deg, transparent, transparent 120px, rgba(0, 229, 160, 0.15) 120px, rgba(0, 229, 160, 0.15) 121px),
        /* Diagonal accent */
        repeating-linear-gradient(45deg, transparent, transparent 200px, rgba(232, 67, 147, 0.08) 200px, rgba(232, 67, 147, 0.08) 202px);
}

/* Unicorn horn symbol */
[data-theme="unicorn"] body::after {
    content: '🦄';
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 80px;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    filter: grayscale(0.3);
}

/* Psycho-frame glow on cards */
[data-theme="unicorn"] .product-card:hover {
    box-shadow:
        0 0 20px rgba(232, 67, 147, 0.2),
        0 0 40px rgba(0, 229, 160, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Unicorn logo glow */
[data-theme="unicorn"] .logo-icon {
    color: #E84393;
    text-shadow: 0 0 12px rgba(232, 67, 147, 0.5);
    animation: unicorn-glow 3s ease-in-out infinite;
}

@keyframes unicorn-glow {
    0%, 100% {
        color: #E84393;
        text-shadow: 0 0 12px rgba(232, 67, 147, 0.5);
    }
    50% {
        color: #00E5A0;
        text-shadow: 0 0 12px rgba(0, 229, 160, 0.5);
    }
}

/* Gradient accent on key elements */
[data-theme="unicorn"] .logo-highlight {
    background: linear-gradient(135deg, #E84393, #FD79A8, #00E5A0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Psycho-frame border on sidebar */
[data-theme="unicorn"] .filter-sidebar {
    border-right: 1px solid;
    border-image: linear-gradient(180deg, rgba(232, 67, 147, 0.3), rgba(0, 229, 160, 0.3)) 1;
}

/* =============================================
   EVANGELION - NERV Special Visual Theme
   ============================================= */

/* NERV HUD gradient header */
[data-theme="eva"] .header {
    background:
        linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, transparent 30%, transparent 70%, rgba(74, 222, 128, 0.04) 100%),
        linear-gradient(180deg, #181430 0%, rgba(12, 10, 20, 0.97) 100%);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #8B5CF6, #4ADE80, #FB923C) 1;
}

/* NERV HUD pattern background */
[data-theme="eva"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image:
        /* NERV grid */
        repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(139, 92, 246, 0.2) 60px, rgba(139, 92, 246, 0.2) 61px),
        repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(139, 92, 246, 0.12) 60px, rgba(139, 92, 246, 0.12) 61px),
        /* Warning stripes accent */
        repeating-linear-gradient(-45deg, transparent, transparent 300px, rgba(251, 146, 60, 0.1) 300px, rgba(251, 146, 60, 0.1) 302px);
}

/* EVA-01 symbol */
[data-theme="eva"] body::after {
    content: 'NERV';
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-family: 'Orbitron', monospace;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0.035;
    color: #8B5CF6;
    pointer-events: none;
    z-index: 0;
    text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}

/* EVA purple-green glow on cards */
[data-theme="eva"] .product-card:hover {
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.25),
        0 0 40px rgba(74, 222, 128, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

/* EVA logo style */
[data-theme="eva"] .logo-icon {
    color: #8B5CF6;
    text-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

[data-theme="eva"] .logo-highlight {
    background: linear-gradient(135deg, #8B5CF6, #4ADE80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* NERV-style angular accents */
[data-theme="eva"] .filter-sidebar {
    border-right: 1px solid;
    border-image: linear-gradient(180deg, rgba(139, 92, 246, 0.4), transparent 50%, rgba(74, 222, 128, 0.3)) 1;
}

/* HUD-style font emphasis on key elements */
[data-theme="eva"] .detail-name,
[data-theme="eva"] .compare-table-header h3 {
    font-family: 'Orbitron', var(--font-primary);
    letter-spacing: 0.03em;
}

/* Warning stripe accent on footer */
[data-theme="eva"] .footer {
    border-top: 2px solid transparent;
    border-image: repeating-linear-gradient(90deg, #8B5CF6 0px, #8B5CF6 20px, transparent 20px, transparent 30px, #FB923C 30px, #FB923C 50px, transparent 50px, transparent 60px) 1;
}

/* =============================================
   LIGHT THEME - Visual Adjustments
   ============================================= */

/* Light theme header */
[data-theme="light"] .header {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(248, 250, 252, 0.97) 100%);
    border-bottom: 1px solid #E2E8F0;
}

[data-theme="light"] .logo-text {
    color: #1E293B;
}

[data-theme="light"] .search-box input {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #1E293B;
}

[data-theme="light"] .search-box input::placeholder {
    color: #94A3B8;
}

[data-theme="light"] .nav-item {
    color: #64748B;
}

[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-item.active {
    color: #1E293B;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .nav-item.active {
    color: var(--color-primary);
}

[data-theme="light"] .mobile-menu {
    background: #FFFFFF;
}

[data-theme="light"] .filter-sidebar {
    background: #FFFFFF;
    border-right-color: #E2E8F0;
}

[data-theme="light"] .filter-header h2 {
    color: #1E293B;
}

/* =============================================
   TRUE BLACK - Extra Clean OLED
   ============================================= */

[data-theme="trueblack"] .header {
    background: linear-gradient(180deg, #0A0A0A 0%, rgba(0, 0, 0, 0.98) 100%);
    border-bottom: 1px solid #1A1A1A;
}

[data-theme="trueblack"] .filter-sidebar {
    background: #000000;
    border-right: 1px solid #1A1A1A;
}

[data-theme="trueblack"] .product-card {
    background: #0A0A0A;
    border-color: #1A1A1A;
}

[data-theme="trueblack"] .footer {
    background: #000000;
    border-top-color: #1A1A1A;
}