/* Container */
.modern-radio-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Prevent wrap on 1360x768 screen */
    gap: 0.2rem;
    padding: 10px;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    max-width: 100%;
    overflow-x: auto; /* scroll on small screens */
}

    /* Style radio inputs */
    .modern-radio-list input[type="radio"] {
        appearance: none;
        background-color: #f0f0f0;
        width: 1.4em;
        height: 1.4em;
        border: 2px solid #999;
        border-radius: 50%;
        display: inline-grid;
        place-content: center;
        cursor: pointer;
        transition: border-color 0.3s ease, background-color 0.3s ease;
        margin-right: 0.5em;
        position: relative;
    }

        .modern-radio-list input[type="radio"]::before {
            content: "";
            width: 0.7em;
            height: 0.7em;
            border-radius: 50%;
            transform: scale(0);
            background-color: #007bff;
            transition: transform 0.2s ease-in-out;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: center;
            translate: -50% -50%;
        }

        .modern-radio-list input[type="radio"]:checked::before {
            transform: scale(1);
        }

    /* Label styling */
    .modern-radio-list label {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        padding: 2px 8px;
        border-radius: 6px;
        background-color: #fff;
        border: 1px solid transparent;
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        cursor: pointer;
    }

    /* Checked state */
    .modern-radio-list input[type="radio"]:checked + label {
        background-color: #e6f3ff;
        border-color: #007bff;
        color: #007bff;
        font-weight: 600;
    }

/* Responsive fallback */
@media (max-width: 768px) {
    .modern-radio-list {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
    }
}