/************************************************************
  RM Elementor AJAX Filters — Styles
  - Layout (sidebar/stack + collapsed + sticky)
  - Filters (chips)
  - Grid fixes + empty state
  - Toolbar (toggle + sort)
  - Loader (top + near button)
  - Load more button
  - Full-width overrides for Elementor containers
  - Sticky safety (overflow/transform)
************************************************************/

/* =========================
   Layout
========================= */

/* Base wrapper (gap applies when display is grid) */
.rm-el-wrap { gap: 1rem; }

/* Sidebar layout: filters left, grid right */
.rm-el-layout--sidebar {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  column-gap: 2rem;
  align-items: start;
}

/* Mobile/tablet: stack */
@media (max-width: 980px) {
  .rm-el-layout--sidebar { grid-template-columns: 1fr; }
}

/* Sticky filters on desktop — stick the COLUMN */
.rm-el-layout--sidebar .rm-el-filter-col {
  position: sticky;
  top: var(--rm-sticky-top, 110px); /* adjust for your fixed header */
  align-self: start;               /* prevent stretching */
}

/* The inner form is static (no sticky needed) */
.rm-el-layout--sidebar .rm-el-filter-col .rm-el-filter-form {
  position: static;
  top: auto;
}

/* Disable sticky on touch + smaller screens */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .rm-el-layout--sidebar .rm-el-filter-col {
    position: static !important;
    top: auto !important;
  }
  .rm-el-layout--sidebar { grid-template-columns: 1fr !important; }
}

/* Collapsed state (Hide Filters) */
.rm-el-layout--sidebar.rm-el--collapsed { grid-template-columns: 1fr !important; }
.rm-el-layout--sidebar.rm-el--collapsed .rm-el-filter-col { display: none !important; }

/* =========================
   Filters (chips)
========================= */

.rm-el-filter-group {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.rm-el-filter-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }

/* Desktop: vertical list */
@media (min-width: 1025px) {
  .rm-el-layout--sidebar .rm-el-chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .rm-el-layout--sidebar .rm-el-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
  }
}

/* Mobile/tablet: inline chips */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .rm-el-layout--sidebar .rm-el-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem .75rem !important;
    grid-template-columns: unset !important;
  }
  .rm-el-layout--sidebar .rm-el-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .35rem .65rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important; /* pill look */
    background: #fff !important;
  }
}

@media (max-width: 600px), (hover: none) and (pointer: coarse) {
    .rm-el-layout--sidebar .rm-el-chips {
        justify-content: end;
    }
    .rm-el-filter-title {
        text-align: center;
    }
}

/* =========================
   Grid + empty state
========================= */

.rm-el-grid { transition: opacity .25s ease, transform .25s ease; }
.rm-el-grid { min-height: 40px; }

/* Fix white gaps in Elementor ratio boxes after AJAX */
.rm-el-wrap .elementor-posts .elementor-post__thumbnail { position: relative; overflow: hidden; }
.rm-el-wrap .elementor-posts .elementor-post__thumbnail img,
.rm-el-wrap .elementor-posts .elementor-post__thumbnail > a > img {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Empty state */
.rm-el-grid .rm-no-results {
  display: block;
  margin: 24px auto;
  max-width: 680px;
  padding: 28px;
  text-align: center;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
  color: #4b5563;
}
.rm-no-results strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: .25rem;
  color: #374151;
}
.rm-no-results span {
  display: block;
  font-size: .95rem;
  color: #6b7280;
}

/* =========================
   Toolbar (toggle + sort)
========================= */

.rm-el-layout--sidebar .rm-el-toolbar { grid-column: 1 / -1; }
.rm-el-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 25px;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e2e2e2;
}

span.rm-el-sort-label {
    width: 100%;
}

.rm-el-toggle-filters {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    border: none;
    color: #374151!important;
    cursor: pointer;
    padding: .25rem .5rem;
    background-color: #cccccc00 !important;
    text-shadow: none !important;
}
.rm-el-toggle-filters:hover { background: #f3f4f6!important; }

/* Swap labels when collapsed */
.rm-el-toggle-filters .rm-label-show { display: none; }
.rm-el-wrap.rm-el--collapsed .rm-el-toggle-filters .rm-label-hide { display: none; }
.rm-el-wrap.rm-el--collapsed .rm-el-toggle-filters .rm-label-show { display: inline; }

.rm-el-sort { display: inline-flex; align-items: center; gap: .5rem; }
.rm-el-sort-select { min-width: 220px; }

@media (max-width: 980px) {
  .rm-el-toolbar { margin-bottom: .75rem; }
}
@media (max-width: 600px) {
    .rm-el-toolbar { 
        flex-wrap: wrap-reverse;
        justify-content: center; 
    }
}


/* =========================
   Loader (overlay)
========================= */

/* Overlay container */
.rm-el-results { position: relative; }

/* Top-positioned loader (used on filter changes) */
.rm-el-loading {
  position: absolute;
  inset: 0;
  display: none; /* JS sets display:flex then fadeIn */
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
  z-index: 2;
  align-items: flex-start;       /* near top */
  justify-content: center;
  padding-top: 40px;             /* tweak as needed */
}

/* Spinner + text */
.rm-el-loading-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #4b5563;
}
.rm-el-loading-content::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  border: 5px solid #d1d5db;
  border-top-color: #374151;
  border-radius: 50%;
  animation: rm-spin .8s linear infinite;
}
@keyframes rm-spin { to { transform: rotate(360deg); } }

/* Bottom-positioned loader (used for Load more) */
.rm-el-loading.is-bottom {
  align-items: flex-end;
  justify-content: center;
  padding-top: 0;
  padding-bottom: var(--rm-loader-offset, 56px); /* distance above button */
}

/* =========================
   Load more button
========================= */

.rm-el-wrap .elementor-pagination { display: none !important; } /* hide Elementor's own */

.rm-el-load-more {
    display: block;
    margin: 40px auto 0;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-weight: 600;
    cursor: pointer;
    width: 200px;
    border-radius: 4px;
    padding: 15px;
    font-size: 20px;
    transition: transform .08s ease, box-shadow .2s ease;
}
.rm-el-load-more:hover { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.rm-el-load-more:active { transform: translateY(1px); }

/* =========================
   Full-width overrides (Elementor containers)
========================= */

/* New Elementor "Container" model */
/*.e-con:has(.rm-el-wrap) {*/
/*  max-width: none !important;*/
/*  width: 100% !important;*/
  --content-width: 100% !important; /* some themes cap with this var */
/*}*/

/* Legacy Sections/Columns */
/*.elementor-section:has(.rm-el-wrap) > .elementor-container {*/
/*  max-width: none !important;*/
/*  width: 100% !important;*/
/*}*/
/*.elementor-column:has(.rm-el-wrap),*/
/*.e-con-inner:has(.rm-el-wrap) {*/
/*  max-width: none !important;*/
/*  width: 100% !important;*/
/*}*/

/* Shortcode widget container may also cap width */
/*.elementor .elementor-widget-shortcode .elementor-widget-container,*/
/*.elementor .elementor-widget-shortcode .elementor-widget-container > .rm-el-wrap {*/
/*  max-width: none !important;*/
/*  width: 100% !important;*/
/*}*/

/* =========================
   Sticky safety (avoid common blockers)
========================= */

/* Ensure ancestors don't clip sticky children */
.rm-el-wrap,
.rm-el-layout--sidebar,
.rm-el-filter-col,
.elementor .elementor-widget-shortcode .elementor-widget-container {
  overflow: visible !important;
}

/* If motion/entrance effects add transforms on the hosting section, they can break sticky.
   Neutralize transforms only on the specific host that contains our widget. */
.e-con:has(.rm-el-wrap),
.elementor-section:has(.rm-el-wrap) {
  transform: none !important;
}