/* ── Quiz Page ── */
.quiz-wrapper {
  min-height: 100vh;
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
}

.quiz-header {
  padding: var(--sp-md) 0 var(--sp-sm);
  border-bottom: 1px solid var(--c-border);
}

.quiz-header__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-sm);
}

.quiz-step-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ── Question ── */
.quiz-question {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-lg);
  display: none;
}
.quiz-question.active { display: flex; }

.quiz-question__prompt {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  margin-bottom: var(--sp-lg);
  max-width: 18ch;
}

/* ── Options Grid ── */
.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
}

.quiz-option {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--tr-base), transform var(--tr-base);
  aspect-ratio: 4/3;
  background: var(--c-surface);
}

.quiz-option:hover {
  border-color: var(--c-muted);
  transform: translateY(-4px);
}

.quiz-option.selected {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent), inset 0 0 60px rgba(232,200,122,0.06);
}

.quiz-option__visual {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border-bottom: 1px solid var(--c-border);
}

.quiz-option__label {
  padding: 0.75rem 1rem;
}

.quiz-option__label h4 {
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.quiz-option__label p {
  font-size: 0.75rem;
  color: var(--c-muted);
  max-width: none;
}

.quiz-option__check {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: transparent;
  transition: all var(--tr-base);
}

.quiz-option.selected .quiz-option__check {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #000;
}

/* ── Navigation ── */
.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-md);
  border-top: 1px solid var(--c-border);
  margin-top: auto;
}

/* ── Results ── */
.quiz-result {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--sp-xl);
  gap: var(--sp-md);
}

.quiz-result.active { display: flex; }

.quiz-result__label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.quiz-result__design-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300;
  color: var(--c-accent);
  line-height: 1;
}

.quiz-result__desc {
  font-size: 1.1rem;
  color: var(--c-muted);
  max-width: 50ch;
  text-align: center;
}

.quiz-result__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-sm);
}

/* ── Visual backgrounds for options ── */
.viz-luxury   { background: linear-gradient(135deg, #0d0d0d 0%, #1a1208 100%); }
.viz-bold     { background: linear-gradient(135deg, #0d0010 0%, #1a0030 100%); }
.viz-friendly { background: linear-gradient(135deg, #081a12 0%, #0d2818 100%); }
.viz-minimal  { background: linear-gradient(135deg, #111 0%, #1a1a1a 100%); }

.viz-dark     { background: linear-gradient(135deg, #050505 0%, #0a0a12 100%); }
.viz-light    { background: linear-gradient(135deg, #e8e4dc 0%, #f0ede8 100%); }
.viz-vibrant  { background: linear-gradient(135deg, #0d1a0d 0%, #1a2800 100%); }
.viz-earth    { background: linear-gradient(135deg, #1a1208 0%, #261a0a 100%); }

.viz-service  { background: linear-gradient(135deg, #080d1a 0%, #0d1428 100%); }
.viz-product  { background: linear-gradient(135deg, #1a0808 0%, #280d0d 100%); }
.viz-restaurant { background: linear-gradient(135deg, #1a1208 0%, #261a08 100%); }
.viz-professional { background: linear-gradient(135deg, #0d1a14 0%, #0d1a1a 100%); }

.viz-dynamic  { background: linear-gradient(135deg, #0d0d1a 0%, #1a0d2e 100%); }
.viz-steady   { background: linear-gradient(135deg, #0a0a0a 0%, #141414 100%); }
.viz-playful  { background: linear-gradient(135deg, #0d1a0d 0%, #1a2e0d 100%); }
.viz-trust    { background: linear-gradient(135deg, #080d1a 0%, #0d1428 100%); }