:root {
  --bla: #2a78d6;
  --bla-mork: #1c5490;
  --text: #16202c;
  --svag: #5b6b7c;
  --fin: #8695a5;
  --ram: #dde4ec;
  --bg: #eef4f9;
  --sand: #f3e3c4;
  --korall: #e8503c;
  --skugga: 0 10px 30px rgba(16, 46, 76, .10), 0 2px 6px rgba(16, 46, 76, .06);
  --gron: #0ca30c;
  --gron-bg: #eaf7ea;
  --graf: #2a78d6;
  --graf-bast: #0ca30c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
main, footer, .lagerad { max-width: 940px; margin: 0 auto; padding: 0 16px; }

/* ── Hero: strandscen i SVG, ingen extern bild ── */
.hero { position: relative; aspect-ratio: 4 / 1; min-height: 230px; max-height: 340px; overflow: hidden; }
.hero .scen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero header {
  position: relative; max-width: 940px; margin: 0 auto; padding: 40px 16px 0; color: #fff;
  text-shadow: 0 2px 14px rgba(6, 32, 56, .45);
}
h1 { margin: 0 0 6px; font-size: 40px; letter-spacing: -.02em; }
.lagerad { margin-top: -22px; position: relative; z-index: 2; }
h2 { font-size: 18px; margin: 0 0 12px; }
.märke {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  background: rgba(255, 255, 255, .22); color: #fff; padding: 4px 10px; border-radius: 999px;
  vertical-align: 8px; backdrop-filter: blur(4px); text-shadow: none; font-weight: 700;
}
.hero .ingress { margin: 0; color: rgba(255, 255, 255, .95); font-size: 16px; max-width: 620px; }
.lage {
  margin: 0 0 18px; font-size: 13px; color: var(--svag);
  background: #fff; border: 1px solid var(--ram); border-radius: 12px;
  padding: 10px 16px; box-shadow: var(--skugga);
}
.fin { color: var(--fin); font-size: 12.5px; }
.domaner {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 0 0 18px; font-size: 13px;
}
.domaner .etikett { color: var(--svag); }
.domaner a, .domaner .vantar {
  background: #fff; border: 1px solid var(--ram); border-radius: 999px;
  padding: 4px 12px; color: var(--bla-mork); text-decoration: none; font-weight: 600;
}
.domaner a:hover { border-color: var(--bla); background: #eef3fa; }
.domaner a.harar { background: var(--bla); border-color: var(--bla); color: #fff; }
.domaner .vantar { color: var(--fin); font-weight: 500; border-style: dashed; }
.cachemarke {
  background: #fff4e2; color: #8a5a12; border: 1px solid #f0dcbb;
  padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.kort {
  background: #fff; border: 1px solid var(--ram); border-radius: 16px;
  padding: 18px; margin-bottom: 20px; box-shadow: var(--skugga);
}

/* ── Sökformulär ── */
.sokkort { padding: 22px; border-radius: 18px; }
.sokkort::after {
  content: ''; display: block; height: 4px; border-radius: 999px; margin-top: 18px;
  background: linear-gradient(90deg, var(--korall), #ffbf5e 45%, var(--bla));
  opacity: .35;
}
.orter { display: flex; gap: 10px; align-items: flex-start; }
.datum { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.rad { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.falt { display: flex; flex-direction: column; font-size: 13px; color: var(--svag); flex: 1 1 150px; gap: 4px; }
input {
  font: inherit; padding: 10px 12px; border: 1px solid var(--ram); border-radius: 9px;
  background: #fff; color: var(--text); width: 100%;
}
input:focus { outline: 2px solid var(--bla); outline-offset: -1px; }
.bytknapp {
  flex: 0 0 auto; margin-top: 22px; width: 42px; height: 42px; padding: 0;
  background: #fff; color: var(--bla); border: 1px solid var(--ram); border-radius: 50%;
  font-size: 19px; line-height: 1;
}
.bytknapp:hover { background: #eef3fa; border-color: var(--bla); }
button {
  font: inherit; font-weight: 600; padding: 10px 18px; border: 0; border-radius: 9px;
  background: var(--bla); color: #fff; cursor: pointer;
}
button:hover { background: var(--bla-mork); }
button:disabled { opacity: .55; cursor: default; }
button.sekundar { background: #fff; color: var(--svag); border: 1px solid var(--ram); }
button.sekundar:hover { background: #f4f7fa; }
button.liten { padding: 7px 12px; font-size: 13px; font-weight: 500; }
.sokknapp {
  padding: 12px 34px; font-size: 15px;
  background: linear-gradient(180deg, #3a8ae4, var(--bla));
  box-shadow: 0 6px 16px rgba(42, 120, 214, .32);
}
.sokknapp:hover { background: linear-gradient(180deg, var(--bla), var(--bla-mork)); }
.tolkning { font-size: 12px; color: var(--bla-mork); min-height: 16px; }
.snabbval {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--svag); margin: 12px 0 0;
}
.snabbval .etikett { color: var(--fin); }
.chip {
  background: #eef3fa; color: var(--bla-mork); border: 1px solid #cfdcee;
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.chip:hover { background: #dde8f7; }
.minichip {
  background: #fff; color: var(--svag); border: 1px solid var(--ram);
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.minichip.aktiv { background: var(--bla); color: #fff; border-color: var(--bla); }
.kallval { display: inline-flex; gap: 4px; align-items: center; }
.avdelare { display: inline-block; width: 1px; height: 16px; background: var(--ram); }
.hjalp { font-size: 12.5px; color: var(--svag); margin: 10px 0 0; }
.fel { background: #fdeaea; border: 1px solid #f3c2c2; color: #8c1c1c; padding: 10px 14px; border-radius: 9px; }

/* ── Träffar ── */
.traff {
  display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--ram); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--skugga);
  transition: transform .14s ease, box-shadow .14s ease;
}
.traff:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(16, 46, 76, .13); }
.traff.bast { border-color: #bfe3bf; }
.traff.bast::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(#0ca30c, #57c957); border-radius: 16px 0 0 16px;
}
.traff { position: relative; }
.traff.vald { border-color: var(--bla); box-shadow: 0 0 0 2px #dbe7f7; }
.t-info { flex: 1 1 380px; min-width: 0; }
.stracka { margin-bottom: 8px; }
.stracka strong { font-size: 17px; letter-spacing: .01em; }
.stracka small { display: block; color: var(--svag); font-size: 12.5px; }
.bastmarke {
  background: var(--gron-bg); color: #0a6b0a; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px;
  text-transform: uppercase; letter-spacing: .05em;
}
.ben { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 14px; margin-top: 3px; }
.riktning {
  flex: 0 0 34px; font-size: 11px; font-weight: 700; color: var(--fin);
  text-transform: uppercase; letter-spacing: .06em;
}
.klocka { font-variant-numeric: tabular-nums; }
.detalj { color: var(--svag); font-size: 12.5px; }
.dagskifte { color: #b3541e; font-weight: 700; font-size: 10px; }
.fakta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--svag); }
.fakta .fa { color: #b3541e; }
.t-pris { flex: 0 0 236px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; position: relative; }
.belopp { font-size: 24px; font-weight: 700; white-space: nowrap; }
.jamfor { font-size: 12px; color: var(--svag); text-align: right; }
.jamfor small { display: block; color: var(--fin); font-size: 11px; }
.jamfor.billigare { color: #0a6b0a; font-weight: 600; }
.jamfor.dyrare { color: #8c4a1c; }
.t-knappar { display: flex; gap: 6px; margin-top: auto; flex-wrap: nowrap; justify-content: flex-end; }
.tom { color: var(--svag); }

.delameny {
  position: absolute; right: 0; top: 100%; z-index: 5; margin-top: 6px;
  background: #fff; border: 1px solid var(--ram); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 35, 60, .12); padding: 6px; min-width: 150px;
  display: flex; flex-direction: column; gap: 2px;
}
.delameny a, .delameny button {
  display: block; text-align: left; padding: 7px 10px; border-radius: 7px;
  font-size: 13px; color: var(--text); text-decoration: none; background: #fff;
  border: 0; font-weight: 500; width: 100%;
}
.delameny a:hover, .delameny button:hover { background: #f2f6fb; color: var(--text); }

/* ── Lågpriskalender ── */
.kalenderrubrik { display: flex; justify-content: space-between; align-items: center; }
.graf { width: 100%; height: auto; display: block; margin-top: 8px; }
.graf .baslinje { stroke: var(--ram); stroke-width: 1; }
.graf .stapel { cursor: pointer; }
.graf .stapel path { transition: opacity .15s; }
.graf .stapel:hover path { opacity: .78; }
.graf .stapel.vald path { stroke: var(--bla-mork); stroke-width: 2; }
.graf .stapeltext { font-size: 13px; font-weight: 700; fill: var(--svag); text-anchor: middle; }
.graf .stapeltext.bast { fill: #0a6b0a; }
.graf .axel { font-size: 12px; fill: var(--svag); text-anchor: middle; }
.graf .axel.svag { fill: var(--fin); font-size: 11px; }
.graftabell-hallare { margin-top: 16px; }
.graftabell-hallare summary { font-size: 13px; color: var(--svag); cursor: pointer; }
.graftabell { margin-top: 10px; }
.graftabell caption { text-align: left; font-size: 12px; color: var(--fin); padding-bottom: 6px; }
.graftabell tr.bast td { color: #0a6b0a; font-weight: 600; }

footer { padding: 24px 16px 48px; font-size: 13px; color: var(--svag); display: flex; gap: 10px; align-items: center; }
footer a { color: var(--svag); }

.status-bekraftad { color: #12703c; font-weight: 600; }
.status-misslyckad { color: #8c1c1c; font-weight: 600; }
dl.fakta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.fakta dt { color: var(--svag); font-size: 13px; }
dl.fakta dd { margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ram); vertical-align: top; }
th { color: var(--svag); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 760px) {
  .hero { aspect-ratio: 2 / 1; max-height: 250px; }
  h1 { font-size: 30px; }
  .hero header { padding-top: 26px; }
  .lagerad { margin-top: -16px; }
}
@media (max-width: 620px) {
  .orter { flex-wrap: wrap; }
  .bytknapp { margin-top: 0; }
  .t-pris { flex: 1 1 100%; align-items: flex-start; }
  .t-knappar { justify-content: flex-start; }
  .delameny { right: auto; left: 0; }
}

.brytpunkt {
  background: #fff7e6; border: 1px solid #f0dcbb; border-radius: 10px;
  padding: 12px 16px; margin: 0 0 14px; font-size: 14px;
}
td.plus { color: #0a6b0a; font-weight: 600; }
td.minus { color: #a01f1f; font-weight: 700; }