/* =====================================================================
   PAGELOOK · PROSJEKTSKJEMA – utseende
   ---------------------------------------------------------------------
   Popupen som åpnes av "Start et prosjekt"-knappene.
   Markup: inc/prosjektskjema.php · Logikk: assets/js/prosjektskjema.js
   Seksjoner:
     1. Ramme (bakgrunn, boks, åpne/lukke-animasjon)
     2. Topp (steg-teller, lukkeknapp, fremdriftslinje)
     3. Steg-paneler og overganger
     4. Valgkort (steg 1 og "cards"-spørsmål)
     5. Tekstfelt med flytende etiketter (steg 4)
     6. Chips (ett/flere valg)
     7. Samtykke + bunnlinje (Tilbake / Neste)
     8. Mobil (≤ 640px: skjemaet glir opp fra bunnen)
     9. v2: spørsmål per valg
   Farger er hardkodet til Pagelook-paletten (samme verdier som
   Elementor-variablene --navy, --royal, --azure, --ice, --line).
   ===================================================================== */
/* 1. Ramme */
#pm{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
#pm.open{display:flex}
.pm-bg{position:absolute;inset:0;background:rgba(7,15,43,.62);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s}
#pm.open .pm-bg{opacity:1}
.pm-box{position:relative;width:min(760px,100%);max-height:min(860px,calc(100vh - 40px));display:flex;flex-direction:column;border-radius:32px;background:#fff;box-shadow:0 60px 120px rgba(7,15,43,.45);overflow:hidden;transform:translateY(24px) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.1,1),opacity .35s}
#pm.open .pm-box{transform:none;opacity:1}

/* 2. Topp */
.pm-top{padding:22px 28px 0;display:flex;flex-direction:column;gap:14px}
.pm-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.pm-step{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1C55A6}
.pm-x{width:44px;height:44px;border-radius:50%;background:#EEF4FC;display:grid;place-items:center;color:#0F1E52;border:0;cursor:pointer;transition:background .3s,transform .4s}
.pm-x:hover{background:#DCE8F8;transform:rotate(90deg)}
.pm-bar{height:6px;border-radius:6px;background:#EEF4FC;overflow:hidden}
.pm-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(135deg,#1E3A8E,#1C55A6 55%,#1B6BB5);transition:width .5s cubic-bezier(.2,.7,.1,1)}

/* 3. Steg-paneler */
.pm-body{position:relative;flex:1;overflow-y:auto;padding:26px 28px 8px}
.pm-panel{display:none;flex-direction:column;gap:20px}
.pm-panel.on{display:flex;animation:pmIn .5s cubic-bezier(.2,.7,.1,1)}
.pm-panel.back{animation-name:pmBack}
@keyframes pmIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes pmBack{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
#pm h2{margin:0;font-size:clamp(26px,3.4vw,38px);line-height:1.04;letter-spacing:-.04em;color:#0A1433}
#pm h2 em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:#1C55A6}
#pm p.pm-sub{margin:-8px 0 0;color:#3A4870;font-size:16px}

/* 4. Valgkort */
.pm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pm-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pm-card{position:relative;display:block;cursor:pointer}
.pm-card input{position:absolute;opacity:0;pointer-events:none}
.pm-card > span{display:flex;align-items:center;gap:14px;min-height:64px;height:100%;padding:14px 16px;border-radius:18px;border:1.5px solid #DCE6F5;background:#fff;font-weight:600;font-size:15px;color:#0F1E52;line-height:1.3;transition:all .25s}
.pm-card > span small{display:block;font-weight:500;font-size:13px;color:#5B6890;margin-top:2px}
.pm-card .ico{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:#EEF4FC;display:grid;place-items:center;color:#1E3A8E;transition:all .25s}
.pm-card:hover > span{border-color:#1C55A6}
.pm-card input:checked + span{border-color:#1E3A8E;background:#F4F8FE;box-shadow:0 0 0 3px rgba(30,58,142,.12)}
.pm-card input:checked + span .ico{background:#1E3A8E;color:#fff}
.pm-card input:focus-visible + span{outline:2px solid #1B6BB5;outline-offset:3px}
.pm-card .chk{margin-left:auto;flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1.5px solid #B8C4DC;display:grid;place-items:center;transition:all .25s}
.pm-card input[type=checkbox] + span .chk{border-radius:7px}
.pm-card input:checked + span .chk{background:#1E3A8E;border-color:#1E3A8E}
.pm-card input:checked + span .chk::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}

/* 5. Tekstfelt med flytende etiketter */
.pm-label{font-size:14px;font-weight:700;color:#0A1433;margin-bottom:-8px}
.pm-label small{font-weight:500;color:#5B6890}
.pm-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pm-f{position:relative}
.pm-f.full{grid-column:1/-1}
.pm-f input,.pm-f textarea{width:100%;border-radius:16px;border:1.5px solid #DCE6F5;background:#fff;padding:24px 16px 8px;font:inherit;font-size:16px;color:#0A1433;transition:border-color .3s,box-shadow .3s}
.pm-f input{height:60px}
.pm-f textarea{min-height:110px;resize:vertical}
.pm-f input:focus,.pm-f textarea:focus{outline:none;border-color:#1C55A6;box-shadow:0 0 0 5px rgba(28,85,166,.12)}
.pm-f label{position:absolute;left:16px;top:19px;font-size:15px;color:#5B6890;pointer-events:none;transition:all .25s}
.pm-f input:focus + label,.pm-f input:not(:placeholder-shown) + label,.pm-f textarea:focus + label,.pm-f textarea:not(:placeholder-shown) + label{top:7px;font-size:12px;color:#1C55A6;font-weight:600}
.pm-f.err input{border-color:#B42318}

/* 6. Chips */
.pm-chips{display:flex;flex-wrap:wrap;gap:8px}
.pm-chip{position:relative;cursor:pointer}
.pm-chip input{position:absolute;opacity:0;pointer-events:none}
.pm-chip span{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:999px;border:1.5px solid #DCE6F5;font-size:14px;font-weight:600;color:#0F1E52;transition:all .25s}
.pm-chip input:checked + span{background:#1E3A8E;border-color:#1E3A8E;color:#fff}
.pm-chip input:focus-visible + span{outline:2px solid #1B6BB5;outline-offset:3px}

/* 7. Samtykke + bunnlinje */
.pm-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#3A4870}
.pm-consent input{width:18px;height:18px;margin-top:2px;accent-color:#1E3A8E;flex-shrink:0}
.pm-consent a{color:#1C55A6;font-weight:600}
.pm-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 28px 22px;border-top:1px solid #EEF1F7;background:#fff}
.pm-back{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:999px;border:0;background:none;font:inherit;font-weight:600;color:#3A4870;cursor:pointer}
.pm-back:hover{color:#0A1433}
.pm-back[hidden]{display:inline-flex;visibility:hidden}
.pm-next{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 8px 0 24px;border-radius:999px;border:0;background:#1E3A8E;color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;transition:background .3s,opacity .3s}
.pm-next:hover{background:#1B6BB5}
.pm-next[disabled]{opacity:.4;cursor:not-allowed}
.pm-next .ic{width:38px;height:38px;border-radius:50%;background:#fff;color:#1E3A8E;display:grid;place-items:center}
.pm-foot small{font-size:13px;color:#5B6890}

/* 8. Mobil */
@media (max-width:767px){
  #pm{padding:0;align-items:flex-end}
  .pm-box{border-radius:28px 28px 0 0;max-height:94vh}
  .pm-grid,.pm-grid.three,.pm-fields{grid-template-columns:1fr}
  .pm-top,.pm-body{padding-left:20px;padding-right:20px}
  .pm-foot{padding:14px 20px 18px}
  .pm-foot small{display:none}
}
@media (prefers-reduced-motion:reduce){.pm-box,.pm-bg,.pm-panel.on,.pm-bar i{transition:none!important;animation:none!important}}

/* 9. v2 – spørsmål per valg */
.pm-branch[hidden]{display:none!important}
.pm-branch{display:flex;flex-direction:column;gap:22px}
.pm-q{display:flex;flex-direction:column;gap:12px;border:0;margin:0;padding:0;min-width:0}
.pm-q[hidden]{display:none}
.pm-q legend{padding:0;margin:0 0 12px;font-size:15px;font-weight:700;color:#0A1433}
.pm-q legend small{font-weight:500;color:#5B6890}
.pm-grid.three .pm-card > span{min-height:58px;padding:12px 14px;font-size:14.5px}
.pm-chip span{height:auto;min-height:42px;padding:9px 16px;line-height:1.25}
.pm-f.req-url label::after{content:" *"}
.pm-note{margin:0;font-size:13.5px;color:#5B6890}
.pm-note b{color:#1E3A8E}
.pm-sending .pm-next{pointer-events:none;opacity:.6}

/* 10. Sikring mot tema/Elementor-standarder */
#pm, #pm *{box-sizing:border-box}
#pm{font-family:var(--font-sans,'Schibsted Grotesk'),system-ui,sans-serif;line-height:1.5}
#pm fieldset{min-width:0}
#pm button{font:inherit}
#pm svg{display:block}

/* 11. Mobilfikser (30.09.2026)
   - Boksen måles mot synlig skjermhøyde (100% av #pm), ikke 100vh. På iPhone
     er 100vh høyere enn det synlige området, så toppen med lukkeknappen
     havnet bak adresselinjen.
   - Topp og bunnlinje krymper aldri; bare midtdelen scroller.
   - Neste/Send-knappen bruker ikke lenger gjennomsiktighet (opacity) for
     «ikke klar»-tilstanden, bare en lysere farge. Safari på iPhone kunne
     vise et gammelt bilde av knappen («Neste» oppå «Send») mens den
     tonet, fordi teksten og bredden byttes samtidig.
   - Plass til hjem-linjen nederst på iPhone. */
.pm-box{max-height:min(860px,100%)}
.pm-top,.pm-foot{flex-shrink:0}
.pm-next{white-space:nowrap;transition:background-color .3s}
.pm-next[disabled]{opacity:1;background:#A9B7DA}
.pm-next[disabled] .ic{color:#A9B7DA}
.pm-sending .pm-next{opacity:1;background:#5E78B8}
@media (max-width:767px){
  #pm{height:100%;height:100dvh}
  .pm-box{max-height:calc(100% - 12px)}
  .pm-foot{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:380px){
  .pm-back{padding:0 8px}
  .pm-next{padding-left:18px;font-size:15px}
}