/* GF V1 funnel -- review step + UX consolidation styling
 * (docs/implementation/GF_V1_FUNNEL_REPORT.md). Minimal, only what the
 * native GF field/button markup does not already provide. No layout
 * framework, no reset -- relies on the theme's existing typography/spacing. */

/* ---------------------------------------------------------------------
 * UX consolidation: no visible "required"/"Pflichtfeld" text or asterisk
 * (task brief §6/§16). GF's own `required`/`aria-required` attributes on
 * the underlying <input> are untouched by this rule -- only the decorative
 * indicator span is hidden. Do NOT rely on color alone elsewhere; this is
 * the one deliberate exception the brief itself asks for.
 * --------------------------------------------------------------------- */
#gform_wrapper_1 .gfield_required {
	display: none;
}

/* Provider identity remains a real, signed GF value but is selected through
 * the page-level provider picker, so the legacy visible GF dropdown must not
 * appear as a duplicate control. */
#gform_wrapper_1 #field_1_1 {
	display: none !important;
}

/* The provider page already introduces the assistant. Gravity Forms' legacy
 * title/description repeats that copy and has insufficient contrast inside the
 * dark card, so keep the card focused on the actual form controls. */
#gform_wrapper_1 .gform_heading {
	display: none;
}

/* No visually intrusive duplicate error box at the top of the form (task
 * brief §8). Each field's own inline message is the only error signal
 * this funnel shows.
 *
 * REAL GRAVITY FORMS LIMITATION, confirmed by reading source directly
 * (not assumed): the form-level `validationSummary: false` setting
 * (present in this form's own definition,
 * tools/gf-v1-funnel-local-env/fixtures/zzz-gfv1-fixtures.php) is
 * silently overridden back to `true` by GF's OWN save-time sanitization
 * -- `GFFormsModel`'s form-meta handling (`forms_model.php`) does
 * `$form_meta['validationSummary'] = empty(rgar($form_meta,
 * 'validationSummary')) ? true : $form_meta['validationSummary'];` and
 * PHP's `empty()` treats the boolean `false` itself as "empty", so this
 * one specific setting can never actually be persisted as `false` through
 * GF's own form-save path, no matter what a caller supplies. This is a
 * genuine upstream Gravity Forms behavior, not a bug in this codebase,
 * and not something worked around silently: it is reported explicitly
 * here and in the funnel report.
 *
 * Because of that, GF always renders the `<h2 class="gform_submission_error">`
 * "There was a problem with your submission..." heading on a failed page
 * transition, and (since validationSummary effectively stays `true`)
 * additionally renders a redundant itemized `<ol>` list duplicating every
 * field's own inline message. This rule hides the whole box directly by
 * class, independent of GF's `hide_summary` modifier class (which never
 * gets applied here, for the same reason) -- same visual/UX outcome the
 * form-level setting was meant to produce, achieved a different way
 * because GF's own setting cannot be trusted to take effect.
 * `!important` since GF's own dynamically-generated per-form <style> tag
 * (see gf-v1-funnel-design.css's own docblock re: that mechanism) could
 * in principle carry a more specific rule for this class in a future GF
 * version -- same defensive rationale used throughout this file. */
#gform_wrapper_1 .gform_submission_error {
	display: none !important;
}

/* Compact field/label/helper spacing (task brief §8) -- reduces the
 * inter-field vertical rhythm and label/input/helper gaps by roughly the
 * same ~20-30% as the review-screen density pass below, without touching
 * any input/checkbox/button DIMENSION (touch targets stay unchanged --
 * only margins shrink). `.gfield`/`.gfield_label`/`.gfield_description`
 * are Gravity Forms' fundamental, version-stable field-wrapper/label/
 * description classes (present across every GF theme), unlike the
 * theme-specific custom-property names gf-v1-funnel-design.css overrides. */
#gform_wrapper_1 .gfield {
	margin-bottom: 0;
}

#gform_wrapper_1 .gform_fields {
	row-gap: 12px !important;
}

#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 .gform-field-label {
	margin-bottom: 4px;
}

#gform_wrapper_1 .gfield_description,
#gform_wrapper_1 .gfield_consent_description {
	margin-top: 4px;
}

#gform_wrapper_1 .gform_page_footer {
	margin-top: 6px;
	padding-top: 14px;
}

/* Full-width, visually dominant primary/final buttons (design system:
 * "Primary button: full-width"; task brief §20 final CTA "visually
 * dominant"). Pre-existing gap this pass also closes -- GF's own theme
 * defaults these to auto/fit-content width. */
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_button {
	width: 100%;
	background: var(--as-primary, #B7F36B) !important;
	border-color: var(--as-primary, #B7F36B) !important;
	color: var(--as-primary-contrast, #10261F) !important;
	font-weight: 700 !important;
}

#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 .gform_button:hover {
	background: var(--as-primary-hover, #84C83D) !important;
	border-color: var(--as-primary-hover, #84C83D) !important;
}

/* Custom 3-segment progress indicator (task brief §7) -- GF's native
 * step/percentage progress markup is hidden entirely (several class names
 * across GF versions/themes, listed defensively) and replaced by this.
 * The markup itself is now SERVER-rendered (GravityFormsBridge::
 * render_progress_bar_html(), via the `gform_get_form_filter_{id}`/
 * `gform_confirmation` hooks) rather than built here by JS -- these rules
 * simply style whatever markup lands with these class names, server- or
 * (historically) client-rendered alike. */
#gform_wrapper_1 .gf_progressbar_wrapper,
#gform_wrapper_1 .gf_page_steps,
#gform_wrapper_1 .gform-page-steps,
#gform_wrapper_1 .gform_page_footer .gf_progressbar_percentage {
	display: none !important;
}

.abostopp-progress {
	/* Compact density pass (task brief §8) -- ~25% less than the original 1.25rem. */
	margin: 0 0 0.9rem;
}

/* Selectors are deliberately prefixed with the `.abostopp-progress`
 * ancestor (raising specificity to 0,2,0) rather than left as bare
 * single-class (0,1,0). Gravity Forms' modern Orbital/Foundation form
 * theme ships `gravity-forms-theme-reset.min.css`, whose blanket
 * `.gform-theme--framework :where(:not(html)...)` rule resets
 * `display`/`margin`/etc. to `revert` on EVERY descendant of the form
 * wrapper -- and because `:where()` contributes zero specificity, that
 * reset is only (0,1,0), exactly tying a bare `.abostopp-progress__segment`
 * and winning on source order (GF's reset enqueues after this file). The
 * progress bar markup is injected INSIDE the form wrapper, so without this
 * bump the segments collapse to unstyled inline spans (no 4px bars, no
 * fill) and only the text label survives. Verified in a real GeneratePress
 * + GF Orbital browser render. */
.abostopp-progress .abostopp-progress__segments {
	display: flex;
	gap: 0.4rem;
}

.abostopp-progress .abostopp-progress__segment {
	flex: 1 1 0;
	height: 4px;
	border-radius: 2px;
	background: var(--border, #e2e5e9);
}

.abostopp-progress .abostopp-progress__segment--filled {
	background: var(--as-primary, #B7F36B);
}

.abostopp-progress .abostopp-progress__label {
	margin: 0.3rem 0 0;
	font-size: 0.8rem;
	color: var(--text-muted, #4f5b68);
}

@media (prefers-reduced-motion: no-preference) {
	.abostopp-progress .abostopp-progress__segment {
		transition: background-color 0.25s ease;
	}
}

/* Compact opt-in/legal checkbox copy (task brief §10) -- the three
 * checkbox choice labels (execution-consent-and-withdrawal-waiver #9,
 * marketing #10, AGB/Datenschutz #15). Font-size/line-height only:
 * contrast comes from the --gf-ctrl-label-color-secondary/tertiary/
 * quaternary tokens in gf-v1-funnel-design.css, and GF's own checkbox
 * input + label `<label>` element is untouched, so the full label
 * (including its whitespace) stays one tap target -- no separate,
 * smaller-than-recommended hit area is introduced. `#field_{form}_{id}`
 * is Gravity Forms' own stable per-field wrapper id convention (already
 * relied on elsewhere in this codebase, e.g. the review html field
 * lookup in gf-v1-funnel-review.js). */
#gform_wrapper_1 #field_1_9 .gfield_consent_label,
#gform_wrapper_1 #field_1_9 .gchoice label,
#gform_wrapper_1 #field_1_10 .gfield_consent_label,
#gform_wrapper_1 #field_1_10 .gchoice label,
#gform_wrapper_1 #field_1_15 .gfield_consent_label,
#gform_wrapper_1 #field_1_15 .gchoice label {
	font-size: 14px;
	line-height: 1.45;
}

/* Review screen structure (task brief §17). Compact density pass (task
 * brief §8) -- section spacing reduced ~25-30% from the original values. */
.abostopp-review__section {
	margin: 0.7rem 0;
	padding-top: 0.55rem;
	border-top: 1px solid var(--border, #e2e5e9);
}

.abostopp-review__section:first-of-type {
	border-top: none;
	padding-top: 0;
}

.abostopp-review__eyebrow {
	margin: 0 0 0.3rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted, #4f5b68);
}

.abostopp-review__section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.abostopp-review-edit-button {
	background: none;
	border: none;
	padding: 0;
	color: var(--accent, #1e73be);
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.85rem;
}

.abostopp-review__provider {
	font-weight: 600;
	margin: 0;
}

.abostopp-review__price-value {
	font-size: 1.4rem;
	font-weight: 800;
	margin: 0.2rem 0;
}

.abostopp-review__price-facts {
	margin: 0 0 0.4rem;
	color: var(--text-muted, #4f5b68);
	font-size: 0.85rem;
}

.abostopp-review__stale-banner {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--accent, #1e73be);
	background: var(--accent-soft, #e8f1fa);
	border-radius: 10px;
	font-size: 0.85rem;
}

.abostopp-review__stale-banner[hidden] {
	display: none;
}

.abostopp-payment-mount-point {
	min-height: 0;
}

.abostopp-review__list {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) 2fr;
	gap: 0.4rem 0.85rem;
	margin: 0.75rem 0;
}

.abostopp-review__row {
	display: contents;
}

/* The optional Mobilnummer row is toggled via the `hidden` attribute
 * (gf-v1-funnel-review.js). Without this rule, `.abostopp-review__row`'s
 * own `display: contents` above wins the cascade over the browser's
 * default `[hidden] { display: none }` (same specificity, author styles
 * beat the UA stylesheet), so the row would stay visible/empty instead of
 * disappearing -- the exact bug already found and fixed once in the
 * approved design prototype's own CSS (docs/design/FRONTEND_V1_DESIGN_SYSTEM.md,
 * "Accessibility baseline"). This selector is intentionally more specific
 * than `.abostopp-review__row` alone so it always wins regardless of
 * declaration order. */
.abostopp-review__row[hidden] {
	display: none;
}

.abostopp-review__row dt {
	font-weight: 600;
}

.abostopp-review__row dd {
	margin: 0;
}

.abostopp-review-confirm-button {
	margin-top: 0.5rem;
}

.abostopp-review-ack-status {
	margin-left: 0.75rem;
}

/* Targets the real submit button on the review page now (see
 * gf-v1-funnel-review.js's nextButton() docblock for why -- the review
 * page is GF's last page, it has no .gform_next_button of its own). */
.gform_button.abostopp-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.abostopp-review__list {
		grid-template-columns: 1fr;
	}

	.abostopp-review__row dt {
		margin-top: 0.5rem;
	}
}

/* One-page checkout: legal choices compact, readable, tap-safe. */
#gform_wrapper_1 .abostopp-checkout-consent {
	margin-block: 6px;
}

#gform_wrapper_1 .abostopp-checkout-consent .gfield_label {
	font-size: 13px;
	margin-bottom: 3px;
}

#gform_wrapper_1 .abostopp-checkout-consent .gchoice label,
#gform_wrapper_1 .abostopp-checkout-consent .gfield_description {
	font-size: 12px;
	line-height: 1.4;
}

#gform_wrapper_1 .abostopp-checkout-consent .gchoice {
	margin-bottom: 4px;
}

#gform_confirmation_wrapper_1:has(.abostopp-order-success) {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	/* `safe center` keeps the card's TOP edge reachable when it is taller
	 * than the viewport: plain `center` overflows symmetrically, pushing the
	 * top border above the scroll origin where it is clipped and cannot be
	 * scrolled back into view (checkout defect 3, visible from ~1280px down
	 * once the confirmation copy wraps to several lines). The unprefixed
	 * `center` stays as the fallback for engines without the `safe` keyword. */
	place-items: center;
	place-items: safe center;
	overflow-y: auto;
	padding: 24px;
	background: rgba(247, 245, 239, .88);
	backdrop-filter: blur(8px);
}

.abostopp-order-success {
	width: min(620px, 100%);
	margin: 0;
	padding: clamp(28px, 5vw, 48px);
	text-align: center;
	background: #fff;
	border: 1px solid #dce2dc;
	border-radius: 24px;
	box-shadow: 0 24px 80px rgba(16, 38, 31, .14);
	outline: none;
}

.abostopp-order-success__check {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #84c83d;
	color: #10261f;
	font-size: 30px;
	font-weight: 800;
}

.abostopp-order-success h2 {
	margin: 0 0 12px;
}

.abostopp-order-success p {
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 480px) {
	#gform_confirmation_wrapper_1:has(.abostopp-order-success) {
		padding: 16px;
	}
}