/*
 * kontaktlinje.css — kontaktlinja nederst på sidene (#/kontaktlinje.hash, #/skjemabar.hash, #/Tjenesteside.hash).
 * Bakgrunn: .kl-fx (tegnes av /assets/js/kontaktlinje-fx.js). Skjema: .kl-kort, vedlegg og meldingsfelt
 * (forbedres av /assets/js/kontaktskjema.js). bundle.css er renset, så .form-row o.l. finnes ikke —
 * derfor eget rutenett (.kl-tre). Nettstedet har svg{fill:currentColor}: strek-ikoner trenger fill:none.
 */

/* Bakgrunnen: DOPS-blå gradient med svakt rutenett og glød (samme språk som aktuelt-banneret) */
.kl-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(55% 90% at 14% 20%,rgba(53,155,208,.26),rgba(53,155,208,0) 70%),
    radial-gradient(45% 80% at 92% 85%,rgba(242,101,52,.18),rgba(242,101,52,0) 70%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/50px 50px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/50px 50px,
    linear-gradient(135deg,rgb(1,37,69),rgb(5,23,43) 55%,rgb(27,27,27))}
.kl-fx canvas{position:absolute;inset:0;width:100%;height:100%}
@media print{.kl-fx{display:none}}

/* Kortet (lav versjon: navn, e-post og telefon side om side) */
.kl-kort{position:relative;background:rgb(255,255,255);box-shadow:0 1rem 3rem rgba(0,0,0,.25);padding:2rem 2.25rem}
@media (min-width:992px){.kl-kort{padding:2.25rem 2.75rem}}
.kl-kort h2{margin-bottom:1rem}
.kl-tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 .75rem}
@media (max-width:767px){.kl-tre{grid-template-columns:1fr}}
.kl-kort textarea{resize:none;overflow:hidden;min-height:76px}
.kl-kort .form-control:focus{border-color:rgb(53,155,208);box-shadow:0 0 0 3px rgba(53,155,208,.18)}

/* Meldingsfeltet: glødende kant i DOPS-farger som flyter fra venstre mot høyre (glød langs kanten, ikke glorie) */
.kl-ai{position:relative;z-index:0}
.kl-ai textarea{position:relative;background:rgb(255,255,255)}
.kl-ai textarea:focus{box-shadow:none;border-color:rgba(53,155,208,.35)}
.kl-ai::before,.kl-ai::after{content:"";position:absolute;inset:-2px;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(90deg,rgb(53,155,208),rgb(140,200,245),rgb(242,101,52),rgb(255,196,110),rgb(53,155,208)) 0 0/300% 100%;
  animation:kl-ai-flyt 5s linear infinite}
.kl-ai::before{z-index:1;padding:2px;
  -webkit-mask:linear-gradient(black,black) content-box,linear-gradient(black,black);-webkit-mask-composite:xor;
  mask:linear-gradient(black,black) content-box exclude,linear-gradient(black,black)}
.kl-ai::after{z-index:-1;filter:blur(9px)}
.kl-ai:focus-within::before{opacity:1}
.kl-ai:focus-within::after{opacity:.3}
.kl-ai.skriver::after{opacity:.6}
@keyframes kl-ai-flyt{from{background-position:100% 0}to{background-position:0 0}}

/* Vedlegg: knapp, dra og slipp, lim inn — brikker for hver fil */
.kl-skjult{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.kl-slipp{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.55rem .7rem;border:1px dashed rgb(196,196,196);border-radius:3px}
.kl-legg-ved{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgb(53,155,208);background:rgb(255,255,255);color:rgb(1,37,69);font-size:.85rem;font-weight:600;padding:.35rem .8rem;border-radius:3px;cursor:pointer;transition:background-color .2s,color .2s}
.kl-legg-ved:hover,.kl-legg-ved:focus{background:rgb(53,155,208);color:rgb(255,255,255);outline:none}
.kl-legg-ved svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kl-hint{font-size:.8rem;color:rgb(108,117,125)}
.kl-hint kbd{font-size:.72rem;padding:.05rem .3rem;background:rgb(241,243,245);color:rgb(52,58,64);border:1px solid rgb(222,226,230);border-radius:3px;box-shadow:none}
@media (pointer:coarse){.kl-hint{display:none}}
.kl-filer{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.kl-filer:empty{display:none}
.kl-fil{display:flex;align-items:center;gap:.5rem;max-width:100%;padding:.25rem .3rem .25rem .25rem;border:1px solid rgb(222,226,230);border-radius:3px;background:rgb(248,249,250);font-size:.8rem;animation:kl-inn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes kl-inn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.kl-fil.ut{animation:kl-ut .2s ease-in both}
@keyframes kl-ut{to{opacity:0;transform:translateX(10px)}}
.kl-fil-bilde{width:34px;height:34px;flex:none;border-radius:2px;background:rgb(222,226,230) center/cover no-repeat}
.kl-fil-ikon{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:2px;background:rgb(1,37,69);color:rgb(255,255,255);font-size:.6rem;font-weight:700;letter-spacing:.03em}
.kl-fil-navn{max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgb(52,58,64)}
.kl-fil-str{color:rgb(108,117,125);white-space:nowrap}
.kl-fil-fjern{border:0;background:none;color:rgb(108,117,125);font-size:1.15rem;line-height:1;padding:0 .3rem;cursor:pointer}
.kl-fil-fjern:hover,.kl-fil-fjern:focus{color:rgb(204,74,21)}
.kl-feil{font-size:.8rem;color:rgb(204,74,21);margin-top:.35rem}
.kl-feil:empty{display:none}
/* Når en fil dras over kontaktlinja */
.kl-slipp-her{position:absolute;inset:.6rem;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:2px dashed rgb(53,155,208);border-radius:4px;background:rgba(255,255,255,.95);color:rgb(1,37,69);font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s}
.kl-drar .kl-slipp-her{opacity:1}
.kl-slipp-her svg{width:34px;height:34px;fill:none;stroke:rgb(53,155,208);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:kl-hopp 1s ease-in-out infinite}
@keyframes kl-hopp{50%{transform:translateY(5px)}}

/* Bunnlinja, sending og kvittering */
.kl-bunn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;margin-top:1rem}
.kl-bunn p{margin:0;flex:1 1 18rem}
/* Personvernlinja under skjemaet: lenken i samme dempede farge, bare understreket */
.kl-merk a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kl-merk a:hover,.kl-merk a:focus{color:rgb(1,37,69)}
.kl-send{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem}
.kl-send svg{width:16px;height:16px}
.kl-fram{position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(255,255,255,.85)}
.kl-send.sender .kl-fram{transition:width 1.1s cubic-bezier(.4,0,.2,1);width:100%}
@media (max-width:767px){.kl-bunn .btn{width:100%;justify-content:center}}
/* Kvitteringen fra /jquery.submitform.js (erstatter innholdet i skjemaet) */
.kl-kort .form-receipt{padding:2.5rem 0 2rem;text-align:center;font-size:1.25rem;font-weight:600;color:rgb(33,37,41);animation:kl-fram-inn .4s ease-out both}
.kl-kort .form-receipt::before{content:"";display:block;width:56px;height:56px;margin:0 auto .9rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='rgb(53,155,208)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='28' cy='28' r='24'/%3E%3Cpath d='M17 29l7 7 15-16'/%3E%3C/svg%3E") center/contain no-repeat}
.kl-kvittering{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;background:rgb(255,255,255);animation:kl-fram-inn .4s ease-out both}
@keyframes kl-fram-inn{from{opacity:0}to{opacity:1}}
.kl-kvittering svg{width:56px;height:56px;margin-bottom:.75rem;fill:none;stroke:rgb(53,155,208);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.kl-kvittering circle{stroke-dasharray:151;stroke-dashoffset:151;animation:kl-strek .6s ease-out forwards}
.kl-kvittering path{stroke-dasharray:32;stroke-dashoffset:32;animation:kl-strek .35s .5s ease-out forwards}
@keyframes kl-strek{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .kl-ai::before,.kl-ai::after,.kl-fil,.kl-fil.ut,.kl-slipp-her svg,.kl-kvittering,.kl-kort .form-receipt{animation:none}
  .kl-kvittering circle,.kl-kvittering path{animation:none;stroke-dashoffset:0}
}