/* -------------------------- Responsive Breakdown -------------------------- */

/* Tablet & Mobile Devices (Screens below 768px wide) */
@media (max-width: 768px) {
    html {
        font-size: 14px;
        /* Automatically scales down all rem units */
    }

    #videoBox {
        border-radius: 0px;
        /* Flush presentation looks cleaner on mobile viewports */
    }

    #videoControls {
        height: auto;
        padding: 15px 10px;
        flex-wrap: wrap;
        /* Allows components to drop nicely to rows if needed */
        gap: 10px;
        background: rgba(0, 0, 0, 0.9);
        /* High contrast backdrop for outdoor visibility */
    }

    #seekBarBox {
        width: 100%;
        /* Forces the time seekbar to span the top row completely */
        order: -1;
        /* Snaps progress bar directly above control action icons */
        margin: 0 0 5px 0;
    }

    #basicControls {
        gap: 14px;
    }

    #volumeContainer {
        padding-top: 0 !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px;
    }

    #volumeSlider {
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        writing-mode: horizontal-tb !important;
        direction: ltr !important;
        appearance: auto !important;
        -webkit-appearance: slider-horizontal !important;
        width: 70px !important;
        height: 6px !important;
    }

    .volumeIcons {
        margin-top: 0 !important;
        width: auto !important;
    }
}

#otherControls {
    gap: 12px;
}

#speedDropdown {
    padding: 3px 6px;
}

/* Micro Smartphone Screen Configurations (Screens below 480px wide) */
@media (max-width: 480px) {

    #basicControls {
        gap: 10px;
    }
}