/*hide footer that appears on the middle of the screen*/
#site-footer {
    display: none;
}

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;
    padding: env(safe-area-inset-top) 16px max(20px, env(safe-area-inset-bottom));
}

body:not(.elementor-editor-active) .quiz-intro-wrapper {
    position: fixed;
    inset: 0;
    height: 100vh; /* use viewport height */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* push content to bottom */
    align-items: center; /* center horizontally */
    overflow: hidden; /* prevent scrolling issues */
    background: #F6F6F6;
    padding: env(safe-area-inset-top) 16px max(60px, env(safe-area-inset-bottom) + 40px);
}

.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;
}

.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: transparent;
    border-radius: 18px;
    padding: 30px 30px 30px 30px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    position: static; /* remove absolute */
    transform: none; /* remove previous translate */
    margin: 0 auto;
    flex-shrink: 0; /* prevent shrinking */
    min-height: fit-content; /* maintain natural height */
}

#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-bottom: 50px;
}

/* 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;
    max-width: 520px;
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom:0px;
    margin-top:0px;

}

.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;
}

#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;
}

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

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

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

.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 24px 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;
    }

}

/* 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(80px, env(safe-area-inset-bottom) + 60px);
        justify-content: flex-end; /* keep content at bottom */
    }
    
    .quiz-intro-wrapper > .quiz-intro-content {
        padding: 20px 10px 20px 10px;
        margin-bottom: 20px;
        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-bottom: 30px;
    }
    
    .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) {
    .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;
}

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

@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: 0;
  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;
}

}






/* 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: 56px !important;     /* slightly tighter on small screens */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin: 0 !important;
  }

  .quiz-urls-center-wrapper{
    bottom: 12px !important;     /* back sits just below next */
    left: 50% !important;
    transform: translateX(-50%);
  }
}


/* === 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;
}

/* 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 */
.quiz-intro-wrapper > .quiz-intro-content {
    flex-shrink: 0;
    min-height: fit-content;
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

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

.options_group .dnkqz-group-label{
  flex:0 0 240px;        /* label column width */
  margin:0;              /* remove default gaps */
}

.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%;
}

/* Mobile: stack label above input */
@media (max-width: 640px){
  .options_group .dnkqz-group-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .dnkqz-extra-info {
    margin: 20px auto;
  }
  .dnk-quiz-outer-wrapper .top-section {
    margin-top:-50px;
  }
  .options_group .dnkqz-group-label{
    flex:none;
    text-align:left;
  }
}


.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("https://duplicate.naturesfinest.si/wp-content/uploads/2024/03/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: visible !important;
    padding-bottom: 0 !important; /* remove space reserved for sticky nav */
    background: #fff;  
    margin-top:0px;
    margin-bottom:0px;           /* keep the white panel */
  }

  /* if fades were added for scrolling, hide them on this step */
  body.dnkqz-hide-progress .dnkqz-fade-top,
  body.dnkqz-hide-progress .dnkqz-fade-bottom{
    display: none !important;
  }

  /* put the CTA right under the privacy line */
  body.dnkqz-hide-progress .dnkqz-quiz-widget .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;
  }

  body.dnkqz-hide-progress .dnkqz-quiz-widget .dnkqz-quiz-nav .dnkqz-quiz-btn{
    width: 100% !important;
  }

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