/*
 * noxtec Server Konfigurator – frontend styles.
 *
 * Layout-focused only; colors/typography inherit the active theme via its
 * design tokens (noxtec-theme exposes --color-primary / --font-sans through
 * Tailwind @theme). Fallbacks keep it usable under any theme.
 */

.nsc-configurator {
	--nsc-primary: var( --color-primary, #15779b );
	--nsc-primary-hover: var( --color-primary-hover, #0f5a78 );
	--nsc-border: #e2e8f0;
	--nsc-muted: #64748b;
	--nsc-bg-soft: #f8fafc;
	--nsc-text: #1e293b;
	font-family: var( --font-sans, inherit );
	color: var( --nsc-text );
	/* Match the theme content width: max-w-7xl (1280px) minus lg:px-8 padding
	   (2 × 32px) = 1216px, so the configurator sits flush with the section text. */
	max-width: 1216px;
	margin: 10px auto;
	/* Containing block for the confirmation overlay (.nsc-overlay, absolute). */
	position: relative;
}

.nsc-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media ( min-width: 860px ) {
	.nsc-layout {
		/* minmax(0,...) stops the columns from blowing out past their track
		   (otherwise wide cards overlap the summary). */
		grid-template-columns: minmax( 0, 1.6fr ) minmax( 0, 1fr );
		/* start: the summary column keeps its content height; the grid container
		   itself is as tall as the (taller) fields column, giving the sticky
		   aside room to travel. */
		align-items: start;
	}
}

.nsc-fields {
	min-width: 0;
}

/* Fields */
.nsc-field {
	padding: 14px 0;
	border-bottom: 1px solid var( --nsc-border );
}

.nsc-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.nsc-field__unit {
	color: var( --nsc-muted );
	font-weight: 400;
}

.nsc-field__desc {
	margin: 0 0 8px;
	color: var( --nsc-muted );
	font-size: 0.9em;
}

/* Field groups (product sections) */
.nsc-group {
	margin: 0 0 30px;
}

.nsc-group__title {
	margin: 0 0 20px;
	font-size: 1.1em;
	font-weight: 700;
	color: var( --nsc-primary );
	padding-bottom: 8px;
	border-bottom: 2px solid var( --nsc-primary );
}

.nsc-group__desc {
	margin: 0 0 10px;
	color: var( --nsc-muted );
	font-size: 0.9em;
}

/* Fields inside a group: 1 column on mobile (2-column desktop rule below),
   no separators. align-items: stretch keeps cards in a row equal height. */
.nsc-group__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: stretch;
	min-width: 0;
}

/* Exactly two equal columns on desktop so the (bigger) cards stay balanced. */
@media ( min-width: 860px ) {
	.nsc-group__fields {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.nsc-group__fields > .nsc-field {
	min-width: 0;
}

/* Plain (non-card) fields inside a group: no separators. Cards keep their own padding. */
.nsc-group__fields .nsc-field:not( .nsc-field--card ) {
	border-bottom: none;
	padding: 10px 0;
}

/* Info, textarea and dropdown fields take full width within a group. */
.nsc-group__fields .nsc-field--info,
.nsc-group__fields .nsc-field--textarea,
.nsc-group__fields .nsc-field--dropdown {
	grid-column: 1 / -1;
}

/* Number stepper */
.nsc-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var( --nsc-border );
	border-radius: 8px;
	overflow: hidden;
}

.nsc-step {
	width: 42px;
	border: 0;
	background: var( --nsc-bg-soft );
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var( --nsc-primary );
}

.nsc-step:hover {
	background: #eef2f6;
}

.nsc-number {
	width: 90px;
	border: 0;
	border-left: 1px solid var( --nsc-border );
	border-right: 1px solid var( --nsc-border );
	text-align: center;
	font-size: 16px;
	-moz-appearance: textfield;
}

.nsc-number::-webkit-outer-spin-button,
.nsc-number::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.nsc-slider {
	display: block;
	width: 100%;
	margin-top: 12px;
	accent-color: var( --nsc-primary );
}

.nsc-select,
.nsc-text,
.nsc-textarea {
	width: 100%;
	max-width: 420px;
	padding: 9px 11px;
	border: 1px solid var( --nsc-border );
	border-radius: 8px;
	font: inherit;
	background: #fff;
}

.nsc-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}

.nsc-info {
	background: var( --nsc-bg-soft );
	border-left: 3px solid var( --nsc-primary );
	padding: 10px 14px;
	border-radius: 4px;
}

/* ---- Number field card (icon + graphic + slider) ---- */
.nsc-field--card {
	border: 1px solid var( --nsc-border );
	border-radius: 14px;
	padding: 24px;
	background: #fff;
	min-width: 0;
	/* Fixed uniform height for every card (controls pinned to the bottom). */
	min-height: 332px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.nsc-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.nsc-card,
.nsc-card__head,
.nsc-card__minmax,
.nsc-card__controls {
	min-width: 0;
}

.nsc-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.nsc-card__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: rgba( 21, 119, 155, 0.1 );
	color: var( --nsc-primary );
}

.nsc-card__icon .nsc-icon {
	width: 24px;
	height: 24px;
}

.nsc-card__titles {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.nsc-card__title {
	font-weight: 700;
}

.nsc-card__subtitle {
	color: var( --nsc-muted );
	font-size: 0.85em;
}

.nsc-graphic {
	margin: 4px auto 14px;
}

.nsc-graphic--grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 5px;
	width: 118px;
	padding: 8px;
	background: #f1f5f9;
	border-radius: 10px;
}

.nsc-graphic--grid .nsc-cell {
	aspect-ratio: 1 / 1;
	border-radius: 3px;
	background: #cbd5e1;
	transition: background 0.15s ease;
}

.nsc-graphic--grid .nsc-cell.is-on {
	background: var( --nsc-primary );
}

.nsc-graphic--bars {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	height: 70px;
}

.nsc-graphic--bars .nsc-bar {
	width: 6px;
	height: 100%;
	border-radius: 3px;
	background: #cbd5e1;
	transition: background 0.15s ease;
}

.nsc-graphic--bars .nsc-bar.is-on {
	background: var( --nsc-primary );
}

.nsc-graphic--donut {
	width: 108px;
}

.nsc-graphic--donut svg {
	width: 100%;
	transform: rotate( -90deg );
}

.nsc-donut-track {
	fill: none;
	stroke: #e2e8f0;
	stroke-width: 3.5;
}

.nsc-donut-val {
	fill: none;
	stroke: var( --nsc-primary );
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 0.2s ease;
}

.nsc-card__value {
	text-align: center;
	font-size: 1.25em;
	font-weight: 700;
}

.nsc-card__price {
	color: var( --nsc-primary );
	font-weight: 600;
	font-size: 0.72em;
	margin-left: 6px;
}

/* Min/max labels sit directly above the − and + buttons (bottom block). */
.nsc-card__minmax {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	color: var( --nsc-muted );
	font-size: 0.8em;
	margin-top: auto;
	margin-bottom: 6px;
}

.nsc-card__minmax > span:first-child {
	text-align: left;
	white-space: nowrap;
}

.nsc-card__minmax > span:last-child {
	grid-column: 3;
	text-align: right;
	white-space: nowrap;
}

.nsc-card__controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nsc-card__controls .nsc-slider {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.nsc-card__controls .nsc-step {
	flex: 0 0 auto;
	width: 44px;
	height: 40px;
	border: 1px solid var( --nsc-border );
	border-radius: 9px;
	background: var( --nsc-bg-soft );
	color: var( --nsc-primary );
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nsc-card__controls .nsc-step:hover {
	background: #eef2f6;
}

.nsc-card__desc {
	margin: 14px 0 0;
	color: var( --nsc-muted );
	font-size: 0.85em;
	line-height: 1.4;
}

/* Checkbox card: optional image/logo fills the free space above the toggle. */
.nsc-card__image {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	margin: 16px 0;
	min-height: 0;
}

.nsc-card__image img {
	max-width: 100%;
	max-height: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Checkbox card: activation toggle pinned to the bottom. */
.nsc-card__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 13px 15px;
	border: 1.5px solid var( --nsc-border );
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.nsc-card__toggle input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var( --nsc-primary );
	cursor: pointer;
}

.nsc-card__toggle-text {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	line-height: 1.25;
}

.nsc-card__toggle .nsc-card__price {
	margin-left: auto;
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.8em;
	font-weight: 600;
}

.nsc-field--checkbox.nsc-field--card .nsc-card__toggle:has( input:checked ) {
	border-color: var( --nsc-primary );
	background: rgba( 21, 119, 155, 0.07 );
}

.nsc-sep {
	border: 0;
	border-top: 1px solid var( --nsc-border );
	margin: 22px 0;
}

/* Contact */
.nsc-contact__title {
	margin: 0 0 18px;
	padding-bottom: 8px;
	color: var( --nsc-primary );
	font-weight: 700;
	font-size: 1.1em;
	border-bottom: 2px solid var( --nsc-primary );
}

.nsc-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media ( min-width: 560px ) {
	.nsc-contact__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.nsc-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.nsc-row--full {
	margin-top: 14px;
}

.nsc-row > span {
	font-weight: 600;
	font-size: 0.92em;
}

.nsc-row input,
.nsc-row textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var( --nsc-border );
	border-radius: 8px;
	font: inherit;
	background: #fff;
}

.nsc-privacy {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 16px;
	font-size: 0.92em;
}

.nsc-privacy a {
	color: var( --nsc-primary );
}

/* Honeypot – visually and from layout hidden, still in DOM. */
.nsc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Summary */
@media ( min-width: 860px ) {
	/* Sticky is driven by JS (position:fixed) for theme robustness. The wrapper
	   is the element that gets fixed; its max-height is set by JS so the list
	   scrolls internally when the content is taller than the viewport. */
	.nsc-summary__sticky {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.nsc-summary__title {
		flex: 0 0 auto;
	}
	.nsc-summary__box {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	/* Only the component list scrolls internally when content is long;
	   prices + submit button stay pinned and visible. */
	.nsc-summary__list {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.nsc-summary__prices,
	.nsc-submit,
	.nsc-messages {
		flex: 0 0 auto;
	}
}

.nsc-summary__box {
	border: 1px solid var( --nsc-border );
	border-radius: 12px;
	padding: 20px 22px;
	background: #fff;
	box-shadow: 0 6px 24px rgba( 15, 23, 42, 0.06 );
}

/* "Ihre Konfiguration" heading above the box, matching the group headings;
   its underline aligns with the first group heading on the left. */
.nsc-summary__title {
	margin: 0 0 20px;
	padding-bottom: 8px;
	color: var( --nsc-primary );
	font-weight: 700;
	font-size: 1.1em;
	border-bottom: 2px solid var( --nsc-primary );
}

.nsc-summary__list {
	margin: 0 0 16px;
	padding: 0;
}

.nsc-summary__row {
	display: grid;
	grid-template-columns: 1fr auto 84px;
	gap: 2px 10px;
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px dashed var( --nsc-border );
}

/* "EUR/mtl." label aligned with the title baseline (same height). */
.nsc-summary__head-price {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --nsc-primary );
}

/* Monthly price column with a dotted vertical divider. */
.nsc-summary__price {
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
	border-left: 1px dashed var( --nsc-border );
	padding-left: 10px;
	font-variant-numeric: tabular-nums;
}

/* Group sub-headings in the summary. */
.nsc-summary__group-section {
	margin: 0 0 6px;
}

.nsc-summary__group-section + .nsc-summary__group-section {
	margin-top: 14px;
}

.nsc-summary__group {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 1em;
	font-weight: 700;
	color: var( --nsc-primary );
	padding-bottom: 6px;
	margin: 0 0 8px;
	border-bottom: 2px solid var( --nsc-primary );
}

.nsc-summary__group-section .nsc-summary__row:last-child {
	border-bottom: none;
}

.nsc-summary__label {
	color: var( --nsc-muted );
}

.nsc-summary__val {
	font-weight: 600;
	text-align: right;
}

.nsc-summary__prices {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 3px solid var( --nsc-primary );
}

.nsc-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 8px 0;
}

.nsc-price-row strong {
	font-size: 1.15em;
	color: var( --nsc-primary );
}

.nsc-vat {
	margin: 4px 0 0;
	font-size: 0.82em;
	color: var( --nsc-muted );
}

.nsc-submit {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 13px 18px;
	border: 0;
	border-radius: 9px;
	background: var( --nsc-primary );
	color: #fff;
	font-weight: 600;
	font-size: 1em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nsc-submit:hover {
	background: var( --nsc-primary-hover );
}

.nsc-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.nsc-submit.is-sending {
	cursor: progress;
}

.nsc-submit.is-sent {
	background: #15803d;
	opacity: 1;
	cursor: default;
}

/* Second submit button below the form (mirrors the summary button). */
.nsc-submit--inline {
	margin-top: 24px;
}

/* After submit: grey out + disable the form behind the confirmation overlay. */
.nsc-is-submitted .nsc-form {
	opacity: 0.45;
	filter: grayscale( 0.4 );
	pointer-events: none;
	user-select: none;
}

/* Confirmation overlay — covers the configurator (not the whole page); the
   greyed form shows through the light veil. The panel sticks in view so it is
   visible even when the (tall) form is scrolled. */
.nsc-overlay {
	position: absolute;
	inset: 0;
	z-index: 30;
	padding: 24px;
	background: rgba( 248, 250, 252, 0.72 );
	animation: nsc-overlay-in 0.18s ease;
}

@keyframes nsc-overlay-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.nsc-overlay__dialog {
	box-sizing: border-box;
	/* Fixed + centered in the viewport so it is always fully visible, clear of
	   the theme's fixed header (sticky top would tuck under it). */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: min( 460px, calc( 100vw - 48px ) );
	padding: 32px 28px;
	background: #fff;
	border-radius: 14px;
	text-align: center;
	box-shadow: 0 20px 60px rgba( 15, 23, 42, 0.35 );
	animation: nsc-dialog-in 0.2s ease;
}

@keyframes nsc-dialog-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.nsc-overlay__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var( --nsc-primary );
	display: flex;
	align-items: center;
	justify-content: center;
}

.nsc-overlay__icon svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nsc-overlay__title {
	margin: 0 0 10px;
	font-size: 1.3em;
	color: var( --nsc-primary );
}

.nsc-overlay__message {
	margin: 0 0 22px;
	font-size: 1.05em;
	line-height: 1.5;
	color: var( --nsc-text );
}

.nsc-overlay__close {
	display: inline-block;
	padding: 11px 26px;
	border: 0;
	border-radius: 9px;
	background: var( --nsc-primary );
	color: #fff;
	font-weight: 600;
	font-size: 1em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nsc-overlay__close:hover {
	background: var( --nsc-primary-hover );
}

.nsc-messages {
	margin-top: 12px;
}

.nsc-messages .nsc-error {
	color: #b91c1c;
}

.nsc-messages .nsc-success {
	color: #15803d;
}

.nsc-field.nsc-error input,
.nsc-field.nsc-error select,
.nsc-row.nsc-error input,
.nsc-row.nsc-error textarea {
	border-color: #b91c1c;
	box-shadow: 0 0 0 2px rgba( 185, 28, 28, 0.25 );
}

/* Label text of an invalid contact field. */
.nsc-row.nsc-error > span,
.nsc-privacy.nsc-error {
	color: #b91c1c;
}

/* Highlight the privacy checkbox itself when unconfirmed. */
.nsc-privacy.nsc-error input {
	outline: 2px solid #b91c1c;
	outline-offset: 2px;
}