/* Partner (referral) program - shared design layer for every partner_*.html
   page (auth screens + dashboard) plus admin_partners.html. Loaded AFTER
   tokens.css (always) and AFTER admin.css on the pages that also load it
   (dashboard/admin) - reuses tokens.css/admin.css's own color variables and
   components (--card, --border, --shadow-md, .pill-*, .stat-card, .btn-*)
   rather than redefining them, so dark/light theme toggling (admin-theme.js)
   keeps working here with zero extra code. partners_landing.html additionally
   loads landing.css for its hero/nav/footer - this file only adds the few
   things landing.css doesn't already have (the "how it works" step list,
   the hero stat row). */

/* ==========================================
   Auth screens (login/signup/verify) - centered card, consistent across all
   three instead of each hand-rolling its own spacing.

   Background treatment matches the client-facing login/signup pages'
   (static/css/auth.css: three drifting radial-gradient "blobs" + a large,
   low-opacity floating watermark of the brand mark) rather than the old flat
   fill - copied here (not shared via auth.css directly) so this file's own
   .partner-auth-card / .form-control / etc rules stay the only thing these
   pages get, with none of auth.css's unrelated .card/input/button rules
   leaking onto them. --plane itself (used for the flat part of the
   background) is already dark-mode-aware via tokens.css/admin.css, so it
   needs no extra token here - only the blob colors and watermark opacity/
   filter/shadow are new tokens, declared below.

   Same "the card stays a fixed, readable surface - only what's BEHIND it
   reacts to theme" split auth.css uses for login/signup (see that file's
   top-of-file comment): .partner-auth-card itself is untouched by this
   change. Unlike auth.css's pages (OS preference only, no toggle), these
   auth pages already carry an explicit light/dark toggle (#theme-toggle-btn,
   admin-theme.js, :root[data-theme]) same as the rest of the partner
   dashboard - so these new tokens follow admin.css's dual mechanism just
   above (prefers-color-scheme fallback + explicit [data-theme] override
   winning both directions), not auth.css's simpler single
   prefers-color-scheme block. */
:root {
  --partner-auth-blob-1: rgba(13, 61, 52, 0.12);
  --partner-auth-blob-2: rgba(20, 82, 74, 0.10);
  --partner-auth-blob-3: rgba(13, 61, 52, 0.07);
  --partner-auth-mark-opacity: 0.05;
  --partner-auth-mark-filter: none;
  --partner-auth-mark-shadow: drop-shadow(10px 16px 20px rgba(13, 61, 52, 0.20)) drop-shadow(-6px -6px 14px rgba(255, 255, 255, 0.5));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --partner-auth-blob-1: rgba(45, 168, 140, 0.22);
    --partner-auth-blob-2: rgba(20, 82, 74, 0.45);
    --partner-auth-blob-3: rgba(13, 61, 52, 0.35);
    --partner-auth-mark-opacity: 0.09;
    --partner-auth-mark-filter: invert(1) brightness(1.6);
    --partner-auth-mark-shadow: drop-shadow(0 0 30px rgba(120, 224, 195, 0.35)) drop-shadow(10px 16px 24px rgba(0, 0, 0, 0.5));
  }
}
:root[data-theme="dark"] {
  --partner-auth-blob-1: rgba(45, 168, 140, 0.22);
  --partner-auth-blob-2: rgba(20, 82, 74, 0.45);
  --partner-auth-blob-3: rgba(13, 61, 52, 0.35);
  --partner-auth-mark-opacity: 0.09;
  --partner-auth-mark-filter: invert(1) brightness(1.6);
  --partner-auth-mark-shadow: drop-shadow(0 0 30px rgba(120, 224, 195, 0.35)) drop-shadow(10px 16px 24px rgba(0, 0, 0, 0.5));
}
.partner-auth-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 40px 20px;
  position: relative; overflow-x: hidden; box-sizing: border-box;
  background: var(--plane);
}
/* Same three-blob + floating-watermark layer as auth.css's body::before/
   ::after (see that file for the full design rationale) - `fixed` (not
   `absolute`) so it doesn't reflow/scroll with content, sits below every
   real element (z-index:-1), and never intercepts clicks/taps
   (pointer-events:none). Named with a partner- prefix (not reusing auth.css's
   own @keyframes names) since this is an independent copy, not a shared
   stylesheet. */
.partner-auth-page::before, .partner-auth-page::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
.partner-auth-page::before {
  inset: -10%;
  background:
    radial-gradient(640px circle at 12% 18%, var(--partner-auth-blob-1), transparent 62%),
    radial-gradient(520px circle at 88% 78%, var(--partner-auth-blob-2), transparent 62%),
    radial-gradient(760px circle at 50% 105%, var(--partner-auth-blob-3), transparent 65%);
  background-repeat: no-repeat;
  animation: partner-auth-bg-drift 24s ease-in-out infinite alternate;
}
.partner-auth-page::after {
  right: -8%;
  top: -6%;
  width: 460px;
  height: 460px;
  background: url("/static/img/logo.svg") no-repeat center / contain;
  opacity: var(--partner-auth-mark-opacity);
  filter: var(--partner-auth-mark-filter) var(--partner-auth-mark-shadow);
  transform-style: preserve-3d;
  animation: partner-auth-mark-float 20s ease-in-out infinite;
}
@keyframes partner-auth-bg-drift {
  0% { background-position: 0% 0%, 100% 100%, 50% 100%; }
  100% { background-position: 6% 8%, 94% 88%, 54% 92%; }
}
@keyframes partner-auth-mark-float {
  0%   { transform: perspective(900px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0); }
  25%  { transform: perspective(900px) rotateX(10deg) rotateY(-14deg) rotateZ(3deg) translate3d(-10px, -16px, 40px); }
  50%  { transform: perspective(900px) rotateX(-8deg) rotateY(12deg) rotateZ(-3deg) translate3d(8px, -28px, 0); }
  75%  { transform: perspective(900px) rotateX(7deg) rotateY(-8deg) rotateZ(2deg) translate3d(-6px, -12px, -30px); }
  100% { transform: perspective(900px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0); }
}
@media (max-width: 640px) {
  .partner-auth-page::after { width: 260px; height: 260px; right: -18%; top: -4%; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-auth-page::before, .partner-auth-page::after { animation: none; }
}
.partner-auth-brand {
  display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px;
  color: var(--ink); margin-bottom: 28px; text-decoration: none;
}
.partner-auth-brand img { width: 30px; height: 30px; }
.partner-auth-card {
  width: 100%; max-width: 380px; padding: 36px 32px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.partner-auth-card h1 { font-size: 20px; margin: 0 0 6px; color: var(--ink); }
.partner-auth-sub { font-size: 13px; color: var(--ink-muted); margin: 0 0 24px; line-height: 1.5; }
.partner-auth-card label {
  display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink-2);
}
.partner-auth-card input[type="text"],
.partner-auth-card input[type="email"],
.partner-auth-card input[type="password"] {
  width: 100%; box-sizing: border-box; margin-bottom: 18px;
  padding: 10px 13px; font-size: 14px;
}
.partner-auth-card input:focus-visible { border-color: var(--accent); }
.partner-auth-card .hint { font-size: 11.5px; color: var(--ink-muted); margin: -12px 0 18px; line-height: 1.4; }
.partner-auth-card button[type="submit"] { width: 100%; padding: 11px; font-size: 14px; }
.partner-auth-foot { font-size: 13px; color: var(--ink-muted); margin: 20px 0 0; text-align: center; }
.partner-auth-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.partner-auth-foot a:hover { text-decoration: underline; }
.partner-code-input {
  letter-spacing: 6px !important; text-align: center; font-size: 20px !important;
  font-weight: 700; font-family: monospace;
}
.partner-resend-form { margin: 0; display: inline; }
.partner-resend-form button {
  background: none; border: none; padding: 0; color: var(--accent);
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
#theme-toggle-btn.partner-theme-toggle { position: fixed; top: 20px; right: 20px; margin-left: 0; }

/* ==========================================
   Dashboard shell - fixed top navbar + fixed left sidebar (icons match the
   client CRM's own Sidebar.jsx paths, just re-drawn as plain inline SVG
   since this is a server-rendered page, not React) + scrollable content.
   ========================================== */
.partner-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 60px;
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.partner-navbar-toggle {
  display: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2); align-items: center; justify-content: center; cursor: pointer;
}
.partner-navbar-brand {
  display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink);
  text-decoration: none; font-size: 15px; margin-right: auto;
}
.partner-navbar-brand img { width: 24px; height: 24px; }
.partner-navbar-right { display: flex; align-items: center; gap: 14px; }
.partner-avatar-badge {
  display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--ink);
}
.partner-avatar-circle {
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0;
}
.partner-avatar-name { font-size: 13px; font-weight: 600; }

.partner-shell { display: flex; padding-top: 60px; min-height: 100vh; }
.partner-sidebar {
  position: fixed; top: 60px; left: 0; bottom: 0; width: 220px; z-index: 15;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 18px 12px; overflow-y: auto;
  transition: transform 0.2s ease;
}
.partner-sidebar-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 600; margin-bottom: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.partner-sidebar-link svg { flex-shrink: 0; }
.partner-sidebar-link:hover { background: var(--plane); color: var(--ink); }
.partner-sidebar-link.active { background: rgba(26, 143, 107, 0.1); color: var(--accent); }
.partner-sidebar-backdrop { display: none; }
/* Manager-only sidebar section - shown only when the session's partner row
   has is_manager=TRUE (partner_base.html), same small-caps label treatment
   as .partner-referral-label elsewhere on these pages. */
.partner-sidebar-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-muted); margin: 14px 12px 6px; padding-top: 12px; border-top: 1px solid var(--border);
}

.partner-main { flex: 1; min-width: 0; margin-left: 220px; }
.partner-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
.partner-wrap h1 { font-size: 23px; margin: 0 0 4px; }
.partner-wrap-sub { color: var(--ink-muted); font-size: 13.5px; margin: 0 0 28px; }

@media (max-width: 900px) {
  .partner-navbar-toggle { display: flex; }
  .partner-avatar-name { display: none; }
  .partner-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .partner-sidebar.is-open { transform: translateX(0); }
  .partner-sidebar-backdrop.is-open {
    display: block; position: fixed; inset: 60px 0 0 0; z-index: 14;
    background: rgba(0, 0, 0, 0.35);
  }
  .partner-main { margin-left: 0; }
}

/* Referral link - the single most important widget on the page, so it gets
   its own prominent treatment (brand-tinted border, not just a plain card). */
.partner-referral-card {
  padding: 20px 22px; margin-bottom: 20px;
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; box-shadow: var(--shadow-sm);
}

/* Tier banner (Silver/Gold) - sits above the commission-rate line, the
   first thing a partner sees under the welcome heading. */
.partner-tier-banner { margin-bottom: 14px; }
.partner-tier-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.partner-tier-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700;
}
.partner-tier-badge.is-silver { background: rgba(143, 140, 127, 0.18); color: var(--ink-2); }
.partner-tier-badge.is-gold { background: rgba(250, 178, 25, 0.18); color: var(--warning-ink, #b3760b); }
.partner-tier-sub { font-size: 12.5px; color: var(--ink-muted); }
.partner-tier-progress { height: 6px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.partner-tier-progress-fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width 0.3s ease; }

/* Commission-rate banner - sits right under the page subtitle, above the
   referral link, so it's the first real fact a partner reads. */
.partner-rate-banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 20px;
  background: rgba(26, 143, 107, 0.08); border: 1px solid rgba(26, 143, 107, 0.25);
  border-radius: 12px; color: var(--brand); font-size: 13.5px; font-weight: 600;
}
.partner-rate-banner strong { font-size: 15px; }
.partner-referral-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.partner-referral-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.partner-referral-row input {
  flex: 1; min-width: 220px; font-family: monospace; font-size: 13px;
  padding: 10px 13px; background: var(--plane); border: 1px solid var(--border);
  border-radius: 8px; color: var(--ink-2);
}
.partner-copy-btn {
  flex-shrink: 0; min-width: 116px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.partner-copy-btn.is-copied { background: var(--good); color: #fff; border-color: var(--good); }
.partner-referral-substats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--ink-muted); }
.partner-referral-substats strong { color: var(--ink); }

/* Four metric cards - fully self-contained (does NOT reuse admin.css's
   .stat-card, which stacks a <div> of two inline <span>s with no
   flex-direction set - on this page that rendered the value and label
   run together on one line, e.g. "$0.00TOTAL REVENUE"). Own grid, own
   internal layout, so nothing here can be pulled sideways by a shared
   component's assumptions. */
.partner-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; margin-bottom: 24px;
}
.partner-stat-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 1.25rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.partner-stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.partner-stat-revenue .partner-stat-icon { background: rgba(26, 143, 107, 0.12); color: var(--accent); }
.partner-stat-pending .partner-stat-icon { background: rgba(250, 178, 25, 0.16); color: var(--warning-ink); }
.partner-stat-paid .partner-stat-icon { background: rgba(12, 163, 12, 0.12); color: var(--good); }
.partner-stat-clients .partner-stat-icon { background: rgba(59, 110, 165, 0.12); color: var(--info); }
.partner-stat-link-clicks .partner-stat-icon { background: rgba(154, 92, 219, 0.14); color: #9a5cdb; }
.partner-stat-value {
  display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--ink);
}
.partner-stat-label {
  display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Section cards - "Referred businesses" / "Commission history" / "Payout
   details" each get their own bordered white card instead of sitting as
   bare headings + tables directly on the page background. */
.partner-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.5rem; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.partner-card-title { font-size: 16px; margin: 0 0 4px; color: var(--ink); }
.partner-card-sub { color: var(--ink-muted); font-size: 13px; margin: 0 0 18px; }
.partner-card .table-scroll { margin-bottom: 0; }

/* Mini "how it works" strip - shown in place of the plain empty state, its
   own small self-contained component (not reusing the landing page's
   #partner-how card grid, which is too large for an inline dashboard strip). */
.partner-mini-steps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.partner-mini-step {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--plane); border: 1px solid var(--border); border-radius: 10px;
}
.partner-mini-step-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.partner-mini-step-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.partner-mini-step-text strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }

/* Recent activity feed */
.partner-activity-list { list-style: none; margin: 0; padding: 0; }
.partner-activity-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.partner-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.partner-activity-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.partner-activity-signup { background: rgba(59, 110, 165, 0.12); color: var(--info); }
.partner-activity-commission { background: rgba(26, 143, 107, 0.12); color: var(--accent); }
.partner-activity-payout { background: rgba(12, 163, 12, 0.12); color: var(--good); }
.partner-activity-text { flex: 1; color: var(--ink-2); }
.partner-activity-at { color: var(--ink-muted); font-size: 11.5px; white-space: nowrap; }

/* Marketing kit - downloadable asset grid */
.partner-kit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 16px;
}
.partner-kit-card {
  padding: 1.25rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-sm);
}
.partner-kit-card.is-disabled { opacity: 0.6; }
.partner-kit-card-icon {
  width: 32px; height: 32px; border-radius: 8px; margin-bottom: 12px;
  background: rgba(26, 143, 107, 0.12); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.partner-kit-card h3 { font-size: 14.5px; margin: 0 0 4px; color: var(--ink); }
.partner-kit-card p { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 12px; line-height: 1.45; }
.partner-kit-download { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.partner-kit-download:hover { text-decoration: underline; }
.partner-kit-coming-soon { font-size: 12px; font-weight: 600; color: var(--ink-muted); }

/* Social banner pack card - lists 3 fixed-size files instead of one single
   download link, so it reuses .partner-kit-card's anatomy (icon/h3/p) but
   swaps the single link for a compact row list, one row per file. */
.partner-kit-card-multi p { margin-bottom: 10px; }
.partner-kit-download-list { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--border); }
.partner-kit-download-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; font-size: 12px; color: var(--ink-muted);
}
.partner-kit-download-list .partner-kit-download { flex-shrink: 0; }
.partner-kit-custom-banner {
  padding: 14px 18px; background: rgba(26, 143, 107, 0.08); border: 1px solid rgba(26, 143, 107, 0.2);
  border-radius: 12px; font-size: 13.5px; color: var(--ink-2);
}
.partner-kit-custom-banner a { color: var(--accent); }

/* Marketing kit - copy-paste blocks */
.partner-kit-block { margin-bottom: 18px; }
.partner-kit-block:last-child { margin-bottom: 0; }
.partner-kit-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.partner-kit-block-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.partner-kit-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit;
  font-size: 13px; line-height: 1.5; padding: 12px 14px; color: var(--ink-2);
  background: var(--plane); border: 1px solid var(--border); border-radius: 8px;
}

/* Footer */
.partner-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--border);
  color: var(--ink-muted); font-size: 12.5px;
}
.partner-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.partner-footer-links a { color: var(--ink-muted); text-decoration: none; }
.partner-footer-links a:hover { color: var(--accent); text-decoration: underline; }

/* Account settings forms */
.partner-account-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin-bottom: 20px;
}
.partner-account-form { max-width: 100%; }
.partner-account-form label {
  display: block; font-size: 12.5px; font-weight: 600; margin: 0 0 6px; color: var(--ink-2);
}
.partner-account-form input {
  width: 100%; box-sizing: border-box; margin-bottom: 14px; padding: 9px 12px; font-size: 13.5px;
}
.partner-account-form input:disabled { color: var(--ink-muted); cursor: not-allowed; }
.partner-account-form button { margin-top: 2px; }

/* Email notifications toggle */
.partner-toggle-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.partner-toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.partner-toggle-switch input { opacity: 0; width: 0; height: 0; }
.partner-toggle-slider {
  position: absolute; inset: 0; cursor: pointer; background: var(--grid);
  border-radius: 999px; transition: background 0.15s ease;
}
.partner-toggle-slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.15s ease;
}
.partner-toggle-switch input:checked + .partner-toggle-slider { background: var(--accent); }
.partner-toggle-switch input:checked + .partner-toggle-slider::before { transform: translateX(18px); }

/* Payout request - "available to withdraw" + Request Payout button */
.partner-payout-request-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.partner-payout-pending-label { display: block; font-size: 12px; color: var(--ink-muted); }
.partner-payout-pending-value { display: block; font-size: 1.6rem; font-weight: 700; color: var(--ink); }

/* Payout details form - sectioned grid replacing the old single free-text
   textarea (see routes/partners.py's payout-details handler for why:
   structured Bank Transfer/IBAN columns are now the source of truth). */
.partner-payout-form { max-width: 100%; }
.partner-payout-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.partner-payout-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.partner-payout-section-title {
  font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.partner-payout-section-sub { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 14px; }
.partner-payout-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 16px;
}
.partner-payout-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.partner-payout-field.full-width { grid-column: 1 / -1; }
.partner-payout-field label { font-size: 12.5px; font-weight: 600; margin: 0 0 6px; color: var(--ink-2); }
.partner-payout-field .hint { font-size: 11.5px; color: var(--ink-muted); margin-top: 5px; line-height: 1.4; }

/* Payment method selector - one active card (Bank Transfer), three visibly
   disabled ones. The `disabled` attribute on each hidden radio is the real
   guard against selecting/submitting them, not just this styling. */
.partner-payout-methods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.partner-payout-method {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.partner-payout-method input[type="radio"] { accent-color: var(--accent); margin: 0; }
.partner-payout-method:has(input:checked) { border-color: var(--accent); background: rgba(26, 143, 107, 0.06); }
.partner-payout-method.is-disabled { opacity: 0.6; cursor: not-allowed; color: var(--ink-muted); }
.partner-payout-method-badge {
  margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: 999px; background: rgba(143, 140, 127, 0.16); color: var(--ink-muted); white-space: nowrap;
}

/* CNIC front/back upload */
.partner-payout-upload { display: flex; flex-direction: column; gap: 6px; }
.partner-payout-upload input[type="file"] { font-size: 12px; color: var(--ink-2); max-width: 100%; }
.partner-payout-upload-status { font-size: 11.5px; color: var(--accent); font-weight: 600; }

.partner-payout-confirm {
  display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2);
  margin: 6px 0 16px; cursor: pointer; line-height: 1.4;
}
.partner-payout-confirm input { margin-top: 2px; }
.partner-payout-form button { margin-top: 2px; }

/* Payout request OTP confirmation */
.partner-payout-otp-card {
  margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--plane);
}

/* ==========================================
   Landing page additions (landing.css supplies .hero/.section-head/
   .feature-item/.cta-band/.eyebrow already - this only fills the gaps)
   ========================================== */
.partner-hero-stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 30px; }
.partner-hero-stats .stat-num { font-size: 30px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.partner-hero-stats .stat-lbl { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }

/* Soft-touch compliance footnote under the hero CTA - a legal note, not a
   headline, so it borrows the same small/muted treatment .hint gets
   elsewhere (partner-auth-card, partner-payout-field, partner-commission-
   section) rather than being visually loud. */
.partner-hero-legal-note { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; margin: 12px 0 0; max-width: 460px; }
.partner-hero-legal-note a { color: var(--ink-muted); text-decoration: underline; }
.partner-hero-legal-note a:hover { color: var(--accent); }

/* Hero right-side visual - same "fill the empty grid column" fix used on
   the About page (.about-hero-card), but a floating earnings-card mockup
   instead of a static content card, since this page is selling a specific
   outcome (recurring commission) rather than explaining a product. */
/* Top-align the hero's two columns instead of landing.css's default
   center alignment - the standard treatment for a text-left/visual-right
   SaaS hero (Stripe, Linear, etc.): headline and visual share a top edge
   instead of both floating mid-row, which is what read as "loose". Scoped
   to this page via the extra class so every other page's .hero-inner
   (which has no second column needing this) is untouched. */
.partner-hero-inner { align-items: flex-start; }
.partner-hero-visual { position: relative; display: flex; justify-content: center; padding-top: 6px; }
.partner-hero-card {
  width: 100%; max-width: 460px; padding: 34px 34px 28px;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-lg); animation: partnerHeroFloat 5s ease-in-out infinite;
}
.partner-hero-card-label { font-size: 14px; color: var(--ink-muted); font-weight: 600; margin-bottom: 8px; }
.partner-hero-card-value { font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 26px; }
.partner-hero-bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-bottom: 20px; }
.partner-hero-bars span {
  position: relative; flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--brand), rgba(26,143,107,0.35));
  animation: partnerBarGrow 0.7s ease-out backwards;
}
.partner-hero-bars span b {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.partner-hero-bars span:last-child b { color: var(--brand); }
.partner-hero-bars span:nth-child(1) { animation-delay: 0.05s; }
.partner-hero-bars span:nth-child(2) { animation-delay: 0.12s; }
.partner-hero-bars span:nth-child(3) { animation-delay: 0.19s; }
.partner-hero-bars span:nth-child(4) { animation-delay: 0.26s; }
.partner-hero-bars span:nth-child(5) { animation-delay: 0.33s; }
.partner-hero-bars span:nth-child(6) { animation-delay: 0.4s; }
@keyframes partnerBarGrow { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
.partner-hero-card-foot {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-muted);
  padding-top: 14px; border-top: 1px solid var(--border);
}
.partner-hero-card-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(12,163,12,0.16);
}
.partner-hero-float-badge {
  position: absolute; top: -16px; right: 4%; padding: 10px 16px;
  background: var(--brand); color: #fff; border-radius: 13px; font-size: 17px; font-weight: 800;
  box-shadow: var(--shadow-md); animation: partnerHeroFloat 5s ease-in-out infinite; animation-delay: 0.3s;
}
.partner-hero-float-badge span { display: block; font-size: 10px; font-weight: 600; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes partnerHeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) { .partner-hero-visual { margin-top: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .partner-hero-card, .partner-hero-float-badge { animation: none; }
  .partner-hero-bars span { animation: none; transform: none; }
}

/* CTA band - richer gradient + soft glow instead of the flat brand-color
   fill every other page's .cta-band uses, scoped to this page only via
   the extra class so nothing shared changes. */
.partner-cta-band {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12), transparent 55%),
              linear-gradient(135deg, var(--brand), #0d5c46);
}
.partner-cta-sub { color: rgba(255,255,255,0.78); font-size: 14.5px; margin: 8px 0 0; }

/* "How it works" steps - reuses landing.css's .feature-list/.feature-item grid
   (the same card component #features uses on the main site) instead of the old
   bespoke row-layout .partner-step, so this section matches the rest of the
   site's card look. Scoped to #partner-how the same way landing.css scopes its
   own enhanced treatment to #features, just applied here in partner.css since
   #features's rule lives on a different page. Steps have a number, not an
   icon, so the number is plain centered text inside .icon-wrap instead of an
   svg. */
#partner-how .feature-list { gap: 22px; background: none; border: none; border-radius: 0; overflow: visible; box-shadow: none; }
#partner-how .feature-item {
  border-radius: 16px; padding: 34px 30px; box-shadow: 0 10px 30px rgba(20,37,29,0.07);
  /* Overrides landing.css's flat "ease" hover transition with an ease-out-expo curve -
     snappier initial lift, soft landing at the top, distinct from the GSAP power2.out
     scroll-entrance below so hover reads as its own deliberate motion, not a repeat. */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#partner-how .feature-item:hover { box-shadow: 0 16px 40px rgba(20,37,29,0.11); }
#partner-how .feature-item .icon-wrap {
  width: 46px; height: 46px; border-radius: 12px; background: #0e6b45; color: #ffffff; border: none;
  margin-bottom: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}

/* "Why Partner With Us" - a 2x2 grid of USP cards, distinct from #partner-how's
   shadow-only feature cards just above it: explicit border + flat surface per
   the brief's "clean borders, light background" ask, so the two card sections
   read as visually distinct even sitting back to back on the page. */
/* Section itself spans full width like every sibling section on this page
   (landing.css's bare `section` rule is edge-to-edge, padding only) - the
   1080px reading-width cap moves to .partner-why-inner instead, same split
   #partner-faq already uses (full-bleed section, centered inner content). */
.partner-why-section { padding: 88px 32px; }
.partner-why-inner { max-width: none; }
.partner-why-sub { color: var(--ink-2); font-size: 15px; margin: 8px 0 0; max-width: 520px; }
.partner-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 40px; }
.partner-why-card {
  padding: 28px 26px; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.partner-why-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(26, 143, 107, 0.3); }
.partner-why-card .icon-wrap {
  width: 44px; height: 44px; border-radius: 11px; background: rgba(26, 143, 107, 0.1); color: var(--brand);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.partner-why-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.partner-why-card p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }

@media (max-width: 640px) {
  .partner-why-section { padding: 64px 20px; }
  .partner-why-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .partner-wrap { padding: 24px 18px 48px; }
  .partner-auth-card { padding: 28px 22px; }
}

/* ==========================================
   Referred Clients page
   ========================================== */
.partner-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.partner-page-head h1 { margin-bottom: 4px; }
.partner-search-input { width: 220px; max-width: 100%; }
.partner-client-name-cell { display: flex; align-items: center; gap: 10px; }
.partner-row-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: rgba(26, 143, 107, 0.14); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.partner-empty-search { padding: 20px 0 4px; color: var(--ink-muted); font-size: 13px; text-align: center; }

/* ==========================================
   "Inside Your Partner Dashboard" - deliberately NOT a third card grid
   (the page already has two: #partner-why and #partner-how). A 2-column
   split instead: a static dashboard-mockup visual on the left (built the
   same "mockup card" way as the hero's .partner-hero-card - a bordered
   surface card with mini stat tiles + an animated bar chart - but its own
   distinct graphic, not a duplicate), a plain vertical feature list with
   icons and dividers on the right (not cards, on purpose, so the page's
   rhythm actually varies from #partner-why's card grid right above it).
   ========================================== */
.partner-dashboard-section { padding: 88px 32px 96px; }
.partner-dashboard-inner { max-width: none; }
.partner-dashboard-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }

.partner-dash-mock {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-lg); overflow: hidden; max-width: 460px; margin: 0 auto;
}
.partner-dash-mock-bar {
  display: flex; align-items: center; gap: 6px; padding: 14px 18px;
  background: var(--plane); border-bottom: 1px solid var(--border);
}
.partner-dash-mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.partner-dash-mock-url {
  margin-left: 10px; font-size: 11.5px; color: var(--ink-muted); font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px;
}
.partner-dash-mock-body { padding: 26px 26px 24px; }
.partner-dash-mock-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.partner-dash-mock-tile { background: var(--plane); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.partner-dash-mock-tile-lbl { font-size: 11.5px; color: var(--ink-muted); font-weight: 600; margin-bottom: 6px; }
.partner-dash-mock-tile-val { font-size: 19px; font-weight: 800; color: var(--brand); letter-spacing: -0.01em; }
.partner-dash-mock-chart {
  background: var(--plane); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px 12px;
}
.partner-dash-mock-chart-head {
  display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-muted);
  font-weight: 600; margin-bottom: 12px;
}
.partner-dash-mock-chart-trend { color: var(--accent); font-weight: 700; }
.partner-dash-mock-bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.partner-dash-mock-bars span {
  flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--brand), rgba(26,143,107,0.35));
  animation: partnerBarGrow 0.7s ease-out backwards;
}
.partner-dash-mock-row {
  display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--ink-muted);
}
.partner-dash-mock-row-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(12,163,12,0.16);
}

.partner-dashboard-copy .eyebrow { color: var(--accent); }
.partner-dashboard-copy h2 { margin: 8px 0 12px; font-size: 34px; letter-spacing: -0.01em; line-height: 1.15; }
.partner-dashboard-sub { margin: 0 0 8px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 480px; }
.partner-dashboard-list { margin-top: 28px; }
.partner-dashboard-list-item {
  display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--border);
}
.partner-dashboard-list-item:last-child { border-bottom: 1px solid var(--border); }
.partner-dashboard-list-item .icon-wrap {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--brand);
}
.partner-dashboard-list-item h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.partner-dashboard-list-item p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; max-width: 460px; }

@media (max-width: 900px) {
  .partner-dashboard-section { padding: 64px 20px 72px; }
  .partner-dashboard-grid { grid-template-columns: 1fr; gap: 40px; }
  .partner-dash-mock { max-width: 420px; }
  .partner-dashboard-copy h2 { font-size: 28px; }
}

/* FAQ section - two-column layout matching landing.html's #landing-faq
   (sticky intro + support card on the left, accordion on the right). Sits
   right below #partner-commission, so it reuses that section's exact wash
   formula (two radial brand-tinted blobs) rather than a flat fill, just
   lighter and over --surface instead of --plane - close enough kin that
   the two sections read as one continuous visual family, not a redesigned
   section butted up against an older, flatter one. */
.partner-faq-section {
  padding-top: 88px; padding-bottom: 96px;
  background:
    radial-gradient(760px circle at 92% 0%, rgba(26, 143, 107, 0.05), transparent 55%),
    radial-gradient(680px circle at 4% 100%, rgba(13, 61, 52, 0.04), transparent 55%),
    var(--surface);
}
.partner-faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; max-width: 1080px; margin: 0 auto; align-items: start; }
.partner-faq-intro { position: sticky; top: 96px; }
.partner-faq-intro .eyebrow { color: var(--accent); }
.partner-faq-intro h2 { margin: 8px 0 14px; color: var(--ink); line-height: 1.15; }
.partner-faq-intro > p { max-width: 320px; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
/* Same tinted-gradient + shadow-md depth as .partner-commission-payout-trust
   just above - lifts the support card off the flat base .faq-support-card
   look so it doesn't read as a leftover flatter component next to the
   commission section's polished cards. */
.partner-faq-section .faq-support-card {
  max-width: 320px; box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, rgba(26, 143, 107, 0.06), var(--card) 60%);
  border-color: rgba(26, 143, 107, 0.18);
}
.partner-faq-section .faq-list { max-width: 720px; margin: 0; }
.partner-faq-section .faq-item { border: none; border-top: 1px solid var(--border); border-radius: 0; margin: 0; background: transparent; transition: background 0.2s ease; }
.partner-faq-section .faq-item:last-child { border-bottom: 1px solid var(--border); }
.partner-faq-section .faq-item:hover { background: rgba(26, 143, 107, 0.03); }
.partner-faq-section .faq-item summary { padding: 18px 0; }
.partner-faq-section .faq-item summary::after { color: var(--accent); transition: transform 0.2s ease; }
.partner-faq-section .faq-item-body { max-width: 640px; padding: 0 28px 18px 0; }

@media (max-width: 600px) {
  .partner-faq-section { padding: 64px 20px 72px; }
  .partner-faq-layout { grid-template-columns: 1fr; gap: 44px; }
  .partner-faq-intro { position: static; }
  .partner-faq-intro > p,
  .partner-faq-section .faq-support-card { max-width: 520px; }
  .partner-faq-section .faq-list { max-width: 100%; }
}

/* Turnstile captcha on partner_login.html / partner_signup.html - same
   .cf-turnstile widget + data-size="flexible" pattern as the main site's
   signup.html, sized to fit the narrower .partner-auth-card. */
.partner-auth-card .captcha-wrap { margin: 4px 0 18px; max-width: 100%; overflow: hidden; }
.partner-auth-card .cf-turnstile,
.partner-auth-card .cf-turnstile iframe { max-width: 100%; }

/* Footer - landing.css's shared .footer-cols grid is hardcoded to exactly
   4 columns (brand + 3 link columns), but this page has a 4th link column
   (Partners/Product/Company/Legal) - with no 5th track the "Legal" column
   had nowhere to go and wrapped onto its own row under the brand column.
   Scoped override adds the missing track instead of touching the shared
   4-column layout every other page still relies on. */
.partner-footer-cols { grid-template-columns: 1.6fr repeat(4, 1fr); }
@media (max-width: 900px) {
  .partner-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ==========================================
   Landing page "Commission & Earnings" section - real Silver/Gold rates,
   real billing_plans.PRICE_MATRIX ("pk" region) prices, real payout method
   list. Self-contained (this page loads landing.css + partner.css only, not
   admin.css), so anything this block needs that admin.css would otherwise
   provide (.form-control, .table-scroll/table/th/td, a bare .hint) is
   redeclared here under its own scoped selector rather than assumed global.
   ========================================== */
/* Subtle brand-green wash behind the whole section (same "tinted, not
   flat white" treatment as the hero's blob gradients and the gold tier
   card's tint) - low-opacity radial washes rather than a solid fill,
   since this section is content-dense (table + lists) and needs to stay
   readable, not read as a hero moment. */
.partner-commission-section {
  padding: 96px 32px;
  background:
    radial-gradient(900px circle at 10% -8%, rgba(26, 143, 107, 0.07), transparent 55%),
    radial-gradient(760px circle at 100% 28%, rgba(13, 61, 52, 0.05), transparent 55%),
    var(--plane);
}
.partner-commission-inner { max-width: none; }
.partner-commission-intro { max-width: 560px; margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.partner-commission-intro a { color: var(--accent); font-weight: 600; text-decoration: none; }
.partner-commission-intro a:hover { text-decoration: underline; }
.partner-commission-section .hint { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; margin: 10px 0 0; }

/* Silver -> Gold progression card - reuses .partner-tier-badge's own
   is-silver/is-gold color language (built for the dashboard's tier banner)
   so the landing page and the dashboard read as the same visual system. */
.partner-commission-tiers {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
  margin: 44px 0 14px;
}
.partner-tier-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  animation: partner-tier-float 4.5s ease-in-out infinite;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.partner-tier-card:hover { box-shadow: var(--shadow-md); }
.partner-tier-card.is-silver { animation-delay: 0s; }
.partner-tier-card.is-gold {
  border-color: rgba(250, 178, 25, 0.4); background: linear-gradient(180deg, rgba(250, 178, 25, 0.06), var(--card) 60%);
  animation-delay: 0.4s;
}
.partner-tier-card .partner-tier-badge { margin-bottom: 14px; }
.partner-tier-rate { font-size: 40px; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 10px; }
.partner-tier-card.is-gold .partner-tier-rate { color: var(--warning-ink, #b3760b); }
.partner-tier-card p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.partner-tier-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ink-muted);
}
.partner-tier-arrow svg { color: var(--accent); animation: partner-tier-arrow-move 1.6s ease-in-out infinite; }
.partner-tier-arrow span { font-size: 11.5px; font-weight: 700; text-align: center; white-space: nowrap; letter-spacing: 0.02em; }

/* Silver->Gold "level up" motion: the cards breathe gently (Gold trails
   half a second behind Silver so they don't move in lockstep, reading as
   two distinct things rather than one duplicated tween) and the arrow
   between them nudges left-to-right on a loop - a small, literal "this
   leads to that" cue rather than just a static icon. */
@keyframes partner-tier-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes partner-tier-arrow-move {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@media (max-width: 640px) {
  /* Mobile stacks the arrow horizontally (rotated 90deg, see the layout
     media query further down) - the keyframe has to bake that rotation in
     itself, since an animated `transform` fully replaces the static
     rotate(90deg) rule below while it's running, it doesn't compose with it. */
  @keyframes partner-tier-arrow-move {
    0%, 100% { transform: rotate(90deg) translateX(0); }
    50% { transform: rotate(90deg) translateX(6px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .partner-tier-card, .partner-tier-arrow svg { animation: none; }
}
.partner-commission-tier-note { max-width: 640px; margin: 0 0 56px; color: var(--ink-muted); font-size: 13px; line-height: 1.6; }

/* Pricing table - industry tabs swap which real <tbody> is visible;
   table/th/td rules are scoped to .partner-commission-table since the
   bare element styles admin.css normally provides aren't loaded here. */
/* A thin brand->gold gradient strip along the top edge echoes the Silver->
   Gold story just above it and gives this card real shadow depth (shadow-md,
   not the flatter shadow-sm most static .partner-card surfaces use) so it
   doesn't read as a plain bordered box next to the animated tier cards. */
.partner-commission-table-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 30px 26px 26px; box-shadow: var(--shadow-md); margin-bottom: 24px;
}
.partner-commission-table-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--accent), rgba(250, 178, 25, 0.85));
}
.partner-commission-table-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.partner-commission-table-head h3 { margin: 0; font-size: 16px; color: var(--ink); }

/* Tabs - adapted from landing.css's .industries-tab pill component (the
   main site's own industry-switcher precedent) instead of the old flat
   segmented-control look, so this reads as the same tab language used
   elsewhere in the app rather than a third, disconnected style. */
.partner-commission-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-commission-tab {
  border: 1.5px solid var(--border); background: transparent; padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer;
  font-family: inherit; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.partner-commission-tab:hover { border-color: rgba(26, 143, 107, 0.35); color: var(--ink); }
.partner-commission-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.partner-commission-table-scroll { overflow-x: auto; }
.partner-commission-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.partner-commission-table th, .partner-commission-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.partner-commission-table thead th { background: var(--plane); color: var(--ink-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.partner-commission-table thead th:first-child { border-radius: 8px 0 0 8px; }
.partner-commission-table thead th:last-child { border-radius: 0 8px 8px 0; }
.partner-commission-table td { color: var(--ink-2); }
.partner-commission-table tbody tr:nth-child(even) td { background: rgba(20, 20, 15, 0.02); }
.partner-commission-table tbody tr:hover td { background: rgba(26, 143, 107, 0.06); }
.partner-commission-table tbody tr:last-child td { border-bottom: none; }
/* Gold-rate column is the most compelling number on the table, so it gets
   its own tinted background + warmer text down the whole column - the
   same warning-ink/gold token the tier cards use for Gold, kept a real
   accent instead of just being the 4th plain column. */
.partner-commission-table th:last-child, .partner-commission-table td:last-child {
  background: rgba(250, 178, 25, 0.09);
}
.partner-commission-table tbody tr:nth-child(even) td:last-child,
.partner-commission-table tbody tr:hover td:last-child { background: rgba(250, 178, 25, 0.14); }
.partner-commission-table td:last-child { color: var(--warning-ink, #b3760b); font-weight: 700; }
/* Numbered plan badges - Starter/Growth/Business already reads as a
   1-2-3 progression, so it gets the same numbered-circle treatment
   "How it works" uses (#partner-how .icon-wrap) instead of plain text. */
.partner-plan-cell { display: flex; align-items: center; gap: 10px; }
.partner-plan-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(26, 143, 107, 0.12); color: var(--brand);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.partner-commission-table td:first-child { color: var(--ink); font-weight: 600; }
/* Re-plays on every tab switch: an element newly un-hidden (display:none
   -> table-row-group) restarts its CSS animation, so no extra JS needed
   for the fade beyond the existing hidden-attribute toggle. */
@media (prefers-reduced-motion: no-preference) {
  .partner-commission-table tbody:not([hidden]) { animation: partner-panel-fade 0.25s ease; }
}
@keyframes partner-panel-fade { from { opacity: 0; } to { opacity: 1; } }

/* Calculator - custom range slider (no precedent elsewhere in this app to
   match, so this is a new but token-consistent component: brand-colored
   fill track + a plain circular thumb, same radius/shadow language as
   .partner-card everywhere else). --range-fill is set from JS on input. */
.partner-calc-card { margin-bottom: 24px; }
.partner-calc-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.partner-calc-select {
  width: 100%; padding: 10px 13px; font-size: 13.5px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink);
  cursor: pointer; transition: border-color 0.15s ease;
}
.partner-calc-select:hover { border-color: var(--ink-muted); }
.partner-range {
  --range-fill: 4%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 10px 0 4px;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--brand) var(--range-fill), var(--grid) var(--range-fill));
}
.partner-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--brand); box-shadow: var(--shadow-sm); cursor: pointer;
}
.partner-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--brand);
  background: var(--card); box-shadow: var(--shadow-sm); cursor: pointer;
}
.partner-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--grid); }
.partner-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--brand); }
.partner-range-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-muted); }
.partner-calc-result {
  background: var(--plane); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px 24px;
}
.partner-calc-result .partner-tier-badge { background: rgba(143, 140, 127, 0.18); color: var(--ink-2); margin-bottom: 14px; }
.partner-calc-result .partner-tier-badge.is-gold { background: rgba(250, 178, 25, 0.18); color: var(--warning-ink, #b3760b); }
.partner-calc-result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.partner-calc-result-row:first-of-type { border-top: none; }
.partner-calc-result-row span { font-size: 12.5px; color: var(--ink-muted); }
.partner-calc-result-row strong { font-size: 19px; color: var(--ink); }

/* Payout methods & trust - two-column card matching the same real,
   currently-active method list as partner_payout.html (Bank Transfer only;
   JazzCash/EasyPaisa/Payoneer all shown disabled/"Coming soon" there). */
.partner-commission-payout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.partner-commission-payout-methods, .partner-commission-payout-trust {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 26px; box-shadow: var(--shadow-sm);
}
/* Trust card gets a faint brand tint (same "gentle gradient over --card"
   formula as .partner-tier-card.is-gold) so the two payout cards don't sit
   on the exact same flat white next to each other. */
.partner-commission-payout-trust {
  background: linear-gradient(180deg, rgba(26, 143, 107, 0.05), var(--card) 55%);
  border-color: rgba(26, 143, 107, 0.18);
}
.partner-commission-payout h3 { margin: 0 0 14px; font-size: 15.5px; color: var(--ink); }
.partner-commission-payout-methods p { margin: 16px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.partner-payout-method-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.partner-payout-method-list li {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-muted); font-weight: 600;
}
.partner-payout-method-list li.is-active { color: var(--ink); }
.partner-payout-method-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grid); flex-shrink: 0; }
.partner-payout-method-list li.is-active .partner-payout-method-dot { background: var(--accent); }
.partner-payout-method-list li em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); }
.partner-payout-method-list li.is-active em { color: var(--accent); }
/* Numbered badges - same treatment as .partner-mini-step-num / #partner-how's
   icon-wrap (a filled brand circle with the number centered), so a 3-item
   trust list reads as a sequence instead of three unmarked bullet-less <li>s. */
.partner-trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.partner-trust-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.partner-trust-num {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.partner-trust-list li strong { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }

@media (max-width: 760px) {
  .partner-commission-section { padding: 64px 20px; }
  .partner-commission-tiers { grid-template-columns: 1fr; }
  .partner-tier-arrow { flex-direction: row; }
  .partner-tier-arrow svg { transform: rotate(90deg); }
  .partner-calc-grid { grid-template-columns: 1fr; gap: 24px; }
  .partner-commission-payout { grid-template-columns: 1fr; }
  .partner-commission-table th, .partner-commission-table td { white-space: normal; }
}