/* ============================================ */
/* АДАПТИВ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (≤ 768px) */
/* ============================================ */

@media screen and (max-width: 768px) {
    
    /* Общие стили для всех модальных окон */
    .modal-container {
        width: 95%;
        max-width: 95%;
        margin: 20px auto;
        border-radius: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        padding: 16px 20px;
    }
    
    .modal-header h3 {
        font-size: 1.1rem;
    }
    
    .modal-header p {
        font-size: 0.85rem;
    }
    
    .modal-body {
        padding: 16px 20px 20px;
    }
    
    .close-modal {
        top: 12px;
        right: 12px;
        font-size: 24px;
        width: 32px;
        height: 32px;
    }
    
    /* Модальное окно результата расчёта */
    #resultModal .modal-container {
        width: 92%;
        padding: 0;
    }
    
    #resultModal .result-card {
        padding: 16px;
    }
    
    #resultModal .result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }
    
    #resultModal .result-value {
        font-size: 1.1rem;
    }
    
    #resultModal .result-value.penalty {
        font-size: 1.4rem;
    }
    
    #resultModal .modal-btn {
        width: 100%;
        padding: 14px 16px;
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
    
    /* Модальное окно загрузки ДДУ */
    .claim-modal-container {
        width: 92%;
        margin: 20px auto;
        border-radius: 16px;
    }
    
    .claim-modal-header {
        padding: 16px 20px;
    }
    
    .claim-modal-header h3 {
        font-size: 1.1rem;
    }
    
    .claim-modal-header p {
        font-size: 0.85rem;
    }
    
    .claim-modal-body {
        padding: 16px 20px 20px;
    }
    
    .claim-close-btn {
        top: 12px;
        right: 12px;
        font-size: 24px;
    }
    
    .drop-zone {
        padding: 24px 16px;
        min-height: 140px;
    }
    
    .drop-zone-icon {
        font-size: 2.5rem;
    }
    
    .drop-zone-text {
        font-size: 0.95rem;
    }
    
    .drop-zone-hint {
        font-size: 0.8rem;
    }
    
    .checkbox-group {
        padding: 12px 0;
        font-size: 0.9rem;
    }
    
    .checkbox-group input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
    
    .date-input-wrapper {
        margin-top: 12px;
    }
    
    .claim-submit-btn {
        width: 100%;
        padding: 14px;
        font-size: 0.95rem;
        margin-top: 16px;
    }
    
    /* Модальное окно оплаты */
    .payment-modal-container {
        width: 92%;
        margin: 20px auto;
    }
    
    .payment-modal-header {
        padding: 16px 20px;
    }
    
    .payment-modal-header h3 {
        font-size: 1.1rem;
    }
    
    .payment-modal-body {
        padding: 16px 20px 20px;
    }
    
    .payment-amount {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .payment-amount-label {
        font-size: 0.85rem;
    }
    
    .payment-amount-value {
        font-size: 1.5rem;
    }
    
    .payment-method-card {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .payment-method-content {
        gap: 12px;
    }
    
    .payment-method-icon img {
        width: 28px;
        height: 28px;
    }
    
    .payment-method-name {
        font-size: 0.9rem;
    }
    
    .payment-method-desc {
        font-size: 0.78rem;
    }
    
    .payment-method-check svg {
        width: 18px;
        height: 18px;
    }
    
    .payment-submit-btn {
        width: 100%;
        padding: 14px;
        font-size: 0.95rem;
        margin: 16px 0 8px;
    }
    
    .payment-note {
        font-size: 0.78rem;
        text-align: center;
        display: block;
    }
    
    .payment-security-info {
        margin-top: 12px;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .security-item {
        font-size: 0.8rem;
    }
    
    #backEmailInput {
        font-size: 0.9rem;
        padding: 10px 12px;
    }
    
    /* Модальное окно "Мои документы" */
    .documents-modal-container {
        width: 92%;
        margin: 20px auto;
        max-height: 85vh;
    }
    
    #documentsModal .modal-header {
        padding: 16px 20px;
    }
    
    #documentsModal .modal-header h3 {
        font-size: 1.1rem;
    }
    
    #documentsModal .modal-body {
        padding: 16px 20px;
    }
    
    .documents-list {
        gap: 10px;
    }
    
    .document-item {
        padding: 12px;
        flex-direction: column;
        gap: 8px;
    }
    
    .document-info {
        width: 100%;
    }
    
    .document-name {
        font-size: 0.9rem;
    }
    
    .document-date {
        font-size: 0.78rem;
    }
    
    .document-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }
    
    .document-actions .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
        flex: 1;
        text-align: center;
    }
    
    .empty-documents {
        padding: 30px 16px;
    }
    
    .empty-documents h3 {
        font-size: 1rem;
    }
    
    .empty-documents p {
        font-size: 0.85rem;
    }
    
    /* Файл-инфо в модалке загрузки */
    .file-info {
        padding: 10px 12px;
    }
    
    .file-name {
        font-size: 0.85rem;
        max-width: 200px;
    }
    
    .file-remove {
        font-size: 20px;
    }
}

/* ============================================ */
/* АДАПТИВ ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ (≤ 480px) */
/* ============================================ */

@media screen and (max-width: 480px) {
    
    /* Все модальные окна */
    .modal-container {
        width: 98%;
        margin: 10px auto;
        border-radius: 12px;
    }
    
    .modal-header {
        padding: 12px 16px;
    }
    
    .modal-header h3 {
        font-size: 1rem;
    }
    
    .modal-body {
        padding: 12px 16px 16px;
    }
    
    /* Модалка результата */
    #resultModal .result-card {
        padding: 12px;
    }
    
    #resultModal .result-value {
        font-size: 1rem;
    }
    
    #resultModal .result-value.penalty {
        font-size: 1.2rem;
    }
    
    #resultModal .modal-btn {
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    
    /* Модалка загрузки ДДУ */
    .claim-modal-container {
        width: 96%;
        margin: 10px auto;
        border-radius: 12px;
    }
    
    .claim-modal-header {
        padding: 12px 16px;
    }
    
    .claim-modal-header h3 {
        font-size: 1rem;
    }
    
    .claim-modal-body {
        padding: 12px 16px 16px;
    }
    
    .drop-zone {
        padding: 20px 12px;
        min-height: 120px;
    }
    
    .drop-zone-icon {
        font-size: 2rem;
    }
    
    .drop-zone-text {
        font-size: 0.9rem;
    }
    
    .checkbox-group {
        font-size: 0.85rem;
    }
    
    .claim-submit-btn {
        padding: 12px;
        font-size: 0.9rem;
    }
    
    /* Модалка оплаты */
    .payment-modal-container {
        width: 96%;
        margin: 10px auto;
        border-radius: 12px;
    }
    
    .payment-modal-header {
        padding: 12px 16px;
    }
    
    .payment-modal-body {
        padding: 12px 16px 16px;
    }
    
    .payment-amount-value {
        font-size: 1.3rem;
    }
    
    .payment-method-card {
        padding: 10px;
    }
    
    .payment-method-icon img {
        width: 24px;
        height: 24px;
    }
    
    .payment-method-name {
        font-size: 0.85rem;
    }
    
    .payment-submit-btn {
        padding: 12px;
        font-size: 0.9rem;
    }
    
    /* Модалка документов */
    .documents-modal-container {
        width: 96%;
        margin: 10px auto;
    }
    
    .document-item {
        padding: 10px;
    }
    
    .document-name {
        font-size: 0.85rem;
    }
    
    .document-actions .btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    /* Кнопки закрытия */
    .close-modal,
    .claim-close-btn {
        width: 28px;
        height: 28px;
        font-size: 20px;
        top: 10px;
        right: 10px;
    }
}

/* ============================================ */
/* ФИКС ДЛЯ ЛАНДШАФТНОЙ ОРИЕНТАЦИИ (≤ 768px) */
/* ============================================ */

@media screen and (max-width: 768px) and (orientation: landscape) {
    
    .modal-container {
        max-height: 85vh;
        margin: 10px auto;
    }
    
    .payment-modal-container,
    .documents-modal-container,
    .claim-modal-container {
        max-height: 80vh;
    }
    
    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .payment-methods {
        max-height: 30vh;
        overflow-y: auto;
    }
}