/**
 * FESTIVAL THEMES & EPIC CARD EFFECTS STYLESHEET (AIMSHOP)
 * High-performance, lightweight styles with zero GPU/CPU lag.
 * Uses hardware-accelerated transitions and static glass styling at rest.
 */

/* ==========================================================================
   1. GLOBAL FESTIVAL STYLES & TRANSITIONS
   ========================================================================== */

/* Shimmer Beam Light on Hover */
@keyframes festCardShimmerBeam {
    0% { transform: translateX(-150%) skewX(-20deg); opacity: 0; }
    30% { opacity: 0.6; }
    100% { transform: translateX(250%) skewX(-20deg); opacity: 0; }
}

/* ==========================================================================
   2. FESTIVAL GREETING BANNER & PARTICLES
   ========================================================================== */
.festival-greeting-banner {
    position: relative;
    z-index: 1025;
    height: 40px;
    display: flex;
    align-items: center;
    font-family: 'Kanit', sans-serif;
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.festival-greeting-banner .container {
    height: 100%;
}

/* Ambient Shimmer Sweep Animation across banner */
.festival-greeting-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.2), transparent);
    animation: festBannerSweep 7s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}

@keyframes festBannerSweep {
    0% { left: -120%; }
    30%, 100% { left: 220%; }
}

/* Bottom Laser Glow Line */
.festival-greeting-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, var(--fest-primary, #a855f7) 35%, var(--fest-accent, #06b6d4) 65%, transparent 95%);
    box-shadow: 0 0 12px var(--fest-glow-1, rgba(168, 85, 247, 0.7));
    pointer-events: none;
    z-index: 2;
}

/* Glass Badge Chip with Live Pulse and Modern Icon */
.fest-badge-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 7px;
    border-radius: 9999px;
    background: rgba(10, 14, 28, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease;
}

.fest-badge-wrapper:hover {
    transform: scale(1.03);
    border-color: rgba(255, 255, 255, 0.45);
}

/* Radar Pulse Beacon Dot */
.fest-live-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: festLivePulse 1.8s infinite;
    flex-shrink: 0;
}

@keyframes festLivePulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 4px #22c55e; }
    50% { transform: scale(1.35); opacity: 0.7; box-shadow: 0 0 10px #22c55e, 0 0 16px #22c55e; }
}

/* 3D Icon Chip with Gradient Aura */
.fest-banner-icon-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fest-primary, #a855f7), var(--fest-secondary, #ec4899));
    color: #ffffff;
    font-size: 0.76rem;
    box-shadow: 0 2px 8px var(--fest-glow-1, rgba(168, 85, 247, 0.5));
    animation: festIconBob 3.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes festIconBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(5deg); }
}

.fest-badge-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

/* Marquee / Text Container */
.fest-banner-marquee-container {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
    z-index: 2;
    margin: 0 8px;
}

.fest-marquee-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.fest-banner-text {
    font-size: 0.84rem;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    line-height: 1;
    display: inline-block;
}

.fest-ambient-sparkle {
    font-size: 0.8rem;
    color: #fde047;
    filter: drop-shadow(0 0 6px #fde047);
    animation: festSparkleSpin 4s ease-in-out infinite;
    display: inline-block;
}

@keyframes festSparkleSpin {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.25) rotate(15deg); opacity: 1; }
}

/* Auto Marquee animation for smaller / responsive screens */
@media (max-width: 991px) {
    .fest-marquee-track {
        animation: festMarqueeScroll 22s linear infinite;
        padding-left: 5px;
    }
    .fest-marquee-track:hover {
        animation-play-state: paused;
    }
}

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

/* Interactive CTA Link */
.fest-banner-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.fest-banner-cta-link:hover {
    background: linear-gradient(135deg, var(--fest-primary, #a855f7), var(--fest-secondary, #ec4899));
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 16px var(--fest-glow-1, rgba(168, 85, 247, 0.6));
    transform: translateY(-1px) scale(1.04);
}

.fest-banner-cta-link i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.fest-banner-cta-link:hover i {
    transform: translateX(3px);
}

/* Modern Glass Close Button */
.fest-banner-close-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    z-index: 2;
}

.fest-banner-close-btn:hover {
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
    transform: rotate(90deg) scale(1.1);
    color: #ffffff;
}

@media (max-width: 768px) {
    .festival-greeting-banner {
        height: 38px;
    }
    .fest-badge-wrapper {
        padding: 2px 7px 2px 5px;
    }
    .fest-banner-icon-chip {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    .fest-banner-text {
        font-size: 0.78rem;
    }
    .fest-banner-cta-link {
        padding: 2px 8px;
        font-size: 0.68rem;
    }
    .fest-banner-close-btn {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
}

/* Fullscreen Particle Canvas */
#festivalParticleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 998;
    contain: strict;
}

/* ==========================================================================
   3. CARD FESTIVAL ORNAMENTS & CORNER CHARMS (HYPER-LIGHTWEIGHT & FAST)
   ========================================================================== */
.fest-card-decor-wrapper {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    user-select: none;
}

/* 3D Glassmorphism Pod (Zero Idle CPU Cost) */
.fest-corner-charm-pod {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.fest-charm-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fest-charm-icon {
    font-size: 0.95rem;
    color: var(--fest-accent, #ffffff);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s ease;
}

/* Modern Ribbon Tag (Lightweight) */
.fest-ribbon-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 3px 9px 3px 7px;
    border-radius: 9999px;
    color: #ffffff;
    background: var(--fest-ribbon-bg, linear-gradient(135deg, #a855f7, #ec4899));
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.fest-ribbon-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 4px #ffffff;
}

.fest-ribbon-text {
    display: inline-block;
    line-height: 1;
}

/* ==========================================================================
   4. PRODUCT CARD ENHANCEMENTS UNDER FESTIVAL THEMES (SMOOTH 60-120 FPS)
   ========================================================================== */
body[class*="theme-"] .product-app-card,
body[class*="theme-"] .latest-card {
    position: relative;
    border: 1px solid var(--fest-border, rgba(255, 255, 255, 0.12)) !important;
    background: #0f1322 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
    overflow: hidden;
}

/* Shimmer Beam Light on Hover */
body[class*="theme-"] .product-app-card::after,
body[class*="theme-"] .latest-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.12) 50%, transparent 80%);
    pointer-events: none;
    opacity: 0;
    z-index: 12;
}

body[class*="theme-"] .product-app-card:hover::after,
body[class*="theme-"] .latest-card:hover::after {
    animation: festCardShimmerBeam 0.8s ease forwards;
}

body[class*="theme-"] .product-app-card:hover,
body[class*="theme-"] .latest-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--fest-primary, #a855f7) !important;
    box-shadow: 0 10px 25px var(--fest-glow-1, rgba(168, 85, 247, 0.3)) !important;
}

body[class*="theme-"] .product-app-card:hover .fest-corner-charm-pod,
body[class*="theme-"] .latest-card:hover .fest-corner-charm-pod {
    transform: scale(1.15) rotate(-6deg);
    border-color: var(--fest-accent, #ffffff);
    box-shadow: 0 6px 18px var(--fest-glow-1, rgba(168, 85, 247, 0.45));
}

body[class*="theme-"] .product-app-card:hover .fest-charm-icon,
body[class*="theme-"] .latest-card:hover .fest-charm-icon {
    transform: scale(1.1);
}

/* Dynamic Themed Button */
body[class*="theme-"] .btn-card-action {
    background: var(--fest-btn-gradient, linear-gradient(135deg, #8A3FFC 0%, #00f2fe 100%)) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 3px 12px var(--fest-glow-1, rgba(138, 63, 252, 0.35)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body[class*="theme-"] .btn-card-action:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px var(--fest-glow-2, rgba(0, 242, 254, 0.5)) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   5. SPECIFIC THEME DEFINITIONS (ALL 14 FESTIVALS)
   ========================================================================== */

/* --- 1. NEW YEAR & COUNTDOWN (theme-newyear) --- */
body.theme-newyear {
    --fest-primary: #f59e0b;
    --fest-secondary: #ec4899;
    --fest-accent: #06b6d4;
    --fest-glow-1: rgba(245, 158, 11, 0.4);
    --fest-glow-2: rgba(236, 72, 153, 0.35);
    --fest-border: rgba(245, 158, 11, 0.25);
    --fest-ribbon-bg: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    --fest-btn-gradient: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #06b6d4 100%);
    --purple-glow: #f59e0b;
    --pink-glow: #ec4899;
    --cyan-glow: #06b6d4;
}
.theme-newyear-banner {
    background: linear-gradient(90deg, rgba(24, 15, 36, 0.94) 0%, rgba(180, 83, 9, 0.88) 35%, rgba(236, 72, 153, 0.88) 70%, rgba(2, 132, 199, 0.88) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.5) !important;
}

/* --- 2. CHINESE NEW YEAR (theme-cny) --- */
body.theme-cny {
    --fest-primary: #ef4444;
    --fest-secondary: #f59e0b;
    --fest-accent: #dc2626;
    --fest-glow-1: rgba(239, 68, 68, 0.45);
    --fest-glow-2: rgba(245, 158, 11, 0.4);
    --fest-border: rgba(239, 68, 68, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
    --fest-btn-gradient: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
    --purple-glow: #ef4444;
    --pink-glow: #f59e0b;
    --cyan-glow: #fbbf24;
}
.theme-cny-banner {
    background: linear-gradient(90deg, rgba(32, 10, 10, 0.94) 0%, rgba(153, 27, 27, 0.92) 35%, rgba(220, 38, 38, 0.9) 70%, rgba(180, 83, 9, 0.9) 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.5) !important;
}

/* --- 3. VALENTINE'S DAY (theme-valentine) --- */
body.theme-valentine {
    --fest-primary: #ec4899;
    --fest-secondary: #f43f5e;
    --fest-accent: #fb7185;
    --fest-glow-1: rgba(236, 72, 153, 0.45);
    --fest-glow-2: rgba(244, 63, 94, 0.35);
    --fest-border: rgba(236, 72, 153, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    --fest-btn-gradient: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    --purple-glow: #ec4899;
    --pink-glow: #f43f5e;
    --cyan-glow: #fb7185;
}
.theme-valentine-banner {
    background: linear-gradient(90deg, rgba(32, 10, 22, 0.94) 0%, rgba(190, 24, 93, 0.9) 35%, rgba(225, 29, 72, 0.9) 70%, rgba(244, 63, 94, 0.9) 100%);
    border-bottom: 1px solid rgba(244, 63, 94, 0.5) !important;
}

/* --- 4. BUDDHIST HOLY DAYS (theme-buddhist) --- */
body.theme-buddhist {
    --fest-primary: #f59e0b;
    --fest-secondary: #d97706;
    --fest-accent: #fbbf24;
    --fest-glow-1: rgba(245, 158, 11, 0.45);
    --fest-glow-2: rgba(217, 119, 6, 0.35);
    --fest-border: rgba(245, 158, 11, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
    --fest-btn-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%);
    --purple-glow: #f59e0b;
    --pink-glow: #d97706;
    --cyan-glow: #fbbf24;
}
.theme-buddhist-banner {
    background: linear-gradient(90deg, rgba(28, 16, 10, 0.94) 0%, rgba(120, 53, 15, 0.9) 35%, rgba(180, 83, 9, 0.9) 70%, rgba(217, 119, 6, 0.9) 100%);
    border-bottom: 1px solid rgba(253, 224, 71, 0.5) !important;
}

/* --- 5. SONGKRAN FESTIVAL (theme-songkran) --- */
body.theme-songkran {
    --fest-primary: #06b6d4;
    --fest-secondary: #3b82f6;
    --fest-accent: #f97316;
    --fest-glow-1: rgba(6, 182, 212, 0.45);
    --fest-glow-2: rgba(59, 130, 246, 0.35);
    --fest-border: rgba(6, 182, 212, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
    --fest-btn-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #f97316 100%);
    --purple-glow: #06b6d4;
    --pink-glow: #3b82f6;
    --cyan-glow: #38bdf8;
}
.theme-songkran-banner {
    background: linear-gradient(90deg, rgba(8, 47, 73, 0.94) 0%, rgba(3, 105, 161, 0.9) 35%, rgba(6, 182, 212, 0.9) 70%, rgba(234, 88, 12, 0.88) 100%);
    border-bottom: 1px solid rgba(6, 182, 212, 0.5) !important;
}

/* --- 6. LABOR DAY (theme-labor) --- */
body.theme-labor {
    --fest-primary: #2563eb;
    --fest-secondary: #f97316;
    --fest-accent: #38bdf8;
    --fest-glow-1: rgba(37, 99, 235, 0.45);
    --fest-glow-2: rgba(249, 115, 22, 0.35);
    --fest-border: rgba(37, 99, 235, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #1d4ed8 0%, #ea580c 100%);
    --fest-btn-gradient: linear-gradient(135deg, #2563eb 0%, #f97316 100%);
    --purple-glow: #2563eb;
    --pink-glow: #f97316;
    --cyan-glow: #38bdf8;
}
.theme-labor-banner {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 58, 138, 0.92) 35%, rgba(37, 99, 235, 0.9) 70%, rgba(194, 65, 12, 0.88) 100%);
    border-bottom: 1px solid rgba(249, 115, 22, 0.5) !important;
}

/* --- 7. MOTHER'S DAY (theme-mother) --- */
body.theme-mother {
    --fest-primary: #0284c7;
    --fest-secondary: #38bdf8;
    --fest-accent: #e0f2fe;
    --fest-glow-1: rgba(2, 132, 199, 0.45);
    --fest-glow-2: rgba(56, 189, 248, 0.35);
    --fest-border: rgba(2, 132, 199, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%);
    --fest-btn-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    --purple-glow: #0284c7;
    --pink-glow: #38bdf8;
    --cyan-glow: #e0f2fe;
}
.theme-mother-banner {
    background: linear-gradient(90deg, rgba(12, 74, 110, 0.94) 0%, rgba(2, 132, 199, 0.9) 35%, rgba(56, 189, 248, 0.88) 70%, rgba(14, 116, 144, 0.92) 100%);
    border-bottom: 1px solid rgba(224, 242, 254, 0.5) !important;
}

/* --- 8. SART CHIN (theme-sartchin) --- */
body.theme-sartchin {
    --fest-primary: #dc2626;
    --fest-secondary: #f59e0b;
    --fest-accent: #991b1b;
    --fest-glow-1: rgba(220, 38, 38, 0.45);
    --fest-glow-2: rgba(245, 158, 11, 0.35);
    --fest-border: rgba(220, 38, 38, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #991b1b 0%, #f59e0b 100%);
    --fest-btn-gradient: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
    --purple-glow: #dc2626;
    --pink-glow: #f59e0b;
    --cyan-glow: #fde047;
}
.theme-sartchin-banner {
    background: linear-gradient(90deg, rgba(32, 8, 8, 0.94) 0%, rgba(127, 29, 29, 0.92) 35%, rgba(220, 38, 38, 0.9) 70%, rgba(180, 83, 9, 0.88) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.5) !important;
}

/* --- 9. OK PHANSA (theme-okphansa) --- */
body.theme-okphansa {
    --fest-primary: #ea580c;
    --fest-secondary: #f59e0b;
    --fest-accent: #fbbf24;
    --fest-glow-1: rgba(234, 88, 12, 0.45);
    --fest-glow-2: rgba(245, 158, 11, 0.35);
    --fest-border: rgba(234, 88, 12, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #c2410c 0%, #f59e0b 100%);
    --fest-btn-gradient: linear-gradient(135deg, #ea580c 0%, #fbbf24 100%);
    --purple-glow: #ea580c;
    --pink-glow: #f59e0b;
    --cyan-glow: #fbbf24;
}
.theme-okphansa-banner {
    background: linear-gradient(90deg, rgba(28, 14, 8, 0.94) 0%, rgba(124, 45, 18, 0.92) 35%, rgba(234, 88, 12, 0.9) 70%, rgba(217, 119, 6, 0.88) 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.5) !important;
}

/* --- 10. LOY KRATHONG (theme-loykrathong) --- */
body.theme-loykrathong {
    --fest-primary: #6366f1;
    --fest-secondary: #06b6d4;
    --fest-accent: #fbbf24;
    --fest-glow-1: rgba(99, 102, 241, 0.45);
    --fest-glow-2: rgba(6, 182, 212, 0.35);
    --fest-border: rgba(99, 102, 241, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
    --fest-btn-gradient: linear-gradient(135deg, #6366f1 0%, #06b6d4 50%, #fbbf24 100%);
    --purple-glow: #6366f1;
    --pink-glow: #06b6d4;
    --cyan-glow: #fbbf24;
}
.theme-loykrathong-banner {
    background: linear-gradient(90deg, rgba(24, 18, 54, 0.94) 0%, rgba(49, 46, 129, 0.92) 35%, rgba(99, 102, 241, 0.9) 70%, rgba(8, 145, 178, 0.88) 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.5) !important;
}

/* --- 11. FATHER'S DAY (theme-father) --- */
body.theme-father {
    --fest-primary: #eab308;
    --fest-secondary: #f59e0b;
    --fest-accent: #fde047;
    --fest-glow-1: rgba(234, 179, 8, 0.45);
    --fest-glow-2: rgba(245, 158, 11, 0.35);
    --fest-border: rgba(234, 179, 8, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
    --fest-btn-gradient: linear-gradient(135deg, #ca8a04 0%, #eab308 50%, #fde047 100%);
    --purple-glow: #eab308;
    --pink-glow: #f59e0b;
    --cyan-glow: #fde047;
}
.theme-father-banner {
    background: linear-gradient(90deg, rgba(24, 18, 6, 0.94) 0%, rgba(113, 63, 18, 0.92) 35%, rgba(161, 98, 7, 0.9) 70%, rgba(202, 138, 4, 0.88) 100%);
    border-bottom: 1px solid rgba(253, 224, 71, 0.5) !important;
}

/* --- 12. HALLOWEEN (theme-halloween) --- */
body.theme-halloween {
    --fest-primary: #f97316;
    --fest-secondary: #a855f7;
    --fest-accent: #ea580c;
    --fest-glow-1: rgba(249, 115, 22, 0.45);
    --fest-glow-2: rgba(168, 85, 247, 0.35);
    --fest-border: rgba(249, 115, 22, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #c2410c 0%, #7e22ce 100%);
    --fest-btn-gradient: linear-gradient(135deg, #f97316 0%, #a855f7 50%, #ea580c 100%);
    --purple-glow: #f97316;
    --pink-glow: #a855f7;
    --cyan-glow: #ea580c;
}
.theme-halloween-banner {
    background: linear-gradient(90deg, rgba(20, 8, 32, 0.95) 0%, rgba(88, 28, 135, 0.92) 30%, rgba(126, 34, 206, 0.9) 60%, rgba(194, 65, 12, 0.9) 85%, rgba(124, 45, 18, 0.95) 100%);
    border-bottom: 1px solid rgba(249, 115, 22, 0.5) !important;
}

/* --- 13. CHRISTMAS (theme-christmas) --- */
body.theme-christmas {
    --fest-primary: #10b981;
    --fest-secondary: #ef4444;
    --fest-accent: #fbbf24;
    --fest-glow-1: rgba(16, 185, 129, 0.45);
    --fest-glow-2: rgba(239, 68, 68, 0.35);
    --fest-border: rgba(16, 185, 129, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #047857 0%, #dc2626 100%);
    --fest-btn-gradient: linear-gradient(135deg, #10b981 0%, #ef4444 100%);
    --purple-glow: #10b981;
    --pink-glow: #ef4444;
    --cyan-glow: #fbbf24;
}
.theme-christmas-banner {
    background: linear-gradient(90deg, rgba(4, 44, 32, 0.94) 0%, rgba(6, 78, 59, 0.92) 30%, rgba(153, 27, 27, 0.9) 65%, rgba(180, 83, 9, 0.88) 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.5) !important;
}

/* --- 14. MEGA SALE & 11.11 / HOT DEALS (theme-megasale) --- */
body.theme-megasale {
    --fest-primary: #ef4444;
    --fest-secondary: #f59e0b;
    --fest-accent: #06b6d4;
    --fest-glow-1: rgba(239, 68, 68, 0.45);
    --fest-glow-2: rgba(245, 158, 11, 0.35);
    --fest-border: rgba(239, 68, 68, 0.3);
    --fest-ribbon-bg: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    --fest-btn-gradient: linear-gradient(135deg, #dc2626 0%, #f59e0b 50%, #06b6d4 100%);
    --purple-glow: #ef4444;
    --pink-glow: #f59e0b;
    --cyan-glow: #06b6d4;
}
.theme-megasale-banner {
    background: linear-gradient(90deg, rgba(32, 8, 8, 0.95) 0%, rgba(153, 27, 27, 0.92) 30%, rgba(220, 38, 38, 0.92) 65%, rgba(234, 88, 12, 0.9) 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.5) !important;
}