/**
 * 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
 */

/* The quiz banner (views/templates/hook/banner.tpl) on Classic and
   Hummingbird: the theme's font, text colours and button; the module adds
   the layout and, when the merchant chose an accent colour in Look, the
   colour of the banner's edge and of the button's focus ring
   (--pchq-accent, set on the element). Without an accent the edge takes
   the text colour. */
.pchq-banner {
  --pchq-mark: var(--pchq-accent, currentColor);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, .125);
  border-left: 4px solid var(--pchq-mark);
  border-radius: .25rem;
  background: #fff;
  color: #212529;
}
.pchq-banner__body { flex: 1 1 20rem; min-width: 0; }
.pchq-banner__title { margin: 0 0 .5rem; font-size: 1.375rem; line-height: 1.3; }
.pchq-banner__intro > :last-child { margin-bottom: 0; }
.pchq-banner__action { flex: 0 0 auto; margin: 0; }
.pchq-banner__button { min-height: 2.75rem; white-space: normal; }
.pchq-banner__button:focus-visible { outline: 3px solid var(--pchq-mark); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .pchq-banner { padding: 1rem; }
  .pchq-banner__action, .pchq-banner__button { width: 100%; }
}
@media (forced-colors: active) {
  .pchq-banner { border-left-color: CanvasText; }
}