/* ==========================================================================
   CONFIGURATOR — kalkulačka s odhadem ceny
   ========================================================================== */

.cfg-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}

/* --- levý sloupec: volby --- */
.cfg-controls{ display:flex; flex-direction:column; gap:2.2rem; }

.cfg-group{ display:flex; flex-direction:column; gap:.65rem; }
.cfg-group-label{
  font-size:.68rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}

/* --- segmentované přepínače --- */
.cfg-seg{
  display:flex; flex-wrap:wrap; gap:6px;
}
.cfg-seg button{
  font:inherit; font-size:.9rem; cursor:pointer;
  padding:.55rem 1rem; border-radius:2px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-2);
  transition:border-color .2s, background .2s, color .2s;
}
.cfg-seg button:hover{ border-color:var(--oak); color:var(--ink); }
.cfg-seg button[aria-pressed="true"]{
  border-color:var(--oak);
  background:var(--oak-soft);
  color:var(--ink);
}

/* barevný puntík u barvy komponent */
.cfg-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  margin-right:.45rem; vertical-align:middle;
  border:1px solid var(--line);
}

/* --- posuvník délky --- */
.cfg-range-wrap{
  display:flex; align-items:center; gap:1rem;
}
.cfg-range-wrap input[type="range"]{
  flex:1; accent-color:var(--oak);
  height:4px; cursor:pointer;
}
.cfg-range-val{
  font-variant-numeric:tabular-nums; font-weight:600;
  font-size:1rem; min-width:4.5ch; text-align:right; color:var(--ink);
}

/* --- skupiny vybavení --- */
.cfg-extras{ display:flex; flex-direction:column; gap:2rem; }

.cfg-equip-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:.5rem; margin-bottom:.5rem;
}
.cfg-equip-name{ font-size:.95rem; color:var(--ink); font-weight:500; }
.cfg-equip-info{
  font-variant-numeric:tabular-nums; font-weight:600;
  font-size:.76rem; color:var(--muted); white-space:nowrap;
}

/* mřížka variantních karet */
.cfg-variants{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:10px;
}

/* karta varianty */
.cfg-vcard{
  display:flex; flex-direction:column;
  cursor:pointer; border-radius:2px;
  border:1px solid var(--line);
  background:transparent;
  font:inherit; text-align:left; color:var(--ink-2);
  overflow:hidden;
  transition:border-color .2s, background .2s, color .2s;
  padding:0;
}
.cfg-vcard:hover{ border-color:var(--oak); color:var(--ink); }
.cfg-vcard[aria-pressed="true"]{
  border-color:var(--oak);
  background:var(--oak-soft);
  color:var(--ink);
}

/* náhled — fotka nebo zástupný blok */
.cfg-vcard img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}
.thumb-ph{
  width:100%; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 6px,
      var(--line) 6px,
      var(--line) 7px
    ),
    var(--line-soft);
}
.thumb-ph span{
  font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

.cfg-vcard-body{ padding:.55rem .7rem .65rem; }
.cfg-vcard-name{ font-size:.86rem; line-height:1.3; }
.cfg-vcard-price{
  font-variant-numeric:tabular-nums; font-weight:600;
  font-size:.78rem; color:var(--muted); margin-top:.2rem;
}
.cfg-vcard[aria-pressed="true"] .cfg-vcard-price{ color:var(--oak); }

/* --- rozpis položek ve výsledkovém panelu --- */
.cfg-items{ display:flex; flex-direction:column; gap:.35rem; }
.cfg-item{
  display:flex; justify-content:space-between; gap:.5rem;
  font-size:.82rem; color:var(--ink-2);
}
.cfg-item span:last-child{
  font-variant-numeric:tabular-nums; font-weight:600;
  white-space:nowrap;
}

/* --- pravý sloupec: výsledek --- */
.cfg-result{
  position:sticky; top:6rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  padding:clamp(1.5rem,3vw,2.2rem);
  display:flex; flex-direction:column; gap:1.4rem;
}

.cfg-result-label{
  font-size:.68rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}

.cfg-price-range{
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,3vw,2rem); font-weight:600;
  color:var(--ink); line-height:1.2;
}

.cfg-breakdown{ display:flex; flex-direction:column; gap:.5rem; }
.cfg-row{
  display:flex; justify-content:space-between; gap:.5rem;
  font-size:.88rem; color:var(--ink-2);
}
.cfg-row span:last-child{
  font-variant-numeric:tabular-nums; font-weight:600;
  white-space:nowrap;
}

.cfg-divider{ height:1px; background:var(--line); }

.cfg-included{
  font-size:.82rem; color:var(--muted); line-height:1.55;
}

.cfg-disclaimer{
  font-size:.82rem; color:var(--muted); line-height:1.55;
  border-top:1px solid var(--line); padding-top:1rem;
}

@media (max-width:560px){
  .cfg-variants{ grid-template-columns:repeat(2, 1fr); }
}

/* --- mobilní rozložení --- */
@media (max-width:820px){
  .cfg-grid{ grid-template-columns:1fr; }
  .cfg-result{
    position:fixed; left:0; right:0; bottom:0;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
    z-index:30;
    box-shadow:0 -4px 24px rgba(0,0,0,.12);
    padding:1rem 1.2rem;
    gap:.6rem;
  }
  /* na mobilu kompaktnější — skryj rozpad, nech jen rozpětí */
  .cfg-breakdown,
  .cfg-items,
  .cfg-included,
  .cfg-disclaimer{ display:none; }
  /* odsaď obsah stránky nad fixed panel */
  .cfg-controls{ padding-bottom:6rem; }
}