/* The tip jar (views/partials/tipJar.ejs): Patreon, BTCPay, then small tips and zaps.
   Themed with custom properties; the defaults are the Bitcoin Seinfeld look (cream cards, orange offsets).
   A page re-themes it by setting --tj-* on .tips (see support.ejs). */
.tips {
  --tj-card: #f6ecd2;        /* card background */
  --tj-ink: #2a1a12;         /* text on cards */
  --tj-muted: #6a5340;       /* small print on cards */
  --tj-link: #9a3b00;
  --tj-field: #fff8e6;       /* inputs, chips, ghost buttons */
  --tj-field-hover: #ffedc2;
  --tj-line: #000;           /* card and control borders */
  --tj-accent: #ff9a1f;      /* main buttons, card shadow */
  --tj-accent-hover: #ffb04a;
  --tj-accent-ink: #1b0d02;  /* text on accent buttons */
  --tj-patreon: #ff424d;     /* Patreon's own colour */
  --tj-hot: #ff4f6a;
  --tj-select: #f2b632;      /* chosen amount */
  --tj-select-ink: #3a2808;
  --tj-alert: #a02b14;
  --tj-dash: #b99b6b;
  --tj-heading: #f6ecd2;     /* heading text on the page background */
  --tj-sub: #c4b08f;         /* intro and fine print on the page background */
  --tj-display: inherit;     /* heading font */
}

.tips { padding: 20px 0 10px; text-align: center; scroll-margin-top: 16px; }
.tips .eyebrow { margin: 0 0 4px; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tj-accent); font-weight: 700; }
.tips h2 { margin: 4px 0 8px; font-family: var(--tj-display); font-weight: 400; font-size: clamp(1.6rem, 4.4vw, 2.6rem); text-transform: uppercase; color: var(--tj-heading); line-height: 1.15; }
.tips h2 em { font-style: normal; color: var(--tj-accent); }
.tips .sub { max-width: 560px; margin: 0 auto 26px; color: var(--tj-sub); }

.tj-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; text-align: left; align-items: start; }
.tj-wide, .tj-tier { grid-column: 1 / -1; }
.tj-card { min-width: 0; background: var(--tj-card); color: var(--tj-ink); border: 3px solid var(--tj-line); border-radius: 6px; box-shadow: 5px 5px 0 var(--tj-accent); padding: 20px 20px 22px; }
.tj-card h3 { margin: 0 0 10px; font-family: var(--tj-display); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; }
.tj-small { margin: 0 0 14px; font-size: 0.92rem; color: var(--tj-muted); }
.tj-small a { color: var(--tj-link); font-weight: 700; }
.tj-form { margin: 0; }

/* the two big asks: Patreon first, then a bigger gift in bitcoin */
.tj-feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 22px 24px; }
.tj-feature h3, .tj-feature .tj-small { grid-column: 1; margin-bottom: 0; }
.tj-feature .tj-small { margin-top: 4px; font-size: 1rem; }
.tj-feature .tj-btn, .tj-feature .tj-form { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.tj-feature .tj-btn { font-size: 1rem; padding: 14px 24px; }
.tj-badge { display: inline-block; margin: 0 0 8px; padding: 3px 9px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--tj-patreon); color: #fff; border: 2px solid var(--tj-line); border-radius: 4px; }
.tj-patreon { box-shadow: 7px 7px 0 var(--tj-patreon); }
.tj-btn.patreon { background: var(--tj-patreon); color: #fff; }
.tj-btn.patreon:hover { background: #ff6770; }
.tj-feature .tj-badge { grid-column: 1 / -1; justify-self: start; }
.tj-patreon .tj-btn { grid-row: 2 / span 2; } /* the badge takes row 1 */

/* the bitcoin address card: text on the left, QR on the right */
.tj-onchain { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px 24px; align-items: center; padding: 22px 24px; scroll-margin-top: 16px; }
.tj-onchain h3 { margin-bottom: 4px; }
.tj-onchain .tj-small { margin-bottom: 10px; }
.tj-onchain .tj-small:last-child { margin-bottom: 0; }
.tj-qr-onchain { margin: 0; max-width: 170px; }
/* the Lightning address under the invoice box */
.tj-lnaddr { margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--tj-dash); }
.tj-lnaddr > span { display: block; margin-bottom: 8px; font-size: 0.85rem; color: var(--tj-muted); }
.tj-lnaddr .tj-copyrow { margin-bottom: 0; }

/* sub-heading before the small tips */
.tj-tier { margin: 14px 0 0; text-align: center; }
.tj-tier h3 { margin: 0; font-family: var(--tj-display); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; color: var(--tj-heading); }
.tj-tier p { margin: 4px 0 0; font-size: 0.92rem; color: var(--tj-sub); }

/* amounts */
.tj-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tj-chip { font: inherit; color: var(--tj-ink); background: var(--tj-field); border: 2px solid var(--tj-line); border-radius: 6px; padding: 9px 6px; cursor: pointer; text-align: center; line-height: 1.2; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.tj-chip b { font-size: 1.1rem; font-weight: 800; }
.tj-chip span { font-size: 0.72rem; color: var(--tj-muted); }
.tj-chip:hover { background: var(--tj-field-hover); }
.tj-chip.is-on { background: var(--tj-select); color: var(--tj-select-ink); box-shadow: 3px 3px 0 var(--tj-line); }
.tj-chip.is-on span { color: var(--tj-select-ink); }
.tj-custom { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 0.85rem; color: var(--tj-muted); }
.tj-custom input { flex: 1; min-width: 0; font: inherit; color: var(--tj-ink); background: var(--tj-field); border: 2px solid var(--tj-line); border-radius: 6px; padding: 8px 10px; }

/* buttons */
.tj-btn { display: inline-block; font: inherit; font-size: 0.85rem; font-weight: 800; color: var(--tj-accent-ink); background: var(--tj-accent); border: 2px solid var(--tj-line); border-radius: 6px; padding: 10px 16px; cursor: pointer; text-decoration: none; text-align: center; box-shadow: 3px 3px 0 var(--tj-line); }
.tj-btn:hover { background: var(--tj-accent-hover); }
.tj-btn:disabled { opacity: 0.55; cursor: wait; }
.tj-btn.ghost { background: var(--tj-field); color: var(--tj-ink); }
.tj-btn.ghost:hover { background: var(--tj-field-hover); }
#tj-get { width: 100%; }
.tj-msg { min-height: 1.3em; margin: 10px 0 0; font-size: 0.88rem; color: var(--tj-alert); font-weight: 700; }

/* invoice */
.tj-invoice { margin-top: 16px; padding-top: 16px; border-top: 2px dashed var(--tj-dash); }
.tj-qr { background: #fff; border: 2px solid #000; padding: 8px; max-width: 250px; margin: 0 auto 14px; line-height: 0; }
.tj-qr svg { width: 100%; height: auto; display: block; }
.tj-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-actions .tj-btn { flex: 1 1 auto; }
.tj-confirms { margin: 14px 0 0; font-size: 0.92rem; color: var(--tj-muted); }
.tj-confirms b { color: var(--tj-alert); }
.tj-copyrow { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.tj-copyrow code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; background: var(--tj-field); border: 2px solid var(--tj-line); border-radius: 6px; padding: 9px 10px; overflow-wrap: anywhere; color: var(--tj-ink); }
.tj-copyrow .tj-btn { flex: none; padding: 9px 12px; }
.tj-fine { max-width: 560px; margin: 22px auto 0; font-size: 0.82rem; color: var(--tj-sub); font-style: italic; }

@media (max-width: 760px) {
  .tj-cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .tj-feature { grid-template-columns: 1fr; }
  .tj-onchain { grid-template-columns: 1fr; }
  .tj-qr-onchain { margin: 6px auto 0; }
  .tj-feature .tj-btn, .tj-feature .tj-form, .tj-patreon .tj-btn { grid-column: 1; grid-row: auto; margin-top: 12px; justify-self: start; }
}