/* ==========================================================================
   Contact Form 7 — переопределение визуала реальной формы (post id 277,
   один инпут "Телефон, Telegramm или email" + кнопка "Отправить" в одном
   <p>: <span class="wpcf7-form-control-wrap">...</span><input type=submit>).
   Используется в bitrix_help_callback_form() (главная / середина статьи)
   и в попапе (template-parts/modal-help.php). Файлы плагина не редактируются —
   таргетируем стандартные классы CF7.
   ========================================================================== */

.cta-help__form .wpcf7-form-control-wrap,
.bh-modal__form .wpcf7-form-control-wrap {
	display: block;
}

.cta-help__form input.wpcf7-form-control,
.cta-help__form textarea.wpcf7-form-control,
.bh-modal__form input.wpcf7-form-control,
.bh-modal__form textarea.wpcf7-form-control {
	width: 100%;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	color: var(--color-text);
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	resize: vertical;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cta-help__form input.wpcf7-form-control::placeholder,
.bh-modal__form input.wpcf7-form-control::placeholder { color: var(--color-text-muted); }

.cta-help__form input.wpcf7-form-control:focus,
.cta-help__form textarea.wpcf7-form-control:focus,
.bh-modal__form input.wpcf7-form-control:focus,
.bh-modal__form textarea.wpcf7-form-control:focus {
	outline: none;
	background: var(--color-surface);
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.cta-help__form input.wpcf7-submit,
.bh-modal__form input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #fff;
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-md);
	padding: 0.8em 1.4em;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background var(--dur-fast) var(--ease);
}
.cta-help__form input.wpcf7-submit:hover,
.bh-modal__form input.wpcf7-submit:hover { background: var(--color-accent-hover); }
.cta-help__form input.wpcf7-submit:disabled,
.bh-modal__form input.wpcf7-submit:disabled { opacity: 0.6; cursor: default; }

/* Инпут и кнопка — соседи в одном <p>: делаем строкой на широких экранах. */
.cta-help__form .wpcf7-form > p,
.bh-modal__form .wpcf7-form > p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.cta-help__form .wpcf7-form-control-wrap,
.bh-modal__form .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 200px;
}

@media (max-width: 480px) {
	.cta-help__form input.wpcf7-submit,
	.bh-modal__form input.wpcf7-submit { width: 100%; }
}

.wpcf7-not-valid-tip {
	font-size: var(--fs-xs);
	color: var(--color-danger);
	margin-top: var(--space-1);
	flex-basis: 100%;
}

/* ---- Ответ формы (успех/ошибка) — свой вид вместо стандартной серой рамки
   CF7. Статус берём из атрибута data-status, который сам CF7 проставляет
   на <form> (init/mail_sent/mail_failed/validation_failed/spam/aborted) —
   ничего в JS-логике плагина не трогаем, только раскрашиваем и добавляем
   иконку (см. cf7-response.js). ---- */
.wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	border-radius: var(--radius-md) !important;
	margin: var(--space-3) 0 0 !important;
	padding: var(--space-3) var(--space-4) !important;
	border-width: 1px !important;
	border-style: solid !important;
	background: var(--color-bg-subtle) !important;
	border-color: var(--color-border) !important;
	color: var(--color-text-secondary) !important;
}
.wpcf7-response-output:empty { display: none !important; }

.cf7-response-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 0.1em;
}
.cf7-response-icon .icon { width: 18px; height: 18px; }

form[data-status="mail_sent"] .wpcf7-response-output {
	background: var(--color-success-bg) !important;
	border-color: var(--color-success-border) !important;
	color: var(--color-success) !important;
}
form[data-status="validation_failed"] .wpcf7-response-output,
form[data-status="acceptance_missing"] .wpcf7-response-output,
form[data-status="mail_failed"] .wpcf7-response-output,
form[data-status="aborted"] .wpcf7-response-output,
form[data-status="spam"] .wpcf7-response-output,
form[data-status="payment_required"] .wpcf7-response-output {
	background: var(--color-danger-bg) !important;
	border-color: var(--color-danger-border) !important;
	color: var(--color-danger) !important;
}

.wpcf7-spinner { margin-left: var(--space-2); }

.cta-help__form { flex: 1; min-width: 240px; max-width: 360px; }
@media (max-width: 768px) { .cta-help__form { max-width: 100%; width: 100%; } }