/* The public payment page. Its own stylesheet, not app.css, because Caddy
   proxies only creativemarketersbd.com/pay/* to this app: /static is not
   reachable from the main domain, so these two files are served by the
   router under /pay/assets/ instead. Same tokens as app.css so the two
   surfaces look related. */

:root {
  --bg:        #f5f7fb;
  --panel:     #ffffff;
  --ink:       #111827;
  --ink-soft:  #6b7280;
  --line:      #e5e7eb;
  --line-soft: #f3f4f6;
  --accent:    #4f46e5;
  --accent-h:  #4338ca;
  --accent-ink:#ffffff;
  --ok:        #059669;
  --warn:      #d97706;
  --err:       #dc2626;
  --ok-bg:     #ecfdf5;
  --warn-bg:   #fffbeb;
  --err-bg:    #fef2f2;
  --radius:    10px;
  --shadow:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0f172a;
    --panel:     #1e293b;
    --ink:       #f1f5f9;
    --ink-soft:  #94a3b8;
    --line:      #334155;
    --line-soft: #1e2d3d;
    --accent:    #818cf8;
    --accent-h:  #a5b4fc;
    --accent-ink:#0f172a;
    --ok:        #34d399;
    --warn:      #fbbf24;
    --err:       #f87171;
    --ok-bg:     #052e16;
    --warn-bg:   #451a03;
    --err-bg:    #450a0a;
    --shadow:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

.pay-wrap { max-width: 560px; margin: 0 auto; padding: 28px 16px 56px; }
/* The invoice is a page, not a form: at 560px the date block wrapped under
   the address instead of sitting beside it. */
.pay-wrap.wide { max-width: 860px; }

.pay-head { margin-bottom: 18px; }
.pay-head h1 { font-size: 21px; margin: 0 0 4px; font-weight: 700; }
.pay-head p { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

.pay-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 14px;
}
.pay-card h2 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }

.pay-amount { font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pay-for { color: var(--ink-soft); font-size: 13.5px; margin-top: 4px; }
.pay-state-row { margin-top: 10px; }

.pay-methods { display: grid; gap: 10px; }
.pay-method {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  background: var(--line-soft);
}
.pay-method-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pay-method-name { font-weight: 700; }
.pay-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  background: var(--panel); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.pay-number-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pay-number { font-family: var(--mono); font-size: 16px; font-weight: 700; word-break: break-all; }
.pay-meta { color: var(--ink-soft); font-size: 12.5px; margin-top: 6px; }
.pay-note { margin-top: 8px; font-size: 13px; white-space: pre-wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13.5px;
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--ink-soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-h); border-color: var(--accent-h); }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn.wide { width: 100%; }

label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
textarea { min-height: 70px; resize: vertical; }
.field { margin-bottom: 14px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .field-pair { grid-template-columns: 1fr; } }
.hint { color: var(--ink-soft); font-size: 12px; margin-top: 4px; }

.flash { padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 14px; font-size: 13.5px; }
.flash.ok   { background: var(--ok-bg);   color: var(--ok); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.flash.err  { background: var(--err-bg);  color: var(--err); }

.state {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.state.waiting   { background: var(--warn-bg); color: var(--warn); }
.state.confirmed { background: var(--ok-bg);   color: var(--ok); }
.state.rejected  { background: var(--err-bg);  color: var(--err); }

.trx-list { list-style: none; margin: 10px 0 0; padding: 0; }
.trx-list li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.trx-list li:last-child { border-bottom: 0; }
.trx-id { font-family: var(--mono); font-weight: 700; }
.trx-when { color: var(--ink-soft); font-size: 12.5px; }

.pay-foot { color: var(--ink-soft); font-size: 12.5px; margin-top: 18px; }
.pay-foot p { margin: 0 0 6px; }
.copied { color: var(--ok); font-size: 12px; }

/* The honeypot on the open page. Off screen rather than display:none, because
   some bots skip anything display:none and fill the rest. A person never sees
   it and never tabs into it. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------ */
/* The invoice, laid out like the ones the owner already sends. Printing */
/* is the PDF route, so the print rules are not decoration: they are the */
/* file the customer keeps.                                             */
/* ------------------------------------------------------------------ */
.inv-actions{display:flex;gap:.5rem;margin:0 0 1rem;flex-wrap:wrap}
.inv{padding:2rem}
.inv-strong{font-weight:700}
.inv-line{font-size:.88rem;line-height:1.55;opacity:.85}
.inv-label{font-size:.8rem;opacity:.55;margin-bottom:.15rem}

.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  flex-wrap:wrap}
.inv-logo{max-width:230px;max-height:64px;width:auto;height:auto}
.inv-logo-text{font-size:1.2rem;font-weight:800;letter-spacing:.01em}
.inv-title-block{text-align:right;margin-left:auto}
.inv-title{font-size:2.4rem;font-weight:300;letter-spacing:.02em;line-height:1}
.inv-number{font-size:.9rem;opacity:.7;margin-top:.35rem}

.inv-parties{display:flex;justify-content:space-between;gap:2rem;margin:1.75rem 0 1.25rem;
  flex-wrap:wrap}
.inv-from{min-width:250px;flex:1 1 250px}
.inv-billto{margin-top:1.25rem}
.inv-meta{min-width:270px;flex:0 1 300px}
.inv-meta-list{margin:0}
.inv-meta-list>div{display:flex;justify-content:flex-end;gap:1rem;margin-bottom:.3rem}
.inv-meta-list dt{font-size:.88rem;opacity:.55;white-space:nowrap}
.inv-meta-list dd{margin:0;font-size:.88rem;text-align:right;word-break:break-word}
.inv-due{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  margin-top:.9rem;padding:.7rem .9rem;background:rgba(0,0,0,.045);border-radius:4px}
.inv-due span{font-weight:700;font-size:.95rem}
.inv-due b{font-size:1.05rem}

.inv-table{width:100%;border-collapse:collapse;margin:1.25rem 0 0}
.inv-table thead th{background:#3b3b3b;color:#fff;font-weight:500;font-size:.88rem;
  padding:.7rem .8rem;text-align:left}
.inv-table thead th.num{text-align:right}
.inv-table td{padding:.85rem .8rem;border-bottom:1px solid rgba(0,0,0,.09);
  font-size:.92rem;vertical-align:top}
.inv-table td.num{text-align:right;white-space:nowrap}

.inv-totals{display:flex;justify-content:flex-end;margin-top:1.5rem}
.inv-totals dl{margin:0;min-width:290px}
.inv-totals dl>div{display:flex;justify-content:space-between;gap:1.5rem;padding:.32rem 0}
.inv-totals dt{font-size:.9rem;opacity:.6}
.inv-totals dd{margin:0;font-size:.9rem;text-align:right;white-space:nowrap}
.inv-totals .inv-total-row{border-top:1px solid rgba(0,0,0,.15);margin-top:.25rem;
  padding-top:.5rem}
.inv-totals .inv-total-row dt,.inv-totals .inv-total-row dd{font-weight:700;opacity:1;
  font-size:1rem}
.inv-totals .inv-due-row{border-top:2px solid rgba(0,0,0,.25);margin-top:.25rem;
  padding-top:.5rem}
.inv-totals .inv-due-row dt,.inv-totals .inv-due-row dd{font-weight:700;opacity:1}

.inv-note-block{margin-top:1.5rem}

@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .pay-wrap{max-width:none;margin:0;padding:0}
  .inv{box-shadow:none;border:none;padding:0}
  /* Browsers drop backgrounds when printing, so the two blocks that rely on one
     are given a border instead of disappearing. */
  .inv-table thead th{background:none;color:#000;border-bottom:2px solid #000}
  .inv-due{background:none;border:1px solid rgba(0,0,0,.35)}
}