:root {
	--digi-fin-radius: 4px;
}

/*
 * The financing calculator block. Deliberately renders as one box (rules +
 * inquiry form together) rather than two stacked ones -- it is one
 * connected flow, not two independent steps.
 */

.digi-fin-financing {
	padding: 1.5em;
	background: color-mix( in srgb, currentColor 4%, transparent );
	border-radius: calc( var( --digi-fin-radius, 4px ) * 2 );
}

/* Sits above the calculator (see templates/parts/financing-calculator.php),
   so it needs its own bottom margin instead of relying on a heading before
   it, as it did at its old position further down the block. Generous on
   purpose -- it's the first thing a visitor sees, and should read as its own
   banner, not as a strip glued to the calculator underneath it. */
.digi-fin-financing > .digi-fin-notice {
	margin-bottom: 2em;
}

.digi-fin-financing .digi-fin-inquiry-form {
	padding: 0;
	background: none;
	border-radius: 0;
}

.digi-fin-contact-section__divider {
	margin: 1.5em 0;
	border: none;
	border-top: 1px solid color-mix( in srgb, currentColor 15%, transparent );
}

.digi-fin-financing__cards {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 1.5em;
	align-items: start;
}
@media ( max-width: 780px ) {
	.digi-fin-financing__cards { grid-template-columns: minmax( 0, 1fr ); }
}

.digi-fin-financing__inputs {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.digi-fin-financing__field label { font-weight: 600; }
.digi-fin-financing__field > label { display: block; margin-bottom: 0.3em; }

.digi-fin-financing__slider-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5em;
}
.digi-fin-financing__value {
	font-weight: 700;
	background: var( --wp--preset--color--base, #fff );
	padding: 0.25em 0.6em;
	border-radius: var( --digi-fin-radius, 4px );
}
.digi-fin-financing input[type="range"] {
	width: 100%;
	accent-color: var( --wp--preset--color--primary, currentColor );
}
.digi-fin-financing__slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: var( --wp--preset--font-size--x-small, 0.8em );
	opacity: 0.7;
	margin-top: 0.4em;
}

.digi-fin-financing__hint {
	display: block;
	margin-top: 0.4em;
	font-size: var( --wp--preset--font-size--x-small, 0.8em );
	opacity: 0.7;
}

/* Input field with a trailing unit (€, %). */
.digi-fin-financing__input-group { display: flex; align-items: center; gap: 0.5em; }
.digi-fin-financing__input-group input { flex: 1; min-width: 0; }
.digi-fin-financing__suffix { flex-shrink: 0; font-weight: 600; opacity: 0.7; }

.digi-fin-financing input[type="number"],
.digi-fin-financing select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.8em;
	border: 1px solid color-mix( in srgb, currentColor 25%, transparent );
	border-radius: var( --digi-fin-radius, 4px );
	background: var( --wp--preset--color--base, #fff );
	color: inherit;
	font-family: inherit;
	font-size: 0.95em;
}

.digi-fin-financing__result {
	background: color-mix( in srgb, var( --wp--preset--color--primary, currentColor ) 8%, transparent );
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--primary, currentColor ) 20%, transparent );
	border-radius: var( --digi-fin-radius, 4px );
	padding: 1.5em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 1em;
}
.digi-fin-financing__headline { margin: 0; font-size: 1.15em; }
.digi-fin-financing__cta { margin: 0 auto; }

.digi-fin-financing__breakdown {
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	border-top: 1px solid color-mix( in srgb, currentColor 15%, transparent );
	padding: 0.5em 0 0;
}
.digi-fin-financing__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 0.5em 0;
	border-bottom: 1px solid color-mix( in srgb, currentColor 10%, transparent );
}
.digi-fin-financing__row:last-child { border-bottom: none; }
.digi-fin-financing__row--total { font-weight: 700; }
.digi-fin-financing__row--sub { opacity: 0.8; font-size: 0.92em; padding-left: 1em; }
.digi-fin-financing__breakdown-details[hidden] { display: none; }
.digi-fin-financing__toggle {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: inherit;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}
.digi-fin-financing__chevron { transition: transform 0.15s; display: inline-block; }
.digi-fin-financing__toggle[aria-expanded="true"] .digi-fin-financing__chevron { transform: rotate( 180deg ); }

/*
 * Representative example under Section 6a PAngV, maintained under Settings.
 *
 * Deliberately NOT rendered as greyed-out fine print: the law requires the
 * disclosure "in a clear, comprehensible and prominent way". Smaller type is
 * fine, reduced opacity would be the opposite -- the text runs in full text
 * colour and is set apart as its own block by a divider line instead.
 */
.digi-fin-financing__representative {
	margin: 1.5em 0 0;
	padding-top: 1.2em;
	border-top: 1px solid color-mix( in srgb, currentColor 20%, transparent );
	font-size: var( --wp--preset--font-size--x-small, 0.8em );
	line-height: var( --wp--custom--line-height--medium, 1.5 );
	text-align: left;
}
.digi-fin-financing__representative p { margin: 0 0 0.8em; }
.digi-fin-financing__representative p:last-child { margin-bottom: 0; }

/*
 * Footnote marker connecting the advertised monthly instalment with the
 * representative example. Superscript digit rather than an asterisk -- the
 * asterisk marks required fields in the form below.
 */
.digi-fin-financing__footnote-ref {
	font-size: 0.7em;
	font-weight: 600;
	line-height: 1;
	vertical-align: super;
	margin-left: 0.15em;
}

/* Legend for the required-field marker. */
.digi-fin-required-note {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-small, 0.8em );
	opacity: 0.75;
}

/* ---------- Inquiry form ---------- */

.digi-fin-inquiry-form {
	padding: 1.5em;
	background: color-mix( in srgb, currentColor 4%, transparent );
	border-radius: calc( var( --digi-fin-radius, 4px ) * 2 );
}
.digi-fin-inquiry-form h2 { margin-top: 0; margin-bottom: 1.3em; }
.digi-fin-inquiry-form p { margin: 0 0 0.9em; }
.digi-fin-inquiry-form > *:last-child,
.digi-fin-inquiry-form form > *:last-child,
.digi-fin-inquiry-form .digi-fin-form-grid > *:last-child { margin-bottom: 0; }
.digi-fin-inquiry-form label { display: block; font-weight: 600; margin-bottom: 0.3em; }
.digi-fin-consent-label {
	font-weight: 400 !important;
	display: flex !important;
	gap: 0.5em;
	align-items: flex-start;
	font-size: var( --wp--preset--font-size--x-small, 0.75em );
}
.digi-fin-consent-label input {
	margin-top: 0.2em;
	flex-shrink: 0;
}
.digi-fin-consent-label__text { display: block; }
.digi-fin-consent-hint {
	display: block;
	font-size: var( --wp--preset--font-size--x-small, 0.75em );
	opacity: 0.75;
	margin: 0.3em 0 0;
}
.digi-fin-inquiry-form input[type="text"],
.digi-fin-inquiry-form input[type="email"],
.digi-fin-inquiry-form input[type="tel"],
.digi-fin-inquiry-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.8em;
	border: 1px solid color-mix( in srgb, currentColor 25%, transparent );
	border-radius: var( --digi-fin-radius, 4px );
	background: var( --wp--preset--color--base, #fff );
	color: inherit;
	font-family: inherit;
	font-size: 0.95em;
}
.digi-fin-inquiry-form input[type="checkbox"] {
	width: 1.1em;
	height: 1.1em;
}
.digi-fin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25em; }
.digi-fin-form-grid__full { grid-column: 1 / -1; }
@media ( max-width: 480px ) {
	.digi-fin-form-grid { grid-template-columns: minmax( 0, 1fr ); }
}
.digi-fin-hp-wrap { position: absolute !important; left: -9999px !important; top: -9999px; }
.digi-fin-submit { cursor: pointer; }

.digi-fin-notice { padding: 0.9em 1.1em; border-radius: calc( var( --digi-fin-radius, 4px ) * 1.5 ); }
.digi-fin-notice-success { background: color-mix( in srgb, green 12%, transparent ); }
.digi-fin-notice-error { background: color-mix( in srgb, crimson 10%, transparent ); }