/**
 * Prisberegneren.
 *
 * Bygger oven på formular.css og henter sine farver fra temaets `theme.json`
 * via `--wp--preset--*`, så en ændring i paletten slår igennem her uden at nogen
 * skal huske det.
 */

.edodsbo-formular__afsnit {
	margin: 36px 0 16px;
	padding-top: 20px;
	border-top: 1px solid var(--edodsbo-form-kant, #C7C7C7);
	font-family: var(--wp--preset--font-family--oswald, inherit);
	font-size: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--sort, #1F1F1F);
}

.edodsbo-formular__afsnit:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

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

/*
 * Uden JavaScript får grupperne aldrig `hidden`, og så står de under hinanden
 * som én lang formular. Der er derfor med vilje ingen regel her, der skjuler
 * noget - skjulningen sker udelukkende med `hidden`-attributten fra scriptet.
 */
.edodsbo-formular__gruppe {
	margin: 0;
}

.edodsbo-formular__gruppe + .edodsbo-formular__gruppe {
	margin-top: 8px;
}

/* Overskriften kan få fokus ved trinskift; konturen om en overskrift ville
   larme, så den vises kun for tastaturbrugere. */
.edodsbo-formular__afsnit:focus {
	outline: none;
}

.edodsbo-formular__afsnit:focus-visible {
	outline: 3px solid var(--edodsbo-form-groen, #4D7E28);
	outline-offset: 4px;
}

.edodsbo-formular__trinlinje {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--edodsbo-form-kant, #C7C7C7);
}

/* Trintallet skubber knapperne til højre, så Næste altid står samme sted -
   knappen skal ikke flytte sig, fordi et trinnummer bliver tocifret. */
.edodsbo-formular__trintal {
	flex: 1 1 auto;
	margin: 0;
	font-size: 16px;
	color: var(--wp--preset--color--graa-lys, #6E6E6E);
}

.edodsbo-formular__knap--sekundaer {
	background: transparent;
	border: 2px solid var(--edodsbo-form-groen, #4D7E28);
	color: var(--edodsbo-form-groen, #4D7E28);
	padding: 10px 30px;
}

.edodsbo-formular__knap--sekundaer:hover {
	background: var(--wp--preset--color--graa-2, #F7F7F7);
	color: var(--edodsbo-form-groen-hover, #3E6620);
}

/* Sendeknappen flyttes ind i rækken af JavaScript og skal ikke tage sin egen
   topmargen med. Se `trinvis()` i beregner.js. */
.edodsbo-formular__trinlinje .edodsbo-formular__handlinger {
	margin-top: 0;
}

@media (max-width: 781px) {
	.edodsbo-formular__trinlinje {
		flex-wrap: wrap;
	}

	.edodsbo-formular__trintal {
		flex: 1 0 100%;
		margin-bottom: 12px;
	}

	/*
	 * Knapperne står ved siden af hinanden i stedet for at stable - to
	 * fuldbredde-knapper over hinanden ser ud som to trin, ikke som frem og
	 * tilbage.
	 *
	 * De deler IKKE bredden ligeligt. «Tilbage» får kun sin egen tekstbredde,
	 * og resten går til den primære knap; ved en halvering brød «Send og se
	 * prisen» over tre linjer på en telefon. Den vigtigste handling skal have
	 * pladsen.
	 */
	.edodsbo-formular__trinlinje .edodsbo-formular__knap--sekundaer {
		flex: 0 1 auto;
		display: block;
		width: auto;
		padding: 10px 20px;
	}

	.edodsbo-formular__trinlinje .edodsbo-formular__handlinger {
		flex: 1 1 auto;
		display: block;
		width: auto;
	}

	.edodsbo-formular__trinlinje .edodsbo-formular__handlinger .edodsbo-formular__knap {
		width: 100%;
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* --- Antal: skydeknap + talfelt ------------------------------------------- */

.edodsbo-felt__antal {
	display: flex;
	align-items: center;
	gap: 16px;
}

.edodsbo-felt__skyder {
	flex: 1 1 auto;
	min-width: 0;
	height: 32px;
	accent-color: var(--edodsbo-form-groen, #4D7E28);
}

/*
 * Talfeltet er smalt, men ikke smallere end 24 px klikmål plus plads til to
 * cifre. Tal højrestilles, som alle beløb og antal på sitet gør.
 */
.edodsbo-felt__tal {
	flex: 0 0 auto;
	width: 5.5em;
	text-align: right;
}

/* --- Resultatpanelet ------------------------------------------------------ */

.edodsbo-beregner {
	margin: 32px 0;
	transition: opacity 150ms ease;
}

/* Under hentningen dæmpes panelet en anelse, så det er synligt at tallet er ved
   at blive opdateret - men det bliver stående og læsbart. */
.edodsbo-beregner--henter {
	opacity: 0.6;
}

.edodsbo-beregner__pakke {
	margin: 0 0 20px;
	font-size: 19px;
	line-height: 29px;
}

/*
 * Den anbefalede pakke står alene og midt på siden. Bredden holdes nede, så
 * kortet ikke bliver et bånd i fuld sidebredde - et enkelt kort på 1170 px
 * ligner en fejl, ikke en anbefaling.
 */
.edodsbo-beregner__anbefalet {
	max-width: 480px;
	margin: 0 auto;
}

/* De to øvrige ligger side om side inde i harmonikaen. */
.edodsbo-beregner__trin {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: stretch;
	margin-top: 20px;
}

/*
 * Beskeden, når vi anbefaler mindre, end kunden bad om. Beige kant frem for
 * grøn: det er ikke en advarsel, og det er heller ikke anbefalingen - det er en
 * forklaring ved siden af den.
 */
.edodsbo-beregner__nedtonet {
	max-width: 480px;
	margin: 20px auto 0;
	padding: 16px 20px;
	border-left: 4px solid var(--wp--preset--color--beige-moerk, #CDBC8C);
	background: var(--wp--preset--color--graa-2, #F7F7F7);
	font-size: 16px;
	line-height: 25px;
	text-align: left;
}

/* --- «Se de andre muligheder» -------------------------------------------- */

.edodsbo-beregner__andre {
	margin-top: 24px;
}

/*
 * Klikmålet er hele linjen og mindst 24 px høj (WCAG 2.5.8). Trekanten fra
 * browseren bliver stående - den fortæller, at der er noget at folde ud, og en
 * egen pil ville bare være en ekstra ting at holde synkron med tilstanden.
 */
.edodsbo-beregner__andre summary {
	min-height: 44px;
	padding: 10px 4px;
	font-family: var(--wp--preset--font-family--oswald, inherit);
	font-size: 17px;
	font-weight: 500;
	color: var(--edodsbo-form-groen, #4D7E28);
	cursor: pointer;
}

.edodsbo-beregner__andre summary:focus-visible {
	outline: 3px solid var(--edodsbo-form-groen, #4D7E28);
	outline-offset: 2px;
}

.edodsbo-beregner__kort {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var(--edodsbo-form-kant, #C7C7C7);
	border-radius: 6px;
	background: var(--wp--preset--color--hvid, #FFFFFF);
}

/*
 * Den fremhævede pakke får en tykkere kant i den grønne - ikke en anden
 * baggrundsfarve. Farven alene ville være den eneste markering, og mærkatet
 * ovenover siger i tekst, hvad kanten betyder (WCAG 1.4.1).
 */
.edodsbo-beregner__kort--fremhaevet {
	border: 2px solid var(--edodsbo-form-groen, #4D7E28);
	padding: 23px;
}

.edodsbo-beregner__maerke {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--oswald, inherit);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--edodsbo-form-groen, #4D7E28);
}

.edodsbo-beregner__navn {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--oswald, inherit);
	font-size: 20px;
	font-weight: 600;
	color: var(--wp--preset--color--sort, #1F1F1F);
}

.edodsbo-beregner__pris {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--oswald, inherit);
	font-size: 30px;
	font-weight: 600;
	line-height: 38px;
	color: var(--wp--preset--color--moerkeblaa, #272D3F);
}

.edodsbo-beregner__loefte {
	margin: 0 0 8px;
	font-weight: 500;
}

.edodsbo-beregner__tilkoeb {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 24px;
	color: var(--wp--preset--color--graa-lys, #6E6E6E);
}

/* Skubber tilkøbsteksten ned i bunden, så de tre kort flugter uanset hvor
   mange punkter de har. */
.edodsbo-beregner__tilkoeb {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 16px;
}

.edodsbo-beregner__punkter {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.edodsbo-beregner__punkter li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 26px;
	font-size: 16px;
	line-height: 24px;
}

/* Fluebenet er dekoration og skal ikke læses op sammen med hvert punkt. */
.edodsbo-beregner__punkter li::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 4px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--edodsbo-form-groen, #4D7E28);
	border-bottom: 2px solid var(--edodsbo-form-groen, #4D7E28);
	transform: rotate(-45deg);
}

/* --- Specifikationen ------------------------------------------------------ */

.edodsbo-beregner__specifikation {
	margin-top: 24px;
	padding: 16px 20px;
	background: var(--wp--preset--color--graa-2, #F7F7F7);
	border-radius: 6px;
}

/* Klikmålet er hele linjen og mindst 24 px høj (WCAG 2.5.8). */
.edodsbo-beregner__specifikation summary {
	min-height: 32px;
	padding: 4px 0;
	font-weight: 500;
	cursor: pointer;
}

.edodsbo-beregner__specifikation table {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	font-size: 16px;
}

.edodsbo-beregner__specifikation th,
.edodsbo-beregner__specifikation td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--wp--preset--color--graa-3, #EEEEEE);
	text-align: left;
}

/* Antal og beløb højrestilles, så cifrene står under hinanden. */
.edodsbo-beregner__tal {
	text-align: right;
}

.edodsbo-beregner__forbehold {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 23px;
	color: var(--wp--preset--color--graa-lys, #6E6E6E);
}

/* --- Mens der mangler svar ------------------------------------------------ */

.edodsbo-beregner__resultat--afventer {
	padding: 24px;
	border: 1px dashed var(--edodsbo-form-kant, #C7C7C7);
	border-radius: 6px;
	background: var(--wp--preset--color--graa-2, #F7F7F7);
}

.edodsbo-beregner__resultat--afventer .edodsbo-beregner__pakke {
	margin-bottom: 12px;
	font-weight: 500;
}

.edodsbo-beregner__mangler {
	margin: 0 0 12px;
	padding-left: 20px;
}

.edodsbo-beregner__mangler li {
	margin-bottom: 4px;
	color: var(--wp--preset--color--graa-lys, #6E6E6E);
}

/* --- Når vi ikke kan hjælpe ----------------------------------------------- */

.edodsbo-beregner__resultat--stop {
	padding: 24px;
	border-left: 4px solid var(--wp--preset--color--beige-moerk, #CDBC8C);
	background: var(--wp--preset--color--graa-2, #F7F7F7);
}

.edodsbo-beregner__resultat--stop h4 {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--oswald, inherit);
	font-size: 20px;
	font-weight: 600;
}

.edodsbo-beregner__resultat--stop p {
	margin: 0 0 12px;
}

.edodsbo-beregner__resultat--stop p:last-child {
	margin-bottom: 0;
}

/* --- Mindre skærme -------------------------------------------------------- */

@media (max-width: 781px) {
	.edodsbo-beregner__trin {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.edodsbo-felt__antal {
		gap: 12px;
	}

	.edodsbo-beregner__pris {
		font-size: 26px;
		line-height: 34px;
	}
}