/* Claus Prisberegner — matcher designet på trykogtro.dk/priser/
   (beige boks #f5f2e9, grøn accent #3CCE88). Farver, padding m.m. styres
   fra Design-sektionen i indstillingerne via CSS-variablerne nedenfor;
   værdierne her er kun reserve. Skrifttypen arves fra temaet. */
.pc-prisberegner {
	--pc-accent: #3cce88;
	--pc-knap: #3cce88;
	--pc-knap-hover: #30a56d;
	--pc-bg: #f5f2e9;
	--pc-text: #333333;
	--pc-fejl: #b3261e;

	box-sizing: border-box;
	max-width: var(--pc-maxwidth, 480px);
	padding: var(--pc-padding, 24px);
	background: var(--pc-bg);
	font-family: inherit;
	color: var(--pc-text);
}

.pc-prisberegner *,
.pc-prisberegner *::before,
.pc-prisberegner *::after {
	box-sizing: inherit;
}

.pc-prisberegner .pc-felt {
	margin: 0 0 1.2rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pc-prisberegner .pc-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1em;
}

/* Oplag */
.pc-prisberegner .pc-antal {
	width: 120px;
	height: 46px;
	padding: 0 0.7rem;
	font-family: inherit;
	/* !important: The7 sætter font-size/line-height på .content input[type="number"],
	   som ellers vinder over denne regel (højere specificitet). */
	font-size: var(--pc-input-fs, 18px) !important;
	line-height: normal !important;
	color: var(--pc-text);
	background: #fff;
	border: 1px solid rgba(51, 51, 51, 0.08);
	border-radius: 2px;
}

.pc-prisberegner .pc-antal:focus {
	outline: none;
	border-color: var(--pc-accent);
}

/* Slider til antal sider: grønt fyld til venstre for grebet,
   og den valgte værdi vises under grebet.
   JS sætter --pc-pct (procent, til fyldet) og --pc-andel (0-1, til
   placeringen af værdien). */
.pc-prisberegner .pc-sider-wrap {
	position: relative;
	padding-bottom: 1.6rem; /* plads til værdien under grebet */
}

.pc-prisberegner .pc-sider {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 28px; /* god berøringsflade på mobil */
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	--pc-pct: 0%;
}

.pc-prisberegner .pc-sider::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--pc-accent) var(--pc-pct), #ffffff var(--pc-pct));
}

.pc-prisberegner .pc-sider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -7px;
	border: 0;
	border-radius: 50%;
	background: var(--pc-accent);
}

.pc-prisberegner .pc-sider::-moz-range-track {
	height: 8px;
	border-radius: 4px;
	background: #ffffff;
}

.pc-prisberegner .pc-sider::-moz-range-progress {
	height: 8px;
	border-radius: 4px;
	background: var(--pc-accent);
}

.pc-prisberegner .pc-sider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: var(--pc-accent);
}

.pc-prisberegner .pc-sider-vis {
	position: absolute;
	top: 32px;
	/* Grebet er 22px bredt; værdien følger grebets centrum. */
	left: calc((100% - 22px) * var(--pc-andel, 0) + 11px);
	transform: translateX(-50%);
	font-size: 0.95em;
}

/* Format- og papirvalg: runde felter med grønt flueben */
.pc-prisberegner .pc-valg .pc-knapvalg {
	display: flex;
	align-items: center;
	margin: 0 0 0.65rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pc-prisberegner .pc-valg-papir .pc-knapvalg {
	display: inline-flex;
	margin: 0 1.4rem 0.2rem 0;
}

.pc-prisberegner .pc-valg input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.pc-prisberegner .pc-valg .pc-cirkel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-right: 0.6rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(51, 51, 51, 0.12);
	transition: box-shadow 0.15s;
}

.pc-prisberegner .pc-valg .pc-cirkel::after {
	content: "";
	width: 13px;
	height: 8px;
	margin-top: -3px;
	border-left: 3px solid var(--pc-accent);
	border-bottom: 3px solid var(--pc-accent);
	transform: rotate(-45deg) scale(0);
	transition: transform 0.12s;
}

.pc-prisberegner .pc-valg input[type="radio"]:checked + .pc-cirkel::after {
	transform: rotate(-45deg) scale(1);
}

.pc-prisberegner .pc-valg input[type="radio"]:focus-visible + .pc-cirkel {
	box-shadow: 0 0 0 2px var(--pc-accent);
}

/* Beregn pris-knappen */
.pc-prisberegner .pc-beregn {
	display: inline-block;
	min-height: 48px;
	margin-top: 0.4rem;
	padding: 0.7rem 1.9rem;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	color: #ffffff;
	background: var(--pc-knap, var(--pc-accent));
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.15s;
}

.pc-prisberegner .pc-beregn:hover,
.pc-prisberegner .pc-beregn:focus {
	background: var(--pc-knap-hover, #30a56d);
	color: #ffffff;
}

.pc-prisberegner .pc-beregn:disabled {
	opacity: 0.7;
	cursor: wait;
}

@media (max-width: 600px) {
	.pc-prisberegner .pc-beregn {
		display: block;
		width: 100%;
	}
}

/* Resultat */
.pc-prisberegner .pc-resultat {
	margin-top: 1.4rem;
}

.pc-prisberegner .pc-resultat-label {
	display: block;
	font-size: 1em;
}

.pc-prisberegner .pc-resultat-pris {
	display: block;
	margin-top: 0.35rem;
	font-size: 2rem;
	font-weight: 700;
	color: var(--pc-accent);
}

.pc-prisberegner.pc-fejl .pc-resultat-pris {
	font-size: 1.15rem;
	color: var(--pc-fejl);
}