* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            color: #333;
            min-height: 100vh;
        }

        .header {
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.95) 100%), 
                        url('/images/achtergrond.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 1.5rem;
            border-bottom: 2px solid #e9ecef;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 2rem;
            align-items: center;
        }

        .logo {
            max-width: 400px;
            height: auto;
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
        }

        .center-info {
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: center;
        }

        .year-week {
            font-size: 1.3rem;
            font-weight: bold;
            color: #e67e22;
            margin-bottom: 0.5rem;
        }

        .now-playing-text {
            font-size: 1rem;
            font-weight: bold;
            color: #2c3e50;
            background: linear-gradient(45deg, #ffd700, #ff8f00);
            padding: 0.5rem 1rem;
            border-radius: 25px;
            display: inline-block;
            margin-bottom: 0.5rem;
        }

        .audio-player {
            max-width: 300px;
        }

        .audio-player audio {
            width: 100%;
            border-radius: 10px;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
        }

        .tab-container {
            display: flex;
            justify-content: center;
            background: #fff;
            border-bottom: 2px solid #dee2e6;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .tab {
            padding: 1rem 2rem;
            background: #f8f9fa;
            border: none;
            border-top: 3px solid transparent;
            cursor: pointer;
            font-weight: bold;
            font-size: 1rem;
            transition: all 0.3s ease;
            color: #6c757d;
        }

        .tab.active {
            background: #fff;
            color: #e67e22;
            border-top-color: #e67e22;
        }

        .tab:hover:not(.active) {
            background: #e9ecef;
            color: #495057;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .legend {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin: 1.5rem;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(0,0,0,0.05);
            border-radius: 20px;
            font-size: 0.9rem;
            color: #495057;
            border: 1px solid rgba(0,0,0,0.1);
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }

        .selected-color { background: #28a745; }
        .playing-color { background: #ffc107; }
        .user-choice-color { background: #dc3545; }

        /* Desktop layout */
        .hitlist-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            padding: 1rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .hitlist {
            background: #fff;
            border-radius: 15px;
            border: 1px solid #dee2e6;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .hitlist-header {
            padding: 1rem;
            text-align: center;
            font-weight: bold;
            font-size: 1.1rem;
            color: white;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }

        .hitlist.uk .hitlist-header {
            background: linear-gradient(45deg, #3498db, #2980b9);
        }

        .hitlist.usa .hitlist-header {
            background: linear-gradient(45deg, #e74c3c, #c0392b);
        }

        .hitlist.nederland .hitlist-header {
            background: linear-gradient(45deg, #f39c12, #e67e22);
        }

        .hitlist-content {
            padding: 0.5rem;
        }

        .position-row {
            display: grid;
            grid-template-columns: 35px 1fr;
            gap: 0.5rem;
            margin-bottom: 0.3rem;
            align-items: center;
            min-height: 45px;
        }

        .position-number {
            background: #6c757d;
            color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.8rem;
        }

        .song-entry {
            padding: 0.5rem;
            border-radius: 8px;
            font-size: 0.85rem;
            line-height: 1.3;
            background: #f8f9fa;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .song-entry:hover {
            background: #e9ecef;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
/* Joker selection styling */
.song-entry.joker {
    position: relative;
    background: rgba(255, 193, 7, 0.15);
    border-color: #FFC107;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.song-entry.joker::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background-image: url('/images/joker.png');
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
/* Mobile: make sure the badge fits */
.mobile-country-item .song-entry.joker::after {
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
}


        .song-entry.selected {
            background: rgba(40, 167, 69, 0.15);
            border-color: #28a745;
            font-weight: bold;
        }

        .song-entry.user-choice {
            background: rgba(220, 53, 69, 0.15);
            border-color: #dc3545;
            font-weight: bold;
        }

        .song-entry.now-playing {
            background: rgba(255, 193, 7, 0.4);
            border-color: #ffc107;
            animation: pulse 2s infinite;
            font-weight: bold;
            box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
        }

        @keyframes pulse {
            0%, 100% { 
                box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
                transform: scale(1);
            }
            50% { 
                box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
                transform: scale(1.02);
            }
        }

        .title { 
            color: #2c3e50;
            margin-bottom: 2px;
            font-weight: bold;
            font-size: 0.9em;
        }

        .artist { 
            font-weight: normal; 
            color: #6c757d;
            font-size: 0.8em;
        }

        /* Mobile layout - posities onder elkaar */
        .mobile-position-list {
            display: none;
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
        }

        .mobile-position-row {
            background: #fff;
            border-radius: 15px;
            border: 1px solid #dee2e6;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-bottom: 0.5rem;
            overflow: hidden;
            display: grid;
            grid-template-columns: 35px 1fr;
            gap: 0.5rem;
            align-items: center;
            padding: 0.5rem;
        }

        .mobile-position-number {
            background: #6c757d;
            color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        .mobile-countries {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
        }

        .mobile-country-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 0.5rem;
            text-align: center;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .mobile-country-item:hover {
            background: #e9ecef;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .mobile-country-item.selected {
            background: rgba(40, 167, 69, 0.15);
            border-color: #28a745;
            font-weight: bold;
        }

        .mobile-country-item.user-choice {
            background: rgba(220, 53, 69, 0.15);
            border-color: #dc3545;
            font-weight: bold;
        }

        .mobile-country-item.now-playing {
            background: rgba(255, 193, 7, 0.4);
            border-color: #ffc107;
            animation: pulse 2s infinite;
            font-weight: bold;
            box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
        }

        .mobile-country-header {
            font-size: 0.7rem;
            font-weight: bold;
            margin-bottom: 0.3rem;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        .mobile-country-item.usa .mobile-country-header {
            background: linear-gradient(45deg, #e74c3c, #c0392b);
        }

        .mobile-country-item.uk .mobile-country-header {
            background: linear-gradient(45deg, #3498db, #2980b9);
        }

        .mobile-country-item.nederland .mobile-country-header {
            background: linear-gradient(45deg, #f39c12, #e67e22);
        }

        .mobile-song-info {
            padding: 0.3rem 0;
        }

        .mobile-title {
            color: #2c3e50;
            font-weight: bold;
            font-size: 0.8rem;
            margin-bottom: 0.2rem;
            line-height: 1.2;
        }

        .mobile-artist {
            color: #6c757d;
            font-size: 0.7rem;
            line-height: 1.2;
        }

        .sunday-controls {
            background: #fff;
            border-radius: 15px;
            padding: 1.5rem;
            margin: 1rem;
            text-align: center;
            border: 1px solid #dee2e6;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .form-group {
            margin: 1rem 0;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            color: #495057;
        }

        .form-group input {
            width: 100%;
            max-width: 300px;
            padding: 0.75rem;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #e67e22;
            box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
        }

        .submit-btn {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: white;
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: bold;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
        }

        .submit-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .submit-status {
            margin-top: 1rem;
            padding: 1rem;
            border-radius: 8px;
            font-weight: bold;
            display: none;
        }

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

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

        .radio-info {
            background: #fff;
            border-radius: 15px;
            padding: 1.5rem;
            margin: 1rem;
            text-align: center;
            border: 1px solid #dee2e6;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .radio-logo {
            height: 70px;
            width: auto;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
        }

        .radio-text {
            font-family: 'Arial Black', Arial, Helvetica, sans-serif;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #000000;
            text-transform: uppercase;
        }

        .radio-title {
            font-size: 1.4rem;
            margin-bottom: 0.2rem;
        }

        .radio-subtitle {
            font-size: 1.1rem;
            margin-bottom: 0.2rem;
            color: #000000;
            text-transform: none;
        }

        .radio-details {
            font-size: 1rem;
            color: #c8102e;
            text-transform: none;
        }

        .status {
            display: none;
        }

        .instructions {
            background: rgba(40, 167, 69, 0.12);
            border: 2px solid #28a745;
            border-radius: 12px;
            padding: 1rem;
            margin: 0 auto 1rem;
            max-width: 1400px;
            box-sizing: border-box;
            color: #1e7e34;
        }

        .list-info {
            background: transparent;
            border: none;
            padding: 0.25rem 1rem;
            margin: 0.5rem auto 1rem;
            max-width: 1400px;
            box-sizing: border-box;
            font-weight: 700;
            text-align: center;
        }

        /* Responsive breakpoints */
        @media (max-width: 1024px) {
            .hitlist-container {
                display: none;
            }
            
            .mobile-position-list {
                display: block;
            }
            
            .header-content {
                grid-template-columns: 1fr;
                gap: 1rem;
                text-align: center;
            }
        }

        @media (max-width: 768px) {
            .mobile-countries {
                grid-template-columns: 1fr;
                gap: 0.3rem;
            }

            .tab {
                padding: 0.8rem 1rem;
                font-size: 0.9rem;
            }

            .radio-info {
                flex-direction: column;
                gap: 1rem;
            }
        }
    
#nowPlaying{display:none}

/* --- Now Playing cards (top-right) --- */
.np-wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;justify-content:flex-end}
.np-card{position:relative;display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;color:#fff;min-width: 380px;max-width: 540px}
.np-card .art{width: 140px;height: 140px;border-radius:10px;overflow:hidden;flex:0 0  140px;background:#ffffff22}
.np-card .art img{width:100%;height:100%;object-fit:cover}
.np-card .meta{min-width:0}
.np-card .label{font-size:12px;font-weight:800;letter-spacing:.08em;background:#ffffff;color:#2c3e50;padding:2px 8px;border-radius:999px;display:inline-block;margin-bottom:6px}
.np-card .title{font-weight:800;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.np-card .artist{font-size:15px;color:#fff;opacity:.98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.np-card .play{position:absolute;right:10px;bottom:10px;border:none;border-radius:999px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer;background:#ffffff;color:#1f2937;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.np-card .stop{position:absolute;right:52px;bottom:10px;border:none;border-radius:999px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;background:#ffffff;color:#1f2937;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.np-card.ideale40{background:linear-gradient(135deg,#e74c3c,#f39c12)}
.np-card.lijstenparade{background:linear-gradient(135deg,#2e86de,#6a89cc)}
@media(max-width:1024px){.np-wrap{justify-content:center}}


/* Sticky bottom player + theme */
body{padding-bottom:92px}
#stickyPlayer{position:fixed;left:0;right:0;bottom:0;height:84px;background:#fff;border-top:1px solid #dee2e6;box-shadow:0 -4px 12px rgba(0,0,0,.08);display:flex;align-items:center;gap:12px;padding:10px 16px;z-index:9999;transition:background .25s,border-color .25s}
#stickyPlayer .art{width:72px;height:72px;border-radius:10px;background:#f1f3f5;overflow:hidden;flex:0 0 72px;display:flex;align-items:center;justify-content:center}
#stickyPlayer .art img{width:100%;height:100%;object-fit:cover}
#stickyPlayer .meta{flex:1;min-width:0}
#stickyPlayer .title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stickyPlayer .artist{font-size:13px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stickyPlayer .controls{display:flex;align-items:center;gap:8px}
#stickyPlayer .controls button{border:none;background:#f8f9fa;border:1px solid #dee2e6;border-radius:999px;width:40px;height:40px;cursor:pointer;font-size:16px}
#stickyPlayer .vol{display:flex;align-items:center;gap:8px;margin-left:8px}
#stickyPlayer .vol input[type="range"]{width:120px}
#playerBadge{font-size:12px;border:1px solid #dee2e6;padding:2px 8px;border-radius:999px;background:#f8f9fa;color:#333}
#playerSource{margin-right:8px;border:1px solid #dee2e6;background:#f8f9fa;border-radius:8px;padding:6px 8px}
#stickyPlayer.theme-usa{background:linear-gradient(180deg,#ffe8e6,#fff);border-top-color:#f5b7b1}
#stickyPlayer.theme-uk{background:linear-gradient(180deg,#e6f0ff,#fff);border-top-color:#a5c7ff}
#stickyPlayer.theme-nl{background:linear-gradient(180deg,#fff2de,#fff);border-top-color:#ffd199}


/* === Joker badge (desktop + iPhone) === */
.song-entry, .mobile-country-item { position: relative; overflow: visible; }
.song-entry.joker::after, .mobile-country-item.joker::after {
  content: "" ;
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; z-index: 3;
  background-image: url('/images/joker.png') ;
  background-repeat: no-repeat; background-size: contain;
  pointer-events: none;
}


/* === iPhone portrait overflow fixes (compact) === */
@media (orientation: portrait) and (max-width: 414px) {
  #stickyPlayer{ padding: 8px 10px; min-height: 68px; }
  #stickyPlayer .art{ width: 56px; height: 56px; }
  #stickyPlayer .title,
  #stickyPlayer .artist{ font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  #stickyPlayer .sub{ display: none ; } /* compact: hide subline on very small screens */
  #playerBadge{ font-size: 11px; padding: 2px 6px; max-width: 42vw; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #playerSource{ font-size: 12px; max-width: 44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -webkit-appearance: none; }
  #stickyPlayer .meta{ min-width: 0; }
  #stickyPlayer .vol input[type="range"]{ width: 90px; }
}


/* === Joker: gele arcering (desktop + iPhone) === */
.song-entry.joker, .mobile-country-item.joker {
  background: rgba(255, 193, 7, 0.18) ; /* zacht geel */
  border-color: #FFC107 ;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* iPhone portret: iets duidelijker accent */
@media (orientation: portrait) and (max-width: 414px) {
  .mobile-country-item.joker {
    background: rgba(255, 193, 7, 0.24) ;
    border-width: 1px;
  }
}


/* === Podcast dropdown in menubalk === */
.tab-container{ position:sticky; top:0; z-index:1000; }
.podcast-nav{ display:inline-flex; align-items:center; margin-left:.5rem; }
.podnav-btn{ border:0; background:#f8f9fa; padding:.55rem .8rem; border-radius:10px; font-weight:700; cursor:pointer;
             box-shadow:0 2px 6px rgba(0,0,0,.07); transition:transform .2s ease, box-shadow .2s ease; }
.podnav-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.podnav-dd{ position:absolute; right:0; top:calc(100% + 8px); min-width:260px; background:#fff; border:1px solid #dee2e6;
            border-radius:14px; box-shadow:0 16px 30px rgba(0,0,0,.12); padding:6px; opacity:0; visibility:hidden; transform:translateY(6px);
            transition:opacity .2s ease, transform .2s ease, visibility .2s ease; }
.podcast-nav.open .podnav-dd{ opacity:1; visibility:visible; transform:translateY(0); }
.podnav-dd a{ display:flex; justify-content:space-between; gap:.6rem; padding:.55rem .7rem; text-decoration:none; color:#223;
              border-radius:10px; font-weight:600; }
.podnav-dd a:hover{ background:#f7f8f9; }
.podnav-pill{ font-size:.75rem; padding:2px 8px; border-radius:999px; border:1px solid #e9ecef; background:#f8f9fa; color:#445; }
body.has-podnav #podcast-tab .sunday-controls{ display:none ; }


/* micro-modernization for hover / focus */
.tab{ transition: background .2s ease, color .2s ease, transform .2s ease; }
.song-entry{ transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }


/* Consistent title/artist casing and flag spacing */
#podcast-tab .song-entry .title{ text-transform: uppercase; }
#podcast-tab .song-entry .artist{ text-transform: lowercase; }
#podcast-tab .flag{ margin-right:6px; }


#podcast-tab .song-entry .title{ text-transform: uppercase; }
#podcast-tab .song-entry .artist{ text-transform: lowercase; }

/* Hide the extra podcast selector bar but keep it in DOM for functionality */
#podcast-tab .sunday-controls { display: none ; }


/* === FORCE EXTRA LARGE LOGO === */
.logo{
  max-width: 900px ;
  width: 100% ;
  height: auto ;
}




/* === iPhone portret — grotere sticky player voor leesbaarheid === */
@media (orientation: portrait) and (max-width: 430px) {
  /* Extra ruimte onderaan de pagina voor de hogere player */
  body { padding-bottom: 132px; }

  #stickyPlayer{
    height: auto;                 /* niet vastknijpen */
    min-height: 110px;            /* was 68px */
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;               /* controls op 2e regel indien nodig */
    align-items: flex-start;
    gap: 10px 12px;
  }

  /* Cover iets compacter zodat tekst meer breedte krijgt */
  #stickyPlayer .art{ width:56px; height:56px; }

  /* Tekst mag 2 regels gebruiken */
  #stickyPlayer .title{
    font-size: 15px;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #stickyPlayer .artist{
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Knoppen naar de volgende regel en wat naar links inspringen */
  #stickyPlayer .controls{
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 68px; /* ruimte voor de cover */
  }

  /* Optioneel: volumebalk verbergen op klein scherm voor extra rust */
  #stickyPlayer .vol{ display: none; }

  /* Badge/bron zonder smalle max-width */
  #playerBadge{ max-width: none; font-size: 12px; }
  #playerSource{ max-width: 100%; }
}
/* === einde iPhone-portret fix === */



/* ✅ Mobile fix: toon mobiele hitlijsten (podcast & zondag) */
@media (max-width: 1024px) {
  .mobile-position-list { display: block; }
}


/* ===========================
   Hotradio Clean Modern Theme
   Requirements:
   - Bring header background back (images/achtergrond.png)
   - Bring back colored top players + sticky player color themes
   - Remove vinyl LP + cassette/walkman (handled by removal above)
   - Make site modern/clean like reference screenshot
   - Make info bar red
   - Logo larger and balanced
   =========================== */

/* Base palette */
:root{
  --hr-red:#d61f26;        /* warm logo-rood */
  --hr-red-dark:#b31217;  /* donkerder rand */
  --hr-orange:#f39c12;    /* logo-oranje */
  --ink:#111827;
  --muted:#6b7280;
  --bg:#f4f2f2;
  --card:#ffffff;
  --border:rgba(17,24,39,.10);
  --shadow: 0 14px 34px rgba(17,24,39,.12);
  --shadow-soft: 0 10px 24px rgba(17,24,39,.10);

  --lp-accent:#3b82f6;      /* Lijstenparade accent (blue) */
  --lp-accent-2:#7c3aed;    /* blue→violet */
}

/* Light textured background like screenshot */
body{
  color: var(--ink) ;
  background:
    radial-gradient(circle at 12px 12px, rgba(0,0,0,.06) 1.2px, transparent 1.25px) 0 0 / 22px 22px,
    radial-gradient(circle at 6px 6px, rgba(0,0,0,.035) 1px, transparent 1.05px) 0 0 / 18px 18px,
    linear-gradient(180deg, #fbf8f8 0%, var(--bg) 55%, #f2efef 100%) ;
}

/* Header background back */
.header{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(248,249,250,0.92) 100%),
    url('/images/achtergrond.png') ;
  background-size: cover ;
  background-position: center ;
  background-repeat: no-repeat ;
  border-bottom: 1px solid rgba(17,24,39,.08) ;
  box-shadow: 0 6px 18px rgba(17,24,39,.08) ;
}

/* Make header layout feel like reference: logo left, content centered, players right */
.header-content{
  display:grid ;
  grid-template-columns: minmax(300px, 520px) 1fr;
  gap: 18px 22px ;
  align-items:center ;
}
@media (max-width: 1024px){
  .header-content{ grid-template-columns: 1fr ; text-align:center; }
}

/* Logo larger + clean (no pseudo ornaments) */
.logo{
  max-width: 520px ;
  width: 100% ;
  height: auto ;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.12)) ;
}
.logo-box::before, .logo-box::after{ display:none ; }

/* Tabs/info bar red */
.tab-container{
  background: linear-gradient(
    180deg,
    var(--hr-red) 0%,
    var(--hr-orange) 100%
  ) ;
  border-bottom: 0 ;
  box-shadow: 0 8px 18px rgba(200,16,46,.20) ;
}
.tab{
  background: rgba(255,255,255,.10) ;
  color: rgba(255,255,255,.92) ;
  border-top: 3px solid transparent ;
  border-radius: 999px ;
  margin: 10px 6px ;
  padding: .8rem 1.2rem ;
}
.tab.active{
  background: #fff ;
  color: var(--hr-red) ;
  border-top-color: transparent ;
  box-shadow: 0 10px 18px rgba(0,0,0,.12) ;
}
.tab:hover:not(.active){
  background: rgba(255,255,255,.18) ;
  color: #fff ;
}

/* Cards: cleaner */
.hitlist, .mobile-position-row, .sunday-controls, .radio-info, .instructions{
  border-radius: 18px ;
  border: 1px solid var(--border) ;
  box-shadow: var(--shadow-soft) ;
}

/* Instructions: no green block, make it a neutral info card */
.instructions{
  background: rgba(255,255,255,.86) ;
  color: var(--ink) ;
  border-color: rgba(17,24,39,.10) ;
}

/* Legend chips */
.legend-item{
  background: rgba(255,255,255,.78) ;
  border: 1px solid rgba(17,24,39,.10) ;
  border-radius: 999px ;
}

/* Top players: bring colors back (as in index47), but modernized */
.np-card{
  border-radius: 18px ;
  border: 1px solid rgba(17,24,39,.10) ;
  box-shadow: var(--shadow) ;
  overflow:hidden;
}
.np-card .label{
  background: rgba(255,255,255,.88) ;
  border: 1px solid rgba(17,24,39,.12) ;
  color: var(--ink) ;
}
/* Hotradio player = hotradio red (in your HTML this is .np-card.ideale40 labelled Hotradio Classics) */
.np-card.ideale40{
  background: linear-gradient(135deg, var(--hr-red), #ff4d6d) ;
}
/* Lijstenparade different color */
.np-card.lijstenparade{
  background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-2)) ;
}
/* Buttons on top players */
.np-card .play, .np-card .stop{
  background: rgba(255,255,255,.92) ;
  border: 1px solid rgba(0,0,0,.08) ;
  box-shadow: 0 10px 18px rgba(0,0,0,.18) ;
}

/* Sticky bottom player: keep dynamic theming from index47 (theme-usa/uk/nl) + modern look */
#stickyPlayer{
  border-top: 0 ;
  box-shadow: 0 -14px 30px rgba(17,24,39,.12) ;
  border-radius: 18px 18px 0 0;
  margin: 0 10px 10px;
  left: 10px ;
  right: 10px ;
}

/* Ensure theme classes still win */
#stickyPlayer.theme-usa{
  background: linear-gradient(180deg, #ffe8e6, #ffffff) ;
  border-top: 1px solid #f5b7b1 ;
}
#stickyPlayer.theme-uk{
  background: linear-gradient(180deg, #e6f0ff, #ffffff) ;
  border-top: 1px solid #a5c7ff ;
}
#stickyPlayer.theme-nl{
  background: linear-gradient(180deg, #fff2de, #ffffff) ;
  border-top: 1px solid #ffd199 ;
}

/* Make sticky controls feel modern */
#stickyPlayer .controls button{
  background: rgba(255,255,255,.92) ;
  border: 1px solid rgba(17,24,39,.12) ;
  box-shadow: 0 10px 18px rgba(17,24,39,.10) ;
}
#playerBadge{
  background: rgba(200,16,46,.10) ;
  border-color: rgba(200,16,46,.18) ;
  color: var(--hr-red-dark) ;
  font-weight: 800 ;
}
#playerSource{
  background: rgba(255,255,255,.92) ;
}

/* Radio info bar: red */
.radio-info{
  background: linear-gradient(
    135deg,
    var(--hr-red),
    var(--hr-orange)
  ) ;
  color: #fff ;
  border-color: rgba(255,255,255,.22) ;
}
.radio-info .radio-text,
.radio-info .radio-subtitle,
.radio-info .radio-title,
.radio-info .radio-details{
  color:#fff ;
}
.radio-info .radio-details{
  opacity:.92;
}


/* ===========================
   Hotradio Classics – softer unified palette
   - Larger header
   - Less opvallende menubalk
   - Lighter overall feel (still Hotradio red)
   =========================== */
:root{
  --hr-red-600:#c8102e;
  --hr-red-700:#a10016;
  --hr-ink:#111827;
  --hr-muted:#6b7280;
  --hr-bg:#f4f5f7;
  --hr-card:#ffffff;
  --hr-card-2:rgba(255,255,255,.92);
  --hr-border-soft:rgba(17,24,39,.10);
  --hr-shadow-soft: 0 10px 26px rgba(17,24,39,.10);
}

/* Background: light + subtle Hotradio glow (less heavy) */
body{
  color: var(--hr-ink) ;
  background:
    radial-gradient(900px 480px at 18% 10%, rgba(200,16,46,.10), transparent 62%),
    radial-gradient(760px 420px at 82% 16%, rgba(255,122,0,.08), transparent 62%),
    linear-gradient(180deg, #fafafa 0%, var(--hr-bg) 55%, #f0f1f4 100%) ;
}

/* Header bigger + calmer */
.header{
  padding: 2.4rem 1.2rem 1.2rem ; /* bigger header */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.90) 0%, rgba(248,249,250,0.90) 100%),
    url('/images/achtergrond.png') ;
  background-size: cover ;
  background-position: center ;
  background-repeat: no-repeat ;
  border-bottom: 1px solid var(--hr-border-soft) ;
  box-shadow: 0 6px 18px rgba(17,24,39,.08) ;
}
.header-content{
  background: var(--hr-card-2) ;
  border: 1px solid rgba(17,24,39,.08) ;
  border-radius: 24px ;
  padding: 1.25rem 1.25rem 1.1rem ;
  box-shadow: var(--hr-shadow-soft) ;
  backdrop-filter: blur(10px);
}

/* Logo a bit bigger */
.logo{
  max-width: 600px ;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.12)) ;
}

/* Header small accents */
.year-week{ color: var(--hr-red-600) ; }
.now-playing-text{
  background: rgba(200,16,46,.10) ;
  color: var(--hr-red-700) ;
  border: 1px solid rgba(200,16,46,.18) ;
  text-shadow: none ;
}

/* Menubalk: less heavy + cohesive */
.tab-container{
  background: rgba(255,255,255,.88) ;
  border-bottom: 1px solid var(--hr-border-soft) ;
  box-shadow: 0 4px 12px rgba(17,24,39,.08) ;
  padding: .5rem .75rem ;
  gap: .4rem ;
}
.tab{
  background: transparent ;
  color: #374151 ;
  border: 1px solid transparent ;
  box-shadow: none ;
  border-radius: 999px ;
  padding: .75rem 1.1rem ;
  letter-spacing: .01em;
}
.tab:hover:not(.active){
  background: rgba(17,24,39,.06) ;
  color: var(--hr-ink) ;
  transform: translateY(-1px);
}
.tab.active{
  background: rgba(200,16,46,.12) ;
  color: var(--hr-red-600) ;
  border: 1px solid rgba(200,16,46,.22) ;
}

/* Chips/cards: keep clean on light bg */
.legend-item{
  background: rgba(255,255,255,.92) ;
  color: #374151 ;
  border: 1px solid var(--hr-border-soft) ;
}
.hitlist, .mobile-position-row, .sunday-controls, .radio-info, .instructions{
  background: rgba(255,255,255,.94) ;
  border: 1px solid var(--hr-border-soft) ;
  box-shadow: 0 10px 22px rgba(17,24,39,.10) ;
}
.position-number{ background: #111827 ; }

/* Keep Now-Playing cards readable on light bg */
.np-card{
  box-shadow: 0 14px 30px rgba(17,24,39,.16) ;
}

/* Sticky player: softer controls */
#stickyPlayer{
  background: rgba(255,255,255,.92) ;
  border-top: 1px solid var(--hr-border-soft) ;
  box-shadow: 0 -10px 24px rgba(17,24,39,.10) ;
}
#stickyPlayer .controls button{
  background: rgba(17,24,39,.04) ;
  border: 1px solid rgba(17,24,39,.10) ;
}


/* === User request: larger header/logo + Hotradio styling + rename 0511 === */

/* Bigger header spacing */
.header{
  padding: 3rem 1.5rem 1.8rem ;
}

/* Much larger logo in header */
.logo{
  max-width: 720px ;
  width: 100% ;
  height: auto ;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18)) ;
}

/* Make the top Hotradio player match Hotradio logo vibe */
.np-card.ideale40{
  background: linear-gradient(135deg,#c8102e 0%, #8b0d1c 100%) ;
  border: 1px solid rgba(255,255,255,.25) ;
}

.np-card.ideale40 .label{
  background:#ffffff ;
  color:#c8102e ;
  font-weight:900 ;
  letter-spacing:.06em ;
  text-transform:uppercase ;
}

.np-card.ideale40 .play,
.np-card.ideale40 .stop{
  background:#ffffff ;
  color:#c8102e ;
  font-weight:900 ;
}

/* Also keep sticky badge aligned with Hotradio branding */
#playerBadge{
  background: rgba(200,16,46,.10) ;
  border-color: rgba(200,16,46,.18) ;
  color: #8b0d1c ;
  font-weight: 900 ;
}


/* === FINAL OVERRIDE (must be last): make header logo REALLY big === */
.header .logo-box{ max-width: 980px ; width: 100% ; margin: 0 ; }
.header .logo{
  max-width: 980px ;
  width: 100% ;
  height: auto ;
}
/* Allow the grid column to grow with the logo */
.header .header-content{
  grid-template-columns: minmax(420px, 980px) 1fr ;
}
@media (max-width: 1024px){
  .header .header-content{ grid-template-columns: 1fr ; }
  .header .logo-box{ margin: 0 auto ; }
  .header .logo{ max-width: 94vw ; }
}


/* === FINAL SPACING FIX: keep logo big, but REMOVE extra white space in header === */
.header{
  padding: 1.0rem 1.0rem 0.8rem ; /* was made huge earlier */
}
.header .header-content{
  padding: 0.6rem 0.8rem ;       /* tighter white card */
  gap: 10px 14px ;               /* less empty space */
  border-radius: 22px ;
}
.header .logo-box{ margin: 0 ; }
.header .logo{ display:block; margin: 0 ; }

/* Reduce extra vertical spacing caused by center-info stack */
.header .center-info{ gap: .5rem ; }
.header .now-playing-container{ margin: 0 ; }
.header .audio-player{ margin: 0 ; }

/* Make sure the logo column doesn't create extra vertical whitespace */
@media (min-width: 1025px){
  .header .header-content{ align-items: center ; }
}

/* Mobile: keep compact as well */
@media (max-width: 1024px){
  .header{ padding: .8rem .8rem .6rem ; }
  .header .header-content{ padding: .6rem .7rem ; }
}


/* === v7: extra compacte header + vervaagde platenwinkel foto in witte card === */

/* Minder ruimte boven/onder het witte blok */
.header{
  padding: .22rem .55rem .18rem ;
}

/* Witte card strak om inhoud */
.header .header-content{
  position: relative ;
  overflow: hidden ;
  padding: .18rem .30rem .12rem ;
  gap: 6px 10px ;
  border-radius: 22px ;

  /* behoud witte look, maar transparant genoeg voor achtergrondfoto */
  background: rgba(255,255,255,.90) ;
  border: 1px solid rgba(17,24,39,.08) ;
}

/* Achtergrondfoto in de card (vervaagd) */
.header .header-content::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/images/platenwinkel.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: scale(1.06); /* blur-randjes wegwerken */
  opacity: .18;          /* subtiel */
  pointer-events: none;
  z-index: 0;
}

/* Extra witte overlay zodat tekst super leesbaar blijft */
.header .header-content::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.92));
  z-index:0;
  pointer-events:none;
}

/* Zet echte content boven de achtergrond */
.header .header-content > *{
  position: relative;
  z-index: 1;
}

/* Logo iets kleiner (zoals je vroeg), maar strak */
.header .logo-box{ max-width: 920px ; width:100% ; margin:0 ; }
.header .logo{
  max-width: 920px ;
  width: 100% ;
  height: auto ;
  display:block ;
  transform: scale(1.0);
  margin: -10px 0 -6px 0 ;
}

/* Grid: geef logo genoeg ruimte zonder extra hoogte */
@media (min-width: 1025px){
  .header .header-content{
    grid-template-columns: minmax(520px, 980px) 1fr ;
    align-items: center ;
  }
}

/* Reduce extra verticale spacing rond players */
.header .center-info{ gap: .30rem ; margin:0 ; }
.header .now-playing-container{ margin:0 ; }
.header .np-wrap{ gap: 10px ; }

/* Mobile compact */
@media (max-width: 1024px){
  .header{ padding: .20rem .45rem .16rem ; }
  .header .header-content{ padding: .18rem .28rem .12rem ; }
  .header .logo{
    max-width: 94vw ;
    margin: -8px auto -6px auto ;
  }
  .header .logo-box{ margin:0 auto ; }
}


/* === v8: afbeelding (lijsten + cassette) in het witte vlak i.p.v. full-width in de header === */

/* Forceer header zonder full-width afbeelding */
.header{
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(248,249,250,0.92) 100%) ;
  background-image: none ;
}

/* Haal de vervaagde platenwinkel-laag uit de witte card (als die nog actief is) */
.header .header-content::before,
.header .header-content::after{
  content: none ;
}

/* Stapel logo + header-afbeelding netjes boven elkaar */
.header .logo-box{
  display: flex ;
  flex-direction: column ;
  align-items: flex-start ;
  gap: 6px ;
}

/* De afbeelding met de lijsten/cassette binnen het witte vlak */
.header .header-visual{
  width: 100%;
  max-width: 980px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.header .header-visual img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Mobile: iets compacter */
@media (max-width: 1024px){
  .header .logo-box{ align-items: center ; }
  .header .header-visual{ max-width: 94vw; border-radius: 12px; }
}


/* === v9: afbeelding vaag op de achtergrond van het volledige witte vlak === */

/* Witte kaart behoudt exact dezelfde afmetingen */
.header .header-content{
  position: relative ;
  overflow: hidden ;
}

/* Vage achtergrondafbeelding over het VOLLEDIGE vlak */
.header .header-content::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/images/achtergrond.png');
  background-size:cover;
  background-position:center;
  filter: blur(10px);
  transform: scale(1.05);
  opacity:.22;
  pointer-events:none;
  z-index:0;
}

/* Extra witte waas voor leesbaarheid */
.header .header-content::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.85);
  pointer-events:none;
  z-index:0;
}

/* Zorg dat inhoud boven de achtergrond ligt */
.header .header-content > *{
  position: relative;
  z-index: 1;
}


/* === v10: fix – achtergrondafbeelding echt zichtbaar maken (nog steeds subtiel) === */

/* Zet de vage foto duidelijker neer */
.header .header-content::before{
  content: "" ;
  position: absolute ;
  inset: 0 ;
  background-image: url('/images/achtergrond.png') ;
  background-size: cover ;
  background-position: center ;
  background-repeat: no-repeat ;
  filter: blur(6px) ;
  transform: scale(1.06) ;
  opacity: .38 ;
  pointer-events: none ;
  z-index: 0 ;
}

/* Witte waas iets lichter zodat de foto zichtbaar blijft */
.header .header-content::after{
  content: "" ;
  position: absolute ;
  inset: 0 ;
  background: rgba(255,255,255,.68) ;
  pointer-events: none ;
  z-index: 0 ;
}


/* === v11: scherpere achtergrondafbeelding in header-content === */

.header .header-content::before{
  content:"" ;
  position:absolute ;
  inset:0 ;
  background-image:url('/images/achtergrond.png') ;
  background-size:cover ;
  background-position:center ;
  background-repeat:no-repeat ;

  /* veel minder vaag */
  filter: blur(2px) saturate(1.05) contrast(1.05) ;
  transform: scale(1.02) ;

  /* beter zichtbaar */
  opacity:.45 ;

  pointer-events:none ;
  z-index:0 ;
}

/* nog lichtere witte overlay */
.header .header-content::after{
  content:"" ;
  position:absolute ;
  inset:0 ;
  background: rgba(255,255,255,.55) ;
  pointer-events:none ;
  z-index:0 ;
}


/* === v14: podcast-keuze thumbnails gelijk formaat en netjes naast elkaar === */

/* Container waar de podcast-afbeeldingen in staan */
#podcast-tab .sunday-controls,
#podcast-tab .podcast-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Algemene styling voor podcast/lijsten afbeeldingen */
#podcast-tab img{
  width: 140px ;
  height: 140px ;
  object-fit: cover ;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover effect */
#podcast-tab img:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* Mobiel: iets kleiner maar nog steeds gelijk */
@media (max-width: 768px){
  #podcast-tab img{
    width: 110px ;
    height: 110px ;
  }
}


/* === v15: verberg datum bij podcast-lijstenafbeeldingen === */

/* Veel gebruikte datum/label elementen verbergen binnen podcast-tab */
#podcast-tab .date,
#podcast-tab .podcast-date,
#podcast-tab .meta,
#podcast-tab time,
#podcast-tab small{
  display: none ;
}


/* === v16: WhatsApp floating button === */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 110px; /* boven sticky player */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  z-index: 9999;
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.3);
}

/* Mobile iets kleiner */
@media (max-width: 768px){
  .whatsapp-float{
    width: 48px;
    height: 48px;
    font-size: 24px;
    bottom: 120px;
  }
}


/* Podcast desktop: keep same visual style as other tabs, but force equal row heights */
#podcast-tab #podcastStatus{display:none ;}
#podcast-tab #podcastYearWeek{display:none ;}

/* ensure classic 3-column desktop layout remains visible */
@media (min-width: 1025px){
  #podcast-tab #podcastDesktop.hitlist-container{
    display:grid ;
    grid-template-columns:repeat(3, 1fr) ;
    gap:1rem ;
  }
  #podcast-tab #podcastMobilePositionList{display:none ;}
}

/* fixed row heights so 40/39/38 align across all 3 columns */
#podcastDesktop .hitlist-content{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
#podcastDesktop .position-row{
  display:grid;
  grid-template-columns:35px 1fr;
  gap:.5rem;
  align-items:center;
  min-height:45px;
}
#podcastDesktop .song-entry{
  min-height:45px;
  height:45px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
#podcastDesktop .song-entry .title,
#podcastDesktop .song-entry .artist{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  line-height:1.2;
}
#podcastDesktop .song-entry .title{
  font-size:.9em;
}
#podcastDesktop .song-entry .artist{
  font-size:.8em;
}

/* keep info button from changing row height */
#podcastDesktop .song-entry .info-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
}
#podcastDesktop .song-entry{
  position:relative;
  padding-right:34px;
}


#trackInfoModal .trackinfo-summary-labels,
#trackInfoModal .trackinfo-meta-labels,
#trackInfoModal .summary-labels,
#trackInfoModal .stats-labels,
#trackInfoModal .trackinfo-first-entry,
#trackInfoModal .trackinfo-total-weeks,
#trackInfoModal .trackinfo-best-overall,
#trackInfoModal [data-field="entry_date"],
#trackInfoModal [data-field="weeks_total"],
#trackInfoModal [data-field="best_overall"],
#trackInfoModal .ti-entry-date,
#trackInfoModal .ti-total-weeks,
#trackInfoModal .ti-best-overall{
  display:none ;
}
#trackInfoModal .trackinfo-week-positions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
#trackInfoModal .trackinfo-week-positions .wkbox{
  background:#f8f9fa;
  border:1px solid #dee2e6;
  border-radius:12px;
  padding:10px 12px;
  text-align:center;
}
#trackInfoModal .trackinfo-week-positions .wklabel{
  font-size:12px;
  color:#6c757d;
  margin-bottom:4px;
}
#trackInfoModal .trackinfo-week-positions .wkvalue{
  font-size:20px;
  font-weight:700;
  color:#223;
}


.track-info-youtube{
  margin-top:18px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.track-info-youtube h3{
  margin:0 0 12px;
  font-size:1rem;
  color:#1f2937;
}
.track-info-youtube-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:14px;
  overflow:hidden;
  background:#111827;
}
.track-info-youtube-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.track-info-youtube-note{
  color:#6b7280;
  font-size:.9rem;
}
.track-info-cover{
  margin-top:18px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.track-info-cover h3{
  margin:0 0 12px;
  font-size:1rem;
  color:#1f2937;
}
.track-info-cover-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
  border-radius:14px;
  overflow:hidden;
  min-height:320px;
}
.track-info-cover-frame img{
  width:min(100%, 420px);
  aspect-ratio:1 / 1;
  object-fit:cover;
  display:block;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(15,23,42,.14);
}


/* Trackinfo: datums op 1 regel + landkleuren in stijl van de voorpagina */
.track-info-stat.is-date .track-info-stat-value,
.track-info-stat-value{
  white-space:nowrap ;
  word-break:normal ;
  overflow-wrap:normal ;
}
.track-info-stat.is-date .track-info-stat-value{
  font-size:1.05rem ;
  letter-spacing:.01em;
}
.track-info-card.country-usa{
  background:linear-gradient(180deg,#fff8f6 0%,#ffffff 100%) ;
  border-color:#f0c4bc ;
  box-shadow:0 10px 24px rgba(217,72,53,.08) ;
}
.track-info-card.country-uk{
  background:linear-gradient(180deg,#f5fbff 0%,#ffffff 100%) ;
  border-color:#bfdcf1 ;
  box-shadow:0 10px 24px rgba(47,134,199,.08) ;
}
.track-info-card.country-nederland{
  background:linear-gradient(180deg,#fffaf2 0%,#ffffff 100%) ;
  border-color:#f3d3a3 ;
  box-shadow:0 10px 24px rgba(239,155,23,.10) ;
}
.track-info-card.country-usa h3{color:#c83f2d ;}
.track-info-card.country-uk h3{color:#2f86c7 ;}
.track-info-card.country-nederland h3{color:#dd8a10 ;}
.track-info-card h3 .flag{margin-right:.35rem;}
.track-info-card.country-usa .track-info-stat{
  border-color:#f0cfc8 ;
  background:#fff ;
}
.track-info-card.country-uk .track-info-stat{
  border-color:#cfe3f3 ;
  background:#fff ;
}
.track-info-card.country-nederland .track-info-stat{
  border-color:#f4dbb6 ;
  background:#fff ;
}
.track-info-card.country-usa .track-info-stat-label{color:#9d4a3f ;}
.track-info-card.country-uk .track-info-stat-label{color:#456d8a ;}
.track-info-card.country-nederland .track-info-stat-label{color:#9b6a22 ;}

/* Podcast-tab uiterlijk gelijk trekken met de andere tabbladen */
#podcast-tab .instructions{
  background:#fff ;
  border:1px solid #dee2e6 ;
  color:#2c3e50 ;
}
#podcast-tab .song-entry .title,
#podcast-tab .song-entry .artist,
#podcastDesktop .song-entry .title,
#podcastDesktop .song-entry .artist,
#podcastMobilePositionList .mobile-title,
#podcastMobilePositionList .mobile-artist{
  text-transform:none ;
  letter-spacing:normal ;
}
#podcast-tab .sunday-controls{
  background:#fff ;
  border:1px solid #dee2e6 ;
  border-radius:15px ;
  box-shadow:0 4px 15px rgba(0,0,0,0.1) ;
  padding:1rem 1.25rem ;
}
#podcast-tab .hitlist .hitlist-header{font-size:1.1rem ;}
#podcast-tab .mobile-country-header.usa{background:linear-gradient(45deg,#e74c3c,#c0392b) ;}
#podcast-tab .mobile-country-header.uk{background:linear-gradient(45deg,#3498db,#2980b9) ;}
#podcast-tab .mobile-country-header.nederland{background:linear-gradient(45deg,#f39c12,#e67e22) ;}

/* iPad/tablet: podcast-tab zelfde responsieve gedrag als de andere tabs */
@media (max-width: 1024px){
  #podcast-tab #podcastDesktop.hitlist-container{display:none ;}
  #podcast-tab #podcastMobilePositionList{display:block ;}
}
@media (min-width: 1025px){
  #podcast-tab #podcastDesktop.hitlist-container{
    display:grid ;
    grid-template-columns:repeat(3, 1fr) ;
    gap:1rem ;
  }
  #podcast-tab #podcastMobilePositionList{display:none ;}
}


#podcastGallery{display:none ;}
#podcast-tab .podcast-rebuild-wrap{max-width:1400px;margin:0 auto;padding:0 1rem 1rem;}
#podcast-tab .podcast-toolbar{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid #dee2e6;border-radius:16px;padding:1rem 1.1rem;box-shadow:0 4px 15px rgba(0,0,0,.08);margin:0 0 1rem;}
#podcast-tab .podcast-toolbar .left{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;flex:1 1 680px}
#podcast-tab .podcast-toolbar label{font-weight:700;color:#2c3e50}
#podcast-tab .podcast-toolbar select{min-width:320px;max-width:100%;padding:.7rem .9rem;border-radius:12px;border:1px solid #d8dee4;background:#fff;flex:1 1 320px}
#podcast-tab .podcast-toolbar button{border:none;border-radius:999px;padding:.7rem 1rem;font-weight:700;cursor:pointer;background:#f8f9fa;border:1px solid #dee2e6}
#podcast-tab .podcast-status{font-size:.92rem;color:#6c757d;flex:0 1 auto}
#podcast-tab .podcast-hero{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:20px;padding:1rem 1.1rem;box-shadow:0 8px 24px rgba(0,0,0,.08);margin-bottom:1rem}
#podcast-tab .podcast-cover{width:120px;height:120px;border-radius:16px;overflow:hidden;background:#f1f3f5;box-shadow:0 10px 22px rgba(0,0,0,.12)}
#podcast-tab .podcast-cover img{width:100%;height:100%;object-fit:cover}
#podcast-tab .podcast-meta h3{font-size:1.9rem;line-height:1.1;margin:0 0 .45rem;color:#243b5a}
#podcast-tab .podcast-meta .subline{font-size:1.02rem;color:#4b5563;margin:.1rem 0}
#podcast-tab .podcast-meta .desc{font-size:1rem;color:#6b7280;margin-top:.25rem}
#podcast-tab .podcast-empty{background:#fff;border:1px dashed #ced4da;border-radius:16px;padding:2rem;text-align:center;color:#6c757d}

/* Podcast-tab op tablet visueel gelijk aan de andere tabbladen */
@media (max-width: 1180px){
  #podcast-tab .podcast-toolbar{padding:.95rem 1rem}
  #podcast-tab .podcast-toolbar .left{flex:1 1 100%}
  #podcast-tab .podcast-status{width:100%;text-align:left}
  #podcast-tab .podcast-hero{grid-template-columns:96px 1fr;gap:.9rem;padding:.9rem 1rem}
  #podcast-tab .podcast-cover{width:96px;height:96px;border-radius:14px}
  #podcast-tab .podcast-meta h3{font-size:1.45rem}
  #podcast-tab .podcast-meta .subline{font-size:.98rem}
  #podcast-tab .podcast-meta .desc{font-size:.95rem}
}

@media (max-width: 768px){
  #podcast-tab .podcast-hero{grid-template-columns:1fr;text-align:center}
  #podcast-tab .podcast-cover{margin:0 auto}
  #podcast-tab .podcast-toolbar select{min-width:0;width:100%}
  #podcast-tab .podcast-toolbar .left{flex-basis:100%}
  #podcast-tab .podcast-status{text-align:center}
}


.song-entry.has-track-info,
.mobile-country-item.has-track-info{
  padding-right: 2.4rem ;
}
.track-info-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:26px;
  height:26px;
  border:none;
  border-radius:999px;
  background:#ffffff;
  color:#1f2937;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  z-index:5;
}
.track-info-btn:hover{ transform:translateY(-1px); }
.track-info-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  display:none; align-items:center; justify-content:center; z-index:12000;
  padding:20px;
}
.track-info-overlay.open{ display:flex; }
.track-info-modal{
  position:relative; width:min(1180px, 100%); max-height:90vh; overflow:auto;
  background:linear-gradient(180deg,#fffdf9 0%,#ffffff 100%); border-radius:28px; box-shadow:0 24px 64px rgba(0,0,0,.28);
  padding:28px; border:1px solid rgba(230,126,34,.16);
}
.track-info-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border:none;
  border-radius:999px; background:#fff7ed; color:#d35400; font-size:28px; line-height:1; cursor:pointer;
  box-shadow:0 3px 10px rgba(230,126,34,.16);
}
.track-info-header{
  display:grid;
  grid-template-columns:minmax(320px, 44%) minmax(0, 56%);
  gap:24px;
  align-items:start;
  margin-bottom:20px;
}
.track-info-media-col{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.track-info-main-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.track-info-title{
  font-size:2rem;
  line-height:1.05;
  font-weight:900;
  color:#24324a;
  margin-bottom:2px;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.track-info-artist{
  font-size:1.08rem;
  color:#5f6f86;
  text-transform:none;
  margin-bottom:2px;
}
.track-info-grid{ display:block; margin-top:12px; }
.track-info-country-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:2px;
}
.track-info-card{
  background:linear-gradient(180deg,#ffffff 0%,#fff8ef 100%);
  border:1px solid #f3d5b5;
  border-radius:20px;
  padding:14px 16px;
  box-shadow:0 8px 20px rgba(230,126,34,.08);
}
.track-info-card h3{
  margin:0 0 10px;
  font-size:1rem;
  color:#24324a;
  font-weight:900;
}
.track-info-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-bottom:0;
}
.track-info-stat{
  background:#fff;
  border-radius:14px;
  padding:10px 10px;
  border:1px solid #f1d7bf;
  text-align:center;
  min-width:0;
}
.track-info-stat-label{
  font-size:.74rem;
  line-height:1.2;
  color:#8a6a48;
  margin-bottom:6px;
  font-weight:800;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}
.track-info-stat-value{
  font-size:1.55rem;
  line-height:1.1;
  font-weight:900;
  color:#1f2f46;
  white-space:normal;
  word-break:break-word;
}
.track-info-media-card{
  background:linear-gradient(180deg,#fff 0%,#fff8ef 100%);
  border:1px solid #f3d5b5;
  border-radius:24px;
  padding:14px;
  box-shadow:0 10px 24px rgba(230,126,34,.10);
}
.track-info-media-frame{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:#eef2f7;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.track-info-media-frame.video{aspect-ratio:16/9;}
.track-info-media-frame.cover{aspect-ratio:1/1;max-width:100%;}
.track-info-media-frame iframe,.track-info-media-frame img{display:block;width:100%;height:100%;border:0;object-fit:cover;}
.track-info-chart-wrap{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid #e5edf7;
  border-radius:24px;
  padding:16px;
  box-shadow:0 10px 24px rgba(36,50,74,.06);
}
.track-info-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px;font-weight:700;color:#50627d;}
.track-info-legend-item{display:flex;align-items:center;gap:8px;}
.track-info-legend-swatch{width:14px;height:14px;border-radius:999px;display:inline-block;}
.track-info-chart{ width:100%; height:auto; display:block; }
.track-info-axis-text{ font-size:11px; fill:#6b7280; }
.track-info-chart-label{ font-size:11px; fill:#374151; }
.track-info-chart-pos{ font-size:11px; fill:#111827; font-weight:700; }
.track-info-empty,.track-info-loading,.track-info-error{
  background:#fff7ed;
  border:1px solid #f3d5b5;
  color:#a15200;
  border-radius:18px;
  padding:18px;
  text-align:center;
}
.track-info-error{ color:#b91c1c; }
@media (max-width: 1180px){
  .track-info-header{grid-template-columns:1fr;}
}
@media (max-width: 920px){
  .track-info-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .track-info-modal{padding:18px;}
}
@media (max-width: 560px){
  .track-info-stats{grid-template-columns:1fr 1fr;}
  .track-info-title{font-size:1.5rem;}
  .track-info-stat-value{font-size:1.25rem;}
}
.track-info-media-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:12px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.track-info-media-label{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 10px;
  padding:4px 10px; border-radius:999px; background:#fff7ed; color:#9a3412;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
}
.track-info-media-frame{
  position:relative; width:100%; aspect-ratio: 1 / 1; border-radius:14px; overflow:hidden;
  background:#111827;
}
.track-info-media-frame.video{ aspect-ratio: 16 / 10; }
.track-info-media-frame iframe,
.track-info-media-frame img{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.track-info-media-frame img{ object-fit:cover; }
.track-info-media-note{
  margin-top:10px; color:#6b7280; font-size:.84rem; line-height:1.4;
}
@media (max-width: 900px){
  .track-info-header, .track-info-grid{ grid-template-columns:1fr; }
  .track-info-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .track-info-country-grid{ grid-template-columns:1fr; }
  .track-info-title{ font-size:1.5rem; padding-right:34px; }
  .track-info-header{ gap:16px; }
  .track-info-media-col{ max-width:420px; }
}
@media (max-width: 560px){
  .track-info-stats{ grid-template-columns:1fr; }
}


#podcastDesktop .hitlist-content{display:flex;flex-direction:column;gap:.3rem;}
#podcastDesktop .position-row{display:grid;grid-template-columns:35px 1fr;gap:.5rem;align-items:center;min-height:45px;}
#podcastDesktop .song-entry{min-height:45px;display:flex;flex-direction:column;justify-content:center;}
#podcastMobilePositionList .mobile-position-row{display:grid;grid-template-columns:35px 1fr;gap:.5rem;align-items:start;}
#podcastDesktop .hitlist, #podcastDesktop .hitlist-content{overflow:visible;}


/* === Player casing to match hitlist style === */
.np-card .title { text-transform: uppercase; }
.np-card .artist { text-transform: lowercase; }
#stickyPlayer .title { text-transform: uppercase; }
#stickyPlayer .artist { text-transform: lowercase; }


/* Subline for list + position in players */
.np-card .sub { font-size: 12px; opacity: .9; margin-bottom: 6px; }
#stickyPlayer .sub { font-size: 12px; opacity: .9; }