/* Виправлення прокрутки модального вікна на мобільних пристроях */

/* Блокуємо прокрутку body коли модальне вікно відкрите */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Стилі для модального вікна на мобільних */
@media (max-width: 768px) {
    #name-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background-color: rgba(0, 0, 0, 0.95) !important;
        z-index: 9999 !important;
    }
    
    #name-modal .modal-content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 400px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* Виправлення для сітки аватарів */
    #name-modal .avatar-grid {
        max-height: 300px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Запобігання прокрутці за межами модального вікна */
    #name-modal .modal-content {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Додаткові стилі для запобігання прокрутці на iOS */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    body.modal-open {
        -webkit-overflow-scrolling: auto !important;
    }
    
    #name-modal {
        -webkit-overflow-scrolling: auto !important;
    }
}