и
вокруг полей */
.contact-form-container .form-field > p,
.contact-form-container .agreement-field > p,
.contact-form-container .required-fields-note > p,
.contact-form-container .contact-form-buttons > p {
margin: 0;
padding: 0;
}
.contact-form-container .form-field br,
.contact-form-container .agreement-field br {
display: none;
}
.contact-form-container .wpcf7-not-valid-tip {
color: var(--color-error);
margin-top: 6px;
font-size: var(--font-size-14);
display: block;
}
/* Acceptance: распакуем 3 уровня wpcf7-обёрток */
/* .contact-form-container .wpcf7-acceptance / .agreement-field label / input[type=checkbox]
* — глобально в forms.css. Здесь оставлен только цветовой override .wpcf7-list-item-label
* (текст-плашка, специфично для модульной формы). */
.contact-form-container .agreement-field .wpcf7-list-item-label,
.contact-form-container .agreement-field .wpcf7-list-item-label a {
color: var(--color-text-plashka);
}
/* Бордовый вариант */
.contact-form-container.theme-burgundy .agreement-field input[type="checkbox"] {
border-color: var(--color-burgundy);
accent-color: var(--color-burgundy);
}
.contact-form-container.theme-burgundy .agreement-field input[type="checkbox"]:checked::after {
background: var(--color-burgundy);
}
/* Submit-кнопка: ширина по содержимому, центрируем; стили .btn применяются */
.contact-form-container .contact-form-buttons {
margin-top: 8px;
}
.contact-form-container input[type="submit"].wpcf7-submit {
/* class:btn class:btn-primary-green уже добавляют визуальные стили */
cursor: pointer;
}
/* Response сообщение */
.contact-form-container .wpcf7-response-output {
margin: 16px 0 0;
padding: 12px 16px;
border-radius: 12px;
font-size: var(--font-size-14);
background: rgba(255, 255, 255, 0.85);
}
/* Скрываем дефолтные иконки/спиннер CF7 при необходимости */
.contact-form-container .wpcf7-spinner {
margin-left: 10px;
}
/* CF7 input уже имеет class="text-p2" — но дополнительно гарантируем стиль */
.contact-form-container .wpcf7-form-control.text-p2 {
font-family: var(--font-primary);
font-size: var(--font-size-18);
font-weight: var(--font-weight-regular);
color: var(--color-text-main);
line-height: var(--line-height-auto);
letter-spacing: 0;
}
.contact-form-container .wpcf7-form-control.text-p2::placeholder {
color: var(--color-text-gray);
opacity: 1;
}
/* ============================================================
* МОДАЛЬНАЯ ФОРМА (.dk-modal-form)
* Открывается через `data-open-modular-form` (forms.js).
* Содержит CF7-форму (.contact-form / .wpcf7-form).
* Темы задаются `data-color-theme="green|burgundy"` на кнопке-триггере.
* ============================================================ */
.dk-modal-form { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 20px; }
.dk-modal-form.is-open { display: flex; }
.dk-modal-form__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.dk-modal-form__container {
position: relative;
background: var(--color-white);
border-radius: 24px;
padding: 36px 32px;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}
.dk-modal-form__close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: 0;
width: 36px;
height: 36px;
cursor: pointer;
font-size: 24px;
color: #999;
border-radius: 50%;
transition: background .2s;
}
.dk-modal-form__close:hover { background: #f0f0f0; color: #333; }
.dk-modal-form__title { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: var(--color-text-main); }
.dk-modal-form__description { margin: 0 0 20px; color: var(--color-text-secondary); }
.dk-modal-form__form { margin-top: 12px; }
body.modal-open { overflow: hidden; }
/* Темы модалки */
.dk-modal-form--burgundy .dk-modal-form__title { color: var(--color-burgundy); }
.dk-modal-form--green .dk-modal-form__container {
background: linear-gradient(180deg, #e5f3e8 0%, #8bbe8e 100%);
}
.dk-modal-form--green .dk-modal-form__title { color: var(--color-text-main); }
.dk-modal-form--green .dk-modal-form__description { color: var(--color-text-main); opacity: .85; }
/* Inline CF7-форма внутри модалки: поля и базовые элементы */
.dk-modal-form__form .contact-form .form-field,
.dk-modal-form__form .wpcf7-form .form-field { margin-bottom: 10px; }
.dk-modal-form__form .wpcf7-form input[type="text"],
.dk-modal-form__form .wpcf7-form input[type="tel"],
.dk-modal-form__form .wpcf7-form input[type="email"],
.dk-modal-form__form .wpcf7-form textarea {
width: 100%;
padding: 16px 20px;
border: 1px solid var(--color-border-light);
border-radius: 30px;
background: var(--color-white);
box-sizing: border-box;
transition: border-color .2s;
font-size: 15px;
color: var(--color-text-main);
}
.dk-modal-form__form .wpcf7-form textarea { border-radius: 40px; resize: vertical; min-height: 60px; }
/* Единая ширина всех полей = ширина формы (2026-07-08).
Обёртки .form-field / .form-row / wpcf7-wrap растягиваем на 100%, иначе
input с size="40" ужимается по символам и поля выглядят уже textarea. */
.dk-modal-form__form .wpcf7-form .form-field,
.dk-modal-form__form .wpcf7-form .form-row,
.dk-modal-form__form .wpcf7-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.dk-modal-form__form .wpcf7-form input[type="text"],
.dk-modal-form__form .wpcf7-form input[type="tel"],
.dk-modal-form__form .wpcf7-form input[type="email"],
.dk-modal-form__form .wpcf7-form input[type="number"],
.dk-modal-form__form .wpcf7-form input[type="url"],
.dk-modal-form__form .wpcf7-form select {
width: 100%;
box-sizing: border-box;
}
.dk-modal-form__form .wpcf7-form input:focus,
.dk-modal-form__form .wpcf7-form textarea:focus { outline: 0; border-color: var(--color-primary); }
.dk-modal-form__form .wpcf7-form input::placeholder,
.dk-modal-form__form .wpcf7-form textarea::placeholder { color: var(--color-text-gray); }
.dk-modal-form__form .required-fields-note { margin: 0 0 14px; }
.dk-modal-form__form .required-fields-note p {
margin: 0;
font-style: italic;
color: var(--color-text-secondary);
font-size: 13px;
}
/* Согласия (CF7-acceptance) — белая плашка с зелёным accent, как на других формах сайта */
.dk-modal-form__form .agreement-field {
background: var(--color-white);
border-radius: 30px;
padding: 16px 20px;
margin-bottom: 12px;
}
.dk-modal-form__form .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
display: block;
}
.dk-modal-form__form .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: var(--font-size-14);
color: var(--color-text-main);
line-height: 1.4;
padding: 0;
}
/* .dk-modal-form__form .wpcf7-acceptance input[type=checkbox] / a — глобально в forms.css */
/* Форма подписки (newsletter) в модалке использует обёртку .form-acceptance
(а не .agreement-field), у которой нет плашки-обёртки с паддингом. Поэтому
белую плашку рисует сам label — возвращаем ему паддинг (как на формах сайта),
иначе текст лепится к краям и плашка выглядит тонкой. Скоуп именно
.form-acceptance, чтобы не задваивать паддинг у форм на .agreement-field. */
.dk-modal-form__form .form-acceptance .wpcf7-acceptance label {
padding: 16px 20px;
}
/* Submit кнопка — определяется темой модалки */
.dk-modal-form__form .contact-form-buttons { margin-top: 18px; }
.dk-modal-form__form .contact-form-submit,
.dk-modal-form__form .wpcf7-submit {
width: 100%;
background: var(--color-primary);
color: var(--color-white);
border: none;
padding: 14px 20px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
.dk-modal-form__form .contact-form-submit:hover,
.dk-modal-form__form .wpcf7-submit:hover { background: var(--color-hover-green); }
/* ============================================================
* Компактная раскладка модалки на ДЕСКТОПЕ — форма влезает в 1 экран
* без вертикальной прокрутки (рекомендация подрядчика,
* docs/analytics-goals-task.md, п.3.3 №3). Касается ТОЛЬКО .dk-modal-form
* (попап на /event-list/ и т.п.); инлайн-формы на страницах не затрагиваются.
* ============================================================ */
@media (min-width: 768px) {
.dk-modal-form__container { padding: 28px; }
.dk-modal-form__title { font-size: 20px; margin-bottom: 4px; }
.dk-modal-form__description { margin-bottom: 12px; }
.dk-modal-form__form { margin-top: 6px; }
/* Двухколоночная сетка однострочных полей. */
.dk-modal-form__form .wpcf7-form {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: flex-start;
}
.dk-modal-form__form .wpcf7-form > * { width: 100%; } /* по умолчанию — на всю ширину */
.dk-modal-form__form .wpcf7-form > p { margin: 0; }
.dk-modal-form__form .wpcf7-form br { display: none; } /* убираем autop-переносы, если есть */
.dk-modal-form__form .wpcf7-form > .form-field {
width: 100%; /* все поля на всю ширину формы (2026-07-08) */
margin-bottom: 0;
}
/* Компактнее по вертикали. */
.dk-modal-form__form .wpcf7-form input[type="text"],
.dk-modal-form__form .wpcf7-form input[type="tel"],
.dk-modal-form__form .wpcf7-form input[type="email"] { padding: 11px 18px; }
.dk-modal-form__form .wpcf7-form textarea { min-height: 52px; padding: 11px 18px; }
.dk-modal-form__form .required-fields-note { margin-bottom: 8px; }
.dk-modal-form__form .agreement-field { padding: 10px 16px; margin-bottom: 8px; }
.dk-modal-form__form .contact-form-buttons { margin-top: 10px; }
.dk-modal-form__form .contact-form-submit,
.dk-modal-form__form .wpcf7-submit { padding: 12px 20px; }
}
.dk-modal-form--burgundy .dk-modal-form__form .contact-form-submit,
.dk-modal-form--burgundy .dk-modal-form__form .wpcf7-submit { background: var(--color-burgundy); }
.dk-modal-form--burgundy .dk-modal-form__form .contact-form-submit:hover,
.dk-modal-form--burgundy .dk-modal-form__form .wpcf7-submit:hover { background: var(--color-hover-burgundy); }
/* Бордовая тема: чекбокс и ссылки */
.dk-modal-form--burgundy .dk-modal-form__form .wpcf7-acceptance input[type="checkbox"],
.dk-modal-form--burgundy .dk-modal-form__form .wpcf7-acceptance input[type="checkbox"]:checked {
border-color: var(--color-burgundy);
}
.dk-modal-form--burgundy .dk-modal-form__form .wpcf7-acceptance input[type="checkbox"]:checked::after {
background: var(--color-burgundy);
}
.dk-modal-form--burgundy .dk-modal-form__form .wpcf7-acceptance a {
color: var(--color-burgundy);
}
/* Статус формы (успех / ошибка / валидация) */
.dk-modal-form__form .form-status { margin-top: 14px; font-size: 14px; min-height: 1.2em; }
.dk-modal-form__form .form-status.is-success { color: var(--color-primary); }
.dk-modal-form__form .form-status.is-error { color: var(--color-error, #c33); }
.dk-modal-form__form .wpcf7-response-output {
margin: 14px 0 0;
border: 0;
padding: 10px 14px;
border-radius: 12px;
font-size: 14px;
}
.dk-modal-form__form .wpcf7-not-valid-tip {
display: block;
color: var(--color-error, #c33);
font-size: 13px;
margin-top: 6px;
}
.dk-modal-form__form .form-error { display: block; color: var(--color-error, #c33); font-size: 13px; margin-top: 6px; }
.dk-modal-form__form .form-error.sf-hidden { display: none; }
/* Мобильные устройства */
@media screen and (max-width: 480px) {
.dk-modal-form__container{padding: 28px;}
.dk-modal-form__title{font-size: 18px;}
.dk-modal-form__form .wpcf7-form input[type="text"],
.dk-modal-form__form .wpcf7-form input[type="tel"],
.dk-modal-form__form .wpcf7-form input[type="email"],
.dk-modal-form__form .wpcf7-form textarea{
padding: 12px 20px;
}
}