/* ════════════════════════════════════════════════════════════════
   PROSPERX REWARDS — Frontend Stylesheet
   Mobile-first. All classes prefixed `prosperx-` for safety.
═══════════════════════════════════════════════════════════════════ */

:root {
  --pr-purple:    #8f67ff;
  --pr-purple-d:  #6b3fff;
  --pr-text:      #1a1a2e;
  --pr-muted:     #6b7280;
  --pr-border:    rgba(0,0,0,0.08);
  --pr-bg-soft:   #f8f7ff;
  --pr-success:   #5ece75;
  --pr-warn:      #f59e0b;
  --pr-danger:    #e05252;
}

/* ───────── DASHBOARD INJECTION ───────── */

.prosperx-dash-rewards {
  margin: 0 0 24px;
  font-family: inherit;
}

.prosperx-tier-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc, #8f67ff) 18%, transparent), color-mix(in srgb, var(--tc, #8f67ff) 5%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--tc, #8f67ff) 40%, transparent);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .prosperx-tier-banner {
    background: rgba(143, 103, 255, 0.10);
    border-color: rgba(143, 103, 255, 0.40);
  }
}

.prosperx-tier-banner-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.prosperx-tier-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--tc, var(--pr-purple));
  text-transform: uppercase;
  margin-bottom: 4px;
}
.prosperx-tier-headline {
  margin: 0 0 4px;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--pr-text);
  line-height: 1.2;
}
.prosperx-tier-sub {
  margin: 4px 0 0;
  color: var(--pr-muted);
  font-size: 0.88rem;
}

.prosperx-tier-meter {
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--pr-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.prosperx-tier-meter-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--pr-text);
}
.prosperx-tier-meter-track {
  margin-top: 10px;
  height: 9px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.prosperx-tier-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
  background: linear-gradient(90deg, var(--tc, var(--pr-purple)), var(--pr-purple));
}
.prosperx-tier-meter-pct {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--pr-muted);
}

/* ───────── BALANCE CARDS ───────── */
.prosperx-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.prosperx-balance-grid-lg {
  margin-bottom: 0;
}
.prosperx-balance-card {
  background: #fff;
  border: 1.5px solid var(--pr-border);
  border-radius: 14px;
  padding: 20px;
}
.prosperx-points-card {
  background: linear-gradient(135deg, rgba(143,103,255,0.06), transparent);
  border-color: rgba(143,103,255,0.30);
}
.prosperx-credit-card {
  background: linear-gradient(135deg, rgba(94,206,117,0.05), transparent);
  border-color: rgba(94,206,117,0.25);
}
.prosperx-balance-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prosperx-balance-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-purple);
}
.prosperx-credit-card .prosperx-balance-label {
  color: #2d8847;
}
.prosperx-saved-forever {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pr-success);
  background: rgba(94,206,117,0.10);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(94,206,117,0.30);
}
.prosperx-balance-num {
  margin-top: 6px;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--pr-text);
  line-height: 1;
}
.prosperx-balance-sub {
  margin-top: 6px;
  color: var(--pr-muted);
  font-size: 0.88rem;
}
.prosperx-balance-meta {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--pr-muted);
}
.prosperx-balance-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--pr-purple);
  text-decoration: none;
}
.prosperx-credit-card .prosperx-balance-link {
  color: #2d8847;
}

/* ───────── QUICK NAV (dashboard) ───────── */
.prosperx-portal-quicknav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.prosperx-quicknav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--pr-border);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
  min-height: 60px;
}
.prosperx-quicknav-card:hover {
  transform: translateY(-2px);
  border-color: rgba(143,103,255,0.40);
}
.prosperx-quicknav-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.prosperx-quicknav-card strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--pr-text);
}
.prosperx-quicknav-card small {
  display: block;
  font-size: 0.74rem;
  color: var(--pr-muted);
  margin-top: 2px;
}

/* ───────── REWARDS PAGE ───────── */
.prosperx-rewards-page,
.prosperx-vault-page,
.prosperx-tracking-page {
  font-family: inherit;
  color: var(--pr-text);
}
.prosperx-page-eyebrow {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pr-purple);
  margin-bottom: 4px;
}
.prosperx-page-h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.prosperx-page-lead {
  color: var(--pr-muted);
  margin: 0 0 22px;
  font-size: 0.96rem;
  line-height: 1.5;
}

.prosperx-tier-perks-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.prosperx-tier-perks-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--pr-border);
  font-size: 0.92rem;
}
.prosperx-tier-perks-list li:last-child { border-bottom: 0; }

/* ───────── REFERRAL ───────── */
.prosperx-referral-card {
  background: linear-gradient(135deg, rgba(143,103,255,0.06), transparent);
  border: 1.5px solid var(--pr-border);
  border-radius: 14px;
  padding: 22px;
  margin: 18px 0;
}
.prosperx-referral-card h3 {
  margin: 6px 0 8px;
  font-size: 1.2rem;
  font-weight: 900;
}
.prosperx-referral-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.prosperx-referral-url {
  flex: 1;
  min-width: 200px;
  background: rgba(143,103,255,0.08);
  border: 1.5px solid rgba(143,103,255,0.30);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: ui-monospace, monospace;
  font-size: 0.86rem;
  overflow: auto;
  word-break: break-all;
}

/* ───────── HISTORY ───────── */
.prosperx-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.prosperx-history-card {
  background: #fff;
  border: 1.5px solid var(--pr-border);
  border-radius: 14px;
  overflow: hidden;
}
.prosperx-history-card h3 {
  margin: 0;
  padding: 14px 18px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--pr-border);
  background: var(--pr-bg-soft);
}
.prosperx-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--pr-border);
  gap: 12px;
}
.prosperx-history-row:last-child { border-bottom: 0; }
.prosperx-history-row > div { flex: 1; min-width: 0; }
.prosperx-history-row strong { display: block; font-size: 0.88rem; color: var(--pr-text); }
.prosperx-history-row span { display: block; font-size: 0.74rem; color: var(--pr-muted); margin-top: 2px; }
.prosperx-history-delta { white-space: nowrap; font-weight: 800; font-size: 0.92rem; }
.prosperx-history-delta.pos { color: var(--pr-success); }
.prosperx-history-delta.neg { color: var(--pr-danger); }
.prosperx-empty {
  padding: 24px 18px;
  color: var(--pr-muted);
  font-size: 0.92rem;
}

/* ───────── VAULT ───────── */
.prosperx-vault-section-h {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 24px 0 12px;
}
.prosperx-vault-empty {
  padding: 30px 24px;
  text-align: center;
  background: #fff;
  border: 1.5px solid var(--pr-border);
  border-radius: 14px;
  color: var(--pr-muted);
}
.prosperx-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.prosperx-vault-card {
  position: relative;
  border-radius: 14px;
  padding: 20px;
}
.prosperx-vault-card-available {
  background: linear-gradient(135deg, rgba(143,103,255,0.08), rgba(180,79,255,0.04));
  border: 1.5px solid rgba(143,103,255,0.40);
}
.prosperx-vault-card-locked {
  background: rgba(0,0,0,0.02);
  border: 1.5px dashed var(--pr-border);
  opacity: 0.75;
}
.prosperx-vault-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
.prosperx-vault-amount {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--pr-purple);
  letter-spacing: -0.02em;
}
.prosperx-vault-card-locked .prosperx-vault-amount { color: var(--pr-muted); }
.prosperx-vault-tagline {
  margin: 4px 0 14px;
  color: var(--pr-text);
  font-size: 0.92rem;
  line-height: 1.4;
}
.prosperx-vault-code {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px dashed rgba(143,103,255,0.50);
  border-radius: 10px;
  padding: 8px 12px;
}
.prosperx-vault-code code {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--pr-text);
}

/* ───────── TRACKING PAGE ───────── */
.prosperx-tracking-section-h {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.prosperx-tracking-empty {
  background: #fff;
  border: 1.5px dashed var(--pr-border);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
}
.prosperx-tracking-empty-icon {
  font-size: 3rem;
  margin-bottom: 6px;
}
.prosperx-tracking-empty h3 {
  margin: 6px 0;
  font-size: 1.2rem;
  font-weight: 800;
}
.prosperx-tracking-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.prosperx-tracking-card {
  background: #fff;
  border: 1.5px solid var(--pr-border);
  border-radius: 16px;
  padding: 20px;
  transition: border-color 0.18s ease;
}
.prosperx-tracking-card:hover {
  border-color: rgba(143,103,255,0.40);
}
.prosperx-tracking-card-pending {
  border-style: dashed;
}
.prosperx-tracking-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.prosperx-tracking-card-head strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--pr-text);
}
.prosperx-tracking-carrier-pill {
  display: inline-block;
  background: var(--pr-purple);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.prosperx-pending-pill {
  background: var(--pr-warn);
}
.prosperx-tracking-card-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--pr-muted);
}
.prosperx-tracking-order-link {
  color: var(--pr-purple);
  font-weight: 700;
  text-decoration: none;
}

.prosperx-tracking-number-block {
  background: var(--pr-bg-soft);
  border: 1.5px solid var(--pr-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
}
.prosperx-tracking-number-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pr-muted);
  margin-bottom: 8px;
}
.prosperx-tracking-number-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.prosperx-tracking-number {
  flex: 1;
  min-width: 200px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--pr-text);
  word-break: break-all;
}
.prosperx-tracking-copy {
  background: #fff;
  color: var(--pr-purple);
  border: 1.5px solid var(--pr-purple);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
  transition: all 0.18s ease;
}
.prosperx-tracking-copy:hover {
  background: var(--pr-purple);
  color: #fff;
}
.prosperx-tracking-copy.is-copied {
  background: var(--pr-success);
  border-color: var(--pr-success);
  color: #fff;
}

.prosperx-tracking-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.prosperx-tracking-track-btn {
  flex: 1;
  min-width: 200px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.prosperx-tracking-details {
  margin-top: 14px;
  background: rgba(143,103,255,0.04);
  border: 1px solid rgba(143,103,255,0.20);
  border-radius: 10px;
  padding: 0 14px;
}
.prosperx-tracking-details summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pr-purple);
  list-style: none;
}
.prosperx-tracking-details summary::-webkit-details-marker { display: none; }
.prosperx-tracking-details summary::before {
  content: "▸ ";
  margin-right: 4px;
}
.prosperx-tracking-details[open] summary::before {
  content: "▾ ";
}
.prosperx-tracking-details ol {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 0.86rem;
  line-height: 1.6;
}
.prosperx-tracking-details p {
  margin: 8px 0 14px;
  font-size: 0.86rem;
  color: var(--pr-muted);
  line-height: 1.5;
}
.prosperx-tracking-details a { color: var(--pr-purple); }

.prosperx-tracking-footer {
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--pr-bg-soft);
  border: 1px solid var(--pr-border);
  border-radius: 12px;
  text-align: center;
  font-size: 0.88rem;
}
.prosperx-tracking-footer strong { display: block; margin-bottom: 4px; color: var(--pr-text); }
.prosperx-tracking-footer p { margin: 0; color: var(--pr-muted); font-size: 0.84rem; }
.prosperx-tracking-footer a { color: var(--pr-purple); font-weight: 700; }

/* ───────── BUTTONS ───────── */
.prosperx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: var(--pr-purple);
  border: 1.5px solid var(--pr-purple);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.prosperx-btn:hover {
  background: var(--pr-purple);
  color: #fff;
}
.prosperx-btn-primary {
  background: linear-gradient(135deg, var(--pr-purple), var(--pr-purple-d));
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(143, 103, 255, 0.30);
}
.prosperx-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(143, 103, 255, 0.40);
  color: #fff;
}
.prosperx-copy-btn.is-copied {
  background: var(--pr-success);
  color: #fff;
  border-color: var(--pr-success);
}

/* ───────── CHECKOUT REWARDS BLOCK ───────── */
.prosperx-checkout-rewards {
  background: linear-gradient(135deg, rgba(143,103,255,0.08), rgba(180,79,255,0.04));
  border: 1.5px solid rgba(143,103,255,0.30);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 14px 0;
}
.prosperx-checkout-rewards.prosperx-guest {
  background: rgba(143,103,255,0.06);
  border-style: dashed;
}
.prosperx-earn-line {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.prosperx-earn-emoji { font-size: 1.2rem; }
.prosperx-muted { color: var(--pr-muted); font-size: 0.85rem; }
.prosperx-tier-line {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.prosperx-tier-bump {
  background: rgba(143,103,255,0.15);
  border: 1px solid rgba(143,103,255,0.40);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.86rem;
}
.prosperx-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 0;
  border-top: 1px solid rgba(143,103,255,0.15);
  font-size: 0.9rem;
}
.prosperx-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--pr-purple);
  flex-shrink: 0;
}

/* ───────── PDP POINTS PILL ───────── */
.prosperx-pdp-points {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 8px 14px;
  background: rgba(143,103,255,0.08);
  border: 1px solid rgba(143,103,255,0.30);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pr-text);
}

/* ───────── MOBILE OPTIMIZATIONS ───────── */
@media (max-width: 768px) {
  .prosperx-dash-rewards { margin-bottom: 18px; }
  .prosperx-tier-banner { padding: 16px; border-radius: 14px; }
  .prosperx-balance-card { padding: 16px; }
  .prosperx-balance-num { font-size: 1.9rem; }
  .prosperx-balance-grid { grid-template-columns: 1fr; gap: 10px; }
  .prosperx-portal-quicknav { grid-template-columns: 1fr; }
  .prosperx-tracking-card { padding: 16px; }
  .prosperx-tracking-card-head { flex-direction: column; align-items: flex-start; }
  .prosperx-tracking-number-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .prosperx-tracking-copy,
  .prosperx-tracking-track-btn { width: 100%; }
  .prosperx-tracking-number { font-size: 1.1rem; min-width: 0; }
  .prosperx-vault-grid { grid-template-columns: 1fr; }
  .prosperx-history-grid { grid-template-columns: 1fr; }
  .prosperx-referral-row { flex-direction: column; align-items: stretch; }
  .prosperx-referral-url { width: 100%; }
}

@media (max-width: 380px) {
  .prosperx-tier-headline { font-size: 1.1rem; }
  .prosperx-balance-num { font-size: 1.7rem; }
  .prosperx-tracking-number { font-size: 0.98rem; letter-spacing: 0.04em; }
}