.member-payment-details .member-full-details__grid,
.payment-receipt__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.member-full-details__field,
.payment-receipt__grid > div {
    padding: 1rem;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.75rem;
    background-color: rgb(255 255 255 / 4%);
}

.member-full-details__field--full,
.payment-receipt__field--full {
    grid-column: 1 / -1;
}

.member-full-details__label,
.payment-receipt__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(107 114 128);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.member-full-details__value,
.payment-receipt__value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: inherit;
}

.member-full-details__value--primary,
.payment-receipt__value--primary {
    color: #2563eb;
}

.member-full-details__value--success,
.payment-receipt__value--success {
    color: #16a34a;
}

.member-full-details__value--orange {
    color: #ea580c;
}

.member-full-details__tokens {
    display: block;
}

.member-full-details__tokens .member-full-details__token {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
}

.member-full-details__tokens .member-full-details__value--success {
    color: #16a34a !important;
}

.member-full-details__tokens .member-full-details__value--orange {
    color: #ea580c !important;
}

.member-full-details__value--warning {
    color: #9333ea;
}

.member-full-details__value--danger {
    color: #dc2626;
}

.member-payment-details-table .fi-ta-header-cell {
    background-color: #16a34a;
    color: #fff;
}

@media (prefers-color-scheme: dark) {
    .member-full-details__field,
    .payment-receipt__grid > div {
        border-color: rgb(75 85 99);
    }

    .member-full-details__value--primary {
        color: #60a5fa;
    }

    .member-full-details__value--success,
    .payment-receipt__value--success {
        color: #4ade80;
    }

    .member-full-details__value--orange {
        color: #fb923c;
    }

    .member-full-details__tokens .member-full-details__value--success {
        color: #4ade80 !important;
    }

    .member-full-details__tokens .member-full-details__value--orange {
        color: #fb923c !important;
    }

    .member-full-details__value--warning {
        color: #c084fc;
    }

    .member-full-details__value--danger {
        color: #f87171;
    }

    .member-payment-details-table .fi-ta-header-cell {
        background-color: #15803d;
    }
}

.member-payment-details-table .scheme-completed-banner,
.member-payment-details-modal .scheme-completed-banner,
.fi-modal .scheme-completed-banner,
.scheme-completed-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    background-color: color-mix(in oklab, var(--success-500) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--success-500) 35%, transparent);
    color: var(--success-600);
}

.dark .member-payment-details-table .scheme-completed-banner,
.dark .member-payment-details-modal .scheme-completed-banner,
.dark .fi-modal .scheme-completed-banner,
.dark .scheme-completed-banner {
    background-color: color-mix(in oklab, var(--success-400) 14%, transparent);
    border-color: color-mix(in oklab, var(--success-400) 35%, transparent);
    color: var(--success-400);
}

.scheme-completed-banner__icon,
.scheme-completed-banner__label {
    color: inherit;
}

.member-payment-details-table .fi-section-header-description {
    margin-top: 0.5rem;
}

.scheme-completed-banner__icon {
    font-size: 1rem;
    line-height: 1;
}