/* Mobile-specific styles for the Opportunity Class Placement Mock Test */

@media (max-width: 768px) {
    /* Header adjustments */
    .quiz-header {
        padding: 10px;
    }
    
    .timer-container {
        margin-right: 10px;
    }
    
    .hide-time-btn {
        display: none;
    }
    
    .question-counter {
        font-size: 0.8rem;
    }
    
    .logo img {
        height: 50px;
    }
    
    /* Mobile tabs */
    .mobile-tabs {
        display: flex;
        position: sticky;
        top: 60px;
        z-index: 99;
    }
    
    /* Two-column layout adjustments */
    .two-column-layout {
        flex-direction: column;
    }
    
    .passage-column, .questions-column {
        width: 100% !important;
        height: calc(100vh - 120px);
        display: none;
    }
    
    .passage-column.active, .questions-column.active {
        display: block;
    }
    
    .column-resizer {
        display: none;
    }
    
    /* Test selection adjustments */
    .test-option {
        width: 100%;
    }
    
    /* Question grid adjustments */
    .question-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Summary stats adjustments */
    .stat-box {
        width: calc(33.33% - 10px);
        margin-bottom: 10px;
    }
    
    /* Footer adjustments */
    .quiz-footer {
        padding: 10px;
    }
    
    .nav-btn, .flag-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    /* Modal adjustments */
    .modal-content {
        width: 95%;
        padding: 15px;
    }
    
    /* Score card adjustments */
    .score-details {
        flex-direction: column;
        gap: 15px;
    }
    
    .score-item {
        margin-bottom: 10px;
    }
}