/* ========================================
   Responsive / Mobile Styles
   ======================================== */

/* Mobile form layout */
@media (max-width: 640px) {
    .container {
        padding: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Hide seek indicator on mobile (cleaner UX, less distracting) */
    /* Note: Shaka has a typo in their class - 'foward' instead of 'forward' */
    /* Including both child containers and parent wrappers to prevent refresh flicker */
    .shaka-fast-forward-container,
    .shaka-fast-foward-container,
    /* Shaka's typo variant */
    .shaka-rewind-container,
    .shaka-hidden-fast-forward-container,
    /* Parent wrapper */
    .shaka-hidden-rewind-container {
        /* Parent wrapper */
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Mobile subtitle settings */
@media (max-width: 640px) {
    .subtitle-settings-content {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .setting-row {
        gap: 8px;
    }

    .setting-label {
        font-size: 12px;
        min-width: 72px;
    }

    .setting-select {
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 6px;
    }

    .setting-range {
        height: 4px;
    }

    .setting-range::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }

    .setting-value {
        font-size: 12px;
        min-width: 32px;
    }
}