/**
 * Bongofey Phase 5 — light/white theme refinement layer (step 1).
 *
 * Loaded in <head> AFTER the header's inline <style>, so it overrides those
 * header-level component rules. It deliberately does NOT restyle page-specific
 * sections (hero, product/story cards, dark navy bands) because those are
 * defined in each page's own inline <style> that loads later and would win —
 * and several are intentionally dark. Those are restyled per page in later steps.
 *
 * Depends on assets/css/tokens.css for the variables.
 */

/* Keep the legacy accent variables pointing at the token accent (same amber
   hue, now centralised). Links use the darker accent for AA contrast on white. */
:root {
  /* Re-point EVERY legacy brand variable at the warm token palette, so all
     existing components (public + dashboard) adopt the theme in one place.
     Highlights / prices / key CTAs use sunset orange; chrome & buttons indigo. */
  --primary-green: var(--cta);            /* orange — CTA/badge backgrounds */
  --primary-green-hover: var(--cta-hover);
  --pale-yellow: var(--cta-tint);
  --brand-link: var(--accent-hover);
  --dark-text: var(--text);
  --light-gray: var(--surface);
  --brand-surface: var(--bg);
  --brand-surface-muted: var(--surface);
  --brand-border: var(--border);
  --brand-text-muted: var(--text-muted);
  /* Dark chrome (sidebar/banners) → deep indigo */
  --brand-navy: var(--deep);
  --brand-navy-soft: var(--deep-soft);
}

/* ── Typography: bookish serif headings + clean body ─────────────────────── */
body { font-family: 'Inter', 'Outfit', system-ui, -apple-system, sans-serif; }
h1, h2, h3, .h1, .h2, .h3 {
  font-family: 'Fraunces', 'DM Serif Display', Georgia, serif;
  letter-spacing: -0.01em;
}

/* Price / highlight TEXT uses a darker orange so it stays readable on cream. */
.text-primary-green,
.price-tag,
.price,
.text-price { color: var(--cta-strong) !important; }

/* ── Bootstrap primary utilities → indigo accent (kill leftover Bootstrap blue) */
:root {
  --bs-primary: #C2410C;
  --bs-primary-rgb: 194,65,12;
  --bs-link-color: #9A3412;
  --bs-link-color-rgb: 154,52,18;
  --bs-link-hover-color: #C2410C;
  --bs-body-bg: var(--bg);
}
.bg-primary { background-color: var(--accent) !important; }
.text-primary { color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--accent) !important; color: #fff !important; }
/* Primary action buttons = sunset orange (energy), never blue/indigo. */
.btn-primary {
  --bs-btn-bg: var(--cta);
  --bs-btn-border-color: var(--cta);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--cta-hover);
  --bs-btn-hover-border-color: var(--cta-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cta-hover);
  --bs-btn-active-border-color: var(--cta-hover);
  background-color: var(--cta) !important;
  border-color: var(--cta) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--cta-hover) !important;
  border-color: var(--cta-hover) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--cta-strong) !important;
  border-color: var(--cta) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--cta) !important;
  border-color: var(--cta) !important;
  color: #fff !important;
}
/* Bootstrap's own state variables for outline buttons (still blue by default), and
   the SELECTED state of radio/checkbox button groups (.btn-check + .btn) — without
   this a chosen option shows orange text on a blue background. */
.btn-outline-primary {
  --bs-btn-color: var(--cta-strong);
  --bs-btn-border-color: var(--cta);
  --bs-btn-hover-bg: var(--cta);
  --bs-btn-hover-border-color: var(--cta);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cta);
  --bs-btn-active-border-color: var(--cta);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--cta-strong);
  --bs-btn-disabled-border-color: var(--cta);
  --bs-btn-focus-shadow-rgb: 249, 115, 22;
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.show {
  background-color: var(--cta) !important;
  border-color: var(--cta) !important;
  color: #fff !important;
}
.btn-check:focus-visible + .btn-outline-primary { box-shadow: 0 0 0 .2rem rgba(249, 115, 22, .3) !important; }
/* Nunua pills on cards match the orange CTA. */
.bf-buy { background: var(--cta) !important; }
.bf-card:hover .bf-buy { background: var(--cta-hover) !important; }
/* Orange "sell / go" call-to-action buttons (Start Selling, primary CTAs that
   used the old green var) stay vibrant orange with readable white text. */
.btn-cta, .btn-sell {
  background-color: var(--cta); border-color: var(--cta); color: #fff;
  border-radius: var(--r-md); font-weight: 700;
}
.btn-cta:hover, .btn-sell:hover { background-color: var(--cta-hover); border-color: var(--cta-hover); color: #fff; }

/* ── Reusable book/product card (homepage look) for every listing page ─────── */
.bf-card { display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; height:100%; text-decoration:none; color:var(--text); }
.bf-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--text); }
.bf-card-cover { position:relative; aspect-ratio:3/4; background:var(--cta-tint); }
.bf-card-cover img { width:100%; height:100%; object-fit:cover; }
.bf-card .bf-cover-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-subtle); font-size:30px; }
.bf-card .bf-badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.bf-card .bf-badge-free { background:var(--success); color:#fff; }
.bf-card-body { padding:11px 12px 13px; display:flex; flex-direction:column; gap:5px; flex:1; }
.bf-chip { align-self:flex-start; font-size:11px; font-weight:600; color:var(--cta-strong); background:var(--cta-tint); border-radius:999px; padding:3px 9px; text-transform:none; letter-spacing:0; }
.bf-card-title { font-family:'Inter',sans-serif !important; font-size:14.5px; font-weight:600; line-height:1.3; margin:1px 0 0; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; letter-spacing:0; }
.bf-card-author { font-size:12px; color:var(--text-subtle); }
.bf-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; }
.bf-price { font-weight:700; color:var(--cta-strong) !important; font-size:15px; }
.bf-buy { font-size:12px; font-weight:700; color:#fff; background:var(--accent); border-radius:999px; padding:6px 13px; white-space:nowrap; }
.bf-card:hover .bf-buy { background:var(--cta); }
.bf-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:768px){ .bf-grid { grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (min-width:992px){ .bf-grid.bf-grid-4 { grid-template-columns:repeat(4,1fr); } }

/* ── Header: slim, flat, white, hairline border ─────────────────────────── */
.custom-navbar {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

/* ── Buttons: solid ORANGE cta (energy), flat, rounded ──────────────────── */
.btn-primary {
  background-color: var(--cta);
  border-color: var(--cta);
  color: #fff;
  background-image: none;
  box-shadow: none;
  border-radius: var(--r-md);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--cta-hover) !important;
  border-color: var(--cta-hover) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--cta-strong);
  border-color: var(--cta);
  border-radius: var(--r-md);
  font-weight: 600;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--cta);
  border-color: var(--cta);
  color: #fff;
}

/* ── Inputs: 44px touch targets, accent focus ring ──────────────────────── */
.form-control,
.form-select {
  border-radius: var(--r-md);
  border-color: var(--border-strong);
  min-height: 44px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-tint);
}

/* ── Accessibility: always-visible focus outline (never remove it) ──────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Links: darker accent for small-text contrast ───────────────────────── */
a {
  color: var(--accent-hover);
}
a:hover {
  color: var(--accent);
}

/* ── Generic Bootstrap cards: hairline border, barely-there shadow ──────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Minimum tap target for icon buttons / pills */
.btn {
  min-height: 40px;
}

/* ── Dashboards: white + light-blue, deep-blue sidebar, blue accents ─────── */
body.dashboard-mode {
  background: var(--surface);
}
#wrapper {
  background: var(--surface);
}
#sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--border);
}
body.dashboard-mode, #wrapper { background: var(--bg) !important; }

/* ── Dashboard stat tiles → LIGHT cards with a warm accent bar (like the homepage),
   never solid blue/charcoal boxes. Dark text on white; colored top bar per group. */
.bg-grad-users, .bg-grad-products, .bg-grad-sales, .bg-grad-revenue,
.bg-grad-earnings, .bg-grad-purchases, .bg-grad-spent, .bg-grad-wishlist,
.bg-grad-tips, .bg-grad-total,
.bg-kpi-clicks, .bg-kpi-sales, .bg-kpi-earnings, .bg-kpi-balance,
.bg-kpi-1, .bg-kpi-2, .bg-kpi-3, .bg-kpi-4,
.bg-p-total, .bg-p-pub, .bg-p-draft, .bg-p-view,
.bg-blue, .bg-green, .bg-purple, .bg-orange, .bg-slate {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid #F97316 !important;   /* orange (default) */
  box-shadow: var(--shadow-sm) !important;
}
.bg-grad-products, .bg-grad-spent, .bg-kpi-sales, .bg-kpi-2, .bg-orange { border-top-color: #D97706 !important; }   /* gold */
.bg-grad-sales, .bg-grad-wishlist, .bg-kpi-earnings, .bg-kpi-3, .bg-p-pub, .bg-green { border-top-color: #16A34A !important; }   /* green */
.bg-grad-revenue, .bg-grad-earnings, .bg-kpi-balance, .bg-kpi-4, .bg-p-draft, .bg-slate { border-top-color: #E11D48 !important; }   /* rose */
.bg-grad-total, .bg-p-view, .bg-purple { border-top-color: #92400E !important; }   /* warm brown */
/* Decorative corner icons in the tiles → faint warm tint on the light card. */
[class*="bg-grad-"] > i, [class*="bg-kpi-"] > i, [class*="bg-p-"] > i,
.bg-blue > i, .bg-green > i, .bg-purple > i, .bg-orange > i, .bg-slate > i {
  color: var(--cta) !important; opacity: 0.12 !important;
}
/* Card labels/values were white for the old dark tiles → make them readable. */
.stat-card-title, .kpi-title, .stat-label, .p-stat-label,
.bg-blue .stat-label, .bg-green .stat-label, .bg-orange .stat-label {
  color: var(--text-muted) !important;
}
.stat-card-value, .kpi-value, .stat-value, .p-stat-value {
  color: var(--text) !important;
}

/* ── Dashboard banner → light warm card, dark text, orange accent (not dark blue). */
.dashboard-banner, .affiliate-banner {
  background: linear-gradient(135deg, var(--cta-tint) 0%, #FFFFFF 100%) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--cta) !important;
  color: var(--text) !important;
}
.dashboard-banner h1, .dashboard-banner h2, .dashboard-banner h3,
.dashboard-banner h4, .dashboard-banner h5, .dashboard-banner h6,
.dashboard-banner p, .dashboard-banner .lead,
.affiliate-banner h1, .affiliate-banner h2, .affiliate-banner h3,
.affiliate-banner h4, .affiliate-banner h5, .affiliate-banner h6,
.affiliate-banner p, .affiliate-banner .lead {
  color: var(--text) !important;
}
.dashboard-banner .text-muted, .dashboard-banner small,
.affiliate-banner .text-muted, .affiliate-banner small {
  color: var(--text-muted) !important;
}
.table-light {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
}
.badge.bg-light {
  background: var(--cta-tint) !important;
  color: var(--cta-strong) !important;
}

/* ── Shared pager (bfPagerHtml) ─────────────────────────────── */
.pd-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.pd-pager-info { font-size: 0.85rem; color: #78716C; }
.pd-pages { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pd-pages a, .pd-pages span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid #E7E5E4; background: #fff; color: #44403C;
  font-weight: 700; font-size: 0.88rem; text-decoration: none;
}
.pd-pages a:hover { border-color: #F97316; color: #C2410C; background: #FFF7ED; }
.pd-pages .current { background: #EA580C; border-color: #EA580C; color: #fff; }
.pd-pages .disabled { color: #A8A29E; background: #FAFAF9; cursor: not-allowed; }
.pd-pages .gap { border-color: transparent; background: transparent; min-width: 20px; padding: 0 2px; }
@media (max-width: 991.98px) {
  .pd-pager { justify-content: center; text-align: center; }
  .pd-pages a, .pd-pages span { min-width: 34px; height: 34px; padding: 0 9px; }
}

/* ── Shared row actions: main button(s) + ⋯ menu ────────────── */
.pa-group { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.pa-group form { margin: 0; }
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 10px;
  font-size: 0.85rem; font-weight: 700; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.pa-btn i { font-size: 0.8rem; }
.pa-edit, .pa-soft { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
.pa-edit:hover, .pa-soft:hover { background: #EA580C; color: #fff; border-color: #EA580C; }
.pa-publish, .pa-ok { background: #16A34A; color: #fff; }
.pa-publish:hover, .pa-ok:hover { background: #15803D; color: #fff; }
.pa-danger { background: #fff; color: #DC2626; border-color: #FECACA; }
.pa-danger:hover { background: #DC2626; color: #fff; border-color: #DC2626; }
.pa-plain { background: #fff; color: #57534E; border-color: #E7E5E4; }
.pa-plain:hover { background: #F5F5F4; color: #1C1917; }
.pa-more { width: 36px; padding: 0; background: #fff; color: #57534E; border-color: #E7E5E4; }
.pa-more:hover, .pa-more[aria-expanded="true"] { background: #F5F5F4; color: #1C1917; border-color: #D6D3D1; }
.pa-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(249, 115, 22, .3); }
.pa-done { font-size: 0.8rem; color: #78716C; white-space: nowrap; }
.pa-menu { min-width: 230px; border-radius: 12px; border: 1px solid #E7E5E4; box-shadow: 0 12px 30px rgba(28, 25, 23, .12); padding: 6px; }
.pa-menu .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 10px; font-size: 0.88rem; font-weight: 600; color: #44403C; width: 100%; }
.pa-menu .dropdown-item i { width: 16px; text-align: center; color: #A8A29E; }
.pa-menu .dropdown-item:hover { background: #FFF7ED; color: #C2410C; }
.pa-menu .dropdown-item:hover i { color: #EA580C; }
.pa-menu .dropdown-item.text-danger, .pa-menu .dropdown-item.text-danger i { color: #DC2626 !important; }
.pa-menu .dropdown-item.text-danger:hover { background: #FEF2F2; }
.pa-menu .dropdown-item.disabled { color: #A8A29E; }
.pa-menu .dropdown-item-text { padding: 6px 10px; white-space: normal; }
.pa-menu .dropdown-divider { margin: 4px 0; border-color: #F5F5F4; }

/* Bootstrap .pagination (catalog, articles, admin orders, BongoPay) → same warm look as .pd-pages */
.pagination {
  --bs-pagination-color: #44403C;
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: #E7E5E4;
  --bs-pagination-hover-color: #C2410C;
  --bs-pagination-hover-bg: #FFF7ED;
  --bs-pagination-hover-border-color: #F97316;
  --bs-pagination-focus-color: #C2410C;
  --bs-pagination-focus-bg: #FFF7ED;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(249, 115, 22, .3);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #EA580C;
  --bs-pagination-active-border-color: #EA580C;
  --bs-pagination-disabled-color: #A8A29E;
  --bs-pagination-disabled-bg: #FAFAF9;
  --bs-pagination-disabled-border-color: #E7E5E4;
  gap: 6px;
  flex-wrap: wrap;
}
.pagination .page-link { border-radius: 10px !important; font-weight: 700; min-width: 38px; text-align: center; }
.pagination .page-item:not(:first-child) .page-link { margin-left: 0; }