/* ===================================================================
   FORM-STYLES.CSS - Все стили модального окна формы заявки
   Каждая строка прокомментирована для понимания
   =================================================================== */

/* ============================================================
   МОДАЛЬНОЕ ОКНО (overlay - затемнение фона)
   ============================================================ */
.form-request-modal {
    display: none; /* По умолчанию скрыто */
    position: fixed; /* Фиксированное положение (не скроллится) */
    top: 0; /* Прижато к верху экрана */
    left: 0; /* Прижато к левому краю */
    width: 100%; /* На всю ширину экрана */
    height: 100%; /* На всю высоту экрана */
    background: rgba(0, 0, 0, 0.7); /* Полупрозрачный чёрный фон (затемнение) */
    z-index: 10000; /* Очень высокий приоритет (поверх всего) */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    animation: fadeIn 0.3s ease; /* Плавное появление за 0.3 секунды */
}

/* Анимация плавного появления модалки */
@keyframes fadeIn {
    from { opacity: 0; } /* Начинается с прозрачности 0 */
    to { opacity: 1; } /* Заканчивается с прозрачностью 1 (полностью видно) */
}

/* ============================================================
   КОНТЕЙНЕР ФОРМЫ (сама форма внутри модалки)
   ============================================================ */
.form-request-content {
    background: linear-gradient(180deg, #084d44 20%, #1f2c34 100%); /* Градиент фона (зелёный -> тёмно-серый) */
    width: 90%; /* Ширина 90% от экрана */
    height: 100%; /* На всю высоту экрана */
    max-width: 400px; /* Максимальная ширина 400px (не растянется больше) */
    border-radius: 20px; /* Скруглённые углы */
    padding: 40px 30px; /* Внутренние отступы (сверху-снизу 40px, слева-справа 30px) */
    position: relative; /* Нужно для позиционирования крестика */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* Тень вокруг формы (эффект объёма) */
    text-align: center; /* Весь текст по центру */
    color: white; /* Цвет текста белый */
    animation: slideUp 0.4s ease; /* Анимация "выезжания" снизу вверх */
    display: flex; /* Включаем flexbox для центрирования */
    flex-direction: column; /* Элементы располагаются в колонку */
    justify-content: center; /* Центрируем содержимое по вертикали */
    align-items: center; /* Центрируем содержимое по горизонтали */
}

/* Анимация выезжания формы снизу вверх */
@keyframes slideUp {
    from { 
        transform: translateY(50px); /* Начинается ниже на 50px */
        opacity: 0; /* Прозрачная */
    }
    to { 
        transform: translateY(0); /* Заканчивается на своём месте */
        opacity: 1; /* Полностью видна */
    }
}

/* ============================================================
   КРЕСТИК ЗАКРЫТИЯ (вверху справа)
   ============================================================ */
.form-close-btn {
    position: absolute; /* Абсолютное позиционирование (относительно .form-request-content) */
    top: 20px; /* Отступ от верха 20px */
    right: 20px; /* Отступ от правого края 20px */
    font-size: 28px; /* Размер символа ✕ */
    color: white; /* Белый цвет */
    cursor: pointer; /* Курсор меняется на "руку" при наведении */
    width: 35px; /* Ширина области клика */
    height: 35px; /* Высота области клика */
    display: flex; /* Flexbox для центрирования символа */
    align-items: center; /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    transition: transform 0.2s; /* Плавная анимация поворота за 0.2 сек */
}

/* Эффект при наведении на крестик */
.form-close-btn:hover {
    transform: rotate(90deg); /* Поворачивается на 90 градусов */
}

/* ============================================================
   ЗАГОЛОВОК "Оставьте заявку"
   ============================================================ */
.form-title {
    font-size: 32px; /* Размер шрифта заголовка - СЮДА МОЖЕШЬ МЕНЯТЬ */
    font-weight: 700; /* Жирный шрифт (bold) */
    margin: 0 0 15px 0; /* Отступы: сверху 0, справа 0, снизу 15px, слева 0 */
    color: white; /* Белый цвет текста */
}

/* ============================================================
   ПОДЗАГОЛОВОК (текст про Александра)
   ============================================================ */
.form-subtitle {
    font-size: 14px; /* Размер шрифта - СЮДА МОЖЕШЬ МЕНЯТЬ */
    line-height: 1.6; /* Межстрочный интервал (высота строки) */
    margin: 0 0 20px 0; /* Отступ снизу 20px */
    color: rgba(255,255,255,0.9); /* Почти белый (90% непрозрачности) */
}

/* ============================================================
   СТРЕЛОЧКА ВНИЗ (между текстом и полем ввода)
   ============================================================ */
.form-arrow-down {
    margin: 15px 0; /* Отступы сверху и снизу 15px */
}

.form-arrow-down img {
    width: 30px; /* Ширина картинки стрелочки - СЮДА МОЖЕШЬ МЕНЯТЬ */
    height: auto; /* Высота автоматическая (сохраняет пропорции) */
    filter: brightness(0) invert(1); /* Делает картинку белой */
}

/* ============================================================
   ПОЛЕ ВВОДА ТЕЛЕФОНА (обёртка с иконкой)
   ============================================================ */
.form-input-wrapper {
    position: relative; /* Нужно для позиционирования иконки трубки */
    margin: 20px 0; /* Отступы сверху и снизу 20px */
}

/* Иконка трубки (слева в поле ввода) */
.form-phone-icon {
    position: absolute; /* Абсолютное позиционирование */
    left: 15px; /* Отступ слева 15px */
    top: 50%; /* Позиция по центру вертикально */
    transform: translateY(-50%); /* Сдвигаем на 50% своей высоты вверх (точное центрирование) */
    width: 20px; /* Ширина иконки - СЮДА МОЖЕШЬ МЕНЯТЬ */
    height: 30px; /* Высота иконки - СЮДА МОЖЕШЬ МЕНЯТЬ */
    opacity: 0.6; /* Прозрачность 60% */
}

/* Само поле ввода телефона */
#form-phone-input {
    width: 100%; /* На всю ширину родителя */
    padding: 15px 15px 15px 50px; /* Отступы внутри (слева 50px - место под иконку) */
    border: none; /* Без рамки */
    border-radius: 10px; /* Скруглённые углы */
    font-size: 16px; /* Размер шрифта - СЮДА МОЖЕШЬ МЕНЯТЬ */
    box-sizing: border-box; /* Учитывать padding в общей ширине */
    outline: none; /* Убрать синюю обводку при фокусе */
}

/* Placeholder (подсказка в пустом поле) */
#form-phone-input::placeholder {
    color: #999; /* Серый цвет текста подсказки */
}

/* ============================================================
   КНОПКА "Оставить заявку"
   ============================================================ */
.form-submit-btn {
    width: 100%; /* На всю ширину */
    padding: 15px; /* Внутренний отступ 15px */
    background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%); /* Жёлтый градиент */
    border: none; /* Без рамки */
    border-radius: 10px; /* Скруглённые углы */
    font-size: 18px; /* Размер шрифта кнопки - СЮДА МОЖЕШЬ МЕНЯТЬ */
    font-weight: 700; /* Жирный шрифт */
    color: #333; /* Тёмно-серый цвет текста */
    cursor: pointer; /* Курсор "рука" */
    margin: 10px 0; /* Отступы сверху и снизу 20px */
    transition: transform 0.2s, box-shadow 0.2s; /* Плавная анимация при наведении */
}

/* Эффект при наведении на кнопку */
.form-submit-btn:hover {
    transform: translateY(-2px); /* Поднимается на 2px вверх */
    box-shadow: 0 5px 15px rgba(255,215,0,0.4); /* Появляется жёлтая тень */
}

/* ============================================================
   ЧЕКБОКС С ПОЛИТИКОЙ (обёртка)
   ============================================================ */
.form-checkbox-wrapper {
    display: flex; /* Flexbox для расположения чекбокса и текста в ряд */
    align-items: flex-start; /* Выравнивание по верху */
    gap: 10px; /* Расстояние между чекбоксом и текстом */
    margin-top: 20px; /* Отступ сверху 20px */
    text-align: left; /* Текст выравниваем по левому краю */
}

/* ============================================================
   КАСТОМНЫЙ ЧЕКБОКС (квадратик с анимацией)
   ============================================================ */
.form-checkbox {
    width: 24px; /* Ширина чекбокса - СЮДА МОЖЕШЬ МЕНЯТЬ */
    height: 24px; /* Высота чекбокса - СЮДА МОЖЕШЬ МЕНЯТЬ */
    border: 2px solid rgba(255,255,255,0.5); /* Белая рамка (50% прозрачности) */
    border-radius: 5px; /* Скруглённые углы */
    cursor: pointer; /* Курсор "рука" */
    position: relative; /* Нужно для позиционирования точки, кружка и галочки */
    flex-shrink: 0; /* Не сжимается (сохраняет размер) */
    transition: all 0.3s; /* Плавная анимация всех изменений */
}

/* Чекбокс когда галочка поставлена */
.form-checkbox.checked {
    background: white; /* Белый фон */
    border-color: white; /* Белая рамка */
}

/* Чекбокс в состоянии ошибки (когда забыли поставить галочку) */
.form-checkbox.error {
    animation: shake 0.5s, redBlink 1s infinite; /* Тряска + мигание красным */
    border-color: #ff4444; /* Красная рамка */
}

/* Анимация тряски (влево-вправо) */
@keyframes shake {
    0%, 100% { transform: translateX(0); } /* Исходное положение */
    25% { transform: translateX(-5px); } /* Сдвиг влево на 5px */
    75% { transform: translateX(5px); } /* Сдвиг вправо на 5px */
}

/* Анимация мигания красным */
@keyframes redBlink {
    0%, 100% { 
        border-color: #ff4444; /* Светло-красная рамка */
        background: transparent; /* Прозрачный фон */
    }
    50% { 
        border-color: #ff0000; /* Ярко-красная рамка */
        background: rgba(255,0,0,0.2); /* Красноватый фон (20% прозрачности) */
    }
}

/* ============================================================
   ТОЧКА ВНУТРИ ЧЕКБОКСА (пульсирует)
   ============================================================ */
.checkbox-dot {
    position: absolute; /* Абсолютное позиционирование */
    width: 8px; /* Ширина точки - СЮДА МОЖЕШЬ МЕНЯТЬ */
    height: 8px; /* Высота точки - СЮДА МОЖЕШЬ МЕНЯТЬ */
    background: #0a6b5f; /* Зелёный цвет точки */
    border-radius: 50%; /* Делает круглой */
    top: 50%; /* По центру вертикально */
    left: 50%; /* По центру горизонтально */
    transform: translate(-50%, -50%) scale(0); /* Центрируем и скрываем (scale 0) */
    animation: dotPulse 1.5s infinite; /* Пульсация каждые 1.5 секунды бесконечно */
}

/* Когда чекбокс отмечен - точка скрывается */
.form-checkbox.checked .checkbox-dot {
    display: none; /* Не показываем */
}

/* Анимация пульсации точки (появление-исчезновение) */
@keyframes dotPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0); /* Точка невидима */
        opacity: 0; /* Прозрачная */
    }
    50% { 
        transform: translate(-50%, -50%) scale(1); /* Точка видна (100% размера) */
        opacity: 1; /* Полностью видимая */
    }
}

/* ============================================================
   КРУЖОК ВОКРУГ ТОЧКИ (пульсирует с задержкой)
   ============================================================ */
.checkbox-circle {
    position: absolute; /* Абсолютное позиционирование */
    width: 16px; /* Ширина кружка - СЮДА МОЖЕШЬ МЕНЯТЬ */
    height: 16px; /* Высота кружка - СЮДА МОЖЕШЬ МЕНЯТЬ */
    border: 2px solid #0a6b5f; /* Зелёная рамка */
    border-radius: 50%; /* Делает круглой */
    top: 50%; /* По центру вертикально */
    left: 50%; /* По центру горизонтально */
    transform: translate(-50%, -50%) scale(0); /* Центрируем и скрываем */
    animation: circlePulse 1.5s infinite 0.75s; /* Пульсация с задержкой 0.75 сек */
}

/* Когда чекбокс отмечен - кружок скрывается */
.form-checkbox.checked .checkbox-circle {
    display: none; /* Не показываем */
}

/* Анимация пульсации кружка (появление-исчезновение) */
@keyframes circlePulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0); /* Кружок невидим */
        opacity: 0; /* Прозрачный */
    }
    50% { 
        transform: translate(-50%, -50%) scale(1); /* Кружок видим (100% размера) */
        opacity: 1; /* Полностью видимый */
    }
}

/* ============================================================
   ГАЛОЧКА ✓ (появляется при клике на чекбокс)
   ============================================================ */
.checkbox-checkmark {
    position: absolute; /* Абсолютное позиционирование */
    width: 18px; /* Ширина галочки - СЮДА МОЖЕШЬ МЕНЯТЬ */
    height: 18px; /* Высота галочки - СЮДА МОЖЕШЬ МЕНЯТЬ */
    top: 50%; /* По центру вертикально */
    left: 50%; /* По центру горизонтально */
    transform: translate(-50%, -50%) scale(0); /* Центрируем и скрываем (scale 0) */
    transition: transform 0.3s ease; /* Плавное появление за 0.3 секунды */
}

/* Когда чекбокс отмечен - галочка появляется */
.form-checkbox.checked .checkbox-checkmark {
    transform: translate(-50%, -50%) scale(1); /* Увеличиваем до 100% (показываем) */
}

/* ============================================================
   ТЕКСТ ЧЕКБОКСА (согласие с политикой)
   ============================================================ */
.form-checkbox-label {
    font-size: 12px; /* Размер шрифта - СЮДА МОЖЕШЬ МЕНЯТЬ */
    color: rgba(255,255,255,0.8); /* Почти белый (80% непрозрачности) */
    line-height: 1.4; /* Межстрочный интервал */
}

/* Ссылка на политику */
.form-checkbox-label a {
    color: white; /* Белый цвет */
    text-decoration: underline; /* Подчёркивание */
}

/* ============================================================
   КОНТЕЙНЕР ДЛЯ ВИДЕО (после отправки формы)
   ============================================================ */
.form-video-wrapper {
    margin-top: 20px; /* Отступ сверху 20px */
}

/* Iframe с видео */
.form-video-wrapper iframe {
    width: 100%; /* На всю ширину */
    height: 460px; /* Высота видео - СЮДА МОЖЕШЬ МЕНЯТЬ */
    border: none; /* Без рамки */
    border-radius: 10px; /* Скруглённые углы */
}

/* ============================================================
   АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ============================================================ */
@media (max-width: 480px) {
    /* Уменьшаем отступы на маленьких экранах */
    .form-request-content {
        padding: 30px 20px; /* Меньше padding */
    }

    /* Уменьшаем заголовок на мобильном */
    .form-title {
        font-size: 32px; /* Меньше размер - СЮДА МОЖЕШЬ МЕНЯТЬ */
    }

    /* Уменьшаем подзаголовок */
    .form-subtitle {
        font-size: 13px; /* Меньше размер - СЮДА МОЖЕШЬ МЕНЯТЬ */
    }
}