/* ============================================================================
   DT Stubfræsning — frontend
   ----------------------------------------------------------------------------
   Tokens fra Dansk Træplejes brand kit, defineret på plugin-RODEN (.dt-stub),
   ikke på :root — så farverne ikke lækker ud i temaet, og temaet ikke
   overskriver dem. Alt er scopet under .dt-stub.

   Opbygningen er tre nummererede trin-kort: 1) stubbene, 2) oplysningerne,
   3) betaling og bestilling — med prisboksen som hovedperson imellem trin 1
   og 2.

   Regel: FARVER, afstande, radier og skygger kommer altid fra tokens —
   var(--dt-…), aldrig en rå hex-værdi ude i en regel. Faste pixeltal er kun
   tilladt til et elements egne mål (ikon- og badgestørrelser, 44 px hit-target,
   kantbredder, breakpoints) — dem har vi ikke tokens for.

   Ingen build-kæde: vanilla CSS med custom properties.
   ============================================================================ */

.dt-stub {
	/* --- Brand-farver (fra brand kit) --- */
	--dt-skovgroen: #2b4632;
	--dt-barkbrun: #5a4632;
	--dt-rav: #c97f3c;
	--dt-cream: #f4efe6;
	--dt-kul: #1c1c1a;

	/* --- Semantiske roller (brug DISSE ude i reglerne) --- */
	--dt-brand: var(--dt-skovgroen);
	--dt-brand-mork: #213626;
	--dt-brand-toning: #e7ece6;
	/* Kant i brandfamilien — tydeligere end --dt-kant, roligere end --dt-brand.
	   Bruges hvor et element skal træde frem uden at blive en knap. */
	--dt-brand-kant: #c3d0c4;

	--dt-accent: var(--dt-rav);
	--dt-accent-mork: #b06e30;
	--dt-accent-toning: #f5e7d8;

	--dt-tekst: var(--dt-kul);
	--dt-tekst-daempet: var(--dt-barkbrun);
	--dt-tekst-paa-brand: #ffffff;

	--dt-flade: #ffffff;
	--dt-flade-2: var(--dt-cream);
	--dt-kant: #e3ded4;
	--dt-kant-staerk: #cfc8ba;

	/* --- Status --- */
	--dt-ok: var(--dt-skovgroen);
	--dt-ok-flade: var(--dt-brand-toning);
	--dt-advarsel: #b26a00;
	--dt-advarsel-flade: #fff8e1;
	--dt-fejl: #c62828;
	--dt-fejl-flade: #fdecea;

	/* --- Spacing --- */
	--dt-space-1: 4px;
	--dt-space-2: 8px;
	--dt-space-3: 12px;
	--dt-space-4: 16px;
	--dt-space-5: 24px;
	--dt-space-6: 32px;

	/* --- Form --- */
	--dt-radius: 6px;
	--dt-radius-lg: 10px;
	--dt-radius-pill: 999px;

	--dt-skygge: 0 1px 3px rgba(28, 28, 26, 0.12);
	--dt-skygge-lg: 0 4px 16px rgba(28, 28, 26, 0.18);

	/* --- Typografi --- */
	--dt-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--dt-tekst-str: 1rem;
	--dt-tekst-lille: 0.875rem;
	--dt-tekst-mikro: 0.75rem;
	--dt-overskrift: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
	--dt-sum: clamp(1.4rem, 1.15rem + 1vw, 1.75rem);
	--dt-linjehoejde: 1.5;

	/* --- Fokus --- */
	--dt-fokus-ring: var(--dt-rav);

	/* Dropdown-pilen. En data-URI kan ikke slå var(--dt-barkbrun) op — farven
	   SKAL skrives som hex inde i SVG'en. Den bor derfor her sammen med de
	   andre farver, ikke ude i en regel: ændrer du --dt-barkbrun, skal
	   %235A4632 herunder rettes med. Det er den ene bevidste dublering. */
	--dt-select-pil: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A4632' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");

	/* Fremdriftslinjens fyld. Sættes fra JS som en ren procentværdi. */
	--dt-fremdrift: 0%;

	font-family: var(--dt-font);
	font-size: var(--dt-tekst-str);
	line-height: var(--dt-linjehoejde);
	color: var(--dt-tekst);
	max-width: 720px;
}

/* Fokus-ring — ÉN central regel. Fjern den aldrig uden en synlig erstatning. */
.dt-stub :focus-visible {
	outline: 3px solid var(--dt-fokus-ring);
	outline-offset: 2px;
	border-radius: var(--dt-radius);
}

/* ---------------------------------------------------------------- Layout */

.dt-stub__form {
	display: grid;
	gap: var(--dt-space-4);
}

.dt-stub__heading {
	margin: 0;
	font-size: var(--dt-overskrift);
	line-height: 1.25;
	color: var(--dt-brand);
}

/* ------------------------------------------------------------- Trin-kort */

/* Hvert trin er et kort med et nummer. Kunden kan se, hvor langt hun er, uden
   at der er indført en wizard — alt står stadig på én side. */
.dt-stub__step {
	background: var(--dt-flade);
	border: 1px solid var(--dt-kant);
	border-radius: var(--dt-radius-lg);
	box-shadow: var(--dt-skygge);
	padding: var(--dt-space-4) var(--dt-space-5) var(--dt-space-5);
}

.dt-stub__step-head {
	display: flex;
	align-items: center;
	gap: var(--dt-space-3);
	padding-bottom: var(--dt-space-3);
	border-bottom: 1px solid var(--dt-kant);
}

.dt-stub__step-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--dt-brand);
	color: var(--dt-tekst-paa-brand);
	font-size: var(--dt-tekst-lille);
	font-weight: 700;
	line-height: 1;
}

.dt-stub__step-body {
	display: grid;
	gap: var(--dt-space-4);
	margin-top: var(--dt-space-4);
}

/* ------------------------------------------------------------ Formularfelter */

.dt-stub__field {
	display: flex;
	flex-direction: column;
	gap: var(--dt-space-1);
}

/* Postnr smalt + by bredt; stables på mobil. */
.dt-stub__field-2 {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--dt-space-3);
}

.dt-stub__label {
	font-weight: 600;
	font-size: var(--dt-tekst-lille);
}

.dt-stub__input,
.dt-stub__select,
.dt-stub__textarea {
	width: 100%;
	min-height: 44px; /* hit-target */
	padding: var(--dt-space-2) var(--dt-space-3);
	border: 1px solid var(--dt-kant-staerk);
	border-radius: var(--dt-radius);
	background: var(--dt-flade);
	color: var(--dt-tekst);
	font: inherit;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Egen pil på dropdowns. Browserens standardpil ser forskellig ud i hver
   browser og trækker feltet ned i "systemformular"-udtrykket. Pilen er en
   data-URI defineret som token øverst — ingen ekstra request, ingen build-kæde. */
.dt-stub__select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--dt-space-6);
	background-image: var(--dt-select-pil);
	background-repeat: no-repeat;
	background-position: right var(--dt-space-3) center;
	background-size: 12px 8px;
}

.dt-stub__textarea {
	min-height: 88px;
	resize: vertical;
}

.dt-stub__input:hover,
.dt-stub__select:hover,
.dt-stub__textarea:hover {
	border-color: var(--dt-barkbrun);
}

.dt-stub__input:focus,
.dt-stub__select:focus,
.dt-stub__textarea:focus {
	border-color: var(--dt-brand);
}

.dt-stub__input--fejl,
.dt-stub__select--fejl {
	border-color: var(--dt-fejl);
	background-color: var(--dt-fejl-flade);
}

.dt-stub__field-fejl {
	margin: 0;
	font-size: var(--dt-tekst-lille);
	color: var(--dt-fejl);
	font-weight: 600;
}

.dt-stub__hjaelp {
	font-size: var(--dt-tekst-lille);
	color: var(--dt-tekst-daempet);
}

/* ------------------------------------------------------------ Stub-vælgere */

/* Ét felt pr. stub bliver hurtigt til 25 ens felter under hinanden. Grid'et
   lægger dem i 2-3 kolonner på bred skærm og 1 på mobil.
   auto-fit, ikke auto-fill: ved 1-2 stubbe falder de tomme kolonner sammen, så
   cellen fylder bredden i stedet for at ligge alene i venstre hjørne.
   min(240px, 100%), ikke bare 240px: et hårdt minimum kan ikke krympe, så på en
   smal skærm med et tema der lægger padding på begge sider ville cellen skubbe
   siden vandret. */
.dt-stub__stumps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--dt-space-3);
}

.dt-stub__stump {
	display: flex;
	flex-direction: column;
	gap: var(--dt-space-2);
	padding: var(--dt-space-3);
	border: 1px solid var(--dt-kant);
	border-radius: var(--dt-radius);
	background: var(--dt-flade-2);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Valgt stub markeres, så kunden kan skimme hvilke der mangler. Venstrekanten
   er en inset-skygge, ikke en border — så cellen ikke hopper 3 px, når den
   skifter tilstand. */
.dt-stub__stump.is-valgt {
	border-color: var(--dt-brand-kant);
	background: var(--dt-brand-toning);
	box-shadow: inset 3px 0 0 var(--dt-brand);
}

.dt-stub__stump-nr {
	font-size: var(--dt-tekst-mikro);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dt-tekst-daempet);
}

.dt-stub__stump.is-valgt .dt-stub__stump-nr {
	color: var(--dt-brand);
}

/* --------------------------------------------------------------- Info-chips */

/* Målereglerne stod før som en grå punktliste, som ingen læste. Som rolige
   chips lige under vælgerne bliver de læst dér, hvor de er relevante. */
.dt-stub__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dt-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dt-stub__chip {
	display: flex;
	align-items: flex-start;
	gap: var(--dt-space-2);
	flex: 1 1 240px;
	padding: var(--dt-space-2) var(--dt-space-3);
	border: 1px solid var(--dt-kant);
	border-radius: var(--dt-radius);
	background: var(--dt-flade-2);
	font-size: var(--dt-tekst-lille);
	color: var(--dt-tekst-daempet);
}

/* Markøren tegnes i CSS — så JS'en kan holde sig til textContent. */
.dt-stub__chip::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 0.45em;
	border-radius: 50%;
	background: var(--dt-accent);
}

/* -------------------------------------------------------------------- Pris */

.dt-stub__price {
	background: var(--dt-brand-toning);
	border: 1px solid var(--dt-brand-kant);
	border-radius: var(--dt-radius-lg);
	padding: var(--dt-space-4) var(--dt-space-5);
	box-shadow: var(--dt-skygge);
}

/* Mens /beregn kører, tones boksen ned i stedet for at stå med et gammelt tal,
   som om det var det nye. */
.dt-stub__price[aria-busy="true"] {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.dt-stub__price-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dt-space-2);
	margin-bottom: var(--dt-space-3);
}

.dt-stub__price-head .dt-stub__heading {
	margin: 0;
}

.dt-stub__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--dt-space-3);
	border: 1px solid transparent;
	border-radius: var(--dt-radius-pill);
	font-size: var(--dt-tekst-mikro);
	font-weight: 700;
	white-space: nowrap;
}

/* Foreløbig pris: rav-toning MED mørk tekst (hvid på rav dumper kontrast). */
.dt-stub__badge--forelobig {
	background: var(--dt-accent-toning);
	color: var(--dt-barkbrun);
	border-color: var(--dt-accent);
}

/* Klar: hvid flade på den grønne boks, så badgen stadig træder frem. */
.dt-stub__badge--klar {
	background: var(--dt-flade);
	color: var(--dt-brand);
	border-color: var(--dt-brand);
}

/* Fremdrift: rent visuel gentagelse af "mangler N af M"-teksten, som står
   lige under i en aria-live-region. Derfor aria-hidden i markup. */
.dt-stub__fremdrift {
	height: 6px;
	margin-bottom: var(--dt-space-3);
	border-radius: var(--dt-radius-pill);
	background: var(--dt-flade);
	overflow: hidden;
}

.dt-stub__fremdrift-fyld {
	width: var(--dt-fremdrift);
	height: 100%;
	border-radius: var(--dt-radius-pill);
	background: var(--dt-brand);
	transition: width 0.25s ease;
}

.dt-stub__lines {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--dt-space-1) var(--dt-space-4);
	margin: 0;
	font-size: var(--dt-tekst-lille);
}

.dt-stub__lines dt {
	margin: 0;
	color: var(--dt-tekst-daempet);
}

.dt-stub__lines dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.dt-stub__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dt-space-2);
	margin: var(--dt-space-3) 0 0;
	padding-top: var(--dt-space-3);
	border-top: 1px solid var(--dt-brand-kant);
	font-weight: 700;
	color: var(--dt-brand);
}

.dt-stub__total-sum {
	font-size: var(--dt-sum);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

/* Tom-tilstand: ingen pris endnu. */
.dt-stub__tom {
	margin: 0;
	padding: var(--dt-space-4) 0;
	text-align: center;
	color: var(--dt-tekst-daempet);
	font-size: var(--dt-tekst-lille);
}

.dt-stub__hint {
	display: block;
	margin: var(--dt-space-2) 0 0;
	font-size: var(--dt-tekst-lille);
	color: var(--dt-tekst-daempet);
}

/* ---------------------------------------------------------------- Betaling */

/* Betalingsvalgene som kort: hele fladen er klikbar, og det valgte er tydeligt
   uden at man skal kigge på selve radioknappen. */
.dt-stub__radio {
	display: flex;
	align-items: flex-start;
	gap: var(--dt-space-3);
	min-height: 44px; /* hit-target for labelen */
	padding: var(--dt-space-3);
	border: 1px solid var(--dt-kant);
	border-radius: var(--dt-radius);
	background: var(--dt-flade);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dt-stub__radio:hover {
	border-color: var(--dt-brand-kant);
}

.dt-stub__radio.is-valgt {
	border-color: var(--dt-brand);
	background: var(--dt-brand-toning);
	font-weight: 600;
}

.dt-stub__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--dt-space-2);
	min-height: 44px;
	padding: var(--dt-space-1) 0;
	cursor: pointer;
	font-size: var(--dt-tekst-lille);
}

.dt-stub__radio input,
.dt-stub__consent input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--dt-brand);
}

.dt-stub__paydetail {
	display: grid;
	gap: var(--dt-space-1);
	margin: 0;
	padding: var(--dt-space-3);
	border-radius: var(--dt-radius);
	background: var(--dt-flade-2);
}

/* Tom paydetail må ikke efterlade en tom cream-kasse. */
.dt-stub__paydetail:empty {
	display: none;
}

.dt-stub__payrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--dt-space-2);
	font-variant-numeric: tabular-nums;
}

.dt-stub__payrow--sum {
	font-weight: 700;
	color: var(--dt-brand);
}

.dt-stub__test {
	margin: 0;
	padding: var(--dt-space-2) var(--dt-space-3);
	border-radius: var(--dt-radius);
	border-left: 4px solid var(--dt-advarsel);
	background: var(--dt-advarsel-flade);
	color: var(--dt-advarsel);
	font-size: var(--dt-tekst-lille);
	font-weight: 700;
}

/* ------------------------------------------------------------------ Knapper */

.dt-stub__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dt-space-2);
	width: 100%;
	min-height: 48px;
	padding: var(--dt-space-3) var(--dt-space-5);
	border: 1px solid transparent;
	border-radius: var(--dt-radius);
	background: var(--dt-brand);
	color: var(--dt-tekst-paa-brand);
	font: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.1;
	cursor: pointer;
	box-shadow: var(--dt-skygge);
	transition: background-color 0.15s ease;
}

.dt-stub__button:hover:not(:disabled) {
	background: var(--dt-brand-mork);
}

.dt-stub__button:active:not(:disabled) {
	background: var(--dt-brand-mork);
	transform: translateY(1px);
}

.dt-stub__button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

/* Loading: rolig indikator i knappen, så siden ikke føles frossen. */
.dt-stub__spinner {
	width: 18px;
	height: 18px;
	border: 3px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--dt-tekst-paa-brand);
	border-radius: 50%;
	animation: dt-stub-spin 0.8s linear infinite;
}

@keyframes dt-stub-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ----------------------------------------------------------------- Beskeder */

.dt-stub__message {
	margin: 0;
	min-height: 1.2em;
}

.dt-stub__message--fejl {
	padding: var(--dt-space-3) var(--dt-space-4);
	border-radius: var(--dt-radius);
	border-left: 4px solid var(--dt-fejl);
	background: var(--dt-fejl-flade);
	color: var(--dt-fejl);
	font-weight: 600;
}

.dt-stub__ok,
.dt-stub__kvittering {
	padding: var(--dt-space-5);
	border: 1px solid var(--dt-brand-kant);
	border-radius: var(--dt-radius-lg);
	background: var(--dt-brand-toning);
	box-shadow: var(--dt-skygge);
}

/* Fluebenet tegnes i CSS, så PHP'en og JS'en kan holde sig til ren tekst. */
.dt-stub__ok::before,
.dt-stub__kvittering::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--dt-space-3);
	border-radius: 50%;
	background: var(--dt-brand);
	color: var(--dt-tekst-paa-brand);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

.dt-stub__ok {
	margin: 0;
}

.dt-stub__kvittering h3 {
	margin-top: 0;
	font-size: var(--dt-overskrift);
	color: var(--dt-brand);
}

.dt-stub__kvittering p:last-child {
	margin-bottom: 0;
}

/* Ordrenummeret er det kunden skal kunne finde igen — giv det sin egen linje. */
.dt-stub__ref {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dt-space-2);
	padding: var(--dt-space-3) var(--dt-space-4);
	border: 1px solid var(--dt-brand-kant);
	border-radius: var(--dt-radius);
	background: var(--dt-flade);
	font-size: var(--dt-tekst-lille);
	color: var(--dt-tekst-daempet);
}

.dt-stub__ref strong {
	font-size: var(--dt-tekst-str);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
	color: var(--dt-brand);
}

/* Afbrudt betaling: rav i stedet for grøn — og intet flueben. */
.dt-stub__kvittering--afbrudt {
	background: var(--dt-advarsel-flade);
	border-color: var(--dt-kant-staerk);
}

.dt-stub__kvittering--afbrudt::before {
	content: "!";
	background: var(--dt-accent);
	color: var(--dt-kul);
}

.dt-stub__advarsel {
	padding: var(--dt-space-4);
	border: 1px solid var(--dt-kant);
	border-left: 4px solid var(--dt-advarsel);
	border-radius: var(--dt-radius-lg);
	background: var(--dt-flade-2);
}

/* ---------------------------------------------------------------- Honeypot */

/* Skal være usynligt for mennesker, men udfyldeligt for bots.
   display:none undgås bevidst — nogle bots springer skjulte felter over. */
.dt-stub__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	pointer-events: none;
}

/* -------------------------------------------------------------- Responsivt */

/* Prisboksen var et forsøg værd som "klæbende" bundlinje på mobil, men den er
   målt til 266 px — en tredjedel af en telefonskærm — og ville dække de felter,
   kunden skal udfylde. Den bliver derfor i flowet, lige efter stubbene, hvor
   den hører hjemme. (Sticky virker i øvrigt ikke direkte i .dt-stub__form,
   fordi hvert barn får sin egen grid-række at klæbe indenfor.) */

@media (max-width: 480px) {
	.dt-stub__step {
		padding: var(--dt-space-4);
	}

	.dt-stub__field-2 {
		grid-template-columns: 1fr;
	}

	.dt-stub__total {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------- Reduceret bevægelse */

@media (prefers-reduced-motion: reduce) {
	.dt-stub *,
	.dt-stub *::before,
	.dt-stub *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}