.xy-radio-container {
            display: flex;
            gap: 0.5rem;
            padding: 1rem;
            background-color: #ffffff;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            
            /* Styles to center the container for the preview */
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            justify-content: center;
        }

        /* Hide the default browser radio button */
        .xy-hidden-radio {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* Style the custom label as a button */
        .xy-radio-label {
            display: inline-block;
            cursor: pointer;
            padding: 0.75rem 1.5rem;
            background-color: #ffffff;
            color: #374151;
            font-weight: 600;
            text-align: center;
            border-radius: 0.75rem;
            transition: all 0.2s ease-in-out;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border: 2px solid transparent;
            user-select: none;
            font-size: 0.875rem;
        }

        /* Change color on hover */
        .xy-radio-label:hover {
            background-color: #e5e7eb;
            color: #1f2937;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }

        /* Style the label when its corresponding radio is checked */
        .xy-hidden-radio:checked + .xy-radio-label {
            background-color: #123C69;
            color: #ffffff;
            box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.5), 0 4px 6px -2px rgba(79, 70, 229, 0.25);
            transform: translateY(-2px);
            border: 2px solid  #123C69;
        }