/*
 * Størrelsesguidens modal.
 *
 * Accordionens udseende ligger i temaets woocommerce.css — pluginnet leverer
 * kun rækkerne. Her styles udelukkende det pluginnet selv skriver ud.
 *
 * Bemærk specificiteten: alle knapper og tabelceller er scopet med .fs-modal
 * foran, altså mindst to klasser. Elementors kit styler ethvert button-element
 * og enhver tabel med (0,1,1), og en enkelt klasse taber — det er derfor
 * fanerne stod som sorte kasser og tabellen som et regneark.
 *
 * Variablerne kommer fra temaets base.css. Er temaet ikke aktivt, falder de
 * tilbage på værdierne i var()-fallbacket, så modalen stadig er læsbar.
 */

/* ---------------------------------------------------------------- Modal --- */

.fs-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.fs-modal[hidden] {
	display: none;
}

.fs-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.4);
}

.fs-modal__boks {
	position: relative;
	background: var(--fst-paper, #ffffff);
	color: var(--fst-ink, #111111);
	font-family: var(--fst-font-ui, sans-serif);
	width: 100%;
	max-width: 880px;
	max-height: 86vh;
	overflow-y: auto;
	border-radius: 0;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}

body.fs-modal-aaben {
	overflow: hidden;
}

.fs-modal__hoved {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 40px 48px 0;
}

.fs-modal__titel {
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-ink, #111111);
	margin: 0;
	line-height: 1;
}

/* Krydset — tyndt, ikke en knap. */
.fs-modal .fs-modal__luk,
.fs-modal .fs-modal__luk:hover,
.fs-modal .fs-modal__luk:focus {
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: -4px 0 0;
	width: auto;
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	color: var(--fst-ink, #111111);
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.fs-modal .fs-modal__luk:hover {
	opacity: 0.5;
}

.fs-modal__indhold {
	padding: 32px 48px 48px;
}

/* ---------------------------------------------------------------- Faner --- */

.fs-faner {
	display: flex;
	gap: 32px;
	padding: 28px 48px 0;
	border-bottom: 1px solid var(--fst-ash, #e5e2de);
}

/* Fanerne er tekst med understregning — ikke knapper. */
.fs-modal .fs-fane,
.fs-modal .fs-fane:hover,
.fs-modal .fs-fane:focus {
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	width: auto;
	padding: 0 0 14px;
	margin: 0 0 -1px;
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-stone, #6b6b6b);
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease;
}

/*
 * Tilstandene gentages på --aktiv. Uden det bliver den aktive fane grå igen
 * så snart fokus flytter, fordi :hover og :focus ellers er de eneste regler
 * der sætter farven.
 */
.fs-modal .fs-fane:hover,
.fs-modal .fs-fane:focus,
.fs-modal .fs-fane--aktiv,
.fs-modal .fs-fane--aktiv:hover,
.fs-modal .fs-fane--aktiv:focus {
	color: var(--fst-ink, #111111);
}

.fs-modal .fs-fane--aktiv {
	border-bottom-color: var(--fst-ink, #111111);
}

.fs-fanepanel {
	display: none;
}

.fs-fanepanel--aktiv {
	display: block;
}

/* --------------------------------------------------------------- Tabel ---- */

.fs-tabel__wrap {
	overflow-x: auto;
	margin: 0 0 8px;
	-webkit-overflow-scrolling: touch;
}

/*
 * Ingen lodrette streger, ingen skiftevis baggrund, ingen celle-rammer.
 * Kun hårfine vandrette linjer og luft — det er dét der skiller en moderne
 * størrelsesguide fra et regneark.
 *
 * border-collapse og border: 0 gentages på celleniveau, fordi både Hello og
 * Elementor sætter rammer på table/th/td med højere specificitet end en
 * enkelt klasse.
 */
.fs-modal .fs-tabel {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: none;
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 13px;
	font-weight: 300;
	color: var(--fst-ink, #111111);
	margin: 0;
}

.fs-modal .fs-tabel tr,
.fs-modal .fs-tabel thead,
.fs-modal .fs-tabel tbody {
	background: none;
	border: 0;
}

.fs-modal .fs-tabel th,
.fs-modal .fs-tabel td {
	border: 0;
	border-bottom: 1px solid var(--fst-ash, #e5e2de);
	background: none;
	text-align: left;
	padding: 16px 28px 16px 0;
	white-space: nowrap;
	vertical-align: middle;
}

/* Overskriftsrækken: størrelserne. */
.fs-modal .fs-tabel thead th {
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-stone, #6b6b6b);
	padding-bottom: 14px;
	border-bottom-color: var(--fst-ink, #111111);
}

/* Første kolonne: målenavnene BUST, WAIST, HIP. */
.fs-modal .fs-tabel tbody th {
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-ink, #111111);
	padding-right: 40px;
	width: 1%;
}

.fs-modal .fs-tabel tbody td {
	font-size: 14px;
	font-weight: 300;
	font-variant-numeric: tabular-nums;
}

.fs-modal .fs-tabel tbody tr:last-child th,
.fs-modal .fs-tabel tbody tr:last-child td {
	border-bottom: 0;
}

/* Overskrift over en tabel, når guiden indeholder flere. */
.fs-tabel__titel {
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-stone, #6b6b6b);
	margin: 44px 0 12px;
}

.fs-tabel__titel:first-child {
	margin-top: 0;
}

.fs-guide__navn {
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-stone, #6b6b6b);
	margin: 0 0 16px;
}

.fs-guide__note {
	font-size: 12px;
	font-weight: 300;
	color: var(--fst-stone, #6b6b6b);
	margin: 24px 0 0;
}

/* ------------------------------------------------- How to measure-fanen --- */

.fs-fanepanel[data-fs-fanepanel='maal'] p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.75;
	max-width: 46em;
	margin: 0 0 20px;
}

.fs-fanepanel[data-fs-fanepanel='maal'] p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- Mobil ---- */

@media (max-width: 767px) {
	.fs-modal {
		padding: 0;
		align-items: flex-end;
	}

	.fs-modal__boks {
		max-width: none;
		max-height: 92vh;
	}

	.fs-modal__hoved {
		padding: 24px 20px 0;
	}

	.fs-faner {
		padding: 20px 20px 0;
		gap: 24px;
	}

	.fs-modal__indhold {
		padding: 24px 20px 32px;
	}

	.fs-modal .fs-tabel th,
	.fs-modal .fs-tabel td {
		padding: 13px 20px 13px 0;
	}

	.fs-modal .fs-tabel tbody th {
		padding-right: 24px;
	}
}

/* ---------------------------------------------------------- Nyhedsbrev --- */

.fs-nyhedsbrev__tekst {
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--fst-ink, #111111);
	margin: 0 0 16px;
	max-width: 34em;
}

.fs-nyhedsbrev__raekke {
	display: flex;
	gap: 0;
	max-width: 420px;
}

/*
 * Feltet har kun bundlinje, ikke ramme — samme stil som checkout.
 * To klasser foran, så Elementors kit ikke sætter sin egen inputstil igennem.
 */
.fs-nyhedsbrev .fs-nyhedsbrev__raekke input[type='email'] {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--fst-ash, #e5e2de);
	border-radius: 0;
	padding: 12px 0;
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 14px;
	font-weight: 300;
	color: var(--fst-ink, #111111);
	box-shadow: none;
}

.fs-nyhedsbrev .fs-nyhedsbrev__raekke input[type='email']:focus {
	border-bottom-color: var(--fst-ink, #111111);
	outline: 0;
}

.fs-nyhedsbrev__form--fejl .fs-nyhedsbrev__raekke input[type='email'] {
	border-bottom-color: var(--fst-signal, #c1272d);
}

.fs-nyhedsbrev .fs-nyhedsbrev__knap,
.fs-nyhedsbrev .fs-nyhedsbrev__knap:hover,
.fs-nyhedsbrev .fs-nyhedsbrev__knap:focus {
	flex: 0 0 auto;
	width: auto;
	background: none;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--fst-ink, #111111);
	border-radius: 0;
	box-shadow: none;
	padding: 12px 0 12px 20px;
	margin: 0;
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-ink, #111111);
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.fs-nyhedsbrev .fs-nyhedsbrev__knap:hover {
	opacity: 0.55;
}

.fs-nyhedsbrev .fs-nyhedsbrev__knap:disabled {
	opacity: 0.4;
	cursor: wait;
}

.fs-nyhedsbrev__samtykke {
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--fst-stone, #6b6b6b);
	margin: 12px 0 0;
	max-width: 34em;
}

.fs-nyhedsbrev__svar {
	font-family: var(--fst-font-ui, sans-serif);
	font-size: 12px;
	font-weight: 300;
	color: var(--fst-ink, #111111);
	margin: 10px 0 0;
	min-height: 1.2em;
}

.fs-nyhedsbrev__form--fejl .fs-nyhedsbrev__svar {
	color: var(--fst-signal, #c1272d);
}

/* ----------------------------------------------------- Betalingslogoer --- */

.fs-betaling__billede {
	max-height: 22px;
	width: auto;
	display: block;
	border-radius: 0;
}