/* ===== Jordvarme Beregner – styling =====
   Justér farver/typografi via CSS-variablerne herunder
*/
:root{
  /* Farver */
  --jb-primary:  #04271B;
  --jb-panel:    #2D7463;
  --jb-accent:   #A0B687;
  --jb-soft:     #CFD8D5;

  /* Typografi (nem justering) */
  --jb-fs-title: clamp(28px,3.2vw,44px);
  --jb-fs-label: 22px;
  --jb-fs-result-title: clamp(18px,2vw,26px);
  --jb-fs-price: clamp(28px,3vw,40px);
  --jb-radius-card: 18px;
  --jb-radius-inner: 16px;
}

/* Wrapper-kort */
.jb-card{
  background:var(--jb-primary);
  border-radius:var(--jb-radius-card);
  padding:28px;
  color:#DCF0EA;
  max-width:960px;
}

/* Titel */
.jb-title{
  margin:0 0 18px;
  font-weight:900;
  letter-spacing:.3px;
  color:#B9D6CD;
  font-size:var(--jb-fs-title);
}

/* Indre panel */
.jb-fieldgroup{
  background:var(--jb-panel);
  border-radius:var(--jb-radius-inner);
  padding:22px;
}

/* Labels/legends */
.jb-label{
  font-weight:700;
  margin-bottom:10px;
  color:#CBE3DC;
  font-size:var(--jb-fs-label);
}

/* Separator */
.jb-hr{
  height:1px;
  background:rgba(207,216,213,.35);
  margin:18px 0;
  border:0;
}

/* Radio grid */
.jb-radio-grid{
  display:grid;
  gap:12px;
}

/* Radio (custom) */
.jb-radio{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
  transition:border-color .2s, background .2s;
}
.jb-radio:hover{ border-color:rgba(255,255,255,.25); }

.jb-radio input{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.jb-radio-bullet{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #CBE3DC;
  display:inline-block;
  position:relative;
  flex:0 0 18px;
}
.jb-radio input:checked + .jb-radio-bullet{
  border-color:#0D2E26;
  background:var(--jb-accent);
}
.jb-radio input:focus-visible + .jb-radio-bullet{
  outline:2px solid #000;
  outline-offset:2px;
}

.jb-radio-text{
  color:#FFF;
  line-height:1.35;
  font-size: 16px;
  font-weight: 900;
}

/* Resultatkort */
.jb-result-card{
  margin-top:18px;
  background:#58A28E;
  border-radius:16px;
  padding:24px;
  color:#0D2E26;
  display:grid;
  gap:10px;
}
.jb-result-title{ font-size:var(--jb-fs-result-title); font-weight:800; margin:0; }
.jb-price{ font-size:var(--jb-fs-price); font-weight:900; margin:0; }
.jb-note{ opacity:.9; color:#fff; font-size: 18px; }

/* CTA-knap */
.jb-cta{
  display:inline-block;
  margin-top:8px;
  padding:12px 18px;
  border-radius:999px;
  border:2px solid #0D2E26;
  background:transparent;
  color:#0D2E26;
  font-weight:800;
  text-decoration:none;
}
.jb-cta:focus,.jb-cta:hover{ outline:none; filter:brightness(.95); }

/* Fieldset reset */
.jb-fieldset{
  border:0;
  margin:0;
  padding:0;
}

/* Responsiv kolonnelayout (2 kolonner hvis der er plads) */
@media (min-width: 720px){
  .jb-radio-grid{ grid-template-columns: 1fr 1fr; }
  .jb-card{padding:5px;}
}

/* Responsiv layout - mobilvisning */
@media (max-width: 720px){
  	.jb-card{padding:5px;}
	:root{  
      	--jb-fs-title: clamp(20px,3.2vw,35px);
  		--jb-fs-price: clamp(28px,3vw,35px);
  }
}