.payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
    align-items: start;
    gap: 20px;
}

.payment-page .page-heading { align-items: center; gap: 16px; }
.payment-page .page-heading h1 { color: #1d2b22; }
.payment-page .page-heading p { color: #849087; }
.payment-page .page-heading > div { min-width: 0; }
.payment-page .page-heading .mud-button-root { flex: none; }
.payment-layout > .admin-card { min-width: 0; }
.payment-method-card { overflow: hidden; }
.payment-card-heading { padding: 22px 24px 17px !important; border-bottom: 1px solid #edf0ed; }
.payment-card-heading h2 { font-size: 17px; }
.payment-card-heading p { margin-top: 6px; font-size: 12px; }
.payment-form-content { display: grid; gap: 19px; padding: 20px 24px 23px; }
.payment-customer-select { width: 100%; margin: 0; }
.payment-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.payment-section-heading > div { display: grid; gap: 5px; min-width: 0; }
.payment-section-heading strong { color: #28382e; font-size: 13px; }
.payment-section-heading span { color: #849087; font-size: 11px; line-height: 1.45; }
.add-payment-button { flex: none; min-height: 40px; padding: 0 13px !important; white-space: nowrap; }
.payment-entry { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(125px, 1fr) 42px; align-items: start; gap: 12px; }
.payment-entry.with-installments { grid-template-columns: minmax(0, 1.15fr) minmax(110px, .9fr) minmax(92px, .65fr) 42px; }
.payment-entry .payment-field { width: 100%; min-width: 0; }
.payment-entry .payment-field .mud-input-control { margin: 0; }
.remove-payment-button { margin-top: 5px; }
.payment-balance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 16px; border-top: 1px solid #edf0ed; }
.payment-balance > div { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 12px; border: 1px solid #e9eeea; border-radius: 10px; background: #fafcfb; }
.payment-balance span { color: #849087; font-size: 10px; }
.payment-balance strong { color: #344138; font-size: 14px; overflow-wrap: anywhere; }
.payment-balance .balance-pending { background: #fff9ed; border-color: #f2e6ca; }
.payment-balance .balance-pending strong { color: #9b6d1f; }
.payment-balance .balance-complete { background: #f1f8f2; border-color: #dfede2; }
.payment-balance .balance-complete strong { color: #287148; }
.payment-balance .balance-error { background: #fff2f0; border-color: #f0d9d6; }
.payment-balance .balance-error strong { color: #b5473c; }
.payment-nfce-checkbox { margin: 0 !important; }
.payment-method-card .secure-note { justify-content: flex-start; padding: 0; font-size: 10px; line-height: 1.5; }
.payment-method-card .demo-note { margin: -11px 0 0; font-size: 10px; text-align: left; }
.payment-method-card .checkout-button { min-height: 49px; margin-top: -4px; }
.payment-items-card .card-heading h2 { font-size: 16px; }
.payment-items-card .data-table th, .payment-items-card .data-table td { font-size: 11px; }
.payment-items-card .data-table td strong { font-size: 11px; }
.payment-items-card .payment-total { font-size: 11px; }
.payment-items-card .payment-total strong { font-size: 11px; }
.payment-items-card .payment-total .grand-total { font-size: 20px; }

.theme-dark .payment-card-heading { border-color: #344238; }
.theme-dark .payment-page .page-heading h1 { color: #e3ece5; }
.theme-dark .payment-page .page-heading p { color: #a2b0a6; }
.theme-dark .payment-section-heading strong { color: #e3ece5; }
.theme-dark .payment-section-heading span, .theme-dark .payment-balance span { color: #a2b0a6; }
.theme-dark .payment-balance { border-color: #344238; }
.theme-dark .payment-balance > div { background: #202e25; border-color: #344238; }
.theme-dark .payment-balance strong { color: #e3ece5; }
.theme-dark .payment-balance .balance-pending { background: #393224; border-color: #51442c; }
.theme-dark .payment-balance .balance-pending strong { color: #e5c178; }
.theme-dark .payment-balance .balance-complete { background: #20382a; border-color: #34553f; }
.theme-dark .payment-balance .balance-complete strong { color: #a9d9b7; }
.theme-dark .payment-balance .balance-error { background: #3c2928; border-color: #65403d; }
.theme-dark .payment-balance .balance-error strong { color: #f0aaa4; }

@media (max-width: 1100px) {
    .payment-layout { grid-template-columns: minmax(0, 1fr); }
    .payment-items-card, .payment-method-card { width: 100%; }
    .payment-page .page-heading { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 600px) {
    .payment-layout { gap: 13px; }
    .payment-page { padding-top: 18px; }
    .payment-page .page-heading { flex-direction: row; justify-content: space-between; }
    .payment-page .page-heading > div { flex: 1 1 100%; }
    .payment-page .page-heading .mud-button-root { align-self: flex-start; }
    .payment-card-heading { padding: 17px 16px 13px !important; }
    .payment-form-content { gap: 16px; padding: 16px; }
    .payment-section-heading { align-items: flex-start; }
    .add-payment-button { min-height: 38px; padding: 0 9px !important; }
    .payment-entry, .payment-entry.with-installments { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; gap: 8px; }
    .payment-entry.with-installments .payment-field:first-child { grid-column: 1 / 3; }
    .payment-entry.with-installments .payment-field:nth-child(2) { grid-column: 1; }
    .payment-entry.with-installments .payment-field:nth-child(3) { grid-column: 2; }
    .payment-entry .remove-payment-button { grid-column: 3; grid-row: 1; }
    .payment-balance { grid-template-columns: 1fr 1fr; gap: 8px; }
    .payment-balance > div { padding: 10px; }
    .payment-balance > div:last-child { grid-column: 1 / -1; }
    .payment-layout .table-wrap { padding: 0; }
    .payment-items-card .card-heading { padding: 15px 16px 12px; }
    .payment-items-card .payment-total { padding: 13px 16px 0; }
    .payment-method-card .checkout-button { margin-top: 0; }
}

@media (max-width: 380px) {
    .payment-entry, .payment-entry.with-installments { grid-template-columns: minmax(0, 1fr) 36px; }
    .payment-entry .payment-field:first-child, .payment-entry.with-installments .payment-field:first-child { grid-column: 1; }
    .payment-entry .payment-field:nth-child(2), .payment-entry.with-installments .payment-field:nth-child(2) { grid-column: 1; }
    .payment-entry.with-installments .payment-field:nth-child(3) { grid-column: 1; }
    .payment-entry .remove-payment-button { grid-column: 2; grid-row: 1; }
    .payment-section-heading { flex-direction: column; }
    .add-payment-button { width: 100%; }
}