.orderType-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 250px;
}

/* Align the wizard step's info alert and tip with the card list's edges instead of the default
   edge-to-edge width used by other list-view steps (e.g. the map/grid steps). The title used to
   be a sibling of the alert and needed this same margin — now it's nested inside the alert
   (see WizardComponent.razor), so applying this margin to it too would narrow it a second time
   on top of the alert's own already-250px-margined content box; it just fills that box's width. */
.wizard-step-wrapper.wizard-step-list:has(.orderType-cards) .wizard-step-description,
.wizard-step-wrapper.wizard-step-list:has(.orderType-cards) .wizard-step-tip {
    max-width: none !important;
    width: auto !important;
    margin-left: 250px !important;
    margin-right: 250px !important;
}

.wizard-step-wrapper.wizard-step-list:has(.orderType-cards) .wizard-step-title {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.orderType-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(var(--midgrey), 0.5);
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}

    .orderType-card:hover {
        box-shadow: 0 0 0 3px rgba(var(--primary), 0.25);
        border-color: rgba(var(--primary), 0.5);
    }

    .orderType-card.selected {
        background: rgba(var(--primary), 1);
        border-color: rgba(var(--primary), 1);
        box-shadow: 0 0 0 3px rgba(var(--primary), 0.4);
    }

.orderType-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    /* Some OrderTypeIcon glyphs (e.g. BackOrder's "backward") ship pre-colored rather
       than as a plain black icon, so the hue-rotate recipe in --icon-filter (tuned for
       a black source) only shifts that baked-in color instead of replacing it.
       grayscale(1) neutralizes any source color first so every icon tints consistently. */
    filter: grayscale(1) var(--icon-filter);
}

.orderType-card.selected .orderType-icon {
    filter: var(--icon-filter-white);
}

.orderType-info {
    flex: 1;
    min-width: 0;
}

.orderType-name {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orderType-code {
    font-size: 0.75rem;
}

.orderType-description {
    flex: 0 0 45%;
    font-size: 0.825rem;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    text-align: right;
    word-break: break-word;
}

.orderType-card.selected .orderType-name,
.orderType-card.selected .orderType-code,
.orderType-card.selected .orderType-description {
    color: white;
}