/* quiz/static/quiz/quiz.scss */
/* Mobile-first; premium & accessible; BEM naming */
.style-quiz {
  --gap: 16px;
  --radius: var(--r-sm);
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: 20px;
}

.style-quiz__head {
  text-align: center;
  margin-bottom: 16px;
}

.style-quiz__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}

.style-quiz__subtitle {
  color: #444;
  margin: 0 0 8px;
}

.style-quiz__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-bottom: 20px;
}

.style-quiz__field {
  display: flex;
  flex-direction: column;
}
.style-quiz__field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.style-quiz__label {
  font-weight: var(--fw-bold);
  margin-bottom: 6px;
}

.style-quiz__input,
.style-quiz__select {
  appearance: none;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.style-quiz__input:focus,
.style-quiz__select:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.1);
}

.style-quiz__checkbox {
  width: 18px;
  height: 18px;
  accent-color: #111;
  cursor: pointer;
}

.style-quiz__checkbox-label {
  cursor: pointer;
}

.style-quiz__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.style-quiz__submit {
  display: inline-block;
  width: 100%;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.02s ease;
}
.style-quiz__submit:hover {
  opacity: 0.95;
}
.style-quiz__submit:active {
  transform: translateY(1px);
}

.style-quiz__error {
  color: #b00020;
  font-size: 13px;
  min-height: 18px;
  margin-top: 4px;
}

.style-quiz__form-error {
  color: #b00020;
  margin-top: 6px;
  text-align: center;
}

.style-quiz__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.style-quiz__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 680px) {
  .style-quiz__form {
    grid-template-columns: repeat(2, 1fr);
  }
  .style-quiz__field--checkbox {
    grid-column: 1/-1;
  }
  .style-quiz__submit {
    grid-column: 1/-1;
    width: auto;
    justify-self: start;
  }
  .style-quiz__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.style-quiz-card {
  border: 1px solid #eee;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.style-quiz-card__media img {
  display: block;
  width: 100%;
  height: auto;
}
.style-quiz-card__body {
  padding: 12px;
}
.style-quiz-card__name {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 2px;
}
.style-quiz-card__collection {
  color: #666;
  font-size: 13px;
  margin: 0 0 8px;
}
.style-quiz-card__cta {
  display: inline-block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: 1px solid #111;
  font-weight: var(--fw-bold);
}

.style-quiz-voucher {
  border: 1px dashed #111;
  border-radius: var(--r-sm);
  padding: 14px;
  text-align: center;
  background: #f7f7f7;
}
.style-quiz-voucher__code {
  font-weight: 800;
}
.style-quiz-voucher__expires {
  color: #555;
}

/*# sourceMappingURL=quiz.css.map */