/* Konfigurátor — doplněk k aiweb.css, sdílí s ním všechny tokeny.
   Samostatný soubor, ať se hlavní stránka nemusí kvůli podstránce stahovat znovu. */

.konf { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.konf__intro { max-width: 60ch; margin-bottom: 2.5rem; }
.konf__intro h1 { margin: .6rem 0 .8rem; }

.konf__noscript {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); padding: 1.2rem 1.4rem; max-width: 60ch;
}

.konf__layout {
  display: grid; gap: 1.75rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 60rem) {
  .konf__layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
}

/* ---------- kroky ---------- */

.konf__nav {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  font: 500 .78rem/1 var(--mono);
}
.konf__nav-item {
  padding: .45rem .7rem; border-radius: 999px;
  border: 1px solid var(--line-soft); color: var(--muted-2);
}
.konf__nav-item.is-current { border-color: var(--acc); color: var(--acc); }
.konf__nav-item.is-done { color: var(--muted); cursor: pointer; }
.konf__nav-item.is-done:hover { border-color: var(--line); color: var(--text); }

.konf__step { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.konf__step legend { padding: 0; }
.konf__step .step__title { margin-bottom: .4rem; }
.konf__step .step__hint { color: var(--muted); margin-bottom: 1.1rem; max-width: 62ch; }

/* ---------- dlaždice výběru ---------- */

.konf__cards { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
  .konf__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .konf__cards--balicky, .konf__cards--sablony { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

.konf-karta {
  position: relative; text-align: left; cursor: pointer;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 1.1rem 1.2rem; font: inherit;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .15s, background .15s;
}
.konf-karta:hover { border-color: var(--line); background: var(--card-2); }
.konf-karta[aria-pressed="true"] {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 1px var(--acc);
  background: var(--card-2);
}
.konf-karta h3 { font-size: 1.15rem; }
.konf-karta__tag {
  align-self: flex-start;
  font: 500 .68rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc-ink); background: var(--acc); border-radius: 999px; padding: .3rem .6rem;
}
.konf-karta__cena { font: 600 1.35rem/1 var(--head); color: var(--acc); }
.konf-karta__popis { color: var(--muted); font-size: .95rem; }
.konf__volby { margin-top: 1.2rem; display: grid; gap: .6rem; }
.konf__volby-h {
  font: 500 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2);
}
.konf__volby > div { display: grid; gap: .6rem; }
.konf-rozklad__vol {
  font: 500 .62rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--flow); border: 1px solid var(--flow); border-radius: 999px;
  padding: .18rem .4rem; margin-left: .4rem; white-space: nowrap;
}

.konf-rozklad { margin-top: .3rem; }
.konf-rozklad__h {
  font: 500 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); margin: .7rem 0 .4rem;
}
.konf-rozklad__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.konf-rozklad__list li { display: grid; gap: .1rem; }
.konf-rozklad__radek {
  display: flex; justify-content: space-between; gap: .8rem; align-items: baseline;
  font-size: .92rem; color: var(--text);
}
.konf-rozklad__radek b { white-space: nowrap; color: var(--acc); }
.konf-rozklad__popis { color: var(--muted-2); font-size: .82rem; line-height: 1.45; }

.konf-karta__rocne { color: var(--muted-2); font-size: .82rem; font-family: var(--mono); }
.konf-karta__hodnota {
  font: 500 .8rem/1.45 var(--mono); color: var(--flow);
  border-left: 2px solid var(--flow); padding-left: .6rem;
}
.konf-karta__pro { color: var(--muted-2); font-size: .85rem; font-family: var(--mono); }
.konf-karta__obsah {
  list-style: none; margin: .3rem 0 0; padding: 0;
  color: var(--muted); font-size: .92rem; display: grid; gap: .35rem;
}
.konf-karta__obsah li { padding-left: 1.1rem; position: relative; }
.konf-karta__obsah li::before { content: "·"; position: absolute; left: .3rem; color: var(--acc); }

/* ---------- živý náhled šablony ---------- */

.konf__nahled { margin: 1.4rem 0 0; }
.konf__nahled-ram {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card);
}
.konf__nahled-lista {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); background: var(--bg-2);
}
.konf__nahled-lista span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); }
.konf__nahled-lista b {
  margin-left: .6rem; font: 400 .75rem/1 var(--mono); color: var(--muted-2);
}
.konf__nahled iframe, iframe#konf-nahled {
  display: block; width: 100%; height: 32rem; border: 0; background: #fff;
}
@media (max-width: 40rem) { iframe#konf-nahled { height: 24rem; } }
.konf__nahled figcaption {
  color: var(--muted-2); font-size: .82rem; margin-top: .6rem; line-height: 1.5;
}

/* ---------- doplňky ---------- */

.konf__doplnky { display: grid; gap: .6rem; }
.konf-doplnek {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: .9rem 1.1rem; cursor: pointer;
}
.konf-doplnek:hover { border-color: var(--line); }
.konf-doplnek:has(input[type=checkbox]:checked) { border-color: var(--acc); background: var(--card-2); }
.konf-doplnek input[type=checkbox] { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--acc); }
.konf-doplnek__text { display: grid; gap: .2rem; }
.konf-doplnek__popis { color: var(--muted); font-size: .9rem; }
.konf-doplnek__cena { font: 600 1rem/1.4 var(--head); color: var(--acc); white-space: nowrap; }
.konf-doplnek__pocet {
  width: 3.6rem; padding: .3rem .4rem; text-align: center;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}

/* ---------- souhrn ---------- */

.konf__souhrn {
  position: sticky; top: 1rem; z-index: 2;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.2rem 1.3rem;
}
@media (max-width: 59.99rem) {
  /* Na úzkém displeji patří cena nad kroky — jinak ji nikdo neuvidí. */
  .konf__souhrn { order: -1; }
}
.konf__souhrn-h { font-size: 1rem; margin-bottom: .8rem; }
.konf__polozky { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; }
.konf__polozky li { display: flex; gap: .8rem; justify-content: space-between; align-items: baseline; color: var(--muted); }
.konf__polozky b { color: var(--text); white-space: nowrap; }
.konf__prazdno { color: var(--muted-2); font-size: .92rem; }
.konf__prazdno[hidden] { display: none; }

.konf__soucet { border-top: 1px solid var(--line-soft); margin-top: .9rem; padding-top: .9rem; display: grid; gap: .4rem; }
.konf__radek { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; color: var(--muted); font-size: .92rem; }
.konf__radek--total { color: var(--text); font-size: 1rem; }
.konf__radek--total b { font: 700 1.4rem/1 var(--head); color: var(--acc); }
.konf__radek--zaloha b { color: var(--text); }
.konf__radek--zdarma { color: var(--muted-2); font-size: .85rem; }
.konf__radek--zdarma b { color: var(--acc); font-family: var(--mono); font-size: .85rem; }
.konf__note { color: var(--muted-2); font-size: .78rem; margin-top: .9rem; line-height: 1.5; }

/* ---------- kontakt a akce ---------- */

.konf__grid2 { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); margin-bottom: .9rem; }
@media (min-width: 40rem) { .konf__grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.konf__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }