/*
 * GF V1 funnel -- Produktauswahl (V2-Overnight-Alpha §8, Worker B).
 *
 * Turns the required "Wählen Sie Ihr Produkt" radio field
 * (GravityFormsBridge::PLAN_TYPE_FIELD_ID, css class
 * `abostopp-plan-picker`, set by apply_plan_picker_copy()) into two
 * tappable product cards, using Gravity Forms' own existing choice markup
 * (`.gchoice` list items containing a real `<input type="radio">` +
 * `<label>`) -- no separate/duplicate markup, no JS required for the
 * visual card treatment itself (a `:checked` sibling selector highlights
 * the selected card; see below for the JS-applied fallback class on
 * browsers without CSS `:has()`).
 *
 * Consumes the canonical `v2-tokens.css` custom properties (Overnight-
 * Alpha §14) -- this is new V2 UI, unlike the pre-existing
 * gf-v1-funnel-design.css (which predates the token file and keeps its
 * own already-approved literal hex values, intentionally untouched here).
 * Enqueued with `AboStopp\Core\Frontend\DesignTokens::HANDLE` as an
 * explicit dependency (GravityFormsBridge::enqueue_review_assets()), so
 * these variables are always defined regardless of which page embeds
 * Config::CANCELLATION_FORM_ID.
 *
 * Scoped to `#gform_wrapper_1` (Config::CANCELLATION_FORM_ID), same
 * convention as gf-v1-funnel-design.css.
 */

#gform_wrapper_1 .abostopp-plan-picker .ginput_container_radio ul.gfield_radio {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

#gform_wrapper_1 .abostopp-plan-picker .gchoice {
	position: relative;
	margin: 0;
	border: 1px solid var(--as-border, #d7e0e8);
	border-radius: var(--as-radius, 10px);
	background: var(--as-surface, #fff);
	transition: border-color .15s ease, box-shadow .15s ease;
}

#gform_wrapper_1 .abostopp-plan-picker .gchoice label {
	display: block;
	width: 100%;
	min-height: var(--as-touch-min, 44px);
	padding: 12px 14px 12px 48px;
	margin: 0;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--as-text, #17324d);
	cursor: pointer;
}

#gform_wrapper_1 .abostopp-plan-picker .gchoice input[type="radio"] {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--as-green, #527F31);
}

/* Selected-state highlight -- CSS-only where `:has()` is supported. */
#gform_wrapper_1 .abostopp-plan-picker .gchoice:has(input:checked) {
	border-color: var(--as-primary-hover, #84C83D);
	box-shadow: 0 0 0 1px var(--as-primary-hover, #84C83D) inset;
	background: var(--as-surface-muted, #EEEADD);
}

/* JS-applied fallback for browsers without `:has()` support -- toggled by
 * gf-v1-funnel-review.js purely for this visual state, never for anything
 * authoritative (the real submitted value is still the native radio
 * input's own `checked` state, read server-side exactly like any other
 * GF field). */
#gform_wrapper_1 .abostopp-plan-picker .gchoice.abostopp-plan-picker__choice--selected {
	border-color: var(--as-primary-hover, #84C83D);
	box-shadow: 0 0 0 1px var(--as-primary-hover, #84C83D) inset;
	background: var(--as-surface-muted, #EEEADD);
}

#gform_wrapper_1 .abostopp-plan-picker .gfield_description {
	font-size: 12px;
	line-height: 1.5;
	color: var(--as-text-secondary, #516273);
	margin-top: 8px;
}

@media (prefers-color-scheme: dark) {
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-plan-picker .gchoice {
		border-color: #2a3138;
		background: #1b2126;
	}
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-plan-picker .gchoice label {
		color: #edeff1;
	}
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-plan-picker .gchoice:has(input:checked),
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-plan-picker .gchoice.abostopp-plan-picker__choice--selected {
		background: #163024;
	}
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-plan-picker .gfield_description {
		color: #9aa4ae;
	}
}

/* --- Review step: the product-specific order summary block (§ 312j Abs. 2
 * BGB conditions, OrderCreation\OrderSummaryPresenter::mandatory_disclosure_rows())
 * -- new V2 markup inside the existing review `html` field's content, see
 * GravityFormsBridge::apply_review_summary_content(). --- */

#gform_wrapper_1 .abostopp-review__product-heading {
	font-weight: 700;
	font-size: 15px;
	color: var(--as-text, #17324d);
	margin: 2px 0 8px;
}

#gform_wrapper_1 .abostopp-review__order-summary dt {
	color: var(--as-text-secondary, #516273);
}

#gform_wrapper_1 .abostopp-review__order-summary dd {
	color: var(--as-text, #17324d);
	font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-review__product-heading {
		color: #edeff1;
	}
}