/* ============================================================================
 * v2-form-enhance.css — стили для improved CF7-форм на v2-страницах
 * Подключается вместе с v2-form-enhance.js на обоих v2-шаблонах.
 * ========================================================================== */

/* --- intl-tel-input override: высота как у остальных полей --- */
.contacts-v2-form-wrap .iti,
.reg-v2-form-card .iti {
    width: 100%;
    display: block;
}

.contacts-v2-form-wrap .iti__tel-input,
.reg-v2-form-card .iti__tel-input {
    width: 100%;
}

/* Чтобы intl-tel-input корректно встал, нужно убрать конфликтующие margin от <p> в CF7 */
.contacts-v2-form-wrap .wpcf7-form p:has(input[type="tel"]),
.reg-v2-form-card .wpcf7-form p:has(input[type="tel"]) {
    position: relative;
}

/* --- Error state — красная рамка + текст под полем --- */
.contacts-v2-form-wrap .wpcf7-form input.uf-v2-input-error,
.contacts-v2-form-wrap .wpcf7-form textarea.uf-v2-input-error,
.reg-v2-form-card .wpcf7-form input.uf-v2-input-error,
.reg-v2-form-card .wpcf7-form textarea.uf-v2-input-error {
    border-color: #D32F2F !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1) !important;
}

.uf-v2-error-text {
    display: block;
    font-size: 12px;
    color: #D32F2F;
    margin-top: 4px;
    line-height: 1.3;
}

/* --- Loading state на кнопке submit --- */
.contacts-v2-form-wrap .wpcf7-form .uf-v2-loading,
.reg-v2-form-card .wpcf7-form .uf-v2-loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}

.contacts-v2-form-wrap .wpcf7-form .uf-v2-loading::after,
.reg-v2-form-card .wpcf7-form .uf-v2-loading::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: uf-v2-spin 0.7s linear infinite;
}

@keyframes uf-v2-spin {
    to { transform: rotate(360deg); }
}

/* --- Success block --- */
.uf-v2-success {
    display: none;
    text-align: center;
    padding: 32px 16px;
}

.uf-v2-success.is-visible {
    display: block;
    animation: uf-v2-fade-in 300ms ease forwards;
}

.uf-v2-success__icon {
    margin-bottom: 16px;
}

.uf-v2-success__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1D1D1D;
}

.uf-v2-success__text {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

@keyframes uf-v2-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Перебить класс intl-tel-input на error (с учётом высокой специфичности) --- */
.iti.iti--container .iti__tel-input.uf-v2-input-error {
    border-color: #D32F2F !important;
}

/* --- Стандартный CF7 response output скрываем,
       т.к. мы показываем свой success-блок при wpcf7mailsent --- */
.contacts-v2-form-wrap .wpcf7 .wpcf7-response-output,
.reg-v2-form-card .wpcf7 .wpcf7-response-output {
    margin-top: 12px;
    font-size: 13px;
    border-radius: 6px;
    padding: 8px 12px;
}

/* --- Cloudflare Turnstile: виджет фиксированной ширины ~300px.
       По умолчанию плагин выравнивает его влево — на v2-формах это смотрелось
       несимметрично. Центрируем во всех трёх контейнерах (страницы + попап). --- */
.contacts-v2-form-wrap .cf7-cf-turnstile,
.reg-v2-form-card .cf7-cf-turnstile,
.popup-v2-card .cf7-cf-turnstile {
    text-align: center;
    margin-top: 4px;
}

.contacts-v2-form-wrap .cf-turnstile,
.reg-v2-form-card .cf-turnstile,
.popup-v2-card .cf-turnstile {
    display: inline-block;
}