/* Основной стиль для всей страницы */
body {
    font-family: 'Roboto', sans-serif; /* Шрифт Roboto для текста */
    background-color: #e6d8b7; /* Тёмно-бежевый фон для всей страницы */
    margin: 0; /* Убирает внешние отступы */
    padding: 0; /* Убирает внутренние отступы */
    color: #333; /* Тёмно-серый цвет текста */
}

/* Стили для модального окна выбора языка */
.language-modal {
    position: fixed; /* Фиксированное положение, поверх всего контента */
    top: 0; /* Привязка к верхнему краю */
    left: 0; /* Привязка к левому краю */
    width: 100%; /* Ширина на весь экран */
    height: 100%; /* Высота на весь экран */
    background: rgba(0, 0, 0, 0.7); /* Полупрозрачный чёрный фон для затемнения */
    display: flex; /* Flex-контейнер для центрирования содержимого */
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    z-index: 1000; /* Высокий уровень слоя, чтобы быть поверх всего */
}

/* Стили для содержимого модального окна */
.modal-content {
    background-color: #e6d8b7; /* Тёмно-бежевый фон, как у страницы */
    padding: 40px; /* Внутренние отступы 40px */
    border-radius: 10px; /* Закруглённые углы */
    text-align: center; /* Центрирование текста */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Тень для глубины */
    animation: fadeInUp 0.5s forwards; /* Анимация появления снизу за 0.5 секунды */
    max-width: 90%; /* Ограничивает ширину на мобильных */
}

/* Заголовок модального окна */
.modal-content h2 {
    font-family: 'Playfair Display', serif; /* Элегантный шрифт для заголовка */
    font-size: 2em; /* Размер шрифта 32px */
    color: #1b263b; /* Тёмно-синий цвет текста */
    margin-bottom: 20px; /* Отступ снизу 20px */
}

/* Кнопки в модальном окне */
.modal-content button {
    background-color: #d4a017; /* Золотой фон кнопки */
    color: white; /* Белый цвет текста */
    border: none; /* Без рамки */
    padding: 12px 24px; /* Отступы: 12px сверху/снизу, 24px слева/справа */
    margin: 10px; /* Внешний отступ 10px */
    cursor: pointer; /* Курсор указателя при наведении */
    font-size: 1.1em; /* Размер шрифта 17.6px */
    border-radius: 5px; /* Закруглённые углы 5px */
}

/* Эффект при наведении на кнопку */
.modal-content button:hover {
    background-color: #b58900; /* Тёмно-золотой фон при наведении */
}

/* Стили для белой полосы-разделителя */
.divider {
    height: 4px; /* Высота полосы 4px */
    background-color: white; /* Белый цвет */
    width: 0; /* Начальная ширина для анимации */
    margin: 20px auto; /* Отступы сверху/снизу 20px, центрирование */
    max-width: 80%; /* Максимальная ширина 80% */
    opacity: 0; /* Начальная прозрачность */
    transition: width 1s ease-out, opacity 1s ease-out; /* Плавная анимация ширины и прозрачности за 1с */
}

/* Стили для полноэкранных секций */
.fullscreen-section {
    min-height: 100vh; /* Минимальная высота равна высоте экрана */
    width: 100%; /* Ширина на весь экран */
    display: flex; /* Flex-контейнер для центрирования содержимого */
    flex-direction: column; /* Вертикальное расположение элементов */
    justify-content: center; /* Центрирование по вертикали */
    align-items: center; /* Центрирование по горизонтали */
    padding: 20px; /* Отступы 20px для контента */
    box-sizing: border-box; /* Учитывает отступы в размерах */
    background-color: #e6d8b7; /* Тёмно-бежевый фон */
    opacity: 0; /* Начальная прозрачность для анимации при прокрутке */
    transform: translateY(50px); /* Начальное смещение вниз для анимации */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Плавная анимация появления */
}

/* Класс для активированных секций при прокрутке */
.fullscreen-section.is-visible {
    opacity: 1; /* Полная видимость */
    transform: translateY(0); /* Возврат в исходное положение */
}

/* Анимация полосы при активации секции */
.fullscreen-section.is-visible + .divider {
    width: 80%; /* Полная ширина полосы */
    opacity: 1; /* Полная видимость */
}

/* Стили для шапки */
header.fullscreen-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('фон.jpg'); /* Градиент и фоновое изображение (заменить на фото пары) */
    background-size: cover; /* Изображение заполняет весь блок */
    background-position: center; /* Центрирование изображения */
    color: white; /* Белый цвет текста */
}

/* Главный заголовок (имена пары) */
h1 {
    font-family: 'Playfair Display', serif; /* Элегантный шрифт */
    font-size: 3.5em; /* Размер шрифта 56px */
    margin: 0; /* Убирает внешние отступы */
}

/* Заголовки второго уровня */
h2 {
    font-family: 'Playfair Display', serif; /* Элегантный шрифт */
    font-size: 2.2em; /* Размер шрифта 35.2px */
    margin-bottom: 15px; /* Отступ снизу 15px */
    color: #1b263b; /* Тёмно-синий цвет */
}

/* Контейнер для инициалов пары */
.initials {
    display: flex; /* Flex-контейнер для горизонтального расположения */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    font-family: 'Playfair Display', serif; /* Элегантный шрифт */
    font-size: 5em; /* Размер шрифта 80px */
    color: white; /* Белый цвет текста */
}

/* Стили для левой и правой буквы инициалов */
.initials-left, .initials-right {
    margin: 0 15px; /* Отступы слева/справа 15px */
}

/* Стили для даты в шапке */
.date p {
    font-family: 'Playfair Display', serif; /* Элегантный шрифт */
    font-size: 1.8em; /* Размер шрифта 28.8px */
    color: white; /* Белый цвет текста */
}

/* Стили для таймера обратного отсчета */
.countdown {
    display: flex; /* Горизонтальное расположение элементов */
    justify-content: center; /* Центрирование по горизонтали */
    gap: 20px; /* Отступ между элементами 20px */
    margin-top: 20px; /* Отступ сверху 20px */
    font-size: 1.2em; /* Размер шрифта 19.2px */
}

/* Стили для элементов таймера */
.countdown-item {
    background-color: white; /* Белый фон */
    border: 2px solid #d4a017; /* Золотая рамка толщиной 2px */
    border-radius: 10px; /* Закруглённые углы 10px */
    padding: 15px; /* Внутренние отступы 15px */
    min-width: 80px; /* Минимальная ширина 80px */
    text-align: center; /* Центрирование текста */
}

/* Числовые значения в таймере */
.countdown-item span {
    font-size: 2em; /* Размер шрифта 32px */
    font-weight: bold; /* Жирный шрифт */
    color: #1b263b; /* Тёмно-синий цвет */
}

/* Стили для сетки расписания */
.plan-grid {
    display: flex; /* Flex-сетка для карточек */
    flex-wrap: wrap; /* Перенос на новую строку при нехватке места */
    justify-content: center; /* Центрирование по горизонтали */
    gap: 20px; /* Отступ между карточками 20px */
}

/* Стили для карточек расписания */
.plan-item {
    width: 200px; /* Фиксированная ширина 200px */
    padding: 20px; /* Внутренние отступы 20px */
    background-color: #e6d8b7; /* Тёмно-бежевый фон */
    border-radius: 10px; /* Закруглённые углы 10px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
    opacity: 0; /* Начальная прозрачность для анимации */
    transform: scale(0.8); /* Начальный масштаб для эффекта "магии" */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.8s ease-out; /* Плавная анимация */
    display: flex; /* Flex для центрирования содержимого */
    flex-direction: column; /* Вертикальное расположение иконки и текста */
    align-items: center; /* Центрирование по горизонтали */
    text-align: center; /* Центрирование текста */
}

/* Анимация эффекта "магии" для карточек расписания */
.plan-item.is-visible {
    opacity: 1; /* Полная видимость */
    transform: scale(1); /* Нормальный масштаб */
    box-shadow: 0 0 20px rgba(212, 160, 23, 0.5); /* Сияние золотого цвета (#d4a017) */
}

/* Стили для карточек расписания с задержкой */
.plan-item[data-animate]:nth-child(1) { transition-delay: 0.2s; } /* Первая карточка, задержка 0.2с */
.plan-item[data-animate]:nth-child(2) { transition-delay: 0.4s; } /* Вторая карточка, задержка 0.4с */
.plan-item[data-animate]:nth-child(3) { transition-delay: 0.6s; } /* Третья карточка, задержка 0.6с */

/* Иконки в карточках расписания */
.plan-item img {
    width: 50px; /* Ширина 50px */
    height: 50px; /* Высота 50px */
    margin-bottom: 10px; /* Отступ снизу 10px для разделения с текстом */
}

/* Стили для кружков дресс-кода */
.dresscode-colors {
    display: flex; /* Горизонтальное расположение кружков */
    justify-content: center; /* Центрирование по горизонтали */
    gap: 20px; /* Увеличенный отступ между кружками для крупных размеров */
    margin-top: 20px; /* Отступ сверху 20px */
}

/* Стили для каждого кружка дресс-кода */
.color-circle {
    width: 60px; /* Увеличенный диаметр кружка до 60px */
    height: 60px; /* Увеличенная высота кружка до 60px */
    border-radius: 50%; /* Круглая форма */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Легкая тень для объемности */
    opacity: 0; /* Начальная прозрачность для анимации */
    transform: translateX(-20px); /* Начальное смещение влево для анимации */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Плавная анимация появления */
}

/* Анимация для кружков при появлении секции */
.fullscreen-section.is-visible .color-circle {
    opacity: 1; /* Полная видимость */
    transform: translateX(0); /* Возврат в исходное положение */
}

/* Поочередная анимация для кружков */
.color-circle:nth-child(1) { transition-delay: 0.2s; } /* Первый кружок, задержка 0.2с */
.color-circle:nth-child(2) { transition-delay: 0.4s; } /* Второй кружок, задержка 0.4с */
.color-circle:nth-child(3) { transition-delay: 0.6s; } /* Третий кружок, задержка 0.6с */
.color-circle:nth-child(4) { transition-delay: 0.8s; } /* Четвертый кружок, задержка 0.8с */
.color-circle:nth-child(5) { transition-delay: 1.0s; } /* Пятый кружок, задержка 1.0с */

/* Стили для ссылки на 2ГИС */
.map-link {
    display: inline-block; /* Отображается как блочный элемент с возможностью центрирования */
    margin: 10px 0; /* Отступы сверху/снизу 10px */
    color: #d4a017; /* Золотой цвет текста */
    text-decoration: none; /* Убирает подчёркивание */
    font-size: 1.1em; /* Размер шрифта 17.6px */
}

/* Эффект при наведении на ссылку */
.map-link:hover {
    color: #b58900; /* Тёмно-золотой цвет при наведении */
}

/* Стили для карты 2ГИС */
#map {
    height: 400px; /* Высота карты 400px */
    width: 100%; /* Ширина на весь экран */
}

/* Стили для календаря Flatpickr */
.flatpickr-calendar {
    margin: 20px auto; /* Отступ сверху 20px, центрирование */
    max-width: 300px; /* Максимальная ширина 300px */
    background-color: #e6d8b7; /* Тёмно-бежевый фон, соответствует общему дизайну */
    border: 1px solid #d4a017; /* Золотая рамка толщиной 1px */
    border-radius: 10px; /* Закруглённые углы 10px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Лёгкая тень для глубины */
    font-family: 'Roboto', sans-serif; /* Шрифт Roboto для текста */
}

/* Заголовки месяцев и дней в календаре */
.flatpickr-month, .flatpickr-weekdays {
    background-color: #e6d8b7; /* Тёмно-бежевый фон */
    color: #1b263b; /* Тёмно-синий цвет текста */
}

/* Дни в календаре */
.flatpickr-day {
    color: #1b263b; /* Тёмно-синий цвет текста */
    background-color: #fff; /* Белый фон для дней */
    border-radius: 5px; /* Закруглённые углы 5px */
}

/* Наведение на день */
.flatpickr-day:hover {
    background-color: #e8e6f0; /* Пастельный лавандовый при наведении */
}

/* Выделенная дата (30 августа 2025) */
.flatpickr-day.selected {
    background-color: #d4a017 !important; /* Золотой фон */
    border-color: #d4a017 !important; /* Золотая рамка */
    color: white !important; /* Белый текст */
}

/* Стили для яркого футера */
.joyful-footer {
    background: linear-gradient(to bottom, #e6d8b7, #ffdab9); /* Градиент от бежевого к персиковому для радости */
    position: relative; /* Для позиционирования конфетти */
    overflow: hidden; /* Чтобы конфетти не выходили за пределы */
}

/* Стили для текста футера */
.joyful-text {
    font-size: 1.5em; /* Увеличенный размер */
    color: #333; /* Основной цвет шрифта сайта */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); /* Glow-эффект для свечения */
    animation: textGlow 2s ease-in-out infinite alternate; /* Анимация свечения */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Отступ между текстом и сердцем */
}

/* Анимация свечения текста */
@keyframes textGlow {
    0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
    100% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.7); }
}

/* Стили для сердца */
.heart-icon {
    width: 30px;
    height: 30px;
    animation: pulse 1.5s infinite; /* Пульсация сердца */
}

/* Анимация пульсации сердца */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Контейнер для конфетти */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Не мешает кликам */
}

/* Стили для частиц конфетти (сердец) */
.confetti-heart {
    position: absolute;
    font-size: 20px;
    color: #FF69B4; /* Розовый цвет */
    opacity: 0.8;
    animation: confettiFall 3s ease-out forwards; /* Анимация падения */
}

/* Анимация падения конфетти */
@keyframes confettiFall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(200%) rotate(360deg);
        opacity: 0;
    }
}

/* Анимация появления страницы */
@keyframes fadeIn {
    0% { opacity: 0; } /* Начальная прозрачность */
    100% { opacity: 1; } /* Конечная прозрачность */
}

/* Анимация появления снизу */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px); } /* Начальное смещение вниз на 20px */
    100% { opacity: 1; transform: translateY(0); } /* Конечное положение */
}

/* Анимация появления слева */
@keyframes slideIn {
    0% { opacity: 0; transform: translateX(-20px); } /* Начальное смещение влево на 20px */
    100% { opacity: 1; transform: translateX(0); } /* Конечное положение */
}

/* Анимация появления для элементов таймера */
@keyframes gentleFade {
    0% { opacity: 0; transform: translateY(10px); } /* Начальное смещение вниз на 10px */
    100% { opacity: 1; transform: translateY(0); } /* Конечное положение */
}

/* Адаптивные стили для мобильных (до 430px, охватывает iPhone 12/14 Pro Max) */
@media (max-width: 430px) {
    h1 { font-size: 2em; } /* Уменьшение заголовка до 32px */
    .initials { font-size: 3em; } /* Уменьшение инициалов до 48px */
    .date p { font-size: 1.2em; } /* Уменьшение даты до 19.2px */
    h2 { font-size: 1.8em; } /* Уменьшение заголовков до 28.8px */
    .countdown { 
        gap: 10px; /* Уменьшение отступа между элементами таймера до 10px */
        flex-wrap: wrap; /* Перенос элементов таймера на новую строку при нехватке места */
    }
    .countdown-item { 
        min-width: 60px; /* Уменьшение минимальной ширины таймера до 60px */
        font-size: 1em; /* Уменьшение шрифта до 16px */
    }
    .countdown-item span { font-size: 1.5em; } /* Уменьшение чисел таймера до 24px */
    .plan-grid { 
        flex-direction: column; /* Карточки расписания в столбец */
        align-items: center; /* Центрирование карточек */
    }
    .plan-item { 
        width: 90%; /* Карточки занимают 90% ширины экрана */
        max-width: 300px; /* Ограничение максимальной ширины */
    }
    .color-circle { 
        width: 40px; /* Уменьшение кружков дресс-кода до 40px для мобильных */
        height: 40px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Уменьшенная тень для мобильных */
    }
    .dresscode-colors {
        gap: 15px; /* Уменьшенный отступ между кружками */
    }
    .flatpickr-calendar { 
        max-width: 90%; /* Календарь занимает 90% ширины экрана */
    }
    #map { 
        height: 300px; /* Уменьшение высоты карты до 300px для мобильных */
    }
    .modal-content { 
        padding: 20px; /* Уменьшение отступов в модальных окнах до 20px */
        max-width: 80%; /* Ограничение ширины модальных окон */
    }
    .joyful-text {
        font-size: 1.2em; /* Уменьшить текст */
    }
    .heart-icon {
        width: 25px;
        height: 25px;
    }
    .confetti-heart {
        font-size: 15px; /* Уменьшить конфетти */
    }
}