/* =============================================
   MOBILE RESPONSIVE FORCE FIX 
   Add this at the VERY END of your style.css
   ============================================= */

/* 1. FORCE HIDE TEXT LABELS 
   We use !important and specific paths to ensure they hide on all phones */
@media only screen and (max-width: 900px) {
    .controls-center-group .control-btn span, 
    .controls-center-group .nav-btn span,
    .control-group .control-btn span {
        display: none !important;
    }

    /* Force buttons to fit in one row */
    .controls-center-group {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }

    /* Increase touch target size */
    .control-btn, .nav-btn, .eps-btn {
        padding: 12px 8px !important;
        min-width: auto !important;
    }
    
    /* Ensure icons stay visible */
    .control-btn svg, .nav-btn svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
    }

    /* Force hide volume slider (Software volume) */
    .volume-popup, 
    .volume-control input[type="range"] {
        display: none !important;
    }
}

/* 2. LANDSCAPE ORIENTATION FIX (Youtube style) 
   Fixes issue where bottom bar gets cut off on sideways phones */
@media only screen and (max-width: 900px) and (orientation: landscape) {
    .player-overlay {
        padding: 0 20px !important; /* Safe area padding */
    }

    /* Shrink the bottom bar height */
    .bottom-controls {
        padding-bottom: 5px !important;
        margin-bottom: 0 !important;
    }

    /* Make dropdowns scrollable so they don't get cut off */
    .dropdown-menu {
        bottom: 40px !important;
        max-height: 150px !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Move the Play button up slightly */
    .center-controls {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* 3. CENTER BUTTON SCALING (Play/Pause) */
@media only screen and (max-width: 600px) {
    .play-btn svg {
        width: 45px !important;
        height: 45px !important;
    }
    .center-btn {
        width: 35px !important;
        height: 35px !important;
    }
    .center-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Fix Header Text cutoff */
    .header-info {
        max-width: 70% !important;
    }
    .episode-badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: inline-block;
    }
}

@media only screen and (max-width: 900px) {
    /* Lift the entire control container */
    .bottom-controls {
        /* Adds space for the iPhone home bar / Android gesture bar */
        padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
        
        /* Ensure it doesn't touch the very bottom edge */
        margin-bottom: 20px !important;
        
        /* Fixes layout if buttons were squashed */
        height: auto !important; 
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Ensure the progress bar is accessible and not too low */
    .progress-container {
        margin-bottom: 5px !important;
    }

    /* If the buttons are still overlapping, scale the group down slightly */
    .controls-center-group {
        transform: scale(0.95);
        transform-origin: bottom center;
    }

    .skip-intro {
        margin-bottom: 20px;
    }
}

/* Fix for Landscape (sideways) where the cut-off is usually worse */
@media only screen and (max-width: 900px) and (orientation: landscape) {
    .bottom-controls {
        padding-bottom: calc(5px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Make the bottom bar background slightly taller to act as a buffer */
    .bottom-controls::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(transparent, rgba(0,0,0,0.8));
        z-index: -1;
        pointer-events: none;
    }

    .skip-intro {
        margin-bottom: 20px;
    }
}