/**
 * Suter Wärmebedarfsrechner – block styles.
 *
 * Structure/measurements follow reference/*.png (Warmluft/Heisswasser/
 * Offertanfrage Schritt 1+2/Bestätigung) closely rather than improvising.
 *
 * Typography, buttons and spacing reuse the theme's own utility classes
 * directly in the markup (.btn, .btn--primary, .text-h1-6, .text-body,
 * .text-body-small) instead of duplicating them here — see
 * assets/scss/components/_button.scss and
 * assets/scss/_typography.scss in suter-theme for the source of truth. This
 * stylesheet only covers what is genuinely specific to this block: the
 * panel layout, the floating-label field boxes, the radio/month grids, the
 * outline button modifier (the theme has no outline variant), and the info
 * tooltips.
 *
 * Scoped entirely under .wbr-block so it cannot leak into or be affected by
 * global theme CSS. Colors are hardcoded to match suter-theme's
 * assets/scss/_vars.scss ($color-orange-*, $color-blue-*) since the theme
 * does not currently expose them as CSS custom properties.
 */

.wbr-block {
	/* Matches suter-theme's own font stack (ropa-sans-pro + system
	   fallback) used by virtually every themed typography/button/form
	   class (.text-h*, .text-body*, .btn, .form-group input) — copied
	   verbatim from dist/assets/main-*.css so this block still renders
	   correctly even if the theme's webfont fails to load, or if the
	   theme classes below aren't present for some reason. */
	--wbr-font: ropa-sans-pro, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue',
		helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

	--wbr-color-orange-500: #ef5f17;
	--wbr-color-orange-600: #e14b15;
	--wbr-color-panel-bg: #e1e7ee;
    --wbr-color-light-bg: #f3f7f8;
	--wbr-color-blue-100: #dfe8ee;
	--wbr-color-blue-200: #c3d4de;
    --wbr-color-blue-600: #507690;
	--wbr-color-blue-900: #313c48;
	--wbr-color-white: #ffffff;
	--wbr-color-error: #e11515;
	--wbr-radius: 3px;

	box-sizing: border-box;
	font-family: var(--wbr-font);
	color: var(--wbr-color-blue-900);
	margin-block: 2.5rem;

	/* Base running-text size, matching the theme's own body/label/input/
	   button text measured live on an existing block (contact-form-block):
	   16px up to the theme's own "breakpoint-m" (700px), 20px from there
	   on — see .form-group input/label, .text-body-large, .btn in
	   dist/assets/main-*.css. Anything that should read as "small" (hints,
	   tooltips, the eyebrow line, error text) sets its own fixed 16px
	   instead of inheriting this, since the theme's .text-body-small is a
	   flat 13px that turned out smaller than what this design calls for. */
	font-size: 16px;
}

@media (min-width: 700px) {
	.wbr-block {
		font-size: 20px;
	}
}

.wbr-block *,
.wbr-block *::before,
.wbr-block *::after {
	box-sizing: inherit;
	font-family: inherit;
}

/* Form controls don't inherit font-size from ancestors by default (the
   browser UA stylesheet gives input/textarea/button/select their own fixed
   size) — without this, every field silently fell back to that default
   instead of following the 16/20px scale above. */
.wbr-block input,
.wbr-block textarea,
.wbr-block button,
.wbr-block select {
	font-size: inherit;
}

.wbr-block input[type='radio'],
.wbr-block input[type='checkbox'] {
	accent-color: var(--wbr-color-orange-500);
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

/* Text-entry fields: match the theme's own focus style exactly (a darker
   border, no ring) instead of a generic outline — see "input:focus{
   border-color:#507690;outline:none}" in dist/assets/main-*.css. */
.wbr-field:focus-within {
	border-color: var(--wbr-color-blue-900);
}

.wbr-field input:focus,
.wbr-field textarea:focus {
	outline: none;
}

/* Buttons, links and standalone controls (not wrapped in a .wbr-field
   box) keep a visible keyboard focus ring since they have no border to
   darken. */
.wbr-block button:focus-visible,
.wbr-block a:focus-visible,
.wbr-block input[type='radio']:focus-visible,
.wbr-block input[type='checkbox']:focus-visible,
.wbr-block input[type='file']:focus-visible {
	outline: 2px solid var(--wbr-color-orange-600);
	outline-offset: 2px;
}

.wbr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Defensive baseline for the theme's .btn system: :where() keeps this at
   zero specificity so it NEVER competes with the theme's real .btn CSS
   (this block's markup uses the real .btn/.btn--primary classes directly
   — see template). Earlier version used a plain ".wbr-block .btn"
   (specificity 0,2,0), which is *higher* than the theme's own ".btn"
   (0,1,0) and was silently winning over it even with the theme active
   (e.g. its 0-vertical-padding got overridden by this rule's padding,
   breaking the theme's height/line-height vertical-centering trick and
   visibly shifting button text down) — :where() is what actually makes
   this "only apply if nothing else does". */
:where(.wbr-block .btn) {
	display: inline-block;
	cursor: pointer;
	padding: 0.875rem 1.75rem;
	border-radius: 16px;
	border: 1px solid transparent;
	font-weight: 700;
	background: var(--wbr-color-orange-500);
	color: var(--wbr-color-white);
	white-space: nowrap;
}

/* Outline variant: suter-theme's .btn system (_button.scss) has no
   outline modifier, so this extends it using the exact same --button-*
   custom properties .btn itself reads for hover/active states. Normal
   (non-:where()) specificity (0,1,0): ties with the theme's own ".btn"
   and wins on source order (this stylesheet loads after the theme's —
   see Block::register()), and always wins over the zero-specificity
   fallback above regardless of load order. */
.wbr-btn--outline {
	--button-background: transparent;
	--button-color: var(--wbr-color-orange-500);
	--button-border-color: var(--wbr-color-orange-500);
	--button-hover-background: var(--wbr-color-orange-500);
	--button-hover-color: var(--wbr-color-white);
	background: transparent;
	color: var(--wbr-color-orange-500);
	border-color: var(--wbr-color-orange-500);
}

.btn.is-loading {
	opacity: 0.7;
}

/* Disabled buttons (e.g. "Offerte anfragen" before a value is calculated)
   should look exactly like the active button, just faded — not switch to
   the theme's own separate disabled color/background. Pointing the
   disabled custom properties back at the normal ones achieves that
   without fighting the theme's [disabled] rule. */
.wbr-block .btn:disabled {
	--button-disabled-background: var(--button-background);
	--button-disabled-color: var(--button-color);
	opacity: 0.3;
	cursor: not-allowed;
}

.wbr-block__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-block-end: 1.5rem;
}

/* Matches the theme's .text-h2 responsive scale (32/48/64px at the
   theme's own base/breakpoint-m/breakpoint-l steps). */
.wbr-block__title {
	font-size: 32px;
	font-weight: 700;
	margin: 0;
}

@media (min-width: 700px) {
	.wbr-block__title {
		font-size: 48px;
	}
}

@media (min-width: 1440px) {
	.wbr-block__title {
		font-size: 64px;
	}
}

.wbr-block__intro {
	margin: 0;
	max-width: 32ch;
	font-size: 20px;
    line-height: 28px;
}

/* Two independent, equal-width, equal-height cards side by side, with a
   ~20px gap between them — not one shared box with an internal divider.
   (align-items: stretch is the grid default, set explicitly so both
   columns are forced to the same height regardless of content length.) */
.wbr-block__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 20px;
}

@media (max-width: 1100px) {
	.wbr-block__body {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.wbr-panel {
	background: var(--wbr-color-white);
	border-radius: var(--wbr-radius);
	padding: 2rem;
}

.wbr-panel--form {
	background: var(--wbr-color-panel-bg);
	padding: 0;
	/* No overflow:hidden here: it was only meant to clip the tabs' square
	   corners to the panel's own rounded corners, but as an ancestor of the
	   absolutely-positioned tooltip popovers it clipped those too, cutting
	   them off at the panel edge. The tabs already get their own explicit
	   border-top-left/right-radius (see .wbr-tabs__tab:first-child/
	   :last-child below), so nothing actually needs the clip. */
}

/* Tabs sit directly on top of the form panel; only their top corners are
   rounded (they share the panel's own radius), no other decoration. */

.wbr-tabs {
	display: flex;
}

/* [hidden] and .wbr-tabs{display:flex} are the same specificity (0,1,0);
   since this stylesheet loads after the browser's UA sheet, the flex rule
   was winning the tie and the tabs stayed visible even once JS set
   [hidden] on them. Higher specificity forces display:none to win. */
.wbr-tabs[hidden] {
	display: none;
}

.wbr-tabs__tab {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: none;
	background: var(--wbr-color-white);
	color: var(--wbr-color-blue-900);
	font-weight: 600;
	padding: 1.25rem 0.75rem;
	cursor: pointer;
}

.wbr-tabs__tab:first-child {
	border-top-left-radius: var(--wbr-radius);
}

.wbr-tabs__tab:last-child {
	border-top-right-radius: var(--wbr-radius);
}

.wbr-tabs__tab.is-active {
	background: var(--wbr-color-panel-bg);
}

.wbr-tabs__icon {
	display: block;
}

.wbr-form {
	padding: 2rem;
	/* Generous breathing room before "Projektangaben", matching the
	   reference screens. */
	padding-top: 3.5rem;
}

/* Once the tabs bar is hidden (Offertanfrage steps have no
   Warmluft/Heisswasser tabs per the reference mockups), the extra top
   padding above no longer clears anything — drop back to the uniform
   2rem so the panel content fills the same full height as the tabs-less
   result panel beside it, instead of leaving a dead gap at the top. */
.wbr-panel--form:has(.wbr-tabs[hidden]) .wbr-form {
	padding-top: 2rem;
}

.wbr-panel-content[hidden] {
	display: none;
}

.wbr-panel-content__heading {
	font-weight: 700;
	margin: 0 0 1.25rem;
}

.wbr-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-block-end: 0.75rem;
}

.wbr-field-wrap {
	min-width: 0;
}

.wbr-field {
	position: relative;
	background: var(--wbr-color-white);
	border: 1px solid var(--wbr-color-blue-200);
	border-radius: var(--wbr-radius);
}

.wbr-field--full {
	grid-column: 1 / -1;
}

.wbr-field__legend {
	font-weight: 700;
	color: var(--wbr-color-blue-900);
	padding: 0;
	margin-block-end: 0.75rem;
}

/*
 * Floating label (reference/Warmluft nicht ausgefüllt*.png): the label sits
 * inside the field like a placeholder until the field has a value or is
 * focused, then shrinks to a small label near the top. Requires the
 * <label> to follow the <input>/<textarea> in the DOM (see
 * $render_field_label in the template) so the "~" sibling selector below
 * can react to :placeholder-shown.
 */
.wbr-field--floating {
	display: block;
	padding: 1.375rem 0.875rem 0.5rem;
}

/* Single-line fields get a fixed 56px height (matches the theme's own
   input height, measured live on contact-form-block at this breakpoint —
   see .form-group input in dist/assets/main-*.css) regardless of the
   input's own font-size: flex + align-items:flex-end keeps the value
   text pinned to the bottom of the box while the floated label has room
   to sit above it, rather than deriving the height from
   padding + line-height arithmetic that drifts whenever font-size
   changes. Textareas are intentionally excluded — they need to grow with
   their rows="" instead of being squashed to input height. */
.wbr-field--floating:has(input) {
	height: 56px;
	padding: 0 0.875rem;
	display: flex;
	align-items: flex-end;
	padding-bottom: 0.3rem;
}

.wbr-field--floating input,
.wbr-field--floating textarea {
	display: block;
	width: 100%;
	border: none;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wbr-color-blue-600);
	padding: 0;
	background: transparent;
	resize: vertical;
}

.wbr-field--floating label {
	position: absolute;
	left: 0.875rem;
	top: 1.1rem;
	font-weight: 600;
	color: var(--wbr-color-blue-600);
	pointer-events: none;
	transition: top 0.15s ease, font-size 0.15s ease, opacity 0.15s ease;
}

.wbr-field--floating input:focus ~ label,
.wbr-field--floating input:not(:placeholder-shown) ~ label,
.wbr-field--floating textarea:focus ~ label,
.wbr-field--floating textarea:not(:placeholder-shown) ~ label {
	top: 0.5rem;
	font-size: 16px;
	font-weight: 300;
}

@media (prefers-reduced-motion: reduce) {
	.wbr-field--floating label {
		transition: none;
	}
}

/* Static label (date fields): browser-native date widgets already show
   their own dd.mm.yyyy placeholder, so the label stays above it at all
   times rather than floating on top of it. Same fixed 56px box height as
   the floating fields (see .wbr-field--floating:has(input) above), just
   with both lines actually present instead of one overlapping the other. */
.wbr-field--static {
	height: 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 0 0.875rem;
}

.wbr-field--static label {
	font-size: 16px;
	line-height: 1.1;
	color: var(--wbr-color-blue-900);
	opacity: 0.75;
}

.wbr-field--static input {
	border: none;
	font-weight: 600;
	line-height: 1.1;
	color: var(--wbr-color-blue-600);
	padding: 0;
	background: transparent;
	width: 100%;
}

/* Chrome/Edge/Safari only (::-webkit-calendar-picker-indicator has no
   Firefox equivalent, which keeps its own non-stylable black icon):
   swaps the browser's default black calendar glyph for the same shape
   tinted in the site's blue-gray, via a plain inline SVG background-image
   rather than a color filter (filters can't target an exact hex). */
.wbr-block input[type='date']::-webkit-calendar-picker-indicator {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23507690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.wbr-field.has-error {
	border-color: var(--wbr-color-error);
}

.wbr-field__error {
	margin: 0 0.875rem;
	font-size: 16px;
	color: var(--wbr-color-error);
}

.wbr-field--floating .wbr-field__error {
	margin-block-start: 0.375rem;
}

.wbr-field--static .wbr-field__error {
	margin: 0;
}

.wbr-field__error:empty {
	display: none;
}

/* Collects all of a step's validation messages in one place at the end of
   the form (one line per message) instead of showing them at each field —
   the red .wbr-field.has-error border above stays the only per-field
   signal. calculator.js appends one <p> per message. */
.wbr-error-summary {
	margin-block-start: 1rem;
}

.wbr-error-summary p {
	margin: 0 0 0.375rem;
	font-size: 16px;
	color: var(--wbr-color-error);
}

.wbr-error-summary:empty {
	display: none;
}

/* Info tooltip (reference/Warmluft nicht ausgefüllt*.png shows a small "i
   Info" trigger under some fields) — the theme has no reusable tooltip
   component, so this is self-built: CSS-only show/hide via :hover and
   :focus-within, so it also works for keyboard users tabbing to the
   trigger button. */
.wbr-tooltip {
	position: relative;
	display: inline-flex;
	margin: 0.375rem 0.875rem 0 0;
}

.wbr-tooltip__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border: none;
	background: none;
	padding: 0;
	color: var(--wbr-color-blue-900);
	opacity: 0.6;
	font-size: 16px !important;
	cursor: pointer;
}

.wbr-tooltip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.wbr-tooltip__content {
	position: absolute;
	z-index: 1;
	bottom: calc(100% + 0.5rem);
	left: 0;
	width: max-content;
	max-width: 20rem;
	/* Hint text may contain blank-line/list structure (e.g. "Richtwerte
	   Luftwechsel") authored as plain \n characters (kept as esc_html(),
	   not raw markup, so it stays XSS-safe) — pre-line renders those
	   breaks instead of collapsing them like normal white-space does. */
	white-space: pre-line;
	background: var(--wbr-color-blue-900);
	color: var(--wbr-color-white);
	font-size: 16px;
	line-height: 1.4;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

.wbr-tooltip:hover .wbr-tooltip__content,
.wbr-tooltip:focus-within .wbr-tooltip__content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.wbr-tooltip__content {
		transition: none;
	}
}

/* Plain radio/checkbox groups (Anwendungsart, Heisswasser-Anwendung) sit
   directly on the panel background — no box, no border (reference/
   Heisswasser.png, Offertanfrage Schritt 1.png). */
.wbr-radio-group-wrapper {
	border: none;
	margin: 0 0 1rem;
	padding: 0;
}

.wbr-month-fieldset {
	border: none;
	margin: 3.85rem 0 0.75rem;
	padding: 0;
}

.wbr-radio-group {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.wbr-radio {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 600;
}

.wbr-month-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}

@media (max-width: 30rem) {
	.wbr-field-row,
	.wbr-month-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.wbr-month {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.625rem;
	border-radius: var(--wbr-radius);
	padding: 0.75rem 0.875rem;
	font-weight: 600;
	background: var(--wbr-color-light-bg);
}

/* A native checkbox's rounding is entirely down to the browser/OS: current
   Safari renders it visibly rounded and, like Chrome, no longer honors an
   author border-radius override on it at all (confirmed live — changing
   the value had zero visual effect in Safari). appearance:none plus a
   fully custom box + checkmark is the only way to actually control this,
   in every browser rather than just nudging Safari's native shape. */
.wbr-month input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	background: var(--wbr-color-white);
	border: 1px solid var(--wbr-color-blue-200);
	border-radius: 2px;
	cursor: pointer;
}

.wbr-month input[type='checkbox']:checked {
	background-color: var(--wbr-color-orange-500);
	border-color: var(--wbr-color-orange-500);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65%;
}

/* Result panel */

.wbr-panel--result {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wbr-panel__eyebrow {
	margin: 0;
	font-size: 20px;
}

/* Two sizes: the placeholder "Noch keine Berechnung" text stays moderate,
   but an actual computed kW number is the visual centerpiece of the
   result panel and needs to read as such — calculator.js toggles
   .wbr-result--value once a real number is shown (see recalculate()). */
.wbr-result {
	margin: 0 0 0.5rem;
	font-size: 28px;
    line-height: 1.3em;
	font-weight: 400;
	color: var(--wbr-color-orange-500);
	transition: font-size 0.15s ease;
}

.wbr-result--value {
	font-size: 92px;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.wbr-result {
		transition: none;
	}
}

.wbr-illustration {
    display: flex;
    justify-content: center;
	margin-block-end: 0.5rem;
}

.wbr-illustration__image {
	display: block;
	max-width: 85%;
	height: auto;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.wbr-illustration__image.is-fading {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wbr-illustration__image {
		transition: none;
	}
}

/* Bottom action row: lives outside/below both panels (still inside the
   <form>), right-aligned, one row per wizard state. */

.wbr-block__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 1.5rem;
}

.wbr-block__actions[hidden] {
	display: none;
}

.wbr-block__actions-hint {
	margin: 0;
	font-size: 16px;
    line-height: 1.5em;
	text-align: right;
    margin-right: 2rem;
}

.wbr-block__actions-hint a {
	color: var(--wbr-color-orange-600);
}

.wbr-field--file {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
    margin-top: 2rem;
}

.wbr-field--file > label {
	font-size: 16px;
	color: var(--wbr-color-blue-900);
}

.wbr-file-input {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.wbr-file-input__name {
	font-size: 16px;
	opacity: 0.7;
}

.wbr-error-message {
	color: var(--wbr-color-error);
	font-weight: 600;
	font-size: 16px;
}

.wbr-confirmation-heading {
    font-size: 32px;
	color: var(--wbr-color-orange-500);
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.wbr-confirmation-subheading {
	font-weight: 700;
	margin: 1.25rem 0 0.5rem;
}

.wbr-summary-block {
	margin: 0 0 1rem;
	font-size: 16px;
	line-height: 1.6;
}

.wbr-summary-block strong {
	font-weight: 700;
}