@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.stepa{
  display:grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 32px;
  align-items:start;
  position: relative;
  --stepa-overlap: clamp(24px, 3vw, 72px); /* ~15% of a typical card width */
}

.stepa, .stepa *{ font-family: 'Montserrat', sans-serif; }

/* panels overlap the image (head sits behind cards) */
.stepa__panel{ position:relative; z-index:3; }
.stepa__center{ position:relative; z-index:1; margin-left: calc(-1 * var(--stepa-overlap)); margin-right: calc(-1 * var(--stepa-overlap)); }
.stepa__panel--left{ margin-right: calc(-1 * var(--stepa-overlap)); }
.stepa__panel--right{ margin-left: calc(-1 * var(--stepa-overlap)); }

.stepa__card{
  background:#fff;
  border:1px solid #e9eef3;
  border-radius:16px;
  padding:28px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.stepa__title{
  color:#65BCEA;
  font-size:22px;
  font-weight:600;
  margin-bottom:18px;
}

.stepa__list{ display:flex; flex-direction:column; gap:2px; }

.stepa__item{
  display:flex; gap:12px; align-items:flex-start;
  cursor:pointer;
  pointer-events:all;
  font-size:16px;
  color: #000000;
	font-weight:400;
}
.stepa__item input{ margin-top:4px; transform:scale(1.15); }

.stepa__center{
  display:flex;
  justify-content:center;
  margin-left: calc(-1 * var(--stepa-overlap));
  margin-right: calc(-1 * var(--stepa-overlap));
}
.stepa__imageWrap{
  position:relative;
  width:min(780px, 100%);
  aspect-ratio: 1097 / 967;
}
.stepa__img{
  width:100%;
  height:auto;
  display:block;
}

.stepa__svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}

.stepa__area{
  /* keep the overlay invisible by default (we already have dashed lines on the photo) */
  fill: rgba(102, 174, 221, 0);
  stroke: rgba(0,0,0,0);
  stroke-width: 3;
  transition: fill .2s ease, stroke .2s ease, opacity .2s ease;
  cursor:pointer;
  pointer-events:all;
}
.stepa__area.is-active{
  fill: rgba(102, 174, 221, .51);
  stroke: none;
}
.stepa__area:hover{ fill: rgba(102, 174, 221, .32); }

.stepa__result{ text-align:center; }
.stepa__value{
  font-size:46px;
  font-weight:700;
  color:#343434;
  line-height:1.05;
  margin: 12px 0 6px;
}
.stepa__sub{
  font-size:25px;
  color:#343434;
  margin-bottom:22px;
	margin-top:10px;
  font-weight:regular;
}
.stepa__cta{
  display:inline-block;
  padding:18px 28px;
  border-radius:10px;
  background:#66aedd;
  color:#fff;
  font-weight:600;
  text-decoration:none;
	font-size:16px;
}
.stepa__cta:hover{ filter:brightness(.95); }

@media (max-width: 980px){
  .stepa{ grid-template-columns: 1fr; }
  .stepa__center{ margin-left:0; margin-right:0; }
  .stepa__panel--left{ margin-right:0; }
  .stepa__panel--right{ margin-left:0; }
  .stepa__imageWrap{ width:min(560px, 100%); margin: 0 auto; }
}

/* =========================================================
   RADIO LOOK (checkbox behavior) + active color #65BCEA
   Vložit na konec kalkulacka.css
   ========================================================= */

:root{
  --stepa-accent: #65BCEA;
  --stepa-border: #cfd8e3;
  --stepa-bg-active: rgba(101, 188, 234, .08);
}

/* 1) checkboxy necháme funkčně, ale vizuálně je skryjeme */
.stepa__item{
  position: relative;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
	padding-left:0px;
	padding-right:10px;
	padding-top:4px;
	padding-bottom:4px;
  border-radius: 12px;
}

.stepa__item input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 2) odsazení textu kvůli "radio" kolečku */
.stepa__itemText{
  position: relative;
  padding-left: 34px;
  line-height: 1.3;
}

/* 3) radio kroužek */
.stepa__itemText::before{
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--stepa-border);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* 4) vnitřní tečka */
.stepa__itemText::after{
  content: '';
  position: absolute;
  left: 5px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stepa-accent);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s ease, transform .18s ease;
}

/* 5) hover */
.stepa__item:hover .stepa__itemText::before{
  border-color: var(--stepa-accent);
}

/* 6) ACTIVE stav (moderní, nejspolehlivější) */
.stepa__item:has(input[type="checkbox"]:checked){
  background: var(--stepa-bg-active);
}

.stepa__item:has(input[type="checkbox"]:checked) .stepa__itemText{
 
}

.stepa__item:has(input[type="checkbox"]:checked) .stepa__itemText::before{
  border-color: var(--stepa-accent);
  box-shadow: 0 0 0 4px rgba(101, 188, 234, .12);
}

.stepa__item:has(input[type="checkbox"]:checked) .stepa__itemText::after{
  opacity: 1;
  transform: scale(1);
}

/* 7) Barva pro SVG zvýraznění oblasti */
.stepa__area{
  fill: rgba(101, 188, 234, 0);
  stroke: rgba(0,0,0,0);
  transition: fill .2s ease, stroke .2s ease;
}

.stepa__area.is-active{
  fill: rgba(101, 188, 234, .28);
  stroke: none;
}

/* 8) CTA barva (volitelné – když chceš sjednotit s accentem) */
.stepa__cta{
  background: var(--stepa-accent);
}
.stepa__cta:hover{
  filter: brightness(.95);
}