/* ============================================
   GLP-1 Centrum — kalkulačky (sdílený základ)

   Staví na existujícím design systému tématu:
   .card, .btn, .form-group, .form-label, .form-input (style.css).
   Tady je jen to, co kalkulačky přidávají navíc.

   Nové kalkulačky by měly vystačit s těmito třídami;
   pokud ne, přidávat obecné (calc-*), ne specifické pro jednu kalkulačku.
   ============================================ */

.calc-intro {
  text-align: center;
}

.calc-lead {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

/* Zalomení úvodní věty jen tam, kde je na řádek místo */
.calc-lead__break {
  display: none;
}

@media (min-width: 768px) {
  .calc-lead__break {
    display: inline;
  }
}

/* Karta kalkulačky nemá hover efekt jako klikací karty */
.calc-card {
  padding: var(--space-xl);
}

.calc-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* ---------- formulář ---------- */

.calc-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 560px) {
  .calc-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.calc-form__submit {
  width: 100%;
}

/* Chybné pole */
.form-input.is-invalid {
  border-color: #C0704F;
}

.form-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(192, 112, 79, 0.15);
}

/* ---------- výsledek ---------- */

.calc-result:empty {
  display: none;
}

.calc-error {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md);
  background: #FBEDE7;
  border-radius: var(--radius-md);
  color: #8A4A32;
  font-size: 0.9375rem;
}

.calc-output {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.calc-output__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.calc-output__number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}

.calc-output__label {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.calc-badge {
  display: inline-block;
  margin: var(--space-md) 0 0;
  padding: 6px var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Odstupňování bez „poplašných" barev — jde o edukaci, ne o diagnózu */
.calc-badge--optimal {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.calc-badge--watch {
  background: var(--color-accent-light);
  color: #8A5A2B;
}

/* ---------- škála ----------
   Zelené pásmo je uprostřed: u BMI je rizikový obojí konec,
   podváha stejně jako obezita. Barvy zůstávají v paletě webu,
   aby škála edukovala a nestrašila. */

.calc-scale {
  margin-top: var(--space-xl);
}

.calc-scale__track {
  position: relative;
  padding-top: 34px;
}

.calc-scale__bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.calc-scale__seg {
  display: block;
}

/* Poměry odpovídají rozsahu BMI 15–40 */
.calc-scale__seg--under  { flex: 3.5; background: #E3B9A6; }
.calc-scale__seg--normal { flex: 6.5; background: var(--color-primary); }
.calc-scale__seg--over   { flex: 5;   background: var(--color-accent); }
.calc-scale__seg--ob1    { flex: 5;   background: var(--color-accent-dark); }
.calc-scale__seg--ob2    { flex: 5;   background: #C0704F; }

.calc-scale__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  transition: left var(--transition-base);
  pointer-events: none;
}

.calc-scale__marker::after {
  content: "";
  flex: 1;
  width: 3px;
  background: var(--color-text);
  border-radius: 2px;
}

.calc-scale__bubble {
  padding: 3px 10px;
  margin-bottom: 3px;
  background: var(--color-text);
  color: var(--color-bg-white);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.calc-scale__ticks {
  position: relative;
  height: 18px;
  margin-top: 6px;
}

.calc-scale__tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.calc-scale__legend {
  margin: var(--space-sm) 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .calc-scale__marker {
    transition: none;
  }
}

.calc-range {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
}

.calc-output__range {
  margin: 0;
  color: var(--color-primary-dark);
}

.calc-output__range strong {
  color: var(--color-primary-dark);
  white-space: nowrap;
}

.calc-note {
  margin: var(--space-md) 0 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---------- CTA pod výsledkem ---------- */

.calc-cta {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-primary-lighter);
  border-radius: var(--radius-md);
  text-align: center;
}

.calc-cta__cover {
  display: block;
  width: 156px;
  height: auto;
  margin: 0 auto var(--space-md);
}

.calc-cta__text {
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}

/* Na mobilu tlačítko přetékalo z bloku: globální .btn má `white-space: nowrap`
   a `.btn--large` padding 36 px po stranách, takže mělo pevných 288 px,
   zatímco uvnitř bloku je při 360 px displeji jen ~200 px. */
@media (max-width: 560px) {
  .calc-cta {
    padding: var(--space-md);
  }

  .calc-cta .btn {
    display: flex;
    width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    white-space: normal;
  }
}

/* ---------- modal s e-bookem ---------- */

.calc-modal[hidden] {
  display: none;
}

.calc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.calc-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 52, 54, 0.55);
  animation: calcFade var(--transition-fast) ease;
}

.calc-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-xl));
  overflow-y: auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
  animation: calcRise var(--transition-base) ease;
}

@keyframes calcFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes calcRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .calc-modal__overlay,
  .calc-modal__dialog {
    animation: none;
  }
}

.calc-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.75rem;
  line-height: 1;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calc-modal__close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.calc-modal__title {
  margin: 0 0 var(--space-sm);
  font-size: 1.5rem;
}

.calc-modal__lead {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .calc-modal__dialog {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
  }

  .calc-modal__title {
    font-size: 1.25rem;
  }
}

/* Fluent Forms uvnitř modalu.
   Plugin si do stránky vypisuje inline pravidlo
   form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style) (0,3,1),
   které přebíjí i theme override — proto trojité opakování třídy,
   aby specificita (0,5,1) spolehlivě vyhrála. */

.calc-modal .fluentform form .ff-btn-submit.ff-btn-submit.ff-btn-submit {
  width: 100%;
  padding: 16px 32px;
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calc-modal .fluentform form .ff-btn-submit.ff-btn-submit.ff-btn-submit:hover {
  background: var(--color-accent-dark);
  color: var(--color-text);
}

/* Poznámka o zpracování e-mailu je na homepage na tmavém pozadí (dědí bílou),
   v modalu je podklad světlý — barvu je nutné určit explicitně. */
.calc-modal .ebook-privacy-note {
  margin-top: var(--space-md);
  color: var(--color-text-secondary);
  text-align: center;
  opacity: 1;
}

.calc-modal .ebook-privacy-note a {
  color: var(--color-primary-dark);
}

/* Turnstile má pevnou šířku — bez tohohle by zůstal u levého okraje */
.calc-modal .ff-el-turnstile,
.calc-modal .cf-turnstile {
  display: inline-block;
}

/* Bez zbytečné mezery pod posledním prvkem formuláře */
.calc-modal .fluentform .ff-el-group:last-of-type {
  margin-bottom: 0;
}

/* Zamezí scrollování stránky pod otevřeným modalem */
body.calc-modal-open {
  overflow: hidden;
}

/* ---------- patička kalkulačky ---------- */

.calc-disclaimer {
  margin-top: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ---------- rozcestník /edukace/ ----------
   Zobrazí se jen když je v Customizeru prázdný cíl (tj. nástrojů je víc). */

.edukace-list {
  display: grid;
  gap: var(--space-md);
}

.edukace-item {
  display: block;
  padding: var(--space-lg);
  text-decoration: none;
}

.edukace-item__title {
  margin: 0 0 var(--space-xs);
  font-size: 1.25rem;
  color: var(--color-primary-dark);
}

.edukace-item__desc {
  margin: 0;
  color: var(--color-text-secondary);
}