/**
 * Product Quiz
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Commercial License
 * you can't distribute, modify or sell this code
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file
 * If you need help please contact us through PrestaShop Addons
 *
 * @author    PrestaChamps
 * @copyright PrestaChamps
 * @license   commercial
 */
.pchq-quiz {
  --pchq-mark: var(--pchq-accent, currentColor);
  max-width: 46rem;
  margin: 0 auto;
}
.pchq-quiz [hidden] { display: none !important; }
/* Visually hidden, still in the page for screen readers (and for robots, in the honeypot's case): no offset, so it
   cannot show up at the edge of a right-to-left page. */
.pchq-sr,
.pchq-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pchq-intro { margin-bottom: 1.5rem; }
.pchq-counter { margin: 0 0 .5rem; font-size: .875rem; color: #595959; }
.pchq-progress { height: .25rem; margin-bottom: 1.25rem; overflow: hidden; background: #e5e5e5; border-radius: 1rem; }
.pchq-progress span { display: block; width: 0; height: 100%; background: var(--pchq-mark); transition: width .2s ease; }
.pchq-question:focus { outline: none; }
.pchq-question:focus-visible { outline: 3px solid var(--pchq-mark); outline-offset: 4px; }
.pchq-hint { color: #595959; }
.pchq-contact__text { white-space: pre-line; }
.pchq-answers { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 1rem 0 1.5rem; }
@media (min-width: 576px) {
  .pchq-answers--2 { grid-template-columns: repeat(2, 1fr); }
  .pchq-answers--3 { grid-template-columns: repeat(3, 1fr); }
}
.pchq-answer {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 3rem;
  padding: .75rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  text-align: start;
  cursor: pointer;
  background: #fff;
  border: 2px solid #767676;
  border-radius: .375rem;
}
.pchq-answer:hover { border-color: var(--pchq-mark); }
.pchq-answer:focus-visible { outline: 3px solid var(--pchq-mark); outline-offset: 2px; }
.pchq-answer[aria-pressed="true"] { font-weight: 600; border-color: var(--pchq-mark); box-shadow: inset 0 0 0 1px var(--pchq-mark); }
.pchq-answer[aria-pressed="true"]::after { content: "\2713"; margin-inline-start: auto; }
.pchq-answer--picture { flex-direction: column; justify-content: flex-start; text-align: center; }
.pchq-answer--picture[aria-pressed="true"]::after { margin: 0; }
.pchq-answer__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .25rem; }
.pchq-answer__icon { display: inline-flex; width: 2.5rem; height: 2.5rem; }
.pchq-icon { width: 100%; height: 100%; }
.pchq-select { min-height: 3rem; margin: 1rem 0 1.5rem; font-size: 1rem; }
.pchq-nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: flex-end; }
.pchq-nav .pchq-back { margin-inline-end: auto; }
.pchq-contact .form-control { font-size: 1rem; }
/* Bootstrap 4 (Classic) spaces .form-group itself; Hummingbird's Bootstrap 5 has no such class, so the card does.
   :where() has no specificity: a theme's own margin on .form-group always wins. */
:where(.pchq-contact .form-group) { margin-bottom: 1rem; }
.pchq-field-error { margin: .25rem 0 0; color: #b00020; }
.pchq-privacy { margin: .5rem 0 1rem; }
.pchq-loading { display: flex; gap: .75rem; align-items: center; padding: 1rem 0; }
.pchq-spinner { width: 1.5rem; height: 1.5rem; border: 3px solid #e5e5e5; border-top-color: var(--pchq-mark); border-radius: 50%; animation: pchq-spin .8s linear infinite; }
@keyframes pchq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pchq-progress span { transition: none; }
  .pchq-spinner { animation: none; }
}
.pchq-preview-ribbon { margin: 0 0 1rem; font-weight: 600; }