.payment-modal-open { overflow: hidden; }
.payment-overlay, .payment-promo-overlay { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 68%); backdrop-filter: blur(16px); }
.payment-overlay[hidden] { display: none; }
.payment-dialog { position: relative; width: min(100%, 500px); max-height: calc(100dvh - 40px); overflow: auto; padding: 36px 30px 28px; color: #f7f7f5; background: #1c1e21; border: 1px solid #2a2c2f; border-radius: 22px; box-shadow: 0 30px 80px rgb(0 0 0 / 55%); font-weight: 400; }
.payment-dialog h2 { max-width: 410px; margin: 0 auto; font-size: clamp(28px, 6vw, 38px); font-weight: 400; line-height: 1.14; text-align: center; }
.payment-subtitle { margin: 10px 0 24px; color: #a7a8aa; font-size: 15px; text-align: center; }
.payment-close { position: absolute; top: 15px; right: 15px; display: grid; width: 34px; height: 34px; padding: 8px; place-items: center; color: #a7a8aa; background: #282a2d; border: 0; border-radius: 50%; cursor: pointer; }
.payment-close svg { width: 18px; height: 18px; }
.payment-packages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.payment-package { min-width: 0; min-height: 76px; padding: 10px 6px; color: #e8e8e6; background: #282a2d; border: 1px solid transparent; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 400; }
.payment-package.is-selected { background: #323538; border-color: #b6ff39; box-shadow: 0 0 0 1px rgb(182 255 57 / 12%); }
.payment-package-value, .payment-package-bonus { display: flex; align-items: center; justify-content: center; gap: 3px; }
.payment-package-value strong { font-size: 20px; font-weight: 400; }
.payment-package .economy-unit-icon { width: 17px; height: 17px; }
.payment-package-bonus { margin-top: 5px; color: #f2c94c; font-size: 13px; }
.payment-package-note { display: block; min-height: 18px; margin-top: 5px; color: #85878a; font-size: 11px; }
.payment-package-custom { line-height: 1.22; }
.payment-custom-field { position: relative; display: block; margin-top: 12px; }
.payment-custom-field input, .payment-promo-dialog input { width: 100%; height: 58px; padding: 0 46px 0 18px; color: #f7f7f5; background: #282a2d; border: 1px solid #3a3c40; border-radius: 15px; outline: 0; font: inherit; font-size: 18px; font-weight: 400; }
.payment-custom-field input:focus, .payment-promo-dialog input:focus { border-color: #b6ff39; box-shadow: 0 0 0 3px rgb(182 255 57 / 12%); }
.payment-currency { position: absolute; top: 18px; right: 18px; color: #a7a8aa; }
.payment-hint { margin: 6px 4px 0; color: #77797c; font-size: 12px; }
.payment-summary, .payment-methods { margin-top: 14px; padding: 10px 20px; background: #282a2d; border: 1px solid #303236; border-radius: 17px; }
.payment-summary > div, .payment-summary-action, .payment-method-trigger { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 16px; color: #b8b9bb; }
.payment-summary strong, .payment-summary-action strong, .payment-method-trigger strong { color: #f0f0ee; font-weight: 400; }
.payment-bonus-value { display: flex; align-items: center; gap: 3px; color: #f2c94c !important; }
.payment-bonus-value .economy-unit-icon { width: 16px; height: 16px; }
.payment-summary-action, .payment-method-trigger { padding: 0; background: transparent; border: 0; border-top: 1px solid #383a3e; cursor: pointer; font: inherit; text-align: left; }
.payment-methods { padding-block: 0; }
.payment-method-trigger { min-height: 58px; border-top: 0; }
.payment-method-options { padding: 0 0 10px; }
.payment-method-option { display: flex; width: 100%; min-height: 64px; align-items: center; gap: 12px; padding: 10px; color: #d4d4d2; background: transparent; border: 0; border-radius: 13px; cursor: pointer; font: inherit; text-align: left; }
.payment-method-option.is-selected { background: #34373a; }
.payment-method-option strong, .payment-method-option small { display: block; font-weight: 400; }
.payment-method-option small { margin-top: 3px; color: #929497; }
.payment-method-option.is-selected small { color: #b6ff39; }
.payment-radio { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid #85878a; border-radius: 50%; }
.payment-method-option.is-selected .payment-radio { border: 6px solid #b6ff39; }
.payment-error { margin: 12px 4px 0; color: #ff8b8b; font-size: 13px; }
.payment-submit, .payment-promo-apply { width: 100%; min-height: 58px; margin-top: 16px; color: #10110f; background: #b6ff39; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 17px; font-weight: 400; }
.payment-submit:disabled { cursor: wait; opacity: .5; }
.payment-terms { margin: 14px 4px 0; color: #818285; font-size: 12px; text-align: center; }
.payment-terms a { color: #b8b9bb; }
.payment-promo-overlay { z-index: 1; padding: 14px; background: rgb(10 10 10 / 66%); border-radius: 22px; }
.payment-promo-dialog { position: relative; width: min(100%, 430px); padding: 42px 36px 36px; color: #f7f7f5; background: #202225; border: 1px solid #34363a; border-radius: 22px; box-shadow: 0 24px 60px rgb(0 0 0 / 48%); text-align: center; }
.payment-promo-dialog h3 { margin: 0; font-size: 30px; font-weight: 400; }
.payment-promo-dialog p { margin: 10px 0 20px; color: #a3a4a6; }
.payment-promo-dialog label { display: block; }
.payment-promo-apply { width: auto; min-width: 190px; padding-inline: 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 560px) { .payment-overlay { align-items: end; padding: 0; } .payment-dialog { width: 100%; max-height: 94dvh; padding: 34px 16px 22px; border-radius: 22px 22px 0 0; } .payment-packages { gap: 6px; } .payment-package { min-height: 72px; } .payment-summary, .payment-methods { padding-inline: 16px; } .payment-promo-dialog { padding-inline: 22px; } }