/* Quiz polish: transitions, radii, desktop divider, button glow, gold mobile landing */

:root {
  --quiz-gold: #b69f0e;
  --quiz-gold-mid: #d7b900;
  --quiz-gold-dark: #85740a;
  --quiz-gold-glow: rgba(182, 159, 14, 0.42);
  --quiz-gold-glow-soft: rgba(215, 185, 0, 0.28);
  --quiz-radius-media: 10px;
  --quiz-radius-answer: 10px;
  --quiz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== 1. Hide question logo ===== */
.quiz__answer-container .question-logo {
  display: none !important;
}

/* ===== 2. Slightly rounded answers & media ===== */
.input-radio,
.input-check-box {
  border-radius: var(--quiz-radius-answer);
}

.quiz__answer-container .answer-with-img {
  border-radius: var(--quiz-radius-answer);
  overflow: hidden;
}

.quiz__answer-container:has(.input-radio) .answer-media,
.quiz__answer-container > div:has(.input-check-box) .answer-media {
  border-radius: var(--quiz-radius-media);
  overflow: hidden;
}

.quiz__answer-container:has(.input-radio) .answer-media img,
.quiz__answer-container > div:has(.input-check-box) .answer-media img,
.quiz__answer-container:has(.input-radio) .answer-media video,
.quiz__answer-container > div:has(.input-check-box) .answer-media video {
  border-radius: var(--quiz-radius-media);
}

.answer-media.is-video-loading {
  background: #dfe2ea;
}

.answer-media.is-video-loading video {
  opacity: 0;
}

.answer-media video.is-ready {
  opacity: 1;
  transition: opacity 0.25s var(--quiz-ease);
}

/* ===== 3. Faster, smoother question transitions ===== */
.quiz__answer-container.quiz-step-out {
  animation: quiz-step-out 0.22s var(--quiz-ease) forwards;
  animation-delay: 0s;
  will-change: opacity, transform;
}

.quiz__answer-container.quiz-step-in {
  animation: quiz-step-in 0.28s var(--quiz-ease) forwards;
  animation-delay: 0s;
  will-change: opacity, transform;
}

.quiz__question-text.quiz-text-swap {
  animation: quiz-text-swap 0.24s var(--quiz-ease);
}

@keyframes quiz-step-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

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

@keyframes quiz-text-swap {
  0% {
    opacity: 0.55;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 4. Desktop: divider under question title ===== */
@media (min-width: 819px) {
  .quiz__question-text {
    position: relative;
    margin: 0 auto;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ced1de;
  }
}

/* ===== 5. Gold palette for mobile first screen (design-showcase) ===== */
.design-showcase {
  --dc-accent: var(--quiz-gold);
  --dc-accent-mid: var(--quiz-gold-mid);
  --dc-accent-soft: #e8dcc0;
  --dc-accent-bg: #faf6eb;
}

.design-showcase .dc-copy-hero__accent,
.design-showcase .dc-chips__item {
  color: var(--quiz-gold);
}

.design-showcase .dc-bonus__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #faf6eb;
  border: 1px solid #e8dcc0;
}

.design-showcase .dc-bonus__head-icon svg {
  width: 16px;
  height: 16px;
  color: var(--quiz-gold);
}

.design-showcase .dc-x--n1 .dc-bonus__title::before {
  display: none;
}

.design-showcase .dc-btn,
.design-showcase .dc-copy-hero__rule-mark,
.design-showcase .dc-carousel__thumb.is-active {
  background: linear-gradient(135deg, var(--quiz-gold), var(--quiz-gold-mid));
}

.design-showcase .dc-btn:hover {
  background: linear-gradient(135deg, var(--quiz-gold-dark), var(--quiz-gold));
}

/* ===== 6. Richer button hover / active glow ===== */
.quiz_button:not(:disabled),
.dc-btn {
  transition:
    transform 0.22s var(--quiz-ease),
    box-shadow 0.22s var(--quiz-ease),
    background-color 0.22s ease,
    background 0.22s ease,
    filter 0.22s ease;
}

.quiz_button:not(:disabled):hover,
.quiz_button_shadowed:not(:disabled):hover,
.quiz__progress-details:not(:disabled):hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 6px 20px var(--quiz-gold-glow),
    0 0 28px var(--quiz-gold-glow-soft);
  filter: brightness(1.04);
}

.quiz_button:not(:disabled):active,
.quiz_button_shadowed:not(:disabled):active,
.quiz__progress-details:not(:disabled):active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 2px 10px rgba(75, 65, 0, 0.35);
  filter: brightness(0.98);
  transition-duration: 0.1s;
}

.dc-btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 8px 24px var(--quiz-gold-glow),
    0 0 32px var(--quiz-gold-glow-soft);
}

.dc-btn:not(:disabled):active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.1s;
}

.quiz__first-screen-main-block_button.blick:not(:disabled):hover {
  box-shadow:
    0 8px 26px var(--quiz-gold-glow),
    0 0 36px var(--quiz-gold-glow-soft);
}

@media (prefers-reduced-motion: reduce) {
  .quiz__answer-container.quiz-step-out,
  .quiz__answer-container.quiz-step-in,
  .quiz__question-text.quiz-text-swap {
    animation: none;
  }

  .quiz_button:not(:disabled):hover,
  .quiz_button_shadowed:not(:disabled):hover,
  .quiz__progress-details:not(:disabled):hover,
  .dc-btn:not(:disabled):hover {
    transform: none;
  }
}