@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");

:root {
    --primary-color: #FFD700; /* Geel accent */
    --background-color: #1e1e1e;
    --neu-shadow-light: rgba(255, 255, 255, 0.1);
    --neu-shadow-dark: rgba(0, 0, 0, 0.4);
    --text-color: #e0e0e0;
    --text-muted-color: #a0a0a0;
}

body {
    font-family: "Poppins", sans-serif;
    color: var(--text-color);
    margin: 0;
    background-color: var(--background-color);
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
}

.main-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* --- AANGEPASTE HEADER (NU DE BANNER) --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px; /* Meer padding voor banner-gevoel */
    margin-bottom: 30px;
    position: relative; /* Nodig voor pseudo-elementen */
    border-radius: 20px; /* Zelfde als neumorphic cards */
    overflow: hidden; /* Houdt pseudo-elementen binnen de radius */
    min-height: 200px; /* Geeft het wat hoogte */
    box-sizing: border-box;
    z-index: 1; /* Zorgt dat inhoud boven pseudo-elementen staat */
}

/* Vervaging (blur) als achterste laag */
header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* +++ GEWIJZIGD: Gebruikt nu een CSS variabele +++ */
    /* --- FALLBACK PAD GEWIJZIGD --- */
    background-image: var(--header-bg-image, url("content/P1050356-scaled.jpg"));
    background-size: cover;
    background-position: center;
    filter: blur(var(--header-blur, 4px)); /* De vervaging (NU VARIABEL) */
    z-index: -2; /* Achter de gloed en inhoud */
    transform: scale(1.05); /* Voorkomt harde randen door blur */
}

/* AANGEPAST: Donkere overlay (in stijl met pagina) als middelste laag */
header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gebruikt de achtergrondkleur van de site met transparantie */
    background-color: var(--header-overlay-color, rgba(30, 30, 30, 0.7)); /* (NU VARIABEL) */
    z-index: -1; /* Tussen blur en inhoud */
    transition: background-color 0.3s ease; /* Toevoeging voor soepele overgang */
}
/* --- EINDE AANGEPASTE HEADER --- */

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo {
    height: 75px; /* Was 50px */
    width: 75px; /* Was 50px */
    border-radius: 50%;
    object-fit: cover;
    transition:
        height 0.3s,
        width 0.3s;
}

/* Slogan aangepast voor leesbaarheid */
.slogan {
    font-size: 1.1em;
    font-weight: 300;
    color: var(--text-color); /* AANGEPAST: Wit voor contrast */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); /* AANGEPAST: Sterkere schaduw voor leesbaarheid */
}

/* Mobiel menu-icoon aangepast voor leesbaarheid */
.mobile-menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color); /* AANGEPAST: Wit voor contrast */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); /* AANGEPAST: Sterkere schaduw voor leesbaarheid */
    z-index: 1001;
}

/* --- NIEUWE ALGEMENE LINK STIJL --- */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--text-color);
    text-decoration: underline;
}
/* --- EINDE NIEUWE STIJL --- */

.nav-links {
    display: flex;
    gap: 20px;
}

/* Nav-links aangepast voor leesbaarheid */
.nav-links a {
    text-decoration: none;
    color: var(--text-color); /* AANGEPAST: Wit voor contrast */
    font-weight: 500;
    transition: color 0.3s;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); /* AANGEPAST: Sterkere schaduw voor leesbaarheid */
}

.nav-links a:hover {
    color: var(--primary-color);
    text-decoration: none; /* Zorgt dat nav-links geen underline krijgen bij hover */
}

.content-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
}

.neumorphic-card {
    background-color: var(--background-color);
    border-radius: 20px;
    padding: 30px;
    box-shadow:
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
    min-width: 0;
    overflow-wrap: break-word; /* FIX 1: Voor contact-kaart URLs */
}

.player-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.player-card {
    text-align: center;
}

#album-art {
    width: 75%;
    max-width: 280px;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 15px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow:
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light);
}

#track-title {
    font-size: 1.5em;
    font-weight: 600;
    margin: 10px 0 5px;
}

#track-artist {
    font-size: 1em;
    color: var(--text-muted-color);
    margin-bottom: 25px;
}

#track-title,
#track-artist {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

#play-pause-btn {
    background-color: var(--primary-color);
    border: none;
    color: var(--background-color); /* AANGEPAST: Was white */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition:
        transform 0.2s,
        box-shadow 0.2s,
        width 0.2s,
        height 0.2s,
        font-size 0.2s;
    box-shadow:
        5px 5px 10px var(--neu-shadow-dark),
        -5px -5px 10px var(--neu-shadow-light);
}

#play-pause-btn:active {
    box-shadow:
        inset 5px 5px 10px var(--neu-shadow-dark),
        inset -5px -5px 10px var(--neu-shadow-light);
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.2s;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 5px;
    background: var(--neu-shadow-dark);
    border-radius: 5px;
    outline: none;
    transition: width 0.2s;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
}

.next-song-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid var(--neu-shadow-dark);
    text-align: left;
}
.next-song-container img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}
.next-song-info {
    line-height: 1.3;
}
.next-song-info .label {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-muted-color);
}
.next-song-info .title {
    font-weight: 600;
    font-size: 0.9em;
}
.next-song-info .artist {
    font-size: 0.8em;
    color: var(--text-muted-color);
}

.info-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

h2 {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 25px;
    margin-bottom: 10px;
}

.data-list {
    list-style: none;
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
}

.data-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--neu-shadow-dark);
    gap: 15px;
}

.data-list li:last-child {
    border-bottom: none;
}

.data-list img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    flex-shrink: 0;
}

.info {
    flex-grow: 1;
    min-width: 0;
}
.info .title {
    font-weight: 600;
    white-space: normal; /* AANGEPAST: Sta wrapping toe */
    overflow-wrap: break-word; /* AANGEPAST: Breek lange woorden */
}
.info .subtitle {
    color: var(--text-muted-color);
    font-size: 0.9em;
    white-space: normal; /* AANGEPAST: Sta wrapping toe */
    overflow-wrap: break-word; /* AANGEPAST: Breek lange woorden */
}

.time-played {
    display: block;
    font-size: 0.9em;
    color: var(--text-muted-color);
    margin-top: 4px;
}

#schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.schedule-day {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.schedule-day h4 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary-color);
}

.schedule-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    border-left: 3px solid var(--primary-color);
}

.schedule-item .title {
    font-weight: 600;
}

.schedule-item .subtitle {
    font-size: 0.9em;
    color: var(--text-muted-color);
    white-space: normal;
    overflow-wrap: break-word;
}

/* --- STYLING CONTACTFORMULIER (SELECTORS GECORRIGEERD) --- */
/* Alle #contact-form zijn hier veranderd in #contact */
#contact form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#contact label {
    font-weight: 500;
    color: var(--text-muted-color);
    margin-bottom: -10px; /* Label dichter bij input */
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--background-color);
    border: none;
    border-radius: 10px;
    box-shadow:
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light);
    color: var(--text-color);
    font-family: "Poppins", sans-serif;
    font-size: 1em;
    box-sizing: border-box;
}

#contact input[type="text"]:focus,
#contact input[type="email"]:focus,
#contact textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

#contact button[type="submit"] {
    align-self: flex-start;
    padding: 12px 25px;
    background-color: var(--primary-color);
    color: var(--background-color); /* AANGEPAST: Was white */
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    box-shadow:
        5px 5px 10px var(--neu-shadow-dark),
        -5px -5px 10px var(--neu-shadow-light);
    margin-top: 10px;
}

#contact button[type="submit"]:hover {
    transform: translateY(-2px);
}

#contact button[type="submit"]:active {
    box-shadow:
        inset 5px 5px 10px var(--neu-shadow-dark),
        inset -5px -5px 10px var(--neu-shadow-light);
    transform: translateY(0);
}
/* --- EINDE STYLING CONTACTFORMULIER --- */

/* --- BEGIN STYLING VERZOEKJES --- */
#requests input[type="text"],
#requests input[type="number"],
#requests select {
    padding: 12px 15px;
    background-color: var(--background-color);
    border: none;
    border-radius: 10px;
    box-shadow:
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light);
    color: var(--text-color);
    font-family: "Poppins", sans-serif;
    font-size: 1em;
    box-sizing: border-box;
}

#requests input[type="text"]:focus,
#requests input[type="number"]:focus,
#requests select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

#requests input[type="text"] {
    width: 100%;
}

.request-status-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: var(--text-muted-color);
    min-height: 200px;
}

/* Verberg standaard, JS toont ze */
#error,
#noResults {
    display: none;
}

#songListContainer {
    border: 1px solid var(--neu-shadow-dark);
    border-radius: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    margin-top: 20px;
}

/* Pas .data-list styling aan voor verzoekknop */
#songList.data-list {
    max-height: none; /* Container scrolled al */
}
#songList.data-list li {
    justify-content: space-between; /* Duw knop naar rechts */
    gap: 15px;
}

.request-btn {
    padding: 10px 15px;
    background-color: var(--primary-color);
    color: var(--background-color); /* AANGEPAST: Was white */
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    box-shadow:
        5px 5px 10px var(--neu-shadow-dark),
        -5px -5px 10px var(--neu-shadow-light);
    flex-shrink: 0; /* Voorkom dat knop krimpt */
    white-space: nowrap;
}

.request-btn:hover {
    transform: translateY(-2px);
}

.request-btn:active {
    box-shadow:
        inset 5px 5px 10px var(--neu-shadow-dark),
        inset -5px -5px 10px var(--neu-shadow-light);
    transform: translateY(0);
}

.request-btn:disabled {
    background-color: var(--text-muted-color);
    box-shadow:
        inset 2px 2px 4px var(--neu-shadow-dark),
        inset -2px -2px 4px var(--neu-shadow-light);
    color: var(--neu-shadow-dark);
    cursor: not-allowed;
    transform: none;
}

#paginationControls {
    /* display: none; Standaard, JS toont dit */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-size: 0.9em;
    color: var(--text-muted-color);
    margin-top: 20px;
}

.pagination-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

#paginationControls button {
    padding: 8px 12px;
    background-color: var(--background-color);
    color: var(--text-color);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        5px 5px 10px var(--neu-shadow-dark),
        -5px -5px 10px var(--neu-shadow-light);
}

#paginationControls button:hover {
    color: var(--primary-color);
}

#paginationControls button:disabled {
    box-shadow:
        inset 2px 2px 4px var(--neu-shadow-dark),
        inset -2px -2px 4px var(--neu-shadow-light);
    color: var(--neu-shadow-dark);
    cursor: not-allowed;
}

#paginationControls #goToPageBtn {
    background-color: var(--primary-color);
    color: var(--background-color); /* AANGEPAST: Was white */
}

#paginationControls input[type="number"] {
    width: 60px;
    padding: 8px;
    font-size: 0.9em;
    text-align: center;
}

#paginationControls select {
    padding: 8px;
    font-size: 0.9em;
}

@media (max-width: 600px) {
    #paginationControls {
        flex-direction: column;
        align-items: stretch;
    }
    .pagination-group {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* --- BEGIN NIEUWE MOBIELE FIX VOOR VERZOEKJES-LIJST --- */
    #songList.data-list li {
        flex-wrap: wrap; /* Sta wrapping toe */
        justify-content: flex-start; /* Lijn links uit */
    }

    #songList.data-list li .info {
        flex-grow: 1; /* Laat info-div groeien naast de afbeelding */
    }

    #songList.data-list li .request-btn {
        flex-basis: 100%; /* Forceer knop naar nieuwe regel */
        margin-top: 15px; /* Voeg ruimte toe boven de knop */
        text-align: center; /* Centreer tekst in de knop */
    }

    /* VERWIJDERD: De onderstaande CSS-regel is overbodig geworden
    omdat de basisstijlen .info .title en .info .subtitle
    nu standaard wrapping toestaan.
    */
    /*
    .info .title,
    .info .subtitle {
        white-space: normal; 
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: break-word; 
    }
    */
    /* --- EINDE NIEUWE MOBIELE FIX --- */
}

/* Toast Notificatie */
#toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary-color);
    color: var(--background-color); /* AANGEPAST: Was white */
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    pointer-events: none;
}

#toast.show {
    opacity: 1;
    transform: translateY(0);
}

#toast.error {
    background-color: #e74c3c; /* Duidelijk rood voor errors */
    color: white; /* Error toast terug naar wit voor leesbaarheid op rood */
}
/* --- EINDE STYLING VERZOEKJES --- */


/* --- +++ NIEUWE STIJLEN: PODCAST/TERUGLUISTEREN +++ --- */
#podcast .data-list {
    max-height: 450px; /* Meer hoogte dan de geschiedenis-lijst */
    overflow-y: auto;
}

/* Override de .data-list li styling om knoppen toe te staan */
#podcast .data-list li {
    justify-content: space-between;
    flex-wrap: wrap; /* Sta wrapping toe op mobiel */
    gap: 15px;
}

#podcast .data-list li .info {
    flex-grow: 1;
    min-width: 100px; /* Zorg dat het niet te smal wordt */
}

/* Stijl voor de knoppen-container */
#podcast .episode-controls {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Stijl voor de afspeel/download knoppen */
#podcast .episode-btn {
    padding: 10px 12px;
    background-color: var(--primary-color);
    color: var(--background-color);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 5px 5px 10px var(--neu-shadow-dark), -5px -5px 10px var(--neu-shadow-light);
}

#podcast .episode-btn:hover {
    transform: translateY(-2px);
}

#podcast .episode-btn:active {
     box-shadow: inset 5px 5px 10px var(--neu-shadow-dark), inset -5px -5px 10px var(--neu-shadow-light);
    transform: translateY(0);
}

/* Download knop een andere (minder belangrijke) stijl geven */
#podcast .episode-btn.download-btn {
    background-color: var(--background-color);
    color: var(--text-color);
}

#podcast .episode-btn:disabled {
    background-color: var(--text-muted-color);
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
    cursor: not-allowed;
    transform: none;
}

/* Zorg dat de intro-tekst ook de WYSIWYG links goed verwerkt */
.podcast-intro {
    overflow-wrap: break-word;
}

/* +++ NIEUW BLOK: STYLING VOOR PODCAST PAGINATIE +++ */
.podcast-pagination-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-size: 0.9em;
    color: var(--text-muted-color);
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    border: 1px solid var(--neu-shadow-dark);
}

.podcast-pagination-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* Voor mobiel */
}

.podcast-pagination-controls label {
    font-weight: 500;
}

.podcast-pagination-controls .podcast-select {
    padding: 8px 12px;
    background-color: var(--background-color);
    border: none;
    border-radius: 10px;
    box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
    color: var(--text-color);
    font-family: "Poppins", sans-serif;
    font-size: 1em;
}

.podcast-pagination-controls .podcast-page-btn {
    padding: 8px 12px;
    background-color: var(--background-color);
    color: var(--text-color);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 5px 5px 10px var(--neu-shadow-dark), -5px -5px 10px var(--neu-shadow-light);
}
.podcast-pagination-controls .podcast-page-btn:hover {
    color: var(--primary-color);
}
.podcast-pagination-controls .podcast-page-btn:disabled {
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
    color: var(--neu-shadow-dark);
    cursor: not-allowed;
}
/* +++ EINDE NIEUW BLOK +++ */
/* --- +++ EINDE NIEUWE STIJLEN +++ --- */


/* --- FOOTER STYLING --- */
footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    color: var(--text-muted-color);
    font-size: 0.9em;
    border-top: 1px solid var(--neu-shadow-dark);
}

footer p {
    margin: 0;
    line-height: 1.5;
}
/* --- EINDE FOOTER STYLING --- */

/* --- BEGIN AANGEPASTE SCROLLBAR STIJLEN --- */

/* Voor Firefox */
html {
    scrollbar-width: thin;
    /* [1] Duim-kleur, [2] Track-kleur */
    scrollbar-color: var(--primary-color) var(--background-color);
}

/* Voor WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px; /* Breedte van de verticale scrollbar */
    height: 10px; /* Hoogte van de horizontale scrollbar */
}

::-webkit-scrollbar-track {
    background: var(--background-color); /* Achtergrond van de 'goot' */
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color); /* De gele accentkleur */
    border-radius: 20px; /* Zorgt voor ronde hoeken, passend bij je design */
    border: 2px solid var(--background-color); /* Creëert een klein randje in de achtergrondkleur */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #FFEA00; /* Een iets lichtere tint geel bij hover */
}

/* --- EINDE AANGEPASTE SCROLLBAR STIJLEN --- */

@media (min-width: 769px) {
    .header-logo {
        height: 120px; /* Was 70px */
        width: 120px; /* Was 70px */
    }
}

/* --- BEGIN TOEGEVOEGDE MOBIELE SPELER STIJLEN (BASE) --- */
/* --- NIEUWE STIJLEN VOOR MOBIELE SPELERBALK (GECORRIGEERD) --- */
.mobile-track-info-group {
    display: none; /* Alleen de info-groep is verborgen op desktop */
    align-items: center;
    gap: 10px;
}

.mobile-controls-group {
    display: flex; /* De control-groep is WEL zichtbaar op desktop */
    align-items: center;
    gap: 30px; /* Gebruik de desktop-gap van 30px */
}

#mobile-album-art {
    width: 45px;
    height: 45px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0; /* Voorkomt dat de art ingedrukt wordt */
}

/* Styling voor de nieuwe mobiele 'now playing' info */
#mobile-now-playing {
    /* display: none; -> wordt nu geregeld door de parent */
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 0; /* BELANGRIJK: voor text-overflow */
    text-align: left;
    margin-right: 0; /* Verwijder margin, we gebruiken 'gap' op de parent */
}

#mobile-track-title,
#mobile-track-artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Voegt '...' toe als tekst te lang is */
}

#mobile-track-title {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-color);
}

#mobile-track-artist {
    font-size: 0.8em;
    color: var(--text-muted-color);
}
/* --- EINDE NIEUWE STIJLEN --- */
/* --- EINDE TOEGEVOEGDE MOBIELE SPELER STIJLEN (BASE) --- */

@media (max-width: 900px) {
    /* --- AANPASSING VOOR MOBIELE VOLGORDE (FIX) --- */
    /* We gebruiken 'grid' (was al 1-koloms) en wijzen de volgorde
       van de rijen expliciet toe. Dit breekt de 'position: fixed' 
       van de spelerbalk niet. */
    .content-grid {
        grid-template-columns: 1fr;
        /* display: flex; -> Verwijderd */
        /* flex-direction: column-reverse; -> Verwijderd */
    }

    /* Plaats de info-kolom (Over ons, Nieuws) als EERSTE rij */
    .info-column {
        grid-row: 1;
    }

    /* Plaats de player-kolom (Speler, Recent) als TWEEDE rij */
    .player-column {
        grid-row: 2;
    }
    /* --- EINDE AANPASSING --- */

    /* --- BEGIN AANGEPASTE PLAYER STIJLEN (MOBiel) --- */
    
    /* --- START NIEUWE FOOTER FIX --- */
    /* Voeg 80px marge toe aan de footer om ruimte te maken voor de sticky player */
    footer {
        margin-bottom: 80px;
    }
    /* --- EINDE NIEUWE FOOTER FIX --- */

    .player-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--background-color);
        box-shadow: 0 -5px 15px var(--neu-shadow-dark);
        z-index: 1000;

        /* AANGEPAST: Slankere balk */
        padding: 10px 15px;
        height: 70px; /* Nette, vaste hoogte */

        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        gap: 10px; /* Ruimte tussen info- en control-groep */
    }

    /* 1. Toon de nieuwe groepen */
    .mobile-track-info-group {
        display: flex; /* Override de 'display: none' van desktop */
    }
    
    .mobile-controls-group {
        gap: 10px; /* GECORRIGEERD: Override de 30px desktop gap */
    }

    /* 2. Info-groep mag groeien en tekst afknippen */
    .mobile-track-info-group {
        flex-grow: 1;
        min-width: 0; /* Essentieel voor text-overflow */
    }

    /* 3. Control-groep krimpt niet */
    .mobile-controls-group {
        flex-shrink: 0;
    }

    /* 4. Verklein de Play/Pauze knop */
    #play-pause-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    /* 5. Verberg de Volume slider op mobiel (AANGEPAST) */
    .volume-control {
        /* gap: 8px; */ /* Niet meer nodig */
        display: none; /* Verbergt de hele volumebediening */
    }
    input[type="range"] {
        width: 70px; /* Maak de slider korter */
    }
    /* --- EINDE AANGEPASTE PLAYER STIJLEN --- */
}

@media (max-width: 768px) {
    /* Pas header padding en hoogte aan voor mobiel */
    header {
        min-height: 150px;
        padding: 20px;
    }

    /* --- VERWIJDERD BLOK ---
       Het blok dat hier stond en header::after aanpaste, is
       verwijderd zodat de admin-instelling leidend is.
       --- EINDE VERWIJDERD BLOK --- */

    .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 250px;
        height: 100%;
        background-color: #2c2c2c; /* Behoud donkere achtergrond voor leesbaarheid menu */
        padding-top: 80px;
        text-align: center;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    /* Aangepaste stijlen voor links in uitgeklapt menu */
    .nav-links.active a {
        color: var(--text-muted-color); /* Terug naar originele kleur */
        text-shadow: none; /* Geen schaduw nodig op donkere bg */
    }

    .nav-links.active a:hover {
        color: var(--primary-color);
    }
    /* Einde aanpassing */

    .nav-links.active {
        display: flex;
        transform: translateX(0);
    }

    /* --- BEGIN FIX VOOR MOBIEL MENU ICOON --- */
    .mobile-menu-icon {
        display: block;
        position: fixed; /* Toegevoegd: Maakt het icoon 'sticky' */
        top: 20px; /* Toegevoegd: Plaatst het 20px van de bovenkant */
        right: 20px; /* Toegevoegd: Plaatst het 20px van de rechterkant */
        /* z-index: 1001; was al correct ingesteld in de basisstijl */
    }
    /* --- EINDE FIX --- */

    /* --- BEGIN FIX VOOR MOBIELE FOOTER UITLIJNING --- */
    /* De 'margin-bottom' wordt geërfd van de 900px query */
    footer {
        text-align: left;
        /* Een beetje padding zodat de tekst niet tegen de rand plakt */
        padding-left: 20px;
        padding-right: 20px;
    }
    /* --- EINDE FIX --- */
    
    /* --- +++ NIEUWE MOBIELE FIX VOOR PODCAST CONTROLS +++ --- */
    .podcast-pagination-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .podcast-pagination-group {
        justify-content: center;
    }
    .podcast-pagination-controls .podcast-select {
        width: 100%; /* Maak dropdowns volledig breed */
    }
    #podcast-page-buttons {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* Knoppen aan zijkant, tekst in midden */
        text-align: center;
    }
    /* --- +++ EINDE NIEUWE FIX +++ --- */

    /* --- HIER IS DE WIJZIGING --- */
    @media (max-width: 400px) {
        .slogan {
            font-size: 0.9em;
        }
        /*
        .header-logo {
            height: 40px;
            width: 40px;
        }
        */ /* <-- DIT BLOK IS VERWIJDERD/UITGECOMMENTARIEERD */

        /* --- TOEGEVOEGDE FIX VOOR KLEINE SCHERMEN --- */
        /* De regel die de slider verborg (`display: none;`) 
           is hier verwijderd, zodat het volume altijd werkt. */
        .volume-control input[type="range"] {
            /* display: none; <-- VERWIJDERD */
        }
        /* --- EINDE TOEGEVOEGDE FIX --- */
    }
    /* --- EINDE WIJZIGING --- */
}

/* ----------------------------------------------------------- */
/* --- +++ NIEUW BLOK: SPELER ZICHTBAARHEID & LAYOUT +++ --- */
/* ----------------------------------------------------------- */

/* --- 1. Helper-klassen voor blokken (Nu en Straks, Recent) --- */

/* Standaard (mobiele weergave, max-width: 900px) */
.hide-on-mobile {
    display: none !important;
}

/* +++ HIER IS DE WIJZIGING +++ */
.hide-on-desktop {
    /* De 'display: block !important;' regel is hier verwijderd. */
    /* Dit voorkomt dat het de 'display: flex' van de .next-song-container overschrijft. */
}
/* +++ EINDE WIJZIGING +++ */

/* Desktop weergave (min-width: 901px) */
@media (min-width: 901px) {
    .hide-on-mobile {
        display: block !important;
    }
    .hide-on-desktop {
        display: none !important;
    }
}


/* --- 2. Layout-regels o.b.v. <body> class --- */

/* --- Modus 'bottom_bar' (ALLEEN op Desktop) --- */
@media (min-width: 901px) {
    
    /* --- HIER IS DE WIJZIGING --- */
    /* VERWIJDERD: De 1-koloms layout. We behouden de zijkolom. */
    /*
    body.desktop-player-bottom_bar .content-grid {
        grid-template-columns: 1fr;
    }
    */
    
    /* Verberg ALLEEN de .player-card, niet de hele .player-column */
    body.desktop-player-bottom_bar .player-card {
        display: none;
    }
    /* --- EINDE WIJZIGING --- */
    
    /* Dwing de 'mobiele' spelerbalk-stijlen (fixed position, etc.) */
    body.desktop-player-bottom_bar .player-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--background-color);
        box-shadow: 0 -5px 15px var(--neu-shadow-dark);
        z-index: 1000;
        padding: 10px 15px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        gap: 10px;
        margin-top: 0; /* Override de desktop margin */
    }
    
    /* Toon de mobiele info (die standaard verborgen is op desktop) */
    body.desktop-player-bottom_bar .mobile-track-info-group {
        display: flex;
        flex-grow: 1;
        min-width: 0;
    }
    
    /* Pas de control-groep aan */
    body.desktop-player-bottom_bar .mobile-controls-group {
        flex-shrink: 0;
        gap: 10px; /* Gebruik mobiele gap */
    }
    
    /* Herstel de play-knop naar mobiel formaat */
    body.desktop-player-bottom_bar #play-pause-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    /* TOON de volume-slider weer (die op mobiel verborgen is) */
    body.desktop-player-bottom_bar .volume-control {
        display: flex;
    }
    
    /* --- START NIEUWE FOOTER FIX (DESKTOP) --- */
    /* De oude .main-container padding is verwijderd. */
    /* body.desktop-player-bottom_bar .main-container {
        padding-bottom: 80px;
    } */

    /* Voeg 80px marge toe aan de footer om ruimte te maken voor de sticky player */
    body.desktop-player-bottom_bar footer {
        margin-bottom: 80px;
    }
    /* --- EINDE NIEUWE FOOTER FIX (DESKTOP) --- */
}

/* --- Modus 'disabled' (Mobiel & Desktop) --- */

/* Verberg de zijkolom (desktop) */
body.desktop-player-disabled .player-column {
    display: none;
}
/* Zorg voor 1-koloms layout (desktop) */
body.desktop-player-disabled .content-grid {
    grid-template-columns: 1fr;
}
/* Verberg de spelerbalk (zowel mobiel als desktop-bar) */
body.desktop-player-disabled .player-controls {
    display: none !important;
}
/* Reset de padding die voor de mobiele balk was */
body.desktop-player-disabled .main-container {
    padding-bottom: 20px; /* Reset naar standaard padding */
}

/* --- DEFINITIEVE FOOTER FIX (VOOR DISABLED MODUS) --- */
/* Als de speler uit is, moet de footer margin ook weg */
body.desktop-player-disabled footer {
    margin-bottom: 0px !important; /* !important om de 900px/901px queries te overschrijven */
}