/* Quiz Container - Centered and Modern - HIGH PRIORITY */
body #sb-site #body .modular-row.quiz,
body #body .modular-row.quiz,
#body .modular-row.quiz,
.modular-row.quiz {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 70vh !important;
    padding: 3rem 14rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media only all and (min-width: 60em) and (max-width: 74.938em) {
    body #sb-site #body .modular-row.quiz,
    body #body .modular-row.quiz,
    #body .modular-row.quiz,
    .modular-row.quiz {
        padding: 3rem 7rem !important;
    }
}

@media only all and (min-width: 48em) and (max-width: 59.938em) {
    body #sb-site #body .modular-row.quiz,
    body #body .modular-row.quiz,
    #body .modular-row.quiz,
    .modular-row.quiz {
        padding: 3rem 7rem !important;
    }
}

@media only all and (max-width: 47.938em) {
    body #sb-site #body .modular-row.quiz,
    body #body .modular-row.quiz,
    #body .modular-row.quiz,
    .modular-row.quiz {
        padding: 2rem 1rem !important;
        min-height: auto !important;
    }
}

/* Force quiz container centering */
body #sb-site #body .modular-row.quiz #compliance-quiz,
body #sb-site #body .modular-row.quiz .quiz-container,
body #body .modular-row.quiz #compliance-quiz,
body #body .modular-row.quiz .quiz-container,
#body .modular-row.quiz #compliance-quiz,
#body .modular-row.quiz .quiz-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

#compliance-quiz.quiz-container,
body #sb-site #body #compliance-quiz.quiz-container,
body #sb-site #body .modular-row.quiz #compliance-quiz.quiz-container,
body #sb-site #body .modular-row.quiz .quiz-container,
body #compliance-quiz.quiz-container,
body #body .modular-row.quiz #compliance-quiz.quiz-container,
body #body .modular-row.quiz .quiz-container,
#body .modular-row.quiz #compliance-quiz.quiz-container,
#body .modular-row.quiz .quiz-container,
.quiz-container {
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 3rem !important;
    background: var(--color-white) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    position: relative !important;
}

.quiz-header {
    text-align: center !important;
    margin-bottom: 3rem !important;
}

.quiz-header h2 {
    font-size: var(--font-size-5xl) !important;
    margin-bottom: 0.5rem !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-heading) !important;
}

.quiz-header p {
    color: var(--color-text-gray) !important;
    font-size: var(--font-size-base) !important;
}

/* Progress Bar - Hide visual bar, show only text */
.quiz-progress {
    margin-bottom: 2rem !important;
}

.progress-bar {
    display: none !important;
}

.progress-fill {
    display: none !important;
}

#quiz-progress {
    display: none !important;
}

.progress-text {
    display: block !important;
    text-align: center !important;
    color: var(--color-text-gray) !important;
    font-size: var(--font-size-m) !important;
    font-weight: var(--font-weight-regular) !important;
}

/* Quiz Questions - Card Style */
.quiz-content {
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
}

.quiz-question {
    display: none !important;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    background: var(--color-white) !important;
    padding: 3rem !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 8px 24px var(--color-shadow-header), 0 2px 8px var(--color-shadow-header) !important;
    margin-bottom: 1rem !important;
    border: 2px solid var(--color-border-light-gray) !important;
    position: relative !important;
}

.quiz-question::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}

.quiz-question.active {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    position: relative !important;
    z-index: 1 !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-question h3 {
    font-size: var(--font-size-3xl) !important;
    margin-bottom: 2rem !important;
    color: var(--color-text-primary) !important;
    margin-top: 0.5rem !important;
    font-family: var(--font-family-heading) !important;
    line-height: 1.3 !important;
}

.quiz-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
}

.quiz-option {
    display: flex !important;
    align-items: center !important;
    padding: 1.5rem 1rem !important;
    margin-bottom: 1rem !important;
    border: 2px solid var(--color-border-input) !important;
    border-radius: var(--border-radius-md) !important;
    cursor: pointer !important;
    transition: all var(--transition-normal) !important;
    background: var(--color-white) !important;
    position: relative !important;
}

.quiz-option:hover {
    border-color: var(--color-primary)  !important;
    background: var(--color-background-light) !important;
    transform: translateX(8px) !important;
    box-shadow: var(--shadow-md) !important;
}

.quiz-option input[type="radio"] {
    margin-right: 1rem !important;
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    accent-color: var(--color-primary)  !important;
    flex-shrink: 0 !important;
}

.quiz-option input[type="radio"]:checked + span {
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-primary) !important;
}

.quiz-option:has(input[type="radio"]:checked) {
    border-color: var(--color-primary) !important;
    background: var(--color-white) !important;
    box-shadow: 0 4px 12px var(--color-background-light) !important;
    border-width: 2px !important;
}

.quiz-option span {
    flex: 1 !important;
    font-size: var(--font-size-base) !important;
    color: var(--color-text-primary) !important;
    line-height: 1.5 !important;
}

/* Text Input Styling */
.quiz-text-input {
    margin-top: 2rem !important;
}

.quiz-text-field {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: var(--font-size-base) !important;
    border: 2px solid var(--color-border-light-gray) !important;
    border-radius: var(--border-radius-md) !important;
    background: var(--color-background-light) !important;
    color: var(--color-text-primary) !important;
    transition: var(--transition-normal) !important;
    font-family: var(--font-family-primary) !important;
    box-sizing: border-box !important;
}

.quiz-text-field:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    background: var(--color-white) !important;
    box-shadow: 0 4px 12px var(--color-shadow-header) !important;
}

.quiz-text-field::placeholder {
    color: var(--color-text-gray) !important;
}

.quiz-input-error {
    color: var(--color-danger) !important;
    margin-top: 0.5rem !important;
    font-size: var(--font-size-sm) !important;
    display: none !important;
}

/* Select/Dropdown Styling */
.quiz-select-input {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.quiz-select-field {
    width: 100% !important;
    padding: 1.25rem 3.5rem 1.25rem 1.5rem !important;
    font-size: var(--font-size-base) !important;
    border: 2px solid var(--color-border-light-gray) !important;
    border-radius: var(--border-radius-md) !important;
    background: var(--color-background-light) !important;
    color: var(--color-text-primary) !important;
    transition: var(--transition-normal) !important;
    font-family: var(--font-family-primary) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.25rem center !important;
    background-size: 16px !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: 56px !important;
    line-height: 1.5 !important;
}

.quiz-select-field:hover:not(:disabled) {
    border-color: var(--color-primary) !important;
    background-color: var(--color-white) !important;
    box-shadow: 0 4px 8px var(--color-shadow-header) !important;
    transform: translateY(-1px) !important;
}

.quiz-select-field:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    background-color: var(--color-white) !important;
    box-shadow: 0 4px 12px var(--color-shadow-header) !important;
    transform: translateY(-1px) !important;
}

.quiz-select-field:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px var(--color-shadow-header) !important;
}

.quiz-select-field:disabled {
    background-color: var(--color-background-light) !important;
    color: var(--color-text-gray) !important;
    cursor: not-allowed !important;
    border-color: var(--color-border-light-gray) !important;
    box-shadow: none !important;
    transform: none !important;
}

.quiz-select-field option {
    padding: 1rem 1.5rem !important;
    background: var(--color-white) !important;
    color: var(--color-text-primary) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.6 !important;
}

.quiz-select-field option:hover {
    background: var(--color-background-light) !important;
}

.quiz-select-field option:checked {
    background: var(--color-primary) !important;
    color: var(--color-text-white) !important;
    font-weight: var(--font-weight-bold) !important;
}


/* Navigation Buttons - Modern Style */
body #body .modular-row.quiz .quiz-navigation,
.quiz-navigation {
    margin-top: 1.5rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--color-border-light-gray) !important;
    position: relative !important;
}

/* Prevent buttons from stretching - apply to all screen sizes */
.quiz-navigation .quiz-button {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}


/* Quiz buttons inherit standard theme button styles via .button class */
/* Quiz-specific overrides and positioning */
body #sb-site #body .modular-row.quiz button.button.quiz-button,
body #sb-site #body .modular-row.quiz .quiz-container button.button.quiz-button,
body #sb-site #body #compliance-quiz button.button.quiz-button,
body #sb-site #body #compliance-quiz.quiz-container button.button.quiz-button,
body #body .modular-row.quiz button.button.quiz-button,
body #body .modular-row.quiz .quiz-container button.button.quiz-button,
body #body #compliance-quiz button.button.quiz-button,
body #body #compliance-quiz.quiz-container button.button.quiz-button,
#body .modular-row.quiz button.button.quiz-button,
#body .modular-row.quiz .quiz-container button.button.quiz-button,
#compliance-quiz button.button.quiz-button,
#compliance-quiz.quiz-container button.button.quiz-button,
.quiz-container button.button.quiz-button,
button.button.quiz-button,
.button.quiz-button {
    /* Quiz-specific positioning and sizing */
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Back button - override standard button color and position */
body #sb-site #body .modular-row.quiz button.button.quiz-back,
body #sb-site #body .modular-row.quiz .quiz-container button.button.quiz-back,
body #sb-site #body #compliance-quiz button.button.quiz-back,
body #sb-site #body #compliance-quiz.quiz-container button.button.quiz-back,
body #body .modular-row.quiz button.button.quiz-back,
body #body .modular-row.quiz .quiz-container button.button.quiz-back,
body #body #compliance-quiz button.button.quiz-back,
body #body #compliance-quiz.quiz-container button.button.quiz-back,
#body .modular-row.quiz button.button.quiz-back,
#body .modular-row.quiz .quiz-container button.button.quiz-back,
#compliance-quiz button.button.quiz-back,
#compliance-quiz.quiz-container button.button.quiz-back,
.quiz-container button.button.quiz-back,
button.button.quiz-back,
.button.quiz-back {
    position: absolute !important;
    left: 0 !important;
    background-color: var(--color-kr-grey3) !important;
    border: 1px solid var(--color-kr-grey3) !important;
    margin-right: 0 !important;
}

body #sb-site #body .modular-row.quiz button.quiz-next,
body #sb-site #body .modular-row.quiz .quiz-container button.quiz-next,
body #sb-site #body #compliance-quiz button.quiz-next,
body #sb-site #body #compliance-quiz.quiz-container button.quiz-next,
body #body .modular-row.quiz button.quiz-next,
body #body .modular-row.quiz .quiz-container button.quiz-next,
body #body #compliance-quiz button.quiz-next,
body #body #compliance-quiz.quiz-container button.quiz-next,
#body .modular-row.quiz button.quiz-next,
#body .modular-row.quiz .quiz-container button.quiz-next,
#compliance-quiz button.quiz-next,
#compliance-quiz.quiz-container button.quiz-next,
.quiz-container button.quiz-next,
button.quiz-next,
.quiz-next {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 999 !important;
}

body #sb-site #body .modular-row.quiz button.button.quiz-back:hover:not(:disabled),
body #sb-site #body .modular-row.quiz .quiz-container button.button.quiz-back:hover:not(:disabled),
body #sb-site #body #compliance-quiz button.button.quiz-back:hover:not(:disabled),
body #body .modular-row.quiz button.button.quiz-back:hover:not(:disabled),
body #body .modular-row.quiz .quiz-container button.button.quiz-back:hover:not(:disabled),
body #body #compliance-quiz button.button.quiz-back:hover:not(:disabled),
#compliance-quiz button.button.quiz-back:hover:not(:disabled),
.quiz-container button.button.quiz-back:hover:not(:disabled),
button.button.quiz-back:hover:not(:disabled),
.button.quiz-back:hover:not(:disabled) {
    background-color: var(--color-text-dark) !important;
    border: 1px solid var(--color-text-dark) !important;
}

/* Hover states are handled by standard .button class */
/* Only override if needed for quiz-specific behavior */

/* Active states are handled by standard .button class */

/* Disabled states - override standard button for quiz */
body #sb-site #body .modular-row.quiz button.button.quiz-button:disabled,
body #sb-site #body .modular-row.quiz .quiz-container button.button.quiz-button:disabled,
body #sb-site #body #compliance-quiz button.button.quiz-button:disabled,
body #body .modular-row.quiz button.button.quiz-button:disabled,
body #body .modular-row.quiz .quiz-container button.button.quiz-button:disabled,
body #body #compliance-quiz button.button.quiz-button:disabled,
#compliance-quiz button.button.quiz-button:disabled,
.quiz-container button.button.quiz-button:disabled,
button.button.quiz-button:disabled,
.button.quiz-button:disabled {
    background-color: var(--color-kr-grey2) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
}

/* Restart button - uses .button.button-info for base styles */
body #sb-site #body .modular-row.quiz button.button.button-info.quiz-restart,
body #sb-site #body .modular-row.quiz .quiz-container button.button.button-info.quiz-restart,
body #sb-site #body #compliance-quiz button.button.button-info.quiz-restart,
body #body .modular-row.quiz button.button.button-info.quiz-restart,
body #body .modular-row.quiz .quiz-container button.button.button-info.quiz-restart,
body #body #compliance-quiz button.button.button-info.quiz-restart,
#compliance-quiz button.button.button-info.quiz-restart,
.quiz-container button.button.button-info.quiz-restart,
button.button.button-info.quiz-restart,
.button.button-info.quiz-restart {
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Restart button hover handled by .button class */

/* Results - Card Style */
.quiz-results {
    display: none !important;
    visibility: hidden !important;
    animation: fadeIn 0.5s ease;
    background: var(--color-white) !important;
    padding: 3rem !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 8px 24px var(--color-shadow-header), 0 2px 8px var(--color-shadow-header) !important;
    border: 2px solid var(--color-border-light-gray) !important;
    position: relative !important;
}

.quiz-results::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}

.quiz-results.active {
    display: block !important;
    visibility: visible !important;
}

/* Ensure results are visible when active, even if parent is hidden */
.quiz-content .quiz-results.active {
    display: block !important;
    visibility: visible !important;
}

.quiz-results h3 {
    font-size: var(--font-size-4xl) !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-heading) !important;
}

@media (max-width: 768px) {
    .quiz-results h3 {
        font-size: var(--font-size-3xl) !important;
        margin-bottom: 1.5rem !important;
    }

    .result-content {
        margin-bottom: 1rem !important;
    }
}

.result-content {
    margin-bottom: 2rem !important;
}

.result-box {
    padding: 3rem !important;
    border-radius: var(--border-radius-md) !important;
    margin-bottom: 2rem !important;
    border-left: 5px solid !important;
    box-shadow: var(--shadow-sm) !important;
}

.result-box h4 {
    font-size: 1.6rem !important;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
    font-family: "Fira Sans Book", "Fira Sans Light", "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif !important;
}

.result-box ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
}

.result-box ul li {
    padding: 0.5rem 0 !important;
    padding-left: 2rem !important;
    position: relative !important;
    line-height: 1.6 !important;
}

.result-box ul li:before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    color: inherit !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 1.1rem !important;
}

.result-warning {
    background: var(--color-background-light) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-alert-warning-text) !important;
}

.result-info {
    background: var(--color-background-light) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-alert-info-text) !important;
}

.result-success {
    background: var(--color-background-light) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-alert-primary-text) !important;
}

.result-note {
    padding: 2rem !important;
    background: var(--color-background-light) !important;
    border-radius: var(--border-radius-md) !important;
    border-left: 4px solid var(--color-kr-grey3) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-primary) !important;
    line-height: 1.6 !important;
}

.result-note p {
    margin: 0 !important;
}

.quiz-results-actions {
    margin-top: 1rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid var(--color-border-light-gray) !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
}

.quiz-results-actions .button.button-info.quiz-restart {
    margin: 0 auto !important;
    display: inline-block !important;
    min-width: 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.quiz-submit-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Email Form Styling */
.result-email-form {
    margin-top: 1.5rem !important;
    padding: 1.5rem !important;
    background: var(--color-background-light) !important;
    border-radius: var(--border-radius-lg) !important;
    border: 2px solid var(--color-border-light-gray) !important;
}

.result-email-form h4 {
    font-size: var(--font-size-2xl) !important;
    margin-bottom: 1rem !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-heading) !important;
}

.result-email-form > p {
    color: var(--color-text-gray) !important;
    margin-bottom: 2rem !important;
    line-height: 1.6 !important;
}

    .quiz-email-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

.quiz-email-field-wrapper {
    display: flex !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.quiz-email-input {
    width: 100% !important;
    padding: 1.25rem 1.5rem !important;
    font-size: var(--font-size-base) !important;
    border: 2px solid var(--color-border-light-gray) !important;
    border-radius: var(--border-radius-md) !important;
    background: var(--color-white) !important;
    color: var(--color-text-primary) !important;
    transition: var(--transition-normal) !important;
    font-family: var(--font-family-primary) !important;
    box-sizing: border-box !important;
}

.quiz-email-input:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px var(--color-shadow-header) !important;
}

.quiz-email-input::placeholder {
    color: var(--color-text-gray) !important;
}

.quiz-email-error {
    color: var(--color-danger) !important;
    font-size: var(--font-size-sm) !important;
    margin-top: 0.25rem !important;
}

.quiz-privacy-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.quiz-privacy-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    cursor: pointer !important;
    gap: 0.75rem !important;
    position: relative !important;
}

.quiz-privacy-checkbox input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
}

.quiz-checkbox-custom {
    position: relative !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border: 2px solid var(--color-border-input) !important;
    border-radius: var(--border-radius-sm) !important;
    background: var(--color-white) !important;
    transition: all var(--transition-normal) !important;
    margin-top: 2px !important;
}

.quiz-privacy-checkbox:hover .quiz-checkbox-custom {
    border-color: var(--color-primary) !important;
}

.quiz-privacy-checkbox input[type="checkbox"]:checked ~ .quiz-checkbox-custom {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.quiz-privacy-checkbox input[type="checkbox"]:checked ~ .quiz-checkbox-custom::after {
    content: '' !important;
    position: absolute !important;
    left: 7px !important;
    top: 3px !important;
    width: 6px !important;
    height: 12px !important;
    border: solid var(--color-white) !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.quiz-checkbox-label {
    flex: 1 !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-primary) !important;
    line-height: 1.5 !important;
}

.quiz-checkbox-label a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    transition: var(--transition-normal) !important;
}

.quiz-checkbox-label a:hover {
    color: var(--color-accent) !important;
}

.quiz-privacy-error {
    color: var(--color-danger) !important;
    font-size: var(--font-size-sm) !important;
    margin-top: 0.25rem !important;
}

/* Submit button - uses .button.button-secondary for base styles */
body #sb-site #body .modular-row.quiz button.button.button-secondary.quiz-submit,
body #sb-site #body .modular-row.quiz .quiz-container button.button.button-secondary.quiz-submit,
body #sb-site #body #compliance-quiz button.button.button-secondary.quiz-submit,
body #body .modular-row.quiz button.button.button-secondary.quiz-submit,
body #body .modular-row.quiz .quiz-container button.button.button-secondary.quiz-submit,
body #body #compliance-quiz button.button.button-secondary.quiz-submit,
#compliance-quiz button.button.button-secondary.quiz-submit,
.quiz-container button.button.button-secondary.quiz-submit,
button.button.button-secondary.quiz-submit,
.button.button-secondary.quiz-submit {
    display: block !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    margin-top: 0.5rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Submit button hover handled by .button-secondary class */

/* Submit button disabled state */
body #sb-site #body .modular-row.quiz button.button.button-secondary.quiz-submit:disabled,
body #sb-site #body .modular-row.quiz .quiz-container button.button.button-secondary.quiz-submit:disabled,
body #sb-site #body #compliance-quiz button.button.button-secondary.quiz-submit:disabled,
body #body .modular-row.quiz button.button.button-secondary.quiz-submit:disabled,
body #body .modular-row.quiz .quiz-container button.button.button-secondary.quiz-submit:disabled,
body #body #compliance-quiz button.button.button-secondary.quiz-submit:disabled,
#compliance-quiz button.button.button-secondary.quiz-submit:disabled,
.quiz-container button.button.button-secondary.quiz-submit:disabled,
button.button.button-secondary.quiz-submit:disabled,
.button.button-secondary.quiz-submit:disabled {
    background-color: var(--color-kr-grey2) !important;
    border: 1px solid var(--color-kr-grey2) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
}

.quiz-submit-success {
    margin-top: 2rem !important;
    animation: fadeIn 0.5s ease !important;
}

/* Hide technical quiz_result field in feedback form */
.quiz-result-hidden {
    display: none !important;
}

/* Footer Fix - Remove white gap */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

#sb-site {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    flex: 1 !important;
}

#body {
    flex: 1 !important;
}

.modular-row.footer {
    margin-top: auto !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    body #body .modular-row.quiz {
        padding: 2rem 1rem !important;
    }

    #compliance-quiz.quiz-container,
    body #sb-site #body #compliance-quiz.quiz-container,
    body #sb-site #body .modular-row.quiz #compliance-quiz.quiz-container,
    body #sb-site #body .modular-row.quiz .quiz-container,
    body #compliance-quiz.quiz-container,
    body #body .modular-row.quiz #compliance-quiz.quiz-container,
    body #body .modular-row.quiz .quiz-container,
    .quiz-container {
        padding: 1.5rem !important;
    }

    .quiz-header h2 {
        font-size: 2rem !important;
    }

    .quiz-question {
        padding: 2rem !important;
    }

    .quiz-question h3 {
        font-size: 1.2rem !important;
    }

    .quiz-option {
        padding: 1rem !important;
    }

    .result-box {
        padding: 2rem !important;
    }

    .quiz-navigation {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1.5rem !important;
        padding-top: 1rem !important;
    }

    /* Mobile: Make navigation buttons circular with arrows */
    .quiz-navigation button.button.quiz-back,
    .quiz-navigation button.button.quiz-next {
        --button-size: 56px;
        position: relative !important;
        width: var(--button-size) !important;
        height: var(--button-size) !important;
        min-width: var(--button-size) !important;
        max-width: var(--button-size) !important;
        min-height: var(--button-size) !important;
        max-height: var(--button-size) !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        flex: 0 0 var(--button-size) !important;
        box-sizing: border-box !important;
        line-height: 0 !important;
    }

    /* Hide button text on mobile - use font-size 0 and line-height 0 */
    .quiz-navigation .quiz-back,
    .quiz-navigation .quiz-next {
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
    }

    /* Add arrow icons using ::after pseudo-element */
    .quiz-navigation .quiz-back::after,
    .quiz-navigation .quiz-next::after {
        content: '' !important;
        position: absolute !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        border-style: solid !important;
    }

    /* Back button arrow (left pointing) */
    .quiz-navigation .quiz-back::after {
        border-width: 9px 12px 9px 0 !important;
        border-color: transparent var(--color-text-white) transparent transparent !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-60%, -50%) !important;
    }

    /* Next button arrow (right pointing) */
    .quiz-navigation .quiz-next::after {
        border-width: 9px 0 9px 12px !important;
        border-color: transparent transparent transparent var(--color-text-white) !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-40%, -50%) !important;
    }


    .quiz-results-actions .quiz-restart {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .quiz-submit {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Reduce padding on result boxes and forms for mobile */
    .quiz-results {
        padding: 1.5rem !important;
    }

    .result-box {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .result-email-form {
        padding: 1rem !important;
        margin-top: 1rem !important;
    }

    .result-email-form h4 {
        font-size: 1.2rem !important;
        margin-bottom: 0.75rem !important;
    }

    .result-email-form > p {
        margin-bottom: 1rem !important;
        font-size: var(--font-size-sm) !important;
    }

    .quiz-email-form {
        gap: 1rem !important;
    }

    .result-note {
        padding: 1rem !important;
    }

    /* Reduce spacing in result boxes for mobile */
    .result-box h4 {
        font-size: var(--font-size-2xl) !important;
        margin-bottom: 0.75rem !important;
    }

    .result-box ul {
        margin: 0.75rem 0 0 0 !important;
    }

    .result-box ul li {
        padding: 0.4rem 0 !important;
        padding-left: 1.5rem !important;
    }

    .quiz-email-input {
        padding: 1rem 1.25rem !important;
        font-size: 1rem !important;
    }

    .quiz-checkbox-label {
        font-size: 0.9rem !important;
    }

    .quiz-submit {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }

}