/* VI-palett — kundsidan underlag.varderingsinstitutet.com.
   Palett + typsnittsfamiljer speglar varderingsinstitutet.com (public/assets/vi.css).
   Typsnitten laddas dock ALDRIG externt (Google Fonts sätter spårningsbara requests
   och skulle bryta cookie-/tredjepartslöftet i integritetstexten): samma
   font-family-stack används, men faller tillbaka på Georgia/system-ui där
   Cormorant/Inter Tight inte finns lokalt. */

:root {
  --bg: #faf6ee;
  --bg-soft: #f1ebde;
  --surface: #ffffff;
  --ink: #1e1711;
  --ink-muted: #5a4d42;
  --ink-dim: #8a7e72;
  --accent: #c8451a;
  --rule: #d9cfb9;
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}

.page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

h1 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 1.25rem 0 0.5rem;
}

h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1rem 0 0.35rem;
}

/* Sidhuvud med logotyp — samma märke som varderingsinstitutet.com */
.brand {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

.brand img {
  display: block;
  width: 210px;
  max-width: 60%;
  height: auto;
  /* Logotypen är orange-på-vit (samma fil som värderingsmotorn använder).
     multiply låter den vita plattan smälta in i cream-bakgrunden i stället
     för att bilda en vit ruta — inget behov av en separat transparent PNG. */
  mix-blend-mode: multiply;
}

/* Startsidan (/) — informationsvy */
.valkommen h1 {
  font-size: 2.4rem;
  margin-bottom: 1.25rem;
}

.lead {
  font-size: 1.1rem;
  color: var(--ink-muted);
}

.kort {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.kort p:last-child {
  margin-bottom: 0;
}

.sidfot {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
}

.page-head .meta {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
}

.instruktion {
  font-size: 0.95rem;
}

.ventil {
  font-size: 0.95rem;
}

.falthjalp {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
}

/* Steg-för-steg-guide ovanför rutan — leder ovana besökare rätt */
.sa-har-gor {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.sa-har-gor h2 {
  margin-bottom: 0.6rem;
}

.steg {
  margin: 0;
  padding-left: 1.4rem;
}

.steg li {
  margin-bottom: 0.5rem;
}

.steg li:last-child {
  margin-bottom: 0;
}

/* Filrutan — ett tydligt, inbjudande klick- och släppmål */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 11rem;
  border: 2px dashed var(--accent);
  border-radius: 0.75rem;
  margin: 0.5rem 0;
  padding: 1.75rem 1.25rem;
  cursor: pointer;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dropzone:hover {
  background: #fff7ef;
  box-shadow: 0 0 0 4px rgba(200, 69, 26, 0.08);
}

/* Gör tangentbordsfokus tydligt synligt */
.dropzone:focus-within {
  box-shadow: 0 0 0 4px rgba(200, 69, 26, 0.22);
}

/* Medan en fil dras in över rutan */
.dropzone.is-dragover {
  background: #fdeee6;
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(200, 69, 26, 0.18);
}

/* När filer redan valts tonas rutan ned — blicken flyttas till listan nedanför */
.dropzone.has-files {
  border-style: solid;
  border-color: var(--rule);
  min-height: 7rem;
}

.dropzone__icon {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--accent);
  flex: none;
}

.dropzone__primary {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.dropzone__secondary {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Lista över valda filer + påminnelse om att trycka Skicka */
.vald-huvud {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.vald-rubrik {
  font-weight: 600;
}

.rensa {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.vald-fillista {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.vald-fillista li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  background: var(--surface);
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.vald-fillista .bock {
  color: var(--accent);
  font-weight: 700;
  flex: none;
}

.vald-fillista .namn {
  font-weight: 600;
  word-break: break-word;
}

.vald-fillista .storlek {
  color: var(--ink-dim);
  margin-left: auto;
  white-space: nowrap;
}

.skicka-paminnelse {
  border-left: 3px solid var(--accent);
  background: #fff7ef;
  padding: 0.6rem 0.9rem;
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.95rem;
  margin: 0;
}

.faltrubrik {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

textarea {
  width: 100%;
  font: inherit;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.infobox {
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background: #ffffff;
}

.bekraftelse {
  font-size: 0.9rem;
}

button[type="submit"] {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

button[type="submit"]:hover {
  opacity: 0.9;
}

/* "Jag är klar"-formuläret — egen, tonad knappstil. Sidan har redan EN
   orange primärknapp (Skicka); "Jag är klar" ska inte tävla med den, så den
   får en ljus/kantad sekundärstil i stället för att ärva den orange
   button[type="submit"]-regeln. */
.klar-kryssruta {
  display: block;
  margin: 1.5rem 0 0.35rem;
  cursor: pointer;
}

.klar-kryssruta input {
  cursor: pointer;
}

.klar-forklaring {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 1rem;
}

.klar-form button[type="submit"] {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
}

.klar-form button[type="submit"]:hover {
  border-color: var(--accent);
  opacity: 1;
}

/* Bekräftelseruta efter "Jag är klar" — samma boxkänsla som .kort. */
.klar-bekraftelse {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.klar-bekraftelse p:last-child {
  margin-bottom: 0;
}

.fillista,
.avvisade ul {
  padding-left: 1.25rem;
}

.avvisade {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1rem 0;
}

/* "Tidigare inlämnat" — historik ur localStorage (ingen server-lista, se
   main.py-docstringen om edgens write-only yta). Samma boxkänsla som
   .sa-har-gor ovan, listraderna lånar upplägget från .vald-fillista. */
.tidigare-inlamnat {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.tidigare-inlamnat h2 {
  margin-bottom: 0.4rem;
}

.tidigare-info {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

.tidigare-fillista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tidigare-fillista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}

.tidigare-fillista li:last-child {
  border-bottom: none;
}

.tidigare-fillista .namn {
  font-weight: 600;
  word-break: break-word;
}

.tidigare-fillista .datum {
  color: var(--ink-dim);
  white-space: nowrap;
  font-size: 0.85rem;
}

/* Beställningssidan (/b/<kod>) — formulärsektioner, prisruta, felruta */
.typ-intro {
  font-size: 1.05rem;
}

.materiallista-box {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.materiallista-box h2 {
  margin-bottom: 0.6rem;
}

.materiallista-box ul {
  margin: 0;
  padding-left: 1.25rem;
}

.prisruta {
  background: #fff7ef;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.prisruta__belopp {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.prisruta__villkor {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* Valkorten (flera-alternativ-beställningar) — samma boxkänsla som .prisruta,
   men klickbara (label runt input) med tydligt markerat valt tillstånd. */
.alternativval {
  margin: 1.5rem 0;
}

.alternativkort {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  background: var(--surface);
}

.alternativkort:hover {
  border-color: var(--ink-dim);
}

.alternativkort:has(input:checked) {
  border-color: var(--accent);
  background: #fff7ef;
}

.alternativkort__namn {
  font-weight: 700;
  display: inline-block;
  margin-left: 0.4rem;
}

.alternativkort__pris {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
}

.alternativkort__tid,
.alternativkort__not {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.kodform label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.kodrad { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kodrad input {
  flex: 1 1 10rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.6rem 0.8rem; border: 2px solid var(--rule); border-radius: 0.5rem;
  background: var(--surface); color: var(--ink);
}
.kodrad input:focus { outline: none; border-color: var(--accent); }
.kodrad button {
  font-family: var(--sans); font-size: 1rem; font-weight: 600; padding: 0.6rem 1.25rem;
  background: var(--accent); color: #fff; border: 0; border-radius: 0.5rem; cursor: pointer;
}
.kodhjalp { color: var(--ink-muted); font-size: 0.95rem; margin: 0.5rem 0 0; }

.felruta {
  background: #fdeee6;
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.felruta h2 {
  margin-bottom: 0.5rem;
}

.felruta ul {
  margin: 0;
  padding-left: 1.25rem;
}

.formsektion {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin: 1.5rem 0;
}

.formsektion:first-of-type {
  border-top: none;
  padding-top: 0;
}

#lagg-till-bestallare {
  background: none;
  border: 1px dashed var(--rule);
  border-radius: 0.5rem;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  margin-bottom: 1rem;
  padding: 0.6rem 1rem;
  width: 100%;
}

#lagg-till-bestallare:hover {
  border-color: var(--accent);
}

.falthjalp {
  margin: -0.5rem 0 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

input[type="text"] {
  display: block;
  width: 100%;
  font: inherit;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 1rem;
  background: var(--surface);
  color: var(--ink);
}

/* Kvittosidan efter en skickad beställning (kvitto_bestallning.html) */
.kvitto-alternativ {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.steg-2 {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.knapp-lank {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 0.5rem;
}

.knapp-lank:hover {
  opacity: 0.9;
}

/* Klar-grindens varning: kunden tryckte "Jag är klar" utan att ha lämnat en
   enda fil (se _klar-varning.html). Tyngre ram än .klar-bekraftelse med flit —
   det här är den enda återkopplingen kunden får på att ingenting lämnats in,
   och den gamla tysta utgången kostade en värdering tre dygn. */
.klar-varning {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-left: 5px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.klar-varning h2 {
  margin-top: 0;
  color: var(--accent);
}

.klar-varning ol {
  padding-left: 1.25rem;
}

.klar-varning p:last-child {
  margin-bottom: 0;
}

/* Tidsvalet för inspektion (/t/<kod>) — återanvänder .alternativkort för
   radioknapparna och .klar-bekraftelse för det låsta läget. Fungerar utan JS:
   "Ingen av tiderna passar" är en <details> med ett eget formulär. */
.tidval fieldset {
  border: 0;
  padding: 0;
}

/* Radioknapp och tid på samma rad även i mobilbredd — annars bryter
   inline-block-namnet ned under knappen. */
.tidval .alternativkort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tidval .alternativkort__namn {
  margin-left: 0;
}

.tidval-ingen {
  margin: 2rem 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.tidval-ingen summary {
  cursor: pointer;
  color: var(--ink-muted);
  font-weight: 600;
}

.tidval-ingen form {
  margin-top: 1rem;
}