body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Bovenste kleine header */
/* Bovenste kleine header FIX */
#top-header {
    background: #222;
    color: #fff;
    /* 1. Vaste positie */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    /* 2. Z-index om boven de content te blijven */
    z-index: 100; 
}

/* Hoofdheader FIX */
#main-header {
    background: #03033e;
    color: #fff;
    padding: 15px;
    /* 1. Vaste positie */
    position: fixed;
    /* 2. Bepaal de hoogte van de top-header en plaats de main-header er direct onder */
    top: 25px; /* Stel de hoogte van #top-header in op 25px voor dit voorbeeld */
    left: 0;
    width: 100%;
    /* 3. Z-index moet gelijk zijn of hoger dan de top-header */
    z-index: 99;
    box-sizing: border-box; /* Zorgt ervoor dat padding binnen de 100% breedte valt */
}

/* Flexbox container: logo + titel + menu */
.header-container {
    display: flex;
    align-items: center;       /* verticaal centreren */
    justify-content: space-between; /* ruimte tussen logo+titel en menu */
}

/* Logo links */
#logo {
    height: 50px;
    margin-right: 15px;
}

/* Zorg dat link geen standaard underline krijgt */
#main-header a img {
    display: block;
    text-decoration: none;
}

/* Titel naast logo */
#main-header h1 {
    margin: 0;
    font-size: 24px;
}

/* Extra menu rechts */
#header-menu {
    display: flex;
    gap: 15px; /* ruimte tussen menu-items */
}

#header-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

#header-menu a:hover {
    text-decoration: underline;
}

/* Container voor sidebar + content */
#main-content {
    /* De flexbox blijft, maar de playerbar is fixed, dus deze is nu 100% breed */
    display: flex;
    /* De minimale hoogte is nu niet nodig, omdat de content scrollt */
    min-height: 100vh;
}

/* ======================================= */
/* NIEUWE PLAYERBAR LAYOUT STIJLEN */
/* ======================================= */

/* Pas de bestaande #playerbar aan om Flexbox te gebruiken */
#playerbar {
    width: 300px;
    background: #03033e;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    /* ... (Bestaande positionering regels) ... */
    position: fixed; 
    top: 100px; 
    left: 0;
    height: calc(100vh - 100px); 
    z-index: 50; 
    overflow-y: auto;
    
    /* NIEUW: Flexbox instellen */
    display: flex;
    flex-direction: column; /* Stapel de items verticaal in de sidebar */
    /* De h3, player-nav en audio/video secties worden nu gestapeld */
}

/* De container die de links en het menu-icoon bevat (nieuwe wrapper) */
.player-nav {
    display: flex; /* Activeer Flexbox in de navigatiebalk */
    align-items: center; /* Verticale centrering van de elementen */
    justify-content: space-between; /* Spreid de links en de menuknop */
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px; /* Ruimte onder de navigatie */
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Scheidingslijn */
}

/* De container voor de On Air en Stations links */
.navigation-links {
    display: flex;
    gap: 15px; /* Ruimte tussen de links */
}

/* Stijl voor de individuele links */
.player-nav .nav-link {
    color: #ff9900; /* Gebruik de gele/oranje accentkleur */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em;
    transition: color 0.2s;
}

.player-nav .nav-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Hamburger Icoon Stijl */
.menu-button {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    line-height: 1; /* Zorgt ervoor dat het icoon goed gecentreerd is */
    transition: color 0.2s;
}

.menu-button:hover {
    color: #ff9900; /* Accentkleur bij hover */
}

/* Zorg dat de speler-titel goed staat */
.player-title {
    margin-top: 0;
    font-size: 1.5em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

/* Content rechts van sidebar */
#content {
    flex: 1;
    padding: 0;
    box-sizing: border-box;
    /* BELANGRIJK: Zorg dat de content begint na de playerbar */
    margin-left: 300px; 
    /* De Playerbar is 300px breed */
    margin-top: 100px;
}

/* Hero met gradient achtergrond */
#hero {
    background-color: #fff0; /* transparant */
    background-image: linear-gradient(40deg, #4B00FF 45%, #9B00FF 80%);
    color: #fff;
    padding: 50px 20px;
    text-align: center;
}

/* Hero call-to-action knop */
#hero a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #fff;
    color: #4B00FF; /* past bij gradient */
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
}

#hero a:hover {
    background: #f0f0f0;
}


.site-footer {
  background-color: #03033e;
  color: #e81e4d;
  padding: 30px 20px 10px;
  font-size: 14px;
  margin-top: 40px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo h2 {
  color: #6e00ff;
  margin: 0;
  font-size: 24px;
}

.footer-logo p {
  margin: 5px 0 0;
  font-style: italic;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links ul li {
  margin-bottom: 6px;
}

.footer-links ul li a {
  color: #d3d6db;
  text-decoration: none;
}

.footer-links ul li a:hover {
  text-decoration: underline;
  color: #ffffff;
}

.footer-social a {
  display: inline-block;
  margin-right: 10px;
}

.footer-social img {
  width: 24px;
  height: 24px;
  
  transition: transform 0.2s ease;
}

.footer-social a:hover img {
  transform: scale(1.1);
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  color: #aaa;
  font-size: 12px;
}



/* Footer onderaan content */
#footer {
    background: #ccc;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
}

a:hover {
    text-decoration: underline;
}

/* Menu-sidebar overlay (start verborgen) */
#menu-sidebar {
    position: fixed;
    top: 0px;
    left: 0;
    width: 300px;
    height: 100%;
    background: #0D1B4C;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
}

#menu-sidebar.active {
    transform: translateX(0);
}

#menu-sidebar a, #menu-sidebar button {
    display: block;
    margin: 10px 0;
    color: #fff;
    text-decoration: none;
}

#menu-sidebar button {
    background: #444;
    border: none;
    padding: 10px;
    cursor: pointer;
}

/* Styling voor de nieuwe menu-elementen */

#menu-sidebar h3 {
    /* Stijl de sectie titels */
    color: #A0D0FF; /* Lichtere blauwe/cyaan kleur */
    margin-top: 25px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.1em;
}

#menu-sidebar a {
    /* Stijl de links voor betere leesbaarheid en ruimte */
    padding: 10px 0;
    transition: background-color 0.2s ease;
    border-radius: 4px; /* Subtiele afronding */
    padding-left: 10px; /* Ruimte voor de tekst */
}

#menu-sidebar a:hover {
    /* Hover effect */
    background-color: rgba(255, 255, 255, 0.1); /* Subtiele lichte achtergrond */
    text-decoration: none;
}

#menu-sidebar a.active {
    /* Stijl voor de actieve link */
    background: #008CFF; /* Opvallende blauwe kleur */
    color: #fff;
    font-weight: bold;
    border-left: 5px solid #FFD700; /* Gouden randje als accent */
    padding-left: 5px;
}

/* Visuele scheiding */
.menu-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 15px 0;
}

/* Stijl voor de Sluitknop (deze is verplaatst) */
#menu-sidebar .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    color: #fff;
    font-size: 1.5em;
    padding: 5px;
    margin: 0;
}

/* Verwijder de oude button stijl die niet meer nodig is */
#menu-sidebar button:not(.close-btn) {
    display: none; 
}


/* ========================================================== */
/* PUSH MENU STYLES (Horizontaal Schuiven) */
/* ========================================================== */

#menu-sidebar {
    /* De container moet de schermen in bedwang houden */
    overflow: hidden; 
    /* Voeg padding toe aan de buitenste container */
    padding: 0;
}

/* Alle schermen in de sidebar */
.menu-screen {
    position: absolute; /* Stapel de schermen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px; /* Hier zetten we de padding van de inhoud */
    transition: transform 0.3s ease;
    overflow-y: auto; /* Zorg dat de inhoud scrollt als deze te lang is */
}

/* Het hoofdscherm staat op de juiste plek (default) */
.main-screen {
    transform: translateX(0); 
}

/* De sub-schermen staan standaard rechts van de sidebar */
.sub-screen {
    transform: translateX(100%); 
}

/* De toestand wanneer het sub-menu actief is */
#menu-sidebar.level-2 .main-screen {
    transform: translateX(-100%); /* Schuif het hoofdscherm naar links (buiten beeld) */
}

#menu-sidebar.level-2 .sub-screen.active {
    transform: translateX(0); /* Schuif het actieve sub-scherm in beeld */
}

/* Styling voor de submenu triggers */
.submenu-trigger {
    /* Geef de trigger-links de styling van een H3 */
    color: #A0D0FF;
    font-size: 1.1em;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    margin-top: 10px;
}

.submenu-trigger:hover {
    color: #fff;
}

.submenu-trigger span {
    font-weight: bold;
}

/* Stijl voor de Terug-knop in de sub-schermen */
.back-btn {
    background: #008CFF; /* Een opvallende kleur */
    color: #fff;
    border: none;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 1em;
    text-align: left;
    border-radius: 4px;
}

#menu-sidebar {
    position: fixed;
    z-index: 9999; /* menu zelf bovenaan */
}

#menu-sidebar .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10000; /* boven ALLES */
    cursor: pointer;
}


/* Gebruik een moderne CSS-aanpak, dit is een vereenvoudigd voorbeeld */

.hero-container {
    position: relative;
    width: 100%;
    min-height: 450px; /* Voldoende hoogte */
    overflow: hidden;
    color: white;
    font-family: Arial, sans-serif;
    padding-bottom: 20px;
}

.background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* De gradient van de afbeelding: paars naar blauw/cyaan */
    background-color: #fff0;
    background-image: linear-gradient(40deg, #4B00FF 45%, #9B00FF 80%);
 
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite; /* Optioneel: animatie */
    z-index: 1;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 40px 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Profiel Sectie Links --- */
.profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 50px;
}

.profile-ring {
    width: 100%;
    height: 280px;
    /* #border: 5px solid white; */ /* De witte rand */
    /* #border-radius: 50%; */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* #box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); */
}

.dj-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.live-status {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
}

.live-indicator {
    background-color: red;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
}

.controls {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: rgba(255, 255, 255, 0.15); /* Semi-transparante achtergrond voor de knoppenbalk */
    border-radius: 10px;
    margin-top: -30px; /* Laten overlappen met de ring */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.control-button {
    background: none;
    border: none;
    color: white;
    padding: 8px 10px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.2s;
}

/* --- Programma Details Rechts --- */
.program-details {
    flex-grow: 1;
    max-width: 500px;
}

.program-title-label {
    background-color: white;
    color: #4a00e0; /* Paarse tekst */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: bold;
    margin-bottom: 10px;
}

.timeslot-label {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
    display: inline-block;
}

.now-playing {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid white;
    border-radius: 10px;
    padding: 15px;
    margin-top: 40px;
}

.nu-label {
    font-weight: bold;
    margin-right: 15px;
    font-size: 1.2em;
}

.track-info {
    display: flex;
    align-items: center;
}

.album-art-placeholder {
    width: 50px;
    height: 50px;
    background-color: #333; /* Placeholder voor albumhoes */
    margin-right: 10px;
}

.track-title {
    font-weight: bold;
    margin: 0;
}

.track-artist {
    font-size: 0.9em;
    opacity: 0.8;
    margin: 0;
}

.history-button {
    background-color: #fff;
    color: #4a00e0;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    float: right;
    margin-top: 15px;
}

/* --- Footer Navigatie --- */
.hero-navigation {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
}

.nav-button {
    background: none;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    margin: 0 10px;
    transition: color 0.2s;
}







/* --- Stijlen voor de Stations Nieuws Pagina (pages/stations_nieuws.php) --- */

.content-padding {
    padding: 40px 40px;
}

.nieuws-grid {
    display: grid;
    /* Twee kolommen op grotere schermen, flexibele grootte */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 30px;
    margin-top: 30px;
}

.nieuws-item-full {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.nieuws-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.nieuws-content {
    padding: 15px;
}

.nieuws-content h3 {
    color: #0D1B4C;
    margin-top: 0;
}

.nieuws-datum {
    font-size: 0.8em;
    color: #777;
    margin-bottom: 10px;
}

.lees-meer-link {
    display: inline-block;
    margin-top: 10px;
    color: #4a00e0; /* Paarse kleur van de hero */
    text-decoration: none;
    font-weight: bold;
}

.lees-meer-link:hover {
    text-decoration: underline;
}

/* Stijlen voor Paginering */
.pagination-links {
    text-align: center;
    margin-top: 40px;
}

.pagination-links a {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
}

.pagination-links a.active {
    background-color: #0D1B4C;
    color: white;
    border-color: #0D1B4C;
}



/* --- Herbruikbare Page Hero Stijl --- */

.page-hero-container {
    background: linear-gradient(135deg, #4a00e0, #7c3aed); /* Paarse/Donkere Gradient */
    color: white;
    padding: 60px 20px;
    margin-bottom: 30px; /* Ruimte onder de header */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-hero-content {
    max-width: 1200px;
    margin: 0 auto;
}

.page-hero-container h1 {
    font-size: 2.5em;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Optionele custom stijlen per sectie, gebruik makend van de bg_class variabele */
.stations-nieuws {
    background: linear-gradient(135deg, #0D1B4C, #4a00e0); /* Donkerblauw/Paars */
}

.evenementen-overzicht {
    background: linear-gradient(135deg, #e05e5e, #f29c9c); /* Rood/Roze (Opvallend voor Events) */
}

.nieuwe-releases {
    background: linear-gradient(135deg, #0073aa, #00bfff); /* Blauw/Cyaan */
}



/* --- Stijlen voor Afgespeelde Nummers Tabel (pages/afgespeeld.php) --- */

.afgespeeld-tabel {
    width: 100%;
    border-collapse: collapse; /* Zorgt ervoor dat cellen naadloos op elkaar aansluiten */
    margin-top: 25px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Lichte schaduw voor diepte */
    border-radius: 8px; /* Afgeronde hoeken voor de hele tabel */
    overflow: hidden; /* Zorgt dat de randen kloppen met de border-radius */
}

.afgespeeld-tabel th, .afgespeeld-tabel td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eef; /* Lichte lijn tussen rijen */
}

.afgespeeld-tabel thead tr {
    /* Gebruik de kleur van de huisstijl */
    background-color: #0D1B4C; 
    color: white;
}

.afgespeeld-tabel th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}

/* Afwisselende rijkleuren voor betere leesbaarheid */
.afgespeeld-tabel tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.afgespeeld-tabel tbody tr:hover {
    background-color: #eef; /* Highlight rij bij hover */
    transition: background-color 0.2s ease;
}

/* Specifieke kolombreedtes (optioneel, maar maakt het netter) */
.afgespeeld-tabel td:nth-child(1) { /* Tijd kolom */
    width: 80px;
    font-weight: bold;
}
.afgespeeld-tabel td:nth-child(2) { /* Artiest kolom */
    width: 35%;
}

/* --- Responsieve Stijlen (Mobiele Weergave) --- */

@media (max-width: 768px) {
    /* Verberg de koptekst op kleine schermen */
    .afgespeeld-tabel thead {
        display: none;
    }

    .afgespeeld-tabel, 
    .afgespeeld-tabel tbody, 
    .afgespeeld-tabel tr, 
    .afgespeeld-tabel td {
        display: block;
        width: 100%;
    }

    .afgespeeld-tabel tr {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .afgespeeld-tabel td {
        text-align: right;
        padding-left: 50%; /* Maakt ruimte voor de label */
        position: relative;
        border: none;
        border-bottom: 1px dashed #eee;
    }
    
    /* Maak van de Tijd-kolom een volle lijn om de nummer-info te scheiden */
    .afgespeeld-tabel tr:last-child {
        border-bottom: none;
    }
    
    /* Vaste labels voor elke kolom in mobiele weergave */
    .afgespeeld-tabel td::before {
        content: attr(data-label); /* Vereist dat we data-label in de PHP toevoegen! */
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: #4a00e0; /* Accentkleur */
    }
}



/* =======================================
   1. About Content Container
   ======================================= */

/* Hoofdcontainer voor de content sectie */
#about-content.blog-post-area {
    /* Gebruikt de algemene padding/margin van blog-post-area, 
       maar zorgt ervoor dat de padding klopt met de inline style van 40px */
    padding: 20px 0 60px 40px; 
}

/* Stijl voor de Hoofd Titel (H2) in de content */
#about-content h2 {
    /* Gebruik de algemene titelstijl, maar zorg voor een duidelijke kleur */
    color: #061e37; 
    font-family: "Raleway", sans-serif;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Stijl voor de Paragrafen */
#about-content p {
    color: #061e37;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 27px;
    margin-bottom: 15px;
    text-align: justify;
}


/* =======================================
   2. Sidebar/Focus Stijlen (Rechts)
   ======================================= */

/* Stijl voor de subsectie titel in de sidebar (Onze Focus) */
#about-content h3 {
    /* Simuleert de stijl die u gebruikt voor topsongs titels */
    border-bottom: 2px solid #40c4ff; /* Blauwe accentkleur */
    padding-bottom: 5px;
    margin-top: 0;
    margin-bottom: 15px;
    color: #061e37; 
    font-family: "Raleway", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

/* Stijl voor de ongenummerde lijst (Onze Focus) */
#about-content ul {
    list-style: square outside; /* Gebruik een duidelijke vierkante bullet */
    padding-left: 20px;
    margin-bottom: 25px;
}

#about-content ul li {
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 30px;
    color: #061e37; 
}

/* Stijl voor de afbeelding in de sidebar (DJ desk) */
#about-content img {
    /* De inline styles in about.php waren: width: 100%; height: auto; margin-top: 20px; border-radius: 4px; */
    width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 4px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Voeg een lichte schaduw toe */
}



/* =======================================
   1. Contact Formulier Stijlen
   ======================================= */

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form label {
    display: block;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #333;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    box-sizing: border-box; /* Zorgt dat padding binnen de breedte valt */
}

.contact-form textarea {
    resize: vertical; /* Alleen verticaal resizen toestaan */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #aaa;
    font-style: italic;
}

.contact-form .submit-btn {
    /* Hergebruik .rdjbutton stijl, maar met een kleine aanpassing voor de breedte */
    width: auto;
    padding: 10px 30px;
    margin-top: 20px;
}

/* =======================================
   2. Feedback- en Foutmeldingen
   ======================================= */

#form-feedback p {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
}

.success-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* =======================================
   3. Contact Informatie Sidebar
   ======================================= */

.contact-info {
    padding-top: 15px;
}

.contact-info h4 {
    color: #E81E4D; /* Rode accentkleur */
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 5px;
}

.contact-info p {
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #333;
    margin-bottom: 15px;
}





/* ======================================= */
/* DJ OVERZICHT (PAGES/DJS.PHP) STIJLEN */
/* ======================================= */

.dj-section {
    padding: 20px 0;
}

.dj-section h2 {
    /* Gebruik de kleur van de main-header */
    color: #0D1B4C; 
    margin-bottom: 5px;
}

.dj-section .intro-text {
    font-size: 1.1em;
    /* Een donkere kleur voor contrast met de content achtergrond */
    color: #333; 
    margin-bottom: 30px;
}

/* --- DJ GRID CONTAINER --- */
.dj-grid {
    display: grid;
    /* Flexibele, responsive kolommen */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    padding: 10px 0;
}

/* --- DJ KAART (CARD) STIJL --- */
.dj-card {
    background: #1e1e1e; /* Donkere achtergrond voor de kaart */
    border-radius: 12px;
    overflow: hidden; 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%; 
}

/* Effect bij hover */
.dj-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
}

/* De link zelf (om het hele element klikbaar te maken) */
.dj-link {
    display: block; 
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* --- AFBEELDING STIJL (NU SPECIFIEKER GEMAAKT) --- */
.dj-image-container {
    width: 100%;
    padding-top: 100%; 
    position: relative;
    overflow: hidden;
}

/* Zorgt ervoor dat de dj-photo alleen in een dj-card gestyled wordt */
.dj-card .dj-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.4s ease;
}

/* Zoom effect bij hover over de kaart */
.dj-card:hover .dj-card .dj-photo {
    transform: scale(1.05);
}

/* --- INFORMATIE TEKST STIJL --- */
.dj-info {
    padding: 15px;
    text-align: left;
}

.dj-name {
    font-size: 1.6em;
    /* Paarse accentkleur, vergelijkbaar met de Hero-stijl */
    color: #4B00FF; 
    margin-bottom: 5px;
}

.dj-short-bio {
    font-size: 0.95em;
    color: #aaa; /* Lichtgrijs op donkere achtergrond */
    line-height: 1.4;
    min-height: 40px; 
}

.read-more {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    /* Gele/Oranje accentkleur */
    color: #ff9900; 
    transition: color 0.2s;
}

.dj-card:hover .read-more {
    color: #ffffff;
}

/* --- MEDIA QUERIES (Responsiviteit) --- */
@media (max-width: 768px) {
    .dj-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
    }
}

@media (max-width: 500px) {
    .dj-grid {
        grid-template-columns: 1fr;
    }
}



/* ======================================= */
/* DJ DETAIL PAGINA (PAGES/DJ_DETAIL.PHP) STIJLEN */
/* ======================================= */



/* --- Hoofdsectie: Afbeelding en Bio --- */
.dj-header {
    display: flex; /* Zorgt ervoor dat de kolommen flexibel zijn */
    flex-wrap: wrap; /* Belangrijk voor responsiviteit op kleine schermen */
    margin-bottom: 40px;
}

.dj-image-area {
    text-align: center;
    padding: 0 20px 20px;
}

.dj-profile-photo {
    /* Maak de foto rond voor een profiellook */
    width: 100%;
    max-width: 300px; /* Maximale grootte voor de foto */
    height: auto;
    border-radius: 12px; /* Vierkante foto met afgeronde hoeken */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    display: block;
    margin: 0 auto;
}

/* --- Algemene DJ Info Stijl --- */
.dj-info-area h1 {
    font-size: 2.8em;
    color: #0D1B4C; /* Donkerblauw als primaire titelkleur */
    margin-top: 0;
}

.dj-info-area h3 {
    color: #4B00FF; /* Paarse accentkleur voor subkopjes */
    font-size: 1.5em;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #ccc;
}

.dj-bio {
    font-size: 1.1em;
    line-height: 1.7;
    color: #333;
}

/* --- Sociale Links Stijl --- */
.social-links {
    margin-top: 20px;
    padding: 15px;
    background: #f4f4f4;
    border-radius: 8px;
}

.social-links h4 {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 10px;
    border-bottom: none; /* Overschrijft de algemene h3-stijl indien nodig */
}

/* Stijl voor de social media knoppen */
.btn-social {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 20px; /* Ronde knoppen */
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    transition: opacity 0.2s;
}

.btn-social:hover {
    opacity: 0.8;
}

.btn-social i {
    margin-right: 8px;
}

/* Kleuren voor bekende platforms (Vervang door uw icon font classes als u Font Awesome gebruikt) */
.btn-facebook { background: #3b5998; }
.btn-twitter { background: #55acee; }
.btn-instagram { background: #e4405f; }
.btn-youtube { background: #cd201f; }
.btn-mixcloud { background: #ff8100; } 
/* Voeg meer specifieke social media kleuren toe indien nodig! */

/* --- Uitzendingen Sectie (Tabel) --- */
.dj-schedule-area h2 {
    color: #0D1B4C;
    margin-bottom: 20px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.schedule-table th, 
.schedule-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.schedule-table thead tr {
    background-color: #0D1B4C; /* Donkerblauwe kop */
    color: white;
}

.schedule-table tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

.schedule-table tbody tr:hover {
    background-color: #eef;
}

.schedule-table strong {
    color: #4B00FF; /* Paarse accentkleur voor programmanamen */
}

/* Stijl voor de "Bekijk Show" knop */
.btn-outline-primary {
    color: #4B00FF;
    border: 1px solid #4B00FF;
    background: none;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.btn-outline-primary:hover {
    background-color: #4B00FF;
    color: white;
}

/* --- Responsieve Aanpassingen --- */
@media (max-width: 768px) {
    .dj-header {
        /* Op kleine schermen staan de afbeelding en info onder elkaar */
        flex-direction: column;
    }
    
    .dj-image-area {
        order: 1; /* Afbeelding eerst */
    }
    
    .dj-info-area {
        order: 2; /* Info daarna */
        padding: 20px;
    }

    .dj-profile-photo {
        max-width: 200px;
    }
    
    .schedule-table {
        font-size: 0.9em; /* Kleinere tekst voor de tabel */
    }
}

/* ======================================= */
/* DJ HERO WRAPPER (MET GRADIENT) STIJLEN */
/* ======================================= */

.dj-hero-wrapper {
    /* De container voor de gradient en de inhoud */
    position: relative;
    width: 100%;
    min-height: 450px; 
    overflow: hidden;
    margin-bottom: 40px; 
}

/* De Achtergrond Gradient */
.dj-hero-wrapper .background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff0;
    background-image: linear-gradient(40deg, #4B00FF 45%, #9B00FF 80%);
    background-size: 400% 400%;
    /* Zorg ervoor dat u de @keyframes gradient-shift ook in style.css heeft staan! */
    animation: gradient-shift 15s ease infinite; 
    z-index: 1; 
}

/* De content wrapper om de z-index te verhogen en te centreren */
.dj-hero-content {
    position: relative;
    z-index: 2;
    padding: 40px 20px; 
    color: white; 
    max-width: 1200px;
    margin: 0 auto;
}

/* --- DJ HEADER INHOUD (OP Z-INDEX 2) --- */

.dj-header {
    display: flex; 
    flex-wrap: wrap; 
}

.dj-image-area {
    text-align: center;
    padding: 0 20px 20px;
}

.dj-profile-photo {
    width: 100%;
    max-width: 300px; 
    height: auto;
    border-radius: 12px; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* Iets donkerder voor contrasterende achtergrond */
    display: block;
    margin: 0 auto;
}

/* --- Override Tekstkleuren voor de Gradient Achtergrond --- */

.dj-hero-wrapper .dj-info-area h1 {
    color: white; /* Naam wit */
    margin-top: 0;
    font-size: 2.8em;
}

.dj-hero-wrapper .dj-info-area h3 {
    color: #ff9900; /* Accentkleur voor subkopjes (Bio) */
    font-size: 1.5em;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5); /* Witte/transparante scheidingslijn */
}

.dj-hero-wrapper .dj-bio {
    color: #eee; /* Lichtere tekst voor de bio */
    font-size: 1.1em;
    line-height: 1.7;
}

/* --- Sociale Links Stijl OVERRIDE --- */
.dj-hero-wrapper .social-links {
    background: rgba(0, 0, 0, 0.2); /* Transparant donkergrijs voor leesbaarheid */
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

.dj-hero-wrapper .social-links h4 {
    color: white; /* Volg... tekst wit */
    margin-bottom: 10px;
    font-size: 1.1em;
}

/* ... (De rest van de social knopstijlen en media queries blijven hetzelfde) ... */

/* --- Responsieve Aanpassingen voor Hero --- */
@media (max-width: 768px) {
    .dj-header {
        flex-direction: column;
    }
    
    .dj-image-area {
        order: 1; 
    }
    
    .dj-info-area {
        order: 2; 
        padding: 20px;
    }

    .dj-profile-photo {
        max-width: 200px;
    }
    
    .dj-info-area h1 {
        text-align: center;
        margin-top: 15px;
    }
}

/* ========================================= */
/* 9A. Request Lijst Container Styling       */
/* ========================================= */

#request-list {
    /* Gebruik de algemene padding die past bij de rest van je content, 
       maar zorg dat deze alleen geldt voor de sectie na de hero. */
    padding: 40px; /* Padding aan alle kanten (boven, rechts, onder, links) */
    padding-bottom: 20px; /* Iets minder onderaan dan bovenaan */
}

/* De container binnen de sectie moet de standaard opmaak krijgen als deze niet bestaat */
#request-list .container {
    max-width: 1200px; /* Zorgt ervoor dat content niet te breed wordt */
    margin: 0 auto;    /* Centreert de container */
}


/* --- Responsieve Aanpassing voor padding --- */
@media (max-width: 768px) {
    #request-list {
        /* Op mobiel kleinere padding, bijvoorbeeld 15px rondom */
        padding: 20px 15px;
    }
}

/* ========================================= */
/* 9. REQUEST LIJST & INTERACTIE STIJLEN     */
/* ========================================= */

/* Zoekbalkstijl (als deze nog niet bestaat) */
#live_search_input {
    font-size: 16px;
    width: 100%;
    min-width: 240px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* 1. Algemene Lijst Container (.reqil) */
.reqil {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Zorgt ervoor dat list items naast elkaar staan */
    align-items: center; /* Centreert items verticaal */
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    background-color: #ffffff;
    transition: background-color 0.2s;
}

.reqil:hover {
    background-color: #f7f7f7;
}

.reqil li {
    padding: 10px 8px;
    box-sizing: border-box;
}

/* ======================================= */
/*   SCHEMA.PHP STIJLEN (UITZENDSCHE MA)   */
/* ======================================= */

.schedule-section {
    padding: 40px 0;
}

.schedule-section h2 {
    color: #0D1B4C; /* Hoofdkleur */
    margin-bottom: 5px;
}

.schedule-section .intro-text {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
}

/* 1. De Grid Container */
.schedule-grid {
    display: grid;
    /* 7 kolommen op grote schermen */
    grid-template-columns: repeat(7, 1fr); 
    gap: 15px;
    padding: 10px 0;
}

/* 2. De Dag Kolom */
.schedule-day-column {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.schedule-day-column .day-title {
    color: #4B00FF; /* Paarse accentkleur */
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}

/* 3. De Show Lijst */
.show-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.show-item {
    margin-bottom: 15px;
}

.show-link {
    display: block;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-left: 5px solid #0D1B4C; /* Donkerblauwe accentbalk */
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.show-link:hover {
    background-color: #f0f0ff; /* Lichte blauwe hover */
    box-shadow: 0 4px 8px rgba(75, 0, 255, 0.1);
    text-decoration: none;
}

.time-slot {
    font-size: 0.9em;
    color: #4B00FF;
    font-weight: 600;
    margin-bottom: 5px;
}

.show-title {
    margin: 0;
    font-size: 1em;
}

.show-dj {
    margin: 0;
    font-size: 0.9em;
    color: #777;
}

.dj-link {
    color: #E81E4D; /* Rode accentkleur voor de DJ */
    text-decoration: none;
}

.dj-link:hover {
    text-decoration: underline;
}

.no-shows {
    color: #aaa;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* 4. Responsiviteit voor de Grid */
@media (max-width: 1200px) {
    /* Schakel over op 4 kolommen */
    .schedule-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    /* Schakel over op 2 kolommen */
    .schedule-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    /* Op kleine mobiele schermen, één kolom */
    .schedule-grid {
        grid-template-columns: 1fr;
    }
    
    .schedule-day-column {
        padding: 10px;
    }
}


/* ======================================= */
/*   STIJL VOOR DE LIVE SHOW                */
/* ======================================= */

/* 1. Stijl voor het gehele show-link element wanneer het live is */
.show-link.is-live {
    /* Opvallende achtergrond om te benadrukken */
    background-color: #fff0f0; /* Een zachte rode tint */
    /* Linker rand als duidelijke rode indicator */
    border-left: 5px solid #E81E4D; 
    /* Een subtiele schaduw */
    box-shadow: 0 0 10px rgba(232, 30, 77, 0.4); 
    /* Verhoog de Z-index zodat het niet 'verdwijnt' achter andere elementen */
    position: relative; 
    z-index: 2; 
}

/* 2. Stijl voor de LIVE NU! tekst */
.live-indicator {
    display: inline-block;
    background-color: #E81E4D; /* Rood */
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
    /* Optioneel: Laat de LIVE NU! tekst knipperen */
    animation: pulse-indicator 1.5s infinite alternate; 
}

/* 3. Optionele Animatie voor een 'Live' effect */
@keyframes pulse-indicator {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* 4. Benadruk de titel binnen de live show */
.show-link.is-live .show-title strong {
    color: #E81E4D; 
}

/* 5. Zorg ervoor dat de hele kolom er nog steeds goed uitziet */
.schedule-day-column {
    /* Voeg een beetje padding toe om ruimte te maken voor de verhoogde schaduw */
    padding-bottom: 10px; 
}




/* De vaste navigatie bovenin de balk (deze beweegt NIET mee) */
.player-nav {
    /* ... (Bestaande stijlen) ... */
    padding: 20px 20px 10px 20px; /* Padding terugplaatsen op de nav */
    position: relative; 
    z-index: 10; /* Zorg dat deze boven de schermen ligt */
}

/* De wrapper die de schermen horizontaal naast elkaar houdt */
.player-screen-wrapper {
    width: 100%;
    height: calc(100% - 70px); /* 70px is ongeveer de hoogte van de .player-nav */
    position: relative;
}

/* Elk scherm (Player of Stationslijst) */
.player-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 20px 20px 20px; /* Padding voor de inhoud van het scherm */
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out; /* Animatie! */
}

/* 1. Standaard staat het Stationsscherm rechts buiten beeld */
#stationsScreen {
    transform: translateX(100%);
}

/* 2. Wanneer de wrapper de 'show-stations' klas krijgt, schuiven beide schermen */
.player-bar-stations-active #playerScreen {
    transform: translateX(-100%); /* Player scherm schuift naar links */
}

.player-bar-stations-active #stationsScreen {
    transform: translateX(0); /* Stations scherm schuift in beeld */
}

/* Zorg dat titels en andere elementen in de player-screens de juiste stijlen hebben */
.player-screen .player-title {
    /* Overschrijf de border-bottom die de nav al heeft */
    border-bottom: none; 
    margin-bottom: 20px;
}