/* Valport Prisberegner - Smedejern. Alt er scopet under .vpsj, så temaet ikke påvirkes. */
.vpsj {
	--vpsj-brand: #223a80;
	--vpsj-ink: #1d2330;
	--vpsj-muted: #6b7280;
	--vpsj-line: #e3e7ec;
	--vpsj-soft: #f4f6f9;
	--vpsj-radius: 10px;
	color: var(--vpsj-ink);
	font-size: 16px;
	line-height: 1.5;
	max-width: 860px;
	margin: 0 auto;
}
.vpsj *, .vpsj *::before, .vpsj *::after { box-sizing: border-box; }
.vpsj button { font: inherit; color: inherit; cursor: pointer; }
.vpsj button:disabled { cursor: not-allowed; }
.vpsj :focus-visible { outline: 3px solid color-mix(in srgb, var(--vpsj-brand) 45%, transparent); outline-offset: 2px; }
.vpsj h3:focus { outline: none; }

.vpsj-wizard { background: #fff; border: 1px solid var(--vpsj-line); border-radius: 16px; padding: 28px; box-shadow: 0 8px 30px rgba(20, 30, 50, .06); }
.vpsj-intro { margin: 0 0 18px; font-size: 1.05em; color: var(--vpsj-muted); }

/* Fremdrift */
.vpsj-progress { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 6px; counter-reset: none; }
.vpsj-progress li { flex: 1; position: relative; margin: 0; padding: 0; }
.vpsj-progress li > * { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 0; font-size: .82em; color: var(--vpsj-muted); }
.vpsj-progress li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; background: var(--vpsj-line); }
.vpsj-progress li:first-child::before { display: none; }
.vpsj-progress li.is-done::before, .vpsj-progress li.is-current::before { background: var(--vpsj-brand); }
.vpsj-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--vpsj-soft); color: var(--vpsj-muted); border: 2px solid var(--vpsj-line); }
.vpsj-progress .is-current .vpsj-dot { background: var(--vpsj-brand); border-color: var(--vpsj-brand); color: #fff; }
.vpsj-progress .is-done .vpsj-dot { background: #fff; border-color: var(--vpsj-brand); color: var(--vpsj-brand); }
.vpsj-progress .is-current .vpsj-plabel { color: var(--vpsj-ink); font-weight: 600; }
.vpsj-progress button:hover .vpsj-plabel { color: var(--vpsj-brand); text-decoration: underline; }

.vpsj-recap { margin: 0 0 18px; padding: 10px 14px; background: var(--vpsj-soft); border-radius: 8px; font-size: .9em; color: var(--vpsj-muted); }
.vpsj-recap strong { color: var(--vpsj-ink); }

/* Panel */
.vpsj-panel h3 { margin: 0; font-size: 1.4em; line-height: 1.3; }
.vpsj-sub { margin: 4px 0 18px; color: var(--vpsj-muted); font-size: .95em; }
.vpsj-label { margin: 18px 0 8px; font-weight: 700; font-size: .92em; }
.vpsj-label:first-child { margin-top: 0; }
.vpsj-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--vpsj-line); }
.vpsj-back { background: none; border: 0; padding: 10px 4px; color: var(--vpsj-muted) !important; font-weight: 600; }
.vpsj-back:hover { color: var(--vpsj-ink) !important; }

/* Serie-filter */
.vpsj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vpsj-chip { border: 1px solid var(--vpsj-line); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: .9em; transition: all .15s; }
.vpsj-chip:hover { border-color: var(--vpsj-brand); }
.vpsj-chip.is-active { background: var(--vpsj-brand); border-color: var(--vpsj-brand); color: #fff; }

/* Modelkort */
.vpsj-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.vpsj-model { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #fff; border: 2px solid var(--vpsj-line); border-radius: var(--vpsj-radius); padding: 10px 10px 12px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.vpsj-model:hover { border-color: color-mix(in srgb, var(--vpsj-brand) 50%, var(--vpsj-line)); transform: translateY(-1px); }
.vpsj-model.is-selected { border-color: var(--vpsj-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vpsj-brand) 15%, transparent); }
.vpsj-media { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--vpsj-soft); display: grid; place-items: center; overflow: hidden; margin-bottom: 10px; color: color-mix(in srgb, var(--vpsj-brand) 55%, #9aa3ad); }
.vpsj-media img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.vpsj-media svg { width: 70%; height: auto; }
.vpsj-model-group { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: var(--vpsj-muted); }
.vpsj-model-name { font-weight: 700; font-size: .98em; }

/* Længde/højde */
.vpsj-options { display: flex; flex-wrap: wrap; gap: 10px; }
.vpsj-option { min-width: 104px; background: #fff; border: 2px solid var(--vpsj-line); border-radius: var(--vpsj-radius); padding: 10px 16px; display: flex; flex-direction: column; align-items: center; transition: border-color .15s; }
.vpsj-option strong { font-size: 1.05em; }
.vpsj-option span { font-size: .8em; color: var(--vpsj-muted); }
.vpsj-option:hover { border-color: color-mix(in srgb, var(--vpsj-brand) 50%, var(--vpsj-line)); }
.vpsj-option.is-selected { border-color: var(--vpsj-brand); background: color-mix(in srgb, var(--vpsj-brand) 7%, #fff); }

.vpsj-note { margin-top: 16px; padding: 12px 14px; border-radius: 8px; font-size: .92em; }
.vpsj-note.is-warn { background: #fff7e6; border: 1px solid #f3d38b; }

/* Tilvalg */
.vpsj-addons { display: grid; gap: 10px; }
.vpsj-addon { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--vpsj-line); border-radius: var(--vpsj-radius); padding: 12px 14px; cursor: pointer; transition: border-color .15s; margin: 0; }
.vpsj-addon input { position: absolute; opacity: 0; pointer-events: none; }
.vpsj-check { flex: 0 0 22px; height: 22px; border: 2px solid #c3cad3; border-radius: 6px; display: grid; place-items: center; transition: all .15s; }
.vpsj-addon.is-selected { border-color: var(--vpsj-brand); }
.vpsj-addon.is-selected .vpsj-check { background: var(--vpsj-brand); border-color: var(--vpsj-brand); }
.vpsj-addon.is-selected .vpsj-check::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.vpsj-addon input:focus-visible + .vpsj-check { outline: 3px solid color-mix(in srgb, var(--vpsj-brand) 45%, transparent); outline-offset: 2px; }
.vpsj-addon-text { flex: 1; display: flex; flex-direction: column; }
.vpsj-addon-text span { font-size: .85em; color: var(--vpsj-muted); }

/* Knapper */
.vpsj-btn { display: inline-flex; justify-content: center; align-items: center; min-width: 160px; border: 0; border-radius: 8px; background: var(--vpsj-brand); color: #fff !important; font-weight: 700; padding: 13px 24px; transition: filter .15s, opacity .15s; }
.vpsj-btn:hover:not(:disabled) { filter: brightness(1.12); }
.vpsj-btn:disabled { opacity: .45; }

/* Formular */
.vpsj-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.vpsj-field-address, .vpsj-field-email { grid-column: 1 / -1; }
.vpsj-field label { display: block; font-weight: 600; font-size: .9em; margin-bottom: 4px; }
.vpsj-field input { width: 100%; border: 1.5px solid #cdd3da; border-radius: 8px; padding: 11px 12px; font: inherit; background: #fff; color: var(--vpsj-ink); }
.vpsj-field input:focus { border-color: var(--vpsj-brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vpsj-brand) 18%, transparent); }
.vpsj-field.has-error input { border-color: #c2410c; }
.vpsj-err { display: block; color: #c2410c; font-size: .82em; margin-top: 3px; }
.vpsj-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: .88em; color: var(--vpsj-muted); cursor: pointer; }
.vpsj-consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--vpsj-brand); }
.vpsj-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.vpsj-formmsg { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #fdecea; color: #8a1c13; font-size: .92em; }

/* Resultat */
.vpsj-eyebrow { margin: 0 0 4px; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--vpsj-muted); font-weight: 700; }
.vpsj-result h3 { margin-bottom: 16px; }
.vpsj-result-card { border: 1px solid var(--vpsj-line); border-radius: 12px; padding: 6px 20px 20px; }
.vpsj-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--vpsj-line); }
.vpsj-sum-row > span:last-child { white-space: nowrap; }
.vpsj-sum-row small { display: block; color: var(--vpsj-muted); font-size: .85em; }
.vpsj-result-total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; margin-top: 16px; padding: 16px 18px; border-radius: 10px; background: var(--vpsj-brand); color: #fff; }
.vpsj-result-total span { font-weight: 600; }
.vpsj-result-total strong { font-size: 1.8em; line-height: 1.2; }
.vpsj-result-total small { grid-column: 1 / -1; opacity: .8; font-size: .82em; }
.vpsj-sent { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; background: #ecf8f0; border-radius: 10px; font-size: .95em; }
.vpsj-sent p { margin: 0; }
.vpsj-sent-icon { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #1f8a4c; color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.vpsj-info { margin-top: 20px; font-size: .88em; color: var(--vpsj-muted); }
.vpsj-info ul { margin: 0; padding-left: 18px; }
.vpsj-info li { margin-bottom: 6px; }

@media (max-width: 600px) {
	.vpsj-wizard { padding: 20px 16px; border-radius: 12px; }
	.vpsj-models { grid-template-columns: 1fr 1fr; gap: 10px; }
	.vpsj-fields { grid-template-columns: 1fr; }
	.vpsj-option { min-width: 0; flex: 1 1 calc(33% - 10px); padding: 10px 8px; }
	.vpsj-plabel { font-size: .85em; text-align: center; line-height: 1.2; }
	.vpsj-progress li::before { left: calc(-50% + 18px); right: calc(50% + 18px); }
	.vpsj-btn { flex: 1; min-width: 0; }
	.vpsj-result-card { padding: 4px 14px 14px; }
	.vpsj-result-total strong { font-size: 1.5em; }
}

/* Tilvalgspriser */
.vpsj-addon-price { font-weight: 700; white-space: nowrap; }
.vpsj-addon-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding: 12px 14px; background: var(--vpsj-soft); border-radius: 8px; font-size: .95em; }
.vpsj-addon-sum strong { font-size: 1.1em; }
@media (max-width: 600px) {
	.vpsj-addon { flex-wrap: wrap; }
	.vpsj-addon-price { margin-left: 36px; }
}

/* Hvid tekst i alle blå felter - også selvom temaet sætter farver på knapper, strong, span, small m.m. */
.vpsj .vpsj-btn, .vpsj .vpsj-btn *,
.vpsj .vpsj-chip.is-active, .vpsj .vpsj-chip.is-active *,
.vpsj .vpsj-progress .is-current .vpsj-dot,
.vpsj .vpsj-result-total, .vpsj .vpsj-result-total *,
.vpsj .vpsj-sent-icon,
.vpsj .vpsj-addon.is-selected .vpsj-check { color: #fff !important; }
.vpsj .vpsj-btn:hover, .vpsj .vpsj-btn:focus, .vpsj .vpsj-chip.is-active:hover { color: #fff !important; background: var(--vpsj-brand) !important; }

/* ---------------------------------------------------------------
   Valports tema giver alle <button> blå baggrund. Vi følger det:
   modelkort, serie-filtre og mål-knapper er blå med hvid tekst,
   og det valgte felt markeres med hvid ring og flueben.
---------------------------------------------------------------- */
.vpsj .vpsj-model, .vpsj .vpsj-chip, .vpsj .vpsj-option {
	background: var(--vpsj-brand) !important;
	border: 2px solid var(--vpsj-brand) !important;
	color: #fff !important;
	text-transform: none !important;
	box-shadow: none;
	position: relative;
}
.vpsj .vpsj-model *, .vpsj .vpsj-chip *, .vpsj .vpsj-option * { color: #fff !important; }
.vpsj .vpsj-model .vpsj-model-group, .vpsj .vpsj-option span { color: rgba(255, 255, 255, .75) !important; }
.vpsj .vpsj-model:hover, .vpsj .vpsj-chip:hover, .vpsj .vpsj-option:hover,
.vpsj .vpsj-model:focus, .vpsj .vpsj-chip:focus, .vpsj .vpsj-option:focus {
	background: color-mix(in srgb, var(--vpsj-brand) 88%, #fff) !important;
	color: #fff !important;
}
/* Valgt: hvid ring + mørkere blå + flueben */
.vpsj .vpsj-model.is-selected, .vpsj .vpsj-chip.is-active, .vpsj .vpsj-option.is-selected {
	background: color-mix(in srgb, var(--vpsj-brand) 75%, #000) !important;
	border-color: #fff !important;
	box-shadow: 0 0 0 3px var(--vpsj-brand) !important;
}
.vpsj .vpsj-model.is-selected::after, .vpsj .vpsj-option.is-selected::after {
	content: "✓"; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%;
	background: #1f8a4c; color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.vpsj .vpsj-media { background: #fff !important; }
/* Tilbage-knap og fremdrifts-knapper skal ikke være blå klodser */
.vpsj .vpsj-back, .vpsj .vpsj-progress button {
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	color: var(--vpsj-muted) !important; text-transform: none !important; padding: 10px 4px;
}
.vpsj .vpsj-progress button { padding: 0; }
.vpsj .vpsj-progress button .vpsj-plabel { color: var(--vpsj-muted) !important; }
.vpsj .vpsj-progress button .vpsj-dot { color: var(--vpsj-brand) !important; }
.vpsj .vpsj-back:hover { color: var(--vpsj-ink) !important; background: transparent !important; }

/* Match Valports knapper: runde hjørner som sitet (20px) */
.vpsj .vpsj-btn { border-radius: 20px !important; }
.vpsj .vpsj-model { border-radius: 16px !important; }
.vpsj .vpsj-option { border-radius: 14px !important; }
.vpsj .vpsj-media { border-radius: 10px; }
.vpsj-wizard { scroll-margin-top: 170px; }