#dnk-quiz-widget { max-width:500px;margin:auto;padding:2em;background:#fff;border-radius:10px; }
.dnk-quiz-q { font-size:1.2em;margin-bottom:1em;font-weight:bold;}
.dnk-quiz-progress { margin-bottom:1em;text-align:center;}
.dnk-quiz-dot { display:inline-block;width:12px;height:12px;border-radius:50%;background:#eee;margin:0 3px;}
.dnk-quiz-dot-active { background:#3366cc;}
.dnk-quiz-nav { margin-top:2em;text-align:right; }
.dnk-quiz-answers {width:100%;border-collapse:collapse;margin:1em 0;}
.dnk-quiz-answers td {border:1px solid #ddd;padding:5px;}

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