/* ==========================================================================
   Компонент: форми – Bricks Form с клас ih-form (мокъп v1.14: .ih-form, .ih-form__*)
   Маркировката е на Bricks (includes/elements/form.php, 2.4.5):
     form.brxe-form.ih-form > div.form-group (label + input/select/textarea)
       · файл:     div.form-group.file > label + input[type=file] + div.file-result + label.choose-files
       · checkbox: div.form-group[role=group] > ul.options-wrapper > li > input + label
       · html:     div.form-group > p.ih-form__note
       · бутон:    div.form-group.submit-button-wrapper > button.bricks-button > span.text
   Ширината на полето е от настройката „Width“ (50/100 %) – Bricks я пише по ID; разстоянията между
   колоните са с padding (половин отстояние от всяка страна), за да не се събира 50 % + gap > 100 %.
   Генерира се от tools/ihforms.py. Зарежда се само където има клас ih-form (ih_components()).
   ========================================================================== */

.ih-form.brxe-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	row-gap: var(--ih-space-l);
	column-gap: 0;
	width: calc(100% + var(--ih-space-l));
	max-width: none; /* Bricks: [class*="brxe-"] { max-width: 100% } */
	margin-inline: calc(var(--ih-space-l) / -2);
}

.ih-form .form-group {
	display: flex;
	flex-direction: column;
	gap: var(--ih-space-xs);
	margin: 0;
	padding: 0 calc(var(--ih-space-l) / 2);
}

/* Етикети (мокъп: .ih-form__label) */
.ih-form .form-group > label:not(.choose-files),
.ih-form .form-group > .label {
	margin: 0;
	padding: 0;
	font-size: var(--ih-text-s);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none; /* Bricks: 12px, 600, главни букви */
	color: var(--ih-color-ink);
}

/* Полета (мокъп: .ih-form__input) */
.ih-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ih-form select,
.ih-form textarea {
	width: 100%;
	min-height: 4.8rem;
	margin: 0;
	padding: var(--ih-space-s) var(--ih-space-m);
	border: 1px solid var(--ih-color-border);
	border-radius: var(--ih-radius-s);
	background: var(--ih-color-surface);
	color: var(--ih-color-text);
	font: inherit;
	font-size: var(--ih-text-m);
	line-height: 1.6;
	transition: border-color .2s;
}

/* Падащите менюта – със същата височина като другите полета (в мокъпа бяха 48 срещу 55 px). */
.ih-form select {
	height: auto;
	padding-right: calc(var(--ih-space-m) + 2.4rem);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A6577' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--ih-space-m) center;
	background-size: 1.2rem .8rem;
	cursor: pointer;
}

.ih-form textarea {
	flex: 1 1 auto;
	min-height: 0;
	resize: none; /* групата е с фиксирана височина – разтягането би излизало извън нея */
}

/* Височината на textarea: настройката Height на полето Bricks я слага на групата (.form-group) –
   calc(1.6em × редове + 5.8rem) от tools/ihforms.py; полето запълва групата под етикета (като rows=N в мокъпа). */

.ih-form input:hover,
.ih-form select:hover,
.ih-form textarea:hover {
	border-color: var(--ih-color-text-muted);
}

.ih-form input:focus-visible,
.ih-form select:focus-visible,
.ih-form textarea:focus-visible {
	outline: 2px solid var(--ih-color-accent);
	outline-offset: 1px;
	border-color: var(--ih-color-accent);
}

.ih-form ::placeholder {
	color: var(--ih-color-text-muted);
	opacity: 1;
}

/* Звездичката на задължителните (requiredAsterisk) – „Company *“ като в мокъпа (Bricks: „*“ без интервал, вдигната). */
.ih-form .required::after {
	content: "\00a0*";
	top: 0;
	padding: 0;
	color: var(--ih-color-ink);
}

/* ---------- Файл (мокъп: .ih-form__file-box) – цялата група е пунктирана кутия ---------- */
.ih-form .form-group.file {
	position: relative;
	align-items: center;
	gap: var(--ih-space-2xs);
	padding: 0;
	margin-inline: calc(var(--ih-space-l) / 2);
	width: calc(100% - var(--ih-space-l)) !important;
	border: 1px dashed var(--ih-color-text-muted);
	border-radius: var(--ih-radius-m);
	background: var(--ih-color-surface-alt);
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.ih-form .form-group.file > label:first-child {
	padding-top: var(--ih-space-l);
	font-size: var(--ih-text-m);
	font-weight: 500;
}

.ih-form .form-group.file:hover {
	border-color: var(--ih-color-accent);
}

.ih-form .form-group.file:focus-within {
	outline: 2px solid var(--ih-color-accent);
	outline-offset: 3px;
}

/* Бутонът „Choose files“ е подсказката (PDF, DOC…) и покрива цялата кутия – кликът навсякъде отваря избора. */
.ih-form .form-group.file .choose-files {
	position: static;
	align-self: center; /* Bricks: flex-start */
	width: auto;
	margin: 0;
	padding: 0 0 var(--ih-space-l);
	border: 0;
	background: none;
	color: var(--ih-color-text-muted);
	font: inherit;
	font-size: var(--ih-text-xs);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.ih-form .form-group.file .choose-files::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ih-form .form-group.file input[type="file"] {
	position: absolute;
	padding: 0;
	border: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Избраният файл (Bricks показва .file-result.show с името) */
.ih-form .file-result {
	display: none;
	align-items: center;
	gap: var(--ih-space-s);
	font-size: var(--ih-text-s);
	color: var(--ih-color-ink);
}

.ih-form .file-result.show {
	position: relative;
	z-index: 1;
	display: flex;
}

.ih-form .form-group.file:has(.file-result.show) {
	border-style: solid;
	border-color: var(--ih-color-accent-alt);
	background: var(--ih-color-surface);
}

.ih-form .file-result .bricks-button.remove {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ih-color-accent);
	font: inherit;
	font-size: var(--ih-text-xs);
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Съгласие (мокъп: .ih-form__check) ---------- */
.ih-form .options-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ih-form .options-wrapper li {
	display: flex;
	align-items: flex-start;
	gap: var(--ih-space-s);
	margin: 0;
	font-size: var(--ih-text-s);
}

.ih-form .options-wrapper input[type="checkbox"],
.ih-form .options-wrapper input[type="radio"] {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	margin: .2rem 0 0;
	accent-color: var(--ih-color-accent);
}

.ih-form .options-wrapper label {
	margin: 0;
	padding: 0;
	font-size: var(--ih-text-s);
	font-weight: 400;
	line-height: 1.6;
	color: var(--ih-color-text);
}

.ih-form .options-wrapper a {
	color: var(--ih-color-accent);
	text-underline-offset: .3em;
}

/* ---------- Избор като чипове (мокъп: fieldset.ih-form__chips + .ih-chip) – Radio поле на Bricks ---------- */
.ih-form .form-group[role="radiogroup"] {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ih-space-xs);
}

.ih-form .form-group[role="radiogroup"] > .label {
	margin-right: var(--ih-space-s); /* като legend в мокъпа: float + margin-right s, отстъп 2px */
	padding: 0 2px;
}

.ih-form .form-group[role="radiogroup"] .options-wrapper {
	display: contents;
}

.ih-form .form-group[role="radiogroup"] .options-wrapper li {
	position: relative;
	display: block;
}

.ih-form .form-group[role="radiogroup"] .options-wrapper input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ih-form .form-group[role="radiogroup"] .options-wrapper label {
	display: inline-flex;
	align-items: center;
	min-height: 4.4rem;
	padding: 0 var(--ih-space-m);
	border: 1px solid var(--ih-color-border);
	border-radius: var(--ih-radius-pill);
	background: var(--ih-color-surface);
	font-size: var(--ih-text-s);
	transition: background-color .2s, color .2s;
}

.ih-form .form-group[role="radiogroup"] input:checked + label {
	border-color: var(--ih-color-ink);
	background: var(--ih-color-ink);
	color: var(--ih-color-surface);
}

.ih-form .form-group[role="radiogroup"] input:focus-visible + label {
	outline: 2px solid var(--ih-color-accent);
	outline-offset: 2px;
}

/* ---------- Ред с бутона (мокъп: .ih-form__foot) – бележката е след бутона ---------- */
.ih-form .submit-button-wrapper {
	order: 1;
	width: auto;
	margin: 0;
	padding: 0 calc(var(--ih-space-l) / 2);
}

.ih-form .form-group:has(> .ih-form__note) {
	order: 2;
	align-self: center;
	width: auto !important;
	flex: 0 1 auto;
	padding: 0 calc(var(--ih-space-l) / 2);
}

.ih-form__note {
	max-width: 44rem;
	margin: 0;
	font-size: var(--ih-text-xs);
	color: var(--ih-color-text-muted);
}

/* Бутонът – като ih-btn ih-btn--primary (глобалният клас не стига до бутона на Bricks). */
.ih-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ih-space-xs);
	min-height: 4.8rem;
	margin: 0;
	padding: 0 var(--ih-space-l);
	border: 1px solid transparent;
	border-radius: var(--ih-radius-pill);
	background: var(--ih-color-ink);
	color: var(--ih-color-surface);
	font: 500 var(--ih-text-s)/1 var(--ih-font-body);
	letter-spacing: normal; /* Bricks .bricks-button */
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s;
}

.ih-form button[type="submit"]:hover {
	background: var(--ih-color-accent-dark);
}

/* ---------- Съобщения след изпращане ---------- */
.ih-form .message {
	order: 3;
	width: 100%;
	margin: 0 calc(var(--ih-space-l) / 2);
	padding: var(--ih-space-m) var(--ih-space-l);
	border-left: 2px solid var(--ih-color-accent-alt);
	border-radius: var(--ih-radius-s);
	background: var(--ih-color-surface-alt);
	font-size: var(--ih-text-s);
	color: var(--ih-color-ink);
}

.ih-form .message.error {
	border-left-color: var(--ih-color-error);
}

/* Телефон: една колона (мокъп ≤767). Bricks пише ширината по ID – затова !important. */
@media (max-width: 767px) {
	.ih-form .form-group:not(.file):not(.submit-button-wrapper):not(:has(> .ih-form__note)) {
		width: 100% !important;
	}
}

/* Тесен телефон: бележката пада под бутона – отстоянието е m (като .ih-form__foot в мокъпа), не l. */
@media (max-width: 478px) {
	.ih-form .form-group:has(> .ih-form__note) {
		margin-top: calc(var(--ih-space-m) - var(--ih-space-l));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ih-form input,
	.ih-form select,
	.ih-form textarea,
	.ih-form button[type="submit"],
	.ih-form .form-group.file {
		transition: none;
	}
}