/* ============================================
   Sheet Modal - SchoolSelect
   Slide-up modal for mobile
   ============================================ */

@media (max-width: 767.98px) {
    .modal.sheet-modal .modal-dialog {
        margin: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .modal.sheet-modal.show .modal-dialog {
        transform: translateY(0);
    }

    .modal.sheet-modal .modal-content {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border: none;
        max-height: 85vh;
    }

    .modal.sheet-modal .modal-header {
        border-bottom: 1px solid var(--color-gray-200);
        position: relative;
        padding-top: var(--space-4);
    }

    .modal.sheet-modal .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--color-gray-300);
        border-radius: var(--radius-full);
    }

    .modal.sheet-modal .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}