/* ================================================================
   Me2You - Seller fees page (app/seller/fees.php)
   Public marketing-style explanation of the commission model.
   Three white card sections: fee schedule table, worked example
   table, and a five-step "when you get paid" ordered list. Footer
   row of CTAs (start a listing, browse auctions, lay-bye, profile).
   Tokens from site.css.
   ================================================================ */

/* -- Page wrapper ---------------------------------------------- */
.seller-fees-wrap {
  max-width: 880px;
}

/* -- Header ---------------------------------------------------- */
.seller-fees-wrap > .mb-4 a.text-muted {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--duration-fast) var(--ease-out);
}

.seller-fees-wrap > .mb-4 a.text-muted:hover,
.seller-fees-wrap > .mb-4 a.text-muted:focus {
  color: var(--brand-orange-700);
}

.seller-fees-wrap h1.display-5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: var(--ink-900);
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

.seller-fees-wrap p.lead {
  font-size: var(--fs-h4);
  line-height: 1.55;
  color: var(--ink-700);
}

.seller-fees-wrap .lead.text-muted {
  /* Was --ink-500 (#6B5E55): too tinted/pale on the cream page. Use the
     near-neutral body ink-700 (#3D342E) so the intro clears 4.5:1. */
  color: var(--ink-700);
}

/* -- Section cards --------------------------------------------- */
.seller-fees-wrap .card {
  background: var(--paper);
  border: var(--border-thin) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.seller-fees-wrap .card-body {
  padding: var(--space-5);
}

@media (min-width: 768px) {
  .seller-fees-wrap .card-body {
    padding: var(--space-6);
  }
}

.seller-fees-wrap .card-body h2.h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
}

/* -- Fee tables ------------------------------------------------ */
.seller-fees-wrap .table {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.seller-fees-wrap .table thead th {
  background: var(--ink-100);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-500);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
}

.seller-fees-wrap .table tbody td {
  padding: var(--space-3) var(--space-4);
  border-color: var(--ink-100);
  vertical-align: middle;
}

.seller-fees-wrap .table tbody tr:hover {
  background: var(--brand-orange-50);
}

.seller-fees-wrap .table strong {
  color: var(--ink-900);
  font-weight: 700;
}

.seller-fees-wrap .table .text-muted.small {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.seller-fees-wrap .table tr.border-top td {
  border-top: 2px solid var(--ink-200);
  background: var(--ink-100);
}

.seller-fees-wrap .table tr.text-success td {
  color: var(--status-paid-fg) !important;
  background: var(--success-100);
  font-weight: 700;
}

/* -- Free badge in the fee table ------------------------------- */
.seller-fees-wrap .table .badge.bg-success {
  background: var(--success) !important;
  color: var(--paper) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

/* -- Ordered list (when you get paid) -------------------------- */
.seller-fees-wrap ol {
  padding-left: var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0;
}

.seller-fees-wrap ol li {
  margin-bottom: var(--space-2);
}

.seller-fees-wrap ol strong {
  color: var(--brand-orange-700);
  font-weight: 700;
}

/* -- Footer CTA row -------------------------------------------- */
.seller-fees-wrap > .d-flex.gap-2.flex-wrap {
  margin-top: var(--space-5);
  gap: var(--space-2);
}

.seller-fees-wrap > .d-flex.gap-2.flex-wrap .btn-brand,
.seller-fees-wrap > .d-flex.gap-2.flex-wrap .btn-outline-secondary {
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius-md);
}

.seller-fees-wrap .btn-outline-secondary {
  border: 1.5px solid var(--ink-300);
  color: var(--ink-700);
  background: var(--paper);
}

.seller-fees-wrap .btn-outline-secondary:hover,
.seller-fees-wrap .btn-outline-secondary:focus {
  background: var(--ink-100);
  border-color: var(--ink-500);
}

/* -- Mobile (< 768px): scroll tables --------------------------- */
@media (max-width: 767.98px) {
  .seller-fees-wrap .table-responsive {
    overflow-x: auto;
  }
  .seller-fees-wrap .table {
    min-width: 520px;
  }
  .seller-fees-wrap > .d-flex.gap-2.flex-wrap .btn-brand,
  .seller-fees-wrap > .d-flex.gap-2.flex-wrap .btn-outline-secondary {
    flex: 1 1 calc(50% - var(--space-2));
    text-align: center;
  }
}

/* -- Dark mode overrides --------------------------------------- */
[data-theme="dark"] .seller-fees-wrap .card {
  background: var(--paper);
  border-color: var(--ink-300) !important;
}

[data-theme="dark"] .seller-fees-wrap .table thead th,
[data-theme="dark"] .seller-fees-wrap .table tr.border-top td {
  background: var(--ink-100);
  color: var(--ink-500);
  border-bottom-color: var(--ink-300);
}

[data-theme="dark"] .seller-fees-wrap .table tbody tr:hover {
  background: var(--ink-100);
}

[data-theme="dark"] .seller-fees-wrap .table tr.text-success td {
  background: var(--success-100);
  color: var(--status-paid-fg) !important;
}

[data-theme="dark"] .seller-fees-wrap .btn-outline-secondary {
  background: var(--paper);
  color: var(--ink-700);
}