/* =====================================================
   CHOCOLATE SOUL RADIO – FINAL REFINED CSS
   ===================================================== */

:root {
  --primary-color: #ff2323;
  --secondary-color: #081227;
  --text-color: #ffffff;
  --background-color: #0b1b3a;
  --card-background: #122547;
  --border-color: #1c3464;
  --button-color: #ff2323;
  --neon-glow: #ff2323;
  --bar-1: #ff3d3d; --bar-2: #ff993d; --bar-3: #fffa3d; --bar-4: #56ff3d;
  --bar-5: #3dfffa; --bar-6: #3d56ff; --bar-7: #993dff; --bar-8: #ff3dfa;
}

/* 1. XMAS MODE REFINEMENTS */
body.xmas-mode {
  --primary-color: #c9a24d; /* Elegant Gold */
  --button-color: #7a0f1b;  /* Deep Burgundy */
  --neon-glow: #c9a24d;
  --bar-1: #7a0f1b; --bar-2: #c9a24d; --bar-3: #f5f1e8; --bar-4: #7a0f1b;
  --bar-5: #c9a24d; --bar-6: #f5f1e8; --bar-7: #7a0f1b; --bar-8: #c9a24d;
}

/* Elegant Snowfall Canvas */
#snow-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  display: none;
}
body.xmas-mode #snow-canvas { display: block; opacity: 0.5; }

/* Pulse Glow Update for Xmas */
body.xmas-mode .live-indicator {
  background: #f5f1e8 !important;
  box-shadow: 0 0 10px #c9a24d;
  animation: candle-flicker 3s infinite ease-in-out !important;
}

@keyframes candle-flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.95); }
}

body.xmas-mode .radio-logo { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background: var(--background-color); color: var(--text-color); overflow-x: hidden; }

/* 2. CORE UI */
.slogans-container { width: 100%; display: flex; justify-content: center; background: rgba(8, 18, 39, 0.9); padding: 12px 0; z-index: 10; position: relative; }
#slogan { text-align: center; font-weight: 700; transition: opacity 0.5s; font-size: 1.1em; letter-spacing: 0.5px; }

.header-section { position: relative; height: 38vh; min-height: 250px; background: var(--secondary-color); }
.background-gif { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.radio-logo { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 450px; max-width: 90vw; z-index: 10; }
.wave-fill { fill: var(--secondary-color); }

.soundbar-container { display: flex; align-items: flex-end; justify-content: center; height: 30px; gap: 5px; margin: 15px 0; }
.bar { width: 10px; height: 5px; border-radius: 3px; animation: sound-wave 1.2s infinite ease-in-out; }
.bar-1 { background: var(--bar-1); animation-delay: 0.1s; }
.bar-2 { background: var(--bar-2); animation-delay: 0.3s; }
.bar-3 { background: var(--bar-3); animation-delay: 0.6s; }
.bar-4 { background: var(--bar-4); animation-delay: 0.2s; }
.bar-5 { background: var(--bar-5); animation-delay: 0.8s; }
.bar-6 { background: var(--bar-6); animation-delay: 0.4s; }
.bar-7 { background: var(--bar-7); animation-delay: 0.7s; }
.bar-8 { background: var(--bar-8); animation-delay: 0.5s; }

@keyframes sound-wave { 0%, 100% { height: 5px; } 50% { height: 28px; } }

.main-section { padding: 20px 16px; max-width: 500px; margin: 0 auto; text-align: center; position: relative; z-index: 10; }
.now-playing { background: var(--card-background); border-radius: 16px; padding: 18px; border: 1px solid var(--border-color); margin-bottom: 20px; }
#playing-now { font-weight: 700; margin-top: 5px; color: var(--primary-color); }

.stream-controls { display: flex; gap: 12px; margin-bottom: 20px; }
.stream-btn { flex: 1; padding: 14px; background: var(--card-background); color: #fff; border: 1px solid var(--border-color); border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.stream-btn.active { background: linear-gradient(90deg, #a30000, var(--primary-color)); box-shadow: 0 0 15px var(--neon-glow); border: none; }
.contact-btn { width: 100%; padding: 16px; background: var(--button-color); color: #fff; border: none; border-radius: 50px; font-weight: 700; margin-bottom: 25px; cursor: pointer; }

.link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.website-links a, .social-links a, .install-btn, #sleep-timer {
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-color); border-radius: 10px;
  color: #fff; padding: 12px; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 0.9em;
}

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal.visible { display: flex; }
.studio-contact-form { background: var(--card-background); width: 100%; max-width: 450px; border-radius: 20px; padding: 30px; position: relative; border: 1px solid var(--border-color); }
.form-close-btn { position: absolute; top: 10px; right: 20px; font-size: 2em; background: none; border: none; color: #fff; cursor: pointer; }
.app-footer { text-align: center; padding: 30px; opacity: 0.6; font-size: 0.8em; }