/**
 * QFused Catalogue Theme Styles
 * Seasonal and holiday theme variations
 */

/* ============================================
   HALLOWEEN THEME (October 1-31)
   Current default theme - orange/black/purple
   ============================================ */
.theme-halloween {
  /* Color Variables */
  --color-bg: #0d0d0f;
  --color-bg-alt: #15161b;
  --color-card: rgba(26, 28, 34, 0.88);
  --color-primary: #ff6f3c;
  --color-primary-soft: rgba(255, 111, 60, 0.16);
  --color-accent: #ffb347;
  --color-text: #f3f4f6;
  --color-muted: #c5c7ce;
  --color-border: rgba(255, 111, 60, 0.2);
}

.theme-halloween html,
.theme-halloween body {
  background: radial-gradient(140% 120% at 50% -10%, #1f2530 0%, #0b0c10 55%, #040608 100%);
}

.theme-halloween body::before {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(255, 111, 60, 0.22), transparent 70%),
    radial-gradient(50% 65% at 80% 20%, rgba(132, 73, 255, 0.18), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 45%);
}

.theme-halloween .site-header {
  background: rgba(8, 9, 12, 0.82);
  border-bottom: 1px solid rgba(255, 111, 60, 0.12);
}

/* ============================================
   WINTER THEME (November - February)
   Cool blues, whites, and icy tones
   ============================================ */
.theme-winter {
  /* Color Variables */
  --color-bg: #0a0e14;
  --color-bg-alt: #121a22;
  --color-card: rgba(20, 28, 38, 0.88);
  --color-primary: #4a9eff;
  --color-primary-soft: rgba(74, 158, 255, 0.16);
  --color-accent: #6bb6ff;
  --color-text: #e8f4ff;
  --color-muted: #a8c8e8;
  --color-border: rgba(74, 158, 255, 0.2);
}

.theme-winter html,
.theme-winter body {
  background: radial-gradient(140% 120% at 50% -10%, #1a2430 0%, #0d1418 55%, #050a0e 100%);
}

.theme-winter body::before {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(74, 158, 255, 0.18), transparent 70%),
    radial-gradient(50% 65% at 80% 20%, rgba(100, 200, 255, 0.12), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 45%);
}

.theme-winter body::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="60" cy="40" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="100" cy="60" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="80" cy="100" r="1" fill="rgba(255,255,255,0.3)"/></svg>');
  background-size: 60px 60px;
  opacity: 0.4;
}

.theme-winter .site-header {
  background: rgba(10, 14, 20, 0.82);
  border-bottom: 1px solid rgba(74, 158, 255, 0.12);
}

.theme-winter .hero-glow-1 {
  background: radial-gradient(circle, rgba(74, 158, 255, 0.3), transparent 70%);
}

.theme-winter .hero-glow-2 {
  background: radial-gradient(circle, rgba(100, 200, 255, 0.2), transparent 70%);
}

.theme-winter .section::before {
  background-image:
    radial-gradient(120% 120% at 100% -20%, rgba(74, 158, 255, 0.1), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M0 100h200M100 0v200' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Cpath d='M0 0h200v200H0z' fill='none' stroke='%234a9eff' stroke-opacity='0.02' stroke-width='2'/%3E%3C/svg%3E");
}

/* ============================================
   THANKSGIVING THEME (Late November - Early December)
   Warm oranges, browns, golds, and autumn colors
   ============================================ */
.theme-thanksgiving {
  /* Color Variables - Warm autumn colors */
  --color-bg: #0f0a08;
  --color-bg-alt: #1a1210;
  --color-card: rgba(26, 20, 18, 0.88);
  --color-primary: #d97706; /* Warm orange */
  --color-primary-soft: rgba(217, 119, 6, 0.16);
  --color-accent: #f59e0b; /* Golden orange */
  --color-text: #fff5e6;
  --color-muted: #d4c4b8;
  --color-border: rgba(217, 119, 6, 0.2);
}

.theme-thanksgiving html,
.theme-thanksgiving body {
  background: radial-gradient(140% 120% at 50% -10%, #2a1f18 0%, #0f0a08 55%, #050403 100%);
}

.theme-thanksgiving body::before {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(217, 119, 6, 0.22), transparent 70%),
    radial-gradient(50% 65% at 80% 20%, rgba(245, 158, 11, 0.18), transparent 70%),
    radial-gradient(45% 55% at 50% 50%, rgba(251, 191, 36, 0.12), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 45%);
}

.theme-thanksgiving body::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M60 20L65 35L80 35L70 45L75 60L60 50L45 60L50 45L40 35L55 35Z" fill="rgba(217,119,6,0.1)"/><circle cx="60" cy="30" r="2" fill="rgba(245,158,11,0.2)"/><path d="M30 80L50 70L70 80L50 90Z" fill="rgba(251,191,36,0.1)"/></svg>');
  background-size: 80px 80px;
  opacity: 0.3;
  animation: float 20s ease-in-out infinite;
}

.theme-thanksgiving .site-header {
  background: rgba(15, 10, 8, 0.82);
  border-bottom: 1px solid rgba(217, 119, 6, 0.15);
}

.theme-thanksgiving .hero-glow-1 {
  background: radial-gradient(circle, rgba(217, 119, 6, 0.35), transparent 70%);
}

.theme-thanksgiving .hero-glow-2 {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25), transparent 70%);
}

.theme-thanksgiving .section::before {
  background-image:
    radial-gradient(120% 120% at 100% -20%, rgba(217, 119, 6, 0.12), transparent 65%),
    radial-gradient(80% 80% at 20% 80%, rgba(245, 158, 11, 0.08), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M0 100h200M100 0v200' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Cpath d='M0 0h200v200H0z' fill='none' stroke='%23d97706' stroke-opacity='0.02' stroke-width='2'/%3E%3C/svg%3E");
}

/* Button gradients for Thanksgiving */
.theme-thanksgiving .btn-hero-primary,
.theme-thanksgiving .btn-primary {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
}

.theme-thanksgiving .btn-hero-primary:hover,
.theme-thanksgiving .btn-primary:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
}

/* ============================================
   CHRISTMAS THEME (December 20-27)
   Red, green, gold, and festive colors
   ============================================ */
.theme-christmas {
  /* Color Variables - Classic Christmas: Red, Pink, White, Green */
  --color-bg: #0f0a0a;
  --color-bg-alt: #1a1212;
  --color-card: rgba(26, 18, 18, 0.88);
  --color-primary: #dc2626; /* Bright red */
  --color-primary-soft: rgba(220, 38, 38, 0.16);
  --color-accent: #16a34a; /* Medium green */
  --color-text: #fff5f5;
  --color-muted: #d4b4b4;
  --color-border: rgba(220, 38, 38, 0.2);
}

.theme-christmas html,
.theme-christmas body {
  background: radial-gradient(140% 120% at 50% -10%, #2a1518 0%, #0f0a0a 55%, #050303 100%);
}

.theme-christmas body::before {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(220, 38, 38, 0.25), transparent 70%),
    radial-gradient(50% 65% at 80% 20%, rgba(22, 163, 74, 0.15), transparent 70%),
    radial-gradient(40% 50% at 50% 50%, rgba(252, 165, 165, 0.12), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 45%);
}

.theme-christmas body::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M60 20L65 45L85 45L70 55L75 80L60 65L45 80L50 55L35 45L55 45Z" fill="rgba(220,38,38,0.1)"/><circle cx="60" cy="30" r="3" fill="rgba(22,163,74,0.2)"/></svg>');
  background-size: 80px 80px;
  opacity: 0.3;
  animation: float 20s ease-in-out infinite;
}

.theme-christmas .site-header {
  background: rgba(15, 10, 10, 0.82);
  border-bottom: 1px solid rgba(220, 38, 38, 0.15);
}

.theme-christmas .hero-glow-1 {
  background: radial-gradient(circle, rgba(220, 38, 38, 0.35), transparent 70%);
}

.theme-christmas .hero-glow-2 {
  background: radial-gradient(circle, rgba(22, 163, 74, 0.25), transparent 70%);
}

.theme-christmas .section::before {
  background-image:
    radial-gradient(120% 120% at 100% -20%, rgba(220, 38, 38, 0.12), transparent 65%),
    radial-gradient(80% 80% at 20% 80%, rgba(22, 163, 74, 0.08), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M0 100h200M100 0v200' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Cpath d='M0 0h200v200H0z' fill='none' stroke='%23dc2626' stroke-opacity='0.02' stroke-width='2'/%3E%3C/svg%3E");
}

/* ============================================
   FOURTH OF JULY THEME (July 1-7)
   Red, white, and blue patriotic colors
   ============================================ */
.theme-fourth-of-july {
  /* Color Variables */
  --color-bg: #0a0a14;
  --color-bg-alt: #12121c;
  --color-card: rgba(20, 20, 34, 0.88);
  --color-primary: #e63946;
  --color-primary-soft: rgba(230, 57, 70, 0.16);
  --color-accent: #4a9eff;
  --color-text: #f0f4ff;
  --color-muted: #b8c8e8;
  --color-border: rgba(230, 57, 70, 0.2);
}

.theme-fourth-of-july html,
.theme-fourth-of-july body {
  background: radial-gradient(140% 120% at 50% -10%, #1a1a2e 0%, #0d0d18 55%, #050508 100%);
}

.theme-fourth-of-july body::before {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(230, 57, 70, 0.22), transparent 70%),
    radial-gradient(50% 65% at 80% 20%, rgba(74, 158, 255, 0.18), transparent 70%),
    radial-gradient(45% 55% at 50% 50%, rgba(255, 255, 255, 0.1), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 45%);
}

.theme-fourth-of-july body::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle cx="30" cy="30" r="2" fill="rgba(230,57,70,0.2)"/><circle cx="60" cy="30" r="2" fill="rgba(255,255,255,0.3)"/><circle cx="90" cy="30" r="2" fill="rgba(74,158,255,0.2)"/><circle cx="30" cy="60" r="2" fill="rgba(255,255,255,0.3)"/><circle cx="60" cy="60" r="2" fill="rgba(230,57,70,0.2)"/><circle cx="90" cy="60" r="2" fill="rgba(74,158,255,0.2)"/><circle cx="30" cy="90" r="2" fill="rgba(74,158,255,0.2)"/><circle cx="60" cy="90" r="2" fill="rgba(255,255,255,0.3)"/><circle cx="90" cy="90" r="2" fill="rgba(230,57,70,0.2)"/></svg>');
  background-size: 60px 60px;
  opacity: 0.4;
}

.theme-fourth-of-july .site-header {
  background: rgba(10, 10, 20, 0.82);
  border-bottom: 1px solid rgba(230, 57, 70, 0.12);
}

.theme-fourth-of-july .hero-glow-1 {
  background: radial-gradient(circle, rgba(230, 57, 70, 0.3), transparent 70%);
}

.theme-fourth-of-july .hero-glow-2 {
  background: radial-gradient(circle, rgba(74, 158, 255, 0.3), transparent 70%);
}

.theme-fourth-of-july .section::before {
  background-image:
    radial-gradient(120% 120% at 100% -20%, rgba(230, 57, 70, 0.12), transparent 65%),
    radial-gradient(80% 80% at 20% 80%, rgba(74, 158, 255, 0.08), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M0 100h200M100 0v200' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Cpath d='M0 0h200v200H0z' fill='none' stroke='%23e63946' stroke-opacity='0.02' stroke-width='2'/%3E%3C/svg%3E");
}

/* ============================================
   EASTER THEME (Easter week)
   Pastel colors: pink, yellow, green, blue
   ============================================ */
.theme-easter {
  /* Color Variables */
  --color-bg: #0f0d10;
  --color-bg-alt: #18161a;
  --color-card: rgba(28, 26, 32, 0.88);
  --color-primary: #ff6b9d;
  --color-primary-soft: rgba(255, 107, 157, 0.16);
  --color-accent: #ffd93d;
  --color-text: #fff5f9;
  --color-muted: #d4b8c8;
  --color-border: rgba(255, 107, 157, 0.2);
}

.theme-easter html,
.theme-easter body {
  background: radial-gradient(140% 120% at 50% -10%, #2a1f28 0%, #0f0d10 55%, #050408 100%);
}

.theme-easter body::before {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(255, 107, 157, 0.2), transparent 70%),
    radial-gradient(50% 65% at 80% 20%, rgba(255, 217, 61, 0.15), transparent 70%),
    radial-gradient(45% 55% at 50% 50%, rgba(107, 178, 255, 0.12), transparent 70%),
    radial-gradient(40% 50% at 30% 70%, rgba(107, 255, 178, 0.1), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 45%);
}

.theme-easter body::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><ellipse cx="40" cy="50" rx="8" ry="12" fill="rgba(255,107,157,0.15)"/><ellipse cx="80" cy="50" rx="8" ry="12" fill="rgba(255,217,61,0.15)"/><ellipse cx="60" cy="70" rx="8" ry="12" fill="rgba(107,178,255,0.15)"/></svg>');
  background-size: 100px 100px;
  opacity: 0.3;
}

.theme-easter .site-header {
  background: rgba(15, 13, 16, 0.82);
  border-bottom: 1px solid rgba(255, 107, 157, 0.12);
}

.theme-easter .hero-glow-1 {
  background: radial-gradient(circle, rgba(255, 107, 157, 0.3), transparent 70%);
}

.theme-easter .hero-glow-2 {
  background: radial-gradient(circle, rgba(255, 217, 61, 0.25), transparent 70%);
}

.theme-easter .section::before {
  background-image:
    radial-gradient(120% 120% at 100% -20%, rgba(255, 107, 157, 0.1), transparent 65%),
    radial-gradient(80% 80% at 20% 80%, rgba(255, 217, 61, 0.08), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M0 100h200M100 0v200' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Cpath d='M0 0h200v200H0z' fill='none' stroke='%23ff6b9d' stroke-opacity='0.02' stroke-width='2'/%3E%3C/svg%3E");
}

/* ============================================
   DEFAULT THEME (Other times)
   Neutral gray/blue theme
   ============================================ */
.theme-default {
  /* Color Variables */
  --color-bg: #0d0d0f;
  --color-bg-alt: #15161b;
  --color-card: rgba(26, 28, 34, 0.88);
  --color-primary: #6b8eff;
  --color-primary-soft: rgba(107, 142, 255, 0.16);
  --color-accent: #8ba3ff;
  --color-text: #f3f4f6;
  --color-muted: #c5c7ce;
  --color-border: rgba(107, 142, 255, 0.2);
}

.theme-default html,
.theme-default body {
  background: radial-gradient(140% 120% at 50% -10%, #1f2530 0%, #0b0c10 55%, #040608 100%);
}

.theme-default body::before {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(107, 142, 255, 0.18), transparent 70%),
    radial-gradient(50% 65% at 80% 20%, rgba(132, 100, 255, 0.12), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 45%);
}

.theme-default .site-header {
  background: rgba(8, 9, 12, 0.82);
  border-bottom: 1px solid rgba(107, 142, 255, 0.12);
}

.theme-default .hero-glow-1 {
  background: radial-gradient(circle, rgba(107, 142, 255, 0.25), transparent 70%);
}

.theme-default .hero-glow-2 {
  background: radial-gradient(circle, rgba(132, 100, 255, 0.2), transparent 70%);
}

.theme-default .section::before {
  background-image:
    radial-gradient(120% 120% at 100% -20%, rgba(107, 142, 255, 0.1), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M0 100h200M100 0v200' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M0 0h200v200H0z' fill='none' stroke='%236b8eff' stroke-opacity='0.02' stroke-width='2'/%3E%3C/svg%3E");
}

/* ============================================
   Theme transition animations
   ============================================ */
html,
body {
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body::before,
body::after {
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              background-image 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header {
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-glow-1,
.hero-glow-2 {
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.section::before {
  transition: background-image 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure all CSS variables transition smoothly */
* {
  transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Theme-specific gradients and hovers
   ============================================ */

/* Halloween Theme Overrides */
.theme-halloween .hero-glow-1 {
  background: radial-gradient(circle, rgba(255, 111, 60, 0.4), transparent 70%);
}

.theme-halloween .hero-glow-2 {
  background: radial-gradient(circle, rgba(255, 179, 71, 0.3), transparent 70%);
}

.theme-halloween .hero-background {
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 111, 60, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 179, 71, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(132, 73, 255, 0.08) 0%, transparent 60%);
}

.theme-halloween .btn-hero-primary {
  background: linear-gradient(135deg, var(--color-primary), #ff8f3c);
}

.theme-halloween .btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #ff9a3c 100%);
}

.theme-halloween .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(255, 111, 60, 0.4),
              0 0 0 1px rgba(255, 111, 60, 0.2);
}

.theme-halloween .hero-image-placeholder::before {
  background: linear-gradient(
    45deg,
    rgba(255, 111, 60, 0.4),
    rgba(255, 179, 71, 0.4),
    rgba(132, 73, 255, 0.4),
    rgba(255, 111, 60, 0.4)
  );
}

.theme-halloween .hero-image-placeholder::after {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 111, 60, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 179, 71, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(132, 73, 255, 0.2) 0%, transparent 60%);
}

.theme-halloween .hero-image-container:hover .hero-treasure-image {
  filter: brightness(1.08) contrast(1.05) saturate(1.05) drop-shadow(0 0 30px rgba(255, 111, 60, 0.4));
}

.theme-halloween .feature-card-new:hover::before {
  background: linear-gradient(135deg, rgba(255, 111, 60, 0.15), rgba(255, 179, 71, 0.1));
}

.theme-halloween .section::before {
  background-image:
    radial-gradient(120% 120% at 100% -20%, rgba(255, 111, 60, 0.12), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M0 100h200M100 0v200' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M0 0h200v200H0z' fill='none' stroke='%23ff6f3c' stroke-opacity='0.02' stroke-width='2'/%3E%3C/svg%3E");
}

/* Winter Theme Overrides */
.theme-winter .hero-background {
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(74, 158, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(100, 200, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(150, 200, 255, 0.08) 0%, transparent 60%);
}

.theme-winter .btn-hero-primary {
  background: linear-gradient(135deg, var(--color-primary), #6bb6ff);
}

.theme-winter .btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #6bb6ff 100%);
}

.theme-winter .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(74, 158, 255, 0.4),
              0 0 0 1px rgba(74, 158, 255, 0.2);
}

.theme-winter .hero-image-placeholder::before {
  background: linear-gradient(
    45deg,
    rgba(74, 158, 255, 0.4),
    rgba(100, 200, 255, 0.4),
    rgba(150, 200, 255, 0.4),
    rgba(74, 158, 255, 0.4)
  );
}

.theme-winter .hero-image-placeholder::after {
  background: 
    radial-gradient(circle at 20% 30%, rgba(74, 158, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(100, 200, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(150, 200, 255, 0.2) 0%, transparent 60%);
}

.theme-winter .hero-image-container:hover .hero-treasure-image {
  filter: brightness(1.08) contrast(1.05) saturate(1.05) drop-shadow(0 0 30px rgba(74, 158, 255, 0.4));
}

.theme-winter .feature-card-new:hover::before {
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.15), rgba(100, 200, 255, 0.1));
}

/* Christmas Theme Overrides */
.theme-christmas .hero-glow-1 {
  background: radial-gradient(circle, rgba(220, 38, 38, 0.35), transparent 70%);
}

.theme-christmas .hero-glow-2 {
  background: radial-gradient(circle, rgba(22, 163, 74, 0.25), transparent 70%);
}

.theme-christmas .hero-background {
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(22, 163, 74, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(252, 165, 165, 0.08) 0%, transparent 60%);
}

.theme-christmas .btn-hero-primary {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.theme-christmas .btn-primary {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.theme-christmas .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.4),
              0 0 0 1px rgba(220, 38, 38, 0.2);
}

.theme-christmas .hero-image-placeholder::before {
  background: linear-gradient(
    45deg,
    rgba(220, 38, 38, 0.4),
    rgba(252, 165, 165, 0.4),
    rgba(134, 239, 172, 0.4),
    rgba(220, 38, 38, 0.4)
  );
}

.theme-christmas .hero-image-placeholder::after {
  background: 
    radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(22, 163, 74, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(252, 165, 165, 0.2) 0%, transparent 60%);
}

.theme-christmas .hero-image-container:hover .hero-treasure-image {
  filter: brightness(1.08) contrast(1.05) saturate(1.05) drop-shadow(0 0 30px rgba(220, 38, 38, 0.4));
}

.theme-christmas .feature-card-new:hover::before {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(22, 163, 74, 0.1));
}

/* Fourth of July Theme Overrides */
.theme-fourth-of-july .hero-background {
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(230, 57, 70, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(74, 158, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
}

.theme-fourth-of-july .btn-hero-primary {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.theme-fourth-of-july .btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
}

.theme-fourth-of-july .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.4),
              0 0 0 1px rgba(220, 38, 38, 0.2);
}

.theme-fourth-of-july .hero-image-placeholder::before {
  background: linear-gradient(
    45deg,
    rgba(230, 57, 70, 0.4),
    rgba(255, 255, 255, 0.4),
    rgba(74, 158, 255, 0.4),
    rgba(230, 57, 70, 0.4)
  );
}

.theme-fourth-of-july .hero-image-placeholder::after {
  background: 
    radial-gradient(circle at 20% 30%, rgba(230, 57, 70, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(74, 158, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
}

.theme-fourth-of-july .hero-image-container:hover .hero-treasure-image {
  filter: brightness(1.08) contrast(1.05) saturate(1.05) drop-shadow(0 0 30px rgba(230, 57, 70, 0.4));
}

.theme-fourth-of-july .feature-card-new:hover::before {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.15), rgba(74, 158, 255, 0.1));
}

/* Easter Theme Overrides */
.theme-easter .hero-background {
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 107, 157, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 217, 61, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(107, 178, 255, 0.08) 0%, transparent 60%);
}

.theme-easter .btn-hero-primary {
  background: linear-gradient(135deg, #f472b6 0%, #f9a8d4 50%, #fbcfe8 100%);
}

.theme-easter .btn-primary {
  background: linear-gradient(135deg, #f472b6 0%, #f9a8d4 50%, #fbcfe8 100%);
}

.theme-easter .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(244, 114, 182, 0.4),
              0 0 0 1px rgba(244, 114, 182, 0.2);
}

.theme-easter .hero-image-placeholder::before {
  background: linear-gradient(
    45deg,
    rgba(255, 107, 157, 0.4),
    rgba(255, 217, 61, 0.4),
    rgba(107, 178, 255, 0.4),
    rgba(255, 107, 157, 0.4)
  );
}

.theme-easter .hero-image-placeholder::after {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 107, 157, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 217, 61, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(107, 178, 255, 0.2) 0%, transparent 60%);
}

.theme-easter .hero-image-container:hover .hero-treasure-image {
  filter: brightness(1.08) contrast(1.05) saturate(1.05) drop-shadow(0 0 30px rgba(255, 107, 157, 0.4));
}

.theme-easter .feature-card-new:hover::before {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.15), rgba(255, 217, 61, 0.1));
}

/* Default Theme Overrides */
.theme-default .hero-background {
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(107, 142, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(132, 100, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(150, 120, 255, 0.08) 0%, transparent 60%);
}

.theme-default .btn-hero-primary {
  background: linear-gradient(135deg, var(--color-primary), #8ba3ff);
}

.theme-default .btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8ba3ff 100%);
}

.theme-default .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(107, 142, 255, 0.4),
              0 0 0 1px rgba(107, 142, 255, 0.2);
}

.theme-default .hero-image-placeholder::before {
  background: linear-gradient(
    45deg,
    rgba(107, 142, 255, 0.4),
    rgba(132, 100, 255, 0.4),
    rgba(150, 120, 255, 0.4),
    rgba(107, 142, 255, 0.4)
  );
}

.theme-default .hero-image-placeholder::after {
  background: 
    radial-gradient(circle at 20% 30%, rgba(107, 142, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(132, 100, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(150, 120, 255, 0.2) 0%, transparent 60%);
}

.theme-default .hero-image-container:hover .hero-treasure-image {
  filter: brightness(1.08) contrast(1.05) saturate(1.05) drop-shadow(0 0 30px rgba(107, 142, 255, 0.4));
}

.theme-default .feature-card-new:hover::before {
  background: linear-gradient(135deg, rgba(107, 142, 255, 0.15), rgba(132, 100, 255, 0.1));
}

/* ============================================
   Navigation and icon fixes for all themes
   ============================================ */

/* Logo icon coloring */
.theme-halloween .logo-mark svg,
.theme-halloween .logo-mark {
  color: #ff6f3c;
}

.theme-winter .logo-mark svg,
.theme-winter .logo-mark {
  color: #4a9eff;
}

.theme-thanksgiving .logo-mark svg,
.theme-thanksgiving .logo-mark,
.theme-thanksgiving .logo-mark img {
  color: #f59e0b !important;
  filter: drop-shadow(0 5px 10px rgba(245, 158, 11, 0.3));
}

.theme-thanksgiving .logo-mark svg path,
.theme-thanksgiving .logo-mark svg circle,
.theme-thanksgiving .logo-mark svg ellipse {
  fill: #f59e0b !important;
  stroke: #f59e0b !important;
}

.theme-thanksgiving .logo-mark svg path[fill="currentColor"],
.theme-thanksgiving .logo-mark svg circle[fill="currentColor"],
.theme-thanksgiving .logo-mark svg ellipse[fill="currentColor"] {
  fill: #f59e0b !important;
}

.theme-christmas .logo-mark svg,
.theme-christmas .logo-mark {
  color: #e63946;
}

.theme-easter .logo-mark svg,
.theme-easter .logo-mark {
  color: #ff6b9d;
}

.theme-fourth-of-july .logo-mark svg,
.theme-fourth-of-july .logo-mark {
  color: #e63946;
}

.theme-default .logo-mark svg,
.theme-default .logo-mark {
  color: #6b8eff;
}

/* Featured card hover borders */
.theme-halloween .featured-card-new:hover {
  border-color: rgba(255, 111, 60, 0.3);
}

.theme-winter .featured-card-new:hover {
  border-color: rgba(74, 158, 255, 0.3);
}

.theme-christmas .featured-card-new:hover {
  border-color: rgba(230, 57, 70, 0.3);
}

.theme-easter .featured-card-new:hover {
  border-color: rgba(255, 107, 157, 0.3);
}

.theme-fourth-of-july .featured-card-new:hover {
  border-color: rgba(230, 57, 70, 0.3);
}

.theme-default .featured-card-new:hover {
  border-color: rgba(107, 142, 255, 0.3);
}

/* Section link hovers */
.theme-halloween .section-link:hover,
.theme-halloween .featured-link:hover {
  color: #ff6f3c;
}

.theme-winter .section-link:hover,
.theme-winter .featured-link:hover {
  color: #4a9eff;
}

.theme-christmas .section-link:hover,
.theme-christmas .featured-link:hover {
  color: #e63946;
}

.theme-easter .section-link:hover,
.theme-easter .featured-link:hover {
  color: #ff6b9d;
}

.theme-fourth-of-july .section-link:hover,
.theme-fourth-of-july .featured-link:hover {
  color: #e63946;
}

.theme-default .section-link:hover,
.theme-default .featured-link:hover {
  color: #6b8eff;
}

/* Step item hover */
.theme-halloween .step-item:hover .step-number {
  box-shadow: 0 6px 20px rgba(255, 111, 60, 0.4);
}

.theme-winter .step-item:hover .step-number {
  box-shadow: 0 6px 20px rgba(74, 158, 255, 0.4);
}

.theme-christmas .step-item:hover .step-number {
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);
}

.theme-easter .step-item:hover .step-number {
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
}

.theme-fourth-of-july .step-item:hover .step-number {
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);
}

.theme-default .step-item:hover .step-number {
  box-shadow: 0 6px 20px rgba(107, 142, 255, 0.4);
}

.theme-halloween .step-item:hover .step-image-placeholder {
  border-color: rgba(255, 111, 60, 0.35);
}

.theme-winter .step-item:hover .step-image-placeholder {
  border-color: rgba(74, 158, 255, 0.35);
}

.theme-christmas .step-item:hover .step-image-placeholder {
  border-color: rgba(230, 57, 70, 0.35);
}

.theme-easter .step-item:hover .step-image-placeholder {
  border-color: rgba(255, 107, 157, 0.35);
}

.theme-fourth-of-july .step-item:hover .step-image-placeholder {
  border-color: rgba(230, 57, 70, 0.35);
}

.theme-default .step-item:hover .step-image-placeholder {
  border-color: rgba(107, 142, 255, 0.35);
}