/* ============================================================================
   Wizard-design 2026-07-09: "premium svensk hantverksbyrå".
   System: varm kalkvit yta, djupblå brand (CSS-variabler ur firma-config),
   falurött som liten hantverksaccent, Sora (self-hostad variabel-woff2) som
   enda typsnitt, penseldrags-bild som signatur under riktpriset.
   Mobil först (390 px bas), en brytpunkt uppåt.
   ========================================================================== */

@font-face {
  font-family: "Sora";
  src: url("fonts/sora-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Brand ur firma-config (index.html sätter --farg-primar/--farg-accent). */
  --pri: var(--farg-primar, #1d6fb8);
  --pri-dark: var(--farg-accent, #144e85);

  /* Varm hantverkspalett */
  --kalk: #faf6ef;        /* bakgrund: kalkvit, varm */
  --kort: #ffffff;
  --sot: #29231c;         /* brödtext: varm nästan-svart */
  --mull: #857a6a;        /* sekundär text: varm gråbeige */
  --linje: #e8dfd0;       /* varma linjer */
  --falu: #8c2f1f;        /* faluröd accent: eyebrows, små detaljer */
  --ok: #1b6e3d;
  --fel: #9a1c1c;

  --radius-kort: 20px;
  --radius-knapp: 13px;
  --skugga: 0 1px 2px rgba(62, 46, 24, .05), 0 14px 34px -14px rgba(62, 46, 24, .22);
  --skugga-lyft: 0 2px 4px rgba(62, 46, 24, .06), 0 20px 40px -14px rgba(62, 46, 24, .28);
  --font: "Sora", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
.hide { display: none !important; }

html, body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font);
  background: var(--kalk);
  color: var(--sot);
  -webkit-text-size-adjust: 100%;
  font-size: 15px;
  line-height: 1.55;
}

button, [role="button"], .val-knapp, .steg-knapp {
  touch-action: manipulation;
  font-family: var(--font);
}
input, select { font-family: var(--font); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================================
   Hero-header: falurött hus (FLUX, lokal bild) med mörk scrim åt vänster.
   ========================================================================== */
header.topp {
  position: relative;
  background:
    linear-gradient(78deg,
      rgba(24, 16, 9, .82) 0%,
      rgba(24, 16, 9, .62) 42%,
      rgba(24, 16, 9, .18) 78%,
      rgba(24, 16, 9, .05) 100%),
    url("hero.jpg") 36% 30% / cover no-repeat,
    var(--pri-dark, #144e85);
  color: #fff;
  padding: 42px 20px 34px;
}
.topp-inner {
  max-width: 620px;
  margin: 0 auto;
}
.topp-eyebrow {
  display: block;            /* span (inte p: e2e-testet kräver EN p i headern) */
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f3c9b8;            /* ljus terrakotta mot mörk scrim: hantverksaccenten */
}
header.topp h1 {
  margin: 0;
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.topp-slogan {
  margin: 10px 0 0;
  font-size: 14.5px;
  font-weight: 400;
  max-width: 40ch;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.trust-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.trust-rad span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(3px);
  border-radius: 999px;
  padding: 5px 13px 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
}
.trust-rad span::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}

/* ============================================================================
   App-yta + progress
   ========================================================================== */
#app {
  max-width: 620px;
  margin: 0 auto;
  padding: 22px 16px 44px;
  width: 100%;
}

.progress-wrap { margin: 2px 2px 18px; }
.progress-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--falu);
  margin-bottom: 8px;
}
.progress-bar {
  height: 5px;
  background: var(--linje);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--pri, #1d6fb8), var(--pri-dark, #144e85));
  transition: width .25s ease;
}

/* ============================================================================
   Kort
   ========================================================================== */
.card {
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: var(--radius-kort);
  padding: 26px 22px;
  margin-bottom: 16px;
  width: 100%;
  box-shadow: var(--skugga);
}

.steg-titel {
  font-size: 22px;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.steg-hjalp {
  font-size: 13.5px;
  color: var(--mull);
  margin: 0 0 18px;
  line-height: 1.55;
}

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--sot);
}
/* Lead-gatens kontaktsteg (2026-08-11) använder email/tel: utan dem här föll
   de fälten tillbaka på webbläsarens defaultstil och blev synligt smalare än
   namn-/adressfälten i samma formulär. */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--linje);
  border-radius: 11px;
  font-size: 15px;
  background: #fff;
  color: var(--sot);
  max-width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus {
  outline: none;
  border-color: var(--pri, #1d6fb8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri, #1d6fb8) 16%, transparent);
}
input::placeholder { color: #b9ae9d; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ============================================================================
   Valknappar: taktila kort. Stora startval har ikon + tvåradig text.
   ========================================================================== */
.valgrupp {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 8px 0 4px;
}
.val-knapp {
  flex: 1 1 auto;
  min-width: 120px;
  background: #fff;
  border: 1.5px solid var(--linje);
  color: var(--sot);
  padding: 13px 12px;
  border-radius: var(--radius-knapp);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  /* OBS: ingen transition på color/background/border - vald-byten ska SNAPPA.
     En 160 ms color-fade lämnar halvbleka "spöktexter" på knappar som just
     avvalts (syntes i screenshot-granskningen iter 1). */
  transition: box-shadow .16s ease, transform .12s ease;
}
.val-knapp:hover {
  border-color: var(--pri, #1d6fb8);
  box-shadow: var(--skugga);
  transform: translateY(-1px);
}
.val-knapp:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri, #1d6fb8) 30%, transparent);
}
.val-knapp.vald {
  border-color: var(--pri-dark, #144e85);
  background: linear-gradient(160deg, var(--pri, #1d6fb8), var(--pri-dark, #144e85));
  color: #fff;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--pri-dark, #144e85) 65%, transparent);
}

/* Stora startval (ikonkort) */
.val-knapp.stor {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  font-size: 16px;
  text-align: left;
}
.val-ikon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pri, #1d6fb8) 10%, #ffffff);
  color: var(--pri-dark, #144e85);
}
.val-ikon svg { width: 24px; height: 24px; }
.val-knapp.stor:hover .val-ikon { background: color-mix(in srgb, var(--pri, #1d6fb8) 16%, #ffffff); }
.val-knapp.stor.vald .val-ikon { background: rgba(255, 255, 255, .18); color: #fff; }
.val-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.val-text strong { font-weight: 700; letter-spacing: -0.01em; }
.val-text small { font-weight: 400; font-size: 12.5px; color: var(--mull); }
.val-knapp.stor.vald .val-text small { color: rgba(255, 255, 255, .8); }
.val-knapp.stor::after {
  content: "";
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  opacity: .45;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>') center / contain no-repeat;
  transition: transform .16s ease, opacity .16s ease;
}
.val-knapp.stor:hover::after { transform: translateX(3px); opacity: .8; }

/* Checkbox-rader */
.kryssrad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--linje);
  font-size: 14.5px;
}
.kryssrad:last-child { border-bottom: none; }
.kryssrad input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--pri, #1d6fb8);
}

/* Dynamiska grupp-kort (fönster/dörrar/rum) */
.grupp-kort {
  border: 1.5px solid var(--linje);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fdfbf7;
  position: relative;
}
.grupp-kort .grupp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.grupp-kort h3 {
  font-size: 13px;
  margin: 0;
  color: var(--pri-dark, #144e85);
  font-weight: 700;
  letter-spacing: .02em;
}
.ta-bort {
  background: none;
  border: none;
  color: var(--fel);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.lagg-till {
  width: 100%;
  background: color-mix(in srgb, var(--pri, #1d6fb8) 7%, #ffffff);
  color: var(--pri-dark, #144e85);
  border: 1.5px dashed color-mix(in srgb, var(--pri, #1d6fb8) 55%, transparent);
  padding: 12px;
  border-radius: var(--radius-knapp);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin: 6px 0 14px;
  transition: background-color .16s ease;
}
.lagg-till:hover { background: color-mix(in srgb, var(--pri, #1d6fb8) 13%, #ffffff); }

/* ============================================================================
   Navigering
   ========================================================================== */
.nav-rad {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.btn-tillbaka {
  flex: 0 0 auto;
  background: transparent;
  border: 1.5px solid var(--linje);
  color: var(--mull);
  padding: 14px 18px;
  border-radius: var(--radius-knapp);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.btn-tillbaka:hover { border-color: var(--mull); color: var(--sot); }
.btn-next {
  flex: 1 1 auto;
  background: linear-gradient(160deg, var(--pri, #1d6fb8), var(--pri-dark, #144e85));
  color: #fff;
  border: none;
  padding: 15px 16px;
  border-radius: var(--radius-knapp);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--pri-dark, #144e85) 70%, transparent);
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-next:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--pri-dark, #144e85) 75%, transparent);
}
.btn-next:focus-visible, .btn-tillbaka:focus-visible, .btn-skicka:focus-visible, .btn-restart:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri, #1d6fb8) 35%, transparent);
}
.btn-next:disabled { opacity: .5; cursor: not-allowed; }

.fel-ruta {
  background: #fdefec;
  border: 1px solid #eec4bb;
  color: var(--fel);
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 13px;
  margin: 8px 0;
}

.muted { color: var(--mull); font-size: 12.5px; }

/* ============================================================================
   Resultat: prisuppenbarelsen. Signatur: penseldraget under beloppet.
   ========================================================================== */
.spann-rad {
  display: flex;
  justify-content: center;
  margin: 18px 0 10px;
}
.spann-kort {
  border: none;
  padding: 6px 10px 0;
  text-align: center;
  background: transparent;
}
.spann-kort .etikett {
  font-size: 11px;
  color: var(--falu);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.spann-kort .belopp {
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
}
.spann-kort.rekommenderat { flex: 0 1 380px; }
.spann-kort.rekommenderat .etikett { display: none; }  /* h2 "Ditt riktpris" säger redan detta */
.spann-kort.rekommenderat .belopp {
  font-size: clamp(44px, 11vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--pri-dark, #144e85);
  white-space: nowrap;
  margin-top: 10px;
}
/* Penseldraget: lokal FLUX-bild (blått drag på vitt) som organisk underline. */
.spann-kort.rekommenderat .belopp::after {
  content: "";
  display: block;
  height: 22px;
  margin: 8px auto 0;
  max-width: 260px;
  background: url("penseldrag.jpg") center / 100% 300% no-repeat;
}

table.nedbrytning {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 10px 0;
}
table.nedbrytning td { padding: 8px 2px; border-bottom: 1px solid var(--linje); }
table.nedbrytning td.r { text-align: right; }
table.nedbrytning tr.rot td { color: var(--ok); }
table.nedbrytning tr.summa td {
  font-weight: 700;
  font-size: 16px;
  border-top: 2px solid var(--sot);
  border-bottom: none;
}

.info-rad {
  background: #f6f1e7;
  border-left: 3px solid var(--pri, #1d6fb8);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  margin: 10px 0;
  color: color-mix(in srgb, var(--sot) 86%, var(--mull));
}

.infokort {
  background: #fdf6e4;
  border: 1px solid #ecd9a5;
  border-radius: 14px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.55;
  margin: 8px 0 16px;
}

/* Lead-formulär */
.lead-form {
  border-top: 1px solid var(--linje);
  margin-top: 22px;
  padding-top: 18px;
}
.lead-form h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.hp-falt {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.btn-skicka {
  width: 100%;
  background: linear-gradient(160deg, #237a47, var(--ok));
  color: #fff;
  border: none;
  padding: 15px 16px;
  border-radius: var(--radius-knapp);
  font-size: 15.5px;
  font-weight: 700;
  margin-top: 12px;
  cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(27, 110, 61, .6);
  transition: transform .12s ease, filter .16s ease;
}
.btn-skicka:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.btn-skicka:disabled { background: #9fb8ab; cursor: not-allowed; box-shadow: none; }

.lead-status { font-size: 13px; margin-top: 8px; }
.lead-status:empty { margin-top: 0; }
.lead-status.ok { color: var(--ok); font-weight: 700; }
.lead-status.fel { color: var(--fel); }

.btn-restart {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--linje);
  color: var(--mull);
  padding: 13px;
  border-radius: var(--radius-knapp);
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.btn-restart:hover { border-color: var(--mull); color: var(--sot); }

/* Granskningsläge (?detalj=1) - internt, varm ton i stället för larmrött. */
.detalj-vy {
  margin-top: 22px;
  padding: 16px;
  border: 1.5px dashed var(--falu);
  border-radius: 14px;
  text-align: left;
  font-size: 12.5px;
  overflow-x: auto;
  background: #fdf9f2;
}
.detalj-vy h4 {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--falu);
}
.detalj-vy table { border-collapse: collapse; width: 100%; }
.detalj-vy td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
.detalj-vy ol { margin: 6px 0; padding-left: 20px; }

/* ============================================================================
   Footer
   ========================================================================== */
footer.botten {
  max-width: 620px;
  margin: 0 auto;
  padding: 6px 16px 40px;
  text-align: center;
}
footer.botten p {
  margin: 0;
  font-size: 14px;
  color: var(--mull);
}
footer.botten a {
  color: var(--pri-dark, #144e85);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--pri, #1d6fb8) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color .16s ease;
}
footer.botten a:hover, footer.botten a:focus { border-color: var(--pri, #1d6fb8); }

/* ============================================================================
   Desktop
   ========================================================================== */
@media (min-width: 680px) {
  header.topp {
    padding: 64px 24px 52px;
    background-position: 0 0, right 30%, 0 0;  /* scrim, hero-bild, fallback */
  }
  .topp-slogan { font-size: 15.5px; }
  #app { padding: 30px 16px 56px; }
  .card { padding: 32px 34px; }
  .val-knapp { min-width: 150px; }
}

/* ---------------------------------------------------------------------------
   Adressförslag (2026-08-12). Kunden väljer en verifierad adress i stället för
   att skriva fritext som geokodas i blindo.
   --------------------------------------------------------------------------- */
.adress-forslag-box { margin: 0.35rem 0 0.2rem; }
.adress-forslag-rad {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0.6rem 0.7rem; margin-bottom: 0.3rem; font: inherit; font-size: 0.95rem;
  background: #fff; color: var(--text, #1a1a1a);
  border: 1px solid var(--kant, #d6d3cd); border-radius: 8px;
  /* iOS: utan detta ger tap 300 ms fördröjning (känd fälla) */
  touch-action: manipulation;
}
.adress-forslag-rad:hover, .adress-forslag-rad:focus-visible {
  border-color: var(--primar, #1d6fb8); background: #f4f8fc; outline: none;
}
.adress-oexakt { color: #8a6d1f; font-size: 0.85em; }
.adress-vald { margin: 0.35rem 0 0.2rem; font-size: 0.92rem; color: #1a7f37; font-weight: 600; }
.adress-info { margin: 0.35rem 0 0.2rem; font-size: 0.92rem; color: #8a6d1f; line-height: 1.45; }

/* Resenotis: syns för kunden i stället för att resan tyst blir 0 kr. */
.resa-notis {
  margin-top: 0.6rem; padding: 0.6rem 0.7rem; font-size: 0.9rem; line-height: 1.5;
  background: #fdf6e3; border-left: 3px solid #d9a406; border-radius: 4px; color: #6b5310;
}

/* Beställning (2026-08-12) */
.bestall-rad { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--kant, #e5e2dc); }
.btn-bestall { width: 100%; font-size: 1.05rem; padding: 0.9rem 1rem; touch-action: manipulation; }
.bestall-rad .muted { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.5; }
.kryss-rad.atagande { align-items: flex-start; gap: 0.6rem; margin-top: 1rem; }
.kryss-rad.atagande span { font-size: 0.88rem; line-height: 1.5; }
.bestall-ordernr { font-size: 1.3rem; font-weight: 700; color: var(--primar, #1d6fb8); margin: 0.4rem 0 0.8rem; }
.valgrupp-rad { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
.valgrupp-rad .valknapp { flex: 1 1 30%; padding: 0.7rem 0.5rem; }
/* textarea ärver inte formulärfonten av sig själv (monospace-default) */
.card textarea { font: inherit; font-size: 1rem; width: 100%; box-sizing: border-box;
  padding: 0.7rem; border: 1px solid var(--kant, #d6d3cd); border-radius: 8px; }

/* Bilduppladdning (2026-08-12) */
.card input[type="file"] { font: inherit; font-size: 0.95rem; width: 100%;
  padding: 0.6rem; border: 1px dashed var(--kant, #d6d3cd); border-radius: 8px; background: #fff; }
.bild-lista { margin: 0.4rem 0 0.2rem; }
.bild-rad { margin: 0.25rem 0; font-size: 0.9rem; color: var(--text-muted, #6b6b6b); }
.bild-rad.ok { color: #1a7f37; }
.bild-rad.fel { color: #b42318; }