/*
  TWP V2 PORTAL — AFFILIATE: the Affiliate Area (AffiliateWP's dashboard shortcode inside Pat's page).

  Logged out: AffiliateWP's own notice and Pat's rule about brand keywords (his alert, in sentence case), with the ways
  in. Logged in: AffiliateWP's tabs as one segmented row, each tab's content in the V2 ledger — the statistics' figures
  in the serif, the referral URL generator as a form panel. Built from AffiliateWP 2.x's own class names; staging E1–E4
  shows Pat's real tabs.
*/

/* Pat's spacer paragraphs ( ) above the notice: compressed, not hidden (CSS can't tell them from words) */
body.twp-v2-portal.twp-pt-g-affiliate #wrapper #main .fusion-text > p:not(:has(*)) {
  margin: 0 !important;
  line-height: 0.75 !important;
}
body.twp-v2-portal.twp-pt-g-affiliate #wrapper #main .fusion-text > p:empty {
  display: none;
}
body.twp-v2-portal.twp-pt-g-affiliate #wrapper #main p.affwp-notice {
  max-width: 760px;
  font-size: var(--pt-fs-lead) !important;
}
/* Pat's rule for affiliates (a builder alert, in capitals on his page): the warm notice, in sentence case */
body.twp-v2-portal.twp-pt-g-affiliate #wrapper #main .fusion-alert {
  max-width: 760px;
  margin-top: 18px !important;
  border-radius: 14px !important;
}
body.twp-v2-portal.twp-pt-g-affiliate #wrapper #main .fusion-alert .fusion-alert-content {
  text-transform: none !important;
}

/* ── The dashboard ────────────────────────────────────────────────────────────────────────────── */

body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard {
  margin: 0;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 30px !important;
  padding: 4px !important;
  border: 1px solid var(--pt-hair) !important;
  border-radius: 999px;
  list-style: none !important;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgb(255 255 255 / 0.025);
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs::-webkit-scrollbar {
  display: none;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li {
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  list-style: none !important;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li::before {
  content: none !important;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li a {
  display: flex !important;
  align-items: center;
  min-height: 40px;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px;
  background: none !important;
  font-size: var(--pt-fs-small) !important;
  font-weight: 600 !important;
  white-space: nowrap;
  color: var(--pt-ink-2) !important;
  text-decoration: none !important;
  transition: color 160ms var(--pt-ease), background-color 160ms var(--pt-ease);
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li a:hover {
  color: var(--pt-ivory) !important;
  background: rgb(255 255 255 / 0.04) !important;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li.active a {
  background: var(--pt-ivory) !important;
  color: var(--pt-deep) !important;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard h4 {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--pt-serif) !important;
  font-size: clamp(28px, 2.6vw, 36px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard .affwp-tab-content > p {
  font-size: var(--pt-fs-body) !important;
  color: var(--pt-ink-2) !important;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard .affwp-tab-content > p strong {
  font-family: var(--pt-mono) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pt-ivory);
  overflow-wrap: anywhere;
}
/* the URL generator: a form panel */
body.twp-v2-portal #wrapper #main form#affwp-generate-ref-url {
  display: grid;
  gap: var(--pt-gap-fields);
  max-width: 720px;
  margin-top: 18px !important;
  padding: clamp(22px, 2.6vw, 30px) !important;
  border: 1px solid var(--pt-hair);
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.012));
}
body.twp-v2-portal #wrapper #main form#affwp-generate-ref-url label {
  display: block;
  margin: 0 0 8px !important;
  font-size: var(--pt-fs-flabel) !important;
  font-weight: 500 !important;
  color: var(--pt-ink-2) !important;
}
body.twp-v2-portal #wrapper #main form#affwp-generate-ref-url #affwp-referral-url {
  font-family: var(--pt-mono) !important;
  font-size: 15px !important;
}
body.twp-v2-portal #wrapper #main form#affwp-generate-ref-url .description {
  margin-top: 6px;
  font-size: var(--pt-fs-small);
  color: var(--pt-ink-3);
}
body.twp-v2-portal #wrapper #main form#affwp-generate-ref-url input[type="submit"] {
  justify-self: start;
  border-color: var(--pt-ivory) !important;
  background: var(--pt-ivory) !important;
  color: var(--pt-deep) !important;
}
/* the statistics: each table's figures in the serif, their labels in mono */
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard-referral-counts table.affwp-table td {
  font-family: var(--pt-serif) !important;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.1;
  color: var(--pt-ivory) !important;
}
body.twp-v2-portal #wrapper #main #affwp-affiliate-dashboard-referral-counts table.affwp-table:last-child td {
  font-family: var(--pt-sans) !important;
  font-size: var(--pt-fs-body) !important;
}
body.twp-v2-portal #wrapper #main :is(.affwp-card, .affwp-affiliate-link, .affwp-creative:not(.affwp-creatives-view .affwp-creative)) {
  margin: 0 0 20px !important;
  padding: 20px !important;
  border: 1px solid var(--pt-hair) !important;
  border-radius: 14px !important;
  background: var(--pt-panel-ground) !important;
  box-shadow: none !important;
  color: var(--pt-ink-1) !important;
}
body.twp-v2-portal #wrapper #main :is(.affwp-affiliate-link__display, .affwp-affiliate-link__input, .affwp-creative pre, .affwp-creative code) {
  font-family: var(--pt-mono) !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  color: var(--pt-ivory) !important;
  background: rgb(255 255 255 / 0.04) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pt-field-line) !important;
  border-radius: 2px 2px 0 0 !important;
  word-break: break-all;
}
body.twp-v2-portal #wrapper #main :is(.affwp-graph, #affwp-graphs-filter) {
  max-width: 100%;
  overflow-x: auto;
}
body.twp-v2-portal #wrapper #main .referral-status.unpaid,
body.twp-v2-portal #wrapper #main .referral-status.pending {
  color: var(--pt-gold) !important;
}
body.twp-v2-portal #wrapper #main .referral-status.paid {
  color: var(--pt-cyan) !important;
}
body.twp-v2-portal #wrapper #main .visit-converted.yes i::before {
  color: var(--pt-cyan) !important;
}
body.twp-v2-portal #wrapper #main .visit-converted.no i::before {
  color: var(--pt-ink-3) !important;
}
body.twp-v2-portal .tippy-box[data-theme~="affwp"] {
  border: 1px solid var(--pt-rule-strong) !important;
  border-radius: 8px !important;
  background: var(--pt-panel) !important;
  color: var(--pt-ivory) !important;
}