/* =========================================================== */
/* POWER RADIO - MOBILE FIX                                    */
/* Laadt als LAATSTE. Overschrijft alleen mobiele problemen.   */
/* =========================================================== */

/* ==================== 1. ALGEMEEN ==================== */
@media (max-width: 768px) {
    /* Body padding - realistisch maken */
    body {
        padding-top: 80px !important;
    }
    
    /* Voorkom horizontaal scrollen */
    html, body {
        overflow-x: hidden !important;
    }
    
    /* Headers kleiner */
    .page-header h1,
    .hero-banner h1 {
        font-size: 1.6rem !important;
    }
    
    .pr-recent-heading,
    .pr-agenda-heading,
    #weatherHeading,
    #aboutHeading,
    #contactHeading,
    .section-title {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 70px !important;
    }
}

/* ==================== 2. HEADER ==================== */
@media (max-width: 768px) {
    /* Header compact */
    #wb_header {
        height: auto !important;
        padding: 8px 0 !important;
    }
    
    .header-container {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 0 12px !important;
    }
    
    .header-left {
        gap: 8px !important;
    }
    
    /* Logo kleiner */
    .logo-container img,
    .logo img {
        width: 110px !important;
        max-width: 110px !important;
    }
    
    /* Klok verbergen (neemt te veel ruimte) */
    .clickable-clock,
    .header-clock,
    .clock-combined {
        display: none !important;
    }
    
    /* Darkmode toggle kleiner */
    .pr-darkmode-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
    
    /* Menu compact - alleen iconen + korte tekst */
    .main-menu {
        width: auto !important;
        order: 0 !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .main-menu ul {
        gap: 2px !important;
        flex-wrap: nowrap !important;
    }
    
    .main-menu a {
        padding: 6px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    
    .main-menu a i {
        font-size: 13px !important;
    }
    
    /* Verberg de tekst naast iconen op zeer kleine schermen */
    .main-menu a span,
    .main-menu a .menu-text {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .logo-container img,
    .logo img {
        width: 90px !important;
        max-width: 90px !important;
    }
    
    .main-menu a {
        padding: 5px 6px !important;
        font-size: 10px !important;
    }
}

/* ==================== 3. TICKER ==================== */
@media (max-width: 768px) {
    .pr-ticker-container {
        margin-top: 12px !important;
        border-radius: 12px !important;
    }
    
    .pr-ticker-track {
        height: 60px !important;
    }
    
    .pr-ticker-item {
        padding: 0 14px !important;
    }
    
    .pr-ticker-text {
        font-size: 12px !important;
    }
    
    .pr-ticker-cat {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
    
    /* Verberg de niet-essentiële ticker-knoppen */
    #prSpeedUp,
    #prSpeedDown,
    #prRefreshAll,
    #prModeratorBtn {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .pr-ticker-container {
        margin-top: 8px !important;
    }
    
    .pr-ticker-track {
        height: 50px !important;
    }
    
    .pr-ticker-text {
        font-size: 11px !important;
    }
}

/* ==================== 4. WEBPLAYER ==================== */
@media (max-width: 768px) {
    #webplayer-container {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }
    
    #webplayer-container .pr-player-wrapper {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }
    
    /* Covers-grid: huidige track bovenaan, vorige/volgende ernaast */
    #webplayer-container .pr-covers-row {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "main main"
            "prev next" !important;
        gap: 12px !important;
    }
    
    #webplayer-container .pr-main-cover {
        grid-area: main !important;
        order: -1 !important;
    }
    
    #webplayer-container .pr-side-cover:first-child {
        grid-area: prev !important;
    }
    
    #webplayer-container .pr-side-cover:last-child {
        grid-area: next !important;
    }
    
    #webplayer-container .pr-main-cover .pr-cover-image {
        max-width: 140px !important;
        margin: 0 auto !important;
    }
    
    #webplayer-container .pr-side-cover .pr-cover-image {
        max-width: 90px !important;
        margin: 0 auto !important;
    }
    
    #webplayer-container .pr-current-title {
        font-size: 1.2rem !important;
    }
    
    #webplayer-container .pr-current-artist {
        font-size: 0.9rem !important;
    }
    
    #webplayer-container .pr-side-info {
        font-size: 0.7rem !important;
        max-width: 100% !important;
    }
    
    /* Controls: play-knop gecentreerd */
    #webplayer-container .pr-controls-row {
        padding-right: 0 !important;
        justify-content: center !important;
        gap: 24px !important;
    }
    
    #webplayer-container .pr-play-btn {
        width: 60px !important;
        height: 60px !important;
    }
    
    #webplayer-container .pr-play-btn svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Request-knop */
    #webplayer-container .pr-request-btn-main {
        padding: 11px 18px !important;
        font-size: 0.85rem !important;
        max-width: 260px !important;
    }
    
    /* Volume-slider */
    #webplayer-container .pr-volume-row {
        max-width: 100% !important;
        gap: 12px !important;
        margin: 20px auto 16px !important;
    }
    
    /* Header van webplayer */
    #webplayer-container .pr-nowplaying-header {
        padding-bottom: 12px !important;
        margin-bottom: 16px !important;
        gap: 8px !important;
    }
    
    #webplayer-container .pr-nowplaying-title {
        font-size: 0.95rem !important;
    }
    
    /* Status-indicator verbergen op mobiel */
    #webplayer-container .pr-player-header-status {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #webplayer-container .pr-main-cover .pr-cover-image {
        max-width: 120px !important;
    }
    
    #webplayer-container .pr-side-cover .pr-cover-image {
        max-width: 75px !important;
    }
    
    #webplayer-container .pr-current-title {
        font-size: 1.05rem !important;
    }
    
    #webplayer-container .pr-current-artist {
        font-size: 0.85rem !important;
    }
    
    #webplayer-container .pr-controls-row {
        gap: 18px !important;
    }
    
    #webplayer-container .pr-play-btn {
        width: 54px !important;
        height: 54px !important;
    }
}

/* ==================== 5. WACHTRIJ ==================== */
@media (max-width: 768px) {
    #pr-wachtrij {
        margin: 12px auto 20px !important;
        padding: 0 12px !important;
    }
    
    .pr-wr-container {
        padding: 14px 12px 12px !important;
    }
    
    .pr-wr-heading {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .pr-wr-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .pr-wr-cover {
        max-width: 80px !important;
    }
    
    .pr-wr-title {
        font-size: 10px !important;
    }
    
    .pr-wr-artist {
        font-size: 9px !important;
    }
    
    .pr-wr-rank {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .pr-wr-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    
    .pr-wr-cover {
        max-width: 70px !important;
    }
    
    .pr-wr-title {
        font-size: 9px !important;
    }
    
    .pr-wr-artist {
        font-size: 8px !important;
    }
}

/* ==================== 6. TOP 5 ==================== */
@media (max-width: 768px) {
    #pr-top-requests,
    #pr-month-top-requests {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }
    
    .pr-top-container {
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }
    
    .pr-top-heading {
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .pr-top-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* 5e item in het midden */
    .pr-top-grid .pr-top-item:nth-child(5) {
        grid-column: 1 / -1 !important;
        max-width: 50% !important;
        margin: 0 auto !important;
    }
    
    .pr-top-cover {
        max-width: 100px !important;
    }
    
    .pr-top-title {
        font-size: 11px !important;
    }
    
    .pr-top-artist {
        font-size: 10px !important;
    }
    
    .pr-top-rank-1 { width: 32px !important; height: 32px !important; font-size: 14px !important; }
    .pr-top-rank-2 { width: 28px !important; height: 28px !important; font-size: 13px !important; }
    .pr-top-rank-3 { width: 26px !important; height: 26px !important; font-size: 12px !important; }
    .pr-top-rank-4 { width: 24px !important; height: 24px !important; font-size: 11px !important; }
    .pr-top-rank-5 { width: 22px !important; height: 22px !important; font-size: 10px !important; }
    
    .pr-top-medal {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .pr-top-container {
        padding: 14px 10px !important;
    }
    
    .pr-top-heading {
        font-size: 14px !important;
    }
    
    .pr-top-grid {
        gap: 8px !important;
    }
    
    .pr-top-cover {
        max-width: 85px !important;
    }
}

/* ==================== 7. WEERBERICHT ==================== */
@media (max-width: 768px) {
    #wb_weather {
        padding: 24px 16px !important;
        margin: 30px auto !important;
    }
    
    .weather-forecast-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .weather-day-card {
        padding: 16px 10px !important;
    }
    
    .weather-icon-large {
        font-size: 32px !important;
    }
}

@media (max-width: 480px) {
    .weather-forecast-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== 8. RECENT / AGENDA ==================== */
@media (max-width: 768px) {
    #pr-recent,
    #pr-agenda {
        padding: 24px 16px !important;
        margin: 30px auto !important;
    }
    
    .pr-recent-grid,
    .pr-agenda-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== 9. MODALS ==================== */
@media (max-width: 768px) {
    .pr-modal {
        padding: 18px !important;
        max-width: 95% !important;
    }
    
    .pr-modal-title {
        font-size: 1.1rem !important;
    }
    
    .pr-modal-body {
        max-height: 70vh !important;
    }
    
    #prRequestModal .pr-modal {
        max-width: 95% !important;
    }
}

/* ==================== 10. FOOTER ==================== */
@media (max-width: 768px) {
    #footer {
        padding: 30px 16px !important;
        margin-top: 40px !important;
    }
    
    #footerImage,
    .footer-logo img {
        width: 140px !important;
        max-width: 140px !important;
    }
    
    .social-links,
    .footer-social {
        gap: 12px !important;
    }
    
    .social-link {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }
}

/* ==================== 11. BUTTONS & TOUCH ==================== */
@media (max-width: 768px) {
    /* Zorg dat knoppen minimaal 44x44 zijn (Apple/Google richtlijn) */
    .pr-btn-add,
    .pr-request-btn,
    .pr-btn-modal,
    .submit-btn,
    #contactButton,
    .pr-req-btn-cancel,
    .pr-req-btn-submit {
        min-height: 44px !important;
        font-size: 14px !important;
    }
    
    /* Voorkom zoom bij focus op inputs (iOS) */
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* ==================== 12. PROGRAMMERING & CONTACT ==================== */
@media (max-width: 768px) {
    #main-content {
        padding: 20px 0 40px 0 !important;
    }
    
    .current-show-widget {
        padding: 18px 16px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
    
    .show-name {
        font-size: 1.3rem !important;
    }
    
    .listen-live-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 20px !important;
    }
    
    .info-card,
    .hero-section,
    .today-section,
    .wervings-blok {
        padding: 24px 16px !important;
    }
    
    .info-card h3,
    .today-content h2 {
        font-size: 1.3rem !important;
    }
    
    .contact-card {
        padding: 20px 16px !important;
    }
    
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
    
    .faq-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== 13. LIGHT MODE ==================== */
@media (max-width: 768px) {
    body.light-mode {
        padding-top: 80px !important;
    }
}

@media (max-width: 480px) {
    body.light-mode {
        padding-top: 70px !important;
    }
}