/* Resultatpanelen i radonformulären. Färger från temats palett (theme.json). */

.radon-result {
	background: var(--wp--preset--color--edek-vit, #f7f7f7);
	border: 1px solid var(--wp--preset--color--edek-grey, #f2f2f2);
	border-radius: 10px;
	padding: 24px;
}

.radon-result__pill {
	display: inline-block;
	/* primary-color ger ca 7:1 mot vit text; ljusgrönt klarade inte AA. */
	background: var(--wp--preset--color--primary-color, #435c4b);
	color: #fff;
	border-radius: 30px;
	padding: 4px 10px;
	font-size: 0.78rem;
	font-weight: 700;
}

.radon-result__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

/* h2 eftersom panelen ligger före formulärets rubriker i DOM:en; temat ger
   .gform_wrapper h2 22 px fetstil, så selektorn väger tyngre. */
.radon-result .radon-result__title {
	margin: 0;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 400;
}

.radon-result__box {
	background: var(--wp--preset--color--base, #fff);
	border-radius: 10px;
	padding: 18px;
	margin-bottom: 14px;
}

.radon-result__small {
	font-size: 0.85rem;
}

.radon-result__big {
	font-size: 2.7rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--primary-color, #435c4b);
}

.radon-result__row {
	display: flex;
	gap: 15px;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--edek-grey, #f2f2f2);
	padding: 9px 0;
}

.radon-result__row > :last-child {
	text-align: right;
	white-space: nowrap;
}

.radon-result__box .radon-result__row:last-child {
	border-bottom: 0;
}

.radon-result__line {
	height: 1px;
	background: var(--wp--preset--color--edek-ljus-gron, #7da68b);
	margin: 14px 0 4px;
}

.radon-result__price {
	font-size: 1.5rem;
	font-weight: 800;
}

/* .gform_wrapper: WordPress globala stilar (:root :where(p)) väger annars lika och laddas senare. */
.gform_wrapper .radon-notice {
	background: #fff8e7;
	border-left: 4px solid #d9a02e;
	padding: 12px 14px;
	border-radius: 5px;
	font-size: 0.88rem;
	margin: 14px 0 0;
}

.radon-result p.radon-result__error,
.radon-result__error {
	color: #a42b2b;
	font-weight: 600;
	margin: 14px 0 0;
}

.radon-result p.radon-result__prompt {
	color: #526674;
	font-size: 0.88rem;
	margin: 14px 0 0;
}

.radon-panel--stale .radon-result {
	opacity: 0.5;
}

.radon-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.radon-panel[aria-busy="true"] .radon-result {
	opacity: 0.6;
	transition: opacity 0.15s;
}

@media (max-width: 760px) {
	.radon-result {
		padding: 18px;
	}

	.radon-result__row > :last-child {
		white-space: normal;
	}
}

/* Huskroppar: varje rad i List-fältet blir ett kort med två rader fält och
   egen etikett per cell (data-label), i stället för en tabell med fem smala
   kolumner och långa rubriker. */
.gform_wrapper.gravity-theme .radon-houses .gfield_list_header {
	display: none;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_groups {
	counter-reset: radon-house;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_group {
	counter-increment: radon-house;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 16px;
	background: var(--wp--preset--color--edek-vit, #f7f7f7);
	border-radius: 10px;
	padding: 16px 18px 18px;
	margin: 0 0 12px;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_group::before {
	content: "Huskropp " counter(radon-house);
	grid-column: 1 / -1;
	font-weight: 700;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_group .gfield_list_cell {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: auto;
	max-width: none;
	/* GF:s ränndal (margin-left på cell 2–5) ersätts av gridens gap. */
	margin: 0;
	padding: 0;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_cell::before {
	content: attr(data-label);
	display: block;
	font-size: 0.9rem;
	margin-bottom: 6px;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons {
	/* Egen rad under huskroppens fält. */
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-self: start;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
}

/* Knappar med text som i underlaget ("+ Lägg till huskropp", "Ta bort") i
   stället för GF:s ikoner. GF döljer knapptexten (font-size 0) och ritar en
   ikon som bakgrund; texten sätts här, det tillgängliga namnet är GF:s
   aria-label. */
/* button.add_list_item/.delete_list_item: väger tyngre än GF:s
   .gfield_list_icons button.delete_list_item (ikon) och opacity 0,5. */
.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons button.add_list_item,
.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons button.delete_list_item {
	width: auto;
	height: auto;
	margin: 0;
	padding: 9px 14px;
	opacity: 1;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid #d1d5db;
	border-radius: 8px;
	color: inherit;
	font-size: 0;
	line-height: 1.2;
	cursor: pointer;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons button.add_list_item:hover,
.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons button.delete_list_item:hover {
	border-color: var(--wp--preset--color--primary-color, #435c4b);
}

/* "Ta bort" hör till huskroppen och står först; "Lägg till" efter. */
.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons .add_list_item {
	order: 1;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons .add_list_item::before {
	content: "+ Lägg till huskropp";
	font-size: 0.9rem;
	font-weight: 600;
}

.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons .delete_list_item::before {
	content: "Ta bort";
	font-size: 0.9rem;
}

/* GF döljer "Ta bort" med visibility när bara en huskropp finns; då ska den
   inte heller ta plats. */
.gform_wrapper.gravity-theme .radon-houses .gfield_list_icons button.delete_list_item[style*="hidden"] {
	display: none;
}

/* Bara sista huskroppen har "Lägg till", som underlagets knapp under listan. */
.gform_wrapper.gravity-theme .radon-houses .gfield_list_group:not(:last-child) .add_list_item {
	display: none;
}

/* Markkontakt (andra kolumnen i listan) får två spalter, så att den långa
   etiketten ryms; antal bostadsplan hamnar då på raden under. */
.gform_wrapper.gravity-theme .radon-houses .gfield_list_group > .gfield_list_cell:nth-child(2) {
	grid-column: span 2;
}

@media (max-width: 640px) {
	.gform_wrapper.gravity-theme .radon-houses .gfield_list_group {
		grid-template-columns: minmax(0, 1fr);
	}

	.gform_wrapper.gravity-theme .radon-houses .gfield_list_group > .gfield_list_cell:nth-child(2) {
		grid-column: auto;
	}
}

/* Två spalter som i kundens underlag: frågorna till vänster, resultatet i en
   sticky högerspalt (aside direkt i <form>, se Gravity_Forms::aside_panel).
   Det gamla panelfältet bland fälten döljs. */
.radon-panel-field {
	display: none !important;
}

@media (min-width: 900px) {
	.radon-langtid_wrapper form,
	.radon-korttid_wrapper form,
	.radon-vatten_wrapper form,
	.radon-arbetsplats_wrapper form {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		column-gap: 32px;
		align-items: start;
	}

	.radon-langtid_wrapper form > *,
	.radon-korttid_wrapper form > *,
	.radon-vatten_wrapper form > *,
	.radon-arbetsplats_wrapper form > * {
		grid-column: 1;
	}

	.radon-langtid_wrapper form > .radon-aside,
	.radon-korttid_wrapper form > .radon-aside,
	.radon-vatten_wrapper form > .radon-aside,
	.radon-arbetsplats_wrapper form > .radon-aside {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: stretch;
	}

	/* Under sidans fasta sidhuvud (ca 143 px). Ingen inre scroll: är panelen
	   högre än fönstret sätter radon-calculator.js ett lägre (negativt) top,
	   så att panelen följer med sidan tills nederkanten syns och står kvar
	   där. Allt nås med vanlig sidscroll. */
	.radon-aside .radon-panel {
		position: sticky;
		top: var(--radon-sticky-top, 160px);
		border-radius: 10px;
	}

	.radon-aside .radon-result {
		font-size: 0.9rem;
	}

	.radon-aside .radon-result__price {
		font-size: 1.35rem;
	}
}

/* Beräkningen före skicka-knappen syns bara på mobil; på desktop visar
   högerspalten samma sak. */
.radon-inline,
.radon-sheet__peek {
	display: none;
}

@media (max-width: 899px) {
	.radon-inline {
		display: block;
		flex: 1 0 100%;
		width: 100%;
		margin: 24px 0 0;
	}

	/* GF:s footer är en flex-rad; beräkningen ska ligga ovanför knappen. */
	.radon-langtid_wrapper .gform_footer,
	.radon-korttid_wrapper .gform_footer,
	.radon-vatten_wrapper .gform_footer,
	.radon-arbetsplats_wrapper .gform_footer {
		flex-wrap: wrap;
	}

	/* Utan JS finns inget ark: då räcker beräkningen före knappen. */
	.radon-aside:not(.radon-sheet--ready) {
		display: none;
	}

	/* Med JS: bottom sheet. Listen syns alltid längst ner; arket dras upp.
	   Positionen (transform) sätts av radon-calculator.js. */
	.radon-aside.radon-sheet--ready {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		max-height: 85vh;
		max-height: 85dvh;
		margin: 0;
		background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
		padding-bottom: env(safe-area-inset-bottom);
		will-change: transform;
	}

	.radon-sheet--ready .radon-sheet__peek {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 4px 12px;
		width: 100%;
		margin: 0;
		padding: 20px 20px 14px;
		background: none;
		border: 0;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: grab;
		touch-action: none;
		-webkit-tap-highlight-color: transparent;
	}

	.radon-sheet__handle {
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 5px;
		margin-left: -20px;
		border-radius: 3px;
		background: #c4c9c6;
	}

	.radon-sheet__summary {
		font-weight: 700;
	}

	.radon-sheet__action {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 8px 14px;
		border-radius: 999px;
		background: var(--wp--preset--color--primary-color, #435c4b);
		color: #fff;
		font-size: 0.9rem;
		font-weight: 700;
		white-space: nowrap;
	}

	/* Pilen pekar upp (öppna) eller ner (stäng). */
	.radon-sheet__action::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(2px) rotate(-135deg);
	}

	.radon-sheet--open .radon-sheet__action::after {
		transform: translateY(-2px) rotate(45deg);
	}

	.radon-sheet__peek:focus-visible .radon-sheet__action {
		outline: 3px solid var(--wp--preset--color--edek-ljus-gron, #7da68b);
		outline-offset: 2px;
	}

	.radon-sheet__close-label,
	.radon-sheet--open .radon-sheet__open-label {
		display: none;
	}

	.radon-sheet--open .radon-sheet__close-label {
		display: inline;
	}

	.radon-sheet--ready .radon-panel {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 12px 16px;
	}

	.radon-sheet--ready .radon-result {
		border: 0;
		padding: 4px 8px 0;
	}

	.radon-sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		pointer-events: none;
	}

	.radon-sheet-backdrop.is-active {
		pointer-events: auto;
	}
}

/* "Skriv ut kalkyl": knappen syns bara med JS (radon-js), eftersom det är JS
   som bygger utskriften (.radon-print, se radon-calculator.js). */
.radon-print-button {
	display: none;
}

html.radon-js .radon-print-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 16px 0 0;
	padding: 11px 16px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

html.radon-js .radon-print-button svg {
	width: 18px;
	height: 18px;
	flex: none;
}

html.radon-js .radon-print-button:hover {
	border-color: var(--wp--preset--color--primary-color, #435c4b);
	background: var(--wp--preset--color--edek-vit, #f7f7f7);
}

html.radon-js .radon-print-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--edek-ljus-gron, #7da68b);
	outline-offset: 2px;
}

.radon-print {
	display: none;
}

@media print {
	html.radon-printing {
		margin-top: 0 !important;
		background: #fff;
	}

	/* visibility döljer även lös text direkt i body (t.ex. PHP-notiser). */
	html.radon-printing body {
		margin: 0;
		padding: 0;
		background: #fff;
		visibility: hidden;
	}

	/* Bara kalkylen: inte sidhuvud, meny, sidfot, cookie-banner eller formuläret. */
	html.radon-printing body > *:not(.radon-print) {
		display: none !important;
	}

	/* Samma formspråk som beställnings-PDF:en (temats templates/pdf/style.php):
	   text #26322A, etiketter #4A574B, ramar #C9D4CB, rubrikrader #EDF2EC,
	   accent #435C4B. */
	html.radon-printing .radon-print {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		visibility: visible;
		display: block;
		color: #26322a;
		font-size: 10pt;
		line-height: 1.35;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.radon-print p {
		margin: 0;
		font-weight: 400;
	}

	.rp-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding-bottom: 3mm;
		border-bottom: 0.6mm solid #435c4b;
	}

	.rp-logo {
		width: 32mm;
		height: auto;
	}

	.radon-print .rp-brand,
	.radon-print .rp-doc-title {
		font-size: 11pt;
		font-weight: 700;
	}

	.rp-doc {
		text-align: right;
	}

	.radon-print .rp-doc-sub {
		font-size: 8.5pt;
		color: #4a574b;
	}

	.radon-print .rp-title {
		margin: 6mm 0 1mm;
		padding: 0;
		font-size: 16pt;
		font-weight: 700;
		line-height: 1.2;
	}

	.radon-print .rp-intro {
		margin-bottom: 5mm;
		font-size: 9pt;
		color: #4a574b;
	}

	.rp-section {
		margin-bottom: 5mm;
		border: 0.2mm solid #c9d4cb;
	}

	.radon-print .rp-section-title {
		margin: 0;
		padding: 2mm 3mm;
		border-left: 1mm solid #435c4b;
		background: #edf2ec;
		font-size: 10.5pt;
		font-weight: 700;
		break-after: avoid;
	}

	.rp-cells {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.rp-figures {
		grid-template-columns: repeat(4, 1fr);
	}

	.rp-cell {
		padding: 2.5mm 3mm;
		border-top: 0.2mm solid #c9d4cb;
		border-right: 0.2mm solid #c9d4cb;
		break-inside: avoid;
	}

	.rp-cells .rp-cell:nth-child(2n),
	.rp-figures .rp-cell:nth-child(4n) {
		border-right: 0;
	}

	.rp-figures .rp-cell:nth-child(2n) {
		border-right: 0.2mm solid #c9d4cb;
	}

	.radon-print .rp-label {
		margin-bottom: 1mm;
		font-size: 8pt;
		color: #4a574b;
	}

	.radon-print .rp-value {
		font-size: 10pt;
		font-weight: 400;
		white-space: pre-line;
	}

	.radon-print .rp-cell--main .rp-value {
		font-size: 18pt;
		font-weight: 700;
		line-height: 1.1;
		color: #435c4b;
	}

	.rp-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 9pt;
	}

	.rp-table th {
		padding: 2mm 2.5mm;
		border-top: 0.2mm solid #c9d4cb;
		background: #f4f7f4;
		color: #4a574b;
		font-size: 8pt;
		font-weight: 400;
		text-align: left;
		vertical-align: bottom;
	}

	.rp-table td {
		padding: 2mm 2.5mm;
		border-top: 0.2mm solid #c9d4cb;
		vertical-align: top;
	}

	.rp-table tr {
		break-inside: avoid;
	}

	.rp-prices .rp-amount {
		text-align: right;
		white-space: nowrap;
	}

	.rp-prices .rp-sum td {
		font-weight: 600;
	}

	.rp-prices .rp-total td {
		border-top: 0.4mm solid #26322a;
		font-size: 12pt;
		font-weight: 700;
	}

	.radon-print .rp-notice {
		margin: 0;
		padding: 2.5mm 3mm;
		border-top: 0.2mm solid #c9d4cb;
		font-size: 9pt;
		break-inside: avoid;
	}

	.radon-print .rp-foot {
		padding-top: 2mm;
		border-top: 0.2mm solid #c9d4cb;
		font-size: 7.5pt;
		color: #6c7a6e;
		text-align: center;
	}

	@page {
		size: A4;
		margin: 14mm 15mm;
	}
}

/* Valen (fastighetstyp, mätmetod) som kort, som i underlagens .radios/.choices:
   hela kortet är klickbart och det valda markeras. */
:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-radio .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-radio .gchoice {
	position: relative;
	flex: 1 1 180px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid #d1d5db;
	border-radius: 10px;
	cursor: pointer;
}

:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-radio .gchoice:has(input:checked) {
	border-color: var(--wp--preset--color--primary-color, #435c4b);
	background: color-mix(in srgb, var(--wp--preset--color--primary-color, #435c4b) 8%, #fff);
}

:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-radio .gchoice:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary-color, #435c4b);
	outline-offset: 2px;
}

:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-radio .gchoice input {
	flex: none;
	/* Temats radioknapp är 1,5em med min-bredd; mindre i korten, som i underlaget. */
	width: 1.15em;
	height: 1.15em;
	min-width: 1.15em;
	min-height: 1.15em;
	margin: 2px 0 0;
	/* Över etikettens klickyta (label::after), så att knappen själv tar klicket. */
	position: relative;
	z-index: 1;
	accent-color: var(--wp--preset--color--primary-color, #435c4b);
}

:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-radio .gchoice label {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
	cursor: pointer;
}

/* Etiketten täcker hela kortet, så att ett klick var som helst väljer. */
:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-radio .gchoice label::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.radon-choice__price {
	display: block;
	margin-top: 4px;
	font-weight: 700;
}

/* Jämna avstånd: fälten har GF:s radavstånd; innehållet i HTML-fälten
   (rubriker, notiser, hjälptext) får inga egna marginaler utåt. */
:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-html > :first-child {
	margin-top: 0;
}

:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-html > :last-child {
	margin-bottom: 0;
}

/* Avsnittsrubrikerna får lite luft ovanför. */
:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gform_fields > .gfield--type-html > h2:first-child {
	margin-top: 1.25rem;
}

.gform_wrapper .radon-hint {
	font-size: 0.88rem;
	color: #526674;
}

/* Samtycket: mindre text, luftigare rader. */
:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gfield--type-consent .gfield_consent_label {
	font-size: 0.875rem;
	line-height: 1.55;
}

/* Inget extra glapp mellan samtycket och knappen: knappen har redan sin
   marginal ovanför (temat), GF:s footer lade till 22 px till. */
/* .gravity-theme: väger tyngre än GF:s .gform_wrapper.gravity-theme .gform_footer. */
.gform_wrapper.gravity-theme:is(.radon-langtid_wrapper, .radon-korttid_wrapper, .radon-vatten_wrapper, .radon-arbetsplats_wrapper) .gform_footer {
	margin-top: 0;
	padding-top: 0;
}