/* =============================================
   TSH kviz - styly (typologicky kviz)
   ============================================= */

:root {
  /* color(1)/color(2)/color(17) jsou Oxygen builder odkazy na globalni
     paletu, nejsou to platne CSS funkce mimo editor — proto tady natvrdo
     hex hodnoty ze stejne palety (Design Settings > Global Colors) */
  --tsh-quiz-brand:   #1ec185;
  --tsh-quiz-accent:  #f7b32b;
  --tsh-quiz-bg:      #f7f7f7;
  --tsh-quiz-ink:     #1a1a1a;
  --tsh-quiz-cream:   color-mix(in srgb, #f7b32b 12%, #f7f7f7);
  --tsh-quiz-foam:    color-mix(in srgb, #f7b32b 4%, white);
  --tsh-quiz-muted:   #666666;
  --tsh-quiz-border:  color-mix(in srgb, #f7b32b 20%, #f7f7f7);
  --tsh-quiz-shadow:  rgba(0, 0, 0, 0.12);
}

.quiz-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: Lora, serif;
  color: var(--tsh-quiz-ink);
}

.quiz-header {
  text-align: center;
  margin-bottom: 1rem;
}

.quiz-header h1 {
  font-family: EdoPro, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--tsh-quiz-brand);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.quiz-header p {
  color: var(--tsh-quiz-muted);
  font-size: 0.95rem;
}

.progress-bar-wrap {
  background: var(--tsh-quiz-cream);
  border-radius: 99px;
  height: 8px;
  margin-bottom: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--tsh-quiz-border);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--tsh-quiz-accent), var(--tsh-quiz-brand));
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

.progress-label {
  text-align: right;
  font-size: 0.8rem;
  color: var(--tsh-quiz-muted);
  margin-bottom: 1.5rem;
}

.question-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 24px var(--tsh-quiz-shadow), 0 1px 4px var(--tsh-quiz-shadow);
  border: 1px solid var(--tsh-quiz-border);
  margin-bottom: 1.5rem;
  animation: tsh-quiz-fadeUp 0.35s ease both;
}

@keyframes tsh-quiz-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.question-num {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tsh-quiz-accent);
  margin-bottom: 0.75rem;
}

.question-text {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  color: var(--tsh-quiz-ink);
  line-height: 1.45;
  margin-bottom: 1.5rem;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.option-btn {
  background: var(--tsh-quiz-foam);
  border: 2px solid var(--tsh-quiz-border);
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
  text-align: left;
  font-size: 0.95rem;
  color: var(--tsh-quiz-ink);
  cursor: pointer;
  transition: all 0.18s ease;
  width: 100%;
}

.option-btn:hover:not(:disabled) {
  background: var(--tsh-quiz-cream);
  border-color: var(--tsh-quiz-accent);
  transform: translateX(4px);
}

.option-btn.picked {
  background: var(--tsh-quiz-cream);
  border-color: var(--tsh-quiz-brand);
  color: var(--tsh-quiz-ink);
  font-weight: 700;
}

.option-btn:disabled { cursor: default; }

.option-letter {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--tsh-quiz-cream);
  border-radius: 50%;
  text-align: center;
  line-height: 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tsh-quiz-muted);
  margin-right: 0.6rem;
}

.option-btn.picked .option-letter { background: var(--tsh-quiz-brand); color: white; }

.feedback {
  margin-top: 1rem;
  display: none;
}

.feedback.show { display: block; animation: tsh-quiz-fadeUp 0.25s ease both; }

.feedback-link {
  display: inline-block;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: var(--tsh-quiz-cream);
  color: var(--tsh-quiz-ink);
  border-left: 3px solid var(--tsh-quiz-brand);
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
}

.feedback-link:hover { text-decoration: underline; }

.next-btn {
  display: none;
  margin-top: 1.2rem;
  background: var(--tsh-quiz-accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 12px var(--tsh-quiz-shadow);
}

.next-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--tsh-quiz-shadow); }
.next-btn.show  { display: inline-block; animation: tsh-quiz-fadeUp 0.3s ease both; }

.result-card {
  background: white;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 24px var(--tsh-quiz-shadow);
  border: 1px solid var(--tsh-quiz-border);
  text-align: center;
  display: none;
  animation: tsh-quiz-fadeUp 0.45s ease both;
}

.result-card.show { display: block; }

.result-emoji {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
  animation: tsh-quiz-pop 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes tsh-quiz-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.result-title {
  font-family: EdoPro, serif;
  font-weight: 400;
  font-size: 2rem;
  color: var(--tsh-quiz-brand);
  margin: 0 0 0.6rem;
}

.result-text {
  color: var(--tsh-quiz-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto 1.5rem;
}

.restart-btn {
  background: transparent;
  border: 2px solid var(--tsh-quiz-border);
  color: var(--tsh-quiz-ink);
  border-radius: 10px;
  padding: 0.7rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}

.restart-btn:hover { background: var(--tsh-quiz-brand); color: white; }

/* --- dárek za email, zobrazen az po vysledku --- */
.quiz-reward {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--tsh-quiz-cream);
  border: 1px solid var(--tsh-quiz-border);
  border-radius: 12px;
}

.quiz-reward p {
  color: var(--tsh-quiz-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  text-align: left;
}

.quiz-reward .ml-form-checkboxRow label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
}

/* uzke mobily: stahnout horizontalni paddingy, at reward form nezbyva
   uzky uprostred (2rem result-card + 1.5rem reward = 112px z 350px sirky) */
@media (max-width: 480px) {
  .quiz-wrap    { padding-left: 0.5rem; padding-right: 0.5rem; }
  .question-card,
  .result-card  { padding-left: 1rem; padding-right: 1rem; }
  .quiz-reward  { padding-left: 1rem; padding-right: 1rem; }
}