/* Общие стили */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* background-color: #f4f4f4; */ /* Управляется из base.html через CSS переменную */
    color: #333;
    line-height: 1.6;
}

.container {
    width: 100%;
    max-width: 800px; /* Максимальная ширина лендинга */
    margin: 0 auto; /* Центрирование на больших экранах */
    overflow: hidden; /* Для clearfix или если будут float элементы */
}

/* Стили для блоков с изображениями */
.block {
    width: 100%;
    margin-bottom: 0; /* Убираем отступ, если картинки должны идти вплотную */
    text-align: center; /* Центрирование кнопки, если она есть */
    opacity: 0; /* Начальная прозрачность для анимации */
    transform: translateY(10px); /* Начальное смещение для анимации */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Плавный переход */
}

.block.block-visible {
    opacity: 1; /* Финальная прозрачность */
    transform: translateY(0); /* Финальное положение */
}

.block.interactive-block {
    cursor: pointer; /* Указывает, что блок кликабельный */
}

.block img {
    display: block; /* Убирает лишнее пространство под изображением */
    width: 100%; /* Изображения растягиваются на всю ширину блока */
    height: auto; /* Сохраняем пропорции */
}

.scroll-button {
    padding: 10px 20px;
    margin-top: 10px; /* Небольшой отступ от картинки */
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

.scroll-button:hover {
    background-color: #4cae4c;
}

/* Стили для форм - Модерн стиль */
.form-block {
    padding: 20px;
    margin: 20px auto; /* Центрирование формы, если она одна */
    background-color: rgba(255, 255, 255, 0.85); /* Белый с прозрачностью */
    -webkit-backdrop-filter: blur(10px); /* Для Safari */
    backdrop-filter: blur(10px); /* Эффект матового стекла */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    max-width: 500px; /* Ограничение ширины формы */
    display: flex; /* Для выравнивания product-info-form и остальной части формы */
    flex-direction: column; /* Элементы формы будут идти друг под другом */
    /* Добавляем анимацию как у блоков */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.form-block.block-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Стили для информации о продукте в форме */
.product-info-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px; /* Отступ под блоком с картинкой и ценой */
    text-align: center;
}

.form-text {
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: inherit;
    max-width: 100%;
    text-align: center;
    line-height: 1.2;
}

.product-image-form {
    max-width: 200px;
    max-height: 200px;
    width: auto; /* Для сохранения пропорций, если одна из сторон меньше max */
    height: auto; /* Для сохранения пропорций, если одна из сторон меньше max */
    object-fit: contain; /* Сохраняет пропорции, вписывая изображение */
    margin-bottom: 10px;
    border-radius: 4px; /* Небольшое скругление для картинки */
}

.price-container-form {
    display: flex;
    align-items: baseline; /* Выравнивание по базовой линии текста */
    justify-content: center;
    gap: 10px; /* Пространство между старой и новой ценой */
    width: 100%; /* Чтобы занять доступную ширину для центрирования */
}

.old-price-form {
    text-decoration: line-through;
    color: #757575; /* Немного темнее серого для лучшей читаемости на светлом фоне */
    font-size: 1em; /* Относительный размер */
}

.new-price-form {
    font-weight: bold;
    color: #E91E63; /* Розовый цвет, как у кнопки, для акцента */
    font-size: 1.4em; /* Немного крупнее */
}

.form-block h3 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="tel"] {
    width: 100%; /* Ширина поля теперь 100% */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Чтобы padding не влиял на общую ширину */
}

.form-block button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #E91E63; /* Насыщенный розовый */
    color: white;
    border: none;
    border-radius: 12px; /* Более закругленные края */
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.form-block button[type="submit"]:hover {
    background-color: #C2185B; /* Более темный розовый при наведении */
}

/* Стили для модального окна */
.modal {
    display: none; /* Изначально скрыто, JS изменит на flex */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Полупрозрачный фон */
    align-items: center;
    justify-content: center;
}

.modal-content {
    margin: 0; /* Центрирование через flexbox родителя */
    padding: 0; /* Убираем паддинг, т.к. форма его уже имеет */
    width: 90%; /* Немного шире для мобильных, если форма внутри */
    max-width: 500px; /* Максимальная ширина контента модального окна, совпадает с формой */
    border-radius: 8px; /* Совпадает с формой */
    position: relative;
    transform: translateY(3vh); /* Смещаем чуть ниже центра */
}

.modal-content .form-block {
    margin: 0; /* Убираем внешний отступ у формы внутри модалки */
    box-shadow: none; /* Убираем тень формы, т.к. тень теперь на .modal-content или самом .form-block */
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
}

/* Адаптивность */
@media (max-width: 768px) {
    .modal-content {
        width: 90%;
        margin: 15% auto;
    }

    .form-block {
        margin: 20px 10px;
    }
}

/* Пример стилизации для формы (можно добавить другие стили form-style-dark, form-style-light и т.д.) */
.form-style-default .form-block button[type="submit"] {
    background-color: #E91E63; /* Насыщенный розовый для default стиля */
}

.form-style-default .form-block button[type="submit"]:hover {
    background-color: #C2185B; /* Более темный розовый */
}

/* Добавьте здесь другие стили, например .form-style-dark */
.form-block.form-style-dark {
    background-color: rgba(50, 50, 50, 0.85); /* Темный матовый фон */
    color: #f4f4f4;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.form-block.form-style-dark h3 {
    color: #f4f4f4;
}
.form-block.form-style-dark .form-text {
    color: #f4f4f4;
}
.form-block.form-style-dark .form-group label {
    color: #bbb;
}
.form-block.form-style-dark .form-group input[type="text"],
.form-block.form-style-dark .form-group input[type="tel"] {
    background-color: #555;
    border-color: #666;
    color: #f4f4f4;
}
.form-block.form-style-dark button[type="submit"] {
    background-color: #AD1457; /* Пример другого оттенка розового для темной темы */
}
.form-block.form-style-dark button[type="submit"]:hover {
    background-color: #880E4F;
}
.form-block.form-style-dark .old-price-form {
    color: #aaa; /* Светлее серый для темного фона */
}
.form-block.form-style-dark .new-price-form {
    color: #F06292; /* Светлее розовый для темного фона */
}

/* Form Style: Orange (Opaque) */
.form-block.form-style-orange {
    background-color: #FFE0B2; /* Light Orange, e.g., Peach Puff */
    color: #424242; /* Dark Gray for text */
}
.form-block.form-style-orange h3 {
    color: #BF360C; /* Deep Orange for headings */
}
.form-block.form-style-orange .form-text {
    color: #BF360C;
}
.form-block.form-style-orange .form-group label {
    color: #757575; /* Medium Gray for labels */
}
.form-block.form-style-orange .form-group input[type="text"],
.form-block.form-style-orange .form-group input[type="tel"] {
    background-color: #FFF3E0; /* Very Light Orange for input background */
    border-color: #FFB74D; /* Medium Orange for input border */
    color: #424242; /* Dark Gray for input text */
}
.form-block.form-style-orange button[type="submit"] {
    background-color: #FF6F00; /* Amber/Orange for button */
    color: white;
}
.form-block.form-style-orange button[type="submit"]:hover {
    background-color: #E65100; /* Darker Amber/Orange for button hover */
}
.form-block.form-style-orange .old-price-form {
    color: #757575; /* Medium Gray for old price */
}
.form-block.form-style-orange .new-price-form {
    color: #BF360C; /* Deep Orange for new price */
}

/* Form Style: Blue (Opaque) */
.form-block.form-style-blue {
    background-color: #ADD8E6; /* Light Blue */
    color: #333333; /* Dark Gray for text */
}
.form-block.form-style-blue h3 {
    color: #0D47A1; /* Dark Blue for headings */
}
.form-block.form-style-blue .form-text {
    color: #0D47A1;
}
.form-block.form-style-blue .form-group label {
    color: #555555; /* Medium Gray for labels */
}
.form-block.form-style-blue .form-group input[type="text"],
.form-block.form-style-blue .form-group input[type="tel"] {
    background-color: #E3F2FD; /* Very Light Blue for input background */
    border-color: #64B5F6; /* Medium Blue for input border */
    color: #333333; /* Dark Gray for input text */
}
.form-block.form-style-blue button[type="submit"] {
    background-color: #1976D2; /* Blue for button */
    color: white;
}
.form-block.form-style-blue button[type="submit"]:hover {
    background-color: #0D47A1; /* Darker Blue for button hover */
}
.form-block.form-style-blue .old-price-form {
    color: #757575; /* Medium Gray for old price */
}
.form-block.form-style-blue .new-price-form {
    color: #1976D2; /* Blue for new price */
}

/* Form Style: Green (Opaque) */
.form-block.form-style-green {
    background-color: #C8E6C9; /* Light Green */
    color: #333333; /* Dark Gray for text */
}
.form-block.form-style-green h3 {
    color: #1B5E20; /* Dark Green for headings */
}
.form-block.form-style-green .form-text {
    color: #1B5E20;
}
.form-block.form-style-green .form-group label {
    color: #555555; /* Medium Gray for labels */
}
.form-block.form-style-green .form-group input[type="text"],
.form-block.form-style-green .form-group input[type="tel"] {
    background-color: #E8F5E9; /* Very Light Green for input background */
    border-color: #81C784; /* Medium Green for input border */
    color: #333333; /* Dark Gray for input text */
}
.form-block.form-style-green button[type="submit"] {
    background-color: #388E3C; /* Green for button */
    color: white;
}
.form-block.form-style-green button[type="submit"]:hover {
    background-color: #1B5E20; /* Darker Green for button hover */
}
.form-block.form-style-green .old-price-form {
    color: #757575; /* Medium Gray for old price */
}
.form-block.form-style-green .new-price-form {
    color: #388E3C; /* Green for new price */
}

/* Form Style: Space (Transparent) */
.form-block.form-style-space {
    background-color: rgba(25, 25, 112, 0.85); /* Midnight Blue with alpha for a space feel */
    color: #E0E0E0; /* Light Gray for text */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.form-block.form-style-space h3 {
    color: #BB86FC; /* Light Purple/Lavender for headings */
}
.form-block.form-style-space .form-text {
    color: #BB86FC;
}
.form-block.form-style-space .form-group label {
    color: #B0B0B0; /* Medium Light Gray for labels */
}
.form-block.form-style-space .form-group input[type="text"],
.form-block.form-style-space .form-group input[type="tel"] {
    background-color: #372A4F; /* Dark Purple/Indigo for input background */
    border-color: #BB86FC; /* Light Purple/Lavender for input border */
    color: #E0E0E0; /* Light Gray for input text */
}
.form-block.form-style-space button[type="submit"] {
    background-color: #03DAC6; /* Teal/Cyan for button (bright accent) */
    color: #000000; /* Black text for contrast on bright button */
}
.form-block.form-style-space button[type="submit"]:hover {
    background-color: #018786; /* Darker Teal/Cyan for button hover */
}
.form-block.form-style-space .old-price-form {
    color: #B0B0B0; /* Medium Light Gray for old price */
}
.form-block.form-style-space .new-price-form {
    color: #BB86FC; /* Light Purple/Lavender for new price */
}