/* Mamahotel quiz "Kdy se odhlásíš z Mamahotelu?" (QUIZ-01, D-06, D-07): a hotel check-out form with a neon game HUD.
   Portability contract: every selector starts with .mh- (class or attribute on a .mh- class) and every colour and glow comes from
   tokens.css (var(--mh-*)). No image, no library, no confetti. Reduced motion is a scoped block at the end of this file. */

/* ---- the card (same width rules the reception card above it uses) ---- */
.mh-quiz {
  width: calc(100% - 2 * var(--mh-space-4));
  margin: var(--mh-space-8) auto 0;
  padding: var(--mh-space-6) var(--mh-space-4);
  border: 1px solid var(--mh-surface-line);
  border-radius: var(--mh-radius-lg);
  background: var(--mh-surface);
  box-shadow: var(--mh-shadow-lg);
}

.mh-quiz__kicker {
  margin: 0 0 var(--mh-space-1);
  color: var(--mh-accent);
  font-family: var(--mh-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mh-quiz .mh-h2 {
  font-size: 1.6rem;
}

/* ---- HUD: step, score and percent above a neon progress bar ---- */
.mh-quiz__hud {
  margin: var(--mh-space-4) 0 var(--mh-space-2);
}

.mh-quiz__hud-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mh-space-1) var(--mh-space-3);
  margin: 0 0 var(--mh-space-2);
  font-family: var(--mh-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mh-quiz__score {
  color: var(--mh-accent);
}

.mh-quiz__pct {
  margin-left: auto;
  color: var(--mh-accent);
  white-space: nowrap;                     /* "25 %" never breaks between the number and the sign */
}

.mh-quiz__bar {
  height: 12px;
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-full);
  background: var(--mh-bg);
  overflow: hidden;
}

.mh-quiz__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--mh-radius-full);
  background: var(--mh-accent);
  box-shadow: var(--mh-glow-soft);
  transition: width 300ms ease;
}

/* ---- question and answers: thumb cards ---- */
.mh-quiz__question,
.mh-quiz__result-title {
  margin: var(--mh-space-6) 0 var(--mh-space-1);
  font-family: var(--mh-font-display);
  font-size: 1.375rem;
  line-height: 1.25;
}

.mh-quiz__question:focus-visible,
.mh-quiz__result-title:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 4px;
}

.mh-quiz__hint {
  margin: 0 0 var(--mh-space-4);
  color: var(--mh-text-muted);
}

.mh-quiz__answers {
  display: grid;
  gap: var(--mh-space-3);
}

.mh-quiz__answer {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.mh-quiz__answer:hover {
  border-color: var(--mh-accent);
}

.mh-quiz__answer[aria-pressed="true"] {
  border-color: var(--mh-accent);
  background: var(--mh-accent);
  color: var(--mh-accent-ink);
  box-shadow: var(--mh-glow-soft);
}

/* the back button is quiet text, still a 48 px target */
.mh-quiz__back {
  margin-top: var(--mh-space-3);
  padding-left: 0;
  border-color: transparent;
  color: var(--mh-text-muted);
}

.mh-quiz__back:hover {
  color: var(--mh-text);
}

/* ---- the result: an achievement badge ---- */
.mh-quiz__result {
  margin-top: var(--mh-space-6);
  padding: var(--mh-space-6) var(--mh-space-4);
  border: 2px solid var(--mh-accent);
  border-radius: var(--mh-radius-md);
  background: var(--mh-bg);
  box-shadow: var(--mh-glow-soft);
}

.mh-quiz__badge {
  display: inline-block;
  margin: 0;
  padding: var(--mh-space-1) var(--mh-space-3);
  border: 2px solid var(--mh-accent);
  border-radius: var(--mh-radius-full);
  color: var(--mh-accent);
  font-family: var(--mh-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  /* slide in with one neon flash; un-hiding the panel (hidden attribute) restarts it on every result and every retry */
  animation: mh-quiz-badge-in 600ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 1 both;
}

@keyframes mh-quiz-badge-in {
  from { opacity: 0; transform: translateX(-28px) scale(0.92); box-shadow: none; }
  60% { opacity: 1; transform: translateX(0) scale(1.06); box-shadow: var(--mh-glow-accent); }
  to { opacity: 1; transform: translateX(0) scale(1); box-shadow: var(--mh-glow-soft); }
}

.mh-quiz__result-title {
  margin-top: var(--mh-space-4);
  font-size: 1.5rem;
}

.mh-quiz__emoji {
  margin-right: var(--mh-space-1);
}

.mh-quiz__result-text {
  margin: 0 0 var(--mh-space-4);
  font-size: 1.0625rem;
}

/* D-03: the disclaimer is body-sized copy, never hidden */
.mh-quiz__disclaimer {
  margin: 0 0 var(--mh-space-4);
  padding-top: var(--mh-space-3);
  border-top: 1px dashed var(--mh-border-strong);
  color: var(--mh-text-muted);
  font-size: 0.9375rem;
}

/* D-10: the one contact form sits under the result, followed by WhatsApp and retry */
.mh-quiz__lead-in {
  margin: 0 0 var(--mh-space-4);
  font-weight: 600;
}

.mh-quiz__result [data-mh-quiz-lead-slot] {
  margin-bottom: var(--mh-space-4);
  scroll-margin-top: var(--mh-space-4);
}

.mh-quiz__wa {
  width: 100%;
  margin-bottom: var(--mh-space-3);
}

.mh-quiz__invest {
  margin: 0 0 var(--mh-space-3);
}

.mh-quiz__invest .mh-btn {
  width: 100%;
}

.mh-quiz__retry {
  width: 100%;
}

/* ---- no JavaScript / config error fallback ---- */
.mh-quiz__fallback {
  display: grid;
  justify-items: start;
  gap: var(--mh-space-3);
  margin-top: var(--mh-space-4);
}

.mh-quiz__fallback p {
  margin: 0;
}

.mh-quiz__errors {
  margin: 0;
  padding-left: var(--mh-space-6);
  color: var(--mh-danger);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* ---- reduced motion: no badge animation, no bar or answer transition ---- */
@media (prefers-reduced-motion: reduce) {
  .mh-quiz__badge {
    animation: none;
  }

  .mh-quiz__fill,
  .mh-quiz__answer {
    transition: none;
  }
}