/* Language Test Block Styles */

.language-test-block {
    padding: 2rem 0;
}

/* Test input fields styling */
.test-input-field {
    display: inline-block;
    width: 100px;
    height: 35px;
    margin: 0 5px 5px 5px;
    border-color: #3f97cf;

    &.is-valid {
        background-image: none;
    }
}

/* Make labels clickable for better UX */
.language-test-block .form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Ensure radio buttons are always circular */
.language-test-block .form-check-input[type="radio"] {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Ensure radio button container doesn't shrink */
.language-test-block .form-check {
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .language-test-block {
        padding: 1rem 0;
    }
    
    .language-test-block .d-flex.flex-wrap {
        flex-direction: column !important;
    }
    
    .language-test-block .form-check {
        margin-bottom: 0.5rem;
    }
}

/* Loading state */
.language-test-block .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}