/* css/view-cuenta.css - slice S8, Cuenta y pagos (SPEC 3.5, 3.7, 16.9).
   Two parts: the cards of the Cuenta view, and the CONTENT of the two payment dialogs (the structure of every dialog is css/dialogs.css; the content of a dialog is
   styled by the slice that owns it). Tokens only (the QR tile is components.css's .qr), no !important, breakpoints at 761 and 1100 only.
   Adapted from docs/web-rework/final-proto/css/view-cuenta.css and dialogs.css. */

/* ===================================================================== Cuenta ===================================================================== */
.cuenta { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .cuenta { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .cuenta__wide { grid-column: 1 / -1; } }
/* before the first answer of the server the cards say nothing (no cached balance, no red "Sin activar") */
.cuenta[aria-busy="true"] .card { opacity: .55; }
.cuenta[aria-busy="true"] .btn { pointer-events: none; }
/* "Pantalla completa" and "Abrir en navegador" only work inside the Telegram Mini App (their handlers return without initData): on the web a button
   that does nothing is worse than none, so the whole "Telegram y navegador" section is Telegram-only (the baseline hid both under body.website-mode). */
body:not(.telegram-mode) #cuenta-web, body.website-mode #expandAppBtn, body.website-mode #openWebsiteBtn { display: none; }

.plan-until { display: grid; gap: 2px; padding: var(--sp-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan-until__date { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.plan-until__left { color: var(--muted); font-size: var(--fs-sm); }
.plan-never { padding: var(--sp-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); }

.money { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.money b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; max-width: 100%; overflow-wrap: anywhere; }
.money span { color: var(--muted); font-size: var(--fs-md); }
.why--warn .icon { color: var(--warn); }

.rows-ro { display: grid; }
.readonly { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; }
.readonly + .readonly { border-top: 1px solid var(--line); }
.readonly__k { font-size: var(--fs-sm); color: var(--muted); }
.readonly__v { font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.readonly__note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); display: flex; gap: 8px; align-items: center; }
.readonly__note .icon { color: var(--info); }
.readonly--copy .readonly__k, .readonly--copy .readonly__v { grid-column: 1; text-align: left; }
.readonly--copy .readonly__v { grid-row: 2; }
.readonly--copy > .btn { grid-column: 2; grid-row: 1 / span 2; }
.readonly--copy .readonly__note { grid-row: 3; }
#cuenta-web .btn, #cuenta-sesion .btn { justify-self: stretch; }
.cuenta .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cuenta .btn-row .btn { flex: 1 1 220px; }
#reloadWalletList .kv { padding: 12px 0; }
#reloadWalletList .kv__k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#reloadWalletList .kv__v { font-size: var(--fs-sm); }
#reloadWalletList .kv > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
#reloadWalletList .kv { grid-template-columns: minmax(0, 1fr); }

/* ============================================================ The payment dialogs (content) ============================================================ */
#payModal .dialog__body, #topupContactModal .dialog__body { gap: var(--sp-5); }
#payModal .dialog__panel, #topupContactModal .dialog__panel { min-width: 0; }
/* the two footer buttons share the row while they fit and stack when they do not (200% text on a phone): a button is never wider than the sheet */
#payModal .dialog__foot .btn, #topupContactModal .dialog__foot .btn { white-space: normal; }
#payModal .dialog__foot, #topupContactModal .dialog__foot { flex-wrap: wrap; }
@media (max-width: 760px) {
  #payModal .dialog__foot .btn, #topupContactModal .dialog__foot .btn { flex: 1 1 110px; min-width: 0; }
  #payModal .dialog__foot .btn--primary, #topupContactModal .dialog__foot .btn--primary { flex: 2 1 150px; }   /* the verb gets the room: "Comprobar pago" on one line at 360 px */
}

/* the three steps: where the customer is, never colour alone (a number, a word and, when done, a filled mark) */
.pay-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: var(--fs-sm); }
.pay-steps li { display: grid; gap: 4px; justify-items: center; align-content: start; text-align: center; padding: 8px 4px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); color: var(--muted); font-weight: 600; line-height: 1.25; }
.pay-steps li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); color: var(--ink-2); font-size: var(--fs-sm); }
.pay-steps li.is-now { color: var(--ink); border-color: var(--accent-line); background: var(--accent-soft); }
.pay-steps li.is-now b, .pay-steps li.is-done b { background: var(--accent); color: var(--accent-ink); }

/* the choices and the payment card: one column on a phone, side by side from 761 px so the QR and the exact amount are in the first screen */
.pay-layout { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) { .pay-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } }
.pay-fields { display: grid; gap: var(--sp-5); }
.pay-fields[hidden] { display: none; }
.pay-layout > * { min-width: 0; }

/* three plans (or two tiers) in a row while they fit; a column of them when the text is large (a box is never wider than the dialog) */
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); gap: 8px; }
.pick--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.pick label { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.pick__body { display: grid; gap: 2px; justify-items: center; align-content: center; text-align: center; min-height: 76px; padding: 10px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--s2); transition: border-color var(--t-fast), background var(--t-fast); }
.pick__body b { font-size: var(--fs-md); }
.pick__price { font-size: var(--fs-md); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pick input:checked + .pick__body { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--s2)); }
input:checked + .pick__body .pick__price { color: var(--accent); }
.pick input:focus-visible + .pick__body { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick label:hover .pick__body { border-color: var(--line-hover); }
.pick--2 .pick__body { min-height: 60px; }
.pick--2 .pick__price { font-size: var(--fs-sm); }

.pay { display: grid; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line-strong); min-width: 0; transition: opacity var(--t-base); }
.pay[hidden] { display: none; }
.pay__amount, .pay__line { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.pay__amount-val { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.15; }
.pay__eur { color: var(--muted); font-size: var(--fs-sm); }
.pay__addr { justify-self: stretch; font-size: var(--fs-sm); overflow-wrap: anywhere; word-break: break-all; padding: 10px 12px; border-radius: 10px; background: var(--bg-deep); border: 1px solid var(--line); }
.pay__qr { display: grid; justify-items: center; }
/* on a phone the exact amount and the address come BEFORE the QR (a one-phone Mini App owner cannot scan his own screen): the DOM already has that order;
   from 761 px the QR goes first, where the eye lands */
@media (min-width: 761px) {
  .pay-layout .pay__qr { order: -1; }
  .pay--row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "qr amount" "qr line"; column-gap: var(--sp-5); align-items: start; }
  .pay--row .pay__qr { grid-area: qr; order: 0; align-self: start; }
  .pay--row .pay__amount { grid-area: amount; }
  .pay--row .pay__line { grid-area: line; }
}
/* a tap that asks for a new invoice: the card dims and its copy buttons wait, the submit is aria-disabled (js/billing.js) */
#payModal.is-refreshing #payCard, #topupContactModal .pay.is-quoting { opacity: .45; pointer-events: none; }
.pay.is-quoting .pay__qr { visibility: hidden; }

.pay__status { display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); padding: 10px 12px; border-radius: var(--r-md); background: var(--s2); }
.pay__status:empty { display: none; }
.pay__status[data-tone="busy"]::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--accent); animation: spin .9s linear infinite; flex: none; }
.pay__status[data-tone="error"] { color: var(--danger); background: var(--danger-soft); }
.pay__status[data-tone="warn"] { color: var(--warn); background: var(--warn-soft); }

/* the amount step of the top-up */
.amount-field { display: grid; gap: 10px; }
.topup-unit { align-self: center; }
.quick-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.amount-chip { min-height: var(--target); padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--s2); color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.amount-chip:hover { border-color: var(--line-hover); }
.amount-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#reloadAmountStatus:empty { display: none; }
#reloadAmountStatus[data-tone="error"] { color: var(--danger); }
#reloadAmountStatus[data-tone="busy"] { color: var(--info); }
#reloadAmountStatus[data-tone="warn"] { color: var(--ink); font-weight: 600; }
.topup-manual { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line-strong); }
.topup-manual[hidden] { display: none; }
.topup-manual__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.topup-manual__row code { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-sm); }
.topup-manual .field__label { flex: 1 0 100%; }
#topupContactStatus:empty { display: none; }
#topupContactAmount { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* the result view after a payment: what changed (the new expiry, the new balance) instead of closing by itself */
.done-panel { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px 0 12px; }
.done-panel[hidden] { display: none; }
.done-panel__mark { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.done-panel__mark .icon { stroke-width: 3; }
.done-panel h3 { font-size: var(--fs-xl); }
.done-panel__big { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
#payError .alert__actions { margin-top: 8px; }
#payError p, #payTxidError p { margin: 0; }
#payTxidError { margin-top: var(--sp-2); }
#payQr { padding: 14px; background: var(--qr-bg); border-radius: var(--r-md); }