body { background-color: #282828 !important; color: white; font-family: Arial; padding: 20px; }
.container { border: 0px solid #FF3300; padding: 20px; border-radius: 15px; max-width: 950px; margin: auto; }
.btn { padding: 12px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; color: white; text-decoration: none; display: inline-block; margin: 5px; }
.btn-live { background: #009933; }
.btn-nonstop { background: #800000; }
.btn-orange { background: #FF3300; }
input, textarea, select { width: 100%; padding: 10px; margin: 5px 0; background: #333; color: white; border: 1px solid #FF3300; border-radius: 5px; box-sizing: border-box; }
.dj-photo { border-radius: 15px; border: 3px solid #CCFF99; object-fit: cover; }
.loading-bar-bg { width: 100%; background: #444; height: 15px; border-radius: 10px; margin-top: 15px; }
.loading-bar-fill { height: 100%; background: #FF3300; width: 0%; transition: width 1s linear; }

:root {
    --bg-color: #282828;
    --accent-orange: #FF3300;
    --accent-red: #FF0000;
    --accent-green: #CCFF99;
    --live-green: #009933;
    --nonstop-red: #800000;
}

body {
    background-color: var(--bg-color);
    color: white;
    font-family: Arial, sans-serif;
    margin: 0;
}

.dashboard-container {
    padding: 20px;
    border: 2px solid var(--accent-orange);
}

.btn {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    color: white;
    font-weight: bold;
}

.btn-live { background-color: var(--live-green); }
.btn-nonstop { background-color: var(--nonstop-red); }

.dj-photo {
    border-radius: 15px;
    border: 3px solid var(--accent-green);
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.loading-bar {
    width: 100%;
    height: 10px;
    background: #444;
    position: relative;
}

.loading-fill {
    height: 100%;
    background: var(--accent-orange);
    animation: load linear forwards;
}

@keyframes load {
    from { width: 0%; }
    to { width: 100%; }
}

/* 
============================================================================
   BROADCAST COMPLETE INTERACTIE STYLE SHEET 
   (Gastenboek, Sponsors, Lichtkrant & Shoutbox)
============================================================================
*/

:root {
    --broadcast-orange: #FF3300;
    --broadcast-bg: #1a1a1a;
    --broadcast-card: #242424;
    --broadcast-darker: #111111;
    --broadcast-success: #009933;
}

/* 1. CENTRALE CONTAINERS & KAARTEN */
.broadcast-card {
    background: var(--broadcast-card) !important;
    padding: 35px;
    border-radius: 15px;
    border: 1px solid #333;
    border-top: 5px solid var(--broadcast-orange);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    margin-bottom: 30px;
    color: #ffffff;
}

.broadcast-card h2 {
    color: var(--broadcast-orange);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
    font-size: 22px;
}

/* 2. LICHTKRANT & BERICHTENBALK (SHOUTBOX) */
.lichtkrant-wrapper {
    background: #000;
    border-top: 3px solid var(--broadcast-orange);
    border-bottom: 1px solid #333;
    padding: 15px 0;
    overflow: hidden;
    position: relative;
}

.marquee-content {
    display: flex;
    gap: 120px;
    white-space: nowrap;
    align-items: center;
    animation: broadcastScroll 35s linear infinite;
}

@keyframes broadcastScroll {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

/* HET VADER (FADE) EFFECT */
.vader-effect {
    animation: broadcastFade 4s infinite ease-in-out;
    display: inline-block;
}

@keyframes broadcastFade {
    0%, 100% { opacity: 0.2; transform: scale(0.97); }
    50% { opacity: 1; transform: scale(1); }
}

/* 3. ADVERTEREN & SPONSOREN BANNERS */
.ad-banner {
    border: 1px solid #333;
    background: #000;
    padding: 3px;
    border-radius: 5px;
    transition: 0.3s;
    vertical-align: middle;
}

.ad-banner:hover {
    border-color: var(--broadcast-orange);
    transform: scale(1.05);
}

/* 4. GASTENBOEK & SHOUTBOX ITEMS */
.gb-item, .shout-item {
    background: #222;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    border-left: 4px solid #444;
    transition: 0.3s ease;
}

.gb-item:hover, .shout-item:hover {
    border-left-color: var(--broadcast-orange);
    background: #282828;
}

.gb-item strong, .shout-item strong {
    color: var(--broadcast-orange);
    font-size: 16px;
}

/* 5. FORMULIEREN & KNOPPEN */
.broadcast-form input, 
.broadcast-form textarea, 
.broadcast-form select {
    width: 100%;
    padding: 14px;
    margin: 10px 0;
    background: var(--broadcast-darker);
    border: 1px solid #444;
    color: #fff;
    border-radius: 8px;
    box-sizing: border-box;
}

.broadcast-form input:focus {
    border-color: var(--broadcast-orange);
    outline: none;
}

.btn-broadcast {
    background: var(--broadcast-orange);
    color: #fff;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
}

.btn-broadcast:hover {
    background: #ff451a;
    box-shadow: 0 5px 20px rgba(255, 51, 0, 0.4);
}

/* 6. STATUS MELDINGEN */
.broadcast-status {
    background: rgba(0, 153, 51, 0.15);
    color: #00cc44;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--broadcast-success);
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}