/* 
 * Aggressive Radio Button Fix
 * This CSS completely overrides any problematic styling for radio buttons
 */

/* Force radio buttons to be visible and interactive */
.assessment-container input[type="radio"],
.assessment-form input[type="radio"],
.answer-option input[type="radio"] {
    /* Override any applied styles that might hide or disable the radio */
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    display: inline-block !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    appearance: radio !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    height: auto !important;
    width: auto !important;
    margin: 0 8px 0 0 !important;
    z-index: 999 !important; /* Ensure it's above any overlays */
}

/* Make answer options clearly interactive */
.answer-option {
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
    background-color: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
    padding: 12px 15px !important;
    transition: all 0.2s ease !important;
}

.answer-option:hover {
    background-color: #f8f8f8 !important;
    border-color: #bbbbbb !important;
}

/* Style for selected option */
.answer-option.selected,
.answer-option:has(input[type="radio"]:checked) {
    background-color: #f0f7ff !important;
    border-left: 3px solid #2271b1 !important;
}

/* Remove any possible overlays */
.answer-option::before,
.answer-option::after {
    display: none !important;
    content: none !important;
}

/* Force question container styling */
.question-container.question-answered {
    background-color: #f8f9fa !important;
    border-left: 3px solid #2271b1 !important;
}

/* Ensure text is visible */
.answer-text {
    display: inline-block !important;
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
}