/* Jordskred ITERAS: the box around ITERAS's iframe and the amount buttons.
   The colours and fonts are the theme's (theme.json), with the brand's
   values as fallbacks, named once here. ITERAS sizes its iframe's height
   itself; the box only sets the width, and the iframe itself is not styled
   (ITERAS asks so). */

.jordskred-iteras-blok {
	--j-black: var(--wp--preset--color--black, #000);
	--j-white: var(--wp--preset--color--white, #fff);
	--j-yellow: var(--wp--preset--color--yellow, #fff06b);
	--j-dark-green: var(--wp--preset--color--dark-green, #1d231c);
	max-width: 46rem;
	margin-inline: auto;
}
/* Self-service: as wide as ITERAS's widest page (900 px), so its pages, which
   fill the box, end where its tab row ends (iteras_theme.py in migration). */
.jordskred-iteras--bred { max-width: 56.25rem; }
/* Room for the form while it loads, so the page does not jump when it comes;
   iteras.js drops it once the iframe is there (self-service's login is short). */
.jordskred-iteras:not(.is-loaded) { min-height: 40rem; }
.jordskred-iteras--bred .jordskred-iteras:not(.is-loaded) { min-height: 30rem; }

/* In line with the form's fields, which start at the iframe's edge; a fieldset is
   otherwise never narrower than its content, so long amounts pushed it wider. */
.jordskred-beloebsvalg { border: 0; margin: 0 0 0.5rem; padding: 0; min-inline-size: 0; }
/* Like the form's own labels ("Betal med"), so the two read as one form. */
.jordskred-beloebsvalg legend {
	font-family: var(--wp--preset--font-family--barlow-semi-condensed, "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif);
	font-size: 1.05rem; padding: 0; margin-bottom: 0.5rem;
}
.jordskred-beloeb-knapper { display: flex; gap: 0.75rem; }
/* One row at any width: the texts wrap inside their buttons instead. */
.jordskred-beloeb { position: relative; flex: 1 1 0; min-width: 0; }
/* The radio is kept for the keyboard and screen readers, but not shown. */
.jordskred-beloeb input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.jordskred-beloeb span {
	display: flex; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; text-align: center;
	padding: 0.85rem 0.5rem; border: 1.5px solid var(--j-black); border-radius: 4px; background: var(--j-white); color: var(--j-black);
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
	font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2;
}
.jordskred-beloeb input:hover + span { background: var(--j-yellow); }
.jordskred-beloeb input:checked + span { background: var(--j-black); color: var(--j-white); }
.jordskred-beloeb input:focus-visible + span { outline: 3px solid var(--j-yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--j-dark-green); }