/* =========================================================
   Fanwave Lead Generator  |  frontend  |  v2.0.0
   Flader adskilles med baggrundsfarve, ikke kanter.
   ========================================================= */

.flg-rod,
.flg-rod *{ box-sizing:border-box; margin:0; padding:0; }

.flg-rod{
  --gul:#F5A800;
  --gul-lys:#FFC23D;
  --gul-dyb:#E8920C;
  --navy:#0D1B3E;
  --ease:cubic-bezier(.23,1,.32,1);
  /* Hoejest tilladte panel. Bliver et trin hoejere, scroller man
     inde i panelet i stedet for at kortet vokser i det uendelige.
     Kan saettes pr. formular med shortcoden: maks="560". */
  --maks:620px;
  /* --vh saettes af JavaScript, saa mobilbrowsere ikke snyder med 100vh */
  --luft:150px;

  display:block;
  width:100%;
  font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

.flg-rod[data-tema="moerk"]{
  --flade:#14171e;
  --felt:#1e222b;
  --felt-hov:#262b36;
  --tekst:#ffffff;
  --tekst-2:rgba(255,255,255,.62);
  --tekst-3:rgba(255,255,255,.4);
  --spor:rgba(255,255,255,.1);
  --valgt-tekst:#0D1B3E;
}
.flg-rod[data-tema="lys"]{
  --flade:#FFF3E2;
  --felt:#ffffff;
  --felt-hov:#fffdf9;
  --tekst:#000000;
  --tekst-2:rgba(13,27,62,.68);
  --tekst-3:rgba(13,27,62,.45);
  --spor:rgba(13,27,62,.12);
  --valgt-tekst:#0D1B3E;
}

/* ---------------------------------------------------- skinne */
.flg-skinne{ margin-bottom:clamp(16px,2vw,24px); }
.flg-bjaelke{
  position:relative;
  height:3px;
  background:var(--spor);
  border-radius:3px;
  overflow:hidden;
}
.flg-bjaelke__fyld{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--gul);
  border-radius:3px;
  transition:width .55s var(--ease);
}
.flg-skridtene{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  margin-top:14px;
}
.flg-skridt{
  display:flex; align-items:center; gap:9px;
  min-width:0;
}
.flg-skridt__prik{
  flex:none;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--felt);
  color:var(--tekst-3);
  font-family:'Clash Display','General Sans',sans-serif;
  font-weight:600; font-size:12.5px;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.flg-skridt__lbl{
  font-size:13px; font-weight:500; color:var(--tekst-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .4s var(--ease);
}
.flg-skridt.er-aktiv .flg-skridt__prik{ background:var(--gul); color:var(--valgt-tekst); }
.flg-skridt.er-aktiv .flg-skridt__lbl{ color:var(--tekst); }
.flg-skridt.er-klaret .flg-skridt__prik{ background:rgba(245,168,0,.24); color:var(--gul); }
.flg-skridt.er-klaret .flg-skridt__lbl{ color:var(--tekst-2); }

/* ---------------------------------------------------- panel */
.flg-panelplads{ position:relative; }
.flg-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  max-height:min(var(--maks), calc(var(--vh, 100vh) - var(--luft)));
  background:var(--flade);
  color:var(--tekst);
  border-radius:22px;
  padding:clamp(22px,2.6vw,36px);
  opacity:0;
  transform:translateY(10px);
  animation:flg-ind .4s var(--ease) forwards;
}
.flg-panel__titel,
.flg-panel__under,
.flg-fejl,
.flg-nav{ flex:none; }
.flg-panel.er-paa-vej-ud{
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  animation:none;
}
@keyframes flg-ind{ to{ opacity:1; transform:none; } }

.flg-panel__titel{
  font-family:'Clash Display','General Sans',sans-serif;
  font-weight:600;
  font-size:clamp(21px,2.3vw,30px);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--tekst);
}
.flg-panel__titel strong{ font-weight:600; color:var(--gul); }
.flg-panel__under{
  margin-top:8px;
  font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.5;
  color:var(--tekst-2);
  max-width:64ch;
}

.flg-fejl{
  display:none;
  margin-top:16px;
  padding:12px 16px;
  background:rgba(229,72,77,.14);
  border-radius:12px;
  font-size:13.5px; line-height:1.45;
  color:#FF8E90;
}
.flg-fejl.er-synlig{ display:block; }

/* Kun denne del scroller, saa overskrift og knapper altid er synlige. */
.flg-krop{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:var(--spor) transparent;
  margin-top:clamp(18px,2vw,24px);
  padding-right:6px;
}
.flg-krop::-webkit-scrollbar{ width:6px; }
.flg-krop::-webkit-scrollbar-track{ background:transparent; }
.flg-krop::-webkit-scrollbar-thumb{ background:var(--spor); border-radius:3px; }

/* Blod overgang i bunden, saa man kan se der er mere at scrolle til. */
.flg-panel::after{
  content:'';
  position:absolute; left:clamp(22px,2.6vw,36px); right:clamp(22px,2.6vw,36px);
  bottom:calc(clamp(22px,2.6vw,36px) + 62px);
  height:46px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(to bottom, transparent, var(--flade));
  transition:opacity .3s var(--ease);
}
.flg-panel.kan-scrolle::after{ opacity:1; }
.flg-panel.i-bunden::after{ opacity:0; }

/* sektionsoverskrift inde i et trin */
.flg-sektion{
  font-size:12.5px; font-weight:600;
  color:var(--tekst-2);
  margin-bottom:10px;
}
.flg-valg + .flg-sektion,
.flg-felter + .flg-sektion{ margin-top:clamp(18px,2vw,26px); }

/* ------------------------------------------------- valgmuligheder */
.flg-valg{ display:grid; grid-template-columns:1fr; gap:8px; }
/* auto-fit: kasserne bliver saa brede som muligt, men aldrig smallere
   end minimum. Antallet af kolonner falder af sig selv paa smalle skaerme. */
.flg-valg--to{ grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); }
.flg-valg--tre{ grid-template-columns:repeat(auto-fit, minmax(252px, 1fr)); }
.flg-valg--fire{ grid-template-columns:repeat(auto-fit, minmax(214px, 1fr)); }

.flg-mul{
  position:relative;
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:14px 15px;
  background:var(--felt);
  border:0; border-radius:14px;
  cursor:pointer; text-align:left;
  font-family:inherit;
  color:var(--tekst);
  transition:background-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.flg-mul__ik{ flex:none; display:flex; color:var(--gul); transition:color .28s var(--ease); }
.flg-mul__ik svg{ width:23px; height:23px; display:block; }
.flg-mul__tx{ min-width:0; }
.flg-mul__navn{
  display:block;
  font-family:'Clash Display','General Sans',sans-serif;
  font-weight:500; font-size:14.5px; line-height:1.22; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.flg-mul__hint{
  display:block; margin-top:2px;
  font-size:12px; line-height:1.3; color:var(--tekst-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .28s var(--ease);
}
.flg-mul.er-valgt{ background:var(--gul); color:var(--valgt-tekst); }
.flg-mul.er-valgt .flg-mul__ik{ color:var(--valgt-tekst); }
.flg-mul.er-valgt .flg-mul__hint{ color:rgba(13,27,62,.72); }

/* flueben paa flervalg */
.flg-flueben{
  margin-left:auto; flex:none;
  width:20px; height:20px; border-radius:7px;
  background:var(--spor);
  display:flex; align-items:center; justify-content:center;
  color:var(--valgt-tekst);
  transition:background-color .28s var(--ease);
}
.flg-flueben svg{ width:11px; height:11px; opacity:0; transform:scale(.6); transition:opacity .22s var(--ease), transform .22s var(--ease); }
.flg-mul.er-valgt .flg-flueben{ background:rgba(13,27,62,.22); }
.flg-mul.er-valgt .flg-flueben svg{ opacity:1; transform:none; }

/* --------------------------------------------------- felter */
.flg-felter{ display:flex; flex-direction:column; gap:12px; }
.flg-felter--rk{ margin-top:clamp(18px,2vw,26px); display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.flg-rk{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.flg-rk--fuld{ grid-template-columns:1fr; }

.flg-felt{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.flg-felt__lbl{ font-size:13px; font-weight:500; color:var(--tekst-2); }
.flg-felt__lbl em{ font-style:normal; color:var(--gul); margin-left:3px; }
.flg-felt input,
.flg-felt textarea{
  width:100%;
  padding:13px 15px;
  background:var(--felt);
  border:0; border-radius:12px;
  font-family:inherit;
  font-size:16px;               /* 16px: iOS zoomer ikke ind */
  line-height:1.35;
  color:var(--tekst);
  transition:background-color .28s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.flg-felt textarea{ resize:none; min-height:78px; }
.flg-felt input::placeholder,
.flg-felt textarea::placeholder{ color:var(--tekst-3); }
.flg-felt input:focus,
.flg-felt textarea:focus{ outline:none; background:var(--felt-hov); }
.flg-felt.er-fejl input,
.flg-felt.er-fejl textarea{ background:rgba(229,72,77,.16); }
.flg-felt__fejl{ font-size:12px; color:#FF8E90; }
.flg-felt__fejl:empty{ display:none; }

.flg-samtykke{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:14px;
  font-size:12.5px; line-height:1.45; color:var(--tekst-2);
  cursor:pointer;
}
.flg-samtykke input{ flex:none; width:17px; height:17px; margin-top:1px; accent-color:var(--gul); }

.flg-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* opsummering */
.flg-opsum{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.flg-maerkat{
  display:inline-block;
  padding:6px 12px;
  background:var(--felt);
  border-radius:100px;
  font-size:12.5px; line-height:1.3; color:var(--tekst-2);
}

/* --------------------------------------------------- navigation */
.flg-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin-top:clamp(20px,2.4vw,28px);
}
.flg-knap{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  border:0; border-radius:100px;
  font-family:'Clash Display','General Sans',sans-serif;
  font-weight:600; font-size:15px; line-height:1;
  cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.flg-knap svg{ width:16px; height:16px; flex:none; transition:transform .35s var(--ease); }
.flg-knap--fyldt{ background:var(--gul); color:#fff; }
.flg-knap--ren{ background:transparent; color:var(--tekst-2); padding-left:4px; padding-right:14px; }
.flg-knap[disabled]{ opacity:.5; cursor:default; }

.flg-spin{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:flg-snur .7s linear infinite;
}
@keyframes flg-snur{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------- kvittering */
.flg-tak{ text-align:center; padding:clamp(34px,5vw,58px) clamp(22px,2.6vw,36px); }
.flg-tak__ring{
  width:62px; height:62px; margin:0 auto 20px;
  border-radius:50%;
  background:var(--gul);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.flg-tak__ring svg{ width:28px; height:28px; }
.flg-tak__titel{
  font-family:'Clash Display','General Sans',sans-serif;
  font-weight:600; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; color:var(--tekst);
}
.flg-tak__titel strong{ font-weight:600; color:var(--gul); }
.flg-tak__tekst{ margin:12px auto 0; max-width:46ch; font-size:15px; line-height:1.6; color:var(--tekst-2); }
.flg-tak__tlf{ display:inline-block; margin-top:20px; font-weight:600; font-size:15px; color:var(--gul); text-decoration:none; }

/* --------------------------------------------------- hover */
@media (hover:hover) and (pointer:fine){
  .flg-mul:hover{ background:var(--felt-hov); }
  .flg-mul.er-valgt:hover{ background:var(--gul-lys); }
  .flg-knap--fyldt:hover{ background:var(--gul-dyb); }
  .flg-knap--fyldt:hover svg{ transform:translateX(4px); }
  .flg-knap--ren:hover{ color:var(--gul); }
  .flg-knap--ren:hover svg{ transform:translateX(-3px); }
  .flg-tak__tlf:hover{ color:var(--gul-lys); }
}
.flg-rod button:focus-visible,
.flg-rod input:focus-visible,
.flg-rod textarea:focus-visible{ outline:2px solid var(--gul); outline-offset:2px; }

/* --------------------------------------------------- responsivt */
@media (max-width:760px){
  .flg-skridt__lbl{ display:none; }
  .flg-skridtene{ justify-content:flex-start; gap:10px; }
  .flg-rk,
  .flg-felter--rk{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .flg-valg--to,
  .flg-valg--tre,
  .flg-valg--fire{ grid-template-columns:1fr; }
  .flg-panel{ border-radius:18px; }
  .flg-knap{ padding:14px 20px; font-size:14.5px; }
}

@media (prefers-reduced-motion:reduce){
  .flg-panel{ animation:none; opacity:1; transform:none; }
  .flg-rod *{ transition-duration:.01ms !important; }
  .flg-spin{ animation:none; }
}