.open-credit-add-modal {
    .open-credit-add-modal__dialog {
        min-width: 0;
        width: 100%;
        max-width: min(90vw, 980px);
        margin: 10px auto;
        transition: max-width 0.35s ease;
    }

    &.open-payment-layout--card .open-credit-add-modal__dialog {
        max-width: min(90vw, 980px);
    }

    &.open-credit-add-modal--loading .open-credit-add-modal__dialog {
        width: min(90vw, 980px);
        max-width: min(90vw, 980px);
        min-width: min(90vw, 980px);
    }

    &.open-payment-layout--cash .open-credit-add-modal__dialog {
        max-width: min(90vw, 560px);
    }

    .open-credit-add-modal__columns {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
    }

    .open-credit-add-modal__col {
        min-width: 0;
        transition:
            flex 0.35s ease,
            max-width 0.35s ease,
            opacity 0.28s ease,
            padding 0.35s ease;
    }

    .open-credit-add-modal__col--details {
        flex: 1 1 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
    }

    .open-credit-add-modal__col--card {
        flex: 1 1 100%;
        max-width: 100%;
        opacity: 1;
        overflow: hidden;
    }

    &.open-payment-layout--cash .open-credit-add-modal__col--card {
        flex: 0 0 0;
        max-width: 0;
        opacity: 0;
        padding: 0;
        margin: 0;
        pointer-events: none;
    }

    .open-credit-add-modal__field {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .open-credit-add-modal__label,
    .open-credit-add-modal__member-select .label_font {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--gray-500);
        font-family: var(--font-sans);
    }

    .open-credit-add-modal__member-name {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text-color);
        font-family: var(--font-sans);
    }

    .open-credit-add-modal__alert {
        margin-bottom: 1rem;
    }

    .open-credit-add-modal__amounts {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-color);
    }

    .open-credit-add-modal__amount-row {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .open-credit-add-modal__gateway {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--gray-600);
        font-family: var(--font-sans);

        & i {
            color: var(--accent);
            width: 1rem;
            text-align: center;
        }
    }

    .open-credit-add-modal__amount-input {
        .open-credit-add-modal__input {
            font-variant-numeric: tabular-nums;
            font-weight: 600;
        }
    }

    .open-credit-add-modal__hint {
        margin: 0;
        padding: 0.55rem 0.7rem;
        border-radius: 0.5rem;
        background: color-mix(in srgb, var(--accent) 6%, var(--field-bg));
        color: var(--gray-600);
        font-size: 0.75rem;
        line-height: 1.35;
        font-family: var(--font-sans);
    }

    .open-credit-add-modal__datepicker {
        .open-credit-add-modal__date-btn {
            background: var(--field-bg);
            color: var(--accent);
            border: 1px solid var(--border-color);
            border-right: none;
            border-radius: 0.25rem 0 0 0.25rem;
            padding: 0 0.85rem;
        }
    }

    .open-credit-add-modal__member-select {
        margin: 0;

        .col-md-12 {
            padding: 0;
        }

        br {
            display: none;
        }
    }

    .open-credit-add-modal__footer {
        justify-content: space-between;
    }

    @media (min-width: 992px) {
        .open-credit-add-modal__dialog {
            min-width: -moz-max-content;
            min-width: max-content;
            width: -moz-max-content;
            width: max-content;
        }

        &.open-payment-layout--card .open-credit-add-modal__columns {
            flex-wrap: nowrap;
            gap: 1.5rem;
        }

        &.open-payment-layout--card .open-credit-add-modal__col--details {
            flex: 1 1 auto;
            min-width: 320px;
            max-width: none;
        }

        &.open-payment-layout--card .open-credit-add-modal__col--card {
            flex: 1 1 auto;
            min-width: -moz-max-content;
            min-width: max-content;
            max-width: none;
            padding-left: 1.25rem;
            border-left: 1px solid var(--border-color);
        }

        &.open-payment-layout--cash .open-credit-add-modal__col--details {
            flex: 1 1 100%;
            max-width: 100%;
        }

        .manual-card-form__card-types {
            flex-wrap: nowrap;
        }

        .open-payment-method-switcher {
            grid-auto-columns: minmax(max-content, 1fr);
        }

        .open-payment-method-switcher .payment-method-pill {
            white-space: nowrap;
        }
    }

    @media (max-width: 991px) {
        .open-credit-add-modal__dialog {
            max-width: calc(100vw - 20px);
        }

        .mobile-floating-control-bar & .open-credit-add-modal__dialog {
            max-width: 100%;
            margin: 0;
        }

        &.open-payment-layout--card .open-credit-add-modal__col--card {
            margin-top: 0.35rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        .modal-content {
            max-height: calc(100dvh - 20px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .modal-header,
        .modal-footer {
            flex-shrink: 0;
        }

        .open-credit-add-modal__footer {
            flex-direction: column-reverse;
            align-items: stretch;

            .app-modal-btn-primary,
            .app-modal-btn-secondary {
                width: 100%;
                margin: 0;
            }
        }

        .manual-card-form__card-types {
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .open-payment-method-switcher {
            grid-auto-columns: initial;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .open-payment-method-switcher .payment-method-pill {
            white-space: normal;
            font-size: 13px;
            padding: 10px 8px;
        }
    }
}