/* Payment-specific overlay, loaded after customer-layout-20260913.css.
   Preserve translated content and the existing subscription dialog styles. */
#app .payment-wallet { min-inline-size: 0; font-size: .875rem; line-height: 1.6; }
#app .payment-overview {
  display: grid;
  grid-template-columns: minmax(0, 39fr) minmax(0, 34fr) minmax(0, 25fr);
  gap: 16px;
  margin-block-end: 16px;
}
#app .payment-card {
  min-inline-size: 0;
  min-block-size: 250px;
  padding: 24px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  color: #303030;
  overflow-wrap: anywhere;
  word-break: normal;
}
#app .payment-card h2, #app .payment-history__head h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
}
#app .payment-amount-input { display: flex; gap: 8px; min-inline-size: 0; }
#app .payment-amount-input .input { flex: 1 1 0; min-inline-size: 0; font-size: .875rem; }
#app .payment-currency {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 80px;
  min-block-size: 44px;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  background: #fff;
  font-size: .875rem;
  unicode-bidi: isolate;
}
:is(#app, #modal-root) .payment-hint {
  margin: 6px 0 0;
  color: #606060;
  font-size: .875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: normal;
}
#app .payment-payable { margin: 16px 0 0; font-size: .875rem; line-height: 1.6; }
:is(#app, #modal-root) .payment-error { color: #ad2636; font-size: .875rem; overflow-wrap: anywhere; }
#app .payment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 24px; }
#app .payment-actions > p { flex-basis: 100%; margin: 0; }
#app .payment-actions .btn { min-block-size: 44px; min-inline-size: 44px; max-inline-size: 100%; white-space: normal; }
#app .payment-channel { padding-inline: 18px; font-size: .875rem; }
#app .payment-card--balance { container-type: inline-size; }
#app .payment-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-block-size: 142px;
  min-inline-size: 0;
  gap: 8px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}
#app .payment-balance__main {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  font-size: 1.5rem;
  font-size: clamp(1rem, calc(100cqi / var(--payment-balance-digits)), 2.25rem);
  text-align: center;
  white-space: nowrap;
}
#app .payment-balance__precision {
  max-inline-size: 100%;
  overflow-x: auto;
  color: #606060;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
}
#app .payment-balance bdi { unicode-bidi: isolate; white-space: nowrap; }
#app .payment-card--reminders ol { margin: 0; padding-inline-start: 1.25rem; }
#app .payment-card--reminders li { padding-inline-start: .125rem; margin-block-end: 12px; font-size: .875rem; line-height: 1.6; }
#app .payment-history { margin-block-end: 16px; padding: 24px; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: none; }
#app .payment-history__head { margin: 0; padding: 0 0 12px; border: 0; }
#app .payment-history .data-table { min-inline-size: 680px; font-size: .875rem; }
#app .payment-history :is(th, td) { padding: 16px 10px; font-size: .875rem; line-height: 1.6; }
#app .payment-history th { background: #fafafa; font-weight: 600; }
:is(#app, #modal-root) .payment-order-number { overflow-wrap: anywhere; word-break: normal; }
#app .payment-manual-history { margin-block-start: 16px; }
#app .payment-manual-history summary { min-block-size: 44px; padding: 16px 24px; cursor: pointer; }
#modal-root .payment-checkout { font-size: .875rem; line-height: 1.6; text-align: start; }
#modal-root .payment-checkout > p { margin-block: 12px; overflow-wrap: anywhere; }
#modal-root .payment-qr {
  display: block;
  inline-size: 240px;
  block-size: auto;
  max-inline-size: 100%;
  margin: 16px auto;
  object-fit: contain;
  background: #fff;
}
#modal-root .payment-checkout [data-payment-error]:not(:empty) { padding: 12px; color: #ad2636; border: 1px solid #dfb3b8; border-radius: 6px; }
@media (max-width: 1000px) {
  #app .payment-overview { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  #app .payment-card--reminders { grid-column: 1 / -1; min-block-size: 0; }
}
@media (max-width: 620px) {
  #app .payment-overview { grid-template-columns: minmax(0, 1fr); }
  #app .payment-card { min-block-size: 0; padding: 20px; }
  #app .payment-amount-input .input { font-size: 1rem; }
  #app .payment-card--reminders { grid-column: auto; }
  #app .payment-balance { min-block-size: 110px; }
  #app .payment-history { padding: 16px; }
  #app .payment-history .data-table--stack { min-inline-size: 0; }
}