element
(see class-calculator.php). The inline style is the single source of truth
so changes in PHP propagate directly without CSS conflicts. We only define
link-styling here (which can't be inlined cleanly via PHP). */
.calc .calc-terms a{
color:var(--muted, #5C6B83);
text-decoration:underline;
font-size:inherit;
}
.calc .calc-terms a:hover{ color:var(--ink-2, #243E66); }
/* Partners Lightbox (modal). Renders inside calculator but positioned fixed. */
.pk-lightbox-overlay{
position:fixed; inset:0;
background:rgba(11, 27, 61, .55);
display:none;
align-items:center; justify-content:center;
z-index:99999;
padding:20px;
animation:pk-lb-fadein .15s ease;
}
.pk-lightbox-overlay.is-open{ display:flex; }
@keyframes pk-lb-fadein{ from{ opacity:0 } to{ opacity:1 } }
.pk-lightbox{
background:#fff;
border-radius:12px;
padding:28px 28px 22px;
max-width:480px; width:100%;
max-height:80vh; overflow-y:auto;
box-shadow:0 12px 40px rgba(0,0,0,.18);
animation:pk-lb-slidein .2s ease;
}
@keyframes pk-lb-slidein{
from{ transform:translateY(12px); opacity:0 }
to{ transform:translateY(0); opacity:1 }
}
.pk-lightbox-title{
margin:0 0 10px;
font-size:20px; font-weight:600;
color:var(--ink-2, #243E66);
}
.pk-lightbox-intro{
margin:0 0 16px;
font-size:14px;
color:var(--muted, #5C6B83);
line-height:1.5;
}
.pk-lightbox-list{
margin:0 0 20px;
padding-left:22px;
color:var(--ink-2, #243E66);
font-size:14.5px; line-height:1.7;
}
.pk-lightbox-list li{ margin-bottom:2px; }
.pk-lightbox-close{
display:block; width:100%;
background:var(--ink-2, #243E66);
color:#fff; border:0;
padding:12px 20px;
border-radius:8px;
font-size:14px; font-weight:500;
cursor:pointer;
transition:background .15s ease;
}
.pk-lightbox-close:hover{ background:var(--ink, #0B1B3D); }
.pk-lightbox-close:focus-visible{ outline:2px solid var(--coral, #FF6B57); outline-offset:2px; }
/* Error */
.calc [data-pk-error]{ color:#A33D26; font-size:13px; text-align:center; padding-top:12px;}
/* Step 3 — success (legacy; bevares for fallback hvis loading-flow ikke virker) */
.calc .success{ text-align:center; padding:32px 16px;}
.calc .success-icon{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--moss,#2E7D5B); color:white; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:600;}
.calc .success-title{ font-family:var(--serif); font-size:24px; font-weight:400; letter-spacing:-.01em; margin:0 0 12px; color:var(--ink,#0B1B3D);}
.calc .success p{ color:var(--ink-2,#243E66); font-size:15px; margin-bottom:24px; line-height:1.55;}
/* ============================================================
Per-field validation (inline error + valid states)
============================================================ */
.calc .field { position: relative; margin-bottom: 18px; }
.calc .field.is-valid input[type="email"],
.calc .field.is-valid input[type="tel"]{
border-color: var(--moss, #2E7D5B);
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
padding-right: 44px;
}
.calc .field.is-invalid input[type="email"],
.calc .field.is-invalid input[type="tel"]{
border-color: #C13E2A;
background: #FEF6F4;
animation: pk-shake .25s ease-out;
}
.calc .field-error{
display: block;
margin-top: 8px;
font-size: 13px;
line-height: 1.4;
color: #C13E2A;
font-family: var(--sans);
}
.calc .field-error a{
color: var(--coral, #FF6B57);
font-weight: 600;
text-decoration: underline;
}
.calc .field-error[hidden]{ display: none; }
@keyframes pk-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
/* ============================================================
Loading-progression (step 3, erstatter success card)
============================================================ */
.calc-loading{ padding: 28px 16px 16px; text-align: center; }
.calc-loading-header{
font-family: var(--serif, "Newsreader", serif);
font-size: 22px;
font-weight: 500;
line-height: 1.25;
margin: 0 0 8px;
color: var(--ink, #0B1B3D);
}
.calc-loading-subhead{
color: var(--muted, #6B7A91);
font-size: 14px;
margin: 0 0 28px;
}
.calc-loading-steps{
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.calc-loading-step{
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: var(--linen, #F6F4F1);
border-radius: var(--radius, 6px);
font-size: 14px;
color: var(--muted, #6B7A91);
opacity: 0.55;
transition: opacity .3s ease, background .3s ease, color .3s ease;
text-align: left;
}
.calc-loading-step.is-active{
opacity: 1;
background: color-mix(in oklab, var(--coral, #FF6B57) 8%, var(--linen, #F6F4F1));
color: var(--ink, #0B1B3D);
font-weight: 500;
}
.calc-loading-step.is-done{
opacity: 1;
color: var(--ink, #0B1B3D);
}
.calc-loading-icon{
flex: 0 0 24px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--paper-2, #ECE9E2);
position: relative;
display: inline-block;
}
/* Spinner state (default for active) */
.calc-loading-step.is-active .calc-loading-icon{
background: transparent;
border: 2.5px solid var(--paper-2, #ECE9E2);
border-top-color: var(--coral, #FF6B57);
animation: pk-spin .8s linear infinite;
}
/* Check state (when done) */
.calc-loading-step.is-done .calc-loading-icon{
background: var(--moss, #2E7D5B);
border-color: var(--moss, #2E7D5B);
}
.calc-loading-step.is-done .calc-loading-icon::after{
content: '';
position: absolute;
left: 7px;
top: 3px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.calc-loading-trust{
list-style: none;
margin: 0;
padding: 16px 0 0;
border-top: 1px solid var(--line, #D8DEE8);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
font-family: var(--mono, "Inter Tight", sans-serif);
font-size: 12px;
color: var(--muted, #6B7A91);
}
.calc-loading-trust li{ white-space: nowrap; }
.calc-loading-fallback{
display: inline-block;
margin-top: 18px;
font-size: 13px;
color: var(--coral, #FF6B57);
text-decoration: underline;
font-family: var(--sans);
}
.calc-loading-fallback[hidden]{ display: none; }
@media (max-width: 480px){
.calc-loading-step{ font-size: 13px; padding: 10px 12px; }
.calc-loading-trust{ gap: 10px; font-size: 11px; }
}
/* ============================================================
* BØLGE 2 — CRO-additions:
* - Progress-dots (1 af 2 step-indicator)
* - Social-proof badge under summary
* - Submit trust-micro under CTA
* - Mobile padding-tightening on .calc card
* - Sticky "Tilbage"-knap på step 2 mobile
* ============================================================ */
/* Progress dots — subtle horizontal indicator above form. */
.calc-progress{
display:flex; align-items:center; justify-content:center; gap:8px;
margin:-8px 0 20px;
}
.calc-progress-dot{
width:8px; height:8px; border-radius:999px;
background:var(--line, #D8DEE8);
transition:background .25s ease, transform .25s ease, width .25s ease;
}
.calc-progress-dot.is-active{
background:var(--coral, #FF6B57);
width:24px; /* current step gets pill-shape for clearer "you are here" */
}
.calc-progress-dot.is-complete{
background:var(--moss, #2E7D5B);
}
/* Social proof line — small green check + statement. */
.calc-social-proof{
display:flex; align-items:center; justify-content:center;
margin:14px 0 18px;
font-family:var(--sans);
font-size:13px;
color:var(--ink-2, #243E66);
letter-spacing:.005em;
}
/* Submit trust line — micro-copy under step 2 CTA. */
.calc-submit-trust{
margin:10px 0 0;
text-align:center;
font-family:var(--mono, "Inter Tight", system-ui, sans-serif);
font-size:11px;
color:var(--muted, #6B7A91);
letter-spacing:.02em;
opacity:.85;
}
/* Mobile-specific tweaks. */
@media (max-width: 480px){
/* Tighter padding på .calc-kortet — frigør indholds-bredde på små skærme. */
.calc{ padding:20px; }
/* Header: title is now longer ("Se dine lånetilbud på 2 minutter") so badge
* needs to wrap below cleanly on small screens. align-items:center keeps
* everything in a clean visual rhythm. */
.calc-head{
flex-wrap:wrap;
align-items:center;
gap:8px;
margin-bottom:18px;
padding-bottom:16px;
}
.calc-head .title{ font-size:20px; line-height:1.15; flex:1 1 100%; }
.calc-head .badge{
font-size:9.5px;
padding:5px 9px;
letter-spacing:.08em;
line-height:1;
}
/* Progress dots: lidt mindre på smalle skærme. */
.calc-progress{ margin:-4px 0 16px; gap:6px; }
.calc-progress-dot{ width:7px; height:7px; }
.calc-progress-dot.is-active{ width:20px; }
/* Summary-box (Estimeret månedlig betaling + ÅOP) — tightere padding + ensretning
* af label/value vertical-rhythm. */
.calc .summary{
padding:14px 16px;
gap:12px;
align-items:end; /* values bottom-aligned for cleaner visual baseline */
}
.calc .summary-item .lbl{ font-size:9.5px; line-height:1.3; margin-bottom:6px; letter-spacing:.04em; text-transform:uppercase; }
.calc .summary-item .val{ font-size:20px; line-height:1.1; }
/* Social proof: skal ALTID stå på én linje på mobile.
* Reduce font + tightere letter-spacing + no-wrap så det ikke wrapper til 2 linjer. */
.calc-social-proof{
font-size:11.5px;
line-height:1.2;
margin:10px 0 14px;
white-space:nowrap;
letter-spacing:0;
}
/* Submit trust: bryd til 2 linjer hvis pladsen er trang. */
.calc-submit-trust{ font-size:10.5px; line-height:1.5; }
/* Consent label: ensure checkbox+text alignment is clean on small screens.
* Larger checkbox (28px > 24px) for easier thumb-tap. align-items:flex-start
* keeps box top-aligned with the first line of text. */
.calc label.consent{
padding:12px 14px;
gap:10px;
font-size:12.5px;
line-height:1.5;
align-items:flex-start;
}
.calc label.consent input[type="checkbox"]{
width:22px;
height:22px;
min-width:22px;
flex:0 0 22px;
margin-top:1px; /* nudge to align with first text line */
}
.calc label.consent input[type="checkbox"]:checked::after{
width:5px;
height:10px;
margin-top:-6px;
margin-left:-2.5px;
}
/* Sticky "Tilbage"-knap på step 2 — sikrer at brugeren altid har vej tilbage uden at
* scrolle. Kun på mobile fordi desktop har plads nok. */
.calc form[data-pk-step="2"] .step-back{
position:sticky; top:0; z-index:5;
margin:-20px -20px 16px; /* udvider til card-edge */
padding:12px 20px;
background:var(--paper, #fff);
border-bottom:1px solid var(--line, #D8DEE8);
}
}
/* Extra-small phones (iPhone SE / 360px) — social proof might still wrap.
* Fall back to even smaller font + still single-line. */
@media (max-width: 380px){
.calc-social-proof{ font-size:11px; letter-spacing:-.005em; }
.calc-head .title{ font-size:19px; }
.calc .summary-item .val{ font-size:18px; }
}