/* quiz-header.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── QuizHeader ── */
.QuizHeader_header {
  background:var(--quiz-page-bg,var(--color-beige));
  transition:background .45s ease;
  width:100%;
}

.QuizHeader_dark {
  background:var(--color-green);
}

.QuizHeader_dark .QuizHeader_goBackButton {
  filter:brightness(0) invert(1);
}

.QuizHeader_dark .QuizHeader_couponBar {
  background:var(--color-beige);
  color:var(--color-green);
}

.QuizHeader_dark .QuizHeader_couponBar strong {
  color:var(--color-dark-yellow);
}

.QuizHeader_content {
  width:100%;
}

.QuizHeader_images {
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:12px 16px;
}

.QuizHeader_goBackButton {
  grid-column:1;
  border:none;
  background:transparent;
  width:32px;
  height:24px;
  padding:0;
  cursor:pointer;
}

.QuizHeader_logo {
  grid-column:2;
  width:85px;
  height:auto;
}

.QuizHeader_logo img {
  width:100%;
  height:auto;
}

div.QuizHeader_whatsapp {
  grid-column:3;
  justify-self:end;
  position:relative;
  inset:auto;
  width:44px;
  height:44px;
  overflow:visible;
  display:block;
}

.QuizHeader_whatsapp .QuizHeader_whatsappButton {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  background-color:initial;
  box-shadow:none;
}

div.QuizHeader_whatsappButton {
  position:relative;
  inset:auto;
  margin:0;
  z-index:1;
}

div.QuizHeader_whatsappButton:after {
  content:none;
}

div.QuizHeader_whatsappButton svg {
  display:none;
}

div.QuizHeader_whatsappButton:before {
  content:"";
  position:absolute;
  inset:2px;
  background:url("../../../assets/icons/ui/whatsapp-icon-quiz.svg") no-repeat 50%;
  background-size:contain;
}

button.QuizHeader_whatsappButton svg {
  width:40px;
  height:40px;
  color:var(--color-green);
}

div.QuizHeader_whatsappChatbox {
  top:0;
  margin-top:110px;
  width:100%;
  max-width:350px;
  right:0;
  margin-right:20px;
  margin-left:auto;
}

@media (min-width:960px) {
  .QuizHeader_content {
    max-width:1568px;
    margin:0 auto;
  }
}

@media (min-width:960px) {
  .QuizHeader_images {
    padding:24px 64px;
  }
}

@media (min-width:960px) {
  .QuizHeader_logo {
    width:99px;
    height:auto;
  }
}

@media (min-width:960px) {
  div.QuizHeader_whatsappChatbox {
    margin-top:150px;
  }
}