/* ─────────────────────────────────────────────────────────────────────────────
   Results / Acceptances radio → big pill toggle, mobile only (below md / 768px)
   Paste into app.css / site.css — must live in global CSS because the radios
   render inside a deeply nested child component (flyout/modal) that scoped
   component CSS cannot reach.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* Pill row container */
    .stakesRace-type {
        gap: 0.5rem !important;
        padding: 0.75rem 1rem !important;
    }

        /* Each wrapper div stretches to fill half the row */
        .stakesRace-type .form-check.form-check-inline {
            flex: 1;
            margin: 0;
            padding: 0;
        }

        /* Hide the native radio input — keep it in DOM for Blazorise binding */
        .stakesRace-type .form-check-input {
            position: absolute !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            pointer-events: none !important;
            margin: 0 !important;
            float: none !important;
        }

        /* Label becomes the visible pill */
        .stakesRace-type .form-check-label {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0.6rem 1rem;
            border-radius: 999px;
            border: 2px solid var(--slate-300, #cbd5e1);
            background: transparent;
            color: var(--slate-600, #475569);
            font-size: 0.9375rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
            user-select: none;
            white-space: nowrap;
            margin: 0;
        }

        /* Selected pill */
        .stakesRace-type .form-check-input:checked ~ .form-check-label {
            background: var(--slate-800, #1e293b) !important;
            border-color: var(--slate-800, #1e293b) !important;
            color: #ffffff !important;
        }
}

/* ── Flyout: Results / Acceptances radio pills (below md) ── */
@media (max-width: 767.98px) {

    .flyout-acceptance-toggle,
    .modal-acceptance-toggle {
        display: flex;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: var(--arion-dark, #1e293b);
    }

        .flyout-acceptance-toggle .form-check.form-check-inline,
        .modal-acceptance-toggle .form-check.form-check-inline {
            flex: 1;
            margin: 0;
            padding: 0;
        }

        .flyout-acceptance-toggle .form-check-input,
        .modal-acceptance-toggle .form-check-input {
            position: absolute !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            pointer-events: none !important;
            margin: 0 !important;
            float: none !important;
        }

        /* Unselected: dark filled pill */
        .flyout-acceptance-toggle .form-check-label,
        .modal-acceptance-toggle .form-check-label {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0.6rem 1rem;
            border-radius: 999px;
            border: 2px solid var(--slate-800, #1e293b);
            background: var(--slate-800, #1e293b);
            color: #ffffff;
            font-size: 0.9375rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
            user-select: none;
            white-space: nowrap;
            margin: 0;
        }

        /* Selected: white pill with dark outline and text */
        .flyout-acceptance-toggle .form-check-input:checked ~ .form-check-label,
        .modal-acceptance-toggle .form-check-input:checked ~ .form-check-label {
            background: #ffffff !important;
            border-color: var(--slate-800, #1e293b) !important;
            color: var(--slate-800, #1e293b) !important;
        }
}