/*hide footer that appears on the middle of the screen*/
#site-footer, footer, ._1ik12o6 button {
  display: none!important;
;
}

body:not(.elementor-editor-active) .quiz-outer-wrapper {
  position: fixed;
  inset: 0;
  height: 100%; /* avoids iOS toolbar jump */
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  background: white;
  z-index: 9999;
  padding: env(safe-area-inset-top) 16px max(20px, env(safe-area-inset-bottom));
}
body:not(.elementor-editor-active) .quiz-intro-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #F5F3F0;
  padding: env(safe-area-inset-top) 16px max(72px, env(safe-area-inset-bottom) + 52px);
  z-index: 10000;
}

.elementor-widget-dnkqz_quiz {
  height: 100%
}


.dnkqz-answer-input {
  background: white;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none;
}

.dnkqz-error-msg {
  color: red;
  font-size: 16px;
  padding: 10px;
  text-align: center;
  display: none; /* Hidden by default */
}

.dnkqz-error-msg:not(:empty) {
  display: block; /* Show when it has content */
}

.dnk-quiz-outer-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 50px;
}

.dnk-quiz-outer-wrapper .top-section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 600px;
  position: relative;
  width: 100%;
}

.top-section .dnk-quiz-logo {
  width: 120px;
  margin-top: 30px;
}

.quiz-intro-wrapper > .quiz-intro-content {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  position: static;
  transform: none;
  margin: 0 auto;
  flex-shrink: 0;
  min-height: fit-content;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08), 0 4px 24px rgba(0, 0, 0, 0.06);
}

#start-quiz {
  cursor: pointer;
}

.btnman {
  margin-bottom:10px!important;
}

/* Gender selection buttons - ensure hand cursor on hover */
#start-quiz-man, #start-quiz-woman {
  cursor: pointer !important;
}

#start-quiz-man:hover, #start-quiz-woman:hover {
  cursor: pointer !important;
}

.quiz-intro-wrapper .title {
  font-size: 30px;
  font-weight: 300;
  margin-bottom: -20px;
  line-height: 35px;
}

.quiz-intro-wrapper .sub_title {
  font-weight: 300;
  font-size: 14px;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Chrome / Safari / Edge (Chromium) */
.dnkqz-answer-input[type="number"]::-webkit-outer-spin-button,
.dnkqz-answer-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.dnkqz-answer-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield; /* broader support */
}

.quiz-intro-wrapper .start-quiz-btn, #dnkqz-resume-btn, #dnkqz-redo-buy {
  background: #35AC5A;
  width: fit-content;
  margin: auto;
  padding: 10px 20px;
  border-radius: 180px;
  color: #fff;
  font-weight: 400;
  font-size: 17px;
}


.quiz-site-logo.elementor-widget-image a img {
  width: 230px;
  height: auto;
}

.dnkqz-question-label {
  margin-bottom: 2em;
  display: block;
  font-size: 15px;
  text-align: left;
  font-weight: 400;
  line-height: 23px;
  font-size: 1.2em;
  font-weight: 500;
  margin-bottom:10px;
  margin-top:10px;

}

.dnkqz-question-label.consent-checkbox {
  line-height: 30px;
  font-weight: 400;
  font-size: 16px;
}

.dnkqz-intro-name {
  text-align: center;
  font-size: 1.5em;
  font-weight: 500;
  margin-bottom: 40px;
}

.dnkqz-question-label .intro-text {
  color: #000000;
  font-size: 15px;
  font-weight: 200;
  display: inline-block;
  margin-bottom: 7px;
  letter-spacing: 0.1px;
}

.dnkqz-question-label .highlighted {
  color: #000000;
  font-weight: 500;
  display: inline-block;
  padding: 4px 18px;
  font-size: 15px;
  margin-top: 6px;
}

.dnkqz-back-btn-wrap .dnkqz-quiz-btn:disabled {
  background: #fff;
}

.dnkqz-back-btn-wrap {
  display: flex;
  position: static;   /* was absolute */
  /* or: position: initial; */
  left: auto;
  bottom: auto;
}

.dnkqz-back-btn-wrap .dnkqz-back-btn {
  border-radius: 50%;
  color: #ccc;
  padding: 10px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

}

.dnkqz-back-btn-wrap .dnkqz-back-btn img {
  width: 9px;
  margin-right: 5px;
}

.dnkqz-quiz-widget .dnkqz-quiz-nav {
  text-align: center;
}

.dnkqz-quiz-nav .dnkqz-quiz-btn {
  background: #35AC5A;
  text-align: center;
  border-radius: 30px;
  padding: 10px 20px;
  color: white;
  border: none;
  font-weight: 500;
  cursor: pointer;
  width:190px;
  height:50px;
}

.dnkqz-quiz-widget .dnkqz-answer-input {
  border-radius: 180px;
  border: 1px solid #ececec;
  text-align: center;
  max-width: 220px;
  display: block;
  margin: auto;
}

.body_active {
  display: flex;
  flex-direction: column;
}

.body_active span {
  font-size: 12px;
  margin-top: 2px;
  font-weight: 300;
}

.dnkqz-quiz-widget .dnkqz-radio {
  background-color: #fff;
  border-radius: 50px;
  font-weight: 300;
  text-align: center;
  border: 1px solid #ececec;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.dnkqz-quiz-widget .dnkqz-radio.selected, .dnkqz-quiz-widget .dnkqz-checkbox.selected {
  border: 1px solid #000000
}

.dnkqz-radio input[type="radio"] {
  position: absolute;
  inset: 0; /* NEW — stretches to full label */
  opacity: 0;
  pointer-events: none;
}

.dnkqz-multiple-choise {
  color: #979797;
  font-size: 14px;
  margin: -17px 0px 20px;
}

.dnkqz-quiz-widget .options_wrapper .options_text {
  width: 100%;
  max-width: 220px;
}

.dnkqz-quiz-widget .options_wrapper {
  padding: 20px 0;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  justify-content: center;
}

.dnkqz-checkbox-options {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.dnkqz-quiz-widget label {
  font-size: 15px;
  padding: 5px 0px;
}

.dnkqz-quiz-widget label.dnkqz-checkbox {
  background-color: #fff;
  border-radius: 50px;
  font-weight: 300;
  border: 1px solid #ececec;
  cursor: pointer;
}

.dnkqz-quiz-widget .options_wrapper .dnkqz-checkbox input {
  appearance: none;
}

.dnkqz-quiz-widget .options_wrapper img.dnkqz-checkbox-img {
  height: 20px;
  width: 20px;
  margin-right: 8px;
}

.dnkqz-quiz-widget .dnkqz-checkbox-label {
  vertical-align: text-top;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dnkqz-checkbox-label-text {
  flex: 1;
}

.dnkqz-checkbox-label-emoji {
  margin-left: auto;
  flex-shrink: 0;
}

.dnkqz-quiz-widget .dnkqz-radio-label {
  vertical-align: text-top;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dnkqz-radio-label-text {
  flex: 1;
}

.dnkqz-radio-label-emoji {
  margin-left: auto;
  flex-shrink: 0;
}

#dnkqz-motivation-overlay {
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: rgba(52, 58, 64, 0.74);
  display: flex;
  align-items: center;
  justify-content: center;
}

.motivation_text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 90%;
  font-weight: 300;
  max-width: 800px;
  line-height: 27px;
  /*animation: dnkqz-breathing 6s infinite ease-in-out;*/
}

.dnkqz-motivation-box {
  background: #fff;
  width: 100%;
  padding: 40px 28px 36px 28px;
  box-shadow: 0 6px 64px 0 rgba(60, 80, 120, .11);
  font-size: 1.22em;
  color: #282e35;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.1px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Next button for motivation overlay */
.dnkqz-motivation-next-btn {
  margin-top: auto;
  padding: 12px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  align-self: center;
}

.dnkqz-motivation-next-btn:hover {
  background-color: #45a049;
}

.dnkqz-motivation-box .dnkqz-motivation-logo {
  margin-bottom: 40px;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
}

.dnkqz-extra-info {
  background-color: #E6F4EF;
  padding: 25px 20px 20px 20px;
  font-size: 14px;
  max-width: 600px;
  position: relative;
  margin: 50px auto;
  line-height: 20px;
}

.dnkqz-extra-info-title {
  font-weight: 300;
  font-size: 15px;
  margin-bottom: 5px;
  color: #000;
}

.dnkqz-extra-info-title-no-content {
  font-weight: 300 !important;
  margin-bottom: 0px !important;
}

/* ===== MOTIVATION AI & CONTENT SCREENS STYLES ===== */
/* Replaces inline styles from JSON */

/* Container classes */
.dnkqz-content-container {
  text-align: center;
  padding: 20px;
}

.dnkqz-content-container-left {
  text-align: left;
}

/* Heading styles */
.dnkqz-content-h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.dnkqz-content-h2-large {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.dnkqz-content-h2-xl {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.dnkqz-content-h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.dnkqz-content-h3-medium {
  font-size: 20px;
  margin-bottom: 15px;
}

.dnkqz-content-h3-small {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #2E7D32;
}

/* Text colors */
.dnkqz-text-green {
  color: #4CAF50;
}

.dnkqz-text-gray {
  color: #666;
}

.dnkqz-text-gray-light {
  color: #999;
}

.dnkqz-text-red {
  color: #d32f2f;
}

/* Card/Box styles */
.dnkqz-card-gray {
  background-color: #EEEEEE;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 15px;
}
/* Image styles */
.dnkqz-content-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  border-radius: 8px;
}

.dnkqz-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dnkqz-avatar-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #f0f0f0;
}

/* Text styles */
.dnkqz-text-testimonial {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 4px;
}

.dnkqz-text-user-info {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.dnkqz-text-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.dnkqz-text-small {
  font-size: 12px;
  color: #999;
  margin-top: 20px;
}

.dnkqz-text-continue {
  font-size: 14px;
  color: #666;
  margin-top: 20px;
  margin-bottom: 15px;
}

/* List styles */
.dnkqz-list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dnkqz-list-item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.dnkqz-list-item:last-child {
  margin-bottom: 0;
}

.dnkqz-checkmark {
  color: #4CAF50;
  font-size: 18px;
  line-height: 1;
}

.dnkqz-checkmark-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-right: 8px;
}

.dnkqz-list-text {
  font-size: 14px;
}

.dnkqz-list-item-large {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.dnkqz-list-item-large:last-child {
  margin-bottom: 0;
}

.dnkqz-checkmark-large {
  color: #4CAF50;
  font-size: 20px;
}

.dnkqz-list-text-large {
  font-size: 16px;
}

/* Testimonial block styles */
.dnkqz-testimonial-block {
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
}

.dnkqz-testimonial-text {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dnkqz-testimonial-author {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.dnkqz-testimonial-verified {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dnkqz-verified-check {
  color: #4CAF50;
  font-size: 14px;
}

.dnkqz-verified-text {
  font-size: 12px;
  color: #666;
}

/* Stats/Percentage styles */
.dnkqz-stat-percentage {
  font-size: 36px;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 5px;
}

.dnkqz-stat-text {
  font-size: 16px;
  line-height: 1.4;
}

.dnkqz-stat-row {
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
}

.dnkqz-stat-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 30px;
}

/* Expectations content specific styles */
.dnkqz-expectations-week-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.dnkqz-expectations-week-item:last-child {
  margin-bottom: 0;
}

.dnkqz-expectations-checkmark {
  color: #4CAF50;
  font-size: 20px;
  flex-shrink: 0;
}

.dnkqz-expectations-testimonial-box {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  position: relative;
}

.dnkqz-expectations-testimonial-icon {
  text-align: center;
  margin-bottom: 10px;
}

.dnkqz-expectations-testimonial-icon span {
  color: #4CAF50;
  font-size: 24px;
}

.dnkqz-expectations-testimonial-quote {
  font-size: 16px;
  font-style: italic;
  font-weight: normal;
  margin-bottom: 10px;
}

.dnkqz-expectations-testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dnkqz-expectations-image-container {
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
}

.dnkqz-expectations-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Additional text styles */
.dnkqz-text-paragraph {
  font-size: 18px;
  line-height: 1.6;
}

.dnkqz-text-paragraph-small {
  font-size: 16px;
  line-height: 1.6;
}

.dnkqz-text-italic {
  font-size: 16px;
  margin-bottom: 10px;
  font-style: italic;
}

.dnkqz-text-description-large {
  font-size: 16px;
  color: #666;
  margin-bottom: 25px;
}

.dnkqz-flex-1 {
  flex: 1;
}

.dnkqz-margin-bottom-25 {
  margin-bottom: 25px;
}

.dnkqz-extra-info-content {
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
}

.dnkqz-important {
  position: absolute;
  top: -12px;
  left: 50%;
  height: 30px;
  width: 30px;
  background-color: #026565;
  border-radius: 180px;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%);
}

.dnkqz-important img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.options_wrapper .options_radio {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.options_wrapper label {
  margin-bottom: 0px;
  margin-right: 5px;
}

.quiz-urls-center-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  margin-top: auto;
}

.quiz-urls {
  display: flex;
  gap: 2.5rem; /* Controls spacing between items */
  list-style: none;
  padding: 10px;
}

.quiz-urls a {
  color: #ccc;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
  transition: color 0.2s;
}

.quiz-urls a:hover {
  color: #888; /* Subtle hover */
}

@keyframes dnkqz-breathing {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.94;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.94;
  }
}



.quiz-meta-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Popup overlay */
#dnkqz-resume-popup, #dnkqz-want-a-redo-popup {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
  align-items: center;
  justify-content: center;
}
#dnkqz-redo-yes:hover {
  background: #f7f8f9;
  color: black;
}
#dnkqz-redo-yes {
  border-radius: 180px;
  margin-top: 10px;
  padding: 10px 20px;
  min-width: 150px;
}

/* Popup box */
.dnkqz-popup-inner {
  background: #fff;
  padding: 30px 30px 15px 30px;
  border-radius: 15px;
  box-shadow: 0 6px 30px #0002;
  max-width: 320px;
  text-align: center;
  width: 100%;
}

/* Title */
.dnkqz-popup-title {
  font-size: 20px;
  margin-bottom: 20px;
  color: #222;
}

.dnkqz-quiz-nav .dnkqz-quiz-btn:hover, .dnkqz-quiz-nav .dnkqz-quiz-btn:focus {
  background-color: #28a745;
  color: #fff;
}

/* Buttons */
.dnkqz-btn {
  border: none;
  border-radius: 6px;
  padding: 12px 30px;
  font-size: 17px;
  cursor: pointer;
  margin: 0 6px 0 0;
  transition: background 0.2s, color 0.2s;
}

/* Primary button style */
.dnkqz-btn-primary {
  background: #6dbc6c;
  color: #fff;
}

/* Secondary button style */
.dnkqz-btn-secondary {
  background: transparent;
  color: #333;
}

.dnkqz-btn-secondary:hover {
  background: #f7f8f9;
}

/* Make both inputs invisible but still accessible/clickable via the label */
.dnkqz-radio,
.dnkqz-checkbox {
  position: relative;
}

/* so inset:0 has a containing box */

.dnkqz-radio input[type="radio"],
.dnkqz-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

@media (min-width: 500px) {
  .dnkqz-quiz-widget, .dnkqz-quiz-widget .options_wrapper {
    max-width: 800px;
  }

  .dnkqz-quiz-widget label {
    font-size: 16px;
    padding: 10px 20px;
  }

  .options_wrapper label {
    margin-right: 15px;
  }
}

@media (min-width: 600px) {
  .dnkqz-quiz-widget label.dnkqz-checkbox {
    justify-content: center;
  }


}

@media (max-width: 600px) {
  .quiz-intro-wrapper > .quiz-intro-content {
    padding: 20px 10px max(44px, env(safe-area-inset-bottom) + 32px) 10px;
    max-width: 98vw;
  }
  .quiz-intro-wrapper .title {
    font-size:25px;
    line-height:30px;
  }
  .dnk-hello-msg {
    margin-top: 30px;
  }

  .dnk-quiz-completed-banner .dynamic-text {
    font-size: 16px !important;
    padding: 0 20px;

  }

  .btns-wrapper {
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

}

.dnk-hello-msg__name {
  font-weight: 500;
}

/* Narrow devices: content almost at very bottom */
@media (max-width: 374px) {
  body:not(.elementor-editor-active) .quiz-intro-wrapper {
    padding-bottom: max(6px, env(safe-area-inset-bottom) + 4px);
  }
  .quiz-intro-wrapper > .quiz-intro-content {
    padding: 20px 10px max(6px, env(safe-area-inset-bottom) + 4px) 10px;
  }
}

/* Short height + width above 374px: content a bit higher */
@media (max-height: 600px) and (min-width: 375px) {
  body:not(.elementor-editor-active) .quiz-intro-wrapper {
    padding-bottom: max(28px, env(safe-area-inset-bottom) + 20px);
  }
  .quiz-intro-wrapper > .quiz-intro-content {
    padding: 20px 10px max(24px, env(safe-area-inset-bottom) + 16px) 10px;
    margin-bottom: 0;
  }
}

/* Fix for smaller screen heights - ensure content doesn't overlap */
@media (max-height: 600px) {
  body:not(.elementor-editor-active) .quiz-intro-wrapper {
    padding-bottom: max(12px, env(safe-area-inset-bottom) + 8px);
    justify-content: flex-end; /* keep content at bottom */
  }

  .quiz-intro-wrapper > .quiz-intro-content {
    padding: 20px 10px max(12px, env(safe-area-inset-bottom) + 8px) 10px;
    margin-bottom: 0;
    flex-shrink: 0; /* prevent shrinking */
    min-height: auto; /* allow natural height */
  }

  .quiz-intro-wrapper .title {
    font-size: 24px;
    margin-bottom: 10px;
    line-height: 28px;
  }

  .quiz-intro-wrapper .sub_title {
    font-size: 12px;
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .quiz-meta {
    margin-top: 10px;
  }

  /* Ensure image doesn't shrink */
  .quiz-intro-wrapper img {
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
  }
}

/* Completed formula banner styles */
.dnk-quiz-completed-banner {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 5px;
  background: #E9E9E9;
  gap: 30px 150px;
}

.dnk-terminator {
  position: absolute;
  top: -4px;
  right: 4px;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: none;
  color: #282e35;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  z-index: 10;
  padding: 2px 8px;
  border-radius: 50%;
}

.dnk-quiz-completed-banner .dnk-first-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.dnk-quiz-completed-banner .img-wrapper {
  width: 100%;
  max-width: 170px;
  display: none;
}

.dnk-quiz-completed-banner .dynamic-text {
  font-size: 18px;
  padding: 0 20px;
  text-align: left;
  line-height: 27px;
}

.dnk-quiz-completed-banner .static-text {
  text-align: left;
  padding: 0 10px;
  line-height: 20px;
  font-size: 14px;
}

.dnk-quiz-completed-banner .dynamic-text .name {
  font-weight: 500;
}

.dnk-quiz-completed-banner .dynamic-text .after_name {
  font-weight: 300;
}

.btns-wrapper {
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.btns-wrapper a {
  padding: 5px 20px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
}

.btns-wrapper a:first-child {
  background: #fff;
  margin-right: 10px;
}

.btns-wrapper a:last-child {
  background: #3FB155;
  color: #fff;
}

.dnk-quiz-completed-banner .text-wrapper {
  display: flex;
  flex-direction: column;
}

@media (min-width: 400px) {
  .dnk-quiz-completed-banner {
    padding: 10px 5px;
  }
}

@media (min-width: 768px) {
  .quiz-intro-wrapper .sub_title {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .dnk-quiz-completed-banner .img-wrapper {
    display: block;
  }
}

@media (min-width: 900px) {
  .dnk-quiz-completed-banner .static-text {
    text-align: left !important;
  }

  .dnk-quiz-completed-banner .dynamic-text {
    text-align: left !important;
  }
}


@media (max-width: 900px) {

  .dnk-quiz-completed-banner {
    display: block;
  }

  .btns-wrapper {
    margin-top: 10px;
    margin-left: 20px;
  }



}

/**
loader styles
*/
#preloader_dnk {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader_dnk.fade-out {
  opacity: 0;
  visibility: hidden;
}

#preloader_dnk .preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 40px 20px;
  max-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Apply loader animation to .spinner (keeping your HTML intact) */
#preloader_dnk .spinner {
  width: 20px;
  aspect-ratio: 1;
  background: #1FB15A;
  box-shadow: 0 0 60px 15px #1FB15A;
  transform: translateX(-80px);
  clip-path: inset(0);
  animation: l4-1 0.5s ease-in-out infinite alternate,
  l4-2 1s ease-in-out infinite;
}

#preloader_dnk .preloader-title {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 25px;
  padding: 0 10px;
  line-height: 1.3;
}

#preloader_dnk .circular-progress {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 20px 0;
}

#preloader_dnk .progress-dots {
  position: relative;
  width: 100%;
  height: 100%;
}

#preloader_dnk .progress-dots .dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  margin-top: -5px;
  margin-left: -5px;
}

#preloader_dnk .progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #000;
  z-index: 1;
}

/* Position 18 dots in a circle - first 9 filled, rest transparent */
#preloader_dnk .progress-dots .dot:nth-child(1) {
  transform: rotate(0deg) translateX(60px) rotate(0deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(2) {
  transform: rotate(20deg) translateX(60px) rotate(-20deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(3) {
  transform: rotate(40deg) translateX(60px) rotate(-40deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(4) {
  transform: rotate(60deg) translateX(60px) rotate(-60deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(5) {
  transform: rotate(80deg) translateX(60px) rotate(-80deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(6) {
  transform: rotate(100deg) translateX(60px) rotate(-100deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(7) {
  transform: rotate(120deg) translateX(60px) rotate(-120deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(8) {
  transform: rotate(140deg) translateX(60px) rotate(-140deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(9) {
  transform: rotate(160deg) translateX(60px) rotate(-160deg);
  background: #35AC5A;
  opacity: 1;
}

#preloader_dnk .progress-dots .dot:nth-child(10) {
  transform: rotate(180deg) translateX(60px) rotate(-180deg);
  background: #35AC5A;
  opacity: 0.1;
}

#preloader_dnk .progress-dots .dot:nth-child(11) {
  transform: rotate(200deg) translateX(60px) rotate(-200deg);
  background: #35AC5A;
  opacity: 0.1;
}

#preloader_dnk .progress-dots .dot:nth-child(12) {
  transform: rotate(220deg) translateX(60px) rotate(-220deg);
  background: #35AC5A;
  opacity: 0.1;
}

#preloader_dnk .progress-dots .dot:nth-child(13) {
  transform: rotate(240deg) translateX(60px) rotate(-240deg);
  background: #35AC5A;
  opacity: 0.1;
}

#preloader_dnk .progress-dots .dot:nth-child(14) {
  transform: rotate(260deg) translateX(60px) rotate(-260deg);
  background: #35AC5A;
  opacity: 0.1;
}

#preloader_dnk .progress-dots .dot:nth-child(15) {
  transform: rotate(280deg) translateX(60px) rotate(-280deg);
  background: #35AC5A;
  opacity: 0.1;
}

#preloader_dnk .progress-dots .dot:nth-child(16) {
  transform: rotate(300deg) translateX(60px) rotate(-300deg);
  background: #35AC5A;
  opacity: 0.1;
}

#preloader_dnk .progress-dots .dot:nth-child(17) {
  transform: rotate(320deg) translateX(60px) rotate(-320deg);
  background: #35AC5A;
  opacity: 0.1;
}

#preloader_dnk .progress-dots .dot:nth-child(18) {
  transform: rotate(340deg) translateX(60px) rotate(-340deg);
  background: #35AC5A;
  opacity: 0.1;
}

/* Preloader tasks */
#preloader_dnk .preloader-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  max-width: 400px;
}

#preloader_dnk .preloader-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  line-height: 1.3;
  max-width: 400px;
}

#preloader_dnk .preloader-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: #35AC5A;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

#preloader_dnk .preloader-checkmark::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  top: 45%;
  left: 55%;
  margin-top: -5px;
  margin-left: -3px;
}

/* Preloader rating */
#preloader_dnk .preloader-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 30px;
  line-height: 15px;
}

#preloader_dnk .preloader-stars {
  color: #35AC5A;
  font-size: 16px;
  letter-spacing: 1px;
}

#preloader_dnk .preloader-rating-number {
  font-size: 12px;
  color: #000;
  font-weight: 500;
}

#preloader_dnk .preloader-rating-text {
  font-size: 12px;
  color: #000;
}

#preloader_dnk .preloader-rating-score {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin-top: 3px;
}

/* Email collection screen */
#dnkqz-email-collection {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 100002;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

#dnkqz-email-collection .email-collection-content {
  max-width: 500px;
  width: 100%;
  text-align: center;
  margin-top: 40px;
}

#dnkqz-email-collection .email-collection-title {
  font-size: 24px;
  font-weight: 300;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.4;
}

#dnkqz-email-collection .email-collection-title strong {
  font-weight: bold;
}

#dnkqz-email-collection .email-collection-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.5;
}

#dnkqz-email-collection.email-collection-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

#dnkqz-email-collection .email-collection-input {
  width: 100%;
  padding: 15px 25px;
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 16px;
  box-sizing: border-box;
  text-align: left;
  margin-bottom: 20px;
}

#dnkqz-email-collection .email-collection-input:focus {
  outline: none;
  border-color: #35AC5A;
}

#dnkqz-email-collection .email-collection-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
  margin-top: -5px;
}

#dnkqz-email-collection.email-privacy-icon {
  font-size: 14px;
}

#dnkqz-email-collection .email-collection-button {
  background-color: #1FB25A;
  color: white;
  border: none;
  padding: 15px 50px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  width: auto;
  min-width: 230px;
  margin: 20px auto 0;
  display: inline-block;
}

#dnkqz-email-collection.email-collection-button:hover {
  background-color: #1a9950;
}

#dnkqz-email-collection.email-collection-button:active {
  transform: scale(0.98);
}

/* General DNK quiz: button loading spinner (white circles) – Finish, Get report, etc. */
.dnkqz-btn-spinner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.dnkqz-quiz-btn.dnkqz-btn-loading .dnkqz-btn-text,
.email-collection-button.dnkqz-btn-loading .dnkqz-btn-text {
  display: none;
}
.dnkqz-quiz-btn.dnkqz-btn-loading .dnkqz-btn-spinner,
.email-collection-button.dnkqz-btn-loading .dnkqz-btn-spinner {
  display: inline-flex;
}
.dnkqz-btn-spinner span {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: dnkqz-btn-bounce 0.6s ease-in-out infinite both;
}
.dnkqz-btn-spinner span:nth-child(2) { animation-delay: 0.1s; }
.dnkqz-btn-spinner span:nth-child(3) { animation-delay: 0.2s; }
@keyframes dnkqz-btn-bounce {
  0%, 80%, 100% { transform: scale(0.75); opacity: 0.6; }
  40% { transform: scale(1.15); opacity: 1; }
}

@keyframes l4-1 {
  100% {
    transform: translateX(80px);
  }
}

@keyframes l4-2 {
  33% {
    clip-path: inset(0 0 0 -100px);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  83% {
    clip-path: inset(0 -100px 0 0);
  }
}

/** One scoop daily support style **/
.one-scoop-support-wrapper {
  padding: 10px 10px 10px 22px;
  max-width: 420px;
}

.one-scoop-support {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.one-scoop-support .support-item {
  display: flex;
  gap: 5px;
}

.one-scoop-support .support-img {
  width: 15px;
  display: flex;
}

/* base circle */
.dnkqz-quiz-widget label.dnkqz-checkbox.consent-checkbox {
  display: flex;
  align-items: center;
  gap: 12px; /* space between circle and text */
  position: relative;
  cursor: pointer;
  border-radius: 0;
  padding: 20px 15px;
  background-color: #E6F2ED;
  text-align: left;
  line-height: 1.4;
}

.dnkqz-quiz-widget .dnkqz-checkbox.consent-checkbox.selected {
  border-color: transparent;
}

.check-circle {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 50%;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 70%;
  transition: background-color .15s ease, border-color .15s ease;
  margin-right: 10px; /* spacing from text */
}

.dnkqz-checkbox.selected .check-circle {
  background-color: #226464;
  border-color: #226464;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4 4L15 1' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


@media screen and (max-width: 1550px) and (min-width: 800px) {
  .dnk-quiz-completed-banner {
    display: block;
  }

}



/* Desktop first */
.quiz-intro-wrapper.has-intro-bg{
  background-image: var(--intro-bg-desktop);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* Mobile swap (match your breakpoint if different) */
@media (max-width: 767px){
  .quiz-intro-wrapper.has-intro-bg{
    background-image: var(--intro-bg-mobile, var(--intro-bg-desktop));
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
  }
}

/* Optional: meta text visuals */
.quiz-meta{margin-top:14px;text-align:center}
.quiz-length{
  font-size:14px;
  font-weight:300;
  margin-bottom:6px
}
.quiz-gdpr{
  font-size:16px;
  font-weight:300;
  margin-bottom:4px}
.quiz-gdpr-mini {

  font-size:10px;
  line-height:12px;
  font-weight:300;


}


/* Stronger rule than the gray background line above */
body:not(.elementor-editor-active) .quiz-intro-wrapper.has-intro-bg{
  /* use shorthand so we set color + image in one go */
  background: var(--intro-bg-desktop) center center / cover no-repeat transparent !important;
  min-height: 100vh; /* ensures there's something to paint */
  background-attachment: fixed;
}

/* Mobile swap (match your PHP breakpoint if different) */
@media (max-width: 767px){
  body:not(.elementor-editor-active) .quiz-intro-wrapper.has-intro-bg{
    background: var(--intro-bg-mobile, var(--intro-bg-desktop)) center center / cover no-repeat transparent !important;
    background-attachment: fixed;
  }
}



/* Progress container */
.dnkqz-progress{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:16px auto 24px;
  width:100%;
  padding-inline:0px;         /* safe side space */
  box-sizing:border-box;       /* include padding in width */
  max-width:100%;
  /*  overflow-x:hidden;        belt & suspenders */
}

/* Bar wrapper: let it shrink on mobile */
.dnkqz-progress__bar{
  flex:1 1 0;                  /* take remaining space, can shrink */
  min-width:0;                 /* allow flex child to get smaller */
  height:10px;
  background:#f2f2f2;
  border-radius:999px;
  position:relative;
  overflow:hidden;
}

/* Fill (JS updates width) */
.dnkqz-progress__fill{
  height:100%;
  width:0;
  border-radius:999px;
  transition:width .25s ease;
  background:#37a24b;
}

/* "X / total" text */
.dnkqz-progress__text{
  flex:0 0 auto;               /* don’t shrink */
  font-size:14px;
  line-height:1;
  color:#555;
  min-width:52px;
  text-align:left;
}

/* Larger screens: give the bar a comfortable cap */
@media (min-width:768px){
  /*.dnkqz-progress{ padding-inline:24px; }*/
  /*.dnkqz-progress__bar{ max-width:520px; }   */
}

/* Tiny screens: slightly smaller bar height & gaps */
@media (max-width:480px){
  .dnkqz-progress{ gap:8px; margin:12px auto 18px; }
  .dnkqz-progress__bar{ height:8px; }
  .dnkqz-progress__text{ font-size:13px;text-align:center; }
}


@media (max-width:767px){
  .dnk-quiz-outer-wrapper .dnkqz-quiz-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 50px!important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    /*padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);*/
    background: transparent;
    margin-bottom:50px;
  }
  .dnk-quiz-outer-wrapper {
    height: 103svh;
  }

}






/* the lists that hold the pills */
.options_wrapper .options_radio,
.options_wrapper .dnkqz-checkbox-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  max-width:600px;
  margin:0 auto;

  /* NEW: prevent the right edge cut */
  padding-inline:0px;       /* breathing room left/right */
  box-sizing:border-box;     /* keep 100% inside the container */
  min-width:0;               /* allow shrinking inside flex parents */
  overflow-x:hidden;         /* belt & suspenders */
}

/* each pill */
.dnkqz-quiz-widget .dnkqz-radio,
.dnkqz-quiz-widget label.dnkqz-checkbox{
  width:100%;
  max-width:100%;            /* never exceed the row */
  box-sizing:border-box;
  padding:14px 18px;
  border-radius:999px;
  text-align:left;
  justify-content:flex-start;
}

/* if you use the short-viewport scroll area from earlier */
@media (max-height:760px){
  .options_wrapper .options_radio,
  .options_wrapper .dnkqz-checkbox-options{
    padding-right:12px;      /* more space so the border isn't clipped */
  }
}



/* Leave room so content doesn't sit under the fixed controls */
.dnk-quiz-outer-wrapper{
  padding-bottom: 120px; /* tweak to your button heights */
}

/* NEXT — centered a bit above the bottom */
.dnkqz-quiz-nav{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  bottom: 64px;                  /* distance from bottom */
  z-index: 10;
  width: auto !important;
  margin: 0 !important;
  align-self: auto !important;   /* override inline/older rules */
  background: transparent !important;
}

/* BACK — centered under NEXT */
.quiz-urls-center-wrapper{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%);
  bottom: 16px;                  /* under Next */
  z-index: 10;
  width: auto !important;
}


@media (max-width: 767px){
  .dnk-quiz-outer-wrapper{ padding-bottom: 130px; }

  .dnkqz-quiz-nav{
    bottom: max(56px, calc(52px + env(safe-area-inset-bottom, 0px))) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin: 0 !important;
  }

  .quiz-urls-center-wrapper{
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* === OPTIONS-ONLY SCROLL (append at end) === */

/* stop page scroll and let inner content stretch */
body:not(.elementor-editor-active) .quiz-outer-wrapper{
  overflow: hidden;
  align-items: stretch;
}

/* give flex children permission to shrink/expand */
.dnk-quiz-outer-wrapper{
  gap: 0;            /* optional: more vertical room */
  min-height: 0;
}

/* the white quiz card itself should NOT scroll */
.dnkqz-quiz-widget{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Hide step until fully rendered so question + inputs appear together (no flash) */
.dnkqz-quiz-widget.dnkqz-step-rendering {
  visibility: hidden;
}

/* When showing email collection overlay (any quiz: dnk-quiz, programer, etc.), hide quiz until overlay is visible */
body.dnkqz-showing-email-collection .dnkqz-quiz-widget,
body.dnkqz-showing-email-collection .dnk-quiz-outer-wrapper .dnkqz-quiz-widget,
body.dnkqz-showing-email-collection .dnk-quiz-outer-wrapper .top-section,
body.dnkqz-showing-email-collection .quiz-outer-wrapper .dnkqz-quiz-widget,
body.dnkqz-showing-email-collection .quiz-outer-wrapper .top-section {
  visibility: hidden;
  pointer-events: none;
}

/* only the options area scrolls */
.dnkqz-quiz-widget .options_wrapper{
  flex: 1 1 auto;               /* take remaining space under the question */
  min-height: 0;                /* critical for inner scrolling */
  overflow-y: auto;             /* <-- the scroller */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 140px;        /* keep last item above fixed Next button */
  justify-content: flex-start;  /* begin right under the question */
  align-items: stretch;         /* avoid center squeeze */
}

/* if checkboxes are wrapped here, allow it to scroll too */
.dnkqz-quiz-widget .dnkqz-checkbox-options{
  overflow-y: auto;
}


/* === FINAL FIX: only options scroll; header fully visible === */

/* Stop page scroll and let inner content stretch */
body:not(.elementor-editor-active) .quiz-outer-wrapper{
  overflow: hidden;
  align-items: stretch;
}

/* Flex chain with shrink permission */
.dnk-quiz-outer-wrapper{
  height: 100%;
  min-height: 0;                 /* critical */
  gap: 0;
  display: flex;
  flex-direction: column;
}

/* The white card (do NOT clip it) */
.dnkqz-quiz-widget{
  flex: 1 1 auto;
  min-height: 0;                 /* critical */
  display: flex;
  flex-direction: column;
  overflow: visible !important;  /* was hidden -> caused progress clipping */
  padding-top: 8px;              /* breathing room for progress */
}

/* Only the options area scrolls */
.dnkqz-quiz-widget .options_wrapper{
  flex: 1 1 auto;                /* take remaining height under question */
  min-height: 0;                 /* critical for inner scroll */
  overflow-y: auto;              /* <-- the scroller */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 140px;         /* keep last option above fixed Next */
  justify-content: flex-start;   /* not centered */
  align-items: stretch;
}

/* If checkbox/radio options are wrapped here, allow scroll as well */
.dnkqz-quiz-widget .dnkqz-checkbox-options{
  overflow-y: auto;
}

/* Keep Next fixed (you already pos*/


/* === DNK: options-only scroll, header visible === */

/* stop page scroll and let inner content stretch */
body:not(.elementor-editor-active) .quiz-outer-wrapper{
  overflow: hidden !important;
  align-items: stretch !important;
}

/* flex chain must be allowed to shrink */
.dnk-quiz-outer-wrapper{
  height: 100svh;   /* fill the viewport */
  min-height: 0 !important;
  gap: 0 !important;
  display: flex;
  flex-direction: column;
}

/* the white card should NOT clip its children */
.dnkqz-quiz-widget{
  flex: 1 1 auto;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: visible !important;   /* prevents progress-bar clipping */
  padding-top: 12px;              /* room for progress */
}

/* header (logo/progress/question) stays, does not scroll */
.dnk-quiz-outer-wrapper .top-section,
.dnkqz-progress,
.dnkqz-question-label{
  flex: 0 0 auto;
}

/* make only the options list scroll */
:root{
  /* adjust these two if needed */
  --dnkqz-header-approx: 300px;   /* logo + progress + title area */
  --dnkqz-footer-space: 160px;    /* fixed Next + safe area */
}
.dnkqz-quiz-widget .options_wrapper{
  /* height of the scroller = viewport minus header & footer */
  /*max-height: calc(100svh - var(--dnkqz-header-approx) - var(--dnkqz-footer-space));*/
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  flex: 0 0 auto;                 /* don't compete as a flex-filler */
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* if your options are inside this container, also allow scroll */
.dnkqz-quiz-widget .dnkqz-checkbox-options{
  overflow-y: visible; /* child flows inside the scroller above */
}

/* keep Next fixed (you already have similar rules) */
.dnkqz-quiz-nav{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%);
  bottom: 64px;
  z-index: 10;
}


/* === DNK FINAL: Only options scroll, header visible === */

/* stop page scroll, let inner stretch */
body:not(.elementor-editor-active) .quiz-outer-wrapper{
  overflow: hidden !important;
  align-items: stretch !important;
}

/* outer stack fills the viewport */
.dnk-quiz-outer-wrapper{
  height: 100svh !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* quiz card is a flex column and does NOT clip header */
.dnkqz-quiz-widget{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important; /* prevents progress bar clipping */
  padding-top: 8px;
}

/* header bits don't grow */
.dnk-quiz-outer-wrapper .top-section,
.dnkqz-progress,
.dnkqz-question-label{
  flex: 0 0 auto !important;
}

/* ONLY the options list scrolls */
:root{
  --dnkqz-footer-space: 160px; /* space for fixed Next/back */
}
.dnkqz-quiz-widget .options_wrapper{
  flex: 1 1 auto !important;      /* take remaining height */
  min-height: 0 !important;       /* critical for flex scrolling */
  height: calc(100svh - var(--dnkqz-footer-space)) !important; /* make it a real scroller */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* inner wrapper should not create another scroller */
.dnkqz-quiz-widget .dnkqz-checkbox-options{
  overflow: visible !important;
}

/* keep Next f*/


/* Keep the "Možnih je več odgovorov" line fixed at top of the options area */
.dnkqz-quiz-widget .options_wrapper .dnkqz-multiple-choise{
  position: sticky;
  top: 0;                   /* sticks to the top edge of the options scroller */
  z-index: 2;
  background: #fff;         /* cover options as it sticks */
  padding: 8px 0 10px;
  margin: 0 0 8px;
  /* keep your existing font/color styles */
}


/* Keep "Možnih je več odgovorov" fixed under the question, without overlapping options */
.dnkqz-quiz-widget .options_wrapper{
  position: relative;
  /* spacer equal to the line’s height so first option starts below it */
  --multi-line-h: 28px;              /* tweak 24–36px to match your line height */
  padding-top: var(--multi-line-h);
}

.dnkqz-quiz-widget .options_wrapper .dnkqz-multiple-choise{
  position: sticky;                   /* sticks within the options scroller */
  top: 0;                             /* exactly under the question */
  z-index: 2;
  background: #fff;                   /* cover pills when stuck */
  margin: 0;                          /* remove extra gaps */
  padding: 6px 0 8px;                 /* nice breathing room */
}


/* Keep the helper line tight under the question and not overlapped */
.dnkqz-quiz-widget .options_wrapper{
  /* this is your scroll container already */
  padding-top: 0 !important;                 /* remove extra gap above */
  overflow-y: auto !important;
  /* height: calc(100svh - var(--dnkqz-footer-space)) !important;*/
  -webkit-overflow-scrolling: touch;
}

/* Reset the old negative margin and make it stick to the top of the scroller */
.dnkqz-quiz-widget .options_wrapper .dnkqz-multiple-choise{
  position: sticky;
  top: 0;                                    /* sits directly under the question */
  z-index: 3;
  background: #fff;
  margin: 0 !important;                      /* kills the -17px */
  padding: 6px 0 8px !important;             /* small breathing room */
}

/* Make sure the first option doesn't hide under the sticky line */
.dnkqz-quiz-widget .options_wrapper .options_radio,
.dnkqz-quiz-widget .options_wrapper .dnkqz-checkbox-options{
  margin-top: 6px !important;                /* tiny spacer below the sticky line */
}

.dnkqz-multiple-choise {
  text-align: center;
}

.quiz-intro-wrapper.has-intro-bg {
  z-index:100;
}

/* Ensure image maintains size and doesn't overlap text */
.quiz-intro-wrapper img {
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Prevent content from shrinking on any screen size - has-intro-bg: solid white card */
.quiz-intro-wrapper.has-intro-bg > .quiz-intro-content {
  flex-shrink: 0;
  min-height: fit-content;
  position: relative;
  z-index: 10;
  background: #ffffff;
  backdrop-filter: none;
  border-radius: 16px;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08), 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Inline label + input for grouped fields */
.options_group .dnkqz-group-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;              /* space between label and input */
  margin-bottom:20px;
}

.options_group .dnkqz-group-label{
  margin:0;              /* remove default gaps */
  display: flex;
  flex-direction: column;
}

.options_group .dnkqz-group-question{
  font-weight: bold;
  margin-bottom: 2px;
  line-height: 1.3;
  display: block;
}

.options_group .dnkqz-group-description{
  font-weight: normal;
  margin-top: 0;
  line-height: 1.3;
  display: block;
}

.options_group .dnkqz-answer-input{
  flex:1 1 auto;         /* input takes the remaining width */
  max-width:520px;       /* optional: cap width so it doesn’t get too wide */
  width:100%;
}

/* Desktop: label and input in same row (above 640px) */
@media (min-width: 641px){
  .options_group .dnkqz-group-row{
    flex-direction:row;
    align-items:center;
  }
  .options_group .dnkqz-group-label{
    flex:0 0 240px;        /* label column width */
  }
}

/* Mobile: stack label above input (640px and below) */
@media (max-width: 640px){
  .options_group .dnkqz-group-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    display: block !important;
    width: 100% !important;
  }
  .dnkqz-extra-info {
    margin: 20px auto;
  }
  .dnk-quiz-outer-wrapper .top-section {
    margin-top:-50px;
  }
  .options_group .dnkqz-group-label{
    flex:none;
    width:100%;
    text-align:left;
  }
  .options_group .dnkqz-answer-input{
    width:100%;
    max-width:100%;
  }
  /* Override side-by-side layout for height/weight on mobile - stack all fields vertically */
  .dnkqz-quiz-widget .options_group .dnkqz-group-row:has(#height),
  .dnkqz-quiz-widget .options_group .dnkqz-group-row:has(#weight){
    display: block !important;
    width: 100% !important;
  }
}


.dnkqz-quiz-widget {
  width: 100%;
}


/* Show a leading icon ONLY when the option is selected
 (works for both .dnkqz-radio and .dnkqz-checkbox pills) */
.dnkqz-quiz-widget .dnkqz-radio:not(.consent-checkbox),
.dnkqz-quiz-widget label.dnkqz-checkbox:not(.consent-checkbox){
  position: relative;
  padding-left: 46px;          /* reserve space so layout doesn't jump */
}

/* Base (hidden) state for the icon */
.dnkqz-quiz-widget .dnkqz-radio:not(.consent-checkbox)::before,
.dnkqz-quiz-widget label.dnkqz-checkbox:not(.consent-checkbox)::before{
  content: "";
  position: absolute;
  left: 18px;                  /* aligns with your pill padding */
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  width: 18px;
  height: 18px;
  background-image: url("../assets/images/add-to-cart-icon-02-1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;                  /* hidden until selected */
  pointer-events: none;        /* clicks go through */
  transition: opacity .15s ease, transform .15s ease;
}

/* Reveal the icon when selected */
.dnkqz-quiz-widget .dnkqz-radio.selected:not(.consent-checkbox)::before,
.dnkqz-quiz-widget label.dnkqz-checkbox.selected:not(.consent-checkbox)::before{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Optional: a bit of “selected” styling to match your screenshot */
.dnkqz-quiz-widget .dnkqz-radio.selected,
.dnkqz-quiz-widget .dnkqz-checkbox.selected{
  background: #E6F4EF;         /* soft green fill */
  border-color: #1FB15A;       /* green outline */
}

.dnkqz-hide-progress .dnkqz-progress{
  display:none !important;
}

/* Hide labels only on the last "final" group step */
.options_group.is-final-group .dnkqz-group-label {
  display: none;
}

/* Make inputs look like in your screenshot (pill, subtle border, no shadow) */
.options_group.is-final-group .dnkqz-answer-input {
  width: 100%;
  max-width: 360px;
  margin: 5px auto;
  display: block;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  box-shadow: none;
  padding: 12px 16px;
  font-size: 15px;
  outline: none;
}

/* Placeholder style */
.options_group.is-final-group .dnkqz-answer-input::placeholder {
  color: #8aa1a5;
}

/* Keep the progress bar hidden only here (your JS already toggles class); if you scoped it to body, keep as is */
.dnkqz-quiz-widget.dnkqz-hide-progress .dnkqz-progress {
  display: none !important;
}


/* === OPTIONS ONLY: left→right pills, wrap to new line when no space === */
@media (min-width:768px){

  /* Make the options container a simple block with clearfix */
  body .dnkqz-quiz-widget .options_wrapper{
    display: block !important;
    max-width: 1100px;                 /* overall row width – tweak if you want */
    margin: 8px auto 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body .dnkqz-quiz-widget .options_wrapper::after{
    content: "";
    display: block;
    clear: both;                        /* clears the floated pills */
  }

  /* Kill any column/grid/100% width coming from inner wrappers */
  body .dnkqz-quiz-widget .options_wrapper > *,
  body .dnkqz-quiz-widget .options_wrapper .options_radio,
  body .dnkqz-quiz-widget .options_wrapper .dnkqz-checkbox-options,
  body .dnkqz-quiz-widget .options_wrapper .options_text{
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    column-count: initial !important;
    grid-template-columns: none !important;
  }

  #lead_name {
    margin-bottom: 10px;
  }

  /* PILLS = floated inline blocks that wrap naturally */
  body .dnkqz-quiz-widget .dnkqz-radio,
  body .dnkqz-quiz-widget label.dnkqz-checkbox{
    float: left !important;             /* << key: sit next to each other */
    white-space: nowrap !important;     /* text stays on one line */
    width: auto !important;             /* shrink-to-fit text */
    max-width: none !important;
    margin: 8px 12px 0 0 !important;    /* gap between pills (right/top) */
    padding: 12px 20px;                 /* pill padding; tweak to taste */
    display: inline-flex !important;    /* keep vertical centering inside */
    align-items: center;
    justify-content: flex-start;
  }
}

/* Keep “Možnih je več odgovorov” right under the question (options only) */
body .dnkqz-quiz-widget .options_wrapper { position: relative; }
body .dnkqz-quiz-widget .options_wrapper .dnkqz-multiple-choise{
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  padding: 6px 0 8px !important;
  margin: 0 0 6px !important;
  text-align: left;
  float: none !important;               /* don’t participate in the float row */
  display: block !important;
  clear: both;                          /* line sits above the floating pills */
}

/* Optional: center rows (remove float) */
@media (min-width:768px){
  body .dnkqz-quiz-widget .options_wrapper{
    text-align: center !important;
  }
  body .dnkqz-quiz-widget .dnkqz-radio,
  body .dnkqz-quiz-widget label.dnkqz-checkbox{
    float: none !important;
    display: inline-block !important;
  }
}




/* Final step: remove the bottom margin between rows */
.options_group.is-final-group .dnkqz-group-row {
  margin-bottom: 0 !important;
}

/* If your final step wrapper has the id "final_capture", this also covers it */
#final_capture .dnkqz-group-row {
  margin-bottom: 0 !important;
}

/* RESET the old icon pseudo-element so it won't hide our ring */
.dnkqz-quiz-widget .dnkqz-radio:not(.consent-checkbox)::before,
.dnkqz-quiz-widget label.dnkqz-checkbox:not(.consent-checkbox)::before{
  background-image: none !important;
  opacity: 1 !important;      /* old rule had opacity:0 */
}

/* Unselected = grey hollow circle */
.dnkqz-quiz-widget .dnkqz-radio:not(.selected):not(.consent-checkbox)::before,
.dnkqz-quiz-widget label.dnkqz-checkbox:not(.selected):not(.consent-checkbox)::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
  background: #fff;
}

/* Selected = green filled circle + check */
.dnkqz-quiz-widget .dnkqz-radio.selected:not(.consent-checkbox)::before,
.dnkqz-quiz-widget label.dnkqz-checkbox.selected:not(.consent-checkbox)::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #1FB15A;
  background-color: #1FB15A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4 4L15 1' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

/* Ensure left padding so the dot never overlaps the text */
.dnkqz-quiz-widget .dnkqz-radio:not(.consent-checkbox),
.dnkqz-quiz-widget label.dnkqz-checkbox:not(.consent-checkbox){
  position: relative;
  padding-left: 46px;
}

/* Correct the checkmark direction inside the green dot */
.dnkqz-quiz-widget .dnkqz-radio.selected:not(.consent-checkbox)::after,
.dnkqz-quiz-widget label.dnkqz-checkbox.selected:not(.consent-checkbox)::after{
  content: "";
  position: absolute;
  left: 27px;                          /* center in the 18px dot */
  top: 50%;
  transform: translate(-50%, -58%) rotate(-45deg);  /* flipped direction */
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;         /* draw the tick */
  border-bottom: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  pointer-events: none;
  z-index: 2;
}








/* make sure extra info sits under the fields, scrolls, and isn't hidden by the fixed nav */
.dnkqz-quiz-widget .options_wrapper .dnkqz-extra-info-wrap {
  margin-top: 12px;
}

.dnkqz-quiz-widget .options_wrapper .dnkqz-extra-info {
  position: relative;
  z-index: 1;
}

/* give enough bottom room so it doesn't sit under the fixed Next button */
:root { --dnkqz-footer-space: 160px; } /* you already use this; keep or adjust */
.dnkqz-quiz-widget .options_wrapper{
  /*padding-bottom: calc(var(--dnkqz-footer-space) + 16px) !important;*/
  overflow-y: auto !important; /* ensure this stays a scroller */
}

/* if you still have a desktop rule forcing overflow:visible on .options_wrapper, override it */
@media (min-width:768px){
  body .dnkqz-quiz-widget .options_wrapper{ overflow-y:auto !important; }
}









/* ===== Center the form on DESKTOP only ===== */
@media (min-width: 1024px){
  /* center the scroll area’s contents */
  .dnkqz-quiz-widget .options_wrapper{
    align-items: center !important;     /* was: stretch */
  }

  /* the 3 rows block sits centered */
  .dnkqz-quiz-widget .options_group{
    width: 520px;
    max-width: 90vw;

  }

  /* each row centers its label+input pair */
  .dnkqz-quiz-widget .options_group .dnkqz-group-row{
    justify-content: left;            /* keeps the pair centered */
  }

  /* shorter inputs + right-aligned labels (as in your screenshot) */
  .dnkqz-quiz-widget .options_group .dnkqz-group-label{
    flex: 0 0 220px;
    text-align: left;
  }
  .dnkqz-quiz-widget .options_group .dnkqz-answer-input{
    flex: 0 0 260px;
    max-width: 260px;
    text-align: center;
    margin: 0;
  }

  /* center the green info box */
  .dnkqz-quiz-widget .dnkqz-extra-info-wrap{
    display: flex;
    justify-content: center;
  }
  .dnkqz-quiz-widget .dnkqz-extra-info{
    max-width: 820px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* Short screens: birth year on its own line,
 then HEIGHT | WEIGHT side-by-side (everything centered) */
@media (max-height: 665px){

  /* keep the container simple; we’ll center children via inline-block */
  .dnkqz-quiz-widget .options_group{
    text-align: center;
  }

  /* default row look */
  .dnkqz-quiz-widget .options_group .dnkqz-group-row{
    display: block;
    width: 100%;
    margin: 8px 0;
  }

  .nf-final .sub {
    margin-block-end:0!important;
  }

  /* Birth year: full row */
  .dnkqz-quiz-widget .options_group .dnkqz-group-row:has(#birth_year){
    width: 100%;
    display: block;
  }

  /* Height & Weight: sit next to each other */
  .dnkqz-quiz-widget .options_group .dnkqz-group-row:has(#height),
  .dnkqz-quiz-widget .options_group .dnkqz-group-row:has(#weight){
    display: inline-block;        /* makes siblings line up horizontally */
    width: calc(50% - 12px);      /* two columns with a little gap */
    vertical-align: top;
  }

  /* tidy label + input */
  .dnkqz-quiz-widget .options_group .dnkqz-group-label{
    display: block;
    text-align: center;
    margin: 0 0 6px;
  }
  .dnkqz-quiz-widget .options_group .dnkqz-answer-input{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 260px;             /* prevent giant pills */
    height: 48px !important;      /* lock height to avoid “circle” look */
  }
}






/* Only the outer options wrapper scrolls */
.dnkqz-quiz-widget .options_wrapper{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Inner wrappers must NOT scroll (or sticky/top fades break) */
.dnkqz-quiz-widget .dnkqz-checkbox-options,
.dnkqz-quiz-widget .options_radio{
  overflow: visible !important;
}

/* Mobile fades (child nodes) */
@media (max-width: 767px){
  .dnkqz-scrollfade{
    position: relative;
    background: #fff;
  }
  .dnkqz-fade-top,
  .dnkqz-fade-bottom{
    position: sticky;
    left: 0;
    right: 0;
    width: 100%;
    height: 32px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .dnkqz-fade-top{
    top: 0;
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
  }
  .dnkqz-fade-bottom{
    bottom: 0;
    background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
  }

  .dnkqz-scrollfade.has-top .dnkqz-fade-top{ opacity: 1; }
  .dnkqz-scrollfade.has-bottom .dnkqz-fade-bottom{ opacity: 1; }
}


.options_wrapper.dnkqz-scrollfade{
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  --fade: #fff;             /* set to your page bg if not white */
  background: var(--fade);
  /* ensure there’s a height limit so it actually scrolls */
  max-height: 70svh;        /* tweak to taste */
}



/* Final step: stack each field on its own line */
.options_group.is-final-group .dnkqz-group-row{
  display: grid;
  grid-template-columns: 1fr;   /* single column */
  row-gap: 8px;                 /* space between label, input, privacy */
  margin-bottom: 14px;
}

/* Make inputs full width */
.options_group.is-final-group .dnkqz-group-row .dnkqz-answer-input{
  width: 100%;
}

/* Privacy line on its own row, with icon + text aligned */
.options_group.is-final-group .nf-privacy{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
}

/* (optional) icon sizing */
.options_group.is-final-group .nf-privacy .gdpr-icon{
  width: 14px;
  height: auto;
}


/* Center the final step layout (without changing your existing rules) */
.options_group.is-final-group{
  display: flex;
  flex-direction: column;
  align-items: center;              /* centers children */
}

.options_group.is-final-group .dnkqz-group-row{
  width: 100%;
  /*max-width: 420px;                 tweak if you want wider/narrower */
  /*margin: 14px auto;                 centers the row block */
  text-align: center;               /* centers label text */
  justify-items: center;            /* centers grid children */
}

.options_group.is-final-group .nf-privacy{
  justify-content: center;          /* center icon + text */
  margin: 0px auto 0;               /* center the privacy line */
  text-align: center;
}


/* Overlay should cover the viewport, be white, and center its content */
#dnkqz-motivation-overlay {
  position: fixed !important;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  display: none;            /* jQuery fadeIn/Out controls visibility */
  background: #fff !important;
  z-index: 99999;
  display: none;
  /* If your centering relies on flex, keep these: */
  display: none; /* default hidden */
}
#dnkqz-motivation-overlay.dnkqz-flex {
  display: flex;            /* optional: only if your theme used flex-centering */
  align-items: center;
  justify-content: center;
}


/* Top progress bar (fixed, non-intrusive) */
#dnkqz-progressbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;                 /* was 4px */
  z-index: 100000;
  pointer-events: none;
}

#dnkqz-progressbar .dnkqz-progressbar__track {
  width: 100%;
  height: 100%;
  background: rgba(55, 162, 75, 0.15);  /* subtle green track */
  overflow: hidden;
}

#dnkqz-progressbar .dnkqz-progressbar__fill {
  width: 0%;
  height: 100%;
  background: #37a24b;          /* your color */
  transition: width 0.25s ease;
}

/* motion-reduced users */
@media (prefers-reduced-motion: reduce) {
  #dnkqz-progressbar .dnkqz-progressbar__fill { transition: none; }
}

#dnkqz-progressbar.is-complete {
  animation: dnkqz-bar-fade 400ms ease forwards;
}
@keyframes dnkqz-bar-fade { to { opacity: 0; } }




/* FINAL SCREEN — shrink the tall options_wrapper and move CTA up */
@media (max-width: 767px){
  /* kill the tall viewport layout and footer spacing */
  body.dnkqz-hide-progress .dnkqz-quiz-widget .options_wrapper{
    flex: 0 0 auto !important;   /* stop flex from stretching it */
    height: auto !important;
    min-height: 0 !important;    /* overrides plugin's big min-height */
    overflow-y: auto !important; /* enable scrolling for BMI result */
    -webkit-overflow-scrolling: touch !important;
    background: #fff;
    margin-top:0px;
    margin-bottom:0px;           /* keep the white panel */
  }

  .dnkqz-back-btn-wrap .dnkqz-back-btn {
    padding:0px!important;
  }

  /* put the CTA right under the privacy line - but keep fixed for BMI result */
  body.dnkqz-hide-progress .dnkqz-quiz-widget:not(.has-bmi-result) .dnkqz-quiz-nav{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Style the X in "no cravings" option to be green */
.dnkqz-checkbox.no-cravings-option .dnkqz-checkbox-label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dnkqz-checkbox.no-cravings-option .dnkqz-checkbox-label::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #4CAF50;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 1 L11 11 M11 1 L1 11' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  flex-shrink: 0;
}

/* Remove the emoji X from the label text */
.dnkqz-checkbox.no-cravings-option .dnkqz-checkbox-label {
  padding-right: 0;
}

/* trim any bottom gap from the final group */
body.dnkqz-hide-progress .dnkqz-quiz-widget .options_group.is-final-group{
  margin-bottom: 0 !important;
}

@media only screen and (max-width: 900px) {
  .dnk-quiz-outer-wrapper{
    height: 103svh!important;
  }
}

/* ============================================
   Goals Widget - Unique Classes (Doesn't affect quiz)
   ============================================ */

.dnkqz-goals-widget {
  width: 100%;
}

.dnkqz-goals-wrapper {
  padding: 20px 0;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  justify-content: center;
}

.dnkqz-goals-title {
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.4;
  text-align: left;
  width: 100%;
  text-align:center;
}

.dnkqz-goals-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  width: 300px;
  text-align: left;
}

.dnkqz-goals-item {
  background-color: #fff;
  border-radius: 50px;
  font-weight: 300;
  border: 1px solid #1FB15A;
  cursor: default;
  position: relative;
  padding: 12px 20px;
  padding-left: 46px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  background: #E6F4EF;
}

.dnkqz-goals-item input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  appearance: none;
}

/* Green checkmark circle on the left */
.dnkqz-goals-item::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #1FB15A;
  background-color: #1FB15A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4 4L15 1' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  pointer-events: none;
}

.dnkqz-goals-item-label {
  vertical-align: text-top;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dnkqz-goals-item-text {
  flex: 1;
  font-size: 15px;
  color: #000;
}

.dnkqz-goals-item-emoji {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 15px;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .dnkqz-goals-wrapper {
    padding: 15px 0;
  }

  .dnkqz-goals-item {
    padding: 10px 16px;
    padding-left: 42px;
    font-size: 14px;
  }

  .dnkqz-goals-item::before {
    left: 16px;
    width: 16px;
    height: 16px;
    background-size: 9px 9px;
  }
}

/* ============================================
   Health Metrics Widget - Lifestyle & metabolic signals
   ============================================ */

.dnkqz-health-metrics-card {
  background: #fff;
  border-radius: 12px;
  font-size: 16px;
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Metabolic report block (avatar, title, name+age, date, metrics, goals) */
.dnkqz-metabolic-report {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* When only metabolic report is shown, no separator line */
.dnkqz-health-metrics-card--report-only .dnkqz-metabolic-report {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.dnkqz-metabolic-report-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.dnkqz-metabolic-report-avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #1FB25A;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dnkqz-metabolic-report-heading {
  flex: 1;
  min-width: 0;
}

.dnkqz-metabolic-report-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.dnkqz-metabolic-report-name-age {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  margin: 0 0 2px 0;
  line-height: 1.4;
}

.dnkqz-metabolic-report-name-age .dnkqz-metabolic-report-name {
  font-weight: 700;
}

.dnkqz-metabolic-report-name-age .dnkqz-metabolic-report-age {
  font-weight: 300;
}

.dnkqz-metabolic-report-date {
  font-size: 12px;
  color: #000;
  margin: 5px 0 0 0;
  line-height: 1.4;
}

.dnkqz-metabolic-report-metrics,
.dnkqz-metabolic-report-goals {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 6px;
}

.dnkqz-metabolic-report-metrics:last-child,
.dnkqz-metabolic-report-goals:last-child {
  margin-bottom: 0;
}

.dnkqz-metabolic-report-label {
  color: #333;
  font-weight: 300;
}

.dnkqz-metabolic-report-value {
  color: #333;
  font-weight: 300;
}

.dnkqz-health-metrics-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 20px 0;
  line-height: 1.3;
}

.dnkqz-metric-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  line-height: 1.6;
  flex-wrap: wrap;
  gap: 8px;
}

.dnkqz-metric-row:last-child {
  margin-bottom: 0;
}

.dnkqz-metric-icon {
  flex-shrink: 0;
  color: #333;
  margin-right: 10px;
  vertical-align: middle;
}

.dnkqz-metric-label {
  color: #000;
  font-size: 16px;
  font-weight: 300;
}

.dnkqz-metric-value {
  color: #333;
  font-size: 16px;
  font-weight: 400;
}

.dnkqz-metric-value.dnkqz-metric-bold {
  font-weight: 700;
}

.dnkqz-metric-value.dnkqz-metric-red {
  color: #f44336;
  font-weight: 400;
}

.dnkqz-metric-value.dnkqz-metric-warning {
  color: #ff9800;
}

.dnkqz-metric-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  margin-left: 8px;
  white-space: nowrap;
}

.dnkqz-metric-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  font-size: 10px;
  font-weight: 700;
  margin-right: 6px;
}

.dnkqz-metric-badge-icon--img {
  background: none !important;
  border-radius: 0;
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
}

.dnkqz-metric-badge-warning {
  background-color: #fff9c4;
  color: #333;
  border: 1px solid #ffd54f;
}

.dnkqz-metric-badge-danger {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ef5350;
}

.dnkqz-metric-badge-danger-solid {
  background-color: #c62828;
  color: #fff;
  border: none;
  margin-left: 8px;
}

/* Red pill next to metabolic age: light red bg, red border, red circle with white !, black text */
.dnkqz-metric-badge-below-range {
  background-color: #ffe0e0;
  color: #000;
  border: 1px solid #ef5350;
  margin-left: 8px;
}

.dnkqz-metric-badge-below-range .dnkqz-metric-badge-icon:not(.dnkqz-metric-badge-icon--img) {
  background-color: #c62828;
  color: #fff;
}

.dnkqz-metric-badge-below-range .dnkqz-metric-badge-icon--img {
  background: none !important;
}

/* Green pill when metabolic age is under/equal to chronological age */
.dnkqz-metric-badge-within-range {
  background-color: #e8f5e9;
  color: #000;
  border: 1px solid #66bb6a;
  margin-left: 8px;
}

.dnkqz-metric-badge-within-range .dnkqz-metric-badge-icon:not(.dnkqz-metric-badge-icon--img) {
  background-color: #2e7d32;
  color: #fff;
}

.dnkqz-metric-badge-within-range .dnkqz-metric-badge-icon--img {
  background: none !important;
}

.dnkqz-metric-badge-info {
  background-color: #e3f2fd;
  color: #1565c0;
  border: 1px solid #64b5f6;
}

.dnkqz-metric-badge-success {
  background-color: #e8f5e9;
  color: #000;
  border: 1px solid #66bb6a;
}

.dnkqz-metric-badge-success .dnkqz-metric-badge-icon:not(.dnkqz-metric-badge-icon--img) {
  background-color: #2e7d32;
  color: #fff;
}

.dnkqz-metric-badge-orange {
  background-color: #fff3e0;
  color: #e65100;
  border: 1px solid #ff9800;
}

.dnkqz-metric-badge strong {
  font-weight: 700;
  margin-left: 0;
}


/* Mobile responsive */
@media (max-width: 600px) {
  .dnkqz-health-metrics-card {
    border-radius: 8px;
    width: 100%;
  }

  .dnkqz-metabolic-report {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .dnkqz-metabolic-report-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    font-size: 14px;
  }

  .dnkqz-metabolic-report-title {
    font-size: 16px;
  }

  .dnkqz-metabolic-report-name-age {
    font-size: 14px;
  }

  .dnkqz-metabolic-report-date {
    font-size: 12px;
  }

  .dnkqz-metabolic-report-metrics,
  .dnkqz-metabolic-report-goals {
    font-size: 14px;
  }

  .dnkqz-health-metrics-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .dnkqz-metric-row {
    margin-bottom: 14px;
  }

  .dnkqz-metric-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }

  .dnkqz-metric-label,
  .dnkqz-metric-value {
    font-size: 14px;
  }

  .dnkqz-metric-badge {
    font-size: 12px;
    padding: 3px 10px;
    margin-left: 4px;
  }
}


@media (max-width: 770px) {
  .dnkqz-health-metrics-card {
    width:100%;
    max-width: 100%;
    margin:0px;
  }
}

/* ============================================
   DNK Quiz Summary Card (Body fat, Activity, Digestive, Goal + image)
   ============================================ */

.dnkqz-summary-card {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 400px;
}

.dnkqz-summary-card__content {
  position: relative;
  z-index: 1;
  padding: 24px;
  max-width: 50%;
}

.dnkqz-summary-card__row {
  margin-bottom: 20px;
}

.dnkqz-summary-card__row:last-child {
  margin-bottom: 0;
}

.dnkqz-summary-card__label {
  color: #000;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 6px;
}

.dnkqz-summary-card__value-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dnkqz-summary-card__icon {
  flex-shrink: 0;
  display: block;
}

.dnkqz-summary-card__value {
  font-weight: 700;
  color: #000;
}

.dnkqz-summary-card__value--goal {
  /* Same as other values – no purple styling */
}

.dnkqz-summary-card-error {
  padding: 12px;
  color: #666;
  font-family: "Fira Sans", sans-serif;
}

@media (max-width: 768px) {
  .dnkqz-summary-card {
    min-height: 280px;
    font-size: 14px;
  }

  .dnkqz-summary-card__content {
    max-width: 100%;
    padding: 16px;
  }

  .dnkqz-summary-card__row {
    margin-bottom: 12px;
  }

  .dnkqz-summary-card__label {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .dnkqz-summary-card__icon {
    width: 20px;
    height: 20px;
  }

  .dnkqz-summary-card__value {
    font-size: 14px;
  }
}

/* ============================================
   BMI Widget – Body Mass Index scale
   ============================================ */

.dnkqz-bmi-widget {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #333;
}

.dnkqz-bmi-error {
  padding: 12px;
  color: #c62828;
  font-size: 14px;
}

.dnkqz-bmi-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #333;
}

.dnkqz-bmi-pill-wrap,
.dnkqz-bmi-category-wrap {
  text-align: center;
}

.dnkqz-bmi-pill-wrap {
  margin-bottom: 16px;
}

.dnkqz-bmi-category-wrap {
  margin-top: 16px;
}

.dnkqz-bmi-pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
}

.dnkqz-bmi-pill-you {
  background: #F1CC33;
  color: #fff;
  border: 1px solid #F1CC33;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  padding: 5px 20px;
}

.dnkqz-bmi-scale-wrap {
  margin-bottom: 16px;
}

.dnkqz-bmi-scale-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  /* 0–80 scale: <18.5 blue, 18.5–24.9 green, 25–29.9 yellow/orange, 30+ red (smooth gradient) */
  background: linear-gradient(to right, #00BCD4 0%, #00BCD4 23%, #66BB6A 25%, #66BB6A 31%, #F1CC33 38%, #C62828 100%);
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dnkqz-bmi-scale-indicator {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #F1CC33;
  box-shadow: 0 0 10px rgba(241, 204, 51, 0.5), 0 2px 6px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.dnkqz-bmi-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #000;
  padding: 0 2px;
}

.dnkqz-bmi-scale-label {
  flex: 1;
  text-align: center;
}

.dnkqz-bmi-scale-label:first-child {
  text-align: left;
}

.dnkqz-bmi-scale-label:last-child {
  text-align: right;
}

.dnkqz-bmi-category-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  border-radius: 20px;
  background: #F1CC3320;
  border: 1px solid #F1CC33;
  font-size: 14px;
  line-height: 14px;
  color: #333;
}

.dnkqz-bmi-category-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
}

.dnkqz-bmi-category-text strong {
  font-weight: 700;
}

/* ============================================
   DNK Product Benefits widget
   ============================================ */

.dnkqz-product-benefits {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #000;
}

.dnkqz-product-benefits-empty {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 12px;
  font-size: 14px;
  color: #000;
}

.dnkqz-product-benefits-list {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0 0 1em 0;
}

.dnkqz-product-benefits-item {
  margin-bottom: 1.25em;
  padding-left: 0.75em;
}

.dnkqz-product-benefits-item:last-child {
  margin-bottom: 0;
}

.dnkqz-product-benefits-list li::marker {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #000;
}

.dnkqz-product-benefits-title {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #000;
}

.dnkqz-product-benefits-desc {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  color: #000;
}

/* ============================================
   DNK Insights widget (title + numbered list, light green box)
   ============================================ */

.dnkqz-insights {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: transparent;
  border-radius: 12px;
  padding: 24px;
  color: #333;
}

.dnkqz-insights-empty {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 12px;
  font-size: 14px;
  color: #000;
}

.dnkqz-insights-title {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 22px !important;
  font-weight: bold !important;
  color: #000;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.dnkqz-insights-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dnkqz-insights-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.dnkqz-insights-item:last-child {
  margin-bottom: 0;
}

.dnkqz-insights-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  background-color: #35AC5A;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dnkqz-insights-text {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #000;
}

.dnkqz-insights-text p {
  margin: 0 0 0.5em 0;
}

.dnkqz-insights-text p:last-child {
  margin-bottom: 0;
}

/* Insights, Product Benefits & DNA Product Block – mobile sizes */
@media (max-width: 767px) {
  .dnkqz-insights-title {
    font-size: 16px !important;
  }
  .dnkqz-insights-text {
    font-size: 14px;
  }
  .dnkqz-product-benefits-title {
    font-size: 16px;
  }
  .dnkqz-product-benefits-desc {
    font-size: 14px;
  }
  .dnkqz-dna-product-block-title {
    font-size: 18px !important;
  }
  .dnkqz-dna-product-block-desc {
    font-size: 14px !important;
  }
}

/* ============================================
   DNA Product Block widget (icon, title, subtitle, desc)
   ============================================ */

.dnkqz-dna-product-block {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #000;
}

.dnkqz-dna-product-block-empty {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 12px;
  font-size: 14px;
  color: #000;
}

.dnkqz-dna-product-block-icon {
  margin-bottom: 10px;
  width: 35px;
  height: 35px;
}

.dnkqz-dna-product-block-icon img {
  display: block;
  width: 35px;
  height: 35px;
  object-fit: contain;
  vertical-align: middle;
}

.dnkqz-dna-product-block-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #000;
}

.dnkqz-dna-product-block-subtitle {
  font-size: 12px;
  font-weight: 300;
  color: #000;
  margin: 0 0 8px 0;
  line-height: 14px;
}

.dnkqz-dna-product-block-desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  color: #000;
}

/* When all content is in one (subtitle) field: use these inside the text */
.dnkqz-dna-product-block-subtitle .dnkqz-dna-block-title-inline {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 4px;
}

.dnkqz-dna-product-block-subtitle .dnkqz-dna-block-green {
  color: #1FB25A;
  font-weight: 700;
}

.dnkqz-dna-product-block-desc p {
  margin: 0 0 0.5em 0;
}

.dnkqz-dna-product-block-desc p:last-child {
  margin-bottom: 0;
}

.dnkqz-dna-product-block p {
  margin-block-end: 0 !important;
}