/* =================================================================
   Stadtwerke Weiden – Formular-Styling (global)

   Gilt für alle Elementor-Formular-Widgets (.elementor-widget-form).
   Voraussetzung im Widget: Label-Position "Oben".

   Formularspezifische Ergänzungen (Feldblock-Einzug, Kundentyp-Auswahl,
   Breite des Anrede-Felds, Ein-/Ausblenden der Kundennummer) liegen im
   HTML-Widget des jeweiligen Formulars.

   Die Labels überlappen den Feldrahmen und schneiden ihn optisch auf. Damit
   das auf jedem Untergrund passt, liefert assets/js/forms.js je Formular die
   tatsächliche Hintergrundfarbe als --sww-form-bg nach; der Wert unten ist
   nur die Rückfallebene.

   Geladen wird die Datei in functions.php, siehe sww_forms_enqueue_assets().
   ================================================================= */

.elementor-widget-form{
	/* ---- zentrale Stellschrauben ----------------------------- */
	--sww-radius: 40px;              /* Eckenradius der Felder (Desktop)      */
	--sww-radius-mobile: 30px;       /* Eckenradius der Felder (bis 767px)    */
	--sww-border-width: 1px;         /* Rahmenstärke                          */
	--sww-field-height: 48px;        /* Höhe der einzeiligen Felder           */
	--sww-field-padding-x: 22px;     /* Innenabstand links/rechts             */
	--sww-label-offset: 14px;        /* horizontale Position des Labels       */
	--sww-label-size: 15px;          /* Schriftgröße Label                    */
	--sww-choice-size: 18px;         /* Größe von Radio / Checkbox            */

	/* ---- Farben ---------------------------------------------- */
	--sww-line: var(--e-global-color-secondary);         /* Rahmen + Label            */
	--sww-line-focus: var(--e-global-color-primary);     /* Rahmen im Focus, Auswahl  */

	/* Hintergrund hinter dem Label – muss der Hintergrundfarbe hinter dem
	   Formular entsprechen, damit das Label den Rahmen "aufschneidet".
	   Das Script ermittelt den Wert je Formular automatisch,
	   der Wert hier ist nur der Fallback.                                     */
	--sww-form-bg: #FFFFFF;
}

/* ---- Labels (überlappen den Rahmen) ----------------------------------- */

.elementor-widget-form .elementor-labels-above .elementor-field-group > .elementor-field-label{
	position: relative;
	z-index: 1;
	flex-basis: auto;
	width: auto;
	max-width: calc(100% - var(--sww-label-offset) - 10px);
	margin: 0 0 -0.6em var(--sww-label-offset);
	padding: 0 6px;
	background-color: var(--sww-form-bg);
	color: var(--sww-line);
	font-size: var(--sww-label-size);
	line-height: 1.2;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: color .2s ease;
}

/* Eingabefeld immer in eine eigene Zeile unter dem Label */
.elementor-widget-form .elementor-form .elementor-field-group > .elementor-field,
.elementor-widget-form .elementor-form .elementor-field-group > .elementor-select-wrapper,
.elementor-widget-form .elementor-form .elementor-field-group > .elementor-field-subgroup{
	flex-basis: 100%;
	max-width: 100%;
}

/* Nur im aktiven Feld: Label fett. Bei Hover bleibt die Schriftstärke normal. */
.elementor-widget-form .elementor-form .elementor-field-group:focus-within > .elementor-field-label{
	color: var(--sww-line);
	font-weight: 700;
}

/* Pflichtfeld-Stern in Label-Farbe statt Rot, direkt am Text */
.elementor-widget-form .elementor-form .elementor-mark-required .elementor-field-label:after{
	content: '*';
	color: currentColor;
	padding-inline-start: 0;
	padding-left: 0;
}

/* leere Labels ausblenden (z. B. bei Zustimmungs-Feldern) */
.elementor-widget-form .elementor-form .elementor-field-label:empty{ display: none; }

/* ---- Eingabefelder ---------------------------------------------------- */

.elementor-widget-form .elementor-form .elementor-field-textual{
	background-color: transparent;
	border: var(--sww-border-width) solid var(--sww-line);
	border-radius: var(--sww-radius);
	min-height: var(--sww-field-height);
	padding: 10px var(--sww-field-padding-x);
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .2s ease;
}

.elementor-widget-form .elementor-form .elementor-field-group:hover .elementor-field-textual,
.elementor-widget-form .elementor-form .elementor-field-group:focus-within .elementor-field-textual,
.elementor-widget-form .elementor-form .elementor-field-textual:focus{
	border-color: var(--sww-line-focus);
	box-shadow: none;
	outline: none;
}

.elementor-widget-form .elementor-form textarea.elementor-field-textual{
	min-height: 180px;
	padding-top: 16px;
	resize: vertical;
}

/* Autofill (Chrome) nicht blau/gelb einfärben */
.elementor-widget-form .elementor-form .elementor-field-textual:-webkit-autofill,
.elementor-widget-form .elementor-form .elementor-field-textual:-webkit-autofill:focus{
	-webkit-box-shadow: 0 0 0 1000px var(--sww-form-bg) inset;
	box-shadow: 0 0 0 1000px var(--sww-form-bg) inset;
	-webkit-text-fill-color: currentColor;
}

/* ---- Auswahlfelder (Select) ------------------------------------------- */

.elementor-widget-form .elementor-form .elementor-select-wrapper select{
	padding-inline-end: 40px;
	padding-right: 40px;
}

/* Pfeil einfärben. Elementor rendert ihn je nach Version als
   :before-Pseudoelement oder als eigenes Div.                             */
.elementor-widget-form .elementor-form .elementor-select-wrapper:before,
.elementor-widget-form .elementor-form .elementor-select-wrapper .select-caret-down-wrapper{
	color: var(--sww-line);
	text-shadow: none;
	inset-inline-end: 18px;
	right: 18px;
}

/* Pfeil komplett ausblenden? Dann diese Zeilen aktivieren:
.elementor-widget-form .elementor-form .elementor-select-wrapper:before,
.elementor-widget-form .elementor-form .elementor-select-wrapper .select-caret-down-wrapper{ display: none; }
*/

/* ---- Radio-Buttons & Checkboxen --------------------------------------- */

.elementor-widget-form .elementor-form .elementor-field-subgroup{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.elementor-widget-form .elementor-form .elementor-field-subgroup.elementor-subgroup-inline{
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.elementor-widget-form .elementor-form .elementor-field-subgroup .elementor-field-option{
	display: flex;
	align-items: flex-start;
	flex-basis: auto;
	gap: 12px;
	padding: 0;
}

.elementor-widget-form .elementor-form input[type="radio"],
.elementor-widget-form .elementor-form input[type="checkbox"]{
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: var(--sww-choice-size);
	height: var(--sww-choice-size);
	margin: 2px 0 0 0;
	padding: 0;
	border: var(--sww-border-width) solid var(--sww-line);
	border-radius: 50%;
	background-color: transparent;
	background-image: none;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.elementor-widget-form .elementor-form input[type="radio"]:checked,
.elementor-widget-form .elementor-form input[type="checkbox"]:checked{
	border-color: var(--sww-line-focus);
	background-color: var(--sww-line-focus);
	box-shadow: inset 0 0 0 3px var(--sww-form-bg);
}

.elementor-widget-form .elementor-form input[type="radio"]:focus-visible,
.elementor-widget-form .elementor-form input[type="checkbox"]:focus-visible{
	outline: 2px solid var(--sww-line-focus);
	outline-offset: 2px;
}

.elementor-widget-form .elementor-form .elementor-field-option label,
.elementor-widget-form .elementor-form .elementor-field-type-acceptance .elementor-field-subgroup > label{
	margin: 0;
	color: var(--sww-line);
	font-size: 15px;
	line-height: 1.45;
	font-weight: 400;
	cursor: pointer;
	transition: color .2s ease;
}

/* gewählte Radio-Option hervorheben */
.elementor-widget-form .elementor-form input[type="radio"]:checked + label{
	color: var(--sww-line-focus);
}

.elementor-widget-form .elementor-form .elementor-field-type-acceptance a{
	color: inherit;
	text-decoration: underline;
}

.elementor-widget-form .elementor-form .elementor-field-type-acceptance{
	margin-top: 14px;
}

/* ---- Button ----------------------------------------------------------- */

.elementor-widget-form .elementor-form .elementor-field-type-submit{
	margin-top: 34px;
}

.elementor-widget-form .elementor-form .elementor-button{
	border-radius: var(--sww-radius);
	min-height: var(--sww-field-height);
	padding: 12px 34px;
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 767px){
	.elementor-widget-form{
		--sww-radius: var(--sww-radius-mobile);
		--sww-field-padding-x: 18px;
		--sww-label-offset: 12px;
	}
	/* alle Felder untereinander (greift auch, falls in Elementor
	   die mobile Breite eines Feldes nicht auf 100% steht)         */
	.elementor-widget-form .elementor-form .elementor-field-group{
		width: 100%;
		max-width: 100%;
	}
	.elementor-widget-form .elementor-form textarea.elementor-field-textual{ min-height: 150px; }
}