/*
* Fosure — design tokens
* Phase 2A "Brand-omdrejning": OKLCH-baseret palette, voksen blå (ikke neon),
* brand-tintede neutraler, distinkt typografi (Bricolage Grotesque + Hanken Grotesk — par B).
* Se .impeccable.md for kontekst og design-principper.
*
* Performance-follow-up (ikke Phase 2A): flyt @import til
* + i HTML for hurtigere første render.
*/
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@600&display=swap");
:root {
/* Surfaces — alle tintet mod brand-hue (260) for subconscious cohesion */
--bg: oklch(0.985 0.005 260);
--bg-alt: oklch(0.995 0.003 260);
--bg-tint: oklch(0.965 0.012 260);
/* Brand — voksen blå, lavt-mættet, ikke neon-fintech */
--primary: oklch(0.46 0.13 258);
--primary-soft: oklch(0.94 0.035 258);
--primary-dark: oklch(0.34 0.11 260);
/* Signal — restrained success, ikke 2018-mint */
--accent: oklch(0.55 0.10 165);
/* Text — varmt-tintet, aldrig pure black */
--text-main: oklch(0.22 0.015 260);
--text-muted: oklch(0.48 0.012 260);
--border-subtle: oklch(0.92 0.008 260);
/* Skygger: tonet mod brand-hue, mindre dramatiske end før (var 0.10 blot) */
--shadow-soft: 0 1px 2px oklch(0.22 0.015 260 / 0.04),
0 8px 24px oklch(0.22 0.015 260 / 0.06);
--shadow-elev: 0 2px 4px oklch(0.22 0.015 260 / 0.05),
0 16px 36px oklch(0.22 0.015 260 / 0.08);
/* Radii — let dæmpet fra 18 → 14 så kort ikke føles "templated SaaS" */
--radius-lg: 14px;
--radius-md: 10px;
--radius-sm: 6px;
--radius-full: 999px;
/* Typografi — par B: Bricolage Grotesque (display, variable opsz) + Hanken Grotesk (body) */
--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: var(--font-body);
font-feature-settings: "ss03", "ss05"; /* Hanken Grotesk: stylistic alternates */
background: var(--bg);
color: var(--text-main);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--text-main);
text-wrap: balance;
/* Bricolage: optical sizing; hero/store blokke overskriver opsz nedenfor */
font-variation-settings: "opsz" 24;
}
img {
max-width: 100%;
display: block;
}
a {
color: var(--primary);
text-decoration: none;
}
a:hover:not(.btn) {
text-decoration: underline;
}
.is-hidden {
display: none !important;
}
/* Prelaunch testfase-banner (hjemmeside) — fjernes automatisk efter launch */
.prelaunch-banner {
width: 100%;
padding: 0.65rem 1.5rem;
text-align: center;
font-size: 0.88rem;
font-weight: 500;
line-height: 1.45;
color: #fff;
background: var(--primary-dark);
border-bottom: 1px solid color-mix(in oklch, var(--primary) 40%, transparent);
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
.site-header {
position: sticky;
bottom: 0;
z-index: 20;
backdrop-filter: blur(12px);
background: rgba(249, 250, 251, 0.9);
border-bottom: 1px solid rgba(229, 231, 235, 0.7);
/* Header lockup: symbol + wordmark (footer bruger egne størrelser) */
--header-logo-text-size: 1.0625rem; /* 17px — Inter cap-height */
--header-logo-mark-scale: 1.65; /* symbolhøjde vs. tekst-em */
--header-logo-gap: 0.47em;
}
.header-inner {
justify-content: space-between;
padding: 0.75rem 0.5rem;
gap: 1.5rem;
}
/* Header-række: flex på hjemmeside (Budportal har også .bud-header-inner) */
.site-header .header-inner {
display: flex;
align-items: center;
}
.site-header .logo {
display: inline-flex;
align-items: center;
gap: var(--header-logo-gap);
font-size: var(--header-logo-text-size);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
}
.site-header img.logo-mark {
display: block;
flex-shrink: 0;
width: auto;
height: calc(1em * var(--header-logo-mark-scale));
max-height: none;
object-fit: contain;
object-position: center center;
border-radius: 10px; /* afrundet/beskåret F — samme som øvrige logo-mark */
vertical-align: unset;
}
.logo {
gap: 0.6rem;
font-weight: 700;
letter-spacing: 0.02em;
}
span.logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary);
color: #fff;
font-size: 1.3rem;
font-family: var(--font-display);
font-weight: 700;
}
img.logo-mark {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 10px;
object-fit: contain;
background: transparent;
vertical-align: middle;
}
.logo-mark.small {
width: 26px;
height: 26px;
}
.logo-text {
font-size: 1rem;
}
/* Header-wordmark only — footer og øvrig UI bruger Hanken Grotesk */
.site-header .logo-text {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 1em;
font-weight: 600;
line-height: 1;
letter-spacing: inherit;
/* Optisk centering mod F-symbol */
transform: translateY(2px);
}
.main-nav {
gap: 1.25rem;
}
.main-nav a {
color: var(--text-muted);
font-weight: 500;
padding: 0.3rem 0;
position: relative;
}
.main-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
border-radius: 999px;
background: var(--primary-dark);
transition: width 0.18s ease;
}
.main-nav a:hover::after {
width: 100%;
}
.hero {
padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
position: relative;
}
.hero-inner {
display: grid;
/* Asymmetrisk: tekst dominerer, fakta er bisætning – ikke parallel komponent */
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: clamp(2rem, 5vw, 4rem);
row-gap: 0;
align-items: start;
}
.hero-text {
/* Lidt forskydning nedad så fakta-modulet rager forbi headlinen optisk */
padding-top: 0.25rem;
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-self: stretch;
min-height: 0;
}
.hero-inner > .hero-card {
grid-column: 2;
grid-row: 1;
align-self: start;
}
.hero-text h1 {
/* Display-størrelse, fluid scale, optical-size axis */
font-size: clamp(2.4rem, 5.2vw, 3.85rem);
line-height: 1.02;
letter-spacing: -0.035em;
font-weight: 700;
font-variation-settings: "opsz" 96;
margin: 0 0 1.25rem;
max-width: 18ch;
}
.hero-subtitle {
font-size: clamp(1.02rem, 1.3vw, 1.15rem);
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 1.75rem;
max-width: 48ch;
}
.hero-subtitle strong {
color: var(--text-main);
font-weight: 600;
}
/* Trust-spec liste — uden ✔-glyphs. Tynd brand-tintet bullet via ::before. */
.hero-bullets {
list-style: none;
padding: 0;
margin: 0 0 2rem;
display: grid;
gap: 0.55rem;
color: var(--text-main);
font-size: 0.95rem;
font-weight: 500;
}
.hero-bullets li {
display: grid;
grid-template-columns: 0.75rem 1fr;
align-items: baseline;
gap: 0.65rem;
}
.hero-bullets li::before {
content: "";
display: block;
width: 0.5rem;
height: 1px;
background: var(--primary);
transform: translateY(-0.35em);
}
.hero .btn-primary {
/* Hero-CTA må gerne være lidt større end standard */
padding: 0.85rem 1.5rem;
font-size: 1rem;
}
.hero-note {
font-size: 0.82rem;
color: var(--text-muted);
max-width: none;
line-height: 1.35;
}
.hero-inner > .hero-note {
grid-column: 1;
grid-row: 2;
margin: 1.1rem 0 0;
}
/* Hero-note inde i .hero-text (fx arkiv-side) */
.hero-text > .hero-note {
margin-top: 1.15rem;
}
/* Skub knap til bunden af samme række som fakta-kortet (desktop); disclaimer med luft under knappen */
@media (min-width: 901px) {
.hero-cta-btn {
margin-top: auto;
align-self: flex-start;
}
.hero-inner > .hero-note {
/* Én linje på typisk desktop-bredde; tillad wrap på smallere vinduer */
white-space: nowrap;
font-size: clamp(0.75rem, 0.72rem + 0.2vw, 0.82rem);
margin-top: 1.65rem;
}
}
/* Fakta-modul: ikke længere "card med skygge" — let panel der binder visuelt
til indholdet uden at konkurrere med hero-headlinen. */
.hero-card {
background: var(--bg-alt);
border-radius: var(--radius-lg);
padding: 1.75rem 1.6rem;
box-shadow: 0 1px 0 var(--border-subtle);
border: 1px solid var(--border-subtle);
}
/* "Vidste du?" som typografisk eyebrow-label, ikke headline */
.hero-card h2 {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 1rem;
}
.hero-card p {
color: var(--text-muted);
margin: 0 0 1.1rem;
}
.hero-form {
flex-direction: column;
gap: 0.75rem;
}
.file-input {
border-radius: var(--radius-md);
border: 1px dashed var(--primary);
background: var(--primary-dark);
padding: 0.9rem 1rem;
font-size: 0.92rem;
justify-content: space-between;
gap: 0.75rem;
cursor: pointer;
}
.file-input input[type="file"] {
display: none;
}
.divider {
gap: 0.75rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.divider::before,
.divider::after {
content: "";
height: 1px;
flex: 1;
background: linear-gradient(to right, transparent, #d1d5db);
}
.btn {
padding: 0.7rem 1.2rem;
border-radius: var(--radius-md);
border: none;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
box-shadow 0.16s ease;
white-space: nowrap;
text-decoration: none;
}
a.btn:hover,
a.btn:focus-visible {
text-decoration: none;
}
.btn-primary {
background: var(--primary);
color: oklch(0.99 0.005 260);
border: 1px solid color-mix(in oklch, var(--primary-dark) 75%, var(--primary));
box-shadow: 0 1px 2px oklch(0.22 0.015 260 / 0.06);
}
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover:not(:disabled):not([disabled]):not(.btn-soft-disabled):not(.is-disabled):not([aria-disabled="true"]) {
background: color-mix(in oklch, var(--primary) 88%, var(--primary-dark));
border-color: color-mix(in oklch, var(--primary-dark) 85%, black);
transform: none;
box-shadow: 0 1px 3px oklch(0.22 0.015 260 / 0.08);
}
}
.btn-primary:active:not(:disabled):not([disabled]) {
background: var(--primary-dark);
transform: none;
box-shadow: inset 0 1px 2px oklch(0.22 0.02 260 / 0.2);
}
.btn-primary:focus-visible {
outline: 2px solid color-mix(in oklch, var(--primary) 60%, white);
outline-offset: 2px;
}
.btn-outline {
background: var(--primary-soft);
color: var(--primary-dark);
border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border-subtle));
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.btn-outline:hover:not(:disabled):not([disabled]):not(.btn-soft-disabled):not(.is-disabled):not([aria-disabled="true"]) {
background: color-mix(in oklch, var(--primary-soft) 70%, var(--primary) 8%);
border-color: color-mix(in oklch, var(--primary) 35%, var(--border-subtle));
color: var(--primary-dark);
transform: none;
}
}
.btn-outline:active:not(:disabled):not([disabled]) {
background: color-mix(in oklch, var(--primary-soft) 55%, var(--primary) 12%);
transform: none;
}
.btn-outline:focus-visible {
outline: 2px solid color-mix(in oklch, var(--primary) 45%, white);
outline-offset: 2px;
}
.btn-full-width {
width: 100%;
}
.btn-link {
background: none;
border: none;
padding: 0;
font-size: inherit;
color: var(--primary, #2746b8);
cursor: pointer;
text-decoration: underline;
}
.btn-link:hover:not(:disabled) {
color: var(--primary-dark, #1c358c);
}
.btn-link:disabled {
cursor: not-allowed;
opacity: 0.6;
text-decoration: none;
}
.otp-expiry-expired {
color: var(--error, #b91c1c) !important;
font-weight: 500;
}
.btn-soft-disabled,
.btn-soft-disabled:hover,
.btn-soft-disabled:active {
opacity: 1;
cursor: default;
transform: none;
box-shadow: none;
}
.btn-primary.btn-soft-disabled,
.btn-primary.btn-soft-disabled:hover,
.btn-primary.btn-soft-disabled:active {
background: color-mix(in oklch, var(--primary) 55%, var(--bg));
border-color: color-mix(in oklch, var(--primary) 30%, var(--border-subtle));
color: oklch(0.99 0.005 260 / 0.85);
}
.btn-outline.btn-soft-disabled,
.btn-outline.btn-soft-disabled:hover,
.btn-outline.btn-soft-disabled:active {
background: var(--bg-tint);
border-color: var(--border-subtle);
color: var(--text-muted);
}
/* Disabled buttons should look "locked" */
button.btn:disabled,
button.btn[disabled],
input.btn:disabled,
input.btn[disabled] {
opacity: 0.45;
box-shadow: none;
cursor: not-allowed;
transform: none;
}
button.btn:disabled:hover,
button.btn[disabled]:hover,
input.btn:disabled:hover,
input.btn[disabled]:hover {
transform: none;
box-shadow: none;
}
/* "Locked" buttons that should still be clickable (to show validation hints) */
button.btn.is-disabled,
button.btn[aria-disabled="true"],
input.btn.is-disabled,
input.btn[aria-disabled="true"] {
opacity: 0.45;
box-shadow: none;
cursor: not-allowed;
transform: none;
}
button.btn.is-disabled:hover,
button.btn[aria-disabled="true"]:hover,
input.btn.is-disabled:hover,
input.btn[aria-disabled="true"]:hover {
transform: none;
box-shadow: none;
}
/* Prevent outline buttons from changing background on hover when locked */
button.btn-outline.is-disabled:hover,
button.btn-outline[aria-disabled="true"]:hover {
background: var(--bg-tint);
}
.cta-form #cta-submit {
padding: 0.8rem 1.25rem;
font-size: 0.95rem;
}
.form-helper,
.field-help {
font-size: 0.78rem;
color: var(--text-muted);
}
.section {
padding: 3.5rem 0;
}
.section-alt {
background: var(--bg-tint);
}
/* Section-header — editorial default:
- Venstrestillet (centreret er nu opt-in via .align-center)
- Optionel eyebrow-label (.section-eyebrow) som typografisk anker
- H2 i fluid display-skala
- Lead-paragraph med begrænset linjebredde (52ch) */
.section-header {
margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
text-align: left;
max-width: 64ch;
}
.section-header.align-left {
text-align: left;
}
.section-header.align-center {
text-align: center;
max-width: none;
margin-left: auto;
margin-right: auto;
}
.section-header.align-center .section-eyebrow,
.section-header.align-center p {
margin-left: auto;
margin-right: auto;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--primary);
margin: 0 0 0.85rem;
}
.section-eyebrow::before {
content: "";
display: inline-block;
width: 1.5rem;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.section-header h2 {
margin: 0 0 0.6rem;
font-size: clamp(1.7rem, 3.5vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 600;
font-variation-settings: "opsz" 56;
text-wrap: balance;
}
.section-header p {
margin: 0;
color: var(--text-muted);
font-size: clamp(0.98rem, 1.15vw, 1.075rem);
line-height: 1.55;
max-width: 52ch;
}
/* "Sådan fungerer det" — typografisk redesign:
Ingen kort. Ingen baggrund. Stort display-tal som visuelt anker.
Tynde lodrette separatorer mellem trin på desktop, vandrette på mobil. */
.steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.step {
position: relative;
padding: 0.5rem 1.5rem 0.5rem 0;
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
}
.step + .step {
padding-left: 1.5rem;
border-left: 1px solid var(--border-subtle);
}
.step-number {
display: block;
font-family: var(--font-display);
font-size: clamp(2.4rem, 4.2vw, 3.4rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.04em;
color: var(--primary);
font-variation-settings: "opsz" 96;
margin: 0 0 1rem;
/* Bricolage: tabular lining figures hvor understøttet */
font-variant-numeric: lining-nums;
/* Talsuffiks "—" som visuelt led mellem tal og overskrift */
}
.step-number::after {
content: "";
display: block;
width: 1.75rem;
height: 2px;
background: var(--primary);
margin-top: 0.55rem;
opacity: 0.4;
}
.step h3 {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 0.5rem;
letter-spacing: -0.015em;
line-height: 1.25;
}
.step p {
margin: 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--text-muted);
max-width: 32ch;
}
@media (max-width: 900px) {
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 1.5rem;
}
.step,
.step + .step {
padding: 0;
border-left: 0;
}
/* Små skærme: centrér header; "Processen" med streg over og under */
#how-it-works .section-header {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#how-it-works .section-header .section-eyebrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
/* Mindre frirum over eyebrow og ned til h2 (~25% mindre) */
margin-top: -1.58rem;
margin-bottom: 1.34rem;
margin-left: auto;
margin-right: auto;
}
#how-it-works .section-header .section-eyebrow::before,
#how-it-works .section-header .section-eyebrow::after {
content: "";
display: block;
width: 1.5rem;
height: 1px;
background: currentColor;
opacity: 0.55;
}
#how-it-works .section-header > p {
margin-left: auto;
margin-right: auto;
}
#how-it-works .step {
text-align: center;
}
#how-it-works .step-number::after {
margin-left: auto;
margin-right: auto;
}
#how-it-works .step p {
margin-left: auto;
margin-right: auto;
}
/* Små skærme: CTA "Start" — samme centrering, streger og spacing som "Processen" */
#cta .cta-left {
display: contents;
}
#cta .cta-left-copy {
order: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#cta .cta-form {
order: 2;
}
#cta .cta-video-fold {
order: 3;
}
#cta .cta-left-copy .section-eyebrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
margin-top: -1.58rem;
margin-bottom: 1.34rem;
margin-left: auto;
margin-right: auto;
}
#cta .cta-left-copy .section-eyebrow::before,
#cta .cta-left-copy .section-eyebrow::after {
content: "";
display: block;
width: 1.5rem;
height: 1px;
background: currentColor;
opacity: 0.55;
}
#cta .cta-left-copy h2 {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem;
}
#cta .cta-title-dash {
display: none;
}
#cta .cta-left-copy > p {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem;
}
/* Touch: controls synlige uden hover (også under afspilning, så man kan pause) */
#cta .cta-video-fold .cta-video-overlay {
opacity: 1;
}
#cta .cta-video-fold .cta-video-wrapper.is-playing .cta-video-overlay {
opacity: 1;
background: transparent;
}
}
@media (max-width: 640px) {
.steps {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.step + .step {
padding-top: 1.75rem;
margin-top: 1.75rem;
border-top: 1px solid var(--border-subtle);
}
}
/* Completed step (success-screen): dæmpet tal, accent-farve, ingen kort */
.step-completed {
opacity: 0.65;
}
.step-completed h3,
.step-completed p {
color: var(--text-muted);
}
.step-number-completed {
color: var(--accent) !important;
font-size: clamp(2.4rem, 4.2vw, 3.4rem) !important;
}
.step-completed .step-number::after {
background: var(--accent);
}
.trust-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
column-gap: 2.5rem;
row-gap: 0;
align-items: start;
}
.trust-heading {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
}
.trust-copy {
grid-column: 1;
grid-row: 2;
}
.trust-copy > p {
margin: 0;
color: var(--text-muted);
font-size: clamp(0.98rem, 1.15vw, 1.075rem);
line-height: 1.55;
max-width: 52ch;
}
.trust-aside {
grid-column: 2;
grid-row: 2;
display: grid;
gap: 0.9rem;
}
.trust-points {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
display: grid;
gap: 1.2rem;
}
.trust-points h3 {
margin: 0 0 0.3rem;
font-size: 1rem;
}
.trust-points p {
margin: 0;
color: var(--text-muted);
}
.trust-card {
background: #f9fafb;
border-radius: 14px;
padding: 0.85rem 0.95rem;
border: 1px solid #e5e7eb;
font-size: 0.88rem;
}
.trust-card h3 {
margin: 0 0 0.25rem;
font-size: 0.95rem;
}
.section-cta {
background: var(--bg-tint);
}
#final-success[aria-hidden="true"] {
display: none !important;
}
#final-success[aria-hidden="false"] {
display: block !important;
}
#final-success .cta-success {
display: grid !important;
}
.section-manual {
display: none;
background: #f3f4f6;
}
.section-manual.is-active {
display: block;
}
/*
* CTA → wizard step-swap (sekventiel fade).
* Styring: USE_CTA_STEP_SWAP i hjemmeside.html (openManualFlow).
* Sæt den til false for at genskabe gammel scrollIntoView-adfærd.
*/
#cta.is-step-hidden {
display: none !important;
}
@media (prefers-reduced-motion: no-preference) {
#cta .cta-inner {
transition:
opacity 0.18s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}
#cta.is-step-exiting .cta-inner {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
}
#manual-flow.is-active.cta-step-fade-in {
animation: cta-step-fade-in 0.24s cubic-bezier(0.25, 1, 0.5, 1) both;
}
}
@keyframes cta-step-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#manual-flow.is-upload-flow #manual-step-1 .wizard-step-title {
display: none;
}
#manual-flow.is-upload-flow #product-grid .coverage-info-btn {
display: none;
}
.cta-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
column-gap: clamp(2rem, 5vw, 3.5rem);
row-gap: 1.1rem;
align-items: start;
}
.cta-video-fold {
min-width: 0;
display: grid;
gap: 0.15rem;
}
.cta-video-steps-wrap {
position: relative;
}
.cta-video-fold-trigger {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
margin: 0;
padding: 0.85rem 0;
font-family: var(--font-body);
font-size: 0.855rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--text-main);
text-align: left;
background: none;
border: none;
border-top: 1px solid var(--border-subtle);
user-select: none;
}
.cta-video-fold-trigger::after {
content: "";
width: 0.4rem;
height: 0.4rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.15s ease;
opacity: 0.65;
flex-shrink: 0;
margin-right: 0.15rem;
}
.cta-video-fold-trigger[aria-expanded="true"]::after {
transform: rotate(-135deg);
translate: 0 0.12rem;
}
.cta-video-fold-steps {
margin: 0;
padding: 0 0 0 1.2rem;
list-style: decimal;
font-size: 0.855rem;
line-height: 1.45;
color: var(--text-main);
}
.cta-video-fold-steps li + li {
margin-top: 0.35rem;
}
.cta-inner .cta-video-fold-note {
margin: 0;
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-muted);
max-width: none;
}
/* Desktop: synlig video + popup med trin (skubber ikke siden) */
@media (min-width: 901px) {
.cta-video-mobile-slot:empty {
display: none;
}
.cta-video-steps-popup {
position: absolute;
left: 0;
right: 0;
top: calc(100% - 0.1rem);
z-index: 40;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
background: var(--bg-tint);
border: 1px solid transparent;
border-radius: var(--radius-lg);
box-shadow: none;
pointer-events: none;
transition:
grid-template-rows 200ms ease,
border-color 200ms ease,
box-shadow 200ms ease;
}
.cta-video-steps-popup.is-open {
grid-template-rows: 1fr;
border-color: var(--border-subtle);
box-shadow: 0 10px 28px oklch(0.22 0.015 260 / 0.12);
pointer-events: auto;
}
.cta-video-steps-popup-inner {
min-height: 0;
overflow: hidden;
display: grid;
gap: 0.85rem;
padding: 0 1.15rem;
transition: padding 200ms ease;
}
.cta-video-steps-popup.is-open .cta-video-steps-popup-inner {
padding: 1.15rem;
}
}
/* Mobil: video skjult i almindelig in-flow fold-ud (ikke popup) */
@media (max-width: 900px) {
.cta-video-desktop-slot {
display: none;
}
.cta-video-steps-wrap {
position: static;
}
.cta-video-steps-popup {
position: static;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
pointer-events: none;
transition: grid-template-rows 200ms ease;
}
.cta-video-steps-popup.is-open {
grid-template-rows: 1fr;
pointer-events: auto;
}
.cta-video-steps-popup-inner {
min-height: 0;
overflow: hidden;
display: grid;
gap: 0.85rem;
padding: 0;
transition: padding 200ms ease;
}
.cta-video-steps-popup.is-open .cta-video-steps-popup-inner {
padding: 0.35rem 0 0.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.cta-video-steps-popup,
.cta-video-steps-popup-inner {
transition: none;
}
}
.cta-inner h2 {
margin-top: 0;
font-size: clamp(1.7rem, 3.2vw, 2.25rem);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 600;
font-variation-settings: "opsz" 48;
max-width: 22ch;
}
.cta-inner p {
margin: 0;
color: var(--text-muted);
font-size: clamp(0.98rem, 1.15vw, 1.075rem);
line-height: 1.55;
max-width: 48ch;
}
.cta-left {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.cta-video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 320px;
border-radius: 16px;
overflow: hidden;
background: #fff;
isolation: isolate;
}
.cta-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.01);
transform-origin: center;
}
.cta-video-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
opacity: 1; /* play synlig fra start */
transition: opacity 0.2s ease, background 0.2s ease;
padding: 0;
}
/* Mørkt overlay først ved hover (som før) */
.cta-video-wrapper:hover .cta-video-overlay {
background: rgba(0, 0, 0, 0.15);
}
/* Afspilning: overlay/play skjules — kun synlig ved hover (nuværende adfærd) */
.cta-video-wrapper.is-playing .cta-video-overlay {
opacity: 0;
background: transparent;
}
.cta-video-wrapper.is-playing:hover .cta-video-overlay {
opacity: 1;
background: rgba(0, 0, 0, 0.15);
}
/* Standard: kun play-ikon synligt når video er pauset */
.cta-video-overlay .cta-video-icon-pause {
display: none;
}
/* Når video afspiller: kun pause-ikon synligt */
.cta-video-wrapper.is-playing .cta-video-icon-play {
display: none;
}
.cta-video-wrapper.is-playing .cta-video-icon-pause {
display: flex;
}
.cta-video-icon {
display: flex;
align-items: center;
justify-content: center;
}
/* Form: del af sektionen, ikke en svævende ø.
Lyseste brand-tinted baggrund, tynd border, ingen drop shadow. */
.cta-form {
background: var(--bg-alt);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 2.5vw, 2rem);
border: 1px solid var(--border-subtle);
box-shadow: none;
display: grid;
gap: 0.9rem;
min-width: 0;
}
.cta-form-body {
display: grid;
gap: 0.9rem;
}
/* Grid-stack: valg-kort og bekræftelse ligger i samme celle -> automatisk
højde-match + mulighed for crossfade. */
.cta-swap {
display: grid;
margin-top: 0.25rem;
}
.cta-swap > .cta-swap-item {
grid-area: 1 / 1 / 2 / 2;
margin: 0;
}
.cta-swap-item.cta-swap-out {
opacity: 0;
transform: scale(0.98) translateY(6px);
visibility: hidden;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
/* Enter: 240ms ease-out-quart */
.cta-swap > .cta-swap-item {
transition:
opacity 0.24s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
visibility 0s;
}
/* Exit: ~75% af enter (180ms) — hurtigere ud, mere afklaret */
.cta-swap-item.cta-swap-out {
transition:
opacity 0.18s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.18s cubic-bezier(0.25, 1, 0.5, 1),
visibility 0s linear 0.18s;
}
}
.cta-verify {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.25rem;
padding: 0.55rem 1.15rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: #fff;
box-sizing: border-box;
}
.cta-verify.is-hidden {
display: none;
}
.cta-verify-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary);
line-height: 0;
}
.cta-verify-icon svg {
width: 26px;
height: 26px;
}
.cta-verify-intro,
.cta-verify-code {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 100%;
}
.cta-verify-title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.cta-verify-desc {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
max-width: 26rem;
}
.cta-verify-intro #cta-verify-send {
margin-top: 0.15rem;
width: auto;
min-width: 0;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.cta-verify-code-title {
margin: 0;
font-size: 1.02rem;
line-height: 1.45;
color: var(--text-main);
}
.cta-verify-code-title strong {
font-weight: 700;
}
.cta-verify-code.is-hidden,
.cta-verify-error.is-hidden,
.cta-verify-sending.is-hidden {
display: none !important;
}
.cta-otp-group {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.45rem;
width: 100%;
max-width: 20rem;
}
/* 3+3 visuel gruppering */
.cta-otp-input:nth-child(3) {
margin-right: 0.6rem;
}
.cta-otp-input {
width: 100%;
min-width: 0;
text-align: center;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.08em;
padding: 0.7rem 0.25rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: var(--bg-alt);
color: var(--text-main);
font-family: var(--font-body);
}
.cta-otp-input:focus {
outline: 2px solid color-mix(in oklch, var(--primary) 45%, white);
outline-offset: 1px;
border-color: color-mix(in oklch, var(--primary) 40%, var(--border-subtle));
}
.cta-otp-group.has-error .cta-otp-input {
border-color: #b91c1c;
background: #fef2f2;
}
.cta-verify-error {
margin: 0;
color: #b91c1c;
font-size: 0.85rem;
}
.cta-verify-actions {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
width: 100%;
max-width: 20rem; /* samme bredde som OTP-felterne */
}
.cta-verify-actions .btn-link {
font-size: 0.65rem;
line-height: 1.3;
}
.cta-verify-actions #cta-verify-edit {
text-align: left;
}
.cta-verify-actions #cta-verify-resend {
text-align: right;
margin-left: auto;
}
/* Loading (spinner porteret fra Budportalens login) */
.cta-verify-sending {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
}
.cta-verify-spinner {
position: relative;
width: 40px;
height: 40px;
}
.cta-verify-spinner-track {
position: absolute;
inset: 0;
border: 3px solid rgba(99, 102, 241, 0.2);
border-radius: 50%;
}
.cta-verify-spinner-orb {
position: absolute;
inset: 0;
transform-origin: 50% 50%;
will-change: transform;
backface-visibility: hidden;
animation: cta-verify-spin 1.6s linear infinite;
}
.cta-verify-spinner-dot {
position: absolute;
/* Orbit on track stroke midline: half of 3px border (not outer edge) */
top: 1.5px;
left: 50%;
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: -5px;
background: var(--primary, #4f46e5);
border-radius: 50%;
}
@keyframes cta-verify-spin {
0% { transform: rotate(0deg); }
28% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
.cta-verify-sending-text {
margin: 0;
font-size: 0.9rem;
color: var(--text-muted);
}
/* State-styret synlighed */
.cta-verify[data-state="placeholder"] #cta-verify-code,
.cta-verify[data-state="placeholder"] #cta-verify-sending,
.cta-verify[data-state="readyToSend"] #cta-verify-code,
.cta-verify[data-state="readyToSend"] #cta-verify-sending,
.cta-verify[data-state="sending"] .cta-verify-intro,
.cta-verify[data-state="sending"] .cta-verify-icon,
.cta-verify[data-state="sending"] #cta-verify-code,
.cta-verify[data-state="codeSent"] .cta-verify-intro {
display: none !important;
}
/* Bekræftet-indikator ved Email-label */
.form-field-label-row {
display: flex;
align-items: baseline;
gap: 0.4rem;
min-width: 0;
}
.form-field-label-row label {
margin: 0;
}
.cta-email-verified {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--primary);
line-height: 1;
transform-origin: left center;
}
.cta-email-verified.is-hidden {
display: none !important;
}
.cta-email-verified-check {
color: var(--primary);
font-size: 0.85rem;
line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
.cta-email-verified:not(.is-hidden) {
animation: cta-email-verified-in 0.15s cubic-bezier(0.25, 1, 0.5, 1) both;
}
}
@keyframes cta-email-verified-in {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: scale(1);
}
}
.cta-form.is-success .cta-form-body {
display: none;
}
.cta-success {
display: none;
gap: 0.75rem;
}
.cta-form.is-success .cta-success {
display: grid;
}
.cta-success h3 {
margin: 0;
font-size: 1.3rem;
letter-spacing: -0.01em;
}
.cta-success p {
margin: 0;
color: var(--text-muted);
}
/* Success-mark: editorial check, ikke filled cirkel med drop shadow */
.cta-success-icon {
width: 38px;
height: 38px;
border-radius: 0;
margin: 0 0 0.85rem;
background: transparent;
color: var(--accent);
font-family: var(--font-display);
font-size: 2rem;
font-weight: 500;
box-shadow: none;
display: flex;
align-items: center;
justify-content: flex-start;
line-height: 1;
}
.cta-success-icon span {
display: inline-block;
border-bottom: 2px solid var(--accent);
padding-bottom: 0.15rem;
line-height: 0.85;
}
.cta-success {
text-align: left;
}
.choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
margin-top: 0.25rem;
}
.choice-grid.is-disabled {
opacity: 0.25;
pointer-events: none;
}
.choice-card {
border-radius: var(--radius-md);
padding: 1rem 1.1rem;
text-align: left;
border: 1px solid var(--border-subtle);
background: var(--bg);
display: grid;
gap: 0.4rem;
cursor: pointer;
box-shadow: none;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.choice-card:hover {
border-color: color-mix(in oklch, var(--primary) 35%, var(--border-subtle));
}
.choice-card h3 {
margin: 0;
font-size: 0.98rem;
font-weight: 600;
letter-spacing: -0.01em;
}
/* Global h3-farve (text-main) overskriver ellers — hvid tekst på blåt kort, ingen stroke */
.choice-card-primary h3 {
color: #fff;
font-weight: 700;
}
.choice-card p {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
}
.choice-card-primary {
position: relative;
overflow: hidden;
background: var(--primary);
color: #ffffff;
border: 1px dashed rgba(255, 255, 255, 0.7);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.choice-card-primary.is-dragover {
border-color: rgba(255, 255, 255, 0.85);
background: color-mix(in oklch, var(--primary) 92%, white);
}
.choice-card-primary.is-drop-target {
border-color: #ffffff;
background: color-mix(in oklch, var(--primary) 72%, white);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.28),
0 8px 22px rgba(15, 23, 42, 0.16);
}
.choice-upload-dropzone-overlay {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.28);
color: #ffffff;
pointer-events: none;
z-index: 2;
border-radius: inherit;
transition: background 0.18s ease;
}
.choice-card-primary.is-dragover .choice-upload-dropzone-overlay {
display: flex;
}
.choice-card-primary.is-drop-target .choice-upload-dropzone-overlay {
background: rgba(15, 23, 42, 0.52);
}
.choice-upload-dropzone-prompt {
display: inline-block;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
padding: 0.65rem 1.05rem;
border-radius: 0.5rem;
border: 2px dashed transparent;
transition: border-color 0.18s ease, opacity 0.18s ease;
}
.choice-card-primary.is-drop-target .choice-upload-dropzone-prompt {
font-size: 1.05rem;
border-color: rgba(255, 255, 255, 0.92);
animation: policy-dropzone-pulse 0.9s ease-in-out infinite;
}
@keyframes policy-dropzone-pulse {
0%, 100% { opacity: 0.92; }
50% { opacity: 1; }
}
.choice-card-primary p {
color: color-mix(in oklch, white 78%, var(--primary));
}
.choice-card-outline {
background: var(--bg-alt);
border-color: var(--border-subtle);
}
.choice-card.is-selected {
box-shadow: 0 0 0 2px var(--primary);
border-color: var(--primary);
}
.choice-card-primary.is-selected {
border-color: rgba(255, 255, 255, 0.7);
border-style: dashed;
}
/* Valg markeres kun med border-color + box-shadow (samme border-width),
så teksten ikke reflow’er (fx “få” der hopper linje). */
/* Validation: allow choice cards to be highlighted */
.choice-card.is-field-error {
outline: 2px solid #ef4444;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12), 0 8px 20px rgba(15, 23, 42, 0.06);
}
.choice-upload-input {
margin-top: 0.35rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.1);
color: #ffffff;
font-size: 0.8rem;
padding: 0.45rem 0.9rem;
gap: 0.35rem;
}
.choice-upload-input input[type="file"] {
display: none;
}
.policy-upload-status {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
margin: 0.5rem 0 0;
}
.policy-upload-counter {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted, #64748b);
}
.choice-card-primary .policy-upload-counter {
color: color-mix(in oklch, white 85%, var(--primary));
}
.policy-files-link {
border: none;
background: none;
padding: 0;
margin: 0;
font-size: 0.82rem;
font-weight: 500;
color: var(--text-muted, #64748b);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.policy-files-link:hover {
color: var(--primary-dark);
}
.choice-card-primary .policy-files-link {
color: color-mix(in oklch, white 92%, var(--primary));
}
.choice-card-primary .policy-files-link:hover {
color: #fff;
}
/* File manager popup (staged policer før indsendelse) */
.policy-fm-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(15, 23, 42, 0.45);
}
.policy-fm-overlay.is-hidden {
display: none;
}
.policy-fm-modal {
width: 100%;
max-width: 420px;
max-height: min(80vh, 520px);
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
padding: 1.25rem 1.25rem 1rem;
box-shadow: var(--shadow-elev, 0 16px 36px rgba(15, 23, 42, 0.12));
}
.policy-fm-title {
margin: 0 0 0.75rem;
font-size: 1.1rem;
font-weight: 700;
}
.policy-fm-list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.policy-fm-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.policy-fm-item:last-child {
border-bottom: none;
}
.policy-fm-item__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9rem;
font-weight: 500;
}
.policy-fm-item__size {
flex-shrink: 0;
font-size: 0.78rem;
color: var(--text-muted, #64748b);
font-variant-numeric: tabular-nums;
}
.policy-fm-item__actions {
display: flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
}
.policy-fm-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--border-subtle, #e2e8f0);
border-radius: 8px;
background: #fff;
color: var(--text-muted, #64748b);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.policy-fm-icon-btn:hover {
background: var(--primary-soft, #eef2ff);
border-color: color-mix(in oklch, var(--primary) 25%, var(--border-subtle));
color: var(--primary-dark);
}
.policy-fm-icon-btn--danger:hover {
background: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
.policy-fm-icon-btn svg {
width: 1rem;
height: 1rem;
display: block;
}
.policy-fm-empty {
margin: 0 0 0.75rem;
font-size: 0.9rem;
color: var(--text-muted, #64748b);
}
.policy-fm-close {
margin-top: 0.75rem;
align-self: flex-end;
}
/* PDF viewer popup (lokal fil) */
.policy-pdf-overlay {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(15, 23, 42, 0.55);
}
.policy-pdf-overlay.is-hidden {
display: none;
}
.policy-pdf-modal {
width: 100%;
max-width: 900px;
max-height: 92vh;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-elev, 0 16px 36px rgba(15, 23, 42, 0.15));
}
.policy-pdf-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.policy-pdf-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.policy-pdf-close {
flex-shrink: 0;
border: none;
background: transparent;
font-size: 1.5rem;
line-height: 1;
color: var(--text-muted, #64748b);
cursor: pointer;
padding: 0.15rem 0.35rem;
}
.policy-pdf-close:hover {
color: var(--text-main);
}
.policy-pdf-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
background: var(--bg-tint, #f8fafc);
}
.policy-pdf-tool-btn {
min-width: 2rem;
height: 2rem;
padding: 0 0.5rem;
border: 1px solid var(--border-subtle, #e2e8f0);
border-radius: 8px;
background: #fff;
font-size: 1rem;
cursor: pointer;
}
.policy-pdf-tool-btn:hover {
background: var(--primary-soft);
border-color: color-mix(in oklch, var(--primary) 25%, var(--border-subtle));
}
.policy-pdf-page-info {
font-size: 0.85rem;
color: var(--text-muted, #64748b);
min-width: 5.5rem;
text-align: center;
}
.policy-pdf-canvas-wrap {
overflow: auto;
flex: 1 1 auto;
min-height: 0;
padding: 1rem;
background: #f1f5f9;
text-align: center;
}
.policy-pdf-pages {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.policy-pdf-canvas-wrap canvas {
max-width: 100%;
height: auto;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}
.policy-pdf-message {
margin: 0;
padding: 0.75rem 1rem;
font-size: 0.9rem;
color: #b91c1c;
background: #fef2f2;
border-top: 1px solid #fecaca;
}
.policy-upload-list {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
}
.policy-upload-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
font-size: 0.9rem;
}
.policy-upload-item__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.policy-upload-item__size {
font-size: 0.8rem;
color: var(--text-muted, #64748b);
}
.policy-upload-item__remove {
border: none;
background: transparent;
color: #b91c1c;
cursor: pointer;
font-size: 0.8rem;
text-decoration: underline;
}
.policy-upload-error {
color: #b91c1c;
font-size: 0.85rem;
margin-top: 0.5rem;
}
.policy-upload-error.is-hidden {
display: none;
}
/* Higher specificity than .choice-card p so "Understøttes af" stays small */
p.choice-card-supported-by,
.choice-card-supported-by {
margin: 0.4rem 0 0;
font-size: 0.52rem;
line-height: 1;
color: rgba(241, 245, 249, 0.8);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
}
.choice-card-supported-by .choice-card-supported-by-text {
display: inline-block;
}
.choice-card-supported-by .comadso-logo {
height: 0.71rem;
width: auto;
display: block;
}
.manual-inner {
max-width: 1000px;
}
.manual-wizard {
background: #ffffff;
border-radius: 20px;
padding: 1.5rem 1.6rem;
box-shadow: var(--shadow-soft);
border: 1px solid rgba(209, 213, 219, 0.9);
}
.wizard-step-title {
margin-top: 0;
margin-bottom: 0.25rem;
font-size: 1.2rem;
letter-spacing: -0.01em;
}
#manual-step-1 .wizard-step-title {
margin-bottom: 1.5rem;
}
.wizard-step-intro {
margin: 0 0 1.1rem;
color: var(--text-muted);
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.7rem;
margin-bottom: 1rem;
}
/* Manuel flow: start med 5 produkter + "Se flere"; efter klik vises alle */
.product-grid .product-more {
display: none;
}
.product-grid-expanded .product-more {
display: block;
}
.product-grid .product-more.product-card {
display: none;
}
.product-grid-expanded .product-more.product-card {
display: inline-flex;
}
.product-grid .product-card-wrap[data-product="fritidshus"] .product-fritidshus-content {
display: none;
}
.product-grid-expanded .product-card-wrap[data-product="fritidshus"] .product-fritidshus-content {
display: block;
}
.product-grid .product-card-wrap[data-product="fritidshus"] .product-card-se-flere {
display: inline-flex;
width: 100%;
}
.product-grid-expanded .product-card-wrap[data-product="fritidshus"] .product-card-se-flere {
display: none;
}
.product-card {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.55rem 0.7rem;
border-radius: 12px;
border: 1px solid #cbd5e1;
background: #e5edf8;
color: #111827;
cursor: pointer;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.product-card-wrap {
position: relative;
}
.product-card-wrap .product-card-main {
width: 100%;
}
/* Reserver plads til info/count, så valg/outline ikke flytter label/ikon */
.product-card-main.has-info {
padding-right: 2.5rem;
}
.product-card-main.has-count,
.product-card-wrap:has(> .product-count) .product-card-main {
padding-right: 4.2rem;
}
.coverage-info-btn.is-hidden {
display: none !important;
}
.product-card-wrap > .coverage-info-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 3;
}
.product-card-wrap > .coverage-info-btn:hover {
/* Bevar translateY; reducer hover "hop" (ca. 75% mindre) */
transform: translateY(-50%) scale(1.02);
}
.product-card-wrap > .coverage-info-btn:focus-visible {
transform: translateY(-50%) scale(1.02);
}
.product-count {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.25rem;
border-radius: 999px;
border: 1px solid rgba(203, 213, 225, 0.9);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.product-count.is-hidden {
display: none;
}
.product-count-btn {
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid rgba(203, 213, 225, 0.9);
background: #ffffff;
color: var(--primary-dark);
font-weight: 800;
font-size: 1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
/* Optisk centrering af +/− uden at ændre størrelse */
position: relative;
color: transparent; /* skjul glyph; vi renderer den igen i ::before */
}
.product-count-btn::before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font: inherit;
line-height: 1;
color: var(--primary-dark);
pointer-events: none;
}
.product-count-btn[data-action="inc"]::before {
content: "+";
/* Små font-metric forskelle kan få + til at se off-center ud */
transform: translate(-50%, -50%) translateY(-0.75px);
}
.product-count-btn[data-action="dec"]::before {
content: "−";
/* U+2212 kan også ligge en anelse off-center i nogle fonts */
transform: translate(-50%, -50%) translateY(-0.75px);
}
.product-count-btn:hover {
background: var(--primary-soft);
border-color: var(--primary);
}
.product-count-value {
min-width: 1.3rem;
text-align: center;
font-size: 0.9rem;
font-weight: 800;
color: #111827;
}
.product-card.is-selected ~ .product-count {
border-color: rgba(25, 71, 255, 0.25);
}
.product-card .product-icon {
font-size: 1.3rem;
}
.product-card.is-selected {
border-color: #1e40af;
box-shadow: 0 10px 22px rgba(30, 64, 175, 0.35);
background: #dde9ff;
}
.wizard-actions {
justify-content: flex-end;
gap: 0.6rem;
}
.wizard-actions-bottom {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.5rem;
}
.wizard-add-extra-btn {
margin-left: auto;
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--primary);
background: #ffffff;
color: var(--primary);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.12s ease;
}
.wizard-add-extra-btn:hover {
background: var(--primary-soft);
border-color: var(--primary-dark);
color: var(--primary-dark);
}
.wizard-add-extra-btn.is-hidden {
display: none;
}
.wizard-primary {
min-width: 230px;
}
.wizard-pill-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.wizard-pill.has-remove {
/* Ingen fast plads til "×" — den skal overlappe teksten ved hover */
padding-right: 0.7rem;
}
.wizard-pill-remove {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(203, 213, 225, 0.9);
background: rgba(255, 255, 255, 0.85);
color: var(--text-muted);
display: grid;
place-items: center;
/* vi renderer selve krydset via ::before for bedre centrering */
font-size: 0;
line-height: 0;
cursor: pointer;
padding: 0;
opacity: 0;
pointer-events: none;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease,
transform 0.12s ease, opacity 0.12s ease;
}
.wizard-pill-remove::before {
content: "×";
display: block;
font-size: 14px;
line-height: 1;
color: currentColor;
/* optisk centrering i cirklen */
transform: translateY(-0.5px);
}
.wizard-pill-wrap:hover .wizard-pill-remove,
.wizard-pill-wrap:focus-within .wizard-pill-remove {
opacity: 1;
pointer-events: auto;
background: rgba(255, 255, 255, 0.98);
border-color: #94a3b8;
color: #0f172a;
}
.wizard-pill-remove:hover {
background: rgba(255, 255, 255, 1);
border-color: #94a3b8;
color: #0f172a;
transform: translateY(-50%) scale(1.05);
}
.wizard-pill-wrap.is-active .wizard-pill-remove {
border-color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.95);
}
.wizard-pill-wrap.is-active .wizard-pill-remove:hover {
background: rgba(255, 255, 255, 0.26);
border-color: rgba(255, 255, 255, 0.75);
color: #ffffff;
}
/* Når man hover'er hele den aktive pill, skal X stadig være tydelig */
.wizard-pill-wrap.is-active:hover .wizard-pill-remove,
.wizard-pill-wrap.is-active:focus-within .wizard-pill-remove {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(255, 255, 255, 0.95);
color: #0f172a;
}
/* Input med indbygget "addon" (fx enhed vælger) */
.input-with-addon {
display: flex;
align-items: stretch;
width: 100%;
}
.input-with-addon > input[type="text"],
.input-with-addon > input[type="number"] {
flex: 1 1 auto;
width: auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-with-addon > select {
flex: 0 0 auto;
width: 7.25rem;
margin-left: -1px; /* smelt borders sammen */
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@media (max-width: 520px) {
.input-with-addon > select {
width: 6.25rem;
}
}
/* Mere luft omkring "Bekræft & fortsæt til dækning" knapper */
#indbo-coverage-btn,
#bil-coverage-btn,
#ulykke-coverage-btn {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.wizard-step-2.is-hidden {
display: none;
}
.wizard-step-1.is-hidden {
display: none;
}
.wizard-track-wrapper {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.wizard-track {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.65rem;
overflow-x: hidden;
padding-bottom: 0;
flex: 1;
}
.wizard-add-insurance-btn {
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--primary);
background: #ffffff;
color: var(--primary);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.12s ease;
}
.wizard-add-insurance-btn:hover {
background: var(--primary-soft);
border-color: var(--primary-dark);
color: var(--primary-dark);
}
.wizard-add-insurance-btn.is-hidden {
display: none;
}
.wizard-pill {
border-radius: 999px;
border: 1px solid #cbd5e1;
padding: 0.3rem 0.7rem;
background: #f1f5f9;
font-size: 0.8rem;
cursor: pointer;
white-space: nowrap;
}
.wizard-pill.is-active {
border-color: var(--primary);
background: var(--primary-dark);
color: #ffffff;
}
.wizard-card {
border-radius: 16px;
border: 1px solid #e5e7eb;
padding: 1rem 1.1rem 1.1rem;
background: #f9fafb;
}
/* Wizard: indre sektion-"cards" for ens layout på tværs */
:where(
.wizard-subgroup,
.indbo-coverage,
.indbo-sums,
.hus-coverage,
.bil-coverage,
.bil-kasko-extras,
.camping-coverage,
.camping-kasko-extras,
.ulykke-coverage,
.mc_atv-coverage,
.fritidshus-coverage,
.fritidshus-subsection,
.mc_atv-subsection,
.camping-subsection,
.ulykke-section,
.sundhed-section
) {
border: 1px solid #e5e7eb;
background: #ffffff;
border-radius: 12px;
padding: 0.9rem 1rem;
}
/* Gør under-sektioners headers mere tydelige (multi-moduler) */
:where(.fritidshus-subsection, .mc_atv-subsection, .ulykke-section, .sundhed-section) > h4 {
margin-top: 0;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.fritidshus-subsection, .mc_atv-subsection, .ulykke-section, .sundhed-section) > h4::before {
content: "";
width: 6px;
height: 18px;
border-radius: 999px;
background: var(--primary);
flex: 0 0 auto;
}
/* Coverage-sektioner: tydelig første overskrift */
:where(
.indbo-coverage,
.indbo-sums,
.hus-coverage,
.bil-coverage,
.bil-kasko-extras,
.ulykke-coverage,
.mc_atv-coverage,
.fritidshus-coverage
) > h4:first-of-type {
margin-top: 0;
margin-bottom: 0.75rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid #e5e7eb;
}
/* Coverage-sektioner: underoverskrifter (Standarddækninger / Tilvalg) */
:where(.mc_atv-coverage, .fritidshus-coverage) > h4:not(:first-of-type) {
margin: 1rem 0 0.5rem;
}
/* Når coverage er inde i en under-sektion, giv den en svag tint for bedre hierarki */
:where(.mc_atv-subsection, .fritidshus-subsection) :where(.mc_atv-coverage, .fritidshus-coverage) {
background: #f9fafb;
}
.wizard-error {
margin-bottom: 0.8rem;
padding: 0.5rem 0.75rem;
border-radius: 8px;
background: #fee2e2;
color: #b91c1c;
font-size: 0.8rem;
}
.wizard-error.is-hidden {
display: none;
}
.wizard-placeholder {
padding: 0.7rem 0.8rem;
border-radius: 10px;
background: #e5edf8;
font-size: 0.85rem;
color: #111827;
margin-bottom: 0.9rem;
}
.wizard-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
}
.wizard-subgroup {
margin-top: 1rem;
}
.wizard-subgroup.is-locked {
opacity: 0.4;
}
/* Subgroups der kun indeholder "Bekræft & fortsæt" – ingen card-look, minimal plads */
.wizard-subgroup-actions-only {
background: transparent !important;
border: none !important;
border-radius: 0;
padding: 0.5rem 0 !important;
margin-top: 0.75rem;
}
.wizard-subgroup-actions-only .wizard-actions {
margin-top: 0.75rem !important;
margin-bottom: 0.5rem !important;
}
.product-panel.is-hidden {
display: none;
}
.indbo-coverage,
.indbo-sums,
.ulykke-coverage {
margin-top: 1.4rem;
}
.indbo-sum-block {
margin-top: 1.25rem;
padding: 1rem 1.1rem;
background: rgba(0, 0, 0, 0.03);
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.indbo-sum-block:first-of-type {
margin-top: 0.75rem;
}
.indbo-sum-block-title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 600;
color: var(--text-main, #1e293b);
}
.indbo-sum-block .wizard-step-intro {
margin-bottom: 0.75rem;
}
.indbo-coverage.is-hidden,
.indbo-sums.is-hidden,
.bil-kasko-extras.is-hidden,
.ulykke-section.is-hidden,
.ulykke-coverage.is-hidden,
.sundhed-section.is-hidden {
display: none;
}
.coverage-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
margin-bottom: 1rem;
}
/* Rejse: dækninger skal ligge 3 pr. række (desktop/tablet) */
@media (min-width: 641px) {
[data-product="rejse"] .coverage-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Fritidshus: typevalg (Sommerhus / Kolonihavehus / Helårsbolig) skal ligge på én række */
@media (min-width: 641px) {
#fritidshus-type-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
/* Typevalg har ingen info-knap; undgå \"tom\" ekstra kolonne i .coverage-item */
#fritidshus-type-grid .coverage-item {
grid-template-columns: 1fr;
}
/* Gør kun disse tre knapper lidt mindre, så teksten ikke wrap'er */
#fritidshus-type-grid .coverage-pill {
font-size: 0.78rem;
padding: 0.35rem 0.55rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* MC/ATV/Knallert: typevalg skal ligge på én række */
@media (min-width: 641px) {
#mc_atv-type-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
/* Typevalg har ingen info-knap; undgå "tom" ekstra kolonne i .coverage-item */
#mc_atv-type-grid .coverage-item {
grid-template-columns: 1fr;
}
/* Gør knapperne lidt mindre, så teksten ikke wrap'er */
#mc_atv-type-grid .coverage-pill {
font-size: 0.78rem;
padding: 0.35rem 0.55rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
}
.indbo-bike-sum-pill {
display: grid;
grid-template-columns: 1fr;
align-items: center;
column-gap: 0.6rem;
user-select: none;
}
.indbo-bike-sum-pill.is-selected {
/* ~30% smallere end 280px for bedre balance */
grid-template-columns: minmax(0, 1fr) minmax(0, 196px);
}
.indbo-bike-sum-pill > span {
min-width: 0;
white-space: nowrap;
}
/* Higher specificity than global input[type="text"] rules */
.indbo-bike-sum-pill input.indbo-bike-sum-input {
display: none;
width: 100%;
max-width: 100%;
justify-self: end;
padding: 0.2rem 0.35rem;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #111827;
/* ca. 5% mindre for at undgå cut-off af "(kr.)" */
font-size: 0.836rem;
/* Sørg for at man kan skrive/markere tekst inde i input */
user-select: text;
-webkit-user-select: text;
pointer-events: auto;
cursor: text;
}
.indbo-bike-sum-pill.is-selected input.indbo-bike-sum-input {
display: inline-block;
}
.indbo-bike-sum-pill input.indbo-bike-sum-input:disabled {
opacity: 0.6;
background: rgba(255, 255, 255, 0.7);
}
.indbo-bike-sum-pill.is-selected input.indbo-bike-sum-input {
opacity: 1;
background: #ffffff;
border-color: rgba(255, 255, 255, 0.8);
}
.indbo-bike-sum-pill input.indbo-bike-sum-input::placeholder {
/* Lidt tydeligere end før, men stadig diskret */
opacity: 0.55;
color: rgba(17, 24, 39, 0.55);
font-weight: 500;
}
@media (max-width: 640px) {
.indbo-bike-sum-pill {
grid-template-columns: 1fr;
row-gap: 0.5rem;
}
.indbo-bike-sum-pill input.indbo-bike-sum-input {
width: 100%;
max-width: 100%;
}
}
.sundhed-employer-gate {
margin-top: 1rem;
margin-bottom: 1rem;
}
.sundhed-employer-question {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #111827;
}
.sundhed-employer-message {
margin-top: 0.75rem;
padding: 0.75rem 0.95rem;
background: var(--primary-soft);
border: 1px solid color-mix(in oklch, var(--primary) 18%, transparent);
border-radius: var(--radius-md);
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-main);
}
.sundhed-employer-message.is-hidden {
display: none;
}
.coverage-item {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.5rem;
}
.coverage-item .coverage-pill {
width: 100%;
}
.coverage-info-btn {
background: var(--primary);
border: none;
border-radius: 50%;
width: 22px;
height: 22px;
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
color: #fff !important;
transition: all 0.2s ease;
flex: 0 0 auto;
font-size: 0; /* undgå glyph-jitter fra indhold */
position: relative;
}
.coverage-info-btn::before {
/* "i" som streg */
content: "";
position: absolute;
left: 50%;
top: calc(50% - 1.5px);
width: 4px;
height: 10px;
background: #fff;
border-radius: 2px;
transform: translateX(-50%);
}
.coverage-info-btn::after {
/* "i" som prik */
content: "";
position: absolute;
left: 50%;
top: calc(50% - 8.5px);
width: 5px;
height: 5px;
background: #fff;
border-radius: 999px;
transform: translateX(-50%);
}
.coverage-info-btn:hover {
background: var(--primary-dark);
transform: scale(1.08);
}
.coverage-info-btn svg {
display: none;
}
.coverage-info-btn svg circle {
fill: var(--primary) !important;
stroke: none !important;
}
.coverage-info-btn svg text {
fill: #fff !important;
stroke: none !important;
font-size: 14px !important;
font-weight: 900 !important;
}
.coverage-info {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 2000;
box-shadow: var(--shadow-elev);
padding: 0.85rem 1rem;
background: var(--primary-soft);
border: 1px solid color-mix(in oklch, var(--primary) 18%, transparent);
border-radius: var(--radius-md);
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-main);
max-width: min(520px, 92vw);
word-wrap: break-word;
}
.coverage-info p {
margin: 0 0 0.6rem;
}
.coverage-info p:last-child {
margin-bottom: 0;
}
.coverage-info[aria-hidden="true"] {
display: none !important;
}
.coverage-info[aria-hidden="false"] {
display: block !important;
animation: slideDown 0.2s ease-out;
}
.coverage-pill {
border-radius: 999px;
border: 1px solid #cbd5e1;
padding: 0.4rem 0.7rem;
background: #e5edf8;
font-size: 0.82rem;
cursor: pointer;
text-align: left;
}
.ulykke-men-pill {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
user-select: none;
}
.ulykke-men-input {
width: 64px;
min-width: 56px;
padding: 0.2rem 0.35rem;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #111827;
font-size: 0.82rem;
}
.ulykke-men-input:disabled {
opacity: 0.6;
background: rgba(255, 255, 255, 0.7);
}
.ulykke-men-pill.is-selected .ulykke-men-input {
opacity: 1;
background: #ffffff;
color: #111827;
border-color: rgba(255, 255, 255, 0.8);
}
.coverage-pill.is-selected {
border-color: var(--primary);
background: var(--primary-dark);
color: #ffffff;
}
/* Lovpligtig Ansvar skal altid være valgt og kan ikke deaktiveres - kun for bil panel */
[data-product="bil"] .coverage-pill[data-coverage="ansvar"] {
cursor: not-allowed;
pointer-events: none;
border-color: var(--primary) !important;
background: var(--primary-dark) !important;
color: #ffffff !important;
opacity: 1 !important;
}
[data-product="bil"] .coverage-pill[data-coverage="ansvar"]:hover {
opacity: 1 !important;
border-color: var(--primary) !important;
background: var(--primary-dark) !important;
color: #ffffff !important;
}
/* Sikre at is-selected klassen altid er aktiv for ansvar - kun for bil panel */
[data-product="bil"] .coverage-pill[data-coverage="ansvar"].is-selected,
[data-product="bil"] .coverage-pill[data-coverage="ansvar"]:not(.is-selected) {
border-color: var(--primary) !important;
background: var(--primary-dark) !important;
color: #ffffff !important;
}
.indbo-collections-wrapper input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
input[type="file"] {
padding: 0.4rem 0.5rem;
background: #fff;
}
.indbo-single-wrapper input[type="text"] {
margin-top: 0.4rem;
}
.indbo-collections-wrapper input.is-hidden,
.indbo-single-wrapper input.is-hidden {
display: none;
}
.wizard-birthdates-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
margin-top: 1rem;
}
.wizard-birthdates {
flex-direction: column;
}
.wizard-birthdates-group {
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem;
margin-bottom: 1rem;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
/* Kat/Hund: mere spacing efter Fødselsdato og Navn så det matcher Køn og Steriliseret/kastreret */
#dyr-details-section .form-field:has(#dyr-birthdate),
#dyr-details-section .form-field:has(#dyr-name) {
margin-bottom: 1.25rem;
}
/* Field-level validation styling */
.form-field.has-field-error {
position: relative;
}
.wizard-actions.has-field-error {
position: relative;
}
/* Fallback: hvis vi sætter fejl på andre wrappers (fx pill/gate) */
.has-field-error {
position: relative;
}
input.is-field-error,
textarea.is-field-error,
select.is-field-error {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16) !important;
}
button.btn.is-field-error {
outline: 2px solid #ef4444;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.field-error-tooltip {
position: absolute;
left: 0;
top: calc(100% + 6px);
z-index: 60;
display: inline-flex;
align-items: center;
max-width: 100%;
background: #ef4444;
color: #ffffff;
font-size: 12px;
font-weight: 600;
padding: 6px 10px;
border-radius: 10px;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
white-space: nowrap;
}
.field-error-tooltip::before {
content: "";
position: absolute;
top: -6px;
left: 14px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ef4444;
}
.form-field.has-dawa {
position: relative;
}
.dawa-autocomplete-list {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 50;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 12px;
box-shadow: 0 14px 32px rgba(17, 24, 39, 0.14);
overflow: hidden;
}
.dawa-autocomplete-item {
width: 100%;
text-align: left;
padding: 0.6rem 0.7rem;
background: transparent;
border: none;
cursor: pointer;
font: inherit;
font-size: 0.9rem;
color: #111827;
}
.dawa-autocomplete-item:hover,
.dawa-autocomplete-item:focus {
outline: none;
background: #f3f4f6;
}
.dawa-autocomplete-item + .dawa-autocomplete-item {
border-top: 1px solid #eef2f7;
}
.form-field label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text-main);
}
.wizard-field-status {
margin: 0.25rem 0 0;
font-size: 0.8rem;
color: var(--text-muted);
}
.wizard-field-status.is-error {
color: #b91c1c;
}
.bil-lookup-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
}
.bil-lookup-field {
flex: 1 1 12rem;
min-width: 0;
}
.bil-lookup-btn {
flex: 0 0 auto;
white-space: nowrap;
padding: 0.7rem 1.15rem;
}
.bil-vehicle-summary {
margin-top: 1.25rem;
padding: 1rem 1.1rem;
border-radius: var(--radius-md);
border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-subtle));
background: var(--bg-alt);
}
.bil-vehicle-summary__title {
margin: 0 0 0.85rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
}
.bil-vehicle-summary__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem 1.25rem;
margin: 0;
}
.bil-vehicle-summary__item {
margin: 0;
min-width: 0;
}
.bil-vehicle-summary__item dt {
margin: 0 0 0.2rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-muted);
}
.bil-vehicle-summary__item dd {
margin: 0;
font-size: 0.92rem;
line-height: 1.4;
color: var(--text-main);
word-break: break-word;
}
.bil-details-step {
margin-top: 1.25rem;
}
.bil-details-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
.bil-vehicle-summary__grid,
.bil-details-grid {
grid-template-columns: 1fr;
}
.bil-lookup-btn {
width: 100%;
}
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea,
select,
input[type="file"] {
font-family: inherit;
font-size: 0.94rem;
padding: 0.7rem 0.8rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: var(--bg);
color: var(--text-main);
transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
display: block;
width: 100%;
}
input::placeholder,
textarea::placeholder {
color: color-mix(in oklch, var(--text-muted) 70%, transparent);
}
/* Make selects match input styling (custom chevron) */
select {
cursor: pointer;
line-height: 1.2;
padding-right: 2.2rem;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 14px;
background-image: url("data:image/svg+xml;utf8,");
}
/* Rejseområde: vis placeholder-tekst i lav opacity */
.wizard-card select:invalid {
color: #9ca3af;
}
/* Remove number input spin buttons (match text input look) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/* Ulykke: lille procent-input inde i "Varigt mén" pill */
.ulykke-men-pill .ulykke-men-input {
width: 28px;
min-width: 28px;
max-width: 28px;
padding: 0.1rem 0.2rem;
border-radius: 8px;
display: inline-block;
background: #ffffff;
flex: 0 0 auto;
}
.ulykke-men-pill span {
white-space: nowrap;
}
input[type="file"] {
padding: 0.4rem 0.5rem;
background: #fff;
}
textarea {
resize: vertical;
min-height: 70px;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary);
background: var(--bg-alt);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}
.phone-input-wrap {
position: relative;
display: block;
width: 100%;
min-width: 0;
}
.phone-input-prefix {
position: absolute;
left: 0.8rem;
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
color: var(--text-main);
font-size: 0.94rem;
line-height: 1.2;
}
.phone-input-wrap > input[type="tel"] {
width: 100%;
padding-left: 2.85rem;
}
input:disabled,
textarea:disabled,
select:disabled {
cursor: not-allowed;
opacity: 0.7;
}
.input-readonly {
background: rgba(243, 244, 246, 0.9);
}
.required-asterisk {
color: var(--primary);
}
.checkbox {
align-items: flex-start;
font-size: 0.8rem;
color: var(--text-muted);
}
.checkbox input[type="checkbox"] {
margin-top: 0.1rem;
}
.form-disclaimer {
margin: 0;
display: block;
width: 100%;
font-size: 0.75rem;
color: var(--text-muted);
}
.site-footer {
border-top: 1px solid #e5e7eb;
background: #f9fafb;
padding: 1.2rem 0;
}
.footer-inner {
justify-content: space-between;
gap: 1.5rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.footer-small {
font-size: 0.72rem;
margin-top: 0.3rem;
}
.footer-legal {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
font-size: 0.72rem;
line-height: 1.55;
color: var(--text-muted);
max-width: 52rem;
}
.footer-legal-details > summary {
cursor: pointer;
list-style: none;
font-weight: 700;
color: inherit;
display: inline-flex;
align-items: center;
gap: 0.4rem;
user-select: none;
}
.footer-legal-details > summary::-webkit-details-marker {
display: none;
}
.footer-legal-details > summary::after {
content: "";
width: 0.35rem;
height: 0.35rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.15s ease;
opacity: 0.7;
flex-shrink: 0;
}
.footer-legal-details[open] > summary::after {
transform: rotate(-135deg);
translate: 0 0.12rem;
}
.footer-legal-body {
margin-top: 0.65rem;
}
.footer-legal-body p {
margin: 0 0 0.65rem;
}
.footer-legal-body p:last-child {
margin-bottom: 0;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
margin: 0.5rem 0 0;
}
.footer-links a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.footer-links a:hover {
text-decoration: underline;
}
/* Legal pages */
.legal-page .legal-main {
max-width: 44rem;
padding: 2rem 1rem 3rem;
}
.legal-article h1 {
font-size: 1.75rem;
margin: 0 0 0.5rem;
}
.legal-meta {
font-size: 0.85rem;
color: var(--text-muted);
margin: 0 0 1.25rem;
}
.legal-disclaimer {
background: oklch(0.97 0.02 85);
border: 1px solid oklch(0.88 0.04 85);
border-radius: var(--radius-md);
padding: 0.85rem 1rem;
font-size: 0.85rem;
margin-bottom: 1.25rem;
}
.legal-lead {
font-size: 1rem;
line-height: 1.65;
margin: 0 0 1.5rem;
padding: 1rem 1.1rem;
background: oklch(0.97 0.01 250);
border-radius: var(--radius-md);
border-left: 3px solid var(--primary);
}
.legal-purpose-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0.75rem 0 1rem;
}
.legal-purpose {
padding: 0.85rem 1rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: var(--radius-md);
}
.legal-purpose h3 {
font-size: 0.95rem;
margin: 0 0 0.4rem;
}
.legal-purpose p {
margin: 0 0 0.5rem;
}
.legal-purpose p:last-child {
margin-bottom: 0;
}
.legal-purpose-for-you {
font-size: 0.88rem;
color: var(--text-muted);
}
.legal-right-list {
list-style: none;
padding-left: 0;
margin: 0.5rem 0 1rem;
}
.legal-right-list li {
margin-bottom: 0.85rem;
padding-left: 0;
}
.legal-right-list li strong {
display: block;
margin-bottom: 0.15rem;
}
.legal-article h2 {
font-size: 1.1rem;
margin: 1.75rem 0 0.65rem;
}
.legal-article p,
.legal-article li {
font-size: 0.92rem;
line-height: 1.6;
}
.legal-article ul,
.legal-article ol {
padding-left: 1.25rem;
margin: 0.5rem 0 1rem;
}
.legal-item-list {
list-style: disc;
padding-left: 1.25rem;
margin: 0.5rem 0 1rem;
}
.legal-item-list li {
margin-bottom: 0.65rem;
}
.legal-item-list li:last-child {
margin-bottom: 0;
}
.legal-note {
font-size: 0.85rem;
color: var(--text-muted);
margin: 0.5rem 0 1rem;
}
.legal-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
margin: 0.75rem 0 1rem;
}
.legal-table th,
.legal-table td {
border: 1px solid #e5e7eb;
padding: 0.5rem 0.65rem;
text-align: left;
vertical-align: top;
}
.legal-table th {
background: #f3f4f6;
font-weight: 600;
}
.legal-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid #e5e7eb;
}
.legal-nav a {
color: var(--primary);
font-weight: 500;
text-decoration: none;
}
.legal-nav a:hover {
text-decoration: underline;
}
/* Cookie banner */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: #fff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
padding: 1rem 1.25rem;
}
.cookie-banner.is-hidden {
display: none;
}
.cookie-banner-inner {
max-width: 960px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.cookie-banner-text {
flex: 1 1 280px;
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
.cookie-banner-text a {
color: var(--primary);
}
.cookie-banner-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.cookie-banner-actions .btn {
font-size: 0.85rem;
padding: 0.5rem 1rem;
}
.btn-cookie-ghost {
background: var(--bg-alt);
border: 1px solid var(--border-subtle);
color: var(--text-muted);
}
.btn-cookie-ghost:hover {
background: var(--bg-tint);
border-color: color-mix(in oklch, var(--primary) 15%, var(--border-subtle));
}
@media (max-width: 900px) {
.hero-inner {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
column-gap: 0;
row-gap: 1.1rem;
}
.hero-inner > .hero-card {
grid-column: 1;
grid-row: 1;
}
/* Små skærme: skjul "Vidste du?" — desktop uændret */
.facts-card {
display: none;
}
.hero-text {
grid-column: 1;
grid-row: 2;
align-self: auto;
}
/* Uden facts-card: undgå tom første række + ekstra row-gap */
.hero-inner:has(> .facts-card) {
grid-template-rows: auto auto;
}
.hero-inner:has(> .facts-card) > .hero-text {
grid-row: 1;
}
.hero-inner > .hero-note {
grid-column: 1;
grid-row: 3;
white-space: normal;
margin-top: 0;
}
.hero-inner:has(> .facts-card) > .hero-note {
grid-row: 2;
}
.hero-cta-btn {
margin-top: 0;
align-self: center;
text-align: center;
}
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trust-grid {
grid-template-columns: minmax(0, 1fr);
}
.trust-heading,
.trust-copy,
.trust-aside {
grid-column: 1;
grid-row: auto;
}
.cta-inner {
grid-template-columns: minmax(0, 1fr);
row-gap: 1.1rem;
}
.main-nav {
display: none;
}
}
@media (max-width: 640px) {
.hero {
padding-top: 2.4rem;
}
.hero-card {
padding: 1.4rem 1.2rem;
}
.steps {
grid-template-columns: minmax(0, 1fr);
}
.cta-form {
padding: 1.1rem 1rem;
}
.choice-grid {
grid-template-columns: minmax(0, 1fr);
}
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wizard-grid {
grid-template-columns: minmax(0, 1fr);
}
.coverage-grid {
grid-template-columns: minmax(0, 1fr);
}
.form-row {
grid-template-columns: minmax(0, 1fr);
}
.header-inner {
padding-inline: 0.2rem;
}
.footer-inner {
flex-direction: column;
align-items: flex-start;
}
}
.coming-soon-section {
padding: 4rem 0 5rem;
}
.coming-soon-content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.coming-soon-icon {
display: flex;
justify-content: center;
margin: 0 0 1.5rem;
}
.coming-soon-content h1 {
font-size: clamp(1.9rem, 4vw, 2.6rem);
font-weight: 800;
color: var(--text-main);
margin: 0 0 1rem;
}
.coming-soon-subtitle {
font-size: 1.15rem;
font-weight: 600;
color: var(--text-main);
margin: 0 0 1rem;
}
.coming-soon-text {
font-size: 1rem;
line-height: 1.65;
color: var(--text-muted);
margin: 0 auto 1rem;
max-width: 640px;
}
.coming-soon-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin: 2.5rem 0 0;
}
.feature-item {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 0.6rem 1.1rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-main);
}
.feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
}
@media (max-width: 768px) {
.coming-soon-section {
padding: 2.5rem 0 3.5rem;
}
.coming-soon-features {
flex-direction: column;
align-items: center;
}
}
.coming-soon-contact {
font-size: 0.95rem;
color: var(--text-main);
margin: 0 0 2rem;
}
.coming-soon-contact a {
color: var(--primary);
font-weight: 700;
text-decoration: none;
}
.coming-soon-contact a:hover {
text-decoration: underline;
}
.coming-soon-steps {
margin: 2.5rem 0;
padding-top: 2rem;
border-top: 1px solid var(--border-subtle);
}
.coming-soon-steps h2 {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-main);
margin: 0 0 1.5rem;
}
.coming-soon-steps .steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
max-width: 900px;
margin: 0 auto;
}
.coming-soon-steps .step {
background: rgba(255, 255, 255, 0.96);
border-radius: 16px;
padding: 1.1rem 1rem 1.2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.coming-soon-steps .step:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.coming-soon-steps .step-number {
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--primary-dark);
color: white;
font-weight: 700;
font-size: 0.85rem;
margin-right: 0.75rem;
flex-shrink: 0;
}
.coming-soon-steps .step h3 {
margin: 0 0 0.3rem;
font-size: 1rem;
font-weight: 700;
color: var(--text-main);
display: inline-block;
}
.coming-soon-steps .step p {
margin: 0.5rem 0 0;
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
}
@media (max-width: 768px) {
.coming-soon-steps .steps {
grid-template-columns: minmax(0, 1fr);
}
.coming-soon-steps h2 {
font-size: 1.15rem;
}
}
/* Facts Card Styling */
.facts-card {
padding: 2rem 1.8rem;
position: relative;
z-index: 1; /* Sikre at kildehenvisningen kan overlappe indholdet under */
}
.facts-card h2 {
font-size: 1.4rem;
margin: 0 0 1.5rem;
color: var(--text-main);
}
.fact-item {
margin-bottom: 1.5rem;
}
.fact-item:last-child {
margin-bottom: 0;
}
.fact-stat {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
font-weight: 600;
letter-spacing: -0.018em;
color: var(--text-main);
margin: 0 0 0.55rem;
line-height: 1.2;
font-variation-settings: "opsz" 18;
}
.fact-desc {
margin-right: 0.5rem;
font-size: 0.85rem;
color: var(--text-muted);
margin: 0;
}
@media (max-width: 768px) {
.facts-card {
padding: 1.5rem 1.3rem;
}
/* Behold eyebrow-label-stilen også på mobil */
.facts-card h2 {
font-size: 0.7rem;
margin-bottom: 1rem;
}
.fact-item {
margin-bottom: 1.2rem;
}
.fact-stat {
font-size: 1.05rem;
}
.fact-desc {
margin-right: 0.5rem;
font-size: 0.83rem;
}
.facts-slideshow {
height: 340px;
}
.facts-slideshow-container {
height: 260px;
}
}
/* Facts Slideshow Styling - Updated */
.facts-slideshow {
position: relative;
display: flex;
flex-direction: column;
height: 320px;
overflow: visible; /* Tillad overlappende indhold */
}
/* Fallback klasse for browsere uden :has() support */
.facts-card.source-open .facts-slideshow-container {
overflow: visible;
}
.facts-slideshow-container {
padding-top: 0.5rem;
padding-bottom: 0.75rem;
padding-right: 4px; /* plads til info-knap ved hover */
box-sizing: border-box;
position: relative;
z-index: 2; /* over controls, så åben kilde ikke overlappes af pile/dots */
flex: 1;
height: 240px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Tillad overflow når kildehenvisning er åben, så den kan overlappe indholdet under */
.facts-card:has(.fact-source[aria-hidden="false"]) .facts-slideshow-container {
overflow: visible;
}
.facts-slideshow-container .fact-slide {
display: none !important;
animation: fadeIn 0.4s ease-in-out;
}
.facts-slideshow-container .fact-slide.active {
display: block !important;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fact-content {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
min-height: 40px;
position: relative;
z-index: 1;
padding-top: 0;
padding-bottom: 0.5rem;
box-sizing: border-box;
overflow: visible;
}
.fact-desc-row {
display: flex;
align-items: flex-end;
gap: 0.5rem;
margin-top: auto;
margin-bottom: 0.15rem;
}
.fact-stat {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-main);
margin: 0 0 0.6rem 0;
line-height: 1.4;
}
.fact-desc-row .fact-desc {
flex: 1;
min-width: 0;
margin: 0;
}
.fact-desc {
font-size: 0.85rem;
color: var(--text-muted);
margin: 0;
}
.fact-info-btn {
z-index: 25;
position: relative;
flex-shrink: 0;
align-self: flex-end;
background: var(--primary);
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
color: #fff !important;
transition: background 0.16s ease, transform 0.16s ease;
margin: 0 2px 0.5rem 0;
transform: translateY(-4px);
font-size: 0; /* undgå glyph-jitter fra indhold */
}
.fact-info-btn::before {
/* "i" som streg */
content: "";
position: absolute;
left: 50%;
top: calc(50% - 2px);
width: 4px;
height: 11px;
background: #fff;
border-radius: 2px;
transform: translateX(-50%);
}
.fact-info-btn::after {
/* "i" som prik */
content: "";
position: absolute;
left: 50%;
top: calc(50% - 9px);
width: 5px;
height: 5px;
background: #fff;
border-radius: 999px;
transform: translateX(-50%);
}
.fact-info-btn:hover,
.fact-info-btn:focus-visible {
background: var(--primary-dark);
transform: translateY(-4px) scale(1.1);
}
.fact-info-btn svg {
display: none;
}
.fact-info-btn svg circle {
fill: var(--primary) !important;
stroke: none !important;
}
.fact-info-btn svg text {
fill: #fff !important;
stroke: none !important;
font-size: 14px !important;
font-weight: 900 !important;
}
.fact-source {
position: absolute;
top: calc(100% + 8px); /* Gap mellem content og source */
left: 0;
right: 0;
z-index: 1000; /* Meget høj z-index for at overlappe indholdet under faktaboksen */
box-shadow: var(--shadow-elev);
margin-top: 0.5rem;
padding: 0.75rem 0.85rem;
background: var(--primary-soft);
border: 1px solid color-mix(in oklch, var(--primary) 18%, transparent);
border-radius: var(--radius-md);
font-size: 0.75rem;
line-height: 1.5;
color: var(--text-main);
display: none !important;
pointer-events: auto; /* Sikre at links kan klikkes */
max-width: 100%; /* Sikre at den ikke går ud over faktaboksen */
word-wrap: break-word; /* Tillad ordbrydning for lange tekster */
/* Sikre at kildehenvisningen kan overlappe indholdet under faktaboksen */
margin-bottom: 0;
}
.fact-source[aria-hidden="false"] {
display: block !important;
animation: slideDown 0.3s ease-out;
}
/* Sikre at fact-source forbliver synlig når man hover over den */
.fact-source[aria-hidden="false"]:hover {
display: block !important;
}
/* Sikre at fact-content hover også holder infoboksen åben */
.fact-content:hover .fact-source[aria-hidden="false"] {
display: block !important;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
max-height: 500px; /* Øget max-height for at tillade længere tekster */
transform: translateY(0);
}
}
.fact-source-text {
margin: 0;
color: var(--text-muted);
}
.fact-source-text a {
color: var(--primary);
text-decoration: underline;
}
.fact-source-text a:hover {
color: var(--primary-dark);
}
/* Slideshow-controls: ghost / minimal — ikke fyldte cirkler. Den oprindelige
regel havde samme color som baggrund, så pilene var faktisk usynlige. */
.facts-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-sm);
width: 28px;
height: 28px;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
color: var(--text-muted);
padding: 0;
}
.facts-nav-btn:hover:not(:disabled) {
background: var(--primary-soft);
color: var(--primary-dark);
}
.facts-nav-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.facts-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.facts-slideshow-controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between; /* pile yderst, dots i midten via space-between+order */
gap: 0.5rem;
margin-top: auto;
flex-shrink: 0;
border-top: 1px solid var(--border-subtle);
padding-top: 1rem;
position: relative;
z-index: 1; /* under åben .fact-source — undgå at pile/dots ligger ovenpå kildeboksen */
}
.facts-nav-btn svg {
width: 16px;
height: 16px;
}
.facts-dots {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.4rem;
flex: 1;
}
/* Dots som tynde streger, ikke prikker — mindre "Instagram-stories" */
.facts-dot {
width: 18px;
height: 2px;
border-radius: 1px;
border: none;
background: var(--border-subtle);
cursor: pointer;
transition: background 0.15s ease, width 0.2s ease;
padding: 0;
}
.facts-dot.active {
background: var(--primary);
width: 28px;
height: 2px;
}
.facts-dot:hover {
background: var(--text-muted);
}
/* Skadehistorik (før opsummering) */
.section-claims {
background: var(--bg-tint);
}
.claims-section-inner {
max-width: 640px;
margin: 0 auto;
}
.claims-info-box {
background: color-mix(in oklch, var(--primary) 8%, #fff);
border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-subtle));
border-radius: var(--radius-md);
padding: 1rem 1.15rem;
margin: 0 0 1.5rem;
text-align: center;
}
.claims-info-box p {
margin: 0;
font-size: 0.92rem;
line-height: 1.55;
color: var(--text-muted);
}
.claims-grid {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin: 0 auto 1.25rem;
}
.claims-card {
background: rgba(255, 255, 255, 0.98);
border: 1px solid color-mix(in oklch, var(--primary) 12%, var(--border-subtle));
border-radius: var(--radius-md);
padding: 1.1rem 1.25rem;
text-align: center;
box-shadow: var(--shadow-soft);
}
.claims-card__label {
margin: 0 0 0.75rem;
font-size: 1rem;
font-weight: 700;
color: var(--text-main);
}
.claims-card__picker {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 8rem;
min-height: 3rem;
padding: 0.5rem 1.25rem;
font-size: 1.35rem;
font-weight: 700;
color: var(--primary);
background: var(--bg-alt);
border: 2px dashed color-mix(in oklch, var(--primary) 28%, var(--border-subtle));
border-radius: 10px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.claims-card__picker:hover,
.claims-card__picker:focus-visible {
border-color: var(--primary);
background: color-mix(in oklch, var(--primary) 6%, #fff);
outline: none;
}
.claims-card__picker.is-empty {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-muted);
}
.claims-card__hint {
margin: 0.5rem 0 0;
font-size: 0.8rem;
color: var(--text-muted);
}
.claims-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-top: 1.5rem;
}
.claims-error {
text-align: center;
color: #b45309;
font-size: 0.9rem;
margin: 0 0 0.75rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Forsikringspræmie + Forsikringstagere (efter skadehistorik) */
.section-praemie,
.section-forsikringstagere {
background: var(--bg-tint);
}
.flow-step-inner {
max-width: 640px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.flow-step-inner > .section-header,
.flow-step-inner > .praemie-field-wrap,
.flow-step-inner > .forsikringstagere-list,
.flow-step-inner > .forsikringstagere-add-wrap,
.flow-step-inner > .flow-step-error,
.flow-step-inner > .flow-step-actions {
width: 100%;
}
.flow-step-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-top: 1.5rem;
}
.flow-step-error {
text-align: center;
color: #b45309;
font-size: 0.9rem;
margin: 0 0 0.75rem;
}
.praemie-field-wrap {
margin: 0 auto 1rem;
display: flex;
justify-content: center;
}
.praemie-input-row {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
}
.praemie-input {
width: 10rem;
max-width: 100%;
padding: 0.75rem 1rem;
font-size: 1.25rem;
font-weight: 600;
text-align: center;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: #fff;
}
.praemie-suffix {
font-size: 0.95rem;
color: var(--text-muted);
white-space: nowrap;
}
.forsikringstagere-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin: 0 0 1rem;
}
.forsikringstager-row {
display: grid;
grid-template-columns: 1fr minmax(8.5rem, 9.5rem) auto;
gap: 0.65rem;
align-items: start;
background: rgba(255, 255, 255, 0.98);
border: 1px solid color-mix(in oklch, var(--primary) 12%, var(--border-subtle));
border-radius: var(--radius-md);
padding: 1rem;
box-shadow: var(--shadow-soft);
}
.forsikringstager-row.is-primary .forsikringstager-remove {
visibility: hidden;
pointer-events: none;
}
.forsikringstager-field label {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 0.35rem;
}
.forsikringstager-field input {
width: 100%;
padding: 0.6rem 0.75rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
font-size: 0.95rem;
}
.forsikringstager-field input.is-invalid {
border-color: #b45309;
}
.forsikringstager-remove {
align-self: center;
margin-top: 1.1rem;
width: 2rem;
height: 2rem;
border: none;
border-radius: 50%;
background: var(--bg-alt);
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.forsikringstager-remove:hover,
.forsikringstager-remove:focus-visible {
background: color-mix(in oklch, #b45309 12%, #fff);
color: #b45309;
outline: none;
}
.forsikringstagere-add-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
margin: 0.25rem auto 1rem;
}
.forsikringstagere-add-text {
font-size: 0.95rem;
color: var(--text-muted);
}
.forsikringstagere-add-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
padding: 0;
border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-subtle));
border-radius: 50%;
background: #fff;
color: var(--primary);
font-size: 1.35rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.forsikringstagere-add-icon-btn:hover,
.forsikringstagere-add-icon-btn:focus-visible {
border-color: var(--primary);
background: color-mix(in oklch, var(--primary) 6%, #fff);
outline: none;
}
.summary-tagere-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.summary-tagere-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 1rem;
padding: 0.65rem 0.85rem;
background: var(--bg-alt);
border-radius: var(--radius-sm);
}
.summary-tagere-name {
font-weight: 600;
}
.summary-tagere-birth {
color: var(--text-muted);
font-size: 0.92rem;
}
@media (max-width: 560px) {
.forsikringstager-row {
grid-template-columns: 1fr auto;
grid-template-areas:
"name remove"
"birth birth";
}
.forsikringstager-field--name {
grid-area: name;
}
.forsikringstager-field--birth {
grid-area: birth;
}
.forsikringstager-remove {
grid-area: remove;
margin-top: 1.45rem;
}
}
.claims-error.is-hidden {
display: none;
}
.claims-picker-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(15, 23, 42, 0.45);
}
.claims-picker-overlay.is-hidden {
display: none;
}
.claims-picker-modal {
width: 100%;
max-width: 360px;
background: #fff;
border-radius: 16px;
padding: 1.35rem 1.25rem 1.15rem;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
.claims-picker-title {
margin: 0 0 0.35rem;
font-size: 1.15rem;
text-align: center;
}
.claims-picker-subtitle {
margin: 0 0 1rem;
font-size: 0.88rem;
color: var(--text-muted);
text-align: center;
}
.claims-picker-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.claims-picker-option {
min-height: 2.75rem;
font-size: 1.05rem;
font-weight: 700;
border: 1px solid var(--border-subtle);
border-radius: 10px;
background: var(--bg-alt);
color: var(--text-main);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.claims-picker-option:hover,
.claims-picker-option:focus-visible {
border-color: var(--primary);
background: color-mix(in oklch, var(--primary) 10%, #fff);
color: var(--primary);
outline: none;
}
.claims-picker-close {
width: 100%;
}
/* Summary Section Styling */
.section-summary {
background: var(--bg-tint);
}
.summary-section-inner.is-upload-layout {
max-width: 640px;
}
.summary-card {
background: rgba(255, 255, 255, 0.98);
border-radius: 20px;
padding: 2rem 1.8rem;
border: 1px solid rgba(209, 213, 219, 0.9);
box-shadow: var(--shadow-soft);
max-width: min(1120px, 100%);
margin: 0 auto;
}
.summary-card.is-upload-summary {
max-width: 100%;
padding: 1.35rem 1.2rem 1.5rem;
}
.summary-card.is-upload-summary .summary-item {
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.summary-card.is-upload-summary .summary-actions {
margin-top: 1.25rem;
}
.summary-item {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-subtle);
}
.summary-item:last-of-type {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.summary-item h3 {
margin: 0 0 0.75rem;
font-size: 1rem;
font-weight: 700;
color: var(--text-main);
}
.summary-item p {
margin: 0;
color: var(--text-muted);
font-size: 0.9rem;
}
.summary-actions {
margin-top: 2rem;
text-align: center;
}
/* Opsummering: upload-rækker + tast-selv accordion */
.summary-lead {
margin: 0 0 1rem;
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
}
.summary-file-row {
margin: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.summary-file-name {
flex: 1 1 auto;
min-width: 0;
word-break: break-word;
}
.summary-file-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid var(--border-subtle);
border-radius: 50%;
background: #fff;
color: var(--primary);
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
}
.summary-file-view-btn:hover,
.summary-file-view-btn:focus-visible {
border-color: var(--primary);
background: color-mix(in oklch, var(--primary) 6%, #fff);
outline: none;
}
.summary-file-view-btn svg {
width: 1rem;
height: 1rem;
}
.summary-file-check {
color: var(--accent);
font-weight: 700;
flex-shrink: 0;
}
.summary-accordion {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.summary-accordion-item {
border: 1px solid color-mix(in oklch, var(--primary) 12%, var(--border-subtle));
border-radius: var(--radius-md);
background: var(--bg-alt);
overflow: hidden;
box-shadow: 0 1px 0 oklch(0.22 0.015 260 / 0.04);
}
.summary-accordion-summary {
list-style: none;
cursor: pointer;
padding: 1rem 1.1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-weight: 600;
color: var(--text-main);
background: linear-gradient(
180deg,
oklch(0.99 0.004 260) 0%,
color-mix(in oklch, var(--primary-soft) 55%, var(--bg-alt)) 100%
);
}
.summary-accordion-summary:hover {
background: color-mix(in oklch, var(--primary-soft) 40%, var(--bg-alt));
}
.summary-accordion-summary::-webkit-details-marker {
display: none;
}
.summary-accordion-summary::marker {
display: none;
}
.summary-accordion-summary-main {
display: flex;
align-items: center;
gap: 0.65rem;
flex: 1;
min-width: 0;
}
.summary-accordion-summary-main .summary-accordion-title {
flex: 1;
min-width: 0;
}
.summary-accordion-title {
font-family: var(--font-display);
font-size: 1.05rem;
letter-spacing: -0.02em;
}
.summary-edit-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
padding: 0;
border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border-subtle));
border-radius: var(--radius-md);
background: color-mix(in oklch, var(--primary-soft) 55%, white);
color: var(--primary-dark);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.summary-edit-btn:hover {
background: color-mix(in oklch, var(--primary-soft) 80%, white);
border-color: color-mix(in oklch, var(--primary) 35%, transparent);
}
.summary-edit-btn:focus-visible {
outline: 2px solid color-mix(in oklch, var(--primary) 55%, transparent);
outline-offset: 2px;
}
.summary-edit-icon {
display: block;
}
.summary-product-inner {
display: flex;
flex-direction: column;
gap: 1rem;
}
.summary-product-section {
margin: 0;
padding: 0 0 0.85rem;
border-bottom: 1px solid var(--border-subtle);
}
.summary-product-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
.summary-product-section-title {
margin: 0 0 0.55rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.summary-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
gap: 0.55rem 1rem;
}
.summary-stat {
background: color-mix(in oklch, var(--bg-alt) 88%, white);
border: 1px solid color-mix(in oklch, var(--primary) 8%, var(--border-subtle));
border-radius: var(--radius-md);
padding: 0.55rem 0.65rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
min-height: 3.25rem;
}
.summary-stat-label {
font-size: 0.68rem;
font-weight: 600;
color: var(--text-muted);
line-height: 1.25;
}
.summary-stat-value {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-main);
line-height: 1.3;
word-break: break-word;
}
/* Ulykke: én kolonne pr. voksen/barn — felter stables lodret */
.summary-person-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem 1.25rem;
align-items: start;
}
.summary-person-column {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.summary-person-column-title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
padding-bottom: 0.15rem;
border-bottom: 1px solid color-mix(in oklch, var(--border-subtle) 90%, transparent);
}
.summary-person-column-stats {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.summary-stack-rows {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.summary-stack-row {
display: grid;
grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
gap: 0.65rem 1rem;
align-items: baseline;
padding: 0.35rem 0;
border-bottom: 1px dashed color-mix(in oklch, var(--border-subtle) 85%, transparent);
}
.summary-stack-row:last-child {
border-bottom: none;
}
.summary-stack-label {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
}
.summary-stack-value {
font-size: 0.92rem;
font-weight: 500;
color: var(--text-main);
word-break: break-word;
}
.summary-prose-wrap {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.summary-prose-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.summary-prose-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--text-muted);
}
.summary-prose-value {
font-size: 0.88rem;
color: var(--text-main);
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.summary-chip-coverage {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 100%;
}
.summary-chip-coverage.is-unselected {
color: var(--text-muted);
background: color-mix(in oklch, var(--bg-alt) 95%, white);
border-color: color-mix(in oklch, var(--border-subtle) 90%, transparent);
font-weight: 500;
}
.summary-chip-coverage.is-selected {
font-weight: 600;
}
.summary-chip-mark {
flex-shrink: 0;
font-weight: 800;
font-size: 0.72rem;
line-height: 1;
opacity: 0.9;
}
.summary-chip-text {
min-width: 0;
}
.summary-accordion-hint {
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-sm);
background: color-mix(in oklch, var(--primary) 10%, transparent);
color: var(--primary-dark);
flex-shrink: 0;
position: relative;
transition: transform 0.2s ease, background 0.2s ease;
}
.summary-accordion-hint::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translate(-50%, -60%) rotate(45deg);
}
.summary-accordion-item[open] .summary-accordion-hint {
transform: rotate(180deg);
}
.summary-accordion-item[open] > .summary-accordion-summary {
border-bottom: 1px solid var(--border-subtle);
}
.summary-accordion-panel {
padding: 1rem 1.1rem 1.15rem;
background: oklch(0.995 0.003 260);
}
.summary-dl {
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
gap: 0.5rem 1.25rem;
font-size: 0.9rem;
line-height: 1.45;
}
.summary-dl dt {
margin: 0;
color: var(--text-muted);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.01em;
}
.summary-dl dd {
margin: 0;
color: var(--text-main);
word-break: break-word;
font-weight: 500;
}
.summary-dl dt::after {
content: none;
}
.summary-coverage-wrap {
margin-top: 0.85rem;
}
.summary-coverage-title {
margin: 0 0 0.35rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-main);
}
.summary-coverage-list {
margin: 0;
padding-left: 1.15rem;
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.45;
}
.summary-coverage-chips {
list-style: none;
margin: 0.35rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.summary-coverage-chips li {
margin: 0;
padding: 0;
}
.summary-chip {
display: inline-block;
padding: 0.28rem 0.65rem;
border-radius: var(--radius-full);
font-size: 0.78rem;
font-weight: 600;
color: var(--primary-dark);
background: color-mix(in oklch, var(--primary-soft) 90%, white);
border: 1px solid color-mix(in oklch, var(--primary) 18%, transparent);
line-height: 1.3;
}
.summary-empty,
.summary-muted {
margin: 0;
color: var(--text-muted);
font-size: 0.9rem;
}
@media (max-width: 520px) {
.summary-dl {
grid-template-columns: 1fr;
}
.summary-dl dd {
margin-top: -0.15rem;
margin-bottom: 0.35rem;
}
.summary-stats-grid {
grid-template-columns: 1fr;
}
.summary-person-columns {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.summary-stack-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}
.success-steps {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border-subtle);
}
.success-steps h4 {
font-size: 1.2rem;
margin-bottom: 1.5rem;
color: var(--text-main);
text-align: center;
}
.success-steps .steps {
max-width: 1150px;
margin: 0 auto;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.8rem;
}
.success-steps .step {
padding: 1.7rem 1.4rem 1.7rem;
min-height: 220px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.success-steps .step h3 {
font-size: 0.93rem;
line-height: 1.3;
word-spacing: 0.05em;
}
.success-steps .step p {
line-height: 1.6;
font-size: 0.82rem;
}
@media (max-width: 900px) {
.success-steps .steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.8rem;
}
.success-steps .step {
min-height: 180px;
padding: 1.4rem 1.1rem 1.4rem;
}
}
@media (max-width: 640px) {
.success-steps .steps {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
.success-steps .step {
min-height: auto;
padding: 1.3rem 1rem 1.3rem;
}
}
/* --- Camping (wizard) --- */
.camping-info-box {
margin-top: 0.5rem;
padding: 0.75rem 0.95rem;
background: var(--primary-soft);
border: 1px solid color-mix(in oklch, var(--primary) 18%, transparent);
border-radius: var(--radius-md);
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-main);
}
.zero-deductible-info {
margin-top: 0.8rem;
}
/* Fuld bredde i grid (Indbo, Hus, Camping) – som i Bilforsikring */
.wizard-grid .zero-deductible-info {
grid-column: 1 / -1;
}
.zero-deductible-warning {
padding: 0.75rem 0.95rem;
background: var(--primary-soft);
border: 1px solid color-mix(in oklch, var(--primary) 18%, transparent);
border-radius: var(--radius-md);
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-main);
}
.zero-deductible-warning p {
margin: 0 0 0.5rem 0;
font-weight: 600;
}
.zero-deductible-warning ul {
margin: 0;
padding-left: 1.2rem;
}
.zero-deductible-warning li {
margin-bottom: 0.3rem;
}
.zero-deductible-warning li:last-child {
margin-bottom: 0;
}
.zero-deductible-info.is-hidden {
display: none;
}
.recommended-badge-inline {
display: inline-block;
background: var(--accent);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: 8px;
margin-right: 0.5rem;
vertical-align: middle;
letter-spacing: 0.02em;
line-height: 1.2;
}
/* Yes/No buttons for zero deductible */
.yes-no-buttons {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.yes-no-button {
flex: 1;
min-width: 120px;
padding: 0.75rem 1.25rem;
border: 2px solid var(--border-subtle);
background: var(--bg-alt);
color: var(--text-main);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
}
.yes-no-button:hover {
border-color: var(--primary);
background: var(--primary-soft);
}
.yes-no-button.is-selected {
border-color: var(--primary);
background: var(--primary);
color: #fff;
}
.yes-no-button.is-selected:hover {
background: var(--primary-dark);
}
.yes-no-button.is-selected .recommended-badge-inline {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
.yes-no-button span {
display: inline-block;
}
.camping-coverage.is-hidden,
.camping-kasko-extras.is-hidden {
display: none;
}
/* Camping: typevalg skal ligge på én række */
@media (min-width: 641px) {
#camping-type-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
/* Typevalg har ingen info-knap; undgå "tom" ekstra kolonne i .coverage-item */
#camping-type-grid .coverage-item {
grid-template-columns: 1fr;
}
/* Gør knapperne lidt mindre, så teksten ikke wrap'er */
#camping-type-grid .coverage-pill {
font-size: 0.78rem;
padding: 0.35rem 0.55rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Camping: under-sektion headers som fritidshus/mc_atv */
:where(.camping-subsection) > h4 {
margin-top: 0;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
:where(.camping-subsection) > h4::before {
content: "";
width: 6px;
height: 18px;
border-radius: 999px;
background: var(--primary);
flex: 0 0 auto;
}
/* Camping: tydelig første overskrift i coverage-kort */
:where(.camping-coverage, .camping-kasko-extras) > h4:first-of-type {
margin-top: 0;
margin-bottom: 0.75rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid #e5e7eb;
}
/* Camping: underoverskrifter (Standarddækninger / Tilvalg) */
:where(.camping-coverage) > h4:not(:first-of-type) {
margin: 1rem 0 0.5rem;
}
/* Camping: tint når coverage er inde i en under-sektion */
:where(.camping-subsection) :where(.camping-coverage) {
background: #f9fafb;
}
/* Autocamper: Lovpligtig Ansvar skal altid være valgt (som bil) */
[data-product="camping"] #camping-autocamper-coverage .coverage-pill[data-coverage="ansvar"] {
cursor: not-allowed;
pointer-events: none;
border-color: var(--primary) !important;
background: var(--primary-dark) !important;
color: #ffffff !important;
opacity: 1 !important;
}
[data-product="camping"] #camping-autocamper-coverage .coverage-pill[data-coverage="ansvar"]:hover {
opacity: 1 !important;
border-color: var(--primary) !important;
background: var(--primary-dark) !important;
color: #ffffff !important;
}
[data-product="camping"] #camping-autocamper-coverage .coverage-pill[data-coverage="ansvar"].is-selected,
[data-product="camping"] #camping-autocamper-coverage .coverage-pill[data-coverage="ansvar"]:not(.is-selected) {
border-color: var(--primary) !important;
background: var(--primary-dark) !important;
color: #ffffff !important;
}
/* Leder-statistik: cirkeldiagram og detailpanel */
#leder-stats-screen .leder-stats-chart-wrap {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: flex-start;
}
#leder-stats-screen .leder-stats-detail {
flex: 1;
min-width: 260px;
background: var(--surface, #f8fafc);
border-radius: 12px;
padding: 1.25rem;
border: 1px solid var(--border-light, #e2e8f0);
}
#leder-stats-screen .leder-stats-detail a {
color: var(--primary, #2746b8);
text-decoration: none;
}
#leder-stats-screen .leder-stats-detail a:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
#leder-stats-screen .leder-stats-chart-container {
flex: 0 0 100%;
}
#leder-stats-screen #leder-stats-chart {
max-width: 100%;
height: auto !important;
}
}
/* --------------------------------------------------------------------------
Forside (hjemmeside.html): diskret scroll-reveal + tryk-feedback
Kun når har .js-home-reveal (sættes synkront af script før paint).
-------------------------------------------------------------------------- */
html.js-home-reveal body.page-hjemmeside [data-home-reveal] {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.52s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.52s cubic-bezier(0.25, 1, 0.5, 1);
}
html.js-home-reveal body.page-hjemmeside [data-home-reveal].is-home-visible {
opacity: 1;
transform: none;
}
/* Let kaskade inden for synlig sektion (kun når klassen sættes samtidig) */
html.js-home-reveal body.page-hjemmeside #how-it-works .step:nth-child(1) {
transition-delay: 0ms;
}
html.js-home-reveal body.page-hjemmeside #how-it-works .step:nth-child(2) {
transition-delay: 0.05s;
}
html.js-home-reveal body.page-hjemmeside #how-it-works .step:nth-child(3) {
transition-delay: 0.1s;
}
html.js-home-reveal body.page-hjemmeside #how-it-works .step:nth-child(4) {
transition-delay: 0.15s;
}
@media (prefers-reduced-motion: reduce) {
html.js-home-reveal body.page-hjemmeside [data-home-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* --------------------------------------------------------------------------
Wizard (hjemmeside): diskret indgang – samme kurve som forsiden
-------------------------------------------------------------------------- */
@keyframes fm-manual-wizard-shell {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fm-wizard-step-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fm-wizard-panel-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body.page-hjemmeside #manual-flow.is-active .manual-wizard {
animation: fm-manual-wizard-shell 0.48s cubic-bezier(0.25, 1, 0.5, 1) both;
}
body.page-hjemmeside .wizard-step.fm-wizard-step-enter {
animation: fm-wizard-step-in 0.44s cubic-bezier(0.25, 1, 0.5, 1) both;
}
body.page-hjemmeside .product-panel.fm-wizard-panel-enter {
animation: fm-wizard-panel-in 0.38s cubic-bezier(0.25, 1, 0.5, 1) both;
}
body.page-hjemmeside .wizard-subgroup {
transition: opacity 0.34s cubic-bezier(0.25, 1, 0.5, 1);
}
body.page-hjemmeside .wizard-card {
transition: box-shadow 0.34s cubic-bezier(0.25, 1, 0.5, 1),
border-color 0.34s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
body.page-hjemmeside #manual-flow.is-active .manual-wizard,
body.page-hjemmeside .wizard-step.fm-wizard-step-enter,
body.page-hjemmeside .product-panel.fm-wizard-panel-enter {
animation: none !important;
}
body.page-hjemmeside .wizard-subgroup,
body.page-hjemmeside .wizard-card {
transition: none !important;
}
}