/**
 * Styling der Mitglied-Anmeldung.
 *
 * Nimmt die Design-Tokens des aktiven Themes (theme.json erzeugt die
 * --wp--preset--*-Variablen), dieselben wie im Mitgliederverzeichnis-Plugin.
 * Jeder Wert hat einen Fallback, damit das Plugin auch unter einem fremden
 * Theme benutzbar bleibt.
 *
 * Bewusst schlicht gehalten (kein eigenes Karten-Design, keine Deko-Badges):
 * Abschnitte sind einfache Titel mit Trennlinie, genau wie im echten
 * "Mitglied werden"-Formular auf zugwest.com.
 *
 * Alles ist unter .zma-signup gescoped -- es wird nichts am Theme oder an
 * globalen Elementen verändert. Entfernen = die wp_enqueue_style()-Zeile in
 * includes/class-zma-plugin.php löschen (oder diese Datei löschen).
 */

.zma-signup {
	--zma-background: var( --wp--preset--color--background, #ffffff );
	--zma-foreground: var( --wp--preset--color--foreground, #1d1d1b );
	--zma-muted: var( --wp--preset--color--muted-foreground, #7c7c7c );
	--zma-border: var( --wp--preset--color--border, #dddddd );
	--zma-primary: var( --wp--preset--color--primary, #ff6600 );
	--zma-primary-hover: var( --wp--preset--color--primary-hover, #e05a00 );
	--zma-surface: var( --wp--preset--color--surface, #f0f0f0 );
	--zma-destructive: #c0392b;
	--zma-success: #2f7d4f;
	--zma-radius: var( --wp--custom--radius--small, 4px );
	--zma-radius-button: var( --wp--custom--radius--button, 16px );
	--zma-radius-box: var( --wp--custom--radius--box, 0 );   /* Abschnitte, Meldungen: wie die Boxen im Theme (Token, aktuell eckig) */
	--zma-button-height: var( --wp--custom--button--height, 43px );
	--zma-button-min-width: var( --wp--custom--button--cta-width, 268px );
	--zma-chip-height: var( --wp--custom--button--height-chip, 32px );
	--zma-chip-min-width: var( --wp--custom--button--chip-width, 102px );
	--zma-font-small: var( --wp--preset--font-size--small, 0.8125rem );
	--zma-font-medium: var( --wp--preset--font-size--medium, 1rem );
	--zma-font-large: var( --wp--preset--font-size--large, 1.375rem );
	--zma-line-height: var( --wp--custom--line-height--body, 1.375 );
	--zma-transition: var( --wp--custom--transition--fast, 220ms ease );
	--zma-transition-medium: var( --wp--custom--transition--medium, 360ms cubic-bezier( 0.22, 1, 0.36, 1 ) );
	--zma-focus-ring: 0 0 0 3px rgb( 255 102 0 / 0.25 );

	color: var( --zma-foreground );
}

/* Linksbuendig in der Inhaltsspalte (Stefan 26.10.2026): die Breite sitzt auf Tabs und
   Formular, nicht auf dem Wrapper -- den wuerde das Theme-Layout zentrieren. */
.zma-tablist,
.zma-form {
	max-width: 40rem;
}

/* Tabs als Filter-Chips des Themes (grau, aktiv orange, Radius 16): die
   Chips bleiben immer grau, die orange Indikator-Pille liegt dazwischen --
   über dem grauen Chip, unter der Beschriftung (.zma-tab-label) -- und
   gleitet per JS (offsetLeft/offsetWidth des aktiven Tabs). So bleibt beim
   Wechsel überall Grau statt Weiss. CSS übernimmt nur die Animation. */
.zma-tablist {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 1.0625rem;
	margin: var( --wp--preset--spacing--50, 1.875rem ) 0 2rem;   /* mit dem Titelabstand des Themes (12px) 42px zum Seitentitel, wie das Suchfeld im Verzeichnis */
	padding: 0;
}

.zma-tab-indicator {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background-color: var( --zma-primary );
	border-radius: var( --zma-radius-button );
	transition: transform var( --zma-transition-medium ), width var( --zma-transition-medium );
}

.zma-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var( --zma-chip-height );
	min-width: var( --zma-chip-min-width );
	padding: 0 1.0625rem;
	font: inherit;
	font-size: var( --zma-font-medium );
	font-weight: 700;
	line-height: var( --zma-line-height );
	color: var( --zma-background );
	background-color: var( --zma-muted );
	border: none;
	border-radius: var( --zma-radius-button );
	cursor: pointer;
	transition: background-color var( --zma-transition );
}

.zma-tab:hover {
	background-color: var( --zma-primary );
}

.zma-tab-label {
	position: relative;
	z-index: 2;
}

.zma-tab:focus-visible {
	outline: none;
	box-shadow: var( --zma-focus-ring );
}

/* Abschnitte: Titel liegt AUSSERHALB der Box (<legend>, reine Ueberschrift),
   der eigentliche Rahmen sitzt auf .zma-fieldset-body -- einem normalen
   <div>. Grund: <fieldset>/<legend> lassen den Rahmen je nach Browser hinter
   dem Legend-Text verschwinden (native "Notch"-Darstellung, auch mit
   display:block auf der legend nicht zuverlässig abstellbar). Auf einem
   div ohne legend gibt es dieses Problem nicht -- der Rahmen ist rundum
   durchgezogen. */
.zma-fieldset {
	margin: 0 0 1.5rem;
	padding: 0;
	border: none;
}

/* Abschnittstitel in der Titelschrift des Themes (wie H2/H3 auf Inhaltsseiten) */
.zma-fieldset legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 0.75rem;
	font-size: var( --wp--preset--font-size--large, 1.25rem );
	font-weight: 600;
}

/* Abschnitt weiss mit feiner Linie, eckig wie die Boxen im Theme; die Felder behalten ihre leichte Rundung */
.zma-fieldset-body {
	padding: 1.5rem;
	background-color: var( --zma-background );
	border: 1px solid var( --zma-border );
	border-radius: var( --zma-radius-box );
}

.zma-legend-hint {
	margin-left: 0.375rem;
	font-size: var( --zma-font-small );
	font-weight: 400;
	color: var( --zma-muted );
}

.zma-field-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
	gap: 0 1.25rem;
}

/* PLZ und Ort: immer nebeneinander, PLZ ein Drittel */
.zma-field-row--plz {
	grid-template-columns: 1fr 2fr;
}

.zma-field {
	margin: 0 0 1.25rem;
}

.zma-fieldset-body > .zma-field:last-child,
.zma-toggle-fields > .zma-field:last-child {
	margin-bottom: 0;
}

.zma-field label {
	display: block;
	margin: 0 0 0.375rem;
	font-size: var( --zma-font-medium );
	font-weight: 500;
}

.zma-field span[ aria-hidden="true" ] {
	color: var( --zma-destructive );
}

/* Eingabefelder: eckig, dezente Linie, oranger Fokus-Ring -- wie das
   Suchfeld im Mitgliederverzeichnis. */
.zma-field input[ type="text" ],
.zma-field input[ type="email" ],
.zma-field select,
.zma-field textarea {
	display: block;
	width: 100%;
	height: 2.75rem;
	padding: 0 0.875rem;
	font: inherit;
	font-size: var( --zma-font-medium );
	color: var( --zma-foreground );
	background-color: var( --zma-background );
	border: 1px solid var( --zma-border );
	border-radius: var( --zma-radius );
	box-sizing: border-box;
	transition: border-color var( --zma-transition ), box-shadow var( --zma-transition );
}

.zma-field textarea {
	height: auto;
	padding: 0.625rem 0.875rem;
	resize: vertical;
}

.zma-field input:hover,
.zma-field select:hover,
.zma-field textarea:hover {
	border-color: var( --zma-muted );
}

.zma-field input:focus-visible,
.zma-field select:focus-visible,
.zma-field textarea:focus-visible {
	outline: none;
	border-color: var( --zma-primary );
	box-shadow: var( --zma-focus-ring );
}

.zma-field input[ aria-invalid="true" ],
.zma-field select[ aria-invalid="true" ],
.zma-field textarea[ aria-invalid="true" ] {
	border-color: var( --zma-destructive );
}

/* Checkboxen */
.zma-field-checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.625rem;
}

/* Fehlermeldung unter die Checkbox-Zeile, nicht daneben */
.zma-field-checkbox .zma-field-error {
	flex-basis: 100%;
}

/* Eigene Checkbox: weiss mit Linie wie die Felder, angehakt orange mit weissem Haekchen
   (accent-color ueberlaesst die Haekchenfarbe dem Browser, Chrome zeichnet es auf Orange dunkel) */
.zma-field-checkbox input[ type="checkbox" ] {
	appearance: none;
	box-sizing: border-box;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.15rem 0 0;
	flex-shrink: 0;
	background: var( --zma-background ) no-repeat center / 0.75rem;
	border: 1px solid var( --zma-muted );
	border-radius: var( --zma-radius );
	cursor: pointer;
	transition: background-color var( --zma-transition ), border-color var( --zma-transition );
}

.zma-field-checkbox input[ type="checkbox" ]:hover {
	border-color: var( --zma-primary );
}

.zma-field-checkbox input[ type="checkbox" ]:checked {
	background-color: var( --zma-primary );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	border-color: var( --zma-primary );
}

.zma-field-checkbox input[ type="checkbox" ]:focus-visible {
	outline: none;
	box-shadow: var( --zma-focus-ring );
}

.zma-field-checkbox input[ type="checkbox" ][ aria-invalid="true" ] {
	border-color: var( --zma-destructive );
}

.zma-field-checkbox label {
	flex: 1 1 0;   /* Text bricht neben der Checkbox um, statt unter sie zu rutschen */
	min-width: 0;
	margin: 0;
	font-size: var( --zma-font-medium );
	font-weight: 400;
	line-height: 1.5;
}

.zma-field-checkbox label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var( --zma-transition );
}

.zma-field-checkbox label a:hover,
.zma-field-checkbox label a:focus-visible {
	color: var( --zma-primary );
}

/* Datenschutz-Zustimmung: kein eigener Kasten mehr, nur etwas Abstand zum
   Rest -- hält den Flow schlicht, hebt die Zustimmung trotzdem leicht ab. */
.zma-field-highlight {
	margin-top: 1.75rem;
}

/* Feld-Fehlermeldungen */
.zma-field-error {
	margin: 0.375rem 0 0;
	font-size: var( --zma-font-small );
	color: var( --zma-destructive );
}

.zma-field-error:empty {
	display: none;
}

/* Status-Banner (Erfolg/Fehler beim Absenden) */
.zma-form-status {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1.125rem;
	font-size: var( --zma-font-medium );
	border-radius: var( --zma-radius-box );
	border: 1px solid transparent;
	/* Abstand nach oben beim automatischen Hinscrollen (siehe scrollToMessage()
	   in signup.js), damit die Meldung nicht direkt am Viewport-Rand klebt. */
	scroll-margin-top: 1.5rem;
}

.zma-form-status.zma-status-success {
	color: var( --zma-success );
	background-color: rgb( 47 125 79 / 0.08 );
	border-color: rgb( 47 125 79 / 0.25 );
}

.zma-form-status.zma-status-error {
	color: var( --zma-destructive );
	background-color: rgb( 192 57 43 / 0.08 );
	border-color: rgb( 192 57 43 / 0.25 );
}

/* Absenden-Button = Standard-Button des Themes (orange, 43 hoch, mind. 268
   breit, Radius 16, Bold 16, Hover dunkleres Orange). */
.zma-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var( --zma-button-height );
	min-width: var( --zma-button-min-width );
	margin: 0.5rem 0 0;
	padding: 0 1.5rem;
	font: inherit;
	font-size: var( --zma-font-medium );
	font-weight: 700;
	line-height: var( --zma-line-height );
	color: var( --zma-background );
	background-color: var( --zma-primary );
	border: 1px solid transparent;
	border-radius: var( --zma-radius-button );
	cursor: pointer;
	transition: background-color var( --zma-transition ), box-shadow var( --zma-transition );
}

.zma-submit:hover {
	background-color: var( --zma-primary-hover );
}

.zma-submit:focus-visible {
	outline: none;
	box-shadow: var( --zma-focus-ring );
}

.zma-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Lade-Zustand (siehe setLoading() in signup.js): Button bleibt beim
   Absenden voll sichtbar (kein Ausbleichen wie sonst bei :disabled), Text
   weicht einem rotierenden Ring, damit klar ist, dass etwas passiert. */
.zma-submit.is-loading:disabled {
	opacity: 1;
	cursor: default;
}

.zma-submit.is-loading .zma-submit-label {
	visibility: hidden;
}

.zma-submit-spinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.125rem;
	height: 1.125rem;
	margin: -0.5625rem 0 0 -0.5625rem;
	border: 2px solid rgb( 255 255 255 / 0.35 );
	border-top-color: var( --zma-background );
	border-radius: 50%;
}

.zma-submit.is-loading .zma-submit-spinner {
	display: block;
}

@media ( prefers-reduced-motion: no-preference ) {
	.zma-submit.is-loading .zma-submit-spinner {
		animation: zma-spin 0.7s linear infinite;
	}
}

@keyframes zma-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Erfolgs-Panel: ersetzt die Eingabefelder komplett nach erfolgreichem Absenden. */
.zma-success {
	padding: 3rem 1.5rem;
	text-align: center;
	scroll-margin-top: 1.5rem;
}

@media ( prefers-reduced-motion: no-preference ) {
	.zma-success:not( [ hidden ] ) {
		animation: zma-success-in 0.3s ease-out;
	}
}

@keyframes zma-success-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.zma-success-icon {
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 1.25rem;
}

.zma-success-icon circle {
	fill: var( --zma-success );
}

.zma-success-icon path {
	stroke: var( --zma-background );
}

.zma-success-title {
	margin: 0 0 0.5rem;
	font-size: var( --zma-font-large );
	font-weight: 700;
}

.zma-success-message {
	margin: 0 0 1.75rem;
	font-size: var( --zma-font-medium );
	color: var( --zma-muted );
}

.zma-success-message:empty {
	display: none;
}

.zma-success-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var( --zma-button-height );
	min-width: var( --zma-button-min-width );
	padding: 0 1.5rem;
	font: inherit;
	font-size: var( --zma-font-medium );
	font-weight: 600;
	line-height: var( --zma-line-height );
	color: var( --zma-foreground );
	background-color: var( --zma-background );
	border: 1px solid var( --zma-primary );
	border-radius: var( --zma-radius-button );
	cursor: pointer;
	transition: background-color var( --zma-transition ), color var( --zma-transition );
}

.zma-success-reset:hover {
	background-color: var( --zma-primary );
	color: var( --zma-background );
}

.zma-success-reset:focus-visible {
	outline: none;
	box-shadow: var( --zma-focus-ring );
}

@media ( prefers-reduced-motion: reduce ) {
	.zma-signup * {
		transition-duration: 1ms !important;
	}

	.zma-success {
		animation: none;
	}
}

/* Mobil naeher an den Titel (Stefan 28.10.2026): 18px + 12px Titelabstand = 30px */
@media ( max-width: 669px ) {
	.zma-tablist {
		margin-top: var( --wp--preset--spacing--30, 1.125rem );
	}
}