/* ============================================
   SUNFLASH FM - Sunset/Summer Theme
   ============================================ */

.station-sffm {
    /* Akzent-Farben (Sonnen-Orange) */
    --accent:        #ff9500;
    --accent-hover:  #ffb340;
    --accent-glow:   rgba(255, 149, 0, 0.5);
    
    /* Sekundär (Sunset-Pink/Rot) */
    --accent-2:      #ff3d6e;
    --accent-2-hover:#ff6b8f;
    
    /* Hintergrund-Gradient (Sonnenuntergang) */
    --bg-gradient-1: #2a0a1f;   /* Dunkles Beere/Lila */
    --bg-gradient-2: #6b1e3d;   /* Warmes Bordeaux */
    --bg-gradient-3: #ff6b35;   /* Sonnen-Orange (für 3-Stop) */
    
    /* Text */
    --text-primary:  #fff8e7;   /* Warmes Cremeweiß */
    --text-muted:    #f4c2a1;   /* Helles Pfirsich */
    --text-heading:  #ffd97a;   /* Sonnengelb */
    
    /* Card */
    --card-bg:       rgba(42, 10, 31, 0.92);
    --card-border:   rgba(255, 149, 0, 0.4);
}

/* ---------- Hintergrund (Sonnenuntergangs-Verlauf) ---------- */
body.station-sffm {
    background: linear-gradient(
        180deg,
        #1a0612 0%,
        #2a0a1f 30%,
        #6b1e3d 65%,
        #c2410c 90%,
        #ff9500 100%
    );
    background-attachment: fixed;
    min-height: 100vh;
}

/* Optional: Sonnenstrahl-Overlay */
body.station-sffm::before {
    content: "";
    position: fixed;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(
        circle,
        rgba(255, 217, 122, 0.25) 0%,
        rgba(255, 149, 0, 0.1) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: sun-pulse 8s ease-in-out infinite;
}

@keyframes sun-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* ---------- Player-Card ---------- */
.station-sffm .player-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 
        0 0.5rem 1.5rem rgba(0, 0, 0, 0.7),
        0 0 40px var(--accent-glow);
    position: relative;
    z-index: 1;
}

/* ---------- Buttons ---------- */
.station-sffm .btn-primary,
.station-sffm .play-btn {
    background: linear-gradient(135deg, #ffb340, #ff9500, #ff3d6e);
    border-color: var(--accent);
    color: #2a0a1f;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.station-sffm .btn-primary:hover,
.station-sffm .play-btn:hover {
    background: linear-gradient(135deg, #ffd97a, #ffb340, #ff6b8f);
    border-color: var(--accent-hover);
    box-shadow: 0 0 25px var(--accent-glow);
    transform: translateY(-1px);
}

.station-sffm .btn-secondary {
    background: linear-gradient(135deg, var(--accent-2), #c2185b);
    border-color: var(--accent-2);
    color: #fff;
}

.station-sffm .btn-secondary:hover {
    background: linear-gradient(135deg, var(--accent-2-hover), #e91e63);
}

/* ---------- Überschriften ---------- */
.station-sffm h1, .station-sffm .h1,
.station-sffm h2, .station-sffm .h2,
.station-sffm h3, .station-sffm .h3,
.station-sffm .brand {
    font-family: "Montserrat", "Oswald", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-heading);
    text-shadow: 
        0 0 10px var(--accent-glow),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Brand-Name mit Sunset-Verlauf */
.station-sffm .brand {
    background: linear-gradient(135deg, #ffd97a, #ff9500, #ff3d6e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* ---------- Text ---------- */
.station-sffm {
    color: var(--text-primary);
    font-family: "Roboto", "Open Sans", system-ui, sans-serif;
}

.station-sffm .text-muted {
    color: var(--text-muted) !important;
}

/* ---------- Badges ---------- */
.station-sffm .badge-light-auto { color: #2a0a1f !important; }
.station-sffm .badge-dark-auto  { color: #fff8e7 !important; }

.station-sffm .badge.bg-primary {
    background: linear-gradient(135deg, #ff9500, #ff3d6e) !important;
    color: #fff !important;
}

/* ---------- Album-Cover Glow ---------- */
.station-sffm .cover-image,
.station-sffm .album-cover {
    border: 2px solid rgba(255, 149, 0, 0.3);
}

.station-sffm .cover-image.playing,
.station-sffm .album-cover.playing {
    box-shadow: 
        0 0 40px var(--accent-glow),
        0 0 80px rgba(255, 61, 110, 0.3);
    animation: sunflash-glow 3s ease-in-out infinite;
}

@keyframes sunflash-glow {
    0%, 100% { box-shadow: 0 0 40px var(--accent-glow), 0 0 80px rgba(255, 61, 110, 0.3); }
    50%      { box-shadow: 0 0 60px var(--accent-glow), 0 0 100px rgba(255, 61, 110, 0.5); }
}

/* ---------- Volume Slider ---------- */
.station-sffm input[type="range"] {
    accent-color: var(--accent);
}

.station-sffm input[type="range"]::-webkit-slider-thumb {
    background: linear-gradient(135deg, #ffd97a, #ff9500);
    box-shadow: 0 0 10px var(--accent-glow);
}

.station-sffm input[type="range"]::-moz-range-thumb {
    background: linear-gradient(135deg, #ffd97a, #ff9500);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ---------- Status Dot (LIVE) ---------- */
.station-sffm .status-dot.live {
    background: var(--accent-2);
    box-shadow: 0 0 12px var(--accent-2);
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--accent-2); }
    50%      { box-shadow: 0 0 16px var(--accent-2), 0 0 24px var(--accent-2); }
}

/* ---------- Tabs / Nav (falls vorhanden) ---------- */
.station-sffm .nav-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: var(--accent);
}

.station-sffm .nav-tabs .nav-link {
    color: var(--text-muted);
}

.station-sffm .nav-tabs .nav-link:hover {
    color: var(--text-heading);
}

/* ---------- Links ---------- */
.station-sffm a {
    color: var(--accent-hover);
}

.station-sffm a:hover {
    color: var(--text-heading);
}