/* ============================================================================
   kunde-ux.css — bevegelse og tilbakemelding i kundemodulen
   ----------------------------------------------------------------------------
   Legges OVER kunde.css. Samme prinsipper som bestill.css på /priser:
   bare transform/opacity/filter animeres, det som går er raskere enn det som
   kommer, og alt slås av under prefers-reduced-motion nederst.

   Ingen inline-stiler (CSP style-src 'self'). Karakterfargene er derfor
   klasser (.sa-karakter-Apluss, -A … -F), ikke style-attributter — et style-attributt i
   innerHTML blokkeres stille av CSP-en.
   ============================================================================ */

:root {
  --sa-inn: cubic-bezier(.16, 1, .3, 1);
  --sa-myk: cubic-bezier(.2, .8, .25, 1);
  --sa-ut:  cubic-bezier(.4, 0, 1, 1);
  --sa-ring: 0 0 0 4px rgba(0, 66, 122, .16);
}

/* ---- sideinngang --------------------------------------------------------- */
.sa-sidetittel { animation: sa-opp .5s var(--sa-myk) both; }
#innhold .sa-kort { animation: sa-kort-inn .6s var(--sa-inn) both; }
#innhold .sa-kort:nth-of-type(2), #innhold nettsted-liste .sa-kort { animation-delay: .08s; }
#innhold .sa-kort:nth-of-type(3) { animation-delay: .16s; }
@keyframes sa-opp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sa-kort-inn {
  from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(4px); }
  65%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---- kort og flater ------------------------------------------------------ */
.sa-kort { border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow); }
.sa-kort-smal { max-width: 540px; }

/* ---- karakterer ---------------------------------------------------------- */
.sa-karakter { border-radius: 11px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); animation: sa-sprett .5s .2s var(--sa-inn) both; }
.sa-karakter-Apluss { background: #0A7A3D; }
.sa-karakter-A { background: #2E8B37; }
.sa-karakter-B { background: #5E9420; }
.sa-karakter-C { background: #B57E00; }
.sa-karakter-D { background: #D06F00; }
.sa-karakter-E { background: #C2461B; }
.sa-karakter-F { background: #B91C1C; }
@keyframes sa-sprett { from { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.08); } to { opacity: 1; transform: none; } }

/* ---- nettstedsrader kommer etter tur -------------------------------------
   Forsinkelsen er kappet i JS-en (--sa-rekke maks 8), ellers ville rad 20
   ventet i over et sekund. */
.sa-rad-inn {
  animation: sa-opp .45s var(--sa-myk) both;
  animation-delay: calc(var(--sa-rekke, 0) * 50ms + 120ms);
}
.sa-nettsted { border-radius: 10px; margin: 0 -10px; padding: 14px 10px; transition: background-color .18s; }
.sa-nettsted:hover { background: var(--bg-alt); }
.sa-nettsted.sa-ny { animation: sa-ny-rad 1.6s var(--sa-myk) both; }
@keyframes sa-ny-rad {
  0%   { opacity: 0; transform: translateY(-8px); background: var(--green-bg); }
  25%  { opacity: 1; transform: none; background: var(--green-bg); }
  100% { background: transparent; }
}

/* ---- merker -------------------------------------------------------------- */
.sa-merke { transition: background-color .25s, color .25s; }
.sa-merke.sa-advarsel { position: relative; padding-left: 22px; }
.sa-merke.sa-advarsel::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: currentColor; animation: sa-puls 1.8s ease-in-out infinite;
}
.sa-merke.sa-ok { position: relative; padding-left: 22px; }
.sa-merke.sa-ok::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: currentColor;
}
@keyframes sa-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---- knapper ------------------------------------------------------------- */
.sa-knapp {
  border-radius: 10px; padding: 12px 22px; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .18s, box-shadow .25s var(--sa-inn), transform .18s var(--sa-inn);
}
.sa-knapp:hover:not(:disabled) { box-shadow: 0 12px 24px -12px rgba(0,52,98,.75); transform: translateY(-1px); }
.sa-knapp:active:not(:disabled) { transform: scale(.985); box-shadow: none; }
.sa-knapp:focus-visible { outline: none; box-shadow: var(--sa-ring); }
.sa-knapp-sekundar:hover:not(:disabled) { box-shadow: 0 10px 20px -14px rgba(0,52,98,.6); }
.sa-knapp-liten { padding: 8px 15px; border-radius: 8px; }
.sa-knapp.sa-laster-knapp { color: transparent; pointer-events: none; }
.sa-knapp.sa-laster-knapp::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: sa-snurr .7s linear infinite;
}
.sa-knapp-sekundar.sa-laster-knapp::after { border-color: rgba(0,66,122,.2); border-top-color: var(--blue); }
@keyframes sa-snurr { to { transform: rotate(360deg); } }

/* ---- felt ---------------------------------------------------------------- */
.sa-legg-til input, .sa-innlogging input, .sa-kort select, .sa-kort input[type="text"] {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
  transition: border-color .18s, box-shadow .22s var(--sa-inn);
}
.sa-legg-til input:hover, .sa-innlogging input:hover, .sa-kort select:hover, .sa-kort input[type="text"]:hover { border-color: var(--field-border); }
.sa-legg-til input:focus, .sa-innlogging input:focus, .sa-kort select:focus, .sa-kort input:focus {
  outline: none; border-color: var(--blue); box-shadow: var(--sa-ring);
}
.sa-legg-til label, .sa-innlogging label { transition: color .16s; }
.sa-legg-til:focus-within label, .sa-innlogging:focus-within label { color: var(--blue); }

/* ---- meldinger ----------------------------------------------------------- */
.sa-feil[role="alert"], .sa-ok, .sa-varsel { border-radius: 10px; animation: sa-ned .3s var(--sa-myk) both; }
.sa-feil[role="alert"] { animation: sa-ned .3s var(--sa-myk) both, sa-rist .4s .05s var(--sa-myk); }
@keyframes sa-ned { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sa-rist {
  20% { transform: translateX(-5px); } 40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); } 80% { transform: translateX(1px); }
}

/* ---- laster: skjelett i stedet for tekst -------------------------------- */
.sa-laster { display: grid; gap: 10px; padding: 22px 0; color: transparent; position: relative; }
.sa-laster::before, .sa-laster::after {
  content: ""; display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-alt) 0%, #fff 50%, var(--bg-alt) 100%);
  background-size: 200% 100%; animation: sa-glimt 1.3s linear infinite;
}
.sa-laster::before { width: 55%; }
.sa-laster::after { width: 80%; }
.sa-laster-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes sa-glimt { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- toast --------------------------------------------------------------- */
.sa-toaster {
  position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}
.sa-toast {
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  background: var(--blue-900); color: #fff; border-radius: 12px; padding: 12px 16px;
  font-size: .95rem; font-weight: 500; box-shadow: 0 18px 40px -16px rgba(0,30,59,.7);
  animation: sa-toast-inn .42s var(--sa-inn) both;
}
.sa-toast svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sa-toast-ok svg { color: #7FD3A1; }
.sa-toast-feil { background: #7F1414; }
.sa-toast svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: sa-tegn .36s .15s var(--sa-myk) forwards; }
.sa-toast.sa-toast-ut { animation: sa-toast-ut .2s var(--sa-ut) both; }
@keyframes sa-toast-inn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sa-toast-ut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes sa-tegn { to { stroke-dashoffset: 0; } }

/* ---- fremdriftsstrek ----------------------------------------------------- */
.sa-fremdrift {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; pointer-events: none;
  background: linear-gradient(90deg, var(--blue) 0%, #3E8BD1 100%);
  transform-origin: left center; transform: scaleX(0); opacity: 0;
  transition: transform 1.2s var(--sa-inn), opacity .25s;
}
.sa-fremdrift.sa-gaar { transform: scaleX(.75); opacity: 1; }
.sa-fremdrift.sa-ferdig { transform: scaleX(1); opacity: 0; transition: transform .2s, opacity .35s .12s; }

/* ---- prosessvisning (bekreftelse, velkommen) -----------------------------
   Hvert trinn går fra venter → pågår (snurr) → ferdig (hake TEGNES) eller
   feil. Kunden ser hva som skjer, ikke bare at noe skjer. */
.sa-prosess { list-style: none; margin: 22px 0 6px; padding: 0; text-align: left; }
.sa-trinn {
  display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--faint);
  transition: color .3s;
}
.sa-trinn-ikon {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; position: relative;
  border: 2px solid var(--line); display: grid; place-items: center;
  transition: border-color .3s, background-color .3s, transform .35s var(--sa-inn);
}
.sa-trinn-ikon svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sa-trinn-ikon svg path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.sa-trinn.sa-pagar { color: var(--ink); font-weight: 600; }
.sa-trinn.sa-pagar .sa-trinn-ikon { border-color: rgba(0,66,122,.18); border-top-color: var(--blue); animation: sa-snurr .8s linear infinite; }
.sa-trinn.sa-gjort { color: var(--ink-soft); }
.sa-trinn.sa-gjort .sa-trinn-ikon { background: var(--green); border-color: var(--green); animation: sa-sprett .4s var(--sa-inn); }
.sa-trinn.sa-gjort .sa-trinn-ikon svg { opacity: 1; }
.sa-trinn.sa-gjort .sa-trinn-ikon svg path { animation: sa-tegn .32s .1s var(--sa-myk) forwards; }
.sa-trinn.sa-feilet { color: var(--red); font-weight: 600; }
.sa-trinn.sa-feilet .sa-trinn-ikon { background: var(--red); border-color: var(--red); }
.sa-trinn.sa-feilet .sa-trinn-ikon svg { opacity: 1; }
.sa-trinn.sa-feilet .sa-trinn-ikon svg path { stroke-dashoffset: 0; }

/* Resultatet under prosessen */
.sa-resultat { animation: sa-opp .5s var(--sa-myk) both; }
.sa-resultat .sa-knapp { margin-top: 16px; }
.sa-stort-ikon { width: 76px; height: 76px; margin: 4px auto 16px; display: block; }
.sa-stort-ikon circle { fill: var(--green); transform-origin: 38px 38px; animation: sa-sprett .5s var(--sa-inn) both; }
.sa-stort-ikon.sa-stort-venter circle { fill: var(--amber); }
.sa-stort-ikon path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: sa-tegn .45s .3s var(--sa-myk) forwards; }
.sa-sentrert { text-align: center; }

/* ---- innlogging: kvittering ---------------------------------------------- */
.sa-konvolutt { width: 104px; height: 84px; margin: 6px auto 14px; display: block; overflow: visible; }
.sa-konvolutt .k-kropp { fill: var(--blue-50); stroke: var(--blue); stroke-width: 2.5; animation: sa-sprett .55s var(--sa-inn) both; transform-origin: 52px 48px; }
.sa-konvolutt .k-klaff { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: sa-tegn .5s .3s var(--sa-myk) forwards; }

@media (max-width: 560px) {
  .sa-kort { padding: 20px 18px; border-radius: 14px; }
  .sa-nettsted { margin: 0 -6px; padding: 12px 6px; }
}

/* ---- redusert bevegelse ---------------------------------------------------
   .01ms, ikke 0: en animasjon med varighet null fyrer aldri animationend.
   Haker og meldinger skal fortsatt vises — de er innhold, ikke pynt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important;
  }
  .sa-knapp:hover:not(:disabled) { transform: none; }
  .sa-laster::before, .sa-laster::after, .sa-merke.sa-advarsel::before { animation: none !important; }
  .sa-trinn.sa-pagar .sa-trinn-ikon { animation: none !important; border-color: var(--blue); }
  .sa-fremdrift { display: none; }
}

/* ---- luft i de smale kortene (innlogging, bekreftelse, velkommen) ------- */
.sa-kort-smal h1 { margin: 0 0 8px; font-size: 1.45rem; }
.sa-kort-smal h1 + p { margin: 0 0 20px; color: var(--ink-soft); }
.sa-kort-smal .sa-meta { margin: 0 0 14px; }
.sa-kort-smal .sa-kort-ingress:empty { display: none; }
.sa-kort-smal .sa-innlogging { margin-top: 4px; }
.sa-sentrert .sa-meta { margin-left: auto; margin-right: auto; max-width: 420px; }