/* =============================================================================
   SMJ Marketplace Pro — smj-responsive.css   (v6.9.54)
   AUTHORITATIVE, MOBILE-FIRST RESPONSIVE LAYER.

   Loaded ABSOLUTE LAST so it has the final word over every earlier component
   sheet, inline override and theme style. Single source of truth for the
   responsive grid + cross-cutting responsive behaviour.

   GRID SPEC (applies to every listing surface — all-listings, search results,
   category / archive pages, featured, similar, favourites and shortcodes):
        Mobile   (<768px)        →  2 columns
        Tablet   (768–1199px)    →  3 columns
        Desktop  (≥1200px)       →  4 columns  (admin-overridable via --smj-grid-cols)

   Scoped to plugin classes (.smj-* / .tmp-*) only, so it never fights the
   active theme (Blocksy, Astra, GeneratePress, Kadence, etc.).
   ============================================================================= */

/* ── 0. Box-sizing + overflow root-cause guards ───────────────────────────── */
.smj-wrap, .smj-wrap *,
.smj-listings, .smj-listings *,
[class*="smj-grid"], [class*="smj-grid"] *,
.tmp-grid, .tmp-grid * { box-sizing: border-box; }

/* Never let plugin sections cause a horizontal scrollbar. max-width:100% on the
   wrappers + min-width:0 on flex/grid children is the real fix (we avoid
   overflow:hidden so sticky/:focus rings inside still work). */
.smj-wrap,
.smj-listings,
.smj-listings-wrap,
.smj-content-area,
[class*="smj-grid"],
.tmp-grid,
.tmp-filters,
.smj-search-results,
.smj-sl-wrap { max-width: 100%; }

/* Long unbroken strings (URLs, model codes) must wrap, not push width. */
.smj-card, .smj-card *,
.tmp-card, .tmp-card * { overflow-wrap: anywhere; word-break: break-word; }


/* =============================================================================
   1. RESPONSIVE GRID — mobile-first, authoritative (2 → 3 → 4)
   minmax(0,1fr) forces tracks to shrink so wide content can never blow them out.
   ============================================================================= */

/* Public listing surfaces — base = mobile (2 columns) */
.smj-grid,
.smj-listings-grid,
.smj-search-grid,
.smj-featured-grid,
.smj-similar-grid,
.smj-favorites-grid,
.smj-favorite-grid {
  display:               grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap:                   var(--smj-listing-card-gap, var(--smj-grid-gap, 12px)) !important;
  align-items:           start;
}

/* Tablet 768–1199px → 3 columns */
@media (min-width: 768px) {
  .smj-grid,
  .smj-listings-grid,
  .smj-search-grid,
  .smj-featured-grid,
  .smj-similar-grid,
  .smj-favorites-grid,
  .smj-favorite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--smj-listing-card-gap, var(--smj-grid-gap, 16px)) !important;
  }
}

/* Desktop ≥1200px — ORIGINAL per-page column counts (restored v6.9.53).
   Home (with sidebar) + Featured = 3 columns.
   Search results, Favorites, and Single-listing Related = 4 columns.
   Dashboard (3, with sidebar) is handled in its own block below. */
@media (min-width: 1200px) {
  /* 3-column pages */
  .smj-grid,
  .smj-listings-grid,
  .smj-featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--smj-listing-card-gap, var(--smj-grid-gap, 20px)) !important;
  }
  /* 4-column pages */
  .smj-search-grid,
  .smj-sr-grid,
  .smj-similar-grid,
  .smj-favorites-grid,
  .smj-favorite-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--smj-listing-card-gap, var(--smj-grid-gap, 20px)) !important;
  }
  /* Favorites inside the dashboard stays 3 (sidebar layout) */
  body.smj-pg-dashboard .smj-favorites-grid,
  body.smj-pg-dashboard .smj-favorite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Dashboard "My Listings" / Favourites sit inside a sidebar layout, so they
   stay one column lower than the public grids: 2 (mobile) → 3 (≥768). */
.smj-db__card-grid,
.smj-dashboard-grid {
  display:               grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap:                   var(--smj-grid-gap, 12px) !important;
  align-items:           start;
}
@media (min-width: 768px) {
  .smj-db__card-grid,
  .smj-dashboard-grid,
  body.smj-pg-dashboard .smj-favorites-grid,
  body.smj-pg-dashboard .smj-favorite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--smj-grid-gap, 16px) !important;
  }
}

/* Every grid child must be allowed to shrink inside its track. */
[class*="smj-grid"] > *,
.smj-db__card-grid > *,
.smj-dashboard-grid > * { min-width: 0; max-width: 100%; }

/* List-view mode always stays single column. */
.tmp-grid--list,
.smj-grid--list { grid-template-columns: 1fr !important; }

/* Search-results alias grid (.smj-sr-grid) — identical 2 → 3 → 4 behaviour. */
.smj-sr-grid {
  display:               grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap:                   var(--smj-listing-card-gap, var(--smj-grid-gap, 12px)) !important;
  align-items:           start;
}
@media (min-width: 768px)  { .smj-sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) { .smj-sr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.smj-sr-grid > * { min-width: 0; max-width: 100%; }


/* =============================================================================
   2. EQUAL-HEIGHT CARDS + RESPONSIVE IMAGES (no distortion / consistent height)
   ============================================================================= */

.smj-card,
.tmp-card {
  display:       flex;
  flex-direction:column;
  height:        100%;
  max-width:     100%;
}

/* Card image area keeps a fixed aspect-ratio so every card in a row is the same
   height. Falls back to a fixed height where aspect-ratio is unsupported. */
.smj-card__img,
.smj-card__img-link,
.smj-card__img-placeholder,
.smj-card-img,
.smj-card-img-link,
.tmp-card-img-link {
  position:      relative;
  width:         100%;
  aspect-ratio:  var(--smj-listing-image-aspect, 4 / 3);
  min-height:    0;
  overflow:      hidden;
}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .smj-card__img,
  .smj-card__img-link,
  .smj-card-img,
  .tmp-card-img-link { height: var(--smj-listing-image-height, 180px); }
}

/* All plugin images are fluid and never distort. */
.smj-card img,
.tmp-card img,
.smj-wrap .smj-listing-img,
.smj-sl-wrap img {
  display:    block;
  width:      100%;
  height:     100%;
  max-width:  100%;
  object-fit: cover;
}

/* Body grows to fill, pushing price/meta to a consistent baseline. */
.smj-card__body,
.tmp-card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }


/* =============================================================================
   3. TOUCH-FRIENDLY CONTROLS ON MOBILE (≥44px hit targets)
   ============================================================================= */
@media (max-width: 767px) {

  /* Buttons & action controls */
  .smj-btn,
  .smj-btn-primary,
  .smj-btn-secondary,
  .tmp-btn,
  .smj-card__cta,
  .smj-fav-btn,
  .smj-favorite-btn {
    min-height: 44px;
    padding-block: 10px;
  }

  /* Form fields, filters & selects */
  .smj-form input,
  .smj-form select,
  .smj-form textarea,
  .smj-filter select,
  .smj-filter input,
  .tmp-filter-field input,
  .tmp-filter-field select,
  .smj-search-bar input {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }

  /* Pagination — finger-sized tap targets */
  .smj-pagination a,
  .smj-pagination span,
  .smj-fav-pagination .smj-fav-page-item a,
  .smj-fav-pagination .smj-fav-page-item span,
  .page-numbers {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* =============================================================================
   4. FORMS, FILTERS & SEARCH — stack cleanly on mobile
   ============================================================================= */
@media (max-width: 767px) {

  /* Multi-column form / content layouts collapse to a single column. */
  .tmp-form-grid,
  .tmp-form-grid--2,
  .tmp-form-grid--3,
  .tmp-grid-2,
  .smj-form-grid,
  .smj-form-row { grid-template-columns: 1fr !important; }

  /* Filter / search bars stack and go full width. */
  .tmp-filters,
  .tmp-filter-form,
  .smj-search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  /* Search-page filter grid + fields → single column, full width. */
  .tmp-filter-grid { grid-template-columns: 1fr !important; }
  .tmp-filter-field,
  .tmp-filter-field--price,
  .tmp-filter-actions,
  .smj-search-bar > * { width: 100%; min-width: 0; }
  .tmp-filter-actions { display: flex; gap: 8px; }

  /* Listings page: sidebar + results stack (sidebar becomes the off-canvas
     drawer handled by JS; this guarantees the column flow collapses). */
  .smj-content-area { flex-direction: column !important; }
}


/* =============================================================================
   5. SPACING OPTIMISATION PER BREAKPOINT
   ============================================================================= */
@media (max-width: 1199px) {
  .smj-wrap,
  .smj-listings-wrap { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767px) {
  .smj-wrap,
  .smj-listings-wrap,
  .smj-sl-wrap { padding-left: 12px; padding-right: 12px; }

  /* Tighter card internals on small screens. */
  .smj-card__body,
  .tmp-card-body { padding: 10px; }

  /* Section headings scale down a touch. */
  .smj-section-title,
  .smj-listings-title { font-size: clamp(18px, 5vw, 22px); }
}


/* =============================================================================
   6. SINGLE-LISTING PAGE — responsive + overflow-proof
   Real classes: .smj-sl-wrap (page), .smj-sl-layout (main + 320px sidebar grid).
   The base sheet collapses at ≤860px; here we (a) collapse a touch earlier for
   tablets and (b) kill every source of horizontal scroll.
   ============================================================================= */
@media (max-width: 991px) {
  .smj-sl-layout { grid-template-columns: 1fr !important; }
  .smj-sl-sidebar { position: static !important; width: auto !important; }
}

/* Overflow guards — nothing inside the listing page may exceed the viewport. */
.smj-sl-wrap { max-width: 100%; overflow-x: clip; }
.smj-sl-wrap *,
.smj-sl-main,
.smj-sl-sidebar { min-width: 0; max-width: 100%; }
.smj-sl-main, .smj-sl-layout { min-width: 0; }

/* Spec table can never force width — wrap long values instead. */
.smj-sl-tbl { width: 100%; table-layout: fixed; }
.smj-sl-tbl th, .smj-sl-tbl td { overflow-wrap: anywhere; word-break: break-word; }

/* Gallery + thumbnail strip + any media stay within the column. */
.smj-sl-gallery,
.smj-sl-gallery img,
.smj-sl-main img,
.smj-sl-strip,
.smj-gallery img,
.smj-lb-img { max-width: 100%; }
.smj-sl-strip { overflow-x: auto; }


/* =============================================================================
   7. HEADER SEARCH BAR — keep it usable on mobile
   The base sheet HIDES the header search at ≤700px (burger only). For a
   marketplace the search must stay reachable, so we reflow it to a full-width
   second row. The header is position:sticky with an auto-measured height, so a
   taller header simply pushes content down — no overlap.
   ============================================================================= */
@media (max-width: 700px) {
  .smj-hdr__inner {
    flex-wrap: wrap;
    height: auto;
    row-gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .smj-hdr__search {
    display: flex !important;   /* override the base `display:none` */
    order: 99;                  /* drop to its own row, after logo/burger */
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* v6.9.54 — Only ONE search bar on mobile. The header search bar (with the
   "Search" button) is now visible on mobile, so the mobile drawer's duplicate
   search (the "Go" button one) is removed to avoid two search bars. Its
   margin-bottom lives on the element itself and the drawer uses gap:0, so
   hiding it leaves no empty space behind. Search keeps working via the header
   bar — this only hides a redundant duplicate, no markup/logic changed. */
.smj-hdr__drawer-search { display: none !important; }


/* =============================================================================
   8. FILTER SIDEBAR (listings) — reinforce the off-canvas drawer on mobile
   JS (in class-ui-render) toggles .is-open + injects the backdrop; these rules
   make sure the drawer + backdrop are correct regardless of load order.
   ============================================================================= */
@media (max-width: 991px) {
  .smj-sidebar-toggle { display: inline-flex !important; }
}
@media (max-width: 991px) {
  .smj-listings-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 300px; max-width: 86vw;
    height: 100vh; max-height: 100vh;
    z-index: 1000;
    transform: translateX(-105%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    background: #fff;
  }
  .smj-listings-sidebar.is-open { transform: translateX(0); box-shadow: 6px 0 40px rgba(0,0,0,.16); }
}
/* Backdrop behind the open drawer */
.smj-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, .45);
  z-index: 999;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.smj-sidebar-backdrop.is-open { opacity: 1; visibility: visible; }
/* Close-button row only shows inside the mobile drawer */
.smj-sidebar-close-btn { display: none; }
@media (max-width: 991px) {
  .smj-sidebar-close-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #eef0f3;
    font-weight: 700; font-size: 15px;
  }
  .smj-sidebar-close-btn button {
    border: none; background: none; font-size: 20px; line-height: 1;
    cursor: pointer; color: #6b7280; padding: 4px 8px;
  }
}

/* ── v6.9.58 — Mobile filter drawer usability: scrollable body, fixed header,
   sticky Apply/Reset footer, compact spacing. The drawer becomes a flex column
   pinned to the *dynamic* viewport height (100dvh) so the body — not the whole
   drawer — scrolls and the bottom actions are always reachable. ── */
@media (max-width: 991px) {
  /* Drawer = flex column at the true visible height */
  .smj-listings-sidebar {
    height: 100vh;            /* fallback for old browsers */
    height: 100dvh;          /* accounts for the mobile browser address bar */
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;        /* inner body scrolls, not the drawer itself */
  }
  /* Header row with the ✕ stays fixed at the very top */
  .smj-sidebar-close-btn {
    flex: 0 0 auto;
    background: #fff;
    padding: 12px 16px;
  }
  /* Panel fills the remaining height and becomes a column */
  .smj-sidebar-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: none; box-shadow: none; border-radius: 0;
  }
  /* The second, in-panel header ("Filters" + Clear all) is redundant on mobile:
     the close-btn already shows the title and the footer has a Reset button. */
  .smj-sidebar-panel__header { display: none; }
  /* Body → form become flex columns holding the scroll area + the pinned footer */
  .smj-sidebar-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .smj-sidebar-panel__body > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
  }
  /* THE scroll container — only the filter groups scroll; momentum on iOS and
     no scroll-chaining to the page behind it. */
  .smj-filter-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Compact sections, inputs and pills — tighter for small screens */
  .smj-filter-group__label { padding: 7px 14px; font-size: 11.5px; }
  .smj-filter-group__body  { padding: 0 14px 8px; }
  .smj-sidebar-panel input[type="number"],
  .smj-sidebar-panel input[type="text"],
  .smj-sidebar-panel select,
  .smj-sidebar-panel .smj-input,
  .smj-sidebar-panel .smj-select { padding: 6px 10px; font-size: 13px; }
  .smj-sidebar-panel select { background-position: right 9px center; padding-right: 28px; }
  .smj-sidebar-cat-pills { gap: 5px; }
  .smj-sidebar-cat-pills .smj-cat-pill { padding: 3px 11px; font-size: 12px; }
  .smj-filter-group__price-row { gap: 6px; }

  /* Footer pinned at the bottom of the drawer as a flex item — always visible */
  .smj-sidebar-apply {
    flex: 0 0 auto;
    display: flex; gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid #eef0f3;
    box-shadow: 0 -4px 16px rgba(0,0,0,.07);
  }
  .smj-sidebar-apply__reset {
    display: inline-flex; flex: 0 0 auto;
    align-items: center; justify-content: center;
    padding: 10px 16px;
  }
  .smj-sidebar-apply__go { flex: 1 1 auto; width: auto !important; padding: 10px 16px; }
}


/* =============================================================================
   9. FULL RESPONSIVE AUDIT FIXES (v6.9.50) — CSS only, zero logic changes
   ============================================================================= */

/* 9a. Horizontal-scroll catch-all.
   No global overflow guard existed anywhere, so ANY element wider than the
   viewport (a fixed width, a long unbroken string, a full-bleed 100vw block, an
   un-wrapped table) produced a sideways scroll. `overflow-x: clip` clips that
   excess WITHOUT creating a scroll container, so — unlike `overflow:hidden` — it
   does NOT break the sticky header. Scoped to pages where the plugin is active. */
body.smj-has-header { overflow-x: clip; }

/* 9b. Full-bleed wrappers (registration + dashboard) use width:100vw, which on
   desktop overflows by the scrollbar width and on mobile carries oversized
   desktop side-padding. The clip above removes the scrollbar overflow; here we
   right-size the inner padding for small screens (spacing only — the 100vw
   escape and all logic are untouched). */
@media (max-width: 767px) {
  .tmp-auth-wrap.smj-reg-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 480px) {
  .tmp-auth-wrap.smj-reg-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 9c. Auth modal / popup — guarantee it fits the viewport and isn't over-padded
   on phones (the 36px desktop padding cramps content at 360px). */
@media (max-width: 767px) {
  .smj-auth-modal-card {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 22px 18px !important;
  }
}

/* 9d. List-view card image was a fixed 220px — on a 320–360px phone that left
   almost no room for text and forced overflow. Scale it down on small screens
   (grid/4-3-2 view is unaffected; this only touches .tmp-card--list). */
@media (max-width: 600px) {
  .tmp-card--list .tmp-card-img-link {
    width: 120px !important;
    min-width: 120px !important;
    height: 110px !important;
  }
}
@media (max-width: 380px) {
  .tmp-card--list { flex-direction: column !important; }
  .tmp-card--list .tmp-card-img-link {
    width: 100% !important;
    min-width: 0 !important;
    height: 160px !important;
    border-radius: var(--smj-radius, 8px) var(--smj-radius, 8px) 0 0 !important;
  }
}

/* 9e. Generic data tables inside plugin content never force width — they wrap,
   and if still too wide they scroll inside their own box (not the whole page). */
.smj-wrap table,
.smj-sl-wrap table,
.smj-listings-wrap table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.smj-wrap table td,
.smj-wrap table th,
.smj-sl-wrap table td,
.smj-sl-wrap table th { overflow-wrap: anywhere; word-break: break-word; }

/* 9f. Small-mobile (<400px) — keep 2 columns (per spec) but tighten gaps and
   card text so two cards read cleanly side-by-side. */
@media (max-width: 400px) {
  .smj-grid,
  .smj-listings-grid,
  .smj-search-grid,
  .smj-sr-grid,
  .smj-featured-grid,
  .smj-similar-grid,
  .smj-favorites-grid,
  .smj-favorite-grid,
  .smj-db__card-grid,
  .smj-dashboard-grid {
    gap: 8px !important;
  }
  .smj-card__body,
  .tmp-card-body { padding: 8px !important; }
  .smj-card__title,
  .tmp-card-title { font-size: 13px; line-height: 1.3; }
  .smj-card__price,
  .smj-price { font-size: 14px; }
}

/* 9g. Belt-and-suspenders: any media/iframe/video inside plugin content stays
   fluid (covers embedded maps, oEmbeds, etc.). */
.smj-wrap img, .smj-wrap iframe, .smj-wrap video,
.smj-sl-wrap img, .smj-sl-wrap iframe, .smj-sl-wrap video,
.smj-listings-wrap img, .smj-listings-wrap iframe {
  max-width: 100%;
}


/* =============================================================================
   10. LOGIN MODAL (two-column) — overflow-proof + stack on mobile (v6.9.52)
   The two-column rule lives INLINE in class-theme-overrides.php (so it only
   refreshes on a full-page-cache purge). These file-based rules carry higher
   specificity (html body …) so this version-busted stylesheet enforces the
   same result as a second, cache-resilient path.
   ============================================================================= */

/* Columns can shrink below content width (kills the right-column clipping). */
html body .smj-auth-modal[data-layout="two_column"] #smj-panel-login {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

/* Phones + tablets: single column, card constrained to the viewport. */
@media (max-width: 991px) {
  html body .smj-auth-modal[data-layout="two_column"] #smj-panel-login {
    grid-template-columns: 1fr !important;
  }
  html body .smj-auth-modal[data-layout="two_column"] .smj-auth-modal-card,
  html body .smj-auth-modal .smj-auth-modal-card {
    max-width: var(--smj-auth-card-max-width, 440px) !important;
    width: 92vw !important;
  }
}

/* The "Continue with Google" button must wrap/clip inside its column, never
   force the card wider than the screen. */
.smj-auth-modal .smj-auth-social,
.smj-auth-modal .smj-auth-social .smj-social-btn,
.smj-auth-modal .smj-social-btn,
.smj-auth-modal .smj-auth-submit-btn {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}