/*
 * Компонент anmeldung-form — стилі форми «Anmeldung» (/anmeldung/, віджет Form
 * Elementor Pro, D-023). Поля, тексти й дії форми живуть в Elementor; тут —
 * лише те, чого віджет не вміє: індикатор кроків, вигляд радіо/чекбоксів,
 * випадаючий список слотів часу (розмітку створює anmeldung-form.js).
 * Кольори — глобальні змінні Elementor (Site Settings).
 */

/*
 * Індикатор кроків. Elementor дає кожному кроку flex-basis: 0, тож підпис
 * ламається на кожному слові («Wann / passt / es / Ihnen?»). Не переносити —
 * ширина береться з тексту, а роздільники між кроками забирають решту.
 */
.elementor-form .e-form__indicators__indicator__label {
	white-space: nowrap;
}

/*
 * На телефоні повні назви кроків не вміщаються навіть по одному слову в
 * рядку. Тут вони підмінюються короткими — Elementor дає крокам лише один
 * підпис, тож повний ховається (font-size: 0), а короткий малює ::before.
 * Між кроками стоять div-роздільники, тому кроки — 1-й, 3-й і 5-й нащадки.
 * Порядок кроків: Wer, Kontakt, Wann. Зміниш кроки — онови тут.
 */
@media (max-width: 767px) {
	.elementor-form .e-form__indicators__indicator__label {
		font-size: 0;
		line-height: 0;
	}

	.elementor-form .e-form__indicators__indicator__label::before {
		font-size: 13px;
		line-height: 1.4;
	}

	.elementor-form .e-form__indicators__indicator:nth-child(1) .e-form__indicators__indicator__label::before {
		content: "Wer";
	}

	.elementor-form .e-form__indicators__indicator:nth-child(3) .e-form__indicators__indicator__label::before {
		content: "Kontakt";
	}

	.elementor-form .e-form__indicators__indicator:nth-child(5) .e-form__indicators__indicator__label::before {
		content: "Wann";
	}
}

/*
 * Поля в одному ряду: підпис може зайняти два рядки (напр. «Arbeitsstelle /
 * Name der Schule…»), і сусіднє поле з'їжджало вгору. Група — flex з переносом,
 * тож притискаємо її рядки донизу: інпути в ряду завжди на одній лінії.
 */
.elementor-form .elementor-field-group {
	align-content: flex-end;
}

/*
 * Радіокнопки й чекбокси: стандартні браузерні надто дрібні. Колір — брендовий,
 * розмір — під текст поля, більший відступ між варіантами (зручніше пальцем).
 */
.elementor-form .elementor-field-option input[type="radio"],
.elementor-form .elementor-field-option input[type="checkbox"] {
	width: 1.25em;
	height: 1.25em;
	margin: 0 0.5em 0 0;
	vertical-align: -0.25em;
	accent-color: var(--e-global-color-vamtam_accent_1);
	cursor: pointer;
}

.elementor-form .elementor-field-subgroup .elementor-field-option {
	padding: 0.3em 1.5em 0.3em 0;
}

.elementor-form .elementor-field-subgroup .elementor-field-option label {
	cursor: pointer;
}

/* Чекбокс згоди — довгий текст: галочка по першому рядку, не по центру. */
.elementor-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}

.elementor-form .elementor-field-type-acceptance .elementor-field-option input {
	flex: none;
	margin: 0.2em 0 0;
}

/*
 * Вибір часових слотів (main.js загортає групу чекбоксів .ep-zeiten у
 * <details class="ergo-slots">). Рядок-підсумок повторює вигляд полів форми,
 * список відкривається під ним поверх решти форми.
 */
.ergo-slots {
	position: relative;
	width: 100%;
}

.ergo-slots__summary {
	list-style: none;
	cursor: pointer;
	padding: 0.85em 2.5em 0.85em 1.25em;
	border: 1px solid var(--e-global-color-vamtam_accent_7);
	border-radius: 999px;
	background: var(--e-global-color-vamtam_accent_5);
	color: var(--e-global-color-vamtam_accent_6);
	line-height: 1.5;
	position: relative;
}

.ergo-slots__summary::-webkit-details-marker {
	display: none;
}

.ergo-slots__summary::after {
	content: "";
	position: absolute;
	right: 1.25em;
	top: 50%;
	width: 0.5em;
	height: 0.5em;
	border: solid var(--e-global-color-vamtam_accent_6);
	border-width: 0 2px 2px 0;
	transform: translateY(-70%) rotate(45deg);
}

.ergo-slots[open] .ergo-slots__summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.ergo-slots__summary.is-empty {
	opacity: 0.6;
}

.ergo-slots__panel {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 20;
	margin-top: 0.5em;
	padding: 0.75em 1em;
	border: 1px solid var(--e-global-color-vamtam_accent_7);
	border-radius: 1.25em;
	background: var(--e-global-color-vamtam_accent_5);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ergo-slots__panel .elementor-field-subgroup {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 1em;
}

.ergo-slots__panel .elementor-field-option {
	padding: 0.35em 0;
	white-space: nowrap;
}

/* «ganztags» — окремим рядком над слотами */
.ergo-slots__panel .elementor-field-option:first-child {
	grid-column: 1 / -1;
	border-bottom: 1px solid var(--e-global-color-vamtam_accent_7);
	margin-bottom: 0.35em;
	padding-bottom: 0.6em;
}

@media (max-width: 767px) {
	.ergo-slots__panel .elementor-field-subgroup {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Поле HTML із підказками — Elementor дає йому tabindex і ставить на нього
 * фокус при переході на крок; рамка фокуса на тексті лише збиває з пантелику.
 */
.elementor-form .elementor-field-type-html:focus {
	outline: none;
}

/*
 * Індикатор кроків: круг із номером — 40px, як круг телефону в хедері.
 */
.elementor-form {
	--e-form-steps-indicator-padding: 40px;
}

.elementor-form .e-form__indicators__indicator__number {
	font-size: 14px;
}

/*
 * Кнопки кроків. Головна дія (Weiter / Anmeldung absenden) — у стилі кнопки
 * «Jetzt anmelden» у хедері: 48px заввишки, Manrope 14/600, за вмістом
 * (кольори — у налаштуваннях віджета: фон Accent 2, текст Accent 6, ховер —
 * Accent 1 / білий). «Zurück» — не друга кнопка, а підкреслений текст.
 * Десктоп: «Zurück» ліворуч, головна праворуч; телефон і планшет — стовпчиком
 * по центру, головна зверху. Відступи обгорток Elementor (20px знизу, 10px
 * з боків) обнулено — інакше між кнопками зяяла порожнеча.
 */
.elementor-form .e-form__buttons {
	flex-direction: column;
	align-items: center;
	gap: 0.75em 1.5em;
	margin: 0.5em 0 0.75em; /* знизу — повітря до тексту під формою */
	padding: 0 10px; /* як у полів: обгортка полів має margin 0 -10px, тож без цього кнопки виступали б за край полів */
}

/* Вага селектора вища за правило Elementor .elementor-NN .elementor-element… .elementor-field-group */
.elementor-widget-form .elementor-form .e-form__buttons > .elementor-field-group.e-form__buttons__wrapper {
	width: auto;
	flex: none;
	margin: 0;
	padding: 0;
	order: 1;
}

/* «Zurück» завжди після головної: на телефоні — під нею */
.elementor-widget-form .elementor-form .e-form__buttons > .elementor-field-group.e-form__buttons__wrapper.elementor-field-type-previous {
	order: 2;
}

.elementor-form .e-form__buttons__wrapper .elementor-button {
	width: auto;
	min-width: 12em;
	padding: 11px 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 26px;
}

/* Десктоп: у рядок, «Zurück» ліворуч, головна праворуч */
@media (min-width: 1025px) {
	.elementor-form .e-form__buttons {
		flex-direction: row;
		justify-content: space-between;
	}

	.elementor-widget-form .elementor-form .e-form__buttons > .elementor-field-group.e-form__buttons__wrapper.elementor-field-type-previous {
		order: 0;
	}

	/* лише одна кнопка (крок 1) — по правому краю, як і далі */
	.elementor-widget-form .elementor-form .e-form__buttons > .elementor-field-group.e-form__buttons__wrapper:only-child {
		margin-left: auto;
	}
}

/*
 * Вага селектора вища, ніж у правила розміру кнопок вище, і однакова для
 * звичайного стану, :hover і :focus — інакше на наведенні кнопка «стрибала»
 * з розміру кнопки в розмір тексту.
 */
.elementor-form .e-form__buttons__wrapper .elementor-button.e-form__buttons__wrapper__button-previous,
.elementor-form .e-form__buttons__wrapper .elementor-button.e-form__buttons__wrapper__button-previous:hover,
.elementor-form .e-form__buttons__wrapper .elementor-button.e-form__buttons__wrapper__button-previous:focus {
	min-width: 0;
	padding: 0.25em 0; /* без бічних відступів — текст на лінії полів */
	border: 0;
	background: transparent;
	color: var(--e-global-color-vamtam_accent_6);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	box-shadow: none;
}

.elementor-form .e-form__buttons__wrapper .elementor-button.e-form__buttons__wrapper__button-previous:hover {
	color: var(--e-global-color-vamtam_accent_1);
}