/* =========================================================
   Quiz CSS
   Romm Coffee — "Find your perfect cup" quiz.

   Works with:
   - Pages/Quiz.cshtml
   - wwwroot/js/quiz.js
   - wwwroot/css/design-tokens.css
========================================================= */

/* =========================================================
   1. Shell
========================================================= */

.quiz-shell {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}

/* =========================================================
   2. Panels
========================================================= */

.quiz-panel {
  display: none;
}

.quiz-panel.is-active {
  display: block;
  animation: quiz-panel-in var(--transition-slow, 350ms ease) both;
}

@keyframes quiz-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   3. Intro
========================================================= */

.quiz-intro {
  padding-block: var(--space-5, 1.5rem);
}

.quiz-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  width: 96px;
  height: 96px;
  margin-bottom: var(--space-4, 1rem);

  font-size: 2rem;

  background: var(--color-accent-light, #fbf0d8);
  border-radius: var(--radius-full, 999px);
}

/* When the Lottie animation loads, the SVG replaces the emoji.
   The coffee-switch animation brings its own dial ring and
   ON/OFF labels, so drop the colored circle and let it
   breathe at a larger size. */
.quiz-intro-icon.has-lottie {
  font-size: 0;
  width: min(440px, 92%);
  height: 300px;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}

/* The composition has heavy transparent padding around the
   dial, so scale well past the box and let overflow crop it.
   Box + SVG scale together to keep the same crop framing. */
.quiz-intro-icon svg {
  width: 1030px !important;
  height: 1030px !important;
  flex-shrink: 0;
}

.quiz-panel-title {
  margin-bottom: var(--space-3, 0.75rem);

  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 3vw, var(--text-2xl, 2rem));
  line-height: var(--line-snug, 1.3);
  color: var(--color-text);
}

.quiz-panel-text {
  max-width: 420px;
  margin-inline: auto;
  margin-bottom: var(--space-5, 1.5rem);

  font-size: var(--text-base, 1rem);
  line-height: var(--line-normal, 1.6);
  color: var(--color-text-muted);
}

/* =========================================================
   4. Progress
========================================================= */

.quiz-progress {
  height: 6px;
  margin-bottom: var(--space-4, 1rem);

  background: var(--color-surface-soft, #f2e5d8);
  border-radius: var(--radius-full, 999px);
  overflow: hidden;
}

.quiz-progress-bar {
  width: 0%;
  height: 100%;

  background: linear-gradient(
    90deg,
    var(--color-secondary, #8b5e3c),
    var(--color-accent, #d6a85a)
  );
  border-radius: inherit;

  transition: width var(--transition-slow, 350ms ease);
}

.quiz-step-label {
  margin-bottom: var(--space-4, 1rem);

  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary, #8b5e3c);
}

/* =========================================================
   5. Question + options
========================================================= */

.quiz-question {
  transition:
    opacity var(--transition-base, 220ms ease),
    transform var(--transition-base, 220ms ease);
}

.quiz-question-enter {
  opacity: 0;
  transform: translateY(10px);
}

.quiz-options {
  display: grid;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);

  width: 100%;
  padding: var(--space-4, 1rem);

  text-align: left;

  background: var(--color-surface, #fff9f2);
  border: 1px solid var(--color-border, #e7d8c8);
  border-radius: var(--radius-lg, 1rem);

  cursor: pointer;

  transition:
    transform var(--transition-base, 220ms ease),
    border-color var(--transition-base, 220ms ease),
    background-color var(--transition-base, 220ms ease);
}

.quiz-option:hover {
  transform: translateY(-2px);
  border-color: var(--color-secondary, #8b5e3c);
  background: var(--color-secondary-light, #f4e8dc);
}

.quiz-option:focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--color-primary, #4b2e1e) 35%, transparent);
  outline-offset: 3px;
}

.quiz-option.is-selected {
  border-color: var(--color-primary, #4b2e1e);
  background: var(--color-primary-light, #efe3da);
  box-shadow: var(--shadow-sm);
}

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

.quiz-option:disabled:not(.is-selected) {
  opacity: 0.55;
}

.quiz-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 48px;
  height: 48px;

  font-size: 1.5rem;

  background: var(--color-accent-light, #fbf0d8);
  border-radius: var(--radius-md, 0.75rem);
}

.quiz-option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.quiz-option-label {
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text);
}

.quiz-option-text {
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--line-snug, 1.3);
  color: var(--color-text-muted);
}

/* =========================================================
   6. Navigation
========================================================= */

.quiz-nav {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-5, 1.5rem);
}

/* =========================================================
   7. Result
========================================================= */

.quiz-result {
  margin-top: var(--space-4, 1rem);
}

.quiz-result-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-5, 1.5rem);
  align-items: center;

  padding: var(--space-4, 1rem);

  background: var(--color-surface-soft, #f2e5d8);
  border-radius: var(--radius-lg, 1rem);
}

.quiz-result-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md, 0.75rem);
}

.quiz-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiz-result-title {
  margin: var(--space-2, 0.5rem) 0;

  font-family: var(--font-heading);
  font-size: var(--text-xl, 1.5rem);
  line-height: var(--line-tight, 1.15);
  color: var(--color-text);
}

.quiz-result-tagline {
  margin-bottom: var(--space-3, 0.75rem);

  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-medium, 500);
  line-height: var(--line-normal, 1.6);
  color: var(--color-primary, #4b2e1e);
}

.quiz-result-why {
  margin-bottom: var(--space-3, 0.75rem);

  font-size: var(--text-sm, 0.875rem);
  line-height: var(--line-normal, 1.6);
  color: var(--color-text-muted);
}

.quiz-result-pairing {
  margin: 0;

  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-secondary-dark, #654129);
}

.quiz-result-actions {
  margin-top: var(--space-5, 1.5rem);
}

/* =========================================================
   8. Responsive
========================================================= */

@media (max-width: 640px) {
  .quiz-result-card {
    grid-template-columns: 1fr;
  }

  .quiz-result-image {
    aspect-ratio: 16 / 10;
  }

  .quiz-option {
    gap: var(--space-3, 0.75rem);
  }

  .quiz-option-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
}

/* =========================================================
   9. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .quiz-panel.is-active {
    animation: none;
  }

  .quiz-question,
  .quiz-option,
  .quiz-progress-bar {
    transition: none !important;
  }

  .quiz-option:hover {
    transform: none;
  }
}