/* =========================================================================
   VEFIFY QUIZ — Pro front-end stylesheet
   ------------------------------------------------------------------------
   Single-source design system for the participant flow (register → quiz
   → result). Branding colors come from CSS variables injected inline by
   render_quiz_form() (see class-enhanced-shortcodes.php). Anything that
   the admin can configure (primary/secondary/text/background) is wired
   through those variables and SHOULD NOT be hard-coded here.
   ------------------------------------------------------------------------
   Architecture: mobile-first. Layout uses logical properties + clamp()
   so font-size and padding scale fluidly from 360px to 1280px without
   needing many @media breakpoints.
   ========================================================================= */

/* --- Design tokens — role mapping for the admin's branding settings ---
 *
 * Setting           Where it lives                Setting key
 * ─────────────     ─────────────────────────     ────────────────────
 * Page background → behind everything            background_gradient
 * Card text       → text inside white cards      text_color
 * Accent          → buttons, focus ring, links   primary_color
 * Highlight       → reserved (status badges)     secondary_color
 *
 * Each role is intentionally ONE setting, so admin picking ugly clashing
 * colors only ever ruins one component, not a whole gradient.
 */
.vefify-quiz-container {
    --vfy-primary:      var(--vefify-primary-color, #2563eb);
    --vfy-primary-rgb:  var(--vefify-primary-rgb, 37, 99, 235);
    --vfy-secondary:    var(--vefify-secondary-color, #7c3aed);
    /* Card text follows the admin's text_color setting. */
    --vfy-text:         var(--vefify-text-color, #0f172a);
    --vfy-text-muted:   color-mix(in srgb, var(--vfy-text) 60%, transparent);
    --vfy-text-inverse: #ffffff;
    --vfy-bg:           var(--vefify-bg-color, #f8fafc);
    --vfy-surface:      #ffffff;
    --vfy-surface-2:    color-mix(in srgb, var(--vfy-surface) 92%, transparent);
    --vfy-border:       color-mix(in srgb, var(--vfy-text) 12%, transparent);
    --vfy-border-strong:color-mix(in srgb, var(--vfy-text) 22%, transparent);
    --vfy-success:      #16a34a;
    --vfy-warning:      #d97706;
    --vfy-danger:       #dc2626;

    /* Spacing scale */
    --vfy-s-1: 4px;
    --vfy-s-2: 8px;
    --vfy-s-3: 12px;
    --vfy-s-4: 16px;
    --vfy-s-5: 24px;
    --vfy-s-6: 32px;
    --vfy-s-7: 48px;
    --vfy-s-8: 64px;

    /* Radius */
    --vfy-r-sm: 8px;
    --vfy-r-md: 12px;
    --vfy-r-lg: 16px;
    --vfy-r-xl: 24px;
    --vfy-r-full: 999px;

    /* Shadows */
    --vfy-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --vfy-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .06);
    --vfy-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .08);
    --vfy-shadow-focus: 0 0 0 4px rgba(var(--vfy-primary-rgb), .18);

    /* Motion */
    --vfy-ease: cubic-bezier(.2, .8, .2, 1);
    --vfy-dur-fast: 150ms;
    --vfy-dur: 250ms;
    --vfy-dur-slow: 350ms;
}

/* --- Reset inside the container only, do not pollute the host page --- */
.vefify-quiz-container,
.vefify-quiz-container *,
.vefify-quiz-container *::before,
.vefify-quiz-container *::after {
    box-sizing: border-box;
}

.vefify-quiz-container {
    color: var(--vfy-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    min-height: 100vh;
    padding: var(--vfy-s-5) var(--vfy-s-4);
    background: var(--vfy-bg);
    position: relative;
}

@media (min-width: 768px) {
    .vefify-quiz-container { padding: var(--vfy-s-7) var(--vfy-s-6); }
}

/* Fullscreen mode — hide host theme chrome */
.vefify-quiz-fullscreen-active body { overflow: hidden; }
.vefify-quiz-fullscreen-active #wpadminbar,
.vefify-quiz-fullscreen-active header,
.vefify-quiz-fullscreen-active .site-header,
.vefify-quiz-fullscreen-active nav,
.vefify-quiz-fullscreen-active .navbar,
.vefify-quiz-fullscreen-active footer,
.vefify-quiz-fullscreen-active .site-footer,
.vefify-quiz-fullscreen-active aside,
.vefify-quiz-fullscreen-active .sidebar,
.vefify-quiz-fullscreen-active .widget-area { display: none !important; }

/* --- Brand header --- */
.vefify-brand-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--vfy-s-4) 0;
    margin-bottom: var(--vfy-s-5);
}
.vefify-brand-logo {
    max-height: 64px;
    height: auto;
    transition: transform var(--vfy-dur) var(--vfy-ease);
}
.vefify-brand-logo:hover { transform: scale(1.04); }

/* --- Content wrapper --- */
.vefify-quiz-content {
    max-width: 720px;
    margin: 0 auto;
    background: var(--vfy-surface);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-radius: var(--vfy-r-xl);
    box-shadow: var(--vfy-shadow-lg);
    padding: clamp(var(--vfy-s-5), 5vw, var(--vfy-s-7));
    animation: vfy-fade-in 400ms var(--vfy-ease);
}

@keyframes vfy-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Quiz header --- */
.vefify-quiz-header {
    text-align: center;
    margin-bottom: var(--vfy-s-6);
}
.vefify-quiz-title {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0 0 var(--vfy-s-3);
    color: var(--vfy-text);
}
.vefify-quiz-description {
    font-size: clamp(14px, 1.6vw, 16px);
    color: var(--vfy-text-muted);
    margin: 0 0 var(--vfy-s-4);
    max-width: 56ch;
    margin-inline: auto;
}
.vefify-quiz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vfy-s-3);
    justify-content: center;
    margin-top: var(--vfy-s-5);
}
.vefify-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--vfy-s-2);
    padding: 6px 14px;
    background: rgba(var(--vfy-primary-rgb), .08);
    color: var(--vfy-text);
    border-radius: var(--vfy-r-full);
    font-size: 13px;
    font-weight: 500;
}

/* --- Messages --- */
.vefify-messages-container { margin-bottom: var(--vfy-s-4); }
.vefify-message,
.vefify-error,
.vefify-notice {
    padding: var(--vfy-s-3) var(--vfy-s-4);
    border-radius: var(--vfy-r-md);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--vfy-s-3);
    border-left: 4px solid;
    background: var(--vfy-surface-2);
}
.vefify-message-success,
.vefify-notice { border-color: var(--vfy-success); background: rgba(22, 163, 74, .08); color: #166534; }
.vefify-message-error,
.vefify-error { border-color: var(--vfy-danger); background: rgba(220, 38, 38, .08); color: #991b1b; }

/* --- Registration form --- */
.vefify-registration-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 var(--vfy-s-5);
    color: var(--vfy-text);
}

.vefify-form-grid {
    display: grid;
    gap: var(--vfy-s-4);
    margin-bottom: var(--vfy-s-5);
}

.vefify-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vefify-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vfy-text);
    letter-spacing: .01em;
}
.vefify-field-label .required {
    color: var(--vfy-danger);
    margin-left: 2px;
}
.vefify-field-input,
.vefify-quiz-container select,
.vefify-quiz-container textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--vfy-border);
    border-radius: var(--vfy-r-md);
    font: inherit;
    font-size: 15px;
    color: var(--vfy-text);
    background: #ffffff;
    transition: border-color var(--vfy-dur) var(--vfy-ease),
                box-shadow var(--vfy-dur) var(--vfy-ease),
                background var(--vfy-dur) var(--vfy-ease);
    appearance: none;
    -webkit-appearance: none;
}
.vefify-field-input:hover,
.vefify-quiz-container select:hover { border-color: var(--vfy-border-strong); }
.vefify-field-input:focus,
.vefify-quiz-container select:focus,
.vefify-quiz-container textarea:focus {
    outline: none;
    border-color: var(--vfy-primary);
    box-shadow: var(--vfy-shadow-focus);
}
.vefify-field-input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--vfy-danger);
}
.vefify-field-help {
    font-size: 12px;
    color: var(--vfy-text-muted);
}

/* --- Buttons --- */
.vefify-btn,
.vefify-quiz-container button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vfy-s-2);
    padding: 12px 20px;
    border: none;
    border-radius: var(--vfy-r-md);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--vfy-dur-fast) var(--vfy-ease),
                box-shadow var(--vfy-dur) var(--vfy-ease),
                background var(--vfy-dur) var(--vfy-ease),
                color var(--vfy-dur) var(--vfy-ease);
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.vefify-btn:focus-visible {
    outline: none;
    box-shadow: var(--vfy-shadow-focus);
}
.vefify-btn:disabled,
.vefify-quiz-container button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Primary button = ONE color (admin's primary).
 * Never gradient primary→secondary: clashes badly when the admin picks two
 * unrelated colors (e.g. pink + yellow) and produces unreadable text.
 * Hover darkens via filter, not by mixing with a second color. */
.vefify-btn-primary {
    background: var(--vfy-primary);
    color: var(--vfy-text-inverse);
    box-shadow: var(--vfy-shadow-md);
}
.vefify-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--vfy-shadow-lg);
    filter: brightness(1.08);
}
.vefify-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(.94);
}

.vefify-btn-secondary {
    background: #ffffff;
    color: var(--vfy-text);
    border: 1.5px solid var(--vfy-border-strong);
}
.vefify-btn-secondary:hover:not(:disabled) {
    border-color: var(--vfy-primary);
    color: var(--vfy-primary);
}

.vefify-btn-success {
    background: var(--vfy-success);
    color: var(--vfy-text-inverse);
    box-shadow: var(--vfy-shadow-md);
}
.vefify-btn-success:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--vfy-shadow-lg);
}

.vefify-btn-large {
    padding: 16px 28px;
    font-size: 16px;
    min-height: 52px;
}

.vefify-btn[aria-busy="true"] {
    position: relative;
    color: transparent !important;
}
.vefify-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--vfy-text-inverse);
    animation: vfy-spin 700ms linear infinite;
}

.vefify-form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--vfy-s-3);
    margin-top: var(--vfy-s-5);
}
.vefify-form-actions .vefify-btn { width: 100%; }
@media (min-width: 640px) {
    .vefify-form-actions { flex-direction: row; }
    .vefify-form-actions .vefify-btn { width: auto; flex: 1; }
}

/* --- Progress bar --- */
.vefify-quiz-progress {
    margin-bottom: var(--vfy-s-5);
}
.vefify-progress-bar {
    height: 8px;
    background: rgba(var(--vfy-primary-rgb), .12);
    border-radius: var(--vfy-r-full);
    overflow: hidden;
    margin-bottom: var(--vfy-s-2);
}
.vefify-progress-fill {
    height: 100%;
    background: var(--vfy-primary);
    border-radius: var(--vfy-r-full);
    transition: width var(--vfy-dur-slow) var(--vfy-ease);
    box-shadow: 0 0 12px rgba(var(--vfy-primary-rgb), .35);
}
.vefify-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--vfy-text-muted);
    font-weight: 500;
}

/* --- Timer --- */
.vefify-timer {
    display: inline-flex;
    align-items: center;
    gap: var(--vfy-s-2);
    padding: 8px 16px;
    background: rgba(var(--vfy-primary-rgb), .08);
    border-radius: var(--vfy-r-full);
    font-size: 14px;
    font-weight: 600;
    color: var(--vfy-text);
    margin-bottom: var(--vfy-s-4);
}
.vefify-timer.warning {
    background: rgba(217, 119, 6, .12);
    color: var(--vfy-warning);
    animation: vfy-pulse 1.2s ease-in-out infinite;
}
@keyframes vfy-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .65; }
}

/* --- Question --- */
.vefify-question-container { margin-bottom: var(--vfy-s-5); }
.vefify-question {
    background: var(--vfy-surface-2);
    border-radius: var(--vfy-r-lg);
    padding: var(--vfy-s-5);
    margin-bottom: var(--vfy-s-4);
}
.vefify-question-text,
.vefify-question h3,
.vefify-question h4 {
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 var(--vfy-s-4);
    color: var(--vfy-text);
}

.vefify-answer-list,
.vefify-question ul,
.vefify-question .answers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--vfy-s-2);
}
.vefify-answer-option,
.vefify-question label {
    display: flex;
    align-items: center;
    gap: var(--vfy-s-3);
    padding: var(--vfy-s-3) var(--vfy-s-4);
    background: #ffffff;
    border: 1.5px solid var(--vfy-border);
    border-radius: var(--vfy-r-md);
    cursor: pointer;
    transition: border-color var(--vfy-dur) var(--vfy-ease),
                background var(--vfy-dur) var(--vfy-ease),
                transform var(--vfy-dur-fast) var(--vfy-ease);
    font-size: 15px;
    color: var(--vfy-text);
}
.vefify-answer-option:hover,
.vefify-question label:hover {
    border-color: var(--vfy-primary);
    background: rgba(var(--vfy-primary-rgb), .04);
    transform: translateX(2px);
}
.vefify-answer-option input[type="radio"],
.vefify-answer-option input[type="checkbox"],
.vefify-question label input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--vfy-primary);
    cursor: pointer;
}
.vefify-answer-option.selected,
.vefify-answer-option:has(input:checked),
.vefify-question label:has(input:checked) {
    border-color: var(--vfy-primary);
    background: rgba(var(--vfy-primary-rgb), .08);
    font-weight: 500;
}

/* --- Navigation --- */
.vefify-quiz-navigation {
    display: flex;
    gap: var(--vfy-s-3);
    flex-wrap: wrap;
    margin-top: var(--vfy-s-5);
}
.vefify-quiz-navigation .vefify-btn { flex: 1; min-width: 120px; }
@media (max-width: 480px) {
    .vefify-quiz-navigation { flex-direction: column; }
    .vefify-quiz-navigation .vefify-btn { width: 100%; }
}

/* --- Results --- */
.vefify-results-section {
    text-align: center;
    animation: vfy-fade-in 500ms var(--vfy-ease);
}
.vefify-result-score {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    margin: 0 auto var(--vfy-s-5);
    border-radius: 50%;
    background: conic-gradient(var(--vfy-primary) calc(var(--score, 0) * 1%), rgba(var(--vfy-primary-rgb), .12) 0);
    position: relative;
}
.vefify-result-score::before {
    content: "";
    position: absolute;
    inset: 12px;
    background: var(--vfy-surface);
    border-radius: 50%;
}
.vefify-result-score > * { position: relative; z-index: 1; }
.vefify-result-score-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--vfy-primary);
    line-height: 1;
}
.vefify-result-score-label {
    font-size: 13px;
    color: var(--vfy-text-muted);
    margin-top: 4px;
}
.vefify-result-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    margin: 0 0 var(--vfy-s-3);
}
.vefify-result-message {
    font-size: 16px;
    color: var(--vfy-text-muted);
    margin: 0 0 var(--vfy-s-5);
    max-width: 48ch;
    margin-inline: auto;
}
.vefify-result-pass .vefify-result-title { color: var(--vfy-success); }
.vefify-result-fail .vefify-result-title { color: var(--vfy-warning); }

.vefify-result-gift {
    background: linear-gradient(135deg, rgba(var(--vfy-primary-rgb), .08), rgba(var(--vfy-primary-rgb), .04));
    border: 1px solid rgba(var(--vfy-primary-rgb), .2);
    border-radius: var(--vfy-r-lg);
    padding: var(--vfy-s-5);
    margin: var(--vfy-s-5) auto 0;
    max-width: 480px;
    text-align: left;
}
.vefify-result-gift-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--vfy-primary);
    margin: 0 0 var(--vfy-s-3);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.vefify-result-gift-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 var(--vfy-s-2);
}
.vefify-result-gift-code {
    display: inline-block;
    padding: 6px 12px;
    background: var(--vfy-text);
    color: var(--vfy-text-inverse);
    border-radius: var(--vfy-r-sm);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: .05em;
    margin-top: var(--vfy-s-3);
}

/* --- Loading overlay --- */
.vefify-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(4px);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: var(--vfy-r-xl);
}
.vefify-loading-overlay[style*="display: none"] { display: none !important; }
.vefify-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--vfy-primary-rgb), .2);
    border-top-color: var(--vfy-primary);
    border-radius: 50%;
    animation: vfy-spin 700ms linear infinite;
    margin-bottom: var(--vfy-s-3);
}
@keyframes vfy-spin { to { transform: rotate(360deg); } }

/* --- Background helpers (image / gradient applied inline by PHP) --- */
.vefify-quiz-container.has-background-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 0;
}
.vefify-quiz-container.has-background-overlay > * { position: relative; z-index: 1; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .vefify-quiz-container,
    .vefify-quiz-container *,
    .vefify-quiz-container *::before,
    .vefify-quiz-container *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --- Dark mode auto if host prefers; respects branding override --- */
@media (prefers-color-scheme: dark) {
    .vefify-quiz-container:not(.vefify-quiz-fullscreen-active) {
        --vfy-surface: rgba(30, 41, 59, .92);
        --vfy-surface-2: rgba(30, 41, 59, .55);
        --vfy-text: #f1f5f9;
        --vfy-text-muted: rgba(241, 245, 249, .65);
        --vfy-border: rgba(255, 255, 255, .12);
        --vfy-border-strong: rgba(255, 255, 255, .25);
    }
    .vefify-quiz-container .vefify-field-input,
    .vefify-quiz-container select,
    .vefify-quiz-container textarea,
    .vefify-quiz-container .vefify-answer-option,
    .vefify-quiz-container .vefify-question label {
        background: rgba(15, 23, 42, .65);
        color: #f1f5f9;
    }
}

/* =========================================================================
   QUESTION CARD OVERRIDES — Duolingo-inspired
   ------------------------------------------------------------------------
   The legacy file `modules/questions/assets/question-frontend.css` ships
   with hard-coded purple/blue gradients (#667eea/#2196f3) for the actual
   question card. Those selectors live OUTSIDE quiz-pro.css's scope above
   (e.g. `.option-item`, `.question-text`, `.quiz-header`), so we re-skin
   them here so they pick up the branding colors and the friendly,
   high-affordance look of Duolingo: large rounded cards, thick rim shadow
   that gives the "push" feel, big tappable targets, satisfying motion.
   ========================================================================= */

.vefify-quiz-container .vefify-quiz-container,
.vefify-quiz-container .vefify-single-question {
    background: var(--vfy-surface);
    border-radius: var(--vfy-r-xl);
    box-shadow: var(--vfy-shadow-md);
    max-width: 760px;
}

/* Legacy quiz-header (the top banner of question card) — solid primary */
.vefify-quiz-container .quiz-header {
    background: var(--vfy-primary);
    color: var(--vfy-text-inverse);
    padding: var(--vfy-s-4) var(--vfy-s-5);
    border-radius: var(--vfy-r-lg) var(--vfy-r-lg) 0 0;
}
.vefify-quiz-container .quiz-header .progress-bar {
    background: rgba(255, 255, 255, .25);
    height: 10px;
    border-radius: var(--vfy-r-full);
}
.vefify-quiz-container .quiz-header .progress-fill {
    background: #ffffff;
    border-radius: var(--vfy-r-full);
    box-shadow: 0 0 12px rgba(255, 255, 255, .6);
}
.vefify-quiz-container .quiz-header .progress-text {
    color: rgba(255, 255, 255, .95);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
}
.vefify-quiz-container .quiz-header .quiz-timer {
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
    border-radius: var(--vfy-r-full);
    padding: 8px 18px;
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.vefify-quiz-container .quiz-header .quiz-timer.warning {
    background: var(--vfy-danger);
    color: #ffffff;
    animation: vfy-pulse 1s ease-in-out infinite;
}

.vefify-quiz-container .quiz-content { padding: var(--vfy-s-6) var(--vfy-s-5); }
@media (min-width: 768px) {
    .vefify-quiz-container .quiz-content { padding: var(--vfy-s-7) var(--vfy-s-6); }
}

.vefify-quiz-container .question-text {
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--vfy-text);
    margin: 0 0 var(--vfy-s-5);
    letter-spacing: -.01em;
}

.vefify-quiz-container .question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vfy-s-2);
    margin-bottom: var(--vfy-s-5);
}
.vefify-quiz-container .question-meta span {
    padding: 4px 12px;
    border-radius: var(--vfy-r-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.vefify-quiz-container .category {
    background: rgba(var(--vfy-primary-rgb), .1);
    color: var(--vfy-primary);
}
.vefify-quiz-container .difficulty-easy   { background: var(--vfy-success); color: #fff; }
.vefify-quiz-container .difficulty-medium { background: var(--vfy-warning); color: #fff; }
.vefify-quiz-container .difficulty-hard   { background: var(--vfy-danger);  color: #fff; }
.vefify-quiz-container .points {
    background: rgba(var(--vfy-primary-rgb), .08);
    color: var(--vfy-text);
}

/* --- Answer options (Duolingo-style "push button" cards) --- */
.vefify-quiz-container .question-options { margin: var(--vfy-s-5) 0; }

.vefify-quiz-container .option-item {
    margin: 0 0 var(--vfy-s-3);
    background: #ffffff;
    border: 2px solid var(--vfy-border);
    border-bottom-width: 4px;          /* Duolingo signature "rim" */
    border-radius: var(--vfy-r-lg);
    transition: transform var(--vfy-dur-fast) var(--vfy-ease),
                border-color var(--vfy-dur) var(--vfy-ease),
                background var(--vfy-dur) var(--vfy-ease),
                box-shadow var(--vfy-dur) var(--vfy-ease);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.vefify-quiz-container .option-item:hover {
    border-color: var(--vfy-primary);
    background: rgba(var(--vfy-primary-rgb), .04);
    transform: translateY(-1px);
}
.vefify-quiz-container .option-item:active { transform: translateY(0); border-bottom-width: 2px; }

.vefify-quiz-container .option-item.selected {
    border-color: var(--vfy-primary);
    background: rgba(var(--vfy-primary-rgb), .08);
    box-shadow: 0 0 0 4px rgba(var(--vfy-primary-rgb), .12);
}
.vefify-quiz-container .option-item.correct-answer,
.vefify-quiz-container .option-item.user-correct {
    border-color: var(--vfy-success);
    background: rgba(22, 163, 74, .08);
}
.vefify-quiz-container .option-item.user-incorrect {
    border-color: var(--vfy-danger);
    background: rgba(220, 38, 38, .08);
}

.vefify-quiz-container .option-item label {
    display: flex;
    align-items: center;
    gap: var(--vfy-s-3);
    padding: var(--vfy-s-4) var(--vfy-s-5);
    cursor: pointer;
    margin: 0;
    width: 100%;
    font-size: 16px;
    color: var(--vfy-text);
    font-weight: 500;
    line-height: 1.4;
}
.vefify-quiz-container .option-item input[type="radio"],
.vefify-quiz-container .option-item input[type="checkbox"] {
    width: 22px; height: 22px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--vfy-primary);
    cursor: pointer;
    transform: none;
}
.vefify-quiz-container .option-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(var(--vfy-primary-rgb), .1);
    color: var(--vfy-primary);
    font-weight: 700;
    border-radius: var(--vfy-r-sm);
    font-size: 14px;
    flex-shrink: 0;
}
.vefify-quiz-container .option-item.selected .option-marker {
    background: var(--vfy-primary);
    color: #ffffff;
}
.vefify-quiz-container .option-item.correct-answer .option-marker,
.vefify-quiz-container .option-item.user-correct .option-marker {
    background: var(--vfy-success);
    color: #ffffff;
}
.vefify-quiz-container .option-item.user-incorrect .option-marker {
    background: var(--vfy-danger);
    color: #ffffff;
}
.vefify-quiz-container .option-text {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.5;
}

/* --- Quiz navigation (the bottom action bar) --- */
.vefify-quiz-container .quiz-navigation,
.vefify-quiz-container .vefify-quiz-navigation {
    display: flex;
    gap: var(--vfy-s-3);
    margin-top: var(--vfy-s-5);
    padding-top: var(--vfy-s-4);
    border-top: 1px solid var(--vfy-border);
}
.vefify-quiz-container .quiz-navigation button {
    flex: 1;
    border-bottom-width: 4px;
    min-height: 52px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 14px;
}
.vefify-quiz-container .quiz-navigation button:active:not(:disabled) {
    border-bottom-width: 2px;
    transform: translateY(2px);
}

/* --- Results page Duolingo-styled --- */
.vefify-quiz-container .results-header h2,
.vefify-quiz-container .vefify-result-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
}
.vefify-quiz-container .score-circle,
.vefify-quiz-container .results-score {
    background: var(--vfy-primary);
    color: var(--vfy-text-inverse);
    border-radius: var(--vfy-r-full);
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: var(--vfy-s-6) auto;
    box-shadow: var(--vfy-shadow-lg);
    position: relative;
}
.vefify-quiz-container .score-circle::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: var(--vfy-r-full);
    border: 4px solid rgba(var(--vfy-primary-rgb), .2);
    z-index: -1;
}
.vefify-quiz-container .score-number,
.vefify-quiz-container .score-total {
    color: #ffffff;
    font-weight: 800;
}
.vefify-quiz-container .score-number { font-size: 56px; line-height: 1; }
.vefify-quiz-container .score-total { font-size: 18px; opacity: .85; }

.vefify-quiz-container .results-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--vfy-s-3);
    margin: var(--vfy-s-6) 0;
}
.vefify-quiz-container .stat-item {
    background: var(--vfy-surface-2);
    border: 1px solid var(--vfy-border);
    border-radius: var(--vfy-r-md);
    padding: var(--vfy-s-4);
    text-align: center;
}

.vefify-quiz-container .result-explanation {
    background: rgba(var(--vfy-primary-rgb), .05);
    border-left: 4px solid var(--vfy-primary);
    border-radius: 0 var(--vfy-r-md) var(--vfy-r-md) 0;
    padding: var(--vfy-s-4);
    margin: var(--vfy-s-4) 0;
    color: var(--vfy-text);
    font-size: 14px;
}

/* --- Notifications (already exist in legacy CSS, re-style for consistency) --- */
.vefify-quiz-container .vefify-notification {
    border-radius: var(--vfy-r-md);
    box-shadow: var(--vfy-shadow-lg);
    border: 1px solid var(--vfy-border);
    padding: var(--vfy-s-3) var(--vfy-s-4);
}
.vefify-quiz-container .vefify-notification.success { border-left: 4px solid var(--vfy-success); }
.vefify-quiz-container .vefify-notification.error   { border-left: 4px solid var(--vfy-danger);  }
.vefify-quiz-container .vefify-notification.warning { border-left: 4px solid var(--vfy-warning); }

/* --- Hide some duplicated UI that the host theme might add --- */
.vefify-quiz-fullscreen-active .vefify-results-details { display: none; }

/* =========================================================================
   QUESTION OPTIONS — .vefify-question-option (the actual markup used)
   ------------------------------------------------------------------------
   Markup pattern:
     <div class="vefify-question-option">
       <input type="radio|checkbox" id="..." />
       <label for="...">
         <span class="vefify-option-marker"></span>
         <span class="vefify-option-text">...</span>
       </label>
     </div>
   The native input is visually hidden but still receives focus / keyboard
   events. The label is the actual hit target. `.vefify-option-marker` is
   the round (radio) or square (checkbox) chip we draw ourselves so the
   tick is centred predictably across browsers — the OS radio glyph is
   what was misaligning before.
   ========================================================================= */

.vefify-quiz-container .vefify-question-options {
    display: flex;
    flex-direction: column;
    gap: var(--vfy-s-3);
    margin: var(--vfy-s-5) 0;
}

.vefify-quiz-container .vefify-question-option {
    position: relative;
}

/* Visually hide but keep accessible. Anchor inside the wrapper so the
   focus ring (drawn on the label) sits in the right place. */
.vefify-quiz-container .vefify-question-option > input[type="radio"],
.vefify-quiz-container .vefify-question-option > input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.vefify-quiz-container .vefify-question-option > label {
    display: flex;
    align-items: center;
    gap: var(--vfy-s-3);
    padding: var(--vfy-s-4) var(--vfy-s-5);
    background: #ffffff;
    color: var(--vfy-text);
    border: 2px solid var(--vfy-border);
    border-bottom-width: 4px;        /* Duolingo signature rim */
    border-radius: var(--vfy-r-lg);
    cursor: pointer;
    line-height: 1.45;
    font-size: 15px;
    font-weight: 500;
    transition: transform var(--vfy-dur-fast) var(--vfy-ease),
                border-color var(--vfy-dur) var(--vfy-ease),
                background var(--vfy-dur) var(--vfy-ease),
                box-shadow var(--vfy-dur) var(--vfy-ease);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.vefify-quiz-container .vefify-question-option > label:hover {
    border-color: var(--vfy-primary);
    background: color-mix(in srgb, var(--vfy-primary) 5%, #ffffff);
    transform: translateY(-1px);
}
.vefify-quiz-container .vefify-question-option > label:active {
    transform: translateY(0);
    border-bottom-width: 2px;
}

/* Keyboard focus on the hidden input bubbles up via :focus-visible on the
   label using :has() — supported in evergreen browsers. */
.vefify-quiz-container .vefify-question-option:has(input:focus-visible) > label {
    box-shadow: var(--vfy-shadow-focus);
    outline: none;
}

/* --- Marker chip --- */
.vefify-quiz-container .vefify-option-marker {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--vfy-border-strong);
    border-radius: 50%;                 /* radio default */
    background: #ffffff;
    position: relative;
    transition: border-color var(--vfy-dur) var(--vfy-ease),
                background var(--vfy-dur) var(--vfy-ease);
}

/* Checkbox markers are square instead of circle. The JS sets
   data-question-type on the wrapping .vefify-question, or the input is
   simply of type=checkbox — handle both. */
.vefify-quiz-container .vefify-question[data-question-type="multiple_select"] .vefify-option-marker,
.vefify-quiz-container .vefify-question-option:has(> input[type="checkbox"]) .vefify-option-marker {
    border-radius: 6px;
}

.vefify-quiz-container .vefify-option-text {
    flex: 1;
    color: var(--vfy-text);
    font-size: 15px;
    line-height: 1.5;
}

/* --- Checked / selected state --- */
.vefify-quiz-container .vefify-question-option:has(> input:checked) > label,
.vefify-quiz-container .vefify-question-option > input:checked + label {
    border-color: var(--vfy-primary);
    background: color-mix(in srgb, var(--vfy-primary) 8%, #ffffff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vfy-primary) 18%, transparent);
}

.vefify-quiz-container .vefify-question-option:has(> input:checked) .vefify-option-marker,
.vefify-quiz-container .vefify-question-option > input:checked + label .vefify-option-marker {
    border-color: var(--vfy-primary);
    background: var(--vfy-primary);
}

/* Tick: a centred white dot for radio, a white check-mark for checkbox. */
.vefify-quiz-container .vefify-question-option:has(> input[type="radio"]:checked) .vefify-option-marker::after,
.vefify-quiz-container .vefify-question-option > input[type="radio"]:checked + label .vefify-option-marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background: #ffffff;
    border-radius: 50%;
}

.vefify-quiz-container .vefify-question-option:has(> input[type="checkbox"]:checked) .vefify-option-marker::after,
.vefify-quiz-container .vefify-question-option > input[type="checkbox"]:checked + label .vefify-option-marker::after {
    content: "";
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -55%) rotate(45deg);
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2.5px 2.5px 0;
}

/* --- Correct / incorrect feedback (after submission) ---
 * If JS adds .correct or .incorrect classes on the wrapper to show
 * results, re-skin them. Keeps things readable even if user picked wrong. */
.vefify-quiz-container .vefify-question-option.correct > label {
    border-color: var(--vfy-success);
    background: color-mix(in srgb, var(--vfy-success) 10%, #ffffff);
}
.vefify-quiz-container .vefify-question-option.correct .vefify-option-marker {
    border-color: var(--vfy-success);
    background: var(--vfy-success);
}
.vefify-quiz-container .vefify-question-option.incorrect > label {
    border-color: var(--vfy-danger);
    background: color-mix(in srgb, var(--vfy-danger) 10%, #ffffff);
}
.vefify-quiz-container .vefify-question-option.incorrect .vefify-option-marker {
    border-color: var(--vfy-danger);
    background: var(--vfy-danger);
}

/* --- Mobile tweaks --- */
@media (max-width: 480px) {
    .vefify-quiz-container .vefify-question-option > label {
        padding: var(--vfy-s-3) var(--vfy-s-4);
        font-size: 14px;
    }
    .vefify-quiz-container .vefify-option-marker {
        width: 22px;
        height: 22px;
    }
}