/* Backsta — affiliate.css (Programm-Info, Anmelde-Form, Dashboard) */

/* Programm-Info */
.affiliate-perks {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
  margin-bottom: var(--space-9);
}
.perk { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-7); }
.perk__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--navy-soft); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: var(--space-4); }
.perk h3 { font-size: 18px; margin-bottom: var(--space-2); }
@media (max-width: 760px) { .affiliate-perks { grid-template-columns: 1fr; } }

/* Dashboard */
.affiliate-dashboard { padding-top: 60px; }

.aff-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-5);
}
.stat-card--accent { border-color: var(--navy); background: var(--navy); color: #fff; }
.stat-card--accent .stat-card__label,
.stat-card--accent .stat-card__sub { color: rgba(255,255,255,0.7); }
.stat-card__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); }
.stat-card__value { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.stat-card__sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (max-width: 760px) { .aff-stats { grid-template-columns: 1fr 1fr; } }

.aff-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-7); margin-bottom: var(--space-5); }
.aff-card h2 { font-size: 18px; margin-bottom: var(--space-3); }
.aff-card .bks-desc { font-size: 14px; color: var(--muted); margin-bottom: var(--space-4); }
.aff-card .empty { color: var(--muted); padding: var(--space-5) 0; }

.aff-link-row { display: flex; gap: var(--space-3); align-items: center; }
.aff-link {
  flex: 1; padding: 11px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border); font-family: var(--font-mono); font-size: 13px;
  background: var(--navy-soft); color: var(--navy);
}
.aff-deep { margin-top: var(--space-5); }
.aff-deep summary { padding: var(--space-3); cursor: pointer; font-weight: 500; color: var(--navy); }
.aff-link-list { list-style: none; padding: var(--space-3) 0 0; }
.aff-link-list li { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); padding: var(--space-2) 0; align-items: center; }
.aff-link-list strong { font-size: 13px; color: var(--ink); }
.aff-link-list input { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; background: var(--navy-soft); color: var(--navy); }

.aff-sales-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.aff-sales-table th, .aff-sales-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--border); }
.aff-sales-table th { background: var(--navy-soft); color: var(--navy); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.aff-sales-table code { background: var(--navy-soft); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 12px; }

.status-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: 0.04em; text-transform: uppercase; }
.status-pill--pending { background: #fef3c7; color: #92400e; }
.status-pill--paid    { background: #dcfce7; color: var(--green); }
.status-pill--cancelled { background: #fef2f2; color: var(--red); }

.payout-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 480px; }
.payout-form label { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; display: block; }
.payout-form select,
.payout-form input { width: 100%; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 15px; font-family: inherit; }