/* RGAA Quiz Styles */
.rgaa-quiz-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
}

.rgaa-quiz-header {
    margin-bottom: 2rem;
}

.rgaa-progress-container {
    background: #e0e0e0;
    border-radius: 4px;
    height: 20px;
    position: relative;
    margin-top: 1rem;
    overflow: hidden;
}

.rgaa-progress-bar {
    background: #005a9c;
    /* Accessible Blue */
    height: 100%;
    transition: width 0.3s ease;
}

.rgaa-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    color: #000;
    /* Ensure contrast on light bg, might need adjustment if bar covers it. 
                   Actually, let's move text out or ensure contrast. 
                   For simplicity, let's put text below bar or ensure bar color allows text reading if transparent.
                   Better: Text below bar. */
    display: none;
    /* Hiding inside bar for now, will move out in structure if needed, but let's keep simple */
}

/* Better progress text placement */
.rgaa-progress-container {
    height: 10px;
    /* Thinner bar */
    margin-bottom: 0.5rem;
}

.rgaa-progress-text {
    display: block;
    position: static;
    transform: none;
    text-align: right;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.rgaa-question-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rgaa-question-text {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.rgaa-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rgaa-option-item {
    margin-bottom: 0.75rem;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.rgaa-option-item:nth-child(1) {
    animation-delay: 0.1s;
}

.rgaa-option-item:nth-child(2) {
    animation-delay: 0.2s;
}

.rgaa-option-item:nth-child(3) {
    animation-delay: 0.3s;
}

.rgaa-option-item:nth-child(4) {
    animation-delay: 0.4s;
}

.rgaa-option-btn {
    width: 100%;
    text-align: left;
    padding: 1rem;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.rgaa-option-btn:hover,
.rgaa-option-btn:focus {
    border-color: #005a9c;
    background: #f0f7ff;
    outline: none;
    /* We provide custom focus style */
    box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.3);
}

.rgaa-option-btn.correct {
    border-color: #2e7d32;
    background-color: #e8f5e9;
    color: #1b5e20;
}

.rgaa-option-btn.incorrect {
    border-color: #c62828;
    background-color: #ffebee;
    color: #b71c1c;
}

.rgaa-feedback {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 4px;
    background: #f1f1f1;
    border-left: 5px solid #333;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.rgaa-feedback.success {
    border-left-color: #2e7d32;
    background: #e8f5e9;
}

.rgaa-feedback.error {
    border-left-color: #c62828;
    background: #ffebee;
}

.rgaa-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition: background 0.2s;
}

.rgaa-btn-primary {
    background: #005a9c;
    color: #fff;
}

.rgaa-btn-primary:hover {
    background: #003c68;
}

.rgaa-btn-next {
    margin-top: 1rem;
    float: right;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 0.3s;
    /* Slight delay after feedback */
}

.rgaa-maturity-card {
    padding: 2rem;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    margin-top: 1rem;
}

.rgaa-maturity-title {
    font-size: 1.5rem;
    color: #005a9c;
    margin-bottom: 1rem;
}

/* Accessibility Focus */
*:focus-visible {
    outline: 3px solid #ff9800;
    /* High contrast focus ring */
    outline-offset: 2px;
}