/* ===================================================
   Contact Form 7 — стили для модального окна записи
   =================================================== */

/* ════════════════════════════════════════════════════════════════════════
   Универсальные классы кнопок
   .btn-primary  — зелёная заливка (Записаться)
   .btn-outline  — прозрачный фон с обводкой (Заказать звонок)
   ════════════════════════════════════════════════════════════════════════ */

.btn-primary,
a.btn-primary {
    background-color: #4A6444 !important;
    color: #F6F6F3 !important;
    border: 0.0625rem solid transparent !important;
    text-decoration: none;
}

.btn-primary:hover,
a.btn-primary:hover {
    opacity: 0.85;
}

.btn-outline,
a.btn-outline {
    background-color: transparent !important;
    color: #2B2A24 !important;
    border: 0.0625rem solid #2B2A24 !important;
}

.btn-outline:hover,
a.btn-outline:hover {
    opacity: 0.7;
}

.modal .wpcf7 {
    width: 100%;
}

/* Убираем <br> которые CF7 вставляет между полями */
.modal .wpcf7-form br {
    display: none;
}

/* Форма — вертикальный flex */
.modal .wpcf7-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* <p>-обёртки CF7 — flex-колонки с зазором, без margin */
.modal .wpcf7-form > p {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
}

/* ── Блок name / phone+email: грид на самом div ── */
.modal__form-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    width: 100%;
}

/* <p> внутри — прозрачный, его span-дети становятся grid-items */
.modal__form-inputs p {
    display: contents;
}

/* Имя — на всю ширину */
.modal__form-inputs [data-name="your-name"] {
    grid-column: 1 / -1;
}

/* Span-обёртки — блочные, полная ширина */
.modal .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* ── Текстовые инпуты (text, tel, email) ── */
.modal .wpcf7-form-control.wpcf7-text,
.modal .wpcf7-form-control.wpcf7-tel,
.modal .wpcf7-form-control.wpcf7-email {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-weight: 500;
    outline: none;
    border: 0.0625rem solid transparent;
    border-radius: 6.25rem;
    background-color: #F6F6F3;
    padding: 0.8125rem 0.9375rem;
    font-size: 1rem;
    color: #2B2A24;
    transition: border-color 0.4s ease;
    font-family: inherit;
}

.modal .wpcf7-form-control.wpcf7-text::placeholder,
.modal .wpcf7-form-control.wpcf7-tel::placeholder,
.modal .wpcf7-form-control.wpcf7-email::placeholder {
    color: rgba(43, 42, 36, 0.5);
    font-size: 1rem;
    transition: opacity 0.4s ease;
}

.modal .wpcf7-form-control.wpcf7-text:focus::placeholder,
.modal .wpcf7-form-control.wpcf7-tel:focus::placeholder,
.modal .wpcf7-form-control.wpcf7-email:focus::placeholder {
    opacity: 0;
}

.modal .wpcf7-form-control.wpcf7-text:focus,
.modal .wpcf7-form-control.wpcf7-tel:focus,
.modal .wpcf7-form-control.wpcf7-email:focus {
    border-color: #2B2A24;
}

/* Невалидные поля */
.modal .wpcf7-not-valid.wpcf7-text,
.modal .wpcf7-not-valid.wpcf7-tel,
.modal .wpcf7-not-valid.wpcf7-email,
.modal .wpcf7-not-valid.wpcf7-textarea {
    border-color: #c0392b !important;
}

/* ── Textarea ── */
.modal .wpcf7-form-control.wpcf7-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-weight: 500;
    outline: none;
    border: 0.0625rem solid transparent;
    border-radius: 0.9375rem;
    background-color: #F6F6F3;
    padding: 0.8125rem 0.9375rem;
    font-size: 1rem;
    color: #2B2A24;
    resize: none;
    min-height: 6.25rem;
    transition: border-color 0.4s ease;
    font-family: inherit;
}

.modal .wpcf7-form-control.wpcf7-textarea::placeholder {
    color: rgba(43, 42, 36, 0.5);
    font-size: 1rem;
}

.modal .wpcf7-form-control.wpcf7-textarea:focus {
    border-color: #2B2A24;
}

/* ── Чекбокс согласия (acceptance) ── */
.modal .wpcf7-form-control-wrap[data-name="your-acceptance"] {
    display: block;
    width: 100%;
}

.modal .wpcf7-acceptance {
    display: block !important;
    width: 100% !important;
}

.modal .wpcf7-acceptance .wpcf7-list-item {
    display: block;
    width: 100%;
    margin: 0;
}

.modal .wpcf7-acceptance label {
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-left: 2.125rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin: 0;
}

.modal .wpcf7-acceptance label a {
    text-decoration: underline;
    text-decoration-thickness: 5%;
    text-underline-offset: 25%;
}

/* Сбрасываем конфликт с .input-style label span → это текстовый span CF7, не кружок */
.modal .wpcf7-acceptance label .wpcf7-list-item-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    display: inline !important;
}

.modal .wpcf7-acceptance label .wpcf7-list-item-label::after {
    display: none !important;
}

/* Скрываем нативный чекбокс */
.modal .wpcf7-acceptance input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Кастомный кружок */
.modal .wpcf7-acceptance label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    background-color: #F6F6F3;
    border-radius: 50%;
    border: 0.0625rem solid rgba(43, 42, 36, 0.2);
    transition: all 0.4s ease;
}

/* Заполнение при checked */
.modal .wpcf7-acceptance label::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);
    background-color: #4A6444;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.modal .wpcf7-acceptance label:has(input[type="checkbox"]:checked)::before {
    border-color: #4A6444;
}

.modal .wpcf7-acceptance label:has(input[type="checkbox"]:checked)::after {
    opacity: 1;
}

/* ── Кнопка Submit ── */
.modal .wpcf7-submit {
    display: block;
    width: 100%;
    text-align: center;
    border: none;
    border-radius: 6.25rem;
    background-color: #4A6444;
    color: #F6F6F3;
    font-size: 1.125rem;
    cursor: pointer;
    padding: 0.75rem 2.1875rem;
    transition: opacity 0.4s ease;
    font-family: inherit;
    font-weight: 500;
    box-sizing: border-box;
}

.modal .wpcf7-submit:hover {
    opacity: 0.8;
}

.modal .wpcf7-submit:disabled,
.modal .wpcf7-form--submitting .wpcf7-submit {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.modal .wpcf7-spinner {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Step-форма (corporate.php) — чекбокс acceptance
   ════════════════════════════════════════════════════════════════════════ */

/* Обнуляем CF7-обёртки: убираем position/size/border которые
   .input-style label span мог бы применить к ним как к кружкам */
.step__form .wpcf7-form-control-wrap,
.step__form .wpcf7-acceptance,
.step__form .wpcf7-list-item {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}

/* ::after у CF7-обёрток — скрываем, чтобы не появлялись лишние кружки */
.step__form .wpcf7-form-control-wrap::after,
.step__form .wpcf7-acceptance::after,
.step__form .wpcf7-list-item::after {
    display: none !important;
}

/* Скрываем нативный чекбокс */
.step__form label input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Метка чекбокса: отступ слева под кружок */
.step__form .form-three__box label {
    position: relative;
    display: block;
    padding-left: 2.4375rem;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Кружок-обводка (::before) */
.step__form .form-three__box label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    background-color: #F6F6F3;
    border-radius: 50%;
    border: 0.0625rem solid transparent;
    transition: border-color 0.3s ease;
}

/* Заполненная точка (::after) */
.step__form .form-three__box label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.25rem;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #4A6444;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Активное состояние через :has() */
.step__form .form-three__box label:has(input[type="checkbox"]:checked)::before {
    border-color: #4A6444;
}
.step__form .form-three__box label:has(input[type="checkbox"]:checked)::after {
    opacity: 1;
}

/* ── Сообщения валидации ── */
.modal .wpcf7-not-valid-tip {
    display: block;
    font-size: 0.75rem;
    color: #c0392b;
    margin-top: 0.25rem;
    padding-left: 0.9375rem;
}

/* ── Итоговое сообщение (успех / ошибка) ── */
.modal .wpcf7-response-output {
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    font-size: 0.875rem;
    text-align: center;
}

.modal .wpcf7-mail-sent-ok {
    display: block !important;
    background-color: #e8f5e9;
    color: #2e7d32;
}

.modal .wpcf7-mail-sent-ng,
.modal .wpcf7-aborted,
.modal .wpcf7-spam-blocked,
.modal .wpcf7-validation-errors {
    display: block !important;
    background-color: #fdecea;
    color: #c62828;
}

/* ════════════════════════════════════════════════════════════════════════
   Форма выбора (gift.php) — .form-choice
   ════════════════════════════════════════════════════════════════════════ */

/* wpcf7-обёртка занимает всю ширину */
.form-choice .wpcf7 {
    width: 100%;
}

/* Убираем лишние <br> */
.form-choice.wpcf7-form br {
    display: none;
}

/* ── Инпуты: wpcf7-form-control-wrap становится grid-item ── */
.form-choice .form-choice__inputs .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Первый span (имя) — на всю ширину сетки */
.form-choice .form-choice__inputs .wpcf7-form-control-wrap:first-child {
    grid-column: span 2;
}

/* Инпуты внутри — 100% ширины */
.form-choice .form-choice__inputs .wpcf7-form-control.wpcf7-text,
.form-choice .form-choice__inputs .wpcf7-form-control.wpcf7-tel,
.form-choice .form-choice__inputs .wpcf7-form-control.wpcf7-email {
    width: 100%;
    box-sizing: border-box;
}

/* ── Чекбокс acceptance ── */

/* Сбрасываем CF7-обёртки, чтобы .input-style label span не сделал из них кружки */
.form-choice .wpcf7-form-control-wrap,
.form-choice .wpcf7-acceptance,
.form-choice .wpcf7-list-item {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}

.form-choice .wpcf7-form-control-wrap::after,
.form-choice .wpcf7-acceptance::after,
.form-choice .wpcf7-list-item::after {
    display: none !important;
}

/* Текстовый span CF7 внутри label — не кружок */
.form-choice .wpcf7-list-item-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    display: inline !important;
}

.form-choice .wpcf7-list-item-label::after {
    display: none !important;
}

/* Скрываем нативный чекбокс */
.form-choice .form-choice__label input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Кружок-обводка через ::before на label */
.form-choice .form-choice__label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    background-color: #F6F6F3;
    border-radius: 50%;
    border: 0.0625rem solid transparent;
    transition: all 0.4s ease;
}

/* Заполненная точка */
.form-choice .form-choice__label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.25rem;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #4A6444;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Активное состояние */
.form-choice .form-choice__label:has(input[type="checkbox"]:checked)::before {
    border-color: #4A6444;
}

.form-choice .form-choice__label:has(input[type="checkbox"]:checked)::after {
    opacity: 1;
}

/* ── Кнопка submit ── */
.form-choice .wpcf7-submit,
.form-choice .form-choice__buttons .wpcf7-submit,
.form-choice .form-choice__buttons .form-choice__submit {
    display: inline-block;
    font-size: 1.125rem;
    padding-block: 0.75rem;
    padding-inline: 2.1875rem;
    border-radius: 6.25rem;
    text-align: center;
    color: #F6F6F3;
    background-color: #4A6444;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: inherit;
    transition: opacity 0.4s ease;
    box-sizing: border-box;
}

.form-choice .wpcf7-submit:hover,
.form-choice .form-choice__buttons .wpcf7-submit:hover,
.form-choice .form-choice__buttons .form-choice__submit:hover {
    opacity: 0.8;
}

.form-choice .wpcf7-submit:disabled,
.form-choice .form-choice__buttons .wpcf7-submit:disabled,
.form-choice .wpcf7-form--submitting .wpcf7-submit {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Спиннер CF7 — скрываем */
.form-choice .wpcf7-spinner {
    display: none !important;
}

/* Сообщения валидации */
.form-choice .wpcf7-not-valid-tip {
    display: block;
    font-size: 0.75rem;
    color: #c0392b;
    margin-top: 0.25rem;
    padding-left: 0.9375rem;
}

/* Итоговое сообщение */
.form-choice .wpcf7-response-output {
    margin: 0.5rem 0 0 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    font-size: 0.875rem;
    text-align: center;
}

.form-choice .wpcf7-mail-sent-ok {
    display: block !important;
    background-color: #e8f5e9;
    color: #2e7d32;
}

.form-choice .wpcf7-mail-sent-ng,
.form-choice .wpcf7-aborted,
.form-choice .wpcf7-spam-blocked,
.form-choice .wpcf7-validation-errors {
    display: block !important;
    background-color: #fdecea;
    color: #c62828;
}

/* Мобильная адаптация: кнопки на всю ширину */
/* Иконка в доп. кнопке: скрываем если src пустой */
.form-choice__extra-btn img:not([src]),
.form-choice__extra-btn img[src=""] {
    display: none;
}

@media (max-width: 576px) {
    .form-choice .form-choice__buttons .wpcf7-submit,
    .form-choice .form-choice__buttons .form-choice__submit,
    .form-choice__extra-btn {
        width: 100%;
    }
}


/* ===================================================
   RADIO GRID — выбор салона (CF7 post_radio)
   =================================================== */

/* ── Сетка ── */
.modal__form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    width: 100%;
}

/* ── Убираем CF7-обёртки ── */
.modal__form-grid .wpcf7-form-control-wrap,
.modal__form-grid .wpcf7-form-control,
.modal__form-grid .wpcf7-list-item,
.step__form .modal__form-grid .wpcf7-form-control-wrap,
.step__form .modal__form-grid .wpcf7-form-control,
.step__form .modal__form-grid .wpcf7-list-item,
.form-choice .modal__form-grid .wpcf7-form-control-wrap,
.form-choice .modal__form-grid .wpcf7-form-control,
.form-choice .modal__form-grid .wpcf7-list-item {
    display: contents !important;
}

/* ── Карточка (label) ── */
.modal__form-grid label {
    display: flex;
    align-items: center;
    gap: 0.625rem;

    padding: 0.75rem 1rem;
    border-radius: 6.25rem;
    background-color: #F6F6F3;
    border: 0.0625rem solid transparent;

    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* ── Скрываем нативный radio ── */
.modal__form-grid input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ── Кастомный кружок ── */
.modal__form-grid label::before,
.step__form .modal__form-grid label::before,
.step__form .form-three__box .modal__form-grid label::before,
.form-choice .modal__form-grid label::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    left: 3%;
    border-radius: 50%;
    border: 0.0625rem solid rgba(43, 42, 36, 0.3);
    background-color: #ffffff;

    transition: all 0.3s ease;
}

/* ── Активное состояние ── */
.modal__form-grid label:has(input[type="radio"]:checked) {
    border-color: #4A6444;
    background-color: #EEF3EC;
}

.modal__form-grid label:has(input[type="radio"]:checked)::before,
.step__form .modal__form-grid label:has(input[type="radio"]:checked)::before,
.step__form .form-three__box .modal__form-grid label:has(input[type="radio"]:checked)::before,
.form-choice .modal__form-grid label:has(input[type="radio"]:checked)::before {
    border-color: #4A6444;
    background-color: #4A6444;
}

/* ── Текст (сброс CF7 span) ── */
.modal__form-grid .wpcf7-list-item-label {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}

/* ── Hover ── */
.modal__form-grid label:hover {
    border-color: rgba(43, 42, 36, 0.4);
}

/* Убираем левый ::after от глобальных стилей */
.modal__form-grid .wpcf7-list-item-label::after {
    display: none !important;
    content: none !important;
}

/* ── Адаптив ── */
@media (max-width: 576px) {
    .modal__form-grid {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   Step-форма (corporate.php) — уведомления об отправке
   ════════════════════════════════════════════════════════════════════════ */

.step__form .wpcf7-response-output {
    margin: 1rem 0 0 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    font-size: 0.875rem !important;
    text-align: center;
}

.step__form .wpcf7-mail-sent-ok {
    display: block !important;
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
}

.step__form .wpcf7-mail-sent-ng,
.step__form .wpcf7-aborted,
.step__form .wpcf7-spam-blocked,
.step__form .wpcf7-validation-errors {
    display: block !important;
    background-color: #fdecea !important;
    color: #c62828 !important;
}

.step__form .wpcf7-not-valid-tip {
    display: block;
    font-size: 0.75rem;
    color: #c0392b;
    margin-top: 0.25rem;
    padding-left: 0.9375rem;
}

.step__form .wpcf7-spinner {
    display: none !important;
}

/* ── Кнопка submit ── */
.step__form .wpcf7-submit {
    display: inline-block;
    font-size: 1.125rem;
    padding: 0.75rem 2.1875rem;
    border-radius: 6.25rem;
    text-align: center;
    color: #F6F6F3;
    background-color: #4A6444;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: opacity 0.4s ease;
    box-sizing: border-box;
}

.step__form .wpcf7-submit:hover {
    opacity: 0.8;
}

.step__form .wpcf7-submit:disabled,
.step__form .wpcf7-form--submitting .wpcf7-submit {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}