/* --- Bezpečné chování prvků, žádné horizontální přetečení --- */
html { box-sizing: border-box; }
*,*::before,*::after { box-sizing: inherit; }
body { overflow-x: hidden; }

/* --- Tabulka škály (zachová čitelnost a nepřeteče) --- */
.rating-table{
  width: 100%;
  max-width: 720px;
  margin: 1rem auto;
  border-collapse: collapse;
  table-layout: fixed;              /* buňky se zalamují */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.rating-table th, .rating-table td{ padding: .75rem 1rem; }
.rating-table th{ background: var(--blue); color: #fff; }

/* --- Panel a jeho obsah (bez overflow) --- */
.panel{ overflow: hidden; }
.panel img, .panel video{ max-width: 100%; height: auto; display: block; }

/* --- Otázka + škála: desktop výchozí rozložení (text | škála) --- */
.question{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 16px;
}

/* Výchozí „flex“ necháme být, ale na menších šířkách ho přepíšeme na grid */
.scale{
  gap: .5rem;
}

/* Klikací „bubliny“ 1–5 – jednotné rozměry, ať nepřetečou */
.scale-item input{ display: none; }
.scale-item span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: .4rem .8rem;             /* ponechá kruh, ale dovolí zalomení */
  border-radius: 50%;
  border: 2px solid var(--primary);
  color: var(--text);
  cursor: pointer;
  transition: background .35s ease-in-out, color .35s ease-in-out, border-color .35s ease-in-out, transform .18s ease;
  white-space: nowrap;
}
.scale-item:hover span{ transform: translateY(-1px); }
.scale-item input:checked + span{
  background: var(--primary);
  color: #fff;
}

/* --- Akce / tlačítko odeslat --- */
.actions{ text-align: center; margin-top: 2rem; }
#evaluateBtn{
  padding: 1rem 1.8rem;
  font-weight: 700;
  border-radius: 35px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .35s ease-in-out, transform .28s ease, box-shadow .28s ease;
}
#evaluateBtn:hover{
  background: var(--primary-strong);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* =========================
   TABLET ≤ 1024px
   ========================= */
@media (max-width: 1024px){
  .page-title{ font-size: 1.9rem; }
  .panel{ padding: 1.6rem; }

  /* Tabulka širší a stabilní */
  .rating-table{
    max-width: 860px;
    width: 100%;
    font-size: .96rem;
  }

  /* Text nahoře, škála pod ním – přehlednější */
  .question{
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }

  /* Škála jako grid 5 sloupců – nepřeteče */
  .scale{
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(48px, 1fr);
    gap: .6rem;
  }

  .scale-item span{
    min-width: 48px;
    min-height: 48px;
    font-weight: 700;
  }
}

/* =========================
   MOBIL ≤ 640px
   ========================= */
@media (max-width: 640px){
  .page-title{ font-size: 1.6rem; line-height: 1.2; }
  .panel{ padding: 1.2rem; border-radius: 1rem; }

  /* Tabulka na plnou šířku, menší paddingy */
  .rating-table{ width: 100% !important; font-size: .95rem; }
  .rating-table th, .rating-table td{ padding: .6rem .75rem; }

  .q-text{
    font-size: .98rem;
    word-break: break-word;
    overflow-wrap: anywhere;        /* dlouhé řádky se zalomí, neutečou doprava */
  }

  .question{
    grid-template-columns: 1fr;
    gap: .6rem;
    padding: .9rem 1rem;
  }

  .scale{
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;         /* pět stejných buněk přes šířku */
    gap: .5rem;
  }

  .scale-item span{
    min-width: 44px;
    min-height: 44px;
    font-size: 1rem;
  }

  /* Odeslání po ruce, ale nebrání scrollu */
  .actions{
    position: sticky;
    bottom: 8px;
    z-index: 5;
    padding: 6px 0;
    backdrop-filter: blur(6px);
  }
  #evaluateBtn{
    width: 100%;
    min-height: 52px;
    font-size: 1.05rem !important;
  }
}

/* =========================
   EXTRA MALÉ ≤ 360px
   ========================= */
@media (max-width: 360px){
  .page-title{ font-size: 1.45rem; }
  .scale{ gap: .45rem; }
  .scale-item span{
    min-width: 40px;
    min-height: 40px;
    font-size: .98rem;
  }
  #evaluateBtn{ min-height: 50px; font-size: 1rem !important; }
}

/* Respekt k preferenci omezeného pohybu */
@media (prefers-reduced-motion: reduce){
  .scale-item span, #evaluateBtn{ transition: none !important; }
}

/* ============================
   VÝSLEDKY DOTAZNÍKU – RESPONSIVE
   Navazuje na: .panel, .area, .question, .muted, .actions, .btn
   ============================ */

/* Bezpečné zalamování dlouhých textů, žádné horizontální přetékání */
#resultsPanel, #results, .question, .area, .muted, .page-subtitle, .page-title {
  overflow-wrap: anywhere;
  word-break: normal;
}
.panel { overflow: hidden; }
.panel img, .panel video { max-width: 100%; height: auto; display: block; }

/* „Řádky“ s oblastmi – desktop: název+verdict vlevo, součet vpravo */
.question{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 16px;
  margin: .8rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: .75rem;
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

/* Nadpisy sekcí výsledků */
.area h2{
  color: var(--primary);
  font-size: 1.8rem;
  margin: 1rem 0 .75rem;
}

/* Jemné doladění typografie */
.page-title{ line-height: 1.2; }
.page-subtitle, .muted{ opacity:.9; }

/* Akce – tlačítka vedle sebe, zalamují se když je málo místa */
.actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}
.actions .btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 44px;
  padding: .9rem 1.4rem;
  border-radius: 35px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  border:none;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: background .3s ease, transform .28s ease, box-shadow .28s ease;
}
.actions .btn:hover{
  background: var(--primary-strong);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* =========================
   TABLET ≤ 1024 px
   ========================= */
@media (max-width: 1024px){
  .page-title{ font-size: 1.9rem; }
  .panel{ padding: 1.6rem; }
  .area h2{ font-size: 1.6rem; }

  /* Text nahoře, součet pod ním – čitelnější */
  .question{
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
}

/* =========================
   MOBIL ≤ 640 px
   ========================= */
@media (max-width: 640px){
  .page-title{ font-size: 1.6rem; }
  .page-subtitle{ font-size: 1rem; }
  .panel{ padding: 1.2rem; border-radius: 1rem; }
  .area h2{ font-size: 1.35rem; }

  .question{
    grid-template-columns: 1fr;
    padding: .9rem 1rem;
    gap: .6rem;
  }

  /* Tlačítka pod sebou na plnou šířku, ať se netlačí */
  .actions{ gap: 8px; }
  .actions .btn{
    width: 100%;
    min-height: 50px;
    font-size: 1.02rem;
  }
}

/* =========================
   EXTRA MALÉ ≤ 360 px
   ========================= */
@media (max-width: 360px){
  .page-title{ font-size: 1.45rem; }
  .actions .btn{ min-height: 48px; font-size: .98rem; }
}

/* Preferované omezení pohybu */
@media (prefers-reduced-motion: reduce){
  .actions .btn, .question{
    transition: none !important;
  }
}

/* === Vstupní pole a popisek === */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-group label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: white;
  margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"] {
  padding: 10px 14px;
  border: 2px solid #ff762f;
  border-radius: 12px;
  font-size: 16px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Poppins', sans-serif;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.form-group input:focus {
  border-color: #004a99;
  box-shadow: 0 0 6px rgba(0, 74, 153, 0.3);
}

.form-group input::placeholder {
  color: #999;
  font-style: italic;
}

/* volitelně: jemný hover efekt */
.form-group input:hover {
  border-color: #ff9755;
}