/* Shared payment dialog, used by all payment entry points. */
.payment-editor-dialog {
    --payment-ink: #0b1733;
    --payment-muted: #64728b;
    --payment-line: #e2e8f1;
    --payment-surface: #fff;
    --payment-soft: #f4f7fa;
    --payment-blue: #004a85;
    --payment-green: #2a710e;
    --payment-green-soft: #eff8ed;
    --payment-green-line: #cfe5c9;
    max-width: 978px;
    width: calc(100% - 48px);
    color: var(--payment-ink);
    font: 16px/1.5 Arial, sans-serif;
}

.payment-editor-dialog .modal-content {
    background: var(--payment-surface);
    color: var(--payment-ink);
    border: 1px solid var(--payment-line);
    border-radius: 11px;
    box-shadow: 0 24px 80px #0b173329;
}

.payment-editor-dialog .modal-header { padding: 27px 35px 0; border: 0; align-items: flex-start; }
.payment-editor-dialog .modal-title { color: var(--payment-ink); font: 700 30px/1.2 Arial, sans-serif; }
.payment-editor-dialog .btn-close { padding: 8px; margin: 0 -8px 0 12px; opacity: .6; }
.payment-editor-dialog .modal-body { padding: 4px 35px 28px; }
.payment-editor-dialog :is(button, input) { font-family: inherit; }
.payment-editor__subtitle { margin: 0 0 19px; color: var(--payment-muted); font-size: 20px; line-height: 30px; }

.payment-editor__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 24px 22px;
    margin-bottom: 24px;
    border-radius: 18px;
    background: var(--payment-soft);
}
.payment-editor__summary-item { display: flex; align-items: center; gap: 28px; min-width: 0; }
.payment-editor__summary-item + .payment-editor__summary-item { border-left: 1px solid var(--payment-line); padding-left: 46px; }
.payment-editor__summary-icon { display: grid; place-items: center; flex: 0 0 67px; height: 67px; border-radius: 20px; background: #e0edfc; color: #004ba1; font-size: 31px; }
.payment-editor__summary-icon.is-green { background: #e0f0dc; color: var(--payment-green); }
.payment-editor__summary-label { color: #54627b; font-size: 18px; margin-bottom: 3px; }
.payment-editor__summary-value { color: var(--payment-ink); font-size: 28px; line-height: 36px; font-weight: 700; white-space: nowrap; }

.payment-editor__status { min-width: 0; margin: 0; padding: 0 0 26px; border: 0; border-bottom: 1px solid var(--payment-line); }
.payment-editor__label { display: block; float: none; width: auto; margin: 0 0 13px; color: var(--payment-ink); font-size: 20px; line-height: 26px; font-weight: 700; }
.payment-editor__options { display: grid; grid-template-columns: 1fr 1.1fr 1.15fr .98fr; gap: 12px; }
.payment-editor__option { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 16px; min-height: 106px; margin: 0; font-weight: 400; border: 1px solid var(--payment-line); border-radius: 17px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.payment-editor__option:hover { background: var(--payment-soft); }
.payment-editor__option.is-active { border-color: #005ab1; background: #edf5ff; }
.payment-editor__option.is-green.is-active { border-color: var(--payment-green); background: var(--payment-green-soft); }
.payment-editor__option.is-green { padding-right: 10px; }
.payment-editor__option.is-red.is-active { border-color: #c61d42; background: #fff1f4; }
.payment-editor__option:focus-within { outline: 3px solid #006aca44; outline-offset: 3px; }
.payment-editor__option-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.payment-editor__option-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #eaf2fe; color: #005cc7; font-size: 23px; }
.payment-editor__option.is-green .payment-editor__option-icon { background: #e0efd9; color: var(--payment-green); }
.payment-editor__option.is-green.is-active .payment-editor__option-icon { background: var(--payment-green); color: #fff; }
.payment-editor__option.is-red .payment-editor__option-icon { background: #fbeaf0; color: #c71a40; }
.payment-editor__option-name { display: block; margin-bottom: 5px; color: var(--payment-ink); font-size: 14px; line-height: 20px; }
.payment-editor__option-note { display: block; color: var(--payment-muted); font-size: 13px; line-height: 21px; }

.payment-editor__section { margin-top: 20px; }
.payment-editor__section .payment-editor__label { margin-bottom: 8px; }
.payment-editor__amount-row { display: grid; grid-template-columns: minmax(180px, 1fr) 145px 195px; align-items: stretch; gap: 16px; }
.payment-editor__amount-field { position: relative; margin-right: 6px; }
.payment-editor-dialog .payment-editor__amount-input,
.payment-editor-dialog .payment-editor__date-input { height: 64px; border: 1px solid #ccd6e6; border-radius: 16px; background: var(--payment-surface); color: var(--payment-ink); box-shadow: none; font-size: 25px; padding: 12px 48px 12px 19px; }
.payment-editor-dialog .payment-editor__date-input { max-width: 420px; padding-right: 18px; font-size: 20px; }
.payment-editor__currency { position: absolute; right: 24px; top: 13px; color: var(--payment-muted); font-size: 25px; pointer-events: none; }
.payment-editor__amount-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid transparent; border-radius: 17px; background: #f1f4f9; color: var(--payment-ink); padding: 8px 12px; font-size: 16px; line-height: 23px; }
.payment-editor__amount-choice small { font-size: 14px; }
.payment-editor__amount-choice:hover { background: #e8f0fa; }
.payment-editor__amount-choice.is-active { border-color: #00519b; background: #e8f2fd; color: #062d5b; }
.payment-editor-dialog :is(button, input):focus-visible { outline: 3px solid #006aca44; outline-offset: 2px; }
.payment-editor__error { margin: 8px 0 0; color: #b42b3f; font-size: 14px; }
.payment-editor-dialog [aria-invalid=true] { border-color: #b42b3f; }

.payment-editor__result { display: flex; align-items: center; gap: 20px; margin-top: 20px; padding: 16px 24px; min-height: 90px; border: 1px solid var(--payment-green-line); border-radius: 18px; background: var(--payment-green-soft); }
.payment-editor__result-icon { flex: 0 0 48px; display: grid; place-items: center; height: 48px; border-radius: 50%; background: #a6cf98; color: #286e10; font-size: 29px; }
.payment-editor__result-title { color: var(--payment-green); font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.payment-editor__result-text { color: #54627b; font-size: 16px; line-height: 25px; }
.payment-editor__result.is-warning { background: #fff8eb; border-color: #f2ddb2; }
.payment-editor__result.is-warning .payment-editor__result-title { color: #94620a; }
.payment-editor__result.is-warning .payment-editor__result-icon { background: #f9e6bf; color: #986213; }
.payment-editor__result.is-info { background: #eef5ff; border-color: #cddff4; }
.payment-editor__result.is-info .payment-editor__result-title { color: #00519b; }
.payment-editor__result.is-info .payment-editor__result-icon { background: #d4e5fc; color: #00519b; }
.payment-editor__result.is-danger { background: #fff1f4; border-color: #f0d2d9; }
.payment-editor__result.is-danger .payment-editor__result-title { color: #b42b3f; }
.payment-editor__result.is-danger .payment-editor__result-icon { background: #f6dce3; color: #b42b3f; }
.payment-editor__result.is-neutral { background: var(--payment-soft); border-color: var(--payment-line); }
.payment-editor__result.is-neutral .payment-editor__result-title { color: var(--payment-ink); }
.payment-editor__result.is-neutral .payment-editor__result-icon { background: #e6ebf3; color: var(--payment-muted); }

.payment-editor__next { display: flex; align-items: center; gap: 17px; margin: 28px 0 30px; }
.payment-editor__next-icon { flex: 0 0 56px; height: 56px; display: grid; place-items: center; background: #f1f4f8; border-radius: 18px; color: #5e6e89; font-size: 28px; }
.payment-editor__next-title { font-size: 18px; margin-bottom: 3px; }
.payment-editor__next p { margin: 0; color: var(--payment-muted); font-size: 16px; line-height: 25px; }
.payment-editor__actions { display: flex; justify-content: flex-end; gap: 14px; border-top: 1px solid var(--payment-line); padding-top: 20px; }
.payment-editor__actions .btn { border-radius: 11px; min-height: 52px; padding: 11px 25px; font: 18px/28px Arial, sans-serif; }
.payment-editor__cancel { --vz-btn-bg: #f2f5f9; background: #f2f5f9; border: 1px solid #d4ddec; color: var(--payment-ink); }
.payment-editor__submit { --vz-btn-bg: #004a85; background: #004a85; border: 1px solid #004a85; color: #fff; }
.payment-editor__submit:hover, .payment-editor__submit:focus-visible { --vz-btn-bg: #063865; color: #fff; }
.payment-editor__submit:disabled { opacity: .5; }

[data-layout-mode=dark] .payment-editor-dialog {
    --payment-ink: #e2eaf6;
    --payment-muted: #adbbcf;
    --payment-line: #36465c;
    --payment-surface: #212d3e;
    --payment-soft: #29374a;
    --payment-blue: #92c7ff;
    --payment-green: #a8dc8f;
    --payment-green-soft: #293d30;
    --payment-green-line: #44674b;
    color-scheme: dark;
}
[data-layout-mode=dark] .payment-editor-dialog :is(.payment-editor__summary-label, .payment-editor__result-text) { color: var(--payment-muted); }
[data-layout-mode=dark] .payment-editor__summary-icon { background: #28486b; color: #b6d9ff; }
[data-layout-mode=dark] .payment-editor__summary-icon.is-green { background: #304b35; color: #b6e79e; }
[data-layout-mode=dark] .payment-editor__option.is-active { background: #243d57; }
[data-layout-mode=dark] .payment-editor__option.is-green.is-active { background: var(--payment-green-soft); }
[data-layout-mode=dark] .payment-editor__option.is-red.is-active { background: #452b39; }
[data-layout-mode=dark] .payment-editor__option.is-green.is-active .payment-editor__option-icon { background: #427d2e; }
[data-layout-mode=dark] .payment-editor-dialog :is(.payment-editor__amount-choice, .payment-editor__next-icon) { background: #2d3c52; color: var(--payment-ink); }
[data-layout-mode=dark] .payment-editor__amount-choice.is-active { background: #254766; color: #c7e5ff; border-color: #80bafa; }
[data-layout-mode=dark] .payment-editor__result.is-warning { background: #403929; border-color: #72603d; }
[data-layout-mode=dark] .payment-editor__result.is-info { background: #263c55; border-color: #3d6087; }
[data-layout-mode=dark] .payment-editor__result.is-danger { background: #442d3a; border-color: #744452; }
[data-layout-mode=dark] .payment-editor__result:is(.is-info, .is-danger, .is-warning) .payment-editor__result-title { color: var(--payment-ink); }
[data-layout-mode=dark] .payment-editor__error { color: #ff9bab; }
[data-layout-mode=dark] .payment-editor__cancel { --vz-btn-bg: #2d3c52; border-color: var(--payment-line); }

@media (max-width: 991.98px) {
    .payment-editor-dialog .modal-header { padding-inline: 24px; }
    .payment-editor-dialog .modal-body { padding-inline: 24px; }
    .payment-editor__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-editor__option { min-height: 92px; }
    .payment-editor__summary-item { gap: 16px; }
    .payment-editor__summary-item + .payment-editor__summary-item { padding-left: 24px; }
    .payment-editor__summary-value { font-size: 24px; }
    .payment-editor__summary-label { font-size: 16px; }
}

@media (max-width: 575.98px) {
    .payment-editor-dialog { width: calc(100% - 24px); margin: 12px auto; height: calc(100% - 24px); min-height: 0; }
    .payment-editor-dialog .modal-header { padding: 20px 18px 0; }
    .payment-editor-dialog .modal-title { font-size: 24px; }
    .payment-editor-dialog .modal-body { padding: 4px 18px 20px; }
    .payment-editor__subtitle { font-size: 16px; line-height: 24px; margin-bottom: 16px; }
    .payment-editor__summary { padding: 14px; gap: 14px; grid-template-columns: 1fr; margin-bottom: 20px; }
    .payment-editor__summary-item + .payment-editor__summary-item { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--payment-line); }
    .payment-editor__summary-icon { flex-basis: 48px; height: 48px; border-radius: 14px; font-size: 25px; }
    .payment-editor__summary-value { font-size: 22px; line-height: 28px; }
    .payment-editor__summary-label { font-size: 14px; }
    .payment-editor__label { font-size: 18px; }
    .payment-editor__options { gap: 8px; }
    .payment-editor__option { flex-direction: column; align-items: flex-start; gap: 9px; padding: 12px; }
    .payment-editor__option-name { font-size: 14px; }
    .payment-editor__option-note { font-size: 12px; line-height: 18px; }
    .payment-editor__status { padding-bottom: 20px; }
    .payment-editor__amount-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .payment-editor__amount-field { grid-column: 1 / -1; margin: 0; }
    .payment-editor__amount-choice { min-height: 58px; font-size: 14px; padding-inline: 8px; }
    .payment-editor__result { padding: 14px; gap: 12px; }
    .payment-editor__result-icon { flex-basis: 36px; height: 36px; font-size: 25px; }
    .payment-editor__result-title { font-size: 16px; line-height: 22px; }
    .payment-editor__result-text { font-size: 14px; line-height: 21px; }
    .payment-editor__next { align-items: flex-start; gap: 12px; margin: 20px 0; }
    .payment-editor__next-icon { flex-basis: 40px; height: 40px; font-size: 24px; border-radius: 12px; }
    .payment-editor__next-title { font-size: 16px; }
    .payment-editor__next p { font-size: 14px; line-height: 21px; }
    .payment-editor__actions { gap: 10px; padding-top: 16px; }
    .payment-editor__actions .btn { padding: 10px 14px; font-size: 16px; line-height: 24px; min-height: 46px; }
}