/* Accessibility improvements for radio buttons */

/* Ensure radio buttons are keyboard accessible and focusable */
.funkyradio input[type="radio"] {
    /* Don't hide the radio button completely - keep it accessible */
    position: relative !important;
    opacity: 0.01 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    overflow: hidden !important;
}

/* When radio button receives focus, make the label clearly visible */
.funkyradio input[type="radio"]:focus + label {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    background-color: rgba(0, 95, 204, 0.1) !important;
}

/* Ensure labels are properly styled and clickable */
.funkyradio label {
    display: block !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

/* When radio is checked, highlight the label */
.funkyradio input[type="radio"]:checked + label {
    background-color: #fed136 !important;
    border-color: #fed136 !important;
    color: #333 !important;
    font-weight: bold !important;
}

/* Hover state for better UX */
.funkyradio label:hover {
    background-color: #f8f9fa !important;
    border-color: #bbb !important;
}

/* Ensure fieldset legends are visible and properly styled */
.contact-radios legend {
    font-weight: bold !important;
    margin-bottom: 10px !important;
    color: #333 !important;
    font-size: 16px !important;
}

/* Additional styling for the text inputs that appear with "Other" option */
.funkyradio input[type="text"] {
    margin-top: 8px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

.funkyradio input[type="text"]:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    border-color: #005fcc !important;
}