/* --- Глобальные стили --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Golos Text', sans-serif; color: #333; background-color: #F8F5F2; font-weight: 400; }

/* --- Основная сетка страницы --- */
.page-container { display: flex; min-height: 100vh; }
.content-panel { flex: 3; display: flex; justify-content: center; align-items: center; background-color: #F8F5F2; padding: 40px; }
.content-wrapper { max-width: 480px; width: 100%; }
.image-panel { flex: 2; background-image: url('assets/background.jpg'); background-size: cover; background-position: center; }

/* --- Элементы контента --- */
.logo { display: block; margin-bottom: 30px; }
.logo img { max-width: 140px; }
h1 { font-family: 'Helvetica Neue', 'Inter', sans-serif; font-size: 56px; font-weight: 800; color: #1A1A1A; line-height: 1.1; text-transform: uppercase; margin-bottom: 24px; }
.description, .construction-text { font-size: 16px; line-height: 1.6; color: #555; margin-bottom: 40px; }

/* --- Таймер --- */
.countdown-timer { display: flex; gap: 20px; margin-bottom: 40px; }
.timer-unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.timer-item { width: 110px; height: 70px; border: 2px solid #E8592A; border-radius: 50px; display: flex; justify-content: center; align-items: center; }
.timer-item span { font-family: 'Helvetica Neue', 'Inter', sans-serif; font-weight: 800; font-size: 32px; color: #E8592A; }
.timer-unit .label { font-size: 12px; font-weight: 400; color: #777; text-transform: uppercase; letter-spacing: 0.5px; }


/* ========================================================= */
/* === ФИНАЛЬНАЯ И КОРРЕКТНАЯ ВЕРСИЯ ФОРМЫ (НАЧАЛО) === */
/* ========================================================= */

.notify-label { font-size: 14px; color: #333; margin-bottom: 10px; }

/* Тег <form> теперь просто флекс-контейнер, без стилей */
.subscribe-form {
    display: flex;
    align-items: center;
    gap: 8px; /* Расстояние между полем ввода и кнопкой */
    margin-bottom: 15px;
}

/* Обертка для поля ввода — теперь это БЕЛАЯ КАПСУЛА */
.input-wrapper {
    position: relative;
    flex-grow: 1; /* Занимает все доступное место */
    background-color: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 50px;
    transition: border-color 0.2s;
}
/* Подсветка поля ввода СЕРЫМ цветом */
.input-wrapper:focus-within {
    border-color: #AAAAAA;
}

/* Поле ввода внутри белой капсулы */
.input-wrapper input {
    width: 100%;
    border: none;
    background: none;
    padding: 16px 20px 4px 20px;
    font-size: 16px;
    font-family: 'Golos Text', sans-serif;
    outline: none;
    color: #333;
}

/* Плавающая метка */
.input-wrapper label {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 16px;
    color: #AAAAAA;
    pointer-events: none;
    transition: all 0.2s ease-out;
}
.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown) + label {
    top: 4px;
    font-size: 10px;
}

/* Кнопка — теперь это ОТДЕЛЬНАЯ КАПСУЛА */
.subscribe-form button {
    font-family: 'Golos Text', sans-serif;
    border: none;
    border-radius: 50px;
    padding: 12px 25px; /* Скорректированы отступы */
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
    flex-shrink: 0;
}

/* Активная кнопка */
.subscribe-form button:not(:disabled) {
    background-color: #E8592A;
    color: white;
    cursor: pointer;
}
.subscribe-form button:not(:disabled):hover { background-color: #d14f21; }
.subscribe-form button:not(:disabled):active { background-color: #B5451C; transform: scale(0.98); }

/* Неактивная кнопка */
.subscribe-form button:disabled {
    background-color: #E9E9E9;
    color: #AAAAAA;
    cursor: not-allowed;
}

#form-message { min-height: 20px; margin-bottom: 30px; font-size: 14px; }
#form-message.success { color: #28a745; }
#form-message.error { color: #dc3545; }

/* Иконки соцсетей */
.social-links { display: flex; gap: 15px; }
.social-links a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: #2c2c2c; border-radius: 50%; transition: background-color 0.2s, transform 0.2s; }
.social-links a:hover { background-color: #E8592A; transform: scale(1.1); }
.social-links a:active { background-color: #d14f21; transform: scale(1.05); }
.social-links img { width: 20px; height: 20px; }
/* ========================================================= */
/* === ФИНАЛЬНАЯ И КОРРЕКТНАЯ ВЕРСИЯ ФОРМЫ (КОНЕЦ) === */
/* ========================================================= */

/* --- Адаптивность --- */
@media (max-width: 992px) {
    .page-container { flex-direction: column; }
    .content-panel { padding: 40px 20px; flex-grow: 1; align-items: flex-start; }
    .image-panel { height: 120px; flex-shrink: 0; order: 2; }
    h1 { font-size: 42px; }
    .timer-item { width: 90px; height: 60px; }
    .timer-item span { font-size: 28px; }
    .timer-unit { gap: 8px; }

    /* Поле ввода и кнопка становятся колонкой */
    .subscribe-form { flex-direction: column; align-items: stretch; }
    .subscribe-form button { width: 100%; }
}