/* =============================================================================
   SMJ Marketplace Pro — Theme Bridge & Utility System
   ----------------------------------------------------------------------------
   Loaded LAST (after every other stylesheet). Two responsibilities:

   1. UTILITY CLASSES   — reusable component primitives that strictly follow
                          the design-system spec. Use these in templates so
                          every button / badge / card looks identical site-wide.

   2. LEGACY BRIDGES    — alias older variable names + neutralise the most
                          common hardcoded colour leaks (links, scrollbars,
                          focus rings) that survive in third-party theme code.

   ZERO HARDCODED COLOURS. Everything resolves through the CSS variables that
   SMJ_Theme_Engine injects in :root. Change the engine → everything updates.
   ============================================================================= */

/* ── 1. Body / Document defaults ────────────────────────────────────────── */
html {
  font-family: var(--smj-body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
body {
  background: var(--smj-bg, #ffffff);
  color: var(--smj-text-primary, #23262f);
  font-family: var(--smj-body-font);
  font-weight: var(--smj-body-weight, 400);
}

/* Headings always use the heading font + weight from the engine */
h1, h2, h3, h4, h5, h6,
.smj-h1, .smj-h2, .smj-h3 {
  font-family: var(--smj-heading-font);
  font-weight: var(--smj-heading-weight, 600);
  color: var(--smj-text-primary);
}

/* Default link colour = secondary (blue) per spec */
a, .smj-link {
  color: var(--smj-secondary);
}
a:hover, .smj-link:hover {
  color: var(--smj-secondary-dk);
  text-decoration: none;
}

/* ── 2. Containers & sections ───────────────────────────────────────────── */
.smj-container {
  max-width: var(--smj-container-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--smj-spacing-md, 16px);
}
.smj-section { padding-block: var(--smj-section-spacing, 32px); background: var(--smj-bg); }
.smj-section--alt,
.smj-section--light { padding-block: var(--smj-section-spacing, 32px); background: var(--smj-light-section); }

/* Auto-alternation helper: nest .smj-section inside .smj-section-stack */
.smj-section-stack > .smj-section:nth-child(even) { background: var(--smj-light-section); }

/* ── 3. Buttons ─────────────────────────────────────────────────────────── */
/* Base button — neutral skeleton */
.smj-btn,
.smj-btn-primary,
.smj-btn-secondary,
.smj-btn-trust,
.smj-btn-ghost,
.smj-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--smj-btn-radius, 8px);
  font-family: var(--smj-body-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  white-space: nowrap;
}
.smj-btn:hover,
.smj-btn-primary:hover,
.smj-btn-secondary:hover,
.smj-btn-trust:hover { transform: translateY(-1px); }
.smj-btn:focus-visible { outline: 2px solid var(--smj-secondary); outline-offset: 2px; }

/* Primary action = ORANGE CTA (per design spec: orange ONLY for primary action) */
.smj-btn-primary,
.smj-btn--cta,
.smj-btn-cta {
  background: var(--smj-cta);
  color: #ffffff;
  border-color: var(--smj-cta);
}
.smj-btn-primary:hover,
.smj-btn--cta:hover,
.smj-btn-cta:hover {
  background: var(--smj-cta-dk);
  border-color: var(--smj-cta-dk);
  color: #ffffff;
}

/* Secondary = BLUE (links & secondary actions) */
.smj-btn-secondary,
.smj-btn--secondary {
  background: var(--smj-secondary);
  color: #ffffff;
  border-color: var(--smj-secondary);
}
.smj-btn-secondary:hover,
.smj-btn--secondary:hover {
  background: var(--smj-secondary-dk);
  border-color: var(--smj-secondary-dk);
  color: #ffffff;
}

/* Trust = GREEN (verified, finance, dealer badges as buttons) */
.smj-btn-trust,
.smj-btn--trust {
  background: var(--smj-primary);
  color: #ffffff;
  border-color: var(--smj-primary);
}
.smj-btn-trust:hover,
.smj-btn--trust:hover {
  background: var(--smj-primary-dk);
  border-color: var(--smj-primary-dk);
}

/* Ghost = transparent with secondary text */
.smj-btn-ghost {
  background: transparent;
  color: var(--smj-secondary);
  border-color: transparent;
}
.smj-btn-ghost:hover {
  background: rgba(var(--smj-secondary-rgb), .08);
  color: var(--smj-secondary-dk);
}

/* Outline = bordered, neutral */
.smj-btn-outline {
  background: transparent;
  color: var(--smj-text-primary);
  border-color: var(--smj-border);
}
.smj-btn-outline:hover {
  background: var(--smj-light-section);
  border-color: var(--smj-secondary);
  color: var(--smj-secondary);
}

/* Sizes */
.smj-btn--sm { padding: 7px 14px; font-size: 13px; }
.smj-btn--lg { padding: 13px 26px; font-size: 15px; }
.smj-btn--block { display: flex; width: 100%; }

/* ── 4. Badges ──────────────────────────────────────────────────────────── */
.smj-badge,
.smj-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--smj-body-font);
  background: var(--smj-light-section);
  color: var(--smj-text-primary);
  border: 1px solid var(--smj-border);
  white-space: nowrap;
}
.smj-badge--trust,
.smj-badge--verified,
.smj-badge--dealer {
  background: rgba(var(--smj-primary-rgb), .10);
  color: var(--smj-primary);
  border-color: rgba(var(--smj-primary-rgb), .25);
}
.smj-badge--info,
.smj-badge--link {
  background: rgba(var(--smj-secondary-rgb), .08);
  color: var(--smj-secondary);
  border-color: rgba(var(--smj-secondary-rgb), .25);
}
.smj-badge--cta {
  background: rgba(var(--smj-cta-rgb), .10);
  color: var(--smj-cta);
  border-color: rgba(var(--smj-cta-rgb), .25);
}

/* ── 5. Cards ───────────────────────────────────────────────────────────── */
.smj-card-v2 {
  background: var(--smj-card-bg);
  border: 1px solid var(--smj-border);
  border-radius: var(--smj-radius);
  box-shadow: var(--smj-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.smj-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: var(--smj-shadow-lg);
  border-color: rgba(var(--smj-secondary-rgb), .25);
}
.smj-card-v2__body { padding: var(--smj-spacing-md, 16px); }
.smj-card-v2__title {
  font-family: var(--smj-heading-font);
  font-weight: var(--smj-heading-weight);
  color: var(--smj-text-primary);
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
}
.smj-card-v2__meta {
  color: var(--smj-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* ── 6. Forms ───────────────────────────────────────────────────────────── */
.smj-input,
.smj-select,
.smj-textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--smj-card-bg);
  border: 1px solid var(--smj-border);
  border-radius: var(--smj-radius-sm, 6px);
  font-family: var(--smj-body-font);
  font-size: 14px;
  color: var(--smj-text-primary);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.smj-input::placeholder,
.smj-textarea::placeholder { color: var(--smj-text-secondary); }
.smj-input:focus,
.smj-select:focus,
.smj-textarea:focus {
  outline: none;
  border-color: var(--smj-secondary);
  box-shadow: 0 0 0 3px rgba(var(--smj-secondary-rgb), .15);
}
.smj-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--smj-text-primary);
  margin-bottom: 6px;
  font-family: var(--smj-body-font);
}

/* ── 7. Tables ──────────────────────────────────────────────────────────── */
.smj-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--smj-card-bg);
  border: 1px solid var(--smj-border);
  border-radius: var(--smj-radius);
  overflow: hidden;
  font-family: var(--smj-body-font);
}
.smj-table th,
.smj-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--smj-border);
  font-size: 13.5px;
  color: var(--smj-text-primary);
}
.smj-table th {
  background: var(--smj-light-section);
  font-weight: 600;
  color: var(--smj-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.smj-table tr:last-child td { border-bottom: 0; }
.smj-table tr:hover td { background: var(--smj-light-section); }

/* ── 8. Modal ───────────────────────────────────────────────────────────── */
.smj-modal-bg {
  background: var(--smj-card-bg);
  border-radius: var(--smj-radius-lg, 12px);
  border: 1px solid var(--smj-border);
  box-shadow: var(--smj-shadow-lg);
}

/* ── 9. Text utilities ──────────────────────────────────────────────────── */
.smj-text-primary   { color: var(--smj-text-primary)   !important; }
.smj-text-secondary { color: var(--smj-text-secondary) !important; }
.smj-text-trust     { color: var(--smj-primary)        !important; }
.smj-text-link      { color: var(--smj-secondary)      !important; }
.smj-text-cta       { color: var(--smj-cta)            !important; }

.smj-bg-light       { background: var(--smj-light-section) !important; }
.smj-bg-card        { background: var(--smj-card-bg)       !important; }
.smj-bg-page        { background: var(--smj-bg)            !important; }

.smj-border-default { border-color: var(--smj-border) !important; }

/* ── 10. LEGACY BRIDGES ─────────────────────────────────────────────────────
   The existing CSS files contain a long tail of hardcoded colours, legacy
   selectors, and old token references. We surgically remap the most
   visible cases here so the design-system change is consistent everywhere
   without mass-rewriting every CSS file (which would risk breaking the
   header search and sidebar filters — explicitly out of scope).
   ───────────────────────────────────────────────────────────────────────── */

/* Default plugin button override (--smj-btn-color now maps to CTA). */
.smj-btn,
button.smj-btn {
  background: var(--smj-btn-color, var(--smj-cta));
  color: var(--smj-btn-text, #ffffff);
  border-color: transparent;
}

/* Trust components: dealer badges, "verified", "finance available" */
.smj-card__dealer-badge,
.smj-dealer-tag,
.smj-finance-badge,
.smj-verified-badge,
.smj-badge--featured.smj-trust,
.smj-trust-icon {
  background: rgba(var(--smj-primary-rgb), .10) !important;
  color: var(--smj-primary) !important;
  border-color: rgba(var(--smj-primary-rgb), .22) !important;
}

/* Primary action emphasis — anything labelled "primary" in legacy code */
.smj-btn--primary,
.smj-btn-primary--legacy {
  background: var(--smj-cta) !important;
  border-color: var(--smj-cta) !important;
  color: #ffffff !important;
}
.smj-btn--primary:hover,
.smj-btn-primary--legacy:hover {
  background: var(--smj-cta-dk) !important;
  border-color: var(--smj-cta-dk) !important;
}

/* WordPress admin-bar and theme link colour leaks */
.smj-page-content a,
.smj-listings-wrap a,
.smj-hdr a,
.smj-ftr a {
  color: var(--smj-secondary);
}
.smj-page-content a:hover,
.smj-listings-wrap a:hover,
.smj-hdr a:hover,
.smj-ftr a:hover {
  color: var(--smj-secondary-dk);
}

/* Card-grid hover ring — driven by Theme Control "Listings → Hover
   Border Color" (falls back to the theme primary, set by the engine). */
.smj-card:hover {
  border-color: var(--smj-listing-card-hover-border, var(--smj-primary)) !important;
}

/* Header search button (search submit) → secondary blue (it's a search action, not a CTA) */
.smj-hdr__search-btn,
.smj-search-bar__submit,
.smj-search-submit {
  background: var(--smj-secondary) !important;
  color: #ffffff !important;
  border-color: var(--smj-secondary) !important;
}
.smj-hdr__search-btn:hover,
.smj-search-bar__submit:hover,
.smj-search-submit:hover {
  background: var(--smj-secondary-dk) !important;
  border-color: var(--smj-secondary-dk) !important;
}

/* Post-Ad button = primary action = ORANGE CTA */
.smj-hdr__post-ad,
.smj-cta-post-ad,
a.smj-post-ad-btn {
  background: var(--smj-cta) !important;
  color: #ffffff !important;
  border-color: var(--smj-cta) !important;
}
.smj-hdr__post-ad:hover,
.smj-cta-post-ad:hover,
a.smj-post-ad-btn:hover {
  background: var(--smj-cta-dk) !important;
  border-color: var(--smj-cta-dk) !important;
}

/* Price colour — keep visible (price is an information signal, not a brand colour).
   Map to trust green per spec: green = trust + finance. */
.smj-card__price,
.smj-sl-price,
.smj-price {
  color: var(--smj-primary) !important;
}

/* Focus ring — uniform across every focusable element */
:where(.smj-listings-wrap, .smj-form, .smj-card, .smj-btn, .smj-input) :focus-visible {
  outline: 2px solid var(--smj-secondary);
  outline-offset: 2px;
}

/* Scrollbar (tasteful) */
.smj-sidebar--sticky::-webkit-scrollbar { width: 6px; }
.smj-sidebar--sticky::-webkit-scrollbar-thumb {
  background: var(--smj-border);
  border-radius: 3px;
}

/* Status pills — keep semantic intent but use design-system tokens for surfaces */
.smj-status-publish, .smj-hub-st.publish {
  background: rgba(var(--smj-primary-rgb), .12);
  color: var(--smj-primary);
}
.smj-status-pending, .smj-hub-st.pending {
  background: rgba(var(--smj-cta-rgb), .14);
  color: var(--smj-cta-dk);
}

/* ── 11. Animation kill-switch — respect user motion preferences ────────── */
@media (prefers-reduced-motion: reduce) {
  .smj-btn, .smj-card, .smj-card-v2, .smj-btn-primary, .smj-btn-secondary, .smj-btn-trust {
    transition: none !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * 12.  LEGACY NAMESPACED TOKEN BRIDGES
 *      Older files (style.css dashboard tokens, smj-marketplace-ui.css) declare
 *      their own --db-*, --mk-* tokens with hardcoded blues/greens/oranges.
 *      We override them here so admin Theme Engine changes propagate everywhere
 *      without rewriting every legacy file.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Dashboard — used inside style.css `.tmp-dashboard` scope */
.tmp-dashboard,
.smj-dashboard {
  --db-blue:        var(--smj-secondary)       !important;
  --db-blue-dk:     var(--smj-secondary-dk)    !important;
  --db-blue-lt:     rgba(var(--smj-secondary-rgb), .08) !important;
  --db-blue-mid:    rgba(var(--smj-secondary-rgb), .14) !important;
  --db-green:       var(--smj-primary)         !important;
  --db-green-lt:    rgba(var(--smj-primary-rgb), .10) !important;
  --db-orange:      var(--smj-cta)             !important;
  --db-orange-lt:   rgba(var(--smj-cta-rgb), .12) !important;
  --db-text-1:      var(--smj-text-primary)    !important;
  --db-text-2:      var(--smj-text-secondary)  !important;
  --db-border:      var(--smj-border)          !important;
  --db-bg:          var(--smj-bg)              !important;
  --db-bg-alt:      var(--smj-light-section)   !important;
  --db-radius:      var(--smj-radius)          !important;
  --db-font:        var(--smj-body-font)       !important;
}

/* Marketplace UI tokens (smj-marketplace-ui.css uses --mk-* prefix) */
.smj-mk-root,
.smj-marketplace,
.smj-listings-grid,
.smj-mk {
  --mk-blue:        var(--smj-secondary)       !important;
  --mk-blue-dk:     var(--smj-secondary-dk)    !important;
  --mk-blue-lt:     rgba(var(--smj-secondary-rgb), .08) !important;
  --mk-blue-mid:    var(--smj-secondary)       !important;
  --mk-green:       var(--smj-primary)         !important;
  --mk-green-lt:    rgba(var(--smj-primary-rgb), .10) !important;
  --mk-orange:      var(--smj-cta)             !important;
  --mk-text-1:      var(--smj-text-primary)    !important;
  --mk-text-2:      var(--smj-text-secondary)  !important;
  --mk-border:      var(--smj-border)          !important;
  --mk-bg:          var(--smj-bg)              !important;
  --mk-bg-alt:      var(--smj-light-section)   !important;
  --mk-radius:      var(--smj-radius)          !important;
  --mk-font:        var(--smj-body-font)       !important;
}

/* Apply globally too — any descendant of body inherits engine values, so
   even unscoped --db-* / --mk-* references resolve correctly. */
:root {
  --db-blue:    var(--smj-secondary);
  --db-blue-dk: var(--smj-secondary-dk);
  --db-green:   var(--smj-primary);
  --db-orange:  var(--smj-cta);
  --mk-blue:    var(--smj-secondary);
  --mk-blue-dk: var(--smj-secondary-dk);
  --mk-green:   var(--smj-primary);
  --mk-orange:  var(--smj-cta);
}

/* ════════════════════════════════════════════════════════════════════════════
 * 13.  GLOBAL TYPOGRAPHY ENFORCEMENT
 *      Apply heading/body fonts from the engine across all plugin contexts
 *      regardless of legacy hardcoded font-family declarations downstream.
 * ════════════════════════════════════════════════════════════════════════════ */
.smj-marketplace, .smj-marketplace *,
.smj-dashboard, .smj-dashboard *,
.smj-page-content, .smj-page-content *,
.tmp-dashboard, .tmp-dashboard *,
.smj-mk, .smj-mk *,
.smj-listing-detail, .smj-listing-detail * {
  font-family: var(--smj-body-font);
}

.smj-marketplace h1, .smj-marketplace h2, .smj-marketplace h3,
.smj-marketplace h4, .smj-marketplace h5, .smj-marketplace h6,
.smj-dashboard h1, .smj-dashboard h2, .smj-dashboard h3,
.smj-dashboard h4, .smj-dashboard h5, .smj-dashboard h6,
.smj-page-content h1, .smj-page-content h2, .smj-page-content h3,
.smj-page-content h4, .smj-page-content h5, .smj-page-content h6,
.tmp-dashboard h1, .tmp-dashboard h2, .tmp-dashboard h3,
.tmp-dashboard h4, .tmp-dashboard h5, .tmp-dashboard h6,
.smj-listing-detail h1, .smj-listing-detail h2, .smj-listing-detail h3,
.smj-listing-detail h4, .smj-listing-detail h5, .smj-listing-detail h6 {
  font-family: var(--smj-heading-font);
}