@layer components {
    .gfield--type-fm_appointment_type {
        --form-choices-display: grid;
        --type-card-columns: repeat(2, minmax(0, 1fr));
        --type-card-gap: var(--space-4);
        --type-card-pad: var(--space-5);
        --type-card-inner-gap: var(--space-1);
        --type-card-radius: var(--radius-md);
        --type-card-border: var(--color-line-strong);
        --type-card-bg: var(--color-surface);
        --type-card-fg: var(--color-text);
        --type-card-muted: var(--color-text-muted);
        --type-card-hover: var(--color-primary);
        --type-card-focus: var(--color-action);
        --type-card-selected-bg: var(--color-selected);
        --type-card-selected-fg: var(--color-on-selected);
        --type-card-selected-muted-opacity: 0.92;
        --type-card-check-size: var(--space-5);
        --type-card-check-fill: var(--color-on-primary);
        --type-card-check-tick: var(--color-primary);

        & .gfield_radio,
        & fieldset.fm-appointment-type__group,
        & .fm-appointment-type__group ul {
            grid-template-columns: var(--type-card-columns);
            gap: var(--type-card-gap);
        }

        & fieldset.fm-appointment-type__group,
        & .fm-appointment-type__group ul {
            display: grid;
            min-inline-size: 0;
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }

        & .fm-appointment-type__group {
            grid-column: 1 / -1;
            margin: 0;
            list-style: none;
        }

        & .fm-appointment-type__legend {
            padding: 0 0 var(--type-card-gap);
            font-size: var(--text-label);
            font-weight: var(--font-weight-medium);
            letter-spacing: var(--tracking-label);
            text-transform: uppercase;
            color: var(--type-card-muted);
        }

        & .gchoice {
            position: relative;
            display: flex;
            min-inline-size: 0;
            margin: 0;
            border: var(--border-w) solid var(--type-card-border);
            border-radius: var(--type-card-radius);
            background: var(--type-card-bg);
            color: var(--type-card-fg);

            &:hover {
                border-color: var(--type-card-hover);
            }

            &:has(:focus-visible) {
                outline: var(--focus-w) solid var(--type-card-focus);
                outline-offset: var(--focus-offset);
            }

            &:has(:checked) {
                border-color: var(--type-card-selected-bg);
                background: var(--type-card-selected-bg);
                color: var(--type-card-selected-fg);
            }

            & input {
                position: absolute;
                inset: 0;
                inline-size: 100%;
                block-size: 100%;
                margin: 0;
                opacity: 0;
                cursor: pointer;
            }

            & label {
                position: relative;
                display: flex;
                flex: 1;
                flex-direction: column;
                align-self: stretch;
                gap: var(--type-card-inner-gap);
                min-block-size: var(--min-tap);
                margin: 0;
                padding: var(--type-card-pad);
                font-size: var(--text-body);
                color: inherit;
                cursor: pointer;
            }
        }

        & .fm-type-card__title {
            padding-inline-end: calc(var(--type-card-check-size) + var(--space-2));
        }

        & .fm-type-card__price {
            white-space: nowrap;
            font-family: var(--font-heading);
            font-size: var(--text-price);
            line-height: 1;
        }

        & .fm-type-card__persons {
            font-weight: var(--font-weight-medium);
        }

        & .fm-type-card__duration {
            font-size: var(--text-small);
            color: var(--type-card-muted);
        }

        & .gchoice:has(:checked) .fm-type-card__duration {
            color: var(--type-card-selected-fg);
            opacity: var(--type-card-selected-muted-opacity);
        }

        & .fm-type-card__check {
            position: absolute;
            inset-block-start: var(--type-card-pad);
            inset-inline-end: var(--type-card-pad);
            display: grid;
            place-items: center;
            inline-size: var(--type-card-check-size);
            block-size: var(--type-card-check-size);
            border: var(--border-w) solid var(--type-card-border);
            color: var(--type-card-check-tick);

            & svg {
                inline-size: 100%;
                block-size: 100%;
                visibility: hidden;
            }
        }

        & .gchoice:has(:checked) .fm-type-card__check {
            border-color: var(--type-card-check-fill);
            background: var(--type-card-check-fill);

            & svg {
                visibility: visible;
            }
        }
    }

    @media (width < 600px) {
        .gfield--type-fm_appointment_type {
            --type-card-pad: var(--space-4);
        }
    }
}