/* Shared wallet checkout: amount and payment choices beside a compact receipt. */
#recharge-dialog {
  width: min(800px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid #e8edf2;
  border-radius: 24px;
  background: #fff;
  color: #233145;
  box-shadow: 0 28px 100px -24px #182f4d59;
  overflow: hidden;
}
#recharge-dialog::backdrop { background: #1c2a3d55; backdrop-filter: blur(6px); }
#recharge-dialog .billing-recharge-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: calc(100dvh - 42px);
  padding: 0;
  margin: 0;
}
#recharge-dialog .recharge-heading { display: flex; align-items: center; gap: 14px; flex: none; margin: 0; padding: 26px 28px 22px; border: 0; }
#recharge-dialog .recharge-heading-icon { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 15px; background: #edf4fb; color: #2c6090; }
#recharge-dialog .recharge-heading-icon svg { width: 23px; height: 23px; }
#recharge-dialog .recharge-heading h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: #1e2c3e; }
#recharge-dialog .recharge-heading p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #768292; }
#recharge-dialog .recharge-heading > button { flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto; padding: 6px; border: 0; border-radius: 50%; background: #f3f5f7; color: #728092; cursor: pointer; }
#recharge-dialog .recharge-heading > button:hover { background: #e8edf3; color: #243c57; }
#recharge-dialog .recharge-content { min-height: 0; padding: 4px 28px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#recharge-dialog #recharge-checkout-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 24px; margin: 0; }
#recharge-dialog .recharge-entry { min-width: 0; }
#recharge-dialog .recharge-section-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0; color: #34465a; font-size: 12px; font-weight: 650; }
#recharge-dialog .recharge-step { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 7px; background: #f2f5f8; color: #8090a2; font: 500 10px 'Roboto Mono', monospace; }
#recharge-dialog .recharge-amount-control { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid #dce3ec; border-radius: 14px; background: #fff; transition: border-color .16s, box-shadow .16s; }
#recharge-dialog .recharge-amount-control:focus-within { border-color: #5786b1; box-shadow: 0 0 0 3px #3377b313; }
#recharge-dialog .recharge-amount-control:has([aria-invalid="true"]) { border-color: #d38e84; }
#recharge-dialog .recharge-amount-control > span:first-child { color: #7e8b9a; font: 400 24px 'Roboto Mono', monospace; }
#recharge-dialog #recharge-amount { min-width: 0; width: 100%; min-height: 38px; height: auto; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: #243d57; font: 500 30px/1.25 'Roboto Mono', monospace; appearance: textfield; -moz-appearance: textfield; }
#recharge-dialog #recharge-amount::-webkit-inner-spin-button,
#recharge-dialog #recharge-amount::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
#recharge-dialog #recharge-currency { flex: none; padding: 4px 7px; border-radius: 5px; background: #f4f6f8; color: #7b8796; font-size: 10px; font-weight: 600; letter-spacing: .4px; }
#recharge-dialog .recharge-presets { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; margin-top: 10px; }
#recharge-dialog .recharge-presets button { min-width: 0; min-height: 36px; padding: 4px; border: 1px solid #e5eaf0; border-radius: 8px; background: #fff; color: #5c6a7a; font: 500 11px 'Roboto Mono', monospace; cursor: pointer; transition: background .16s, border-color .16s; }
#recharge-dialog .recharge-presets button:hover:not(:disabled) { background: #f5f8fb; border-color: #a8bed2; }
#recharge-dialog .recharge-presets button[aria-pressed="true"] { border-color: #7da4c9; background: #edf4fb; color: #255d90; }
#recharge-dialog .recharge-amount-help { min-height: 18px; margin: 8px 0 22px; color: #7d8996; font-size: 10px; line-height: 1.6; }
#recharge-dialog .recharge-amount-help.error { color: #b5493a; }
#recharge-dialog .recharge-method-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#recharge-dialog .recharge-method-option { display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 9px; min-height: 76px; padding: 12px; border: 1px solid #e1e7ee; border-radius: 12px; background: #fff; box-shadow: none; transition: border-color .16s, background .16s; }
#recharge-dialog .recharge-method-option:hover { border-color: #9cb7cf; background: #fafcfe; }
#recharge-dialog .recharge-method-option:has(input:checked) { border-color: #6b95be; background: #f3f8fd; box-shadow: inset 0 0 0 1px #6b95be; }
#recharge-dialog .recharge-method-option input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; }
#recharge-dialog .recharge-method-option:has(input:focus-visible) { outline: 3px solid #91b6d9; outline-offset: 3px; }
#recharge-dialog .recharge-method-option .payment-method-icon { width: 25px; height: 25px; }
#recharge-dialog .recharge-method-option > span { gap: 5px; padding-right: 5px; }
#recharge-dialog .recharge-method-option strong { overflow: visible; font-size: 12px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; color: #2a3f55; }
#recharge-dialog .recharge-method-option small { color: #7c8897; font-size: 10px; line-height: 1.5; }
#recharge-dialog .recharge-method-option > svg { position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; }
#recharge-dialog .recharge-method-option:has(input:checked) > svg { color: #3c729f; }
#recharge-dialog .recharge-method-option:has(input:disabled) { opacity: .6; cursor: wait; }
#recharge-dialog .recharge-method-empty { padding: 24px 14px; border: 1px dashed #dce3eb; border-radius: 12px; background: #fafbfc; color: #7a8797; line-height: 1.7; }
#recharge-dialog .recharge-summary-card { min-width: 0; padding: 20px; border: 1px solid #edf0f4; border-radius: 16px; background: #f8fafc; }
#recharge-dialog .recharge-summary-card h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 22px; color: #47596d; font-size: 12px; font-weight: 600; }
#recharge-dialog .recharge-summary-card h3 svg { width: 15px; height: 15px; color: #8799ab; }
#recharge-dialog .recharge-payment-summary { display: block; padding: 0; border: 0; background: transparent; }
#recharge-dialog .recharge-payment-summary > strong { display: block; margin-top: 10px; }
#recharge-dialog .recharge-payment-summary > small { display: block; margin-top: 10px; }
#recharge-dialog .recharge-cost-lines { display: grid; gap: 17px; margin: 0; }
#recharge-dialog .recharge-cost-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 1.6; }
#recharge-dialog .recharge-cost-lines dt { color: #7a8796; }
#recharge-dialog .recharge-cost-lines dd { margin: 0; text-align: right; overflow-wrap: anywhere; color: #3c4f65; font-weight: 500; }
#recharge-dialog .recharge-cost-lines dd.recharge-no-fee { color: #24846c; }
#recharge-dialog .recharge-pay-total { margin-top: 22px; padding-top: 20px; border-top: 1px dashed #d7dfe8; }
#recharge-dialog .recharge-pay-total > span { display: block; color: #52677d; font-size: 11px; text-transform: none; }
#recharge-dialog .recharge-pay-total strong { display: inline-block; max-width: 100%; margin-top: 8px; overflow-wrap: anywhere; color: #254d73; font: 500 30px/1.3 'Roboto Mono', monospace; letter-spacing: -1px; }
#recharge-dialog .recharge-pay-total small { display: block; margin-top: 4px; color: #8592a0; font-size: 10px; }
#recharge-dialog .recharge-summary-note { margin: 18px 0 0; color: #8a96a3; font-size: 10px; line-height: 1.8; }
#recharge-dialog .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; margin: 0; padding: 18px 28px; border-top: 1px solid #edf0f4; background: #fff; }
#recharge-dialog .dialog-actions button { min-height: 44px; margin: 0; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
#recharge-dialog .dialog-actions .secondary-button { padding: 10px 18px; border: 1px solid #e5eaf0; background: #fff; color: #748294; box-shadow: none; }
#recharge-dialog .dialog-actions .primary-button { justify-content: center; gap: 14px; min-width: 240px; padding: 10px 22px; border: 0; background: #2b5e8b; color: #fff; box-shadow: 0 4px 10px #204d7820; }
#recharge-dialog .dialog-actions .primary-button:hover:not(:disabled) { background: #234f76; }
#recharge-dialog .dialog-actions .primary-button[aria-busy="true"] svg { animation: recharge-pulse 1s ease-in-out infinite alternate; }
#recharge-dialog button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
#recharge-dialog button:focus-visible { outline: 3px solid #91b6d9; outline-offset: 3px; }
#recharge-dialog .recharge-status { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #f4f7fa; color: #54718c; line-height: 1.7; overflow-wrap: anywhere; }
#recharge-dialog .recharge-status:empty { display: none; }
#recharge-dialog .recharge-status.error { background: #fff3f1; color: #a3483a; }
#recharge-dialog .recharge-status.success { background: #ecf8f2; color: #237557; }
#recharge-dialog .recharge-qr-panel { gap: 14px; margin: 12px 0; }
#recharge-dialog .recharge-qr-panel img { width: min(240px,68vw); padding: 10px; border: 1px solid #e4eaf0; border-radius: 16px; box-shadow: 0 5px 20px #243c5710; }
#recharge-dialog .recharge-qr-panel strong { color: #2d465e; font-size: 18px; }
#recharge-dialog .recharge-qr-panel span { line-height: 1.8; }
#recharge-dialog [hidden] { display: none !important; }
@keyframes recharge-pulse { to { opacity: .3; } }
@media (max-width: 640px) {
  #recharge-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 20px; }
  #recharge-dialog .billing-recharge-dialog { max-height: calc(100dvh - 22px); }
  #recharge-dialog .recharge-heading { padding: 20px 18px 18px; gap: 10px; }
  #recharge-dialog .recharge-heading-icon { flex-basis: 38px; height: 38px; border-radius: 12px; }
  #recharge-dialog .recharge-heading h2 { font-size: 19px; }
  #recharge-dialog .recharge-heading p { max-width: 240px; font-size: 11px; }
  #recharge-dialog .recharge-content { padding: 0 18px 18px; }
  #recharge-dialog #recharge-checkout-fields { grid-template-columns: minmax(0,1fr); gap: 20px; }
  #recharge-dialog #recharge-amount { font-size: 28px !important; }
  #recharge-dialog .recharge-amount-help { margin-bottom: 18px; }
  #recharge-dialog .recharge-summary-card { padding: 16px; }
  #recharge-dialog .recharge-summary-card h3 { margin-bottom: 16px; }
  #recharge-dialog .recharge-cost-lines { gap: 10px; }
  #recharge-dialog .recharge-pay-total { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; margin-top: 14px; padding-top: 14px; }
  #recharge-dialog .recharge-pay-total strong { margin: 0; font-size: 25px; }
  #recharge-dialog .recharge-pay-total small { grid-column: 2; margin: 0; text-align: right; }
  #recharge-dialog .recharge-summary-note { margin-top: 10px; }
  #recharge-dialog .dialog-actions { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  #recharge-dialog .dialog-actions .primary-button { min-width: 0; flex: 1; }
}
@media (max-width: 820px) {
  #recharge-dialog.mobile-editor-keyboard { max-height: calc(var(--mobile-editor-viewport-height,100dvh) - 16px); overflow-y: auto; }
  #recharge-dialog.mobile-editor-keyboard .billing-recharge-dialog { display: block; max-height: none; overflow: visible; }
  #recharge-dialog.mobile-editor-keyboard .recharge-content { overflow: visible; }
  #recharge-dialog.mobile-editor-keyboard .dialog-actions { position: sticky; bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #recharge-dialog *, #recharge-dialog *::before { animation: none !important; transition: none !important; }
}
#recharge-dialog { border-color: #e5e7eb; border-radius: 16px; color: #171717; box-shadow: 0 24px 70px -20px rgba(15,23,42,.3); }
#recharge-dialog::backdrop { background: rgba(15,23,42,.28); backdrop-filter: blur(4px); }
#recharge-dialog .recharge-heading { padding: 22px 24px 18px; border-bottom: 1px solid #ededed; }
#recharge-dialog .recharge-heading-icon { flex-basis: 40px; height: 40px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; color: #525252; }
#recharge-dialog .recharge-heading-icon svg { width: 20px; height: 20px; stroke-width: 1.7; }
#recharge-dialog .recharge-heading h2 { color: #171717; font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
#recharge-dialog .recharge-heading p { color: #737373; }
#recharge-dialog .recharge-heading > button { border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #737373; }
#recharge-dialog .recharge-heading > button:hover { background: #f5f5f5; color: #171717; }
#recharge-dialog .recharge-content { padding: 20px 24px 24px; }
#recharge-dialog .recharge-section-label { color: #525252; }
#recharge-dialog .recharge-step { border: 1px solid #e5e7eb; background: #fafafa; color: #737373; }
#recharge-dialog .recharge-amount-control { border-color: #dfe3e8; border-radius: 10px; }
#recharge-dialog .recharge-amount-control:focus-within { border-color: #adb5e5; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
#recharge-dialog #recharge-amount { color: #171717; }
#recharge-dialog #recharge-currency { background: #f0f0f0; color: #737373; }
#recharge-dialog .recharge-presets button { border-color: #e5e7eb; border-radius: 8px; color: #525252; }
#recharge-dialog .recharge-presets button:hover:not(:disabled) { border-color: #d4d4d4; background: #f5f5f5; }
#recharge-dialog .recharge-presets button[aria-pressed="true"] { border-color: rgba(173,181,229,.85); background: rgba(238,240,255,.72); color: #4d5bc0; }
#recharge-dialog .recharge-method-option { border-color: #e5e7eb; border-radius: 10px; }
#recharge-dialog .recharge-method-option:hover { border-color: #d4d4d4; background: #fafafa; }
#recharge-dialog .recharge-method-option:has(input:checked) { border-color: #adb5e5; background: rgba(238,240,255,.72); box-shadow: inset 0 0 0 1px #adb5e5; }
#recharge-dialog .recharge-method-option:has(input:focus-visible),
#recharge-dialog button:focus-visible { outline: 2px solid #5968ce; outline-offset: 3px; }
#recharge-dialog .recharge-method-option strong,
#recharge-dialog .recharge-cost-lines dd { color: #404040; }
#recharge-dialog .recharge-method-option:has(input:checked) > svg { color: #171717; }
#recharge-dialog .recharge-summary-card { border-color: #e5e7eb; border-radius: 12px; background: #fafafa; }
#recharge-dialog .recharge-summary-card h3 { color: #525252; }
#recharge-dialog .recharge-pay-total > span,
#recharge-dialog .recharge-cost-lines dt { color: #737373; }
#recharge-dialog .recharge-pay-total strong { color: #171717; }
#recharge-dialog .dialog-actions { padding: 16px 24px; border-top-color: #ededed; }
#recharge-dialog .dialog-actions button { border-radius: 9px; }
#recharge-dialog .dialog-actions .secondary-button { border-color: #e5e7eb; color: #525252; }
#recharge-dialog .dialog-actions .primary-button { border: 1px solid rgba(89,104,206,.92); background: rgba(89,104,206,.92); box-shadow: none; }
#recharge-dialog .dialog-actions .primary-button:hover:not(:disabled) { border-color: #4d5bc0; background: #4d5bc0; }
#recharge-dialog .recharge-qr-panel img { border-color: #e5e7eb; border-radius: 12px; box-shadow: none; }
@media (max-width:640px) {
  #recharge-dialog { border-radius: 14px; }
  #recharge-dialog .recharge-heading { padding: 18px; }
  #recharge-dialog .recharge-content { padding: 16px 18px 18px; }
  #recharge-dialog .dialog-actions { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
}