/**
 * BenjaContact — frontend.
 *
 * Farver, typografi og popup-mekanik er en bevidst KOPI af BenjaBuilders
 * (brandfarve #8197ac på mørk #0c0c0e, samme Inter, samme
 * backdrop-blur + skalerings-popup) — ikke en delt afhængighed. De to
 * plugins skal kunne opdateres uafhængigt af hinanden, og et kopieret
 * farvesæt på 10 linjer er en billigere pris end en kobling.
 *
 * Navnerummet er `bc-` / `data-bc-*` og kolliderer derfor aldrig med
 * BenjaBuilders `bb-pf-`, `bb-lg-` og `bb-sv-`, uanset at begge plugins
 * kan have indhold på samme side.
 *
 * ALT er styret af variablerne i .bc-form-wrap nedenfor. Skal formularen
 * matche et andet farvesæt, er det de ~15 linjer der skal ændres —
 * resten af filen refererer kun til variabler.
 */

@font-face {
	font-family: 'BC Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'BC Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'BC Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
	font-family: 'BC Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700.woff2') format('woff2');
}

/*
 * Formularen antages placeret på en MØRK side-baggrund (Soundbyhoyers
 * layout er sort) — det er derfor tokens er delt i to grupper:
 *
 *  - --bc-text-*  bruges af alt der sidder DIREKTE på sidens egen
 *    baggrund (labels, hints, fil-status) og er derfor LYST.
 *  - --bc-surface-* bruges INDE I de hvide bokse (inputs, service-kort)
 *    og er derfor MØRKT, uafhængigt af sidens egen baggrund.
 *
 * Ligger formularen i stedet på en lys side, er det disse to grupper der
 * skal justeres — resten af filen refererer kun til variabler.
 */
.bc-form-wrap,
.bc-modal {
	/* (Variabelnavnet der hedder "gold" er historisk fra dengang farven var
	   gylden — ikke omdøbt for ikke at røre unødigt meget; se samme
	   --bb-lg-modal-bg/--bb-sv-gold-bg i BenjaBuilder.) */
	--bc-gold-bg: #8197ac;
	--bc-gold-fg: #4a3a1a;
	--bc-dark: #0c0c0e;

	/* Aktiv-farven: kant på aktive felter/valgt service og Send-knappens
	   baggrund. Hover-farven bruges af "Choose file" og Send-knappen. */
	--bc-active: #8197ac;
	/* Lysere nuance af --bc-active (blandet ~35% mod hvid) — bruges hvor
	   der skal være en synlig hover-forskel FRA --bc-active/--bc-gold-bg,
	   fx reCAPTCHA-linket herunder, hvor begge ellers ville blive samme
	   flade farve og gøre hover usynlig. */
	--bc-active-hover: rgba(173, 187, 201, 0.89);

	/* Tekst direkte på sidens (mørke) baggrund. */
	--bc-text: #ffffff;
	--bc-text-muted: rgba(255, 255, 255, 0.7);
	--bc-line: rgba(255, 255, 255, 0.28);
	--bc-line-strong: rgba(255, 255, 255, 0.5);

	/* Indhold inde i de hvide bokse (inputs, service-kort). */
	--bc-surface: #ffffff;
	--bc-surface-fg: #1a1a1d;
	--bc-surface-muted: #6b6b70;
	--bc-surface-border: #d9d9de;
	--bc-surface-border-strong: #b4b4bb;

	/* Lysere end normalt, så de også er læsbare direkte på sort. */
	--bc-error: #ff8585;
	--bc-success: #5fd9a0;

	--bc-radius: 12px;
	--bc-gap: clamp(0.875rem, 2vw, 1.25rem);
	--bc-ease: cubic-bezier(0.22, 0.75, 0.28, 1);
	--bc-font: 'BC Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--bc-modal-pad: clamp(1.25rem, 4vw, 3rem);

	font-family: var(--bc-font);
}

.bc-form-wrap *,
.bc-form-wrap *::before,
.bc-form-wrap *::after,
.bc-modal *,
.bc-modal *::before,
.bc-modal *::after {
	box-sizing: border-box;
}

/* ==================================================================
 * Grid — det er HER Navn og Mail havner side om side.
 * ================================================================== */

.bc-grid {
	display: grid;
	/*
	 * 12 kolonner, ikke 2: et halvt felt er 6 kolonner, et helt er 12.
	 * Det gør at en enlig "halv" i slutningen af formularen bliver
	 * stående i halv bredde i stedet for at strække sig — præcis som i
	 * en rigtig form builder.
	 */
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--bc-gap);
	align-items: start;
}

.bc-field {
	grid-column: span 12;
	min-width: 0;
}

.bc-field--half {
	grid-column: span 6;
}

.bc-field--quarter {
	grid-column: span 3;
}

@media (max-width: 900px) {
	.bc-field--quarter {
		grid-column: span 6;
	}
}

@media (max-width: 640px) {
	.bc-field--half,
	.bc-field--quarter {
		grid-column: span 12;
	}
}

/* ==================================================================
 * Labels og felter
 * ================================================================== */

.bc-label {
	display: block;
	margin: 0 0 0.45em;
	padding: 0;
	font-size: clamp(0.8125rem, 1.1vw, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bc-text);
}

.bc-required {
	color: var(--bc-error);
	margin-left: 2px;
}

.bc-hint {
	margin: 0.5em 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--bc-text-muted);
}

/*
 * !important på background/color/radius/font-size: side-builderen
 * (Elementor) sætter ofte globale regler på "input, textarea" (mørk
 * sidebaggrund der kaskaderer ned, en anden border-radius end vores) med
 * højere specificitet end en enkelt klasse — uden !important her ville
 * feltets egen hvide boks, runding og mørke tekst tabe til de regler. En
 * font-size under 16px får desuden iOS Safari til at zoome ind ved
 * fokus — derfor præcis 1rem.
 */
.bc-input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.85em 1em;
	border: 1px solid var(--bc-surface-border);
	border-radius: var(--bc-radius) !important;
	background: var(--bc-surface) !important;
	color: var(--bc-surface-fg) !important;
	font-family: inherit;
	font-size: 1rem !important;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bc-input::placeholder {
	color: var(--bc-surface-muted) !important;
	opacity: 1 !important;
}

.bc-input:hover {
	border-color: var(--bc-surface-border-strong);
}

/*
 * Aktivt felt: ensfarvet kant i --bc-active-hover, med SAMME tykkelse som et
 * valgt service-kort (1px kant + 1px indvendig ring i samme farve =
 * 2px visuelt, uden at feltet ændrer størrelse). Ingen glød eller
 * outline. !important på alt, fordi Elementor/temaet ellers lægger sin
 * egen fokusfarve, -kantbredde eller box-shadow oveni.
 */
.bc-input:focus,
.bc-input:focus-visible,
.bc-input:active {
	outline: none !important;
	border: 1px solid var(--bc-active-hover) !important;
	box-shadow: 0 0 0 1px var(--bc-active-hover) inset !important;
}

.bc-textarea {
	resize: vertical;
	min-height: 8em;
}

/* ==================================================================
 * Filupload
 * ================================================================== */

.bc-file {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/*
 * Det ægte input skjules med clip — IKKE display:none. Et
 * display:none-input kan ikke få fokus, og browseren kan ikke pege på
 * det hvis HTML-valideringen fejler ("An invalid form control is not
 * focusable"). Clip-teknikken holder feltet teknisk synligt og
 * fokuserbart, men usynligt for øjet.
 */
.bc-file__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bc-file__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1.4em;
	border: 1px solid var(--bc-line-strong);
	border-radius: 999px;
	/* Let fyld i stedet for helt transparent: knappen sidder DIREKTE på
	   sidens mørke baggrund (ikke i en hvid boks), og en ren gennemsigtig
	   knap med kun en tynd kant er svær at få øje på der. */
	background: rgba(255, 255, 255, 0.06);
	color: var(--bc-text);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--bc-ease);
}

.bc-file__button:hover {
	background: var(--bc-active-hover);
	border-color: var(--bc-active-hover);
	color: var(--bc-gold-fg);
	transform: translateY(-1px);
}

/* Fokus vises på KNAPPEN når det skjulte input har fokus — ellers ville
   tastaturbrugere ikke kunne se hvor de er. */
.bc-file__input:focus-visible + .bc-file__button {
	outline: 2px solid var(--bc-active);
	outline-offset: 2px;
}

.bc-file__status {
	font-size: 0.875rem;
	color: var(--bc-text-muted);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ==================================================================
 * Service-vælger
 * ================================================================== */

.bc-services {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.bc-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.75rem;
}

.bc-service {
	position: relative;
	min-width: 0;
}

/* Samme clip-skjulning som filfeltet — radioens tastaturlogik
   (piletaster mellem valgmuligheder) bevares fuldstændig. */
.bc-service__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bc-service__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	height: 100%;
	/* Ekstra plads i højre side, så teksten aldrig løber ind under
	   spørgsmålstegn-knappen i hjørnet. */
	padding: 1.15rem 1.75rem 1.15rem 0.9rem;
	border: 1px solid var(--bc-surface-border);
	border-radius: var(--bc-radius);
	background: var(--bc-surface);
	color: var(--bc-surface-fg);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--bc-ease), box-shadow 0.2s ease;
}

.bc-service__card:hover {
	border-color: var(--bc-surface-border-strong);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

/*
 * Valgt tilstand: ensfarvet blå/grå brandfarve (--bc-active, samme som kanten
 * på aktive felter og Send-knappen) med hvid tekst. Flere kan være valgt
 * (afkrydsningsfelter) — hvert kort markeres for sig.
 */
.bc-service__input:checked + .bc-service__card {
	border-color: var(--bc-active);
	background: var(--bc-active);
	color: #ffffff;
	box-shadow: 0 0 0 1px var(--bc-active) inset;
}

.bc-service__input:focus-visible + .bc-service__card {
	outline: 2px solid var(--bc-active);
	outline-offset: 2px;
}

.bc-service__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.bc-service__icon-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
}

.bc-service__label {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/*
 * Spørgsmålstegnet. Ligger UDEN FOR labelen i markup'et — havde det
 * ligget indeni, ville et klik på det også vælge servicen.
 */
.bc-service__info {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--bc-surface-border-strong);
	border-radius: 6px;
	background: var(--bc-surface);
	color: var(--bc-surface-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--bc-ease);
}

.bc-service__info:hover,
.bc-service__info:focus-visible {
	background: var(--bc-gold-bg);
	border-color: var(--bc-gold-bg);
	color: var(--bc-gold-fg);
	transform: scale(1.1);
	outline: none;
}

/* ==================================================================
 * reCAPTCHA
 * ================================================================== */

.bc-recaptcha-note {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--bc-text-muted);
}

.bc-recaptcha-note a {
	color: var(--bc-gold-bg);
	text-decoration: underline;
	transition: color 0.2s ease;
}

/* !important: temaets/Elementors egen link-hoverfarve vinder ellers. */
.bc-recaptcha-note a:hover,
.bc-recaptcha-note a:focus-visible {
	/* --bc-active-hover, IKKE --bc-active: linket har allerede
	   --bc-gold-bg som grundfarve, og --bc-active er nu den samme farve
	   (begge er --bc-gold-bg-familien) — uden hover-nuancen ville et
	   klik/hover ikke give nogen synlig ændring. */
	color: var(--bc-active-hover) !important;
}

/*
 * Googles badge skjules — den er en fastgjort boks nederst til højre på
 * HELE siden og ødelægger layoutet. Google tillader det udtrykkeligt,
 * så længe henvisningen står i formularen; det gør den i
 * .bc-recaptcha-note ovenfor.
 */
.grecaptcha-badge {
	visibility: hidden;
}

/* ==================================================================
 * Send-knap
 * ================================================================== */

/*
 * !important på baggrund/tekstfarve/kant: side-builderen (Elementor)
 * sætter typisk en global "Primary Color" (ofte blå) på
 * `button[type="submit"]`, hvis attribut-selektor kan slå en almindelig
 * klasse som .bc-submit uden !important — knappen skal altid følge
 * pluginets eget guld-tema, uanset temaets globale knapfarve.
 */
.bc-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	padding: 0.95em 2em;
	border: 0 !important;
	/* Samme radius som inputs/service-kort — se --bc-radius. !important
	   af samme grund som resten af knappen: temaets egen radius-regel
	   skal ikke kunne vinde over vores. */
	border-radius: var(--bc-radius) !important;
	background: var(--bc-active) !important;
	color: var(--bc-gold-fg) !important;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.2s var(--bc-ease), box-shadow 0.2s ease, opacity 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Kortere felt (halv/kvart) => mindre vandret padding, så knappen ikke
   ser unødigt "opsvulmet" ud i en smal celle. */
.bc-field--half .bc-submit,
.bc-field--quarter .bc-submit {
	padding-left: 1.4em;
	padding-right: 1.4em;
}

.bc-submit:focus:not(:disabled) {
	/* Gentaget her af samme grund som ovenfor — nogle temaer sætter
	   deres blå primærfarve specifikt på :hover/:focus. */
	background: var(--bc-active) !important;
	color: var(--bc-gold-fg) !important;
}

/* Efter :focus, så hover vinder når musen er over en fokuseret knap. */
.bc-submit:hover:not(:disabled) {
	background: var(--bc-active-hover) !important;
	color: var(--bc-gold-fg) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.bc-submit:focus-visible {
	/* Hvid i stedet for --bc-dark: en mørk ring ville være usynlig på
	   sidens egen sorte baggrund. */
	outline: 2px solid var(--bc-text);
	outline-offset: 3px;
}

.bc-submit:disabled {
	cursor: progress;
	opacity: 0.75;
	transform: none;
}

.bc-submit__spinner {
	display: none;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: bc-spin 0.7s linear infinite;
}

.bc-form.is-sending .bc-submit__spinner {
	display: block;
}

@keyframes bc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==================================================================
 * Beskeder
 * ================================================================== */

.bc-form__message:empty {
	display: none;
}

.bc-notice {
	margin: 1.25rem 0 0;
	padding: 0.9em 1.1em;
	border-left: 3px solid currentColor;
	border-radius: 8px;
	/* Lys fyld i stedet for mørk: rammen sidder direkte på sidens sorte
	   baggrund, hvor en næsten-sort baggrund ikke ville ses. */
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.bc-notice--success {
	color: var(--bc-success);
}

.bc-notice--error {
	color: var(--bc-error);
}

.bc-admin-warning {
	padding: 1em;
	border: 1px dashed var(--bc-error, #ff8585);
	border-radius: 8px;
	color: var(--bc-error, #ff8585);
}

/* ==================================================================
 * Honeypot
 * ================================================================== */

/*
 * Skjult for mennesker, synlig for bots. Bevidst IKKE display:none —
 * den mest udbredte bot-heuristik er netop at springe display:none over.
 * Clip-teknikken (samme som WordPress' .screen-reader-text) efterlader
 * et helt normalt input i DOM'en, som blot er klippet væk visuelt.
 */
.bc-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
 * Popup — samme opbygning og timing som BenjaBuilders popup.
 * ================================================================== */

body.bc-modal-open {
	overflow: hidden;
}

.bc-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 4vw, 3rem);
}

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

.bc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.38s ease;
	will-change: opacity;
	cursor: pointer;
}

.bc-modal.is-open .bc-modal__backdrop {
	opacity: 1;
	transition-duration: 0.6s;
}

.bc-modal__dialog {
	position: relative;
	width: min(620px, 100%);
	max-height: min(90vh, 100%);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--bc-dark);
	color: #ffffff;
	border-radius: clamp(0.875rem, 2vw, 1.5rem);
	padding: var(--bc-modal-pad);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: scale(0.9) translateY(22px);
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0, 1, 1);
	will-change: opacity, transform;
}

.bc-modal.is-open .bc-modal__dialog {
	opacity: 1;
	transform: scale(1) translateY(0);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bc-modal__close {
	position: absolute;
	top: clamp(0.5rem, 1.5vw, 1rem);
	right: clamp(0.5rem, 1.5vw, 1rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bc-modal__close:hover,
.bc-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	transform: rotate(90deg);
}

/*
 * Den negative margin trækker indholdsboksen ud til dialogens egen kant,
 * så SCROLLBAREN sidder ved kanten og ikke midt inde i paddingen —
 * padding-right lægger afstanden tilbage til selve teksten. Samme trick
 * som i BenjaBuilders popup.
 */
.bc-modal__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-right: calc(var(--bc-modal-pad) + 2px);
	margin-right: calc(-1 * var(--bc-modal-pad));
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.28s ease, transform 0.28s ease;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.bc-modal.is-open .bc-modal__content {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 0.15s;
}

.bc-modal__content::-webkit-scrollbar {
	width: 8px;
}

.bc-modal__content::-webkit-scrollbar-track {
	background: transparent;
}

.bc-modal__content::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 999px;
}

.bc-modal__title {
	margin: 0 0 0.6em;
	padding-right: 2.5rem;
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--bc-gold-bg);
}

.bc-modal__text {
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.65;
}

.bc-modal__text > :first-child {
	margin-top: 0;
	/* Service-infoen har ikke længere en overskrift (der gav luft til
	   luk-knappen) — første afsnit holder sig selv fri af knappen. */
	padding-right: 2.5rem;
}

.bc-modal__text > :last-child {
	margin-bottom: 0;
}

.bc-modal__text a {
	color: var(--bc-gold-bg);
}

/* ==================================================================
 * Tilgængelighed
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bc-modal__backdrop,
	.bc-modal__dialog,
	.bc-modal__content,
	.bc-modal__close,
	.bc-service__card,
	.bc-service__info,
	.bc-file__button,
	.bc-submit {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.bc-modal__dialog,
	.bc-modal__content {
		transform: none;
	}

	.bc-submit__spinner {
		animation-duration: 2s;
	}
}

/* ==================================================================
 * Responsiv + touch (gennemgang)
 *
 * Samlet blok for hele filen, så den kan findes (og fjernes) ét sted.
 *  - dvh: 90vh er for højt på mobil, mens browserens adresselinje er
 *    synlig (100vh = skærmen UDEN linjen). dvh følger den synlige højde.
 *  - safe-area: holder popup'en fri af iPhone-notch og hjemme-streg.
 *  - touch-action: pan-y på scroll-området giver ren lodret fingerscroll;
 *    none på baggrunden stopper at siden bagved trækkes med.
 *  - touch-action: manipulation fjerner dobbelttryk-zoom-forsinkelsen.
 *  - pointer: coarse = fingre — større trykflader (min. ca. 44 px).
 *  - liggende telefon (lav skærmhøjde): mindre luft, så der er plads.
 * ================================================================== */

.bc-modal {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@supports (padding: max(0px)) {
	.bc-modal {
		padding-top: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-top));
		padding-right: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-right));
		padding-bottom: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-bottom));
		padding-left: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-left));
	}
}

@supports (height: 100dvh) {
	.bc-modal__dialog {
		max-height: min(90dvh, 100%);
	}
}

.bc-modal__backdrop {
	touch-action: none;
}

.bc-modal__content {
	touch-action: pan-y;
	overflow-wrap: anywhere;
}

.bc-submit,
.bc-service__card,
.bc-service__info,
.bc-modal__close,
.bc-file__button {
	touch-action: manipulation;
}

@media (pointer: coarse) {
	.bc-modal__close {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media (max-height: 520px) {
	.bc-modal {
		padding: 0.5rem;
	}

	@supports (padding: max(0px)) {
		.bc-modal {
			padding-top: max(0.5rem, env(safe-area-inset-top));
			padding-right: max(0.5rem, env(safe-area-inset-right));
			padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
			padding-left: max(0.5rem, env(safe-area-inset-left));
		}
	}

	.bc-modal__dialog {
		max-height: 100%;
	}
}

/* Spørgsmålstegnet på service-kortene er kun 22 px — for småt til en finger.
   Knappen vokser lidt, og en usynlig flade rundt om den gør trykfladen ca. 44 px
   uden at kortets layout ændrer sig. */
@media (pointer: coarse) {
	.bc-service__info {
		width: 30px;
		height: 30px;
		font-size: 15px;
	}

	.bc-service__info::after {
		content: '';
		position: absolute;
		inset: -8px;
	}

	.bc-submit,
	.bc-file__button {
		min-height: 2.75rem;
	}
}