/* FARZI Studio - Add Balance (js/billing/add-balance.js). Same dark ink and champagne gold as the pricing page.
   Scoped to #addBalanceModal. */

#addBalanceModal .plans-card.ab-shell {
  width: min(980px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 0;
  background: #07080c;
  border: 1px solid rgba(217, 181, 107, .16) !important;
  border-radius: 26px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 181, 107, .25) transparent;
}
#addBalanceModal .plans-card.ab-shell > .close { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 5; }

#farziAddBalance {
  --ab-line: rgba(255, 255, 255, .08);
  --ab-line-strong: rgba(255, 255, 255, .16);
  --ab-panel: rgba(255, 255, 255, .028);
  --ab-text: #f5f3ee;
  --ab-muted: #9b9aa3;
  --ab-gold: #d9b56b;
  --ab-gold-2: #f0d08b;
  --ab-ok: #6fd3a0;
  --ab-bad: #f08a8a;
  --ab-warn: #f0b36b;
  --ab-info: #8fb6f0;
  color: var(--ab-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 40px clamp(16px, 4vw, 44px) 44px;
  background: radial-gradient(800px 360px at 50% -140px, rgba(217, 181, 107, .10), transparent 70%), #07080c;
}
#farziAddBalance * { box-sizing: border-box; }
#farziAddBalance h2 { font-family: Outfit, Inter, sans-serif; font-weight: 600; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.03em; line-height: 1.12; margin: 12px 0 8px; }
#farziAddBalance h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 14px; }
#farziAddBalance p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ab-muted); }

.ab-eyebrow { font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .28em; color: var(--ab-gold); text-transform: uppercase; }
.ab-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.ab-balance { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border: 1px solid var(--ab-line-strong); border-radius: 16px; background: var(--ab-panel); min-width: 170px; }
.ab-balance span { font-size: 11.5px; color: var(--ab-muted); letter-spacing: .08em; text-transform: uppercase; }
.ab-balance b { font: 600 24px/1 Outfit, Inter, sans-serif; color: var(--ab-gold-2); font-variant-numeric: tabular-nums; }

.ab-notice { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(217, 181, 107, .28); background: rgba(217, 181, 107, .07); font-size: 13px; line-height: 1.6; color: #d8d3c6; margin-bottom: 20px; }
.ab-notice b { color: var(--ab-text); }

.ab-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0 0 18px; }
.ab-steps li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--ab-line); font-size: 12px; color: var(--ab-muted); min-width: 0; }
.ab-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-steps li i { font-style: normal; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .08); color: var(--ab-text); }
.ab-steps li.is-active { border-color: rgba(217, 181, 107, .5); color: var(--ab-text); }
.ab-steps li.is-active i { background: linear-gradient(135deg, var(--ab-gold-2), var(--ab-gold)); color: #1a1408; }
.ab-steps li.is-done i { background: rgba(111, 211, 160, .2); color: var(--ab-ok); }

.ab-card { padding: 20px; border-radius: 18px; border: 1px solid var(--ab-line); background: var(--ab-panel); margin-bottom: 14px; }
.ab-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ab-two .ab-card { margin-bottom: 14px; }

.ab-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ab-method { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--ab-line-strong); background: rgba(255, 255, 255, .02); color: var(--ab-text); cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.ab-method b { font-size: 14.5px; font-weight: 600; }
.ab-method span { font-size: 12px; color: var(--ab-muted); }
.ab-method:hover { border-color: rgba(217, 181, 107, .4); }
.ab-method.is-selected { border-color: var(--ab-gold); background: rgba(217, 181, 107, .09); box-shadow: 0 0 0 1px var(--ab-gold) inset; }

.ab-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ab-preset { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ab-line-strong); background: transparent; color: var(--ab-text); font: 600 13px/1 Inter, sans-serif; cursor: pointer; font-variant-numeric: tabular-nums; }
.ab-preset.is-selected { border-color: var(--ab-gold); background: rgba(217, 181, 107, .12); color: var(--ab-gold-2); }
.ab-amount { display: flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 14px; border: 1px solid var(--ab-line-strong); background: rgba(0, 0, 0, .3); max-width: 260px; margin-bottom: 8px; }
.ab-amount span { font: 600 20px/1 Outfit, Inter, sans-serif; color: var(--ab-gold-2); }
.ab-amount em { font-style: normal; font-size: 12px; color: var(--ab-muted); letter-spacing: .1em; }
.ab-amount .ab-input { border: 0; background: transparent; padding: 10px 0; font: 600 20px/1 Outfit, Inter, sans-serif; }
.ab-amount .ab-input:focus { outline: none; }
.ab-amount:focus-within { border-color: var(--ab-gold); }

.ab-input { width: 100%; min-width: 0; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--ab-line-strong); background: rgba(0, 0, 0, .3); color: var(--ab-text); font: 500 14px/1.3 Inter, sans-serif; }
.ab-input:focus { outline: none; border-color: var(--ab-gold); }
.ab-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ab-field > span { font-size: 12px; color: var(--ab-muted); }
.ab-file { font-size: 12.5px; color: var(--ab-muted); max-width: 100%; }
.ab-file::file-selector-button { margin-right: 10px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--ab-line-strong); background: rgba(255, 255, 255, .05); color: var(--ab-text); font: 600 12.5px/1 Inter, sans-serif; cursor: pointer; }
.ab-proof-preview img { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; border: 1px solid var(--ab-line); margin: 0 0 10px; }

.ab-hint { display: block; font-size: 12px !important; line-height: 1.55; color: var(--ab-muted); margin-top: 8px !important; }
.ab-error { color: var(--ab-bad) !important; font-size: 12.5px !important; min-height: 0; margin: 8px 0 !important; }
.ab-error:empty { display: none; }

.ab-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 12px; border: 1px solid var(--ab-line-strong); background: rgba(255, 255, 255, .04); color: var(--ab-text); font: 600 13.5px/1 Inter, sans-serif; cursor: pointer; margin-top: 12px; }
.ab-btn:hover { border-color: rgba(217, 181, 107, .5); }
.ab-btn-primary { border: 0; background: linear-gradient(135deg, var(--ab-gold-2), var(--ab-gold)); color: #1a1408; box-shadow: 0 10px 26px rgba(217, 181, 107, .2); }
.ab-btn[disabled] { opacity: .55; cursor: wait; }
.ab-link { background: none; border: 0; padding: 6px 0; color: var(--ab-gold-2); font: 600 13px/1 Inter, sans-serif; cursor: pointer; }
.ab-link-quiet { color: var(--ab-muted); text-decoration: underline; font-weight: 500; }
.ab-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ab-toolbar .ab-btn { margin-top: 0; padding: 9px 14px; }

.ab-due { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(217, 181, 107, .3); background: rgba(217, 181, 107, .07); margin-bottom: 14px; }
.ab-due span { font-size: 12px; color: var(--ab-muted); width: 100%; }
.ab-due b { font: 600 26px/1 Outfit, Inter, sans-serif; color: var(--ab-gold-2); font-variant-numeric: tabular-nums; }
.ab-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 14px; background: #fff; margin-bottom: 14px; }
#farziAddBalance .ab-qr img { display: block; width: 240px; max-width: 100%; height: auto; image-rendering: pixelated; }
.ab-qr .ab-hint { color: #4a4a52 !important; margin-top: 4px !important; }

.ab-line { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ab-line); font-size: 13px; }
.ab-line:last-of-type { border-bottom: 0; }
.ab-line-name { color: var(--ab-muted); flex: none; }
.ab-line-value { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: right; }
.ab-line-value b { font-weight: 600; overflow-wrap: anywhere; }
.ab-copy { flex: none; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ab-line-strong); background: transparent; color: var(--ab-gold-2); font: 600 11px/1 Inter, sans-serif; cursor: pointer; }

.ab-chip { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; }
.ab-chip-wait { color: var(--ab-gold-2); background: rgba(217, 181, 107, .12); border-color: rgba(217, 181, 107, .3); }
.ab-chip-pending { color: var(--ab-info); background: rgba(143, 182, 240, .12); border-color: rgba(143, 182, 240, .3); }
.ab-chip-review { color: var(--ab-warn); background: rgba(240, 179, 107, .12); border-color: rgba(240, 179, 107, .32); }
.ab-chip-ok { color: var(--ab-ok); background: rgba(111, 211, 160, .12); border-color: rgba(111, 211, 160, .3); }
.ab-chip-bad { color: var(--ab-bad); background: rgba(240, 138, 138, .12); border-color: rgba(240, 138, 138, .3); }
.ab-chip-off { color: var(--ab-muted); background: rgba(255, 255, 255, .05); border-color: var(--ab-line); }

.ab-status-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ab-status > p { margin-bottom: 10px !important; color: #d8d3c6 !important; }
.ab-status-ok { border-color: rgba(111, 211, 160, .28); }
.ab-status-bad { border-color: rgba(240, 138, 138, .28); }
.ab-status-review { border-color: rgba(240, 179, 107, .28); }

.ab-lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 6px; }
.ab-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; margin-bottom: 6px; border-radius: 12px; border: 1px solid var(--ab-line); background: transparent; color: var(--ab-text); font: inherit; text-align: left; cursor: pointer; }
.ab-row:hover { border-color: rgba(217, 181, 107, .4); }
.ab-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ab-row-main b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ab-row-main span { font-size: 11.5px; color: var(--ab-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-row-action { font-size: 12px; color: var(--ab-gold-2); font-weight: 600; }

.ab-empty { padding: 34px 20px; border-radius: 18px; border: 1px dashed var(--ab-line-strong); text-align: center; margin-bottom: 14px; }
.ab-empty h3 { font-size: 17px !important; margin-bottom: 8px !important; }
.ab-receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.ab-receipt-head h3 { margin: 10px 0 0 !important; font-size: 18px !important; }

.ab-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-copy { position: relative; white-space: nowrap; }
.ab-copy[data-copy-state="ok"] { color: var(--ab-ok); border-color: rgba(111, 211, 160, .4); }
.ab-copy[data-copy-state="failed"] { color: var(--ab-bad); border-color: rgba(240, 138, 138, .4); white-space: normal; }
.ab-amount-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ab-amount-row .ab-amount { margin-bottom: 0; flex: 1 1 auto; }
.ab-step { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ab-line-strong); background: rgba(255, 255, 255, .04); color: var(--ab-text); font: 600 20px/1 Inter, sans-serif; cursor: pointer; }
.ab-step:hover:not([disabled]) { border-color: rgba(217, 181, 107, .5); }
.ab-step[disabled] { opacity: .4; cursor: default; }
.ab-slider { display: block; width: 100%; max-width: 420px; height: 28px; margin: 0 0 4px; accent-color: var(--ab-gold); cursor: pointer; }
.ab-step:focus-visible, .ab-slider:focus-visible, .ab-preset:focus-visible, .ab-method:focus-visible, .ab-btn:focus-visible, .ab-copy:focus-visible, .ab-save:focus-visible, .ab-row:focus-visible, .ab-link:focus-visible { outline: 2px solid var(--ab-gold-2); outline-offset: 2px; }
.ab-quote { margin: 12px 0 4px; padding: 6px 14px; border-radius: 14px; border: 1px solid var(--ab-line); background: rgba(0, 0, 0, .22); max-width: 520px; }
.ab-quote:empty { display: none; }
.ab-quote #abQuotePayable { color: var(--ab-gold-2); font-size: 16px; }
.ab-save { display: inline-flex; margin-top: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid #c9c9d1; color: #1a1408; background: #f3f1ea; font: 600 12.5px/1 Inter, sans-serif; text-decoration: none; }
#abPayments:focus, #abReceipts:focus { outline: none; border-color: rgba(217, 181, 107, .45); }

@media (max-width: 760px) {
  #addBalanceModal.modal { padding: 0; }
  .ab-amount-row .ab-amount { max-width: none; }
  .ab-slider { max-width: none; }
  .ab-copy, .ab-save { min-height: 36px; }
  #addBalanceModal .plans-card.ab-shell { max-height: 100vh; height: 100%; border-radius: 0; border: 0 !important; }
  #farziAddBalance { padding: 26px 14px 30px; }
  .ab-two, .ab-lists { grid-template-columns: minmax(0, 1fr); }
  .ab-steps { display: flex; gap: 6px; }
  .ab-steps li { flex: 0 0 auto; justify-content: center; padding: 8px 10px; }
  .ab-steps li span { display: none; }
  .ab-steps li.is-active { flex: 1 1 auto; justify-content: flex-start; }
  .ab-steps li.is-active span { display: inline; }
  .ab-balance { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .ab-btn-primary { width: 100%; }
  .ab-line { flex-wrap: wrap; }
}

@media print {
  body.ab-printing > *:not(#addBalanceModal) { display: none !important; }
  body.ab-printing #addBalanceModal { position: static; background: #fff; padding: 0; backdrop-filter: none; display: block; }
  body.ab-printing #addBalanceModal .ab-shell { box-shadow: none; border: 0 !important; background: #fff !important; max-height: none; overflow: visible; width: 100%; }
  body.ab-printing #farziAddBalance { background: #fff; color: #111; padding: 0; }
  body.ab-printing #farziAddBalance > *:not(#abMain), body.ab-printing .ab-toolbar, body.ab-printing .close { display: none !important; }
  body.ab-printing .ab-card { border: 1px solid #ccc; background: #fff; }
  body.ab-printing .ab-line-name, body.ab-printing .ab-hint, body.ab-printing #farziAddBalance p { color: #444 !important; }
  body.ab-printing .ab-line { border-bottom-color: #ddd; }
  body.ab-printing .ab-eyebrow { color: #7a5c1c; }
}