/* =====================================================================
   Portal — shared styles for the wholesale + affiliate APPLICATION FORMS
   and the affiliate DASHBOARD (My Account). Purple system, consistent with
   the rest of the store. Scoped under body.vp-dark; tokens from vp.css.
   Uniquely prefixed (.vp-ws-*, .vp-aff-*) so nothing leaks or collides.
   ===================================================================== */

/* ── Honeypot (spam trap) — hidden from humans + AT ────────────────── */
body.vp-dark .vp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Notices ───────────────────────────────────────────────────────── */
body.vp-dark .vp-ws-notice,
body.vp-dark .vp-aff-notice {
  font-family: var(--vp-font-sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--vp-body);
  padding: 1rem 1.2rem;
  border-radius: var(--vp-radius-lg);
  border: 1px solid var(--vp-line-2);
  background: var(--vp-surface);
  margin: 0 0 1.5rem;
}
body.vp-dark .vp-ws-notice strong,
body.vp-dark .vp-aff-notice strong { color: var(--vp-white); }
body.vp-dark .vp-ws-notice a,
body.vp-dark .vp-aff-notice a { color: var(--vp-primary-light); font-weight: 600; }
body.vp-dark .vp-ws-notice--ok,
body.vp-dark .vp-aff-notice--ok { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.08); }
body.vp-dark .vp-ws-notice--pending,
body.vp-dark .vp-aff-notice--pending { border-color: rgba(var(--vp-primary-rgb), 0.4); background: rgba(var(--vp-primary-rgb), 0.1); }
body.vp-dark .vp-ws-notice--err,
body.vp-dark .vp-aff-notice--err { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.09); }

/* ── Application forms (wholesale + affiliate) ─────────────────────── */
body.vp-dark .vp-ws-form-wrap,
body.vp-dark .vp-aff-form-wrap { max-width: 760px; margin: 0 auto; }

body.vp-dark .vp-ws-form,
body.vp-dark .vp-aff-form {
  background: var(--vp-surface);
  border: 1px solid var(--vp-line);
  border-radius: var(--vp-radius-lg);
  padding: 2.25rem;
  box-shadow: var(--vp-shadow);
}
body.vp-dark .vp-ws-grid,
body.vp-dark .vp-aff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 1.25rem;
}
body.vp-dark .vp-ws-field--full,
body.vp-dark .vp-aff-field--full { grid-column: 1 / -1; }
body.vp-dark .vp-ws-field,
body.vp-dark .vp-aff-field { margin: 0; }
body.vp-dark .vp-ws-field label,
body.vp-dark .vp-aff-field label {
  display: block;
  font-family: var(--vp-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vp-gray-400);
  margin-bottom: 0.4rem;
}
body.vp-dark .vp-ws-field label span,
body.vp-dark .vp-aff-field label span { color: var(--vp-primary-light); }

body.vp-dark .vp-ws-form input[type="text"],
body.vp-dark .vp-ws-form input[type="email"],
body.vp-dark .vp-ws-form input[type="password"],
body.vp-dark .vp-ws-form select,
body.vp-dark .vp-ws-form textarea,
body.vp-dark .vp-aff-form input[type="text"],
body.vp-dark .vp-aff-form input[type="email"],
body.vp-dark .vp-aff-form input[type="password"],
body.vp-dark .vp-aff-form textarea {
  width: 100%;
  font-family: var(--vp-font-sans);
  font-size: 0.95rem;
  color: var(--vp-ink);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--vp-line-2);
  border-radius: var(--vp-radius);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--vp-transition), box-shadow var(--vp-transition);
}
body.vp-dark .vp-ws-form textarea,
body.vp-dark .vp-aff-form textarea { resize: vertical; min-height: 96px; }
body.vp-dark .vp-ws-form input:focus,
body.vp-dark .vp-ws-form select:focus,
body.vp-dark .vp-ws-form textarea:focus,
body.vp-dark .vp-aff-form input:focus,
body.vp-dark .vp-aff-form textarea:focus {
  outline: none;
  border-color: rgba(var(--vp-primary-rgb), 0.6);
  box-shadow: 0 0 0 3px var(--vp-primary-glow);
}
body.vp-dark .vp-ws-form input[readonly],
body.vp-dark .vp-aff-form input[readonly] { opacity: 0.7; cursor: not-allowed; }
body.vp-dark .vp-ws-hint,
body.vp-dark .vp-aff-hint {
  display: block; margin-top: 0.35rem;
  font-size: 0.76rem; color: var(--vp-gray-500); font-family: var(--vp-font-sans);
}

/* Consent checkbox row. */
body.vp-dark .vp-ws-consent label,
body.vp-dark .vp-aff-consent label {
  display: flex; align-items: flex-start; gap: 0.55rem;
  text-transform: none; letter-spacing: 0; font-family: var(--vp-font-sans);
  font-size: 0.85rem; font-weight: 400; color: var(--vp-body); line-height: 1.5;
}
body.vp-dark .vp-ws-consent input,
body.vp-dark .vp-aff-consent input { margin-top: 0.2rem; accent-color: var(--vp-primary); }

/* Submit — matches the site CTA (dark → purple gradient, lavender ring). */
body.vp-dark .vp-ws-submit,
body.vp-dark .vp-aff-submit {
  margin-top: 1.6rem;
  display: inline-block;
  font-family: var(--vp-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vp-white);
  background: var(--vp-grad);
  border: 1px solid var(--vp-btn-border);
  border-radius: var(--vp-radius);
  padding: 0.85rem 2.4rem;
  cursor: pointer;
  transition: transform var(--vp-transition), box-shadow var(--vp-transition);
  box-shadow: 0 0 0 0 rgba(var(--vp-primary-rgb), 0.5);
}
body.vp-dark .vp-ws-submit:hover,
body.vp-dark .vp-aff-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(var(--vp-primary-rgb), 0.7); }

body.vp-dark .vp-ws-login-hint,
body.vp-dark .vp-aff-login-hint { margin: 1rem 0 0; font-size: 0.83rem; color: var(--vp-gray-500); }
body.vp-dark .vp-ws-login-hint a,
body.vp-dark .vp-aff-login-hint a { color: var(--vp-primary-light); font-weight: 600; }

/* ── Affiliate dashboard (inside My Account) ──────────────────────── */
body.vp-dark .vp-aff-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
body.vp-dark .vp-aff-share-block {
  background: var(--vp-surface);
  border: 1px solid var(--vp-line);
  border-radius: var(--vp-radius-lg);
  padding: 1.25rem;
}
body.vp-dark .vp-aff-share-label {
  display: block;
  font-family: var(--vp-font-display);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--vp-gray-400); margin-bottom: 0.6rem;
}
body.vp-dark .vp-aff-copy { display: flex; gap: 0.5rem; }
body.vp-dark .vp-aff-copy-input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--vp-font-mono, monospace);
  font-size: 0.85rem; color: var(--vp-ink);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--vp-line-2);
  border-radius: var(--vp-radius);
  padding: 0.6rem 0.7rem;
}
body.vp-dark .vp-aff-copy-code { font-weight: 700; letter-spacing: 0.05em; color: var(--vp-primary-light); }
body.vp-dark .vp-aff-copy-btn {
  flex: 0 0 auto;
  font-family: var(--vp-font-display); font-size: 0.8rem; font-weight: 700;
  color: var(--vp-white); background: var(--vp-primary);
  border: 1px solid var(--vp-btn-border); border-radius: var(--vp-radius);
  padding: 0 1rem; cursor: pointer; transition: background var(--vp-transition);
}
body.vp-dark .vp-aff-copy-btn:hover { background: var(--vp-primary-mid); }
body.vp-dark .vp-aff-copy-btn.is-copied { background: var(--vp-success); border-color: var(--vp-success); }
body.vp-dark .vp-aff-share-hint { display: block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--vp-gray-500); }

/* Stat cards. */
body.vp-dark .vp-aff-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem;
}
body.vp-dark .vp-aff-stat {
  background: var(--vp-surface); border: 1px solid var(--vp-line);
  border-radius: var(--vp-radius-lg); padding: 1.15rem 1rem; text-align: center;
}
body.vp-dark .vp-aff-stat-val {
  display: block; font-family: var(--vp-font-display); font-size: 1.5rem; font-weight: 800;
  color: var(--vp-primary-light); letter-spacing: -0.02em; line-height: 1.1;
}
body.vp-dark .vp-aff-stat-val .woocommerce-Price-amount { color: var(--vp-primary-light); }
body.vp-dark .vp-aff-stat-lbl {
  display: block; margin-top: 0.35rem; font-family: var(--vp-font-display);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-gray-500);
}

body.vp-dark .vp-aff-h3 {
  font-family: var(--vp-font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--vp-white); margin: 0 0 1rem;
}
body.vp-dark .vp-aff-empty { color: var(--vp-gray-500); font-size: 0.9rem; }

/* Referrals table. */
body.vp-dark .vp-aff-table { width: 100%; border-collapse: collapse; font-family: var(--vp-font-sans); font-size: 0.88rem; }
body.vp-dark .vp-aff-table thead th {
  text-align: left; font-family: var(--vp-font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-white);
  background: rgba(var(--vp-primary-rgb), 0.16);
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--vp-line-2);
}
body.vp-dark .vp-aff-table tbody td { padding: 0.7rem 0.9rem; color: var(--vp-body); border-bottom: 1px solid var(--vp-line); }
body.vp-dark .vp-aff-table tbody tr:hover td { background: var(--vp-surface); }
body.vp-dark .vp-aff-badge {
  display: inline-block; font-family: var(--vp-font-display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: var(--vp-radius-pill);
}
body.vp-dark .vp-aff-badge--pending { color: #ffcf8a; background: rgba(255, 176, 32, 0.14); border: 1px solid rgba(255, 176, 32, 0.4); }
body.vp-dark .vp-aff-badge--ok { color: #86efac; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.4); }
body.vp-dark .vp-aff-badge--void { color: var(--vp-gray-500); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--vp-line-2); }
body.vp-dark .vp-aff-payout-note { margin-top: 1.5rem; font-size: 0.82rem; color: var(--vp-gray-500); }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body.vp-dark .vp-ws-form,
  body.vp-dark .vp-aff-form { padding: 1.5rem; }
  body.vp-dark .vp-ws-grid,
  body.vp-dark .vp-aff-grid { grid-template-columns: 1fr; }
  body.vp-dark .vp-aff-share { grid-template-columns: 1fr; }
  body.vp-dark .vp-aff-stats { grid-template-columns: 1fr 1fr; }
}