/* ==========================================================================
   Order section — крупный блок "Нужна помощь с Битрикс?" на главной
   (обёртка для bitrix_help_callback_form(), реальная форма CF7 внутри —
   один инпут "Телефон/Telegram/email" + кнопка, см. cf7-form.css).
   ========================================================================== */

.order-section {
	background: var(--gradient-hero);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.order-grid {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-12) var(--space-6);
	display: grid;
	grid-template-columns: 1fr minmax(280px, 380px);
	gap: var(--space-10);
	align-items: center;
}

@media (max-width: 768px) {
	.order-grid { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8) var(--space-6); }
}

.order-text__title {
	font-size: var(--fs-xl);
	font-weight: 800;
	color: var(--color-text);
}

.order-text__desc {
	margin-top: var(--space-2);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	max-width: 480px;
}

.order-benefits {
	margin-top: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	max-width: 480px;
}
.order-benefits li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}
.order-benefits .icon {
	width: 18px;
	height: 18px;
	color: var(--color-success);
	flex-shrink: 0;
	margin-top: 0.1em;
}

.order-form-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-5);
}

/* ---- Компактная версия — середина статьи: одна колонка, без градиента-
   секции и без длинного текста/списка преимуществ (см. bitrix_help_callback_form($compact)). ---- */
.order-section--compact {
	background: none;
	border: none;
	margin: var(--space-8) 0;
}
.order-section--compact .order-form-card {
	max-width: var(--content-max);
	margin-inline: auto;
	/* Тот же фон, что у карточки "Нужна помощь по Битриксу?" в сайдбаре
	   (.extra-card), чтобы обе выглядели как один визуальный блок. */
	background: var(--color-bg-subtle);
	box-shadow: none;
}
.order-form-card__title {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
/* Поле "Комментарий" в компактной версии не нужно — форма одна и та же (id 277),
   просто скрываем обёртку textarea целиком для этого контекста. */
.cta-help__form--compact .wpcf7-form-control-wrap[data-name="your-message"] {
	display: none;
}

/* Карточка теперь того же светло-серого цвета, что и поля ввода (см. выше) —
   делаем БЕЛЫМИ только текстовые поля, НЕ кнопку (:not(.wpcf7-submit)) —
   иначе синяя кнопка тоже подхватывает этот фон и становится белой.
   Специфичность выше, чем у .cta-help__form input.wpcf7-form-control из
   cf7-form.css (которое подключается позже) — иначе оно победит по каскаду. */
.order-section--compact .order-form-card input.wpcf7-form-control:not(.wpcf7-submit) {
	background: var(--color-surface);
}