/* ── Sections ──────────────────────────────────────────────── */
.partner-section       { margin-bottom: 36px; }
.partner-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 14px;
}

/* ── Page header ───────────────────────────────────────────── */
.partner-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.partner-header-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Which rail this partner is paid on. The INR and USD flows differ in more than a
   currency symbol, so the page says which one you are in rather than making you infer it. */
.partner-ccy-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--bg-hover); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.partner-ccy-chip i { font-size: 14px; color: var(--text-muted); }

/* ── Working area (enrolled state) ─────────────────────────────
   Left column grows the earnings, right column collects them. Equal width because
   both hold actions — the old 1.45fr/1fr split gave the wide side to read-only
   history and squeezed every button the partner actually presses into the rail. */
.partner-work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 36px;
}
.partner-work-col { min-width: 0; }
@media (max-width: 1000px) {
  .partner-work { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Money strip ───────────────────────────────────────────────
   Available balance is the one actionable number on the page and is sized like it;
   the lifetime totals sit beside it as context rather than as equal-weight peers. */
.partner-money {
  display: grid; grid-template-columns: minmax(240px, 0.9fr) 2fr;
  gap: 20px; align-items: stretch;
}
.pm-primary {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 24px;
}
.pm-primary.is-ready { border-color: rgba(104, 211, 145, 0.4); }
[data-theme="light"] .pm-primary.is-ready { border-color: rgba(21, 128, 61, 0.35); }

.pm-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted); margin-bottom: 8px;
}
.pm-value {
  font-size: 40px; font-weight: 900; line-height: 1.05; color: #68d391;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
[data-theme="light"] .pm-value { color: #15803D; }
.pm-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted); margin-top: 10px; line-height: 1.5;
}
.pm-note.is-ready { color: #68d391; }
[data-theme="light"] .pm-note.is-ready { color: #15803D; }
.pm-note i { font-size: 14px; flex-shrink: 0; }

.pm-progress {
  height: 5px; margin-top: 10px; border-radius: 99px;
  background: var(--bg-hover); overflow: hidden;
}
.pm-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #a855f7);
  transition: width var(--t-med, .25s) ease;
}

.pm-secondary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px;
}
.pm-stat {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 18px;
}
.pm-stat.is-pending { border-color: rgba(246, 173, 85, 0.35); }
[data-theme="light"] .pm-stat.is-pending { border-color: rgba(180, 83, 9, 0.3); }
.pm-stat-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 6px;
}
.pm-stat-label i { font-size: 13px; }
.pm-stat-value {
  font-size: 22px; font-weight: 800; color: var(--text-primary);
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.pm-stat-value.purple { color: var(--accent); }
.pm-stat-value.warn   { color: #f6ad55; }
[data-theme="light"] .pm-stat-value.warn { color: #B45309; }
.pm-stat-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }

@media (max-width: 900px) {
  .partner-money { grid-template-columns: 1fr; }
  .pm-value { font-size: 34px; }
}

/* ── Referral funnel ───────────────────────────────────────────
   Signed up → Purchased → Active is a funnel, so it reads as one: three linked steps
   with the drop-off rate on the connector, not three flat cards of equal weight. */
.partner-funnel-card { padding: 20px 22px; }
.partner-funnel {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px; align-items: center;
}
.pf-step { text-align: center; min-width: 0; }
.pf-value {
  font-size: 26px; font-weight: 900; line-height: 1.1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.pf-value.purple { color: var(--accent); }
.pf-value.green  { color: #68d391; }
[data-theme="light"] .pf-value.green { color: #15803D; }
.pf-label {
  font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-top: 4px;
}
.pf-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.pf-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-muted); padding: 0 2px;
}
.pf-arrow i { font-size: 15px; opacity: 0.5; }
.pf-rate {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.partner-funnel-foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
}

/* Stacked, the funnel still has to read as a flow — so the connector turns to point
   down and centres under the step above it rather than hugging the left edge. */
@media (max-width: 420px) {
  .partner-funnel { grid-template-columns: 1fr; gap: 10px; }
  .pf-arrow { flex-direction: row; justify-content: center; gap: 6px; }
  .pf-arrow i { transform: rotate(90deg); }
}


/* ── Hero card ─────────────────────────────────────────────── */
.partner-hero {
  background: var(--bg-card);
  background-image: linear-gradient(135deg, rgba(236,72,153,0.09) 0%, rgba(6,182,212,0.04) 100%);
  border: 1px solid rgba(236,72,153,0.3); border-radius: 16px; padding: 32px 28px;
}
.partner-hero-title { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.partner-hero-sub   { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }

/* ── Referral link box ─────────────────────────────────────── */
.partner-link-box {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 24px;
}
.partner-link-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.partner-link-input {
  flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 13px; font-family: monospace; color: var(--text-primary);
  outline: none; cursor: text; user-select: all;
}
.partner-code-badge {
  font-size: 13px; font-weight: 700; font-family: monospace;
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  color: var(--accent); padding: 8px 14px; border-radius: var(--radius-sm);
  white-space: nowrap;
}
/* ── Copy-to-clipboard field ────────────────────────────────────
   The whole row is the button: the value is shown in full (so the
   partner can read the code / link before sharing it) and a "Copy"
   affordance sits on the right so it never looks like plain text. */
.partner-copy-field {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 10px 10px 14px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; transition: border-color var(--t-fast), background var(--t-fast);
}
.partner-copy-field:hover { border-color: var(--accent); background: var(--accent-bg); }
.partner-copy-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.partner-copy-field.is-copied { border-color: #68d391; }

.partner-copy-val {
  flex: 1; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.partner-copy-val--code { font-weight: 700; letter-spacing: 1px; color: var(--accent); }
.partner-copy-val--url  { direction: ltr; }

.partner-copy-cta {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  font-size: 12px; font-weight: 700; color: var(--accent);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.partner-copy-field:hover .partner-copy-cta { background: var(--accent); color: #fff; border-color: var(--accent); }
.partner-copy-field.is-copied .partner-copy-cta,
.partner-copy-field.is-copied:hover .partner-copy-cta {
  background: rgba(104,211,145,0.14); border-color: rgba(104,211,145,0.4); color: #68d391;
}

.partner-link-hint {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.partner-link-hint i { flex-shrink: 0; margin-top: 1px; font-size: 13px; }

.btn-edit-code  {
  margin-top: 14px;
  padding: 10px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); transition: all var(--t-fast); white-space: nowrap; flex-shrink: 0;
}
.btn-edit-code:hover { border-color: var(--text-muted); color: var(--text-primary); }
.btn-outline {
  padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); transition: all 0.15s; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn-outline:hover { border-color: var(--text-muted); color: var(--text-primary); background: var(--bg-hover); }

/* ── Table card ────────────────────────────────────────────── */
.partner-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.partner-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.partner-table th {
  padding: 12px 16px; text-align: left; color: var(--text-muted);
  font-weight: 600; border-bottom: 1px solid var(--border); font-size: 12px;
}
.partner-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.partner-table tr:last-child td { border-bottom: none; }
.partner-table td:first-child   { color: var(--text-primary); }

.badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 20px; text-transform: capitalize;
}
.badge.pending    { background: rgba(246,173,85,0.15);  color: #f6ad55; }
.badge.confirmed  { background: rgba(104,211,145,0.15); color: #68d391; }
.badge.paid       { background: rgba(104,211,145,0.25); color: #38a169; }
.badge.completed  { background: rgba(104,211,145,0.25); color: #38a169; }
.badge.requested  { background: rgba(99,179,237,0.15);  color: #90cdf4; }
.badge.processing { background: rgba(246,173,85,0.15);  color: #f6ad55; }
.badge.rejected   { background: rgba(220,53,69,0.15);   color: #ff6b6b; }

/* An empty table is the state a new partner spends the most time in, so it says what
   would fill it and offers the action that starts filling it. */
.partner-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 34px 20px;
  color: var(--text-muted); font-size: 13px;
}
.partner-empty-icon { font-size: 26px; opacity: 0.45; margin-bottom: 10px; }
.partner-empty-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.partner-empty-sub {
  font-size: 12.5px; line-height: 1.55; margin-top: 5px;
  max-width: 42ch;
}
.partner-empty .btn-outline { margin-top: 14px; }

/* ── Payout form ───────────────────────────────────────────── */
.payout-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px 28px;
}
.form-group     { margin-bottom: 18px; }
.form-label     { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.form-input {
  width: 100%; background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 14px;
  font-size: 14px; color: var(--text-primary); outline: none;
  transition: border-color var(--t-fast); box-sizing: border-box;
}
.form-input:focus { border-color: var(--accent); }
.form-hint  { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

/* ── Program structure grid ────────────────────────────────── */
.prog-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 20px;
}
.prog-card {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 18px;
}
.prog-card-icon  { font-size: 22px; margin-bottom: 8px; }
.prog-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.prog-card-desc  { font-size: 12px; line-height: 1.6; color: var(--text-muted); }

/* ── Commission timeline ───────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; margin-top: 16px; }
.tl-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.tl-item:last-child { border-bottom: none; }
.tl-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; margin-top: 1px;
}
.tl-dot.step1 { background: rgba(99,179,237,0.15); color: #90cdf4; border: 1px solid rgba(99,179,237,0.3); }
.tl-dot.step2 { background: rgba(246,173,85,0.15);  color: #f6ad55; border: 1px solid rgba(246,173,85,0.3); }
.tl-dot.step3 { background: rgba(104,211,145,0.15); color: #68d391; border: 1px solid rgba(104,211,145,0.3); }
.tl-dot.step4 { background: rgba(236,72,153,0.15);  color: var(--accent); border: 1px solid rgba(236,72,153,0.3); }
.tl-body-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.tl-body-desc  { font-size: 12px; line-height: 1.6; color: var(--text-muted); }

/* ── Info banners ──────────────────────────────────────────── */
.info-banner { padding: 12px 16px; border-radius: 10px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.info-banner.info    { background: rgba(99,179,237,0.08);  border: 1px solid rgba(99,179,237,0.2);  color: #90cdf4; }
.info-banner.success { background: rgba(104,211,145,0.08); border: 1px solid rgba(104,211,145,0.2); color: #68d391; }

/* ── Earnings projector ────────────────────────────────────── */
.earn-proj-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px;
}
.earn-proj-card {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 18px 14px; text-align: center;
}
.earn-proj-card.earn-proj-featured {
  background: linear-gradient(145deg, rgba(219,39,119,.1), rgba(236,72,153,.1));
  border-color: rgba(219,39,119,.35); border-width: 2px;
}
.earn-proj-users { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 10px; }
.earn-proj-mo { font-size: 28px; font-weight: 900; color: var(--text-primary); line-height: 1; }
.earn-proj-card.earn-proj-featured .earn-proj-mo { background: linear-gradient(135deg, #DB2777, #C026D3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.earn-proj-mo-label { font-size: 11px; color: var(--text-muted); margin: 3px 0 10px; }
.earn-proj-yr { font-size: 11px; font-weight: 700; color: #68d391; background: rgba(104,211,145,.1); border: 1px solid rgba(104,211,145,.2); border-radius: 6px; padding: 3px 10px; display: inline-block; }
.earn-proj-card.earn-proj-featured .earn-proj-yr { color: #a5b4fc; background: rgba(219,39,119,.1); border-color: rgba(219,39,119,.25); }
.earn-proj-note { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 12px; line-height: 1.5; }

/* ── Program reference (collapsible) ───────────────────────────
   The rate card, timeline and projector are the pitch — open for a visitor deciding
   whether to join, collapsed for an enrolled partner who has already decided and
   whose working dashboard this content used to sit on top of. */
.partner-explainer {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; margin-bottom: 36px;
}
.partner-explainer-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px; cursor: pointer; list-style: none;
  border-radius: 16px; transition: background var(--t-fast);
}
.partner-explainer-summary::-webkit-details-marker { display: none; }
.partner-explainer-summary:hover { background: var(--bg-hover); }
.partner-explainer-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.partner-explainer-icon  { font-size: 17px; color: var(--text-muted); flex-shrink: 0; }
.partner-explainer-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.partner-explainer-hint  { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0; }
.partner-explainer-caret {
  font-size: 15px; color: var(--text-muted); flex-shrink: 0;
  transition: transform var(--t-fast);
}
.partner-explainer[open] .partner-explainer-caret { transform: rotate(180deg); }
.partner-explainer[open] .partner-explainer-summary {
  border-bottom: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
}
.partner-explainer-body { padding: 4px 22px 24px; }
.partner-explainer-sub {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  margin: 26px 0 2px;
}
.partner-explainer-note { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.partner-explainer-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  .partner-explainer-caret,
  .partner-setup-progress-fill,
  .pm-progress-fill { transition: none; }
}

/* ── PayPal availability notice (USD partners only) ────────────
   A footnote, not an alarm: PayPal reaches almost everywhere, so this is neutral-toned
   and collapsed by default. It only turns amber once opened, where the content earns it. */
.paypal-notice {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-hover); margin-top: 12px;
}
.paypal-notice-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer; list-style: none;
  border-radius: 12px; transition: border-color var(--t-fast), color var(--t-fast);
}
.paypal-notice-summary::-webkit-details-marker { display: none; }
.paypal-notice-summary:hover .paypal-notice-title { color: var(--text-primary); }
.paypal-notice-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.paypal-notice-icon  { font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
.paypal-notice-title { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.paypal-notice-hint  { font-size: 11.5px; color: var(--text-muted); flex: 1; min-width: 0; }
.paypal-notice-caret {
  font-size: 14px; color: var(--text-muted); flex-shrink: 0;
  transition: transform var(--t-fast);
}
.paypal-notice[open] .paypal-notice-caret { transform: rotate(180deg); }
.paypal-notice[open] .paypal-notice-summary { border-bottom: 1px solid var(--border); }

.paypal-notice-body { padding: 12px 14px 14px; }
.paypal-notice-lead {
  margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--text-muted);
}
.paypal-notice-group { margin-bottom: 12px; }
.paypal-notice-group-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--pstep-warn, #f6ad55); margin-bottom: 5px;
}
[data-theme="light"] .paypal-notice-group-title { color: #B45309; }
.paypal-notice-group-title i { font-size: 13px; }
/* The country runs are long, so they wrap as prose rather than as a list — a 19-item
   bulleted list would dominate a card that is meant to be a footnote. */
.paypal-notice-list {
  font-size: 12px; line-height: 1.7; color: var(--text-secondary);
}
.paypal-notice-sub {
  font-size: 11.5px; line-height: 1.55; color: var(--text-muted); margin-top: 5px;
}
.paypal-notice-foot {
  display: flex; align-items: flex-start; gap: 7px;
  padding-top: 11px; border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.6; color: var(--text-muted);
}
.paypal-notice-foot i { font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.paypal-notice-foot a { color: var(--accent); text-decoration: none; }
.paypal-notice-foot a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .paypal-notice-caret { transition: none; }
}

/* ── Second join CTA (visitor state) ───────────────────────── */
.partner-join-again {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.partner-join-again-note { font-size: 12px; color: var(--text-muted); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .partner-explainer-hint { display: none; }
}
@media (max-width: 600px) {
  .partner-hero    { padding: 20px 16px; }
  .payout-card { padding: 18px 16px; }
  .btn-edit-code { width: 100%; text-align: center; }
  .partner-copy-field { padding-left: 12px; }
  .partner-card    { overflow-x: auto; }
  .partner-work { grid-template-columns: 1fr; }
  .earn-proj-grid { grid-template-columns: 1fr; }
  .partner-explainer-summary { padding: 14px 16px; }
  .partner-explainer-body    { padding: 4px 16px 20px; }
  .pm-primary { padding: 18px 18px; }
}

/* ── Live withdrawal breakdown on the payout form ──────────── */
.partner-payout-breakdown {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13.5px;
}
.partner-bd-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--text-muted);
}
.partner-bd-row span:last-child { font-variant-numeric: tabular-nums; }
.partner-bd-deduct span:last-child { color: #f6ad55; }
.partner-bd-net {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--text);
  font-weight: 700;
}
.partner-bd-net span:last-child { color: #68d391; }

/* ── Payout setup checklist ────────────────────────────────────
   The UPI ID and the PAN are one gate on getting paid, not two chores, so they render
   as a single progressive checklist: each step is done / current / waiting, and only
   the current one opens a form. Two stacked cards each with its own banner read as
   twice the work and hid the fact that the second is blocked on the first. */
/* State colours live on variables because the light theme needs darker greens/ambers
   to clear contrast on white — the same reason theme.css darkens the accent there.
   Six hardcoded rgba()s would otherwise each need their own override. */
.partner-setup, .partner-details-card {
  --pstep-ok:        #68d391;
  --pstep-ok-bg:     rgba(104, 211, 145, 0.15);
  --pstep-ok-border: rgba(104, 211, 145, 0.4);
  --pstep-ok-line:   rgba(104, 211, 145, 0.35);
  --pstep-warn:        #f6ad55;
  --pstep-warn-bg:     rgba(246, 173, 85, 0.12);
  --pstep-warn-border: rgba(246, 173, 85, 0.3);
}
[data-theme="light"] .partner-setup,
[data-theme="light"] .partner-details-card {
  --pstep-ok:        #15803D;
  --pstep-ok-bg:     rgba(21, 128, 61, 0.10);
  --pstep-ok-border: rgba(21, 128, 61, 0.32);
  --pstep-ok-line:   rgba(21, 128, 61, 0.30);
  --pstep-warn:        #B45309;
  --pstep-warn-bg:     rgba(180, 83, 9, 0.10);
  --pstep-warn-border: rgba(180, 83, 9, 0.30);
}

.partner-setup { padding: 22px 24px; margin-bottom: 20px; }

/* Once there is withdrawable money behind the gate, finishing it stops being
   housekeeping. Same checklist, different weight — an amber frame on a ₹0 balance
   would be an unearned alarm, so this only applies at or above the payout minimum. */
.partner-setup.is-urgent {
  border-color: var(--pstep-warn-border);
  /* A tint layer over .payout-card's own background, so the card keeps its base
     colour in both themes and only gains a wash. */
  background-image: linear-gradient(var(--pstep-warn-bg), var(--pstep-warn-bg));
}
.partner-setup.is-urgent .partner-setup-title { color: var(--pstep-warn); }

.partner-setup-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.partner-setup-title {
  font-size: 14.5px; font-weight: 700; color: var(--text-primary); line-height: 1.35;
}
.partner-setup-sub {
  font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5;
}
.partner-setup-progress { flex-shrink: 0; text-align: right; }
.partner-setup-progress-count {
  font-size: 11px; font-weight: 800; color: var(--text-muted);
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.partner-setup-progress-bar {
  width: 54px; height: 4px; margin-top: 6px;
  background: var(--bg-hover); border-radius: 99px; overflow: hidden;
}
.partner-setup-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #a855f7);
  transition: width var(--t-med, .25s) ease;
}

.partner-steps { list-style: none; margin: 0; padding: 0; }

/* The connector is drawn behind the marker so the run of steps reads as one thread.
   Bounded to the row's own height, so a tall open form does not stretch it past the
   next marker. */
.partner-step { position: relative; display: flex; gap: 14px; padding: 18px 0 0; }
.partner-step:last-child { padding-bottom: 2px; }
.partner-step:not(:last-child)::before {
  content: ''; position: absolute;
  left: 13px; top: 46px; bottom: -4px; width: 2px;
  background: var(--border); border-radius: 2px;
}
.partner-step.is-done:not(:last-child)::before { background: var(--pstep-ok-line); }

.partner-step-marker {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: var(--bg-hover); border: 1px solid var(--border);
  color: var(--text-muted);
}
.partner-step.is-current .partner-step-marker {
  background: rgba(236, 72, 153, 0.14);
  border-color: rgba(236, 72, 153, 0.45);
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.08);
}
.partner-step.is-done .partner-step-marker {
  background: var(--pstep-ok-bg);
  border-color: var(--pstep-ok-border);
  color: var(--pstep-ok);
}

.partner-step-body { min-width: 0; flex: 1; padding-bottom: 4px; }
.partner-step-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px;
}
.partner-step-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
/* A waiting step is legible but visibly not the thing to act on. */
.partner-step.is-waiting .partner-step-title { color: var(--text-secondary); }
.partner-step.is-waiting .partner-step-desc  { opacity: 0.75; }

.partner-step-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 5px;
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.partner-step-tag.done {
  background: var(--pstep-ok-bg);
  border-color: var(--pstep-ok-border); color: var(--pstep-ok);
}
.partner-step-tag.warn {
  background: var(--pstep-warn-bg);
  border-color: var(--pstep-warn-border); color: var(--pstep-warn);
}

.partner-step-desc {
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted); margin-top: 5px;
}
.partner-step-desc strong { color: var(--text-secondary); }

.partner-step-value {
  margin-top: 8px; padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border); border-radius: 9px;
}
.partner-step-value code {
  font-size: 13px; color: var(--text-primary); word-break: break-all;
}
.partner-step-note {
  font-size: 11.5px; line-height: 1.55; color: var(--text-muted); margin-top: 6px;
}
.partner-step-note a { color: var(--accent); text-decoration: none; }
.partner-step-note a:hover { text-decoration: underline; }

.partner-step-form { margin-top: 12px; }
.partner-step-form .form-hint { margin-top: 7px; }
.partner-step-btn { margin-top: 12px; }
.partner-pan-input {
  text-transform: uppercase; letter-spacing: 2px; font-family: monospace;
}
.partner-inline-dest {
  color: var(--text-secondary); word-break: break-all; font-size: 11.5px;
}
.partner-step-error {
  margin-top: 10px; color: #fc8181; font-size: 12.5px; line-height: 1.5;
}

/* ── Consent to the ₹1 verification transfer ───────────────────
   Given the same weight as the field above it rather than fine print: it authorises
   money to move, and a consent record only means something if it was legible. The
   whole block is the label, so the text is part of the hit target. */
.partner-consent {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border); border-radius: 9px;
  font-size: 12px; line-height: 1.55; color: var(--text-muted); cursor: pointer;
}
[data-theme="light"] .partner-consent { background: rgba(0, 0, 0, 0.02); }
.partner-consent:hover { border-color: var(--border-hover, var(--border)); }
.partner-consent input[type="checkbox"] {
  width: 15px; height: 15px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
.partner-consent strong { color: var(--text-secondary); }

/* Visually hidden but still announced — the placeholder carries the visible label. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Settled payout details ────────────────────────────────────
   What the checklist collapses into once both details are on file. */
.partner-details-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
}
.partner-details-card.is-verified { border-color: var(--pstep-ok-border); }

.partner-details-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 12px;
}
.partner-details-card.is-verified .partner-details-head { color: var(--pstep-ok); }
.partner-details-head i { font-size: 15px; }

.partner-details-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.partner-details-label {
  font-size: 12px; color: var(--text-muted); min-width: 62px; flex-shrink: 0;
}
.partner-details-value {
  font-size: 13px; color: var(--text-primary); word-break: break-all; flex: 1;
}
.partner-details-lock { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.partner-details-card.is-verified .partner-details-lock .ph-seal-check { color: var(--pstep-ok); }

/* The bank account behind the UPI handle. The account holder's name leads because it
   is the value being matched against the PAN; the bank and masked number sit under it
   as the corroborating detail. */
.partner-details-account { display: flex; flex-direction: column; gap: 2px; }
.partner-details-bank { font-size: 11.5px; color: var(--text-muted); }

/* Ownership check — either an unresolved mismatch or an offer to run the check. */
.partner-verify-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02);
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
}
[data-theme="light"] .partner-verify-note { background: rgba(0, 0, 0, 0.02); }
.partner-verify-note > i { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.partner-verify-note strong { color: var(--text-primary); }
.partner-verify-note a { color: var(--accent); text-decoration: none; }
.partner-verify-note a:hover { text-decoration: underline; }
.partner-verify-note.is-fail {
  border-color: var(--pstep-warn-border); background: var(--pstep-warn-bg);
}
.partner-verify-note.is-fail > i,
.partner-verify-note.is-fail strong { color: var(--pstep-warn); }
.partner-verify-desc { margin-top: 4px; }
.partner-verify-desc code { word-break: break-all; color: var(--text-secondary); }
.partner-verify-note .partner-consent { margin-top: 10px; }
.partner-verify-note .partner-step-btn { margin-top: 10px; }

.partner-details-foot {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
}
.partner-details-foot i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 480px) {
  .partner-setup { padding: 18px 16px; }
  .partner-setup-head { flex-direction: column; gap: 10px; }
  .partner-setup-progress { text-align: left; }
  .partner-setup-progress-bar { width: 100%; max-width: 140px; }
}

/* ══════════════════════════════════════════════════════════════
   PARTNER AGREEMENT
   Two consumers, one stylesheet: the standalone /partner-terms page and the
   signing modal on the dashboard. Sharing the rules is what makes the document
   the partner signs look identical to the one they can go back and read.
   ══════════════════════════════════════════════════════════════ */

/* ── The agreement body (.pagr) ───────────────────────────────── */
.pagr { color: var(--text-secondary); }
.pagr-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.pagr-ver {
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-secondary);
}
.pagr-dot { opacity: .5; }

.pagr-lede { font-size: 14px; line-height: 1.75; margin: 0 0 26px; }
.pagr-h {
  font-size: 15px; font-weight: 800; color: var(--text-primary);
  margin: 28px 0 10px; scroll-margin-top: 12px;
}
.pagr p          { font-size: 14px; line-height: 1.75; margin: 0 0 12px; }
.pagr-list       { margin: 0 0 14px; padding-left: 20px; }
.pagr-list li    { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
.pagr strong     { color: var(--text-primary); font-weight: 700; }
.pagr a          { color: var(--accent, #EC4899); text-decoration: none; }
.pagr a:hover    { text-decoration: underline; }
.pagr-contact {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
}

/* ── Join gate note under the CTA ─────────────────────────────── */
.partner-join-gate-note {
  margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
}
.partner-join-gate-note a { color: var(--accent, #EC4899); text-decoration: none; }
.partner-join-gate-note a:hover { text-decoration: underline; }

/* ── Signing modal ────────────────────────────────────────────── */
body.pagr-modal-open { overflow: hidden; }

.pagr-modal {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pagr-modal[hidden] { display: none; }

.pagr-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .68); backdrop-filter: blur(3px);
}

.pagr-modal-panel {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 760px; max-height: min(88vh, 900px);
  background: var(--bg-card, #111); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  overflow: hidden;
}

.pagr-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.pagr-modal-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin: 0 0 4px; }
.pagr-modal-sub   { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.pagr-modal-sub a { color: var(--accent, #EC4899); text-decoration: none; }
.pagr-modal-sub a:hover { text-decoration: underline; }
.pagr-modal-x {
  flex-shrink: 0; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
}
.pagr-modal-x:hover { background: var(--bg-hover); color: var(--text-primary); }

/* The agreement itself: the one part of the panel that scrolls, so the
   confirmations below stay on screen while the document moves. */
.pagr-modal-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 20px 24px; scrollbar-gutter: stable;
}
.pagr-modal-scroll:focus-visible { outline: 2px solid var(--accent, #EC4899); outline-offset: -2px; }
.pagr-end-sentinel { height: 1px; }

.pagr-scrollhint {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 24px; font-size: 12px; font-weight: 600;
  color: var(--pstep-warn, #f6ad55);
  background: var(--pstep-warn-bg, rgba(246, 173, 85, .12));
  border-top: 1px solid var(--border);
}
.pagr-scrollhint[hidden] { display: none; }

.pagr-modal-foot {
  flex-shrink: 0; padding: 18px 24px 20px;
  border-top: 1px solid var(--border); background: var(--bg-hover, rgba(255,255,255,.02));
}

.pagr-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 12px; cursor: pointer;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}
.pagr-check input {
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
  accent-color: var(--accent, #EC4899); cursor: pointer;
}
.pagr-check strong { color: var(--text-primary); }
.pagr-check a { color: var(--accent, #EC4899); text-decoration: none; }
.pagr-check a:hover { text-decoration: underline; }

.pagr-sign { margin: 16px 0 18px; }
.pagr-sign-label {
  display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: 7px;
}
/* A signature field should look like a signature line, not another form input —
   the visual cue is doing the work the word "sign" does on paper. */
.pagr-sign-input {
  width: 100%; padding: 11px 14px;
  background: var(--bg-input, rgba(0,0,0,.25));
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 8px; color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px; font-style: italic; letter-spacing: .01em;
}
.pagr-sign-input::placeholder { font-style: normal; font-size: 14px; color: var(--text-muted); opacity: .7; }
.pagr-sign-input:focus  { outline: none; border-color: var(--accent, #EC4899); }
.pagr-sign-input.has-error { border-color: #ef4444; }
.pagr-sign-note  { margin-top: 7px; font-size: 11.5px; line-height: 1.55; color: var(--text-muted); }
.pagr-sign-error { margin-top: 6px; font-size: 12px; font-weight: 600; color: #ef4444; }
.pagr-sign-error[hidden] { display: none; }

.pagr-modal-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.pagr-modal-actions .btn-primary:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 560px) {
  .pagr-modal { padding: 0; }
  .pagr-modal-panel { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; border: none; }
  .pagr-modal-head, .pagr-modal-scroll, .pagr-modal-foot { padding-left: 16px; padding-right: 16px; }
  .pagr-scrollhint { padding-left: 16px; padding-right: 16px; }
  .pagr-modal-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ── Signed record (enrolled state) ───────────────────────────── */
.partner-agreement-record {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
}
.partner-agreement-record i { font-size: 15px; flex-shrink: 0; margin-top: 1px; color: var(--pstep-ok, #68d391); }
.partner-agreement-record .sig {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  color: var(--text-primary); font-size: 13.5px;
}
.partner-agreement-record a { color: var(--accent, #EC4899); text-decoration: none; }
.partner-agreement-record a:hover { text-decoration: underline; }