:root {
            /* Color System */
            --primary-500: #0057B7;
            --primary-100: #D9E8F8;
            --primary-700: #003E83;
            --neutral-50: #F8F9FA;
            --neutral-100: #FFFFFF;
            --neutral-400: #CED4DA;
            --neutral-600: #6C757D;
            --neutral-900: #212529;

            /* Spacing */
            --space-xs: 8px;
            --space-sm: 12px;
            --space-md: 16px;
            --space-lg: 24px;
            --space-xl: 32px;
            --space-xxl: 48px;

            /* Shadows */
            --shadow-md: 0 4px 12px rgba(0, 87, 183, 0.08);
            --shadow-lg: 0 8px 24px rgba(0, 87, 183, 0.12);

            /* Border Radius */
            --radius-md: 12px;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--neutral-50);
            color: var(--neutral-900);
            line-height: 1.6;
        }

        /* Container */
        .event-selector-container {
            max-width: 960px;
            margin: 0 auto;
            padding: var(--space-xl);
        }

        /* Form Label */
        .form-label {
            font-size: 18px;
            font-weight: 500;
            line-height: 1.4;
            color: var(--neutral-900);
        }

        /* Hide the actual radio input but keep it accessible */
        .event-radio-input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* Radio Card */
        .radio-card {
            background: var(--neutral-100);
            border: 1px solid var(--neutral-400);
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            cursor: pointer;
            transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-md);
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* Custom Radio Indicator */
        .radio-indicator {
            position: absolute;
            top: var(--space-lg);
            right: var(--space-lg);
            width: 20px;
            height: 20px;
            border: 1px solid var(--neutral-400);
            border-radius: 50%;
            background: var(--neutral-100);
            transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        .radio-indicator::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary-500);
            transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Date Information */
        .date-info {
            margin-bottom: var(--space-md);
        }

        .date-main {
            font-size: 24px;
            font-weight: 600;
            line-height: 1.2;
            color: var(--neutral-900);
            margin-bottom: var(--space-xs);
        }

        .date-sub {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--neutral-600);
        }

        /* Location Information */
        .location-info {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .location-icon {
            color: var(--neutral-600);
            flex-shrink: 0;
        }

        .location-text {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--neutral-600);
        }

        /* Hover State */
        .radio-card:hover {
            border: 1px solid var(--primary-500);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .radio-card:hover .radio-indicator {
            border: 1px solid var(--primary-500);
        }

        /* Selected State */
        .event-radio-input:checked+.radio-card {
            background: var(--primary-100);
            border: 2px solid var(--primary-500);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .event-radio-input:checked+.radio-card .radio-indicator {
            border: 2px solid var(--primary-500);
        }

        .event-radio-input:checked+.radio-card .radio-indicator::after {
            transform: translate(-50%, -50%) scale(1);
        }

        /* Focus State */
        .event-radio-input:focus+.radio-card {
            outline: 2px solid var(--primary-500);
            outline-offset: 2px;
        }

        /* Disabled State */
        .event-radio-input:disabled+.radio-card {
            background: var(--neutral-50);
            border: 1px solid var(--neutral-400);
            box-shadow: none;
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .event-radio-input:disabled+.radio-card .date-main,
        .event-radio-input:disabled+.radio-card .date-sub,
        .event-radio-input:disabled+.radio-card .location-text {
            color: var(--neutral-400);
        }

        .event-radio-input:disabled+.radio-card .location-icon {
            color: var(--neutral-400);
        }

        /* Grid Layout */
        .radio-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-xl);
        }

        /* Responsive adjustments */
        @media (max-width: 767px) {
            .event-selector-container {
                padding: var(--space-lg);
            }

            .radio-cards-grid {
                grid-template-columns: 1fr;
                gap: var(--space-lg);
            }

            .date-main {
                font-size: 20px;
            }
        }

        /* Reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            .radio-card {
                transition: none;
            }

            .radio-indicator,
            .radio-indicator::after {
                transition: none;
            }

            .radio-card:hover {
                transform: none;
            }

            .event-radio-input:checked+.radio-card {
                transform: none;
            }
        }

        /* Additional styling for better appearance */
        .card-content-wrapper {
            position: relative;
            padding-right: 40px;
            /* Space for radio indicator */
        }