/* ========================================== */
/* КРАТКОЕ ОГЛАВЛЕНИЕ                         */
/* ========================================== */
/*
 * ФАЙЛ: terms-modal.css
 * НАЗНАЧЕНИЕ: Модальное окно с правилами использования сервиса
 *
 * СОДЕРЖАНИЕ:
 * 1. .terms-modal - Основное модальное окно
 * 2. .terms-modal__content - Контейнер содержимого
 * 3. .terms-modal__close - Кнопка закрытия
 * 4. .terms-modal__title - Заголовок окна
 * 5. .terms-modal__text - Текст правил использования
 *
 * ОСОБЕННОСТИ:
 * - Анимации: scale(1.2) на кнопке закрытия
 * - Цвета: желтый фон окна (var(--yellow-btn))
 * - Адаптивность: нет
 * - Z-index: 200 (выше других модальных окон)
 */
/* ========================================== */

/* ========== TERMS MODAL STYLES ==========*/
/* Модальное окно с правилами */

/* Основное модальное окно правил использования */
.terms-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--yellow-btn);
    border-radius: 12px;
    z-index: 65000; /* Выше auth-modal (60000) */
    padding: 30px;
    overflow-y: auto; /* ВАЖНО: прокрутка для длинного текста на маленьких экранах */
}

/* Активное состояние - показ модального окна */
.terms-modal.active {
    display: block;
}

/* Контейнер содержимого модального окна */
.terms-modal__content {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

/* Кнопка закрытия модального окна - крестик в правом верхнем углу */
.terms-modal__close {
    position: absolute;
    top: -10px;
    right: 0;
    width: 32px;
    height: 32px;
    font-size: 32px;
    color: var(--text-dark);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
}

/* Эффект наведения на кнопку закрытия - увеличение */
.terms-modal__close:hover {
    transform: scale(1.2);
}

/* Заголовок модального окна */
.terms-modal__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 20px 0;
    text-align: center;
}

/* Текст правил использования */
.terms-modal__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark);
}

/* Параграфы текста правил */
.terms-modal__text p {
    margin: 0 0 15px 0;
}

/* Убираем отступ у последнего параграфа */
.terms-modal__text p:last-child {
    margin-bottom: 0;
}

/* ========================================== */
/* RESPONSIVE - МОБИЛЬНАЯ АДАПТАЦИЯ           */
/* ========================================== */

/* Первый диапазон: от 880px до 490px */
@media (max-width: 880px) {
    /* Модальное окно - уменьшаем padding */
    /* ВАЖНО: border-radius синхронизирован с .storage__card (10px) */
    .terms-modal {
        padding: 24px 18px;
        border-radius: 10px;
    }

    /* Контент - адаптивная ширина */
    .terms-modal__content {
        max-width: 550px;
    }

    /* Кнопка закрытия - увеличиваем для touch */
    .terms-modal__close {
        width: 40px;
        height: 40px;
        font-size: 34px;
        top: -12px;
        right: -3px;
    }

    /* Заголовок */
    .terms-modal__title {
        font-size: 19px;
        margin-bottom: 18px;
    }

    /* Текст */
    .terms-modal__text {
        font-size: 14px;
        line-height: 1.6;
    }

    .terms-modal__text p {
        margin-bottom: 14px;
    }
}

/* Второй диапазон: от 490px до 340px */
@media (max-width: 490px) {
    /* Модальное окно - минимальные padding */
    /* ВАЖНО: border-radius синхронизирован с .storage__card (8px) */
    .terms-modal {
        padding: 18px 12px;
        border-radius: 8px;
    }

    /* Контент - адаптивная ширина */
    .terms-modal__content {
        max-width: 100%;
    }

    /* Кнопка закрытия - компактный размер */
    .terms-modal__close {
        width: 38px;
        height: 38px;
        font-size: 32px;
        top: -14px;
        right: -4px;
    }

    /* Заголовок - компактный */
    .terms-modal__title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    /* Текст - компактный */
    .terms-modal__text {
        font-size: 14px;
        line-height: 1.6;
    }

    .terms-modal__text p {
        margin-bottom: 12px;
    }
}