/* ===== АДАПТИВНЫЕ СТИЛИ ДЛЯ МОДАЛЬНЫХ ОКОН ===== */

/* Extra small devices (phones, 575.98px and down) */
@media (max-width: 575.98px) {
    .modal-program {
        padding: 0.5rem;
        align-items: flex-end; /* На мобильных открываем снизу */
    }

    .modal-program-content {
        max-height: 85vh;
        border-radius: 20px 20px 0 0; /* Закругляем только верх */
        animation: modalSlideUp 0.3s ease; /* Анимация снизу вверх */
    }

    @keyframes modalSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .modal-program-header {
        padding: 1.5rem 1rem;
        border-radius: 20px 20px 0 0;
    }

    .modal-program-title {
        font-size: 1.3rem !important;
        padding-right: 2.5rem; /* Место для кнопки закрытия */
    }

    .modal-program-period {
        font-size: 0.9rem !important;
    }

    .modal-program-body {
        padding: 1.5rem 1rem;
        max-height: calc(85vh - 120px);
    }

    .close-modal-program {
        top: 1rem;
        right: 1rem;
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }

    .cardindex-items {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cardindex-item {
        padding: 1.25rem;
    }

    .cardindex-item-header {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }

    .cardindex-item-icon {
        align-self: center;
    }

    .program-module {
        padding: 1.25rem;
    }

    .module-title {
        font-size: 1.1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .module-feature {
        padding: 0.6rem 0;
    }
}

/* Small devices (phones, 576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .modal-program-content {
        max-height: 85vh;
    }

    .modal-program-body {
        max-height: calc(85vh - 140px);
    }

    .cardindex-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .modal-program-header {
        padding: 1.5rem;
    }

    .modal-program-title {
        font-size: 1.5rem;
    }
}

/* Medium devices (tablets, 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .modal-program-content {
        max-height: 88vh;
    }

    .modal-program-body {
        max-height: calc(88vh - 140px);
    }

    .cardindex-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .modal-program {
        padding: 1.5rem;
    }
}

/* Large devices (desktops, 992px to 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .modal-program-content {
        max-height: 90vh;
    }

    .modal-program-body {
        max-height: calc(90vh - 140px);
    }

    .cardindex-items {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .modal-program-content {
        max-height: 90vh;
    }

    .modal-program-body {
        max-height: calc(90vh - 140px);
    }

    .cardindex-items {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Для всех мобильных устройств (до 991.98px) */
@media (max-width: 991.98px) {
    .modal-program {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    /* Улучшаем читаемость на мобильных */
    .modal-program-body {
        -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
    }

    .cardindex-item-text {
        font-size: 0.9rem;
    }

    .module-feature span {
        font-size: 0.9rem;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 375px) {
    .modal-program {
        padding: 0.25rem;
    }

    .modal-program-content {
        max-height: 82vh;
    }

    .modal-program-body {
        max-height: calc(82vh - 110px);
        padding: 1rem 0.75rem;
    }

    .modal-program-header {
        padding: 1.25rem 0.75rem;
    }

    .cardindex-item {
        padding: 1rem;
    }

    .program-module {
        padding: 1rem;
    }
}

/* Для ландшафтной ориентации на мобильных */
@media (max-height: 600px) and (max-width: 991.98px) {
    .modal-program-content {
        max-height: 95vh;
    }

    .modal-program-body {
        max-height: calc(95vh - 120px);
    }

    .modal-program-header {
        padding: 1rem;
    }

    .modal-program-title {
        font-size: 1.2rem !important;
    }
}


/* Улучшения для мобильных модальных окон */
@media (max-width: 767.98px) {
    .mobile-modal .modal-program-content {
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        margin: 0;
    }

    /* Улучшаем touch-опыт */
    .cardindex-item,
    .program-module,
    .btn-program {
        -webkit-tap-highlight-color: rgba(109, 123, 212, 0.2);
    }

    /* Увеличиваем зону клика для кнопки закрытия */
    .close-modal-program {
        min-width: 44px;
        min-height: 44px; /* Минимальный размер для touch */
    }
}

/* Предотвращаем "дрожание" при прокрутке на iOS */
@media (max-width: 991.98px) {
    .modal-program {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Для устройств с вырезом (notch) */
@supports (padding: max(0px)) {
    .modal-program {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}