/* Base container layout */
    .custom-radio-container {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: sans-serif;
        margin-bottom: 10px;
        cursor: pointer;
    }

    /* Reset the radio input behavior and build the square checkbox frame */
    .checkbox-style-radio {
        appearance: none;
        -webkit-appearance: none; /* Safari compatibility */
        width: 18px;
        height: 18px;
        border: 2px solid #555;
        border-radius: 3px; /* Gives it the checkbox square shape instead of a circle */
        outline: none;
        background-color: #fff;
        cursor: pointer;
        display: grid;
        place-content: center;
        transition: border-color 0.2s, background-color 0.2s;
    }

        /* Add focus states to ensure keyboard accessibility */
        .checkbox-style-radio:focus-visible {
            outline: 2px solid #0066cc;
            outline-offset: 2px;
        }

        /* Generate the checkmark using a pseudo-element */
        .checkbox-style-radio::before {
            content: "";
            width: 10px;
            height: 10px;
            transform: scale(0);
            transition: transform 0.1s ease-in-out;
            background-color: #ffffff;
            /* Creates a checkmark shape without images or font icons */
            clip-path: polygon(14% 44%, 0 58%, 38% 94%, 100% 16%, 86% 2%, 38% 66%);
        }

        /* Change styling state when the radio item is selected */
        .checkbox-style-radio:checked {
            background-color: #0066cc;
            border-color: #0066cc;
        }

            /* Reveal the checkmark when selected */
            .checkbox-style-radio:checked::before {
                transform: scale(1);
            }