/**
 * WebinarIgnition – Stripe checkout card on the CLASSIC registration path.
 *
 * Why this file exists (2026-10-17, Prüfer-Fund 2):
 * `inc/lp/css/wi-sc-form.css` is enqueued **only** in SC-custom mode (see
 * inc/class.WebinarignitionPowerupsShortcodes.php, branch `$_sc_custom`). On the classic
 * templates (registration-tpl-01..03) and on GB landings without SC-custom, the Stripe card in
 * the paid form therefore had no styling of its own: the mount node stayed at Stripe's own
 * 16.8–24px next to 52px text fields, the amount row and the "Powered by Stripe" line were
 * unstyled. This file is that missing block — the same card as in wi-sc-form.css, but scoped to
 * the form element that every renderer emits, so it works without `.wi-sc-form-wrap`.
 *
 * Scope: `.wi-optin-form` (optin-form-generate.php renders exactly one such form on every path).
 * **Not** `.paidWebinarBlock`: measured in optin-form.php / optin-section.php, that block only
 * wraps the PayPal / WooCommerce / "other" checkout. With Stripe those partials render
 * `.paidHeadlineBlock` and the card lives inside the one registration form — a `.paidWebinarBlock`
 * scope would match nothing on a Stripe checkout.
 *
 * Colours: roles only (--wi-fse-card-bg / --wi-fse-card-ink / --wi-fse-error). No light-theme
 * fix colours — on a light page `inherit` is the page's own ink and the card simply follows it.
 *
 * Enqueued by: inc/class.WebinarignitionPowerupsShortcodes.php (shortcode/GB path, non-SC branch)
 * and inc/assets/class-frontend-scripts.php (classic registration templates).
 */

.wi-optin-form .wi-paid-checkout {
	display:        flex;
	flex-direction: column;
	gap:            0.6em;
	width:          100%;
	margin:         0.15em 0 0.9em;
	box-sizing:     border-box;
}

.wi-optin-form .wi-pay-card {
	display:          flex;
	flex-direction:   column;
	gap:              0.5em;
	width:            100%;
	box-sizing:       border-box;
	padding:          10px 14px;
	/* Rahmen: erst ein einfacher Farbwert OHNE color-mix, dann die color-mix-Fassung im
	 * @supports-Block darunter (2026-10-17, Prüfer-Fund 5). Warum nicht nur color-mix: der
	 * `border`-Shorthand mit einem unauflösbaren color-mix ist „invalid at computed-value
	 * time" — dann fällt der GANZE Rahmen weg (initial = medium none), nicht nur die Farbe.
	 * Safari/iOS < 16.2 kennt color-mix nicht und verlor den Rahmen komplett. Deshalb sind
	 * Breite/Style/Farbe jetzt getrennt und die Farbe hat einen gültigen Fallback. */
	border-width:     1px;
	border-style:     solid;
	border-color:     rgba(127, 127, 127, 0.45);
	border-radius:    var(--wi-input-radius, 4px);
	background-color: var(--wi-fse-card-bg, inherit);
	color:            var(--wi-fse-card-ink, inherit);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.wi-optin-form .wi-pay-card {
		border-color: color-mix(in srgb, currentColor 18%, transparent);
	}
}

.wi-optin-form .wi-pay-card__amount {
	display:     flex;
	align-items: baseline;
	flex-wrap:   wrap;
	gap:         0.15em 0.5em;
}

.wi-optin-form .wi-pay-card__amount-label {
	font-size:   0.85rem;
	line-height: 1.35;
	opacity:     0.75;
}

.wi-optin-form .wi-pay-card__amount-value {
	font-size:   1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color:       inherit;
}

.wi-optin-form .wi-pay-card__field {
	display:        flex;
	flex-direction: column;
	width:          100%;
	box-sizing:     border-box;
}

.wi-optin-form .wi-pay-card__field label.wi-label {
	margin:      0 0 0.3em;
	padding:     0;
	font-size:   0.85rem;
	font-weight: 600;
	line-height: 1.35;
	text-align:  left;
	color:       inherit;
}

/* The card field. Height matches the WI form field of this path — `.wiFormControl` is 34px
 * (inc/lp/css/webinar-modern.css: height 34px, padding 6px 12px, border 1px, radius 4px);
 * measured on the classic Bootstrap templates the plain input lands at 26px, so 34px is the
 * taller, still native-looking neighbour. NOT 52px: that number belongs to the SC-custom form
 * (wi-sc-form.css), where every text field is 52px — forcing it here would make the card
 * 18–26px taller than every field around it (measured 2026-10-17).
 *
 * The Stripe iframe keeps its own inline height (measured: 24px at fontSize 16px, 16.8px at
 * 14px — unchanged in the invalid-card state) and is centred here. No fixed iframe height, so
 * Stripe keeps control over its own box, and its invisible "Link" button iframe keeps
 * `height: 0` instead of being blown up over the field. */
.wi-optin-form .wi-pay-card .wi-stripe-card-element {
	display:     flex;
	align-items: center;
	min-height:  34px;
	width:       100%;
	padding:     0 12px;
	box-sizing:  border-box;
	/* Breite/Style/Farbe getrennt + einfacher Fallback-Farbwert, color-mix erst im
	 * @supports-Block (2026-10-17, Prüfer-Fund 5): ein `border`-Shorthand mit color-mix ist
	 * ohne color-mix-Support komplett ungültig und der Rahmen verschwindet ganz. */
	border-width: 1px;
	border-style: solid;
	border-color: rgba(127, 127, 127, 0.45);
	border-radius: var(--wi-input-radius, 4px);
	/* Feld-Tönung: gleiche Regel — rgba zuerst, color-mix (4 % currentColor) danach im
	 * @supports-Block. Ohne Fallback stünde auf alten Safari-Versionen gar kein Feldhintergrund. */
	background-color: rgba(127, 127, 127, 0.06);
	transition:  border-color 0.15s ease;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.wi-optin-form .wi-pay-card .wi-stripe-card-element {
		border-color:     color-mix(in srgb, currentColor 18%, transparent);
		background-color: color-mix(in srgb, currentColor 4%, transparent);
	}
}

.wi-optin-form .wi-pay-card .wi-stripe-card-element:focus-within {
	border-color: rgba(127, 127, 127, 0.62);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.wi-optin-form .wi-pay-card .wi-stripe-card-element:focus-within {
		border-color: color-mix(in srgb, currentColor 45%, transparent);
	}
}

.wi-optin-form .wi-pay-card .wi-stripe-card-element > .__PrivateStripeElement {
	flex:      1 1 auto;
	width:     100%;
	min-width: 0;
}

/* Width only — Stripe sets `width: 1px` inline and relies on min-width: 100%. No height. */
.wi-optin-form .wi-pay-card .wi-stripe-card-element iframe {
	display: block;
	width:   100% !important;
	border:  0;
}

.wi-optin-form .wi-pay-card__powered {
	display:     flex;
	align-items: center;
	gap:         0.4em;
	margin:      0.15em 0 0;
	padding:     0;
	font-size:   0.75rem;
	line-height: 1.3;
	text-align:  left;
	color:       inherit;
	opacity:     0.72;
}

.wi-optin-form .wi-pay-card__powered svg,
.wi-optin-form .wi-pay-card__powered .wi-pay-card__lock {
	width:   1em;
	height:  1em;
	flex:    0 0 auto;
	opacity: 0.9;
}

/* Payment messages. `display: none` here is the real carrier — it also covers the KSES paths,
 * where the markup's inline `display:none` never arrives: `safecss_filter_attr` drops the whole
 * style attribute up to WordPress 6.9 (`display` has only been in safe_style_css since 7.0),
 * so on those paths only this rule hides the empty paragraph. On paths rendered without KSES
 * the inline value is a second safety net (no theme margin before this file is parsed).
 * jQuery `.show()` sets inline display:block and therefore beats this rule, `.hide()` puts it
 * back. Colour comes from --wi-fse-error so the colour guard can bind it to the palette —
 * never an inline colour (that would beat the guard's !important).
 * 2026-10-17 (Prüfer-Fund 2/4, Nacharbeit): Reihenfolge in registration-page.js ist jetzt
 * „sichtbar, dann Text" — eine Live-Region muss beim Einfügen sichtbar sein. */
.wi-optin-form .wi-paid-checkout .payment-errors {
	display:     none;
	margin:      0;
	padding:     0.15em 0 0;
	font-size:   0.9em;
	font-weight: 600;
	line-height: 1.4;
	text-align:  center;
	color:       var(--wi-fse-error, #E5484D);
	-webkit-text-fill-color: var(--wi-fse-error, #E5484D);
}

.wi-optin-form .wi-paid-checkout .payment-success {
	display:     none;
	margin:      0;
	padding:     0.15em 0 0;
	font-size:   0.9em;
	font-weight: 600;
	line-height: 1.4;
	text-align:  center;
	color:       inherit;
}