/* ==========================================================================
   Baliimoti Design — Форми
   Fluent Forms (id 4/5/6/7) · Gravity Forms · съобщения · достъпност
   Слой: зарежда се след темата и плъгините. Само променливи от tokens.css.
   Спецификация: design/DESIGN.md §4 (Inputs), §8.

   Формата е СВЕТЪЛ ОСТРОВ: бяла карта с тъмен текст, дори когато стои върху
   тъмна секция (.bd-on-dark). Футърът е изключение — той има собствен вид
   (footer.css) и остава прозрачен върху тъмното.
   ========================================================================== */

/* Мост за токена за рамка: `.bd-on-dark` презаписва --bd-border на цялото
   поддърво. Тук запечатваме оригиналната стойност от :root, за да я върнем
   вътре в светлата карта. Коментарът е важен — не е hardcoded цвят. */
:root {
	--bd-form-line: var(--bd-border);
	--bd-form-line-subtle: var(--bd-border-subtle);
}

/* --------------------------------------------------------------------------
   1. Обвивка на формата — бяла карта (не generic widget)
   Селекторът с :not() изключва футъра и дава достатъчна специфичност, за да
   победи секционните слоеве (.bd-cta__form .fluentform → transparent).
   -------------------------------------------------------------------------- */
.fluentform:not(.main-footer-wrapper .fluentform),
.gform_wrapper:not(.main-footer-wrapper .gform_wrapper) {
	padding: 40px;
	background-color: var(--bd-surface-card);
	border: 1px solid var(--bd-form-line);
	border-radius: var(--bd-radius-lg);
	box-shadow: var(--bd-shadow-1);
	font-family: var(--bd-font-body);
	color: var(--bd-ink-950);
	/* Възстановяваме светлите токени вътре в картата */
	--bd-text: var(--bd-ink-950);
	--bd-text-secondary: var(--bd-ink-800);
	--bd-text-tertiary: var(--bd-ink-600);
	--bd-link: var(--bd-primary);
	--bd-link-hover: var(--bd-accent-dark);
	--bd-border: var(--bd-form-line);
	--bd-border-subtle: var(--bd-form-line-subtle);
	/* Fluent подава бутона си през тази променлива (inline style) */
	--fluentform-primary: var(--bd-primary);
	--fluentform-primary-hover: var(--bd-primary-dark);
}

@media (max-width: 767px) {
	.fluentform:not(.main-footer-wrapper .fluentform),
	.gform_wrapper:not(.main-footer-wrapper .gform_wrapper) {
		padding: var(--bd-s-5);
	}
}

/* Скритото заглавие (legend), което Fluent инжектира, остава в a11y дървото,
   но се изважда от grid-а, за да не заема клетка. */
.fluentform form > fieldset > .ff_screen_reader_title {
	position: absolute;
}

/* --------------------------------------------------------------------------
   2. Полетата в две колони (≥768px)
   Заглавията на етапите (custom_html), името, GDPR и бутонът заемат целия ред.
   -------------------------------------------------------------------------- */
.fluentform form > fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bd-s-5);   /* 24px между полетата */
	border: 0;
	margin: 0;
}

@media (min-width: 768px) {
	.fluentform form > fieldset {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fluentform form > fieldset > .ff-el-group,
.fluentform form > fieldset > .ff-field_container {
	margin-bottom: 0;
}

.fluentform form > fieldset > .ff-custom_html,
.fluentform form > fieldset > .ff-field_container,
.fluentform form > fieldset > .ff_submit_btn_wrapper,
.fluentform form > fieldset > .ff-el-group:has(.ff-el-tc) {
	grid-column: 1 / -1;
}

/* Име + Фамилия — две колони на десктоп, една под 768px */
.fluentform .ff-name-field-wrapper .ff-t-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bd-s-5);
}

.fluentform .ff-name-field-wrapper .ff-t-cell {
	flex: 1 1 0;
	min-width: 0;
}

.fluentform .ff-t-container .ff-el-group {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.fluentform .ff-name-field-wrapper .ff-t-container {
		flex-direction: column;
		gap: var(--bd-s-4);
	}
}

/* --------------------------------------------------------------------------
   3. Етикети
   -------------------------------------------------------------------------- */
.fluentform .ff-el-input--label,
.gform_wrapper .gfield_label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 6px;
	padding: 0;
	text-align: left;
	font-family: var(--bd-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--bd-text-secondary);
}

/* Задължителна звездичка — в нашия error цвят */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label:before {
	color: var(--bd-error);
}

.gform_wrapper .gfield_required {
	color: var(--bd-error);
}

/* --------------------------------------------------------------------------
   4. Полета: input / select / textarea
   -------------------------------------------------------------------------- */
.fluentform .ff-el-form-control,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 14px 16px;
	background-color: var(--bd-surface-card);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius);
	font-family: var(--bd-font-body);
	font-size: 16px;          /* 16px минимум — без zoom на iOS */
	font-weight: 400;
	line-height: 1.4;
	color: var(--bd-text);
	box-shadow: none;
	transition: border-color var(--bd-t-fast) ease, box-shadow var(--bd-t-fast) ease;
}

.fluentform textarea.ff-el-form-control,
.gform_wrapper textarea {
	min-height: 132px;
	resize: vertical;
}

.fluentform .ff-el-form-control::placeholder,
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--bd-ink-400);
	opacity: 1;
}

.fluentform .ff-el-form-control:focus,
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--bd-primary);
	box-shadow: 0 0 0 3px var(--bd-focus-ring-soft);
	outline: none;
}

/* Disabled / readonly */
.fluentform .ff-el-form-control:disabled,
.fluentform .ff-el-form-control[readonly],
.gform_wrapper input:disabled {
	background-color: var(--bd-surface-alt);
	color: var(--bd-ink-600);
	opacity: 1;
}

/* Checkbox / radio */
.fluentform .ff-el-form-check-input,
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	accent-color: var(--bd-primary);
	vertical-align: middle;
}

/* GDPR / terms — чекбокс с текст */
.fluentform .ff-el-tc .ff-el-form-check-label,
.fluentform .ff-el-tc .ff_tc_label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bd-text-secondary);
	cursor: pointer;
}

.fluentform .ff-el-tc .ff_tc_checkbox {
	display: inline-flex;
	padding-top: 2px;
}

.fluentform .ff-el-tc .ff_t_c a {
	color: var(--bd-link);
}

/* Заглавие на етап (custom_html) */
.fluentform .ff-custom_html {
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-subhead);
	font-weight: 600;
	color: var(--bd-ink-950);
}

.fluentform .ff-custom_html p {
	margin: 0;
	color: var(--bd-ink-800);
	font-size: var(--bd-fs-body);
}

/* Помощен текст */
.fluentform .ff-el-help-message {
	margin-top: 6px;
	font-size: 12px;
	font-style: normal;
	color: var(--bd-ink-600);
}

/* --------------------------------------------------------------------------
   5. Бутони
   -------------------------------------------------------------------------- */
.fluentform .ff_submit_btn_wrapper {
	margin-bottom: 0;
}

.fluentform .ff-btn,
.fluentform .ff_btn_style,
.gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 16px 32px;
	border: none;
	border-radius: var(--bd-radius);
	background-color: var(--bd-primary);
	font-family: var(--bd-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--bd-text-on-dark);
	box-shadow: var(--bd-shadow-1);
	cursor: pointer;
	transition: background-color var(--bd-t-base) ease, transform var(--bd-t-fast) ease, box-shadow var(--bd-t-base) ease;
}

.fluentform .ff-btn:hover,
.fluentform .ff_btn_style:hover,
.gform_wrapper .gform_button:hover {
	background-color: var(--bd-primary-dark);
	box-shadow: var(--bd-shadow-3);
	transform: translateY(-1px);
	color: var(--bd-text-on-dark);
}

.fluentform .ff-btn:active,
.gform_wrapper .gform_button:active {
	background-color: var(--bd-primary-darker);
	transform: translateY(1px);
}

.fluentform .ff-btn:focus-visible,
.gform_wrapper .gform_button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bd-focus-ring);
}

/* Пълен ред на бутона под 576px (DESIGN §8) */
@media (max-width: 575px) {
	.fluentform .ff_submit_btn_wrapper,
	.fluentform .ff-el-btn-block,
	.gform_wrapper .gform_footer {
		width: 100%;
	}

	.fluentform .ff-btn,
	.fluentform .ff_btn_style,
	.gform_wrapper .gform_button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   6. Съобщения: успех / грешка / валидация
   -------------------------------------------------------------------------- */
/* Fluent Forms — успех */
.fluentform .ff-message-success {
	margin-top: var(--bd-s-5);
	padding: var(--bd-s-4) var(--bd-s-5);
	background-color: color-mix(in srgb, var(--bd-success) 10%, var(--bd-surface-card));
	border: 1px solid var(--bd-success);
	border-left-width: 4px;
	border-radius: var(--bd-radius);
	font-size: 15px;
	line-height: 1.6;
	color: var(--bd-success);
	box-shadow: none;
}

/* Fluent Forms — стек с грешки */
.fluentform .ff-errors-in-stack {
	margin-top: var(--bd-s-4);
	padding: var(--bd-s-4) var(--bd-s-5);
	background-color: color-mix(in srgb, var(--bd-error) 8%, var(--bd-surface-card));
	border: 1px solid var(--bd-error);
	border-left-width: 4px;
	border-radius: var(--bd-radius);
}

.fluentform .ff-errors-in-stack .error {
	font-size: 14px;
	line-height: 1.6;
	color: var(--bd-error);
}

.fluentform .ff-errors-in-stack .error-clear {
	color: var(--bd-error);
}

/* Fluent Forms — грешка на полето */
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-form-control.ff-el-is-error {
	border-color: var(--bd-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-error) 18%, transparent);
}

.fluentform .ff-el-is-error .text-danger,
.fluentform .ff-el-is-error .error {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--bd-error);
}

.fluentform .ff-el-is-error .ff-el-input--label label,
.fluentform .ff-el-is-error .ff-el-form-check-label {
	color: var(--bd-error);
}

/* Gravity Forms */
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .validation_message {
	color: var(--bd-error);
}

.gform_wrapper .validation_message {
	font-size: 13px;
	line-height: 1.4;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: var(--bd-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-error) 18%, transparent);
}

.gform_wrapper .validation_error {
	margin-bottom: var(--bd-s-5);
	padding: var(--bd-s-4) var(--bd-s-5);
	background-color: color-mix(in srgb, var(--bd-error) 8%, var(--bd-surface-card));
	border: 1px solid var(--bd-error);
	border-left-width: 4px;
	border-radius: var(--bd-radius);
	font-size: 15px;
	font-weight: 600;
	color: var(--bd-error);
}

.gform_wrapper .gform_confirmation_message {
	margin-top: var(--bd-s-5);
	padding: var(--bd-s-4) var(--bd-s-5);
	background-color: color-mix(in srgb, var(--bd-success) 10%, var(--bd-surface-card));
	border: 1px solid var(--bd-success);
	border-left-width: 4px;
	border-radius: var(--bd-radius);
	font-size: 15px;
	line-height: 1.6;
	color: var(--bd-success);
}

/* --------------------------------------------------------------------------
   7. Разстояния между полетата в Gravity Forms
   -------------------------------------------------------------------------- */
.gform_wrapper .gform_fields {
	display: grid;
	gap: var(--bd-s-5);   /* 24px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .gfield {
	margin: 0;
}

.gform_wrapper .gform_fields.grid .gfield {
	grid-column: span 12;
}

@media (min-width: 768px) {
	.gform_wrapper .gform_fields.grid .gfield--width-half {
		grid-column: span 6;
	}
}

@media (max-width: 767px) {
	.gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   8. Стари Fluent класове (.ff_*) — по-стари версии на плъгина
   -------------------------------------------------------------------------- */
.fluentform .ff_input,
.fluentform .ff_text,
.fluentform .ff_select,
.fluentform .ff_textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 14px 16px;
	background-color: var(--bd-surface-card);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius);
	font-family: var(--bd-font-body);
	font-size: 16px;
	color: var(--bd-text);
}

.fluentform .ff_label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bd-text-secondary);
}

/* --------------------------------------------------------------------------
   9. Форма върху тъмна секция (напр. CTA) — светъл остров
   Футърът е отделно и остава както е във footer.css.
   -------------------------------------------------------------------------- */
.bd-on-dark .fluentform:not(.main-footer-wrapper .fluentform) {
	color: var(--bd-ink-950);
}

.bd-on-dark .fluentform .ff-el-input--label,
.bd-on-dark .fluentform .ff-el-input--label label {
	color: var(--bd-ink-800);
}

/* --------------------------------------------------------------------------
   10. Достъпност
   -------------------------------------------------------------------------- */
.fluentform .ff-el-form-control:focus-visible,
.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bd-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
	.fluentform .ff-btn,
	.fluentform .ff_btn_style,
	.gform_wrapper .gform_button,
	.fluentform .ff-el-form-control {
		transition: none !important;
	}

	.fluentform .ff-btn:hover,
	.gform_wrapper .gform_button:hover {
		transform: none;
	}
}