/* ============================================================
   KAKEL MALMÖ — KALKYLATOR

   Skriven mobilt först. Grundläget är en kolumn med stora
   tryckytor; tvåspalten träder in först vid 900 px.

   Ärver temats färger via var(), med egna reservvärden så att
   den fungerar även i ett annat tema.
   ============================================================ */

.kmk{
  --kmk-botten:  var(--km-svart,   #171613);
  --kmk-kort:    var(--km-kol,     #211F1C);
  --kmk-linje:   var(--km-linje,   #3A3630);
  --kmk-hairline:var(--km-kol-lj,  #2B2925);
  --kmk-brons:   var(--km-brons,   #C6A87C);
  --kmk-ben:     var(--km-ben,     #F2EFE9);
  --kmk-gra:     var(--km-gra,     #C9C4BC);
  --kmk-tyst:    var(--km-gra-dj,  #9E9A92);
  --kmk-sans:    var(--km-sans,    system-ui, sans-serif);
  --kmk-serif:   var(--km-serif,   Georgia, serif);

  font-family:var(--kmk-sans);
  color:var(--kmk-gra);
  margin-top:1.5rem;
}

.kmk *,.kmk *::before,.kmk *::after{box-sizing:border-box}

.kmk__ingress{
  font-size:1rem;line-height:1.7;color:var(--kmk-gra);
  margin:0 0 2rem;max-width:52ch;
}

/* ---------- Layout: en kolumn på mobil ---------- */
.kmk__layout{display:grid;gap:2rem}

/* ---------- Steg ---------- */
.kmk__block{
  padding:1.75rem 0;
  border-top:1px solid var(--kmk-hairline);
}
.kmk__block:first-child{border-top:0;padding-top:0}

.kmk__blockTopp{display:flex;align-items:baseline;gap:.85rem}
.kmk__nr{
  font-family:var(--kmk-serif);font-size:1.125rem;
  color:var(--kmk-brons);line-height:1;flex:none;
}
.kmk__rubrik{
  font-family:var(--kmk-sans);font-weight:500;
  font-size:1.0625rem;line-height:1.35;
  color:var(--kmk-ben);margin:0;
}
.kmk__hjalp{
  font-size:.875rem;line-height:1.65;color:var(--kmk-tyst);
  margin:.65rem 0 0;padding-left:2rem;max-width:56ch;
}

/* ---------- Kortval: stora tryckytor ---------- */
.kmk__kort{display:grid;gap:.6rem;margin-top:1.25rem}

.kmk__kortval{
  display:grid;gap:.35rem;
  text-align:left;width:100%;
  min-height:56px;
  padding:1rem 1.1rem;
  background:transparent;
  border:1px solid var(--kmk-linje);
  border-radius:3px;
  color:var(--kmk-gra);
  font-family:inherit;font-size:1rem;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.kmk__kortval:hover{border-color:var(--kmk-brons)}
.kmk__kortval.is-vald{
  border-color:var(--kmk-brons);
  background:rgba(198,168,124,.08);
  box-shadow:inset 3px 0 0 var(--kmk-brons);
}
.kmk__kortNamn{font-weight:500;color:var(--kmk-ben);font-size:1rem}
.kmk__kortText{font-size:.8125rem;line-height:1.55;color:var(--kmk-tyst)}
.kmk__kortPris{
  font-size:.75rem;font-weight:500;letter-spacing:.06em;
  color:var(--kmk-brons);margin-top:.2rem;
}

/* ---------- Reglage ---------- */
.kmk__reglageRad{
  display:flex;align-items:center;gap:1rem;
  margin-top:1.5rem;
}
.kmk__reglage{
  -webkit-appearance:none;appearance:none;
  flex:1;height:2px;margin:0;
  background:var(--kmk-linje);
  border-radius:2px;
}
.kmk__reglage::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--kmk-brons);cursor:grab;
  border:3px solid var(--kmk-botten);
}
.kmk__reglage::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;border:3px solid var(--kmk-botten);
  background:var(--kmk-brons);cursor:grab;
}
.kmk__reglage:focus-visible{outline:2px solid var(--kmk-brons);outline-offset:8px}

.kmk__reglageTal{
  font-family:var(--kmk-serif);font-size:1.375rem;
  color:var(--kmk-ben);min-width:5.5rem;text-align:right;flex:none;
}
.kmk__skala{
  display:flex;justify-content:space-between;
  font-size:.6875rem;letter-spacing:.1em;
  color:var(--kmk-tyst);margin-top:.5rem;
}

/* ---------- Tillägg ---------- */
.kmk__tillagg{display:grid;gap:.5rem;margin-top:1.25rem}

.kmk__tillaggRad{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"box text" ".  pris";
  gap:.25rem .85rem;
  align-items:start;
  padding:.95rem 1rem;
  border:1px solid var(--kmk-hairline);
  border-radius:3px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.kmk__tillaggRad:hover{border-color:var(--kmk-linje)}
.kmk__tillaggRad input{
  grid-area:box;
  width:22px;height:22px;margin:0;
  accent-color:var(--kmk-brons);cursor:pointer;
}
.kmk__tillaggText{grid-area:text;display:grid;gap:.25rem}
.kmk__tillaggNamn{font-weight:500;color:var(--kmk-ben);font-size:.9375rem}
.kmk__tillaggForklaring{font-size:.8125rem;line-height:1.55;color:var(--kmk-tyst)}
.kmk__tillaggPris{
  grid-area:pris;
  font-size:.8125rem;font-weight:500;color:var(--kmk-brons);
  padding-top:.15rem;
}
.kmk__tillaggRad.is-last{opacity:.55;cursor:default}
.kmk__tillaggRad.is-last .kmk__tillaggPris{color:var(--kmk-tyst)}

/* ---------- Offertkortet ---------- */
.kmk__offertkort{
  background:var(--kmk-kort);
  border:1px solid var(--kmk-linje);
  border-radius:3px;
  padding:1.5rem;
  position:relative;
  overflow:hidden;
}
.kmk__offertkort::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:2px;background:var(--kmk-brons);
}
.kmk__etikett{
  display:block;font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--kmk-brons);margin-bottom:1.25rem;
}

.kmk__rader{display:grid;gap:.6rem;margin-bottom:1.25rem}
.kmk__rad{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.875rem;line-height:1.5;
}
.kmk__radNamn{color:var(--kmk-gra)}
.kmk__radTal{color:var(--kmk-ben);white-space:nowrap;font-variant-numeric:tabular-nums}
.kmk__rad--rot .kmk__radNamn,
.kmk__rad--rot .kmk__radTal{color:var(--kmk-brons)}
.kmk__rad--material .kmk__radNamn::after{
  content:" (ej ROT)";color:var(--kmk-tyst);font-size:.75rem;
}

/* Materialdelen ligger redan inne i raderna ovan och ska inte läsas
   som ett tillägg. Dämpad, utan "(ej ROT)"-suffixet. */
.kmk__rad--info .kmk__radNamn,
.kmk__rad--info .kmk__radTal{color:var(--kmk-tyst);font-size:.8125rem}

.kmk__takNot{
  margin:.75rem 0 0;font-size:.75rem;line-height:1.5;
  color:var(--kmk-tyst);
}

.kmk__summa{
  border-top:1px solid var(--kmk-linje);
  padding-top:1.25rem;margin-bottom:1.5rem;
}
.kmk__summaText{
  display:block;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kmk-tyst);
}
.kmk__summaTal{
  display:block;font-family:var(--kmk-serif);font-weight:400;
  font-size:clamp(2rem,7vw,2.75rem);line-height:1.05;
  color:var(--kmk-ben);margin:.35rem 0 .25rem;
  font-variant-numeric:tabular-nums;
}
.kmk__summaNot{font-size:.8125rem;color:var(--kmk-tyst)}

/* Fast färgvärde, inte var(). Löstes tidigare till samma ton som
   bakgrunden i vissa arvkedjor, vilket gav en tom bronsknapp. */
.kmk__knapp,
.kmk__knapp span,
.kmk__knappText{
  color:#211F1C;
}
.kmk__knappText{font:inherit;letter-spacing:inherit}
.kmk__knapp{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.5rem;
  background:#C6A87C;
  border:0;border-radius:3px;
  font-family:inherit;font-size:.8125rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background .18s ease;
}
.kmk__knapp:hover,
.kmk__knapp:hover span{background:#F2EFE9;color:#211F1C}
.kmk__knapp--liten{min-height:44px;padding:.6rem 1.1rem;flex:none}

.kmk__ingarEj{
  font-size:.8125rem;line-height:1.6;color:var(--kmk-tyst);
  margin:1.5rem 0 0;padding-top:1.25rem;
  border-top:1px solid var(--kmk-hairline);
}
.kmk__ingarEj strong{color:var(--kmk-gra);font-weight:500}
.kmk__friskrivning{
  font-size:.75rem;line-height:1.6;color:var(--kmk-tyst);
  margin:.85rem 0 0;opacity:.8;
}
.kmk__villkor{
  font-size:.875rem;line-height:1.7;color:var(--kmk-tyst);
  margin:2rem 0 0;padding:1.1rem 1.25rem;
  border-left:2px solid var(--kmk-brons);
  background:rgba(198,168,124,.05);
}
.kmk__noscript{color:var(--kmk-gra)}

/* ---------- Mobilens klistrade summa ---------- */
.kmk__mobilsumma{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;
  padding-bottom:calc(.85rem + env(safe-area-inset-bottom));
  background:var(--kmk-kort);
  border-top:1px solid var(--kmk-brons);
}
.kmk__mobilsumma[hidden]{display:none}
.kmk__mobilEtikett{
  display:block;font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kmk-tyst);
}
.kmk__mobilsumma strong{
  font-family:var(--kmk-serif);font-weight:400;font-size:1.375rem;
  color:var(--kmk-ben);font-variant-numeric:tabular-nums;
}

/* ---------- Tvåspalt från 900 px ---------- */
/* Den klistrade summaraden ligger ovanpå sidan och skulle annars
   täcka det sista tillvalet och knappen. Ge sidan bottenmarginal
   motsvarande radens höjd så länge en kalkylator finns. */
@media (max-width:899px){
  body:has(.kmk__mobilsumma){padding-bottom:6rem}
}

/* Reserv för webbläsare utan :has() */
@media (max-width:899px){
  .kmk{padding-bottom:6rem}
}

@media (min-width:900px){
  .kmk{padding-bottom:0}
  .kmk__layout{
    grid-template-columns:minmax(0,1fr) minmax(0,22rem);
    gap:clamp(2rem,4vw,4rem);
    align-items:start;
  }
  .kmk__offert{position:sticky;top:6rem}
  .kmk__offertkort{padding:1.75rem}
  .kmk__mobilsumma{display:none}
  .kmk__kort{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
  .kmk__tillaggRad{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"box text pris";
    align-items:center;
  }
  .kmk__tillaggPris{padding-top:0;text-align:right}
}

@media (prefers-reduced-motion:reduce){
  .kmk *{transition:none !important}
}

/* ============================================================
   DIALOGRUTA — FÖRFRÅGAN
   ============================================================ */

.kmk__dialog{
  width:min(38rem,calc(100vw - 2rem));
  max-height:min(90vh,52rem);
  padding:0;border:1px solid var(--kmk-linje);border-radius:4px;
  background:var(--kmk-kort);color:var(--kmk-gra);
  overflow:auto;
}
.kmk__dialog::backdrop{background:rgba(10,9,8,.78)}

.kmk__form,.kmk__tack{padding:clamp(1.5rem,4vw,2.5rem);position:relative}

.kmk__stang{
  position:absolute;top:.85rem;right:.85rem;
  width:40px;height:40px;
  background:transparent;border:1px solid var(--kmk-linje);border-radius:3px;
  color:var(--kmk-gra);font-size:1.5rem;line-height:1;cursor:pointer;
}
.kmk__stang:hover{border-color:var(--kmk-brons);color:var(--kmk-brons)}

.kmk__formRubrik{
  font-family:var(--kmk-serif);font-weight:400;
  font-size:clamp(1.4rem,4vw,1.875rem);line-height:1.15;
  color:var(--kmk-ben);margin:0 3rem .6rem 0;
}
.kmk__formIngress{font-size:.9375rem;line-height:1.65;color:var(--kmk-tyst);margin:0 0 1.5rem}

.kmk__formSumma{
  background:var(--kmk-botten);
  border:1px solid var(--kmk-hairline);border-radius:3px;
  padding:1rem 1.1rem;margin-bottom:1.75rem;
  display:grid;gap:.5rem;
}
.kmk__formRad{display:flex;justify-content:space-between;gap:1rem;font-size:.8125rem}
.kmk__formRad span:last-child{white-space:nowrap;color:var(--kmk-ben);font-variant-numeric:tabular-nums}
.kmk__formRad--summa{
  border-top:1px solid var(--kmk-linje);
  padding-top:.6rem;margin-top:.25rem;
  font-weight:500;
}
.kmk__formRad--summa span{color:var(--kmk-brons)}

.kmk__falt{display:grid;gap:.4rem;margin-bottom:1rem}
.kmk__faltRad{display:grid;gap:0 1rem}
.kmk__falt label{font-size:.8125rem;font-weight:500;color:var(--kmk-ben)}
.kmk__falt label span{color:var(--kmk-brons)}
.kmk__falt input,.kmk__falt textarea{
  width:100%;min-height:48px;
  padding:.75rem .9rem;
  background:var(--kmk-botten);
  border:1px solid var(--kmk-linje);border-radius:3px;
  color:var(--kmk-ben);font-family:inherit;font-size:1rem;
}
.kmk__falt textarea{min-height:auto;resize:vertical;line-height:1.6}
.kmk__falt input:focus,.kmk__falt textarea:focus{
  outline:none;border-color:var(--kmk-brons);
}
.kmk__falt ::placeholder{color:var(--kmk-tyst);opacity:.7}

.kmk__honung{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.kmk__formFel{
  font-size:.875rem;line-height:1.6;color:#E8A08A;
  margin:0 0 1rem;padding:.85rem 1rem;
  border:1px solid rgba(232,160,138,.35);border-radius:3px;
}
.kmk__formSkicka{width:100%;margin-top:.5rem}
.kmk__formNot{font-size:.75rem;line-height:1.6;color:var(--kmk-tyst);margin:1rem 0 0}
.kmk__formNot a{color:var(--kmk-brons)}

.kmk__tack p{font-size:.9375rem;line-height:1.7;margin:0 0 1rem}
.kmk__tackNot{color:var(--kmk-tyst);font-size:.875rem}
.kmk__tack .kmk__knapp{margin-top:1rem}

@media (min-width:640px){
  .kmk__faltRad{grid-template-columns:1fr 1fr}
}

/* Reservläge för webbläsare utan stöd för <dialog>. */
.kmk__dialog--reserv{
  display:block;
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:9999;
  box-shadow:0 0 0 100vmax rgba(10,9,8,.78);
}

/* ---------- Fristående formulär på kontaktsidan ---------- */
.kmk--fristaende{
  background:var(--kmk-kort);
  border:1px solid var(--kmk-linje);
  border-radius:3px;
  position:relative;overflow:hidden;
  margin-top:2rem;
}
.kmk--fristaende::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:2px;background:var(--kmk-brons);
}
.kmk__form--sida,.kmk__tack--sida{padding:clamp(1.5rem,4vw,2.5rem)}
.kmk__falt select{
  width:100%;min-height:48px;
  padding:.75rem .9rem;
  background:var(--kmk-botten);
  border:1px solid var(--kmk-linje);border-radius:3px;
  color:var(--kmk-ben);font-family:inherit;font-size:1rem;
}
.kmk__falt select:focus{outline:none;border-color:var(--kmk-brons)}
.kmk__rad--delsumma{border-top:1px solid var(--kmk-hairline);padding-top:.6rem;margin-top:.25rem}
.kmk__rad--delsumma .kmk__radNamn{color:var(--kmk-ben)}