/* ============ Samostatné styly pro formulář ============ */

:root{
  --bg:#0e1422;
  --bg-soft:#151b22;
  --text:#e8ecf2;
  --muted:#9aa6b2;
  --primary:#79c0ff;
  --primary-ink:#0b1a26;
  --ok:#16a34a;            /* zelená pro aktivní volby */
  --ok-ink:#07130b;
  --border:#202835;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --error:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:
    radial-gradient(1200px 800px at 15% 0%, #101828 0%, #0a1a2e 55%, #08131f 100%),
    linear-gradient(135deg, #0e1422 0%, #0a1a2e 100%);
  color:var(--text);
  line-height:1.6;
}

/* --- Header & nav (zarovnání horního menu) --- */
.container{width:min(1100px,92%); margin-inline:auto}
.site-header{border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(21,27,34,.6), rgba(21,27,34,0))}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; gap:.8rem}
.brand{
  color:var(--text); text-decoration:none; font-weight:800;
  background:var(--bg-soft); border:1px solid var(--border);
  padding:.35rem .6rem; border-radius:10px;
}
.nav__list{
  display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
  list-style:none; padding:0; margin:0; flex-wrap:wrap;
}
.nav__list a{
  color:var(--text); text-decoration:none; padding:.55rem .7rem; border-radius:10px;
}
.btn{display:inline-block; padding:.65rem .9rem; border-radius:10px; border:1px solid var(--border); font-weight:700; text-decoration:none}
.btn--primary{background:var(--primary); color:var(--primary-ink); border-color:transparent}
.btn--ghost{background:transparent; color:var(--text)}

.page{padding:2rem 0}
h1{font-family:"Poppins", ui-sans-serif, system-ui; font-size:clamp(1.6rem, 2.2vw + 1rem, 2.2rem); margin:.2rem 0 .6rem}
.lead{color:var(--muted); font-size:clamp(1.02rem, 1vw + .6rem, 1.2rem)}
.req{color:var(--primary); font-weight:800}

/* --- Form box --- */
.form{
  display:grid; gap:1rem; background:var(--bg-soft);
  border:1px solid var(--border); border-radius:var(--radius); padding:1rem;
  box-shadow:var(--shadow);
}
.seg{
  display:grid; gap:.6rem; padding:1rem; border:1px solid var(--border);
  border-radius:var(--radius); background:#0f1723;
}
.seg legend{font-weight:800; padding:0 .3rem}
.seg--error{border-color:var(--error); box-shadow:0 0 0 3px rgba(239, 68, 68, .22)}
.error{color:#fecaca; background:#7f1d1d; padding:.45rem .6rem; border-radius:10px; font-size:.9rem}

/* Layout helpers */
.form__row{display:grid; gap:.35rem}
.row{display:grid; gap:.8rem; grid-template-columns:1fr 1fr}
@media (max-width:820px){ .row{ grid-template-columns:1fr } }
.hint,.small-note{color:var(--muted); font-size:.9rem}

/* Inputs */
input, select, textarea{
  width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border);
  background:#0b0f15; color:var(--text);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(121,192,255,.22)
}

/* Chips (checkboxy, které zezelenají) */
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip-input{position:absolute; opacity:0; pointer-events:none}
.chip{
  padding:.5rem .75rem; border-radius:999px; border:1px solid var(--border);
  background:transparent; color:var(--text); cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
  user-select:none;
}
.chip:hover{transform:translateY(-1px)}
.chip-input:checked + .chip{ background:var(--ok); border-color:var(--ok); color:var(--ok-ink); font-weight:800 }

/* Range slider s plynulým vybarvením zleva */
.range-wrap{display:grid; gap:.35rem}
.range-top{display:flex; justify-content:space-between; align-items:center}
.range-top output{font-weight:800}
input[type="range"]{
  --fill: 0%;
  width:100%; appearance:none; height:8px; border-radius:999px; outline:none;
  background: linear-gradient(90deg, var(--ok) var(--fill), rgba(255,255,255,0.12) var(--fill));
  touch-action: pan-y; /* plynulejší na mobilech */
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--ok); cursor:pointer
}
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--ok); cursor:pointer
}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:transparent; padding:1.2rem 0; margin-top:2rem}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:.8rem}
.backtop{color:var(--muted); text-decoration:none}