/**
 * IELTS LMS - Reading/Listening Runtime Footer
 *
 * Shared mobile footer treatment for the reading and listening test pages.
 * The module scripts already render the same footer DOM, so keep the visual
 * behavior in one late-loaded stylesheet instead of repeating overrides.
 */

@media (max-width: 768px) {
    .ielts-final-wrapper.reading-mode.test-started,
    .ielts-final-wrapper.listening-mode.test-started {
        --ielts-app-footer-height: 50px;
        --mobile-footer-height: 50px;
    }

    .ielts-final-wrapper.reading-mode.test-started .ielts-pagination-footer,
    .ielts-final-wrapper.listening-mode.test-started .ielts-pagination-footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        box-sizing: border-box !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(50px + var(--ielts-safe-bottom, 0px)) !important;
        min-height: calc(50px + var(--ielts-safe-bottom, 0px)) !important;
        padding: 0 calc(6px + var(--ielts-safe-right, 0px)) var(--ielts-safe-bottom, 0px) calc(6px + var(--ielts-safe-left, 0px)) !important;
        gap: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border-top: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        box-shadow: 0 -1px 4px rgba(15, 23, 42, 0.08) !important;
        z-index: 1000 !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .parts-grid,
    .ielts-final-wrapper.listening-mode.test-started .parts-grid {
        box-sizing: border-box !important;
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .part-box,
    .ielts-final-wrapper.listening-mode.test-started .part-box {
        display: none !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .part-box.active,
    .ielts-final-wrapper.listening-mode.test-started .part-box.active {
        box-sizing: border-box !important;
        display: flex !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .box-summary-text,
    .ielts-final-wrapper.listening-mode.test-started .box-summary-text {
        display: none !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .box-questions-area,
    .ielts-final-wrapper.listening-mode.test-started .box-questions-area {
        box-sizing: border-box !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .active-label,
    .ielts-final-wrapper.listening-mode.test-started .active-label {
        position: absolute !important;
        top: 3px !important;
        left: 14px !important;
        z-index: 2 !important;
        display: block !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: #ffffff !important;
        color: #10b981 !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .question-scroll-track,
    .ielts-final-wrapper.listening-mode.test-started .question-scroll-track {
        box-sizing: border-box !important;
        display: flex !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        padding: 15px 0 0 !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ielts-final-wrapper.reading-mode.test-started .question-scroll-track::-webkit-scrollbar,
    .ielts-final-wrapper.listening-mode.test-started .question-scroll-track::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .palette-btn,
    .ielts-final-wrapper.listening-mode.test-started .palette-btn,
    .ielts-final-wrapper.reading-mode.test-started .palette-btn.current,
    .ielts-final-wrapper.listening-mode.test-started .palette-btn.current {
        box-sizing: border-box !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 2px !important;
        background: transparent !important;
        color: #111827 !important;
        box-shadow: none !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .palette-btn::before,
    .ielts-final-wrapper.listening-mode.test-started .palette-btn::before {
        display: none !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .palette-btn.current,
    .ielts-final-wrapper.listening-mode.test-started .palette-btn.current {
        background: #f3f4f6 !important;
        color: #111827 !important;
        font-weight: 700 !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .palette-btn.answered,
    .ielts-final-wrapper.listening-mode.test-started .palette-btn.answered {
        color: #166534 !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .palette-btn.flagged::after,
    .ielts-final-wrapper.listening-mode.test-started .palette-btn.flagged::after {
        content: '' !important;
        position: absolute !important;
        top: -11px !important;
        right: 2px !important;
        width: 10px !important;
        height: 14px !important;
        background: #ef4444 !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%) !important;
        border-radius: 1px 1px 0 0 !important;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.24) !important;
        display: block !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .palette-btn.correct,
    .ielts-final-wrapper.listening-mode.test-started .palette-btn.correct {
        background: #28a745 !important;
        color: #ffffff !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .palette-btn.incorrect,
    .ielts-final-wrapper.listening-mode.test-started .palette-btn.incorrect {
        border: 2px solid #dc3545 !important;
        color: #dc3545 !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .nav-controls,
    .ielts-final-wrapper.listening-mode.test-started .nav-controls {
        position: fixed !important;
        right: 8px !important;
        bottom: calc(50px + var(--ielts-safe-bottom, 0px) + 6px) !important;
        gap: 8px !important;
        z-index: 1001 !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .nav-btn,
    .ielts-final-wrapper.listening-mode.test-started .nav-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 4px !important;
        background: #1f2937 !important;
        border: 1px solid #1f2937 !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .nav-btn svg,
    .ielts-final-wrapper.listening-mode.test-started .nav-btn svg {
        width: 24px !important;
        height: 24px !important;
        stroke-width: 2.5px !important;
    }

    .ielts-final-wrapper.reading-mode.test-started .ielts-main-interface-container,
    .ielts-final-wrapper.listening-mode.test-started .ielts-main-interface-container {
        padding-bottom: calc(50px + var(--ielts-safe-bottom, 0px)) !important;
    }
}