/* ======================================================
   Everjoy Listing Pages (Vendors, Rentals, Catering)
   - Shared layout for listing results pages
   - Title & subtitle typography
   - Grid layout / card sizing
   - Card shell (radius, borders, hover)
   - Mobile toolbar adjustments
   - Performance tweaks
   Scopes:
   - body[data-page-kind="vendor"]
   - body[data-page-kind="rental"]
   - body[data-page-kind="catering"]
====================================================== */

:root {
  --listing-card-radius: 16px;
  --listing-card-border: 1px solid #e5e7eb;
  --listing-card-shadow: 0 8px 22px rgba(15,23,42,.08);
  --listing-card-shadow-hover: 0 10px 26px rgba(15,23,42,.12);
}

/* Shared section padding + wrap width */
body[data-page-kind="vendor"]   .results-section,
body[data-page-kind="rental"]   .results-section,
body[data-page-kind="catering"] .results-section {
  padding: 50px 0 72px;
}

body[data-page-kind="vendor"]   .wrap.results-wrap,
body[data-page-kind="rental"]   .wrap.results-wrap,
body[data-page-kind="catering"] .wrap.results-wrap {
  max-width: 1350px;
  margin: 0 auto;
}

body[data-page-kind="vendor"]   .results-layout,
body[data-page-kind="rental"]   .results-layout,
body[data-page-kind="catering"] .results-layout {
  margin-top: 0;
}

/* Shared results title styles (desktop + mobile) */
body[data-page-kind="vendor"]   .results-head .results-title .results-title-main,
body[data-page-kind="rental"]   .results-head .results-title .results-title-main,
body[data-page-kind="catering"] .results-head .results-title .results-title-main {
  display: block;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.015em;
}

body[data-page-kind="vendor"]   .results-head .results-title .results-subtitle,
body[data-page-kind="rental"]   .results-head .results-title .results-subtitle,
body[data-page-kind="catering"] .results-head .results-title .results-subtitle {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
  color: #64748b;
}

@media (min-width: 960px){
  body[data-page-kind="vendor"]   .results-head .results-title .results-title-main,
  body[data-page-kind="rental"]   .results-head .results-title .results-title-main,
  body[data-page-kind="catering"] .results-head .results-title .results-title-main {
    font-size: 28px;
  }
  body[data-page-kind="vendor"]   .results-head .results-title .results-subtitle,
  body[data-page-kind="rental"]   .results-head .results-title .results-subtitle,
  body[data-page-kind="catering"] .results-head .results-title .results-subtitle {
    font-size: 14px;
  }
}

/* Prevent pseudo header text on listing pages (all 3) */
body[data-page-kind="vendor"]   .results-title::before,
body[data-page-kind="vendor"]   .results-title::after,
body[data-page-kind="rental"]   .results-title::before,
body[data-page-kind="rental"]   .results-title::after,
body[data-page-kind="catering"] .results-title::before,
body[data-page-kind="catering"] .results-title::after {
  content: none !important;
}

/* Shared cards grid */
body[data-page-kind="vendor"]   #gridResults.cards-grid,
body[data-page-kind="rental"]   #gridResults.cards-grid,
body[data-page-kind="catering"] #gridResults.cards-grid {
  display: grid;
  gap: 24px;
  justify-content: start;
  align-content: start;
  justify-items: stretch;
  padding-top: 20px;
}

body[data-page-kind="vendor"]   #gridResults.cards-grid > .card,
body[data-page-kind="rental"]   #gridResults.cards-grid > .card,
body[data-page-kind="catering"] #gridResults.cards-grid > .card {
  width: 100%;
  max-width: 320px;
  margin: 0;
}

@media (min-width: 1200px){
  body[data-page-kind="vendor"]   #gridResults.cards-grid > .card,
  body[data-page-kind="rental"]   #gridResults.cards-grid > .card,
  body[data-page-kind="catering"] #gridResults.cards-grid > .card {
    max-width: 340px;
  }
}

@media (max-width: 540px){
  body[data-page-kind="vendor"]   #gridResults.cards-grid,
  body[data-page-kind="rental"]   #gridResults.cards-grid,
  body[data-page-kind="catering"] #gridResults.cards-grid {
    grid-template-columns: 1fr;
  }
  body[data-page-kind="vendor"]   #gridResults.cards-grid > .card,
  body[data-page-kind="rental"]   #gridResults.cards-grid > .card,
  body[data-page-kind="catering"] #gridResults.cards-grid > .card {
    max-width: none;
  }
}

/* Shared card shell + hover for *all* listing pages */
body[data-page-kind="vendor"]   #gridResults > *,
body[data-page-kind="rental"]   #gridResults > *,
body[data-page-kind="catering"] #gridResults > * {
  background: #fff;
  border: var(--listing-card-border);
  border-radius: var(--listing-card-radius);
  box-shadow: var(--listing-card-shadow);
  padding: 0;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

body[data-page-kind="vendor"]   #gridResults > *:hover,
body[data-page-kind="rental"]   #gridResults > *:hover,
body[data-page-kind="catering"] #gridResults > *:hover {
  transform: translateY(-2px);
  box-shadow: var(--listing-card-shadow-hover);
}

/* Shared hero image aspect */
body[data-page-kind="vendor"]   #gridResults > * > :first-child,
body[data-page-kind="rental"]   #gridResults > * > :first-child,
body[data-page-kind="catering"] #gridResults > * > :first-child {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  background: #f2f5f9;
  overflow: hidden;
}

body[data-page-kind="vendor"]   #gridResults > * > :first-child img,
body[data-page-kind="rental"]   #gridResults > * > :first-child img,
body[data-page-kind="catering"] #gridResults > * > :first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

body[data-page-kind="vendor"]   #gridResults > *:hover > :first-child img,
body[data-page-kind="rental"]   #gridResults > *:hover > :first-child img,
body[data-page-kind="catering"] #gridResults > *:hover > :first-child img {
  transform: scale(1.03);
}

/* Clean card footer (no extra line) */
body[data-page-kind="vendor"]   .card-footer,
body[data-page-kind="rental"]   .card-footer,
body[data-page-kind="catering"] .card-footer {
  border-top: 0;
  padding-top: 0;
  margin-top: 8px;
}

/* Saved hearts: consistent red when “on” */
body[data-page-kind="vendor"]   .cards-grid .card :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[aria-pressed="true"],
body[data-page-kind="vendor"]   .cards-grid .card :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[data-saved="1"],
body[data-page-kind="vendor"]   .cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn).is-saved,
body[data-page-kind="rental"]   .cards-grid .card :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[aria-pressed="true"],
body[data-page-kind="rental"]   .cards-grid .card :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[data-saved="1"],
body[data-page-kind="rental"]   .cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn).is-saved,
body[data-page-kind="catering"] .cards-grid .card :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[aria-pressed="true"],
body[data-page-kind="catering"] .cards-grid .card :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[data-saved="1"],
body[data-page-kind="catering"] .cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn).is-saved {
  background: #fff !important;
  color: #e11d48 !important;
  border-color: #cfe3f7;
}

/* Mobile / tablet toolbar layout & sort field */
@media (max-width: 960px){
  body[data-page-kind="vendor"]   .results-toolbar,
  body[data-page-kind="rental"]   .results-toolbar,
  body[data-page-kind="catering"] .results-toolbar {

    padding: 0;
  }

  body[data-page-kind="vendor"]   .toolbar-actions,
  body[data-page-kind="rental"]   .toolbar-actions,
  body[data-page-kind="catering"] .toolbar-actions {
    margin: 10px 0 8px;
  }

  body[data-page-kind="vendor"]   .toolbar-actions .sort-wrap select,
  body[data-page-kind="rental"]   .toolbar-actions .sort-wrap select,
  body[data-page-kind="catering"] .toolbar-actions .sort-wrap select {
    width: 100%;
    height: 40px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font: 600 14px/1 "Poppins", system-ui;
    color: #0f172a;
  }
}

/* Desktop: hide mobile bottom tab bar on listing pages */
@media (min-width: 960px){
  body[data-page-kind="vendor"]   #mbTabbar,
  body[data-page-kind="rental"]   #mbTabbar,
  body[data-page-kind="catering"] #mbTabbar {
    display: none !important;
  }
}

/* Performance: content-visibility for offscreen cards */
body[data-page-kind="vendor"]   #gridResults > *,
body[data-page-kind="rental"]   #gridResults > *,
body[data-page-kind="catering"] #gridResults > * {
  content-visibility: auto;
  contain-intrinsic-size: 300px 210px;
}

/* Reduced motion: soften transitions */
@media (prefers-reduced-motion: reduce){
  body[data-page-kind="vendor"]   #gridResults > *,
  body[data-page-kind="rental"]   #gridResults > *,
  body[data-page-kind="catering"] #gridResults > * {
    transition: none;
  }
}

/* ============================================
   Shared layout for listing pages
   - Vendors / Rentals / Catering
   - Wrapper + horizontal padding
============================================ */
:is(body[data-page-kind="vendor"],
    body[data-page-kind="rental"],
    body[data-page-kind="catering"]) .results-wrap{
  max-width: 1350px;
  margin: 0 auto;
  padding: 40px 20px 96px; /* desktop default */
  box-sizing: border-box;
}

/* Tablet: keep strong side padding */
@media (max-width: 1024px){
  :is(body[data-page-kind="vendor"],
      body[data-page-kind="rental"],
      body[data-page-kind="catering"]) .results-wrap{
    padding-inline: 24px;
    padding-top: 32px;
    padding-bottom: 80px;
  }
}

/* Mobile: slightly tighter but still comfy */
@media (max-width: 640px){
  :is(body[data-page-kind="vendor"],
      body[data-page-kind="rental"],
      body[data-page-kind="catering"]) .results-wrap{
    padding-inline: 16px;
    padding-top: 24px;
    padding-bottom: 72px;
  }
}

/* === Browse skeletons (light, a11y-safe) — results pages === */
:root{
  --skel-bg: #f2f3f5;
  --skel-sh: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.05), rgba(0,0,0,0));
}
.browse-skeletons{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
}
.skel-card{
  border:1px solid var(--line, #e6e7ea);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.skel-thumb{
  aspect-ratio: 4 / 3;
  background: var(--skel-bg);
  position:relative;
}
.skel-line{
  height:12px;
  margin:10px 12px;
  border-radius:8px;
  background: var(--skel-bg);
}
.skel-line.sm{ width:45%; }
.skel-line.md{ width:70%; }
.skel-anim{
  position:absolute; inset:0;
  background: var(--skel-sh);
  animation: skel 1.2s linear infinite;
}
@keyframes skel{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* === Listing cards (vendors/venues/rentals browse) === */
.card:hover{
  box-shadow: 0 6px 20px rgba(2,95,188,.10);
  transform: translateY(-1px);
}

.card-media{
  position: relative;
  aspect-ratio: 16 / 9;     /* slightly shorter hero; no CLS */
  background: #f2f4f8;
  overflow: hidden;
}
.card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body{
  display: grid;
  gap: 6px;
  padding: 12px 14px 14px;
}
.card-title{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a; /* slate-900 */
}
.card-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 13px;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef6ff;
  color: #025fbc;
  border: 1px solid #d6ebff;
  white-space: nowrap;
}
.price{
  margin-top: 2px;
  font-size: 14px;
  color: #0f172a;
}
.price .unit{
  color: #64748b;
  font-weight: 500;
}

/* Save-heart on cards */
.heart-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.heart-btn:hover{ transform: scale(1.04); }
.heart-btn:active{ transform: scale(.98); }
.heart-btn svg{
  width: 18px;
  height: 18px;
  display:block;
  fill: currentColor;
  stroke: none;
}
.heart-btn.is-saved{ color: #e11d48; }
.heart-btn[aria-pressed="true"]{ background:#fff; }

/* Heart micro-pop animation */
.heart-pop{ animation: heart-pop .18s ease; }
@keyframes heart-pop{
  0%{ transform: scale(.9); }
  80%{ transform: scale(1.1); }
  100%{ transform: scale(1); }
}

/* === Results pagination (pager) === */
.pager{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  margin-top: 30px;
  user-select:none;
}
.pager button{
  border:1px solid #e2e8f0;
  background:#fff;
  color:#0f172a;
  border-radius:10px;
  padding:8px 12px;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.pager button:hover{ background:#f8fafc; }
.pager button[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
.pager .is-current{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}

/* === Map preview tile (map peek) on results pages === */
#mapPeek{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 320px;
  height: 220px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(2,95,188,.18);
  overflow: hidden;
  pointer-events: none !important;  /* never steals clicks */
  z-index: 450;                     /* below header, above content */
}
#mapPeek[hidden]{ display:none !important; }
#mapPeek *{ pointer-events: none !important; }

#mapPeekMap{
  width:100%;
  height:170px;
}
#mapPeekMeta{
  padding: 8px 10px;
  font: 600 13px 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:#0f172a;
  border-top: 1px solid #e6e9ef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Results page heading (e.g., "Showing N venues in…") === */
.results-head{
  margin: 12px 0 14px;
}
.results-title{
  margin: 0;
  font-size: clamp(18px, 3.2vw, 28px);
  line-height: 1.15;
  font-weight: 700;
  color: #0f172a;
}

/* === Filters panel (sidebar/sheet) on browse pages === */

/* Main filters sheet */
.filters-panel{
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 16px 36px rgba(15,23,42,.14);
  padding:16px 20px 14px;
  max-width:780px;
  margin:0 auto;
  box-sizing:border-box;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}

@media (max-width:768px){
  .filters-panel{
    max-width:none;
    width:100%;
    border-radius:16px;
    padding:14px 14px 12px;
  }
}
/* ===============================
   Mobile bottom-sheet Filters UI
   =============================== */
@media (max-width: 960px){
  /* Results layout becomes single-column */
  body[data-page-kind="vendor"]   .results-layout,
  body[data-page-kind="rental"]   .results-layout,
  body[data-page-kind="catering"] .results-layout{
    display:block;
  }

  /* Filters panel = fixed bottom sheet (offscreen by default) */
  body[data-page-kind="vendor"]   #filtersPanel,
  body[data-page-kind="rental"]   #filtersPanel,
  body[data-page-kind="catering"] #filtersPanel{
    position: fixed;
    left: 0;
    right: 0;
    z-index: 460;
    margin: 0;
    max-width: none;
    width: 100%;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 36px rgba(15,23,42,.25);
    background: #ffffff;

    /* sheet sizing */
    max-height: min(80vh, 620px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* animation state: hidden = slid down */
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;

    /* comfy mobile padding */
    padding: 16px 20px 18px;
  }

  /* When JS opens it (adds .is-open), slide up & enable interaction */
  body[data-page-kind="vendor"]   #filtersPanel.is-open,
  body[data-page-kind="rental"]   #filtersPanel.is-open,
  body[data-page-kind="catering"] #filtersPanel.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition:
      transform .25s cubic-bezier(.25,.8,.25,1),
      opacity   .18s ease-out;
  }

  /* Dark scrim behind the sheet */
  .sheet-scrim{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 450;
  }
  .sheet-scrim[hidden]{
    display: none !important;
  }
}

/* Title row */
.filters-panel h2{
  margin:0 0 8px;
  font-weight:600;
  font-size:16px;
  line-height:1.3;
  color:#0f172a;
}

/* Light divider lines in the sheet */
.filters-panel .divider{
  margin:14px 0;
  border:0;
  border-top:1px solid rgba(148,163,184,.22);
}

/* Section cards */
.filters-panel .filter-section{
  margin:10px 0 0;
  padding:10px 14px 12px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

/* Section heading */
.filters-panel .filter-heading{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#475569;
}

.filters-panel .filter-heading .icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
}

/* Dropdown wrapper */
.filters-panel .ej-dd{
  width:100%;
}

/* Pill-style dropdown toggles */
.filters-panel .ej-dd-toggle,
.filters-panel .ej-dd button.ej-dd-toggle{
  width:100%;
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-weight:500;
  font-size:13px;
  color:#0f172a;
  cursor:pointer;
}

/* Dropdown menu card */
.filters-panel .ej-dd-menu{
  margin-top:6px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
  background:#ffffff;
  max-height:240px;
  overflow:auto;
}

/* Hide the underlying native select (we use the*

/* Budget slider row */
.filters-panel .budget-row{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:#475569;
}

.filters-panel .budget-row .min,
.filters-panel .budget-row .max{
  min-width:52px;
  font-weight:500;
}

/* Range slider track */
.filters-panel .budget-row input[type="range"]{
  flex:1;
  appearance:none;
  -webkit-appearance:none;
  height:3px;
  border-radius:999px;
  background:#e5e7eb;
  outline:none;
}

/* WebKit thumb */
.filters-panel .budget-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:999px;
  background:#ef4444;
  border:2px solid #ffffff;
  box-shadow:0 0 0 1px rgba(239,68,68,.25);
}

/* Firefox thumb */
.filters-panel .budget-row input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#ef4444;
  border:2px solid #ffffff;
  box-shadow:0 0 0 1px rgba(239,68,68,.25);
}

/* Firefox track */
.filters-panel .budget-row input[type="range"]::-moz-range-track{
  height:3px;
  border-radius:999px;
  background:#e5e7eb;
}

.filters-panel .filter-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #e2e8f0;
}

/* Keep sticky filter sidebars under the fixed header */

/* Filter footer buttons */
.filters-panel .filter-actions .btn-primary,
.filters-panel .filter-actions .btn-ghost{
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    filter .15s ease;
  font-family: 'Poppins', sans-serif;
  border-radius:999px;
  padding:10px 20px;
  font-size:13px;
  font-weight:600;
  border:1px solid transparent;

}
/* Apply button: navy pill with white text */
.filters-panel .filter-actions .btn-primary{
  background:#0f172a;
  color:#ffffff;
  border-color:#0f172a;
  box-shadow:0 6px 14px rgba(15,23,42,.18);
}
/* Hide underlying native location select in the filters sheet */
.filters-panel select.sr-only-keep,
.filters-panel #fLocation.sr-only-keep{
  display:none !important;
}

/* Keep technical search field hidden inside the sheet */
.filters-panel #fQuery{
  display:none;
}

/* Primary (Apply) */
.filters-panel .filter-actions .btn-primary:hover,
.filters-panel .filter-actions .btn-primary:focus-visible{
  filter: brightness(1.04);
  box-shadow: 0 3px 8px rgba(15,23,42,.10);
}
.filters-panel .filter-actions .btn-primary:active{
  filter: brightness(.98);
  box-shadow: 0 2px 4px rgba(15,23,42,.08);
}

/* Ghost (Clear) */
.filters-panel .filter-actions .btn-ghost:hover,
.filters-panel .filter-actions .btn-ghost:focus-visible{
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.filters-panel .filter-actions .btn-ghost:active{
  background: #f1f5f9;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}

/* Accessibility: visible keyboard focus without default outline clash */
.filters-panel .filter-actions .btn-primary:focus-visible,
.filters-panel .filter-actions .btn-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(2,95,188,.16),
              0 6px 14px rgba(15,23,42,.14);
}

/* Disabled safety */
.filters-panel .filter-actions .btn-primary:disabled,
.filters-panel .filter-actions .btn-ghost:disabled{
  opacity: .6;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Big results headline (moved from global.css) */
.results-head{ margin: 12px 0 14px; }
.results-title{
  margin: 0;
  font-size: clamp(18px, 3.2vw, 28px);
  line-height: 1.15;
  font-weight: 700;
  color: #0f172a;
}

/* =========================================================
   Listings toolbar (search + Filters + sort dropdown)
   ========================================================= */
.results-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:12px 0 16px;
}

/* Search pill */
.results-actions .search-wrap{
  position:relative;
  flex:1 1 260px;
  min-width:220px;
}
.results-actions .search-wrap input[type="search"],
.results-actions input[type="search"]{
  width:100%;
  padding:10px 36px 10px 14px;      /* room for icon on the right */
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  font:500 14px Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  color:#0f172a;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.results-actions .search-wrap input[type="search"]:focus,
.results-actions input[type="search"]:focus{
  border-color:#025fbc;
  box-shadow:0 0 0 3px rgba(2,95,188,.14);
  background:#fff;
}

/* Search icon button – sits inside the pill on the right */
.results-actions .search-wrap button,
.results-actions button.results-search-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#64748b;
  display:grid;
  place-items:center;
  cursor:pointer;
}

/* Filters + sort controls: white rounded “chips” */
.results-actions .filters-btn,
.results-actions #filtersBtn,
.results-actions button[data-role="filters"],
.results-actions select{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  font:500 14px Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  color:#0f172a;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* Filter icon */
.results-actions .filters-btn svg,
.results-actions #filtersBtn svg{
  width:16px;
  height:16px;
}

/* Sort dropdown: pill with custom chevron */
.results-actions select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:28px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

/* Keep Filters + sort together */
.results-actions .secondary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Stack nicely on mobile: search full-width, buttons below */
@media (max-width:640px){
  .results-actions{
    align-items:stretch;
  }
  .results-actions .search-wrap{
    flex-basis:100%;
  }
}

/* ============================================================
   Results toolbar + actions (search, Filters, sort)
   Used on Vendors / Venues / Rentals listing pages
============================================================ */

/* Title on the left, actions on the right */
.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.results-toolbar .results-head {
  flex: 0 1 auto;
  min-width: 220px;
}

.results-toolbar .toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 320px;
  gap: 10px;
}

/* Stack nicely on small screens */
@media (max-width: 768px) {
  .results-toolbar {
    align-items: flex-start;
  }
  .results-toolbar .results-head {
    order: 1;
  }
  .results-toolbar .toolbar-actions {
    order: 2;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

/* <!-- Mobile bottom-sheet filters + floating Filters button --> */

/* Bottom-sheet filters on mobile/tablet */
@media (max-width: 960px){
  body[data-page-kind="rental"] .filters-sidebar.filters-panel{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 64px;                     /* was 0 — sit just above mobile nav */
    margin: 0;
    max-width: none;
    width: 100%;
    height: auto;                      /* let content define height */
    max-height: calc(100vh - 64px);    /* viewport minus nav height */
    border-radius: 18px 18px 0 0;
    background: #ffffff;
    box-shadow: 0 -16px 40px rgba(15,23,42,.28);
    transform: translateY(100%);
    opacity: 0;
    transition: transform .24s ease-out, opacity .24s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;              /* small internal pad under buttons */
    box-sizing: border-box;
    display: block !important;
  }


  body.filters-sheet-open[data-page-kind="rental"] .filters-sidebar.filters-panel{
    transform: translateY(0) !important;
    opacity: 1 !important;
  }


  /* Scrim behind the sheet */
  #filtersScrim.sheet-scrim{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  #filtersScrim[hidden]{
    display: none !important;
  }

  /* Results layout is full-width on mobile (no sidebar column) */
  body[data-page-kind="rental"] .results-wrap.results-layout{
    max-width: 1350px;
    margin: 0 auto;
  }

  /* Hide toolbar Filters button on mobile/tablet */
  #resultsActions #filtersToggle{
    display: none !important;
  }
}

/* Floating FULL-WIDTH Filters bar above the mobile tab bar */
.mb-filter-btn{
  display: none; /* default off; mobile rule below will turn it on */
}

@media (max-width: 960px){
  .mb-filter-btn{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 85px; /* sits just above the mobile nav menu */
    z-index: 600;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    width: calc(100% - 24px); /* nearly full width with small side padding */
    border-radius: 999px;
    border: 0;
    background: #0f172a;
    color: #ffffff;
    font: 600 13px/1 "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    box-shadow: 0 12px 32px rgba(15,23,42,.40);
  }
  .mb-filter-btn svg{
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 960px){
  /* When the filters sheet is open, hide the floating Filters bar */
  html.sheet-open .mb-filter-btn,
  body.filters-sheet-open .mb-filter-btn{
    display: none !important;
  }
}
/* Hide floating button on desktop */
@media (min-width: 961px){
  .mb-filter-btn{
    display: none !important;
  }
}

/* --- Search pill --- */
.results-main .toolbar-actions .searchbar {
  display: flex;
  align-items: center;
  flex: 0 0 260px;   /* fixed pill width, doesn’t stretch across the row */
  max-width: 260px;
  height: 44px;      /* match Filters / Featured height */
  padding: 0 10px 0 18px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.results-main .toolbar-actions .searchbar input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  padding: 0 8px 0 0;   /* vertical centering handled by flex */
}

.results-main .toolbar-actions .searchbar button {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.results-main .toolbar-actions .searchbar button svg {
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

/* --- Filters pill button --- */
.results-main .toolbar-actions .btn-with-icon {
  display: inline-flex;
  align-items: center;
  height: 44px;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.results-main .toolbar-actions .btn-with-icon svg {
  width: 16px;
  height: 16px;
}

/* --- Sort select pill --- */
.results-main .toolbar-actions .sort-wrap {
  position: relative;
}

.results-main .toolbar-actions .sort-wrap select {
  display: block;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 0 18px;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

/* Make Filters + sort pills share the same width */
.results-main .toolbar-actions .btn-with-icon,
.results-main .toolbar-actions .sort-wrap select {
  min-width: 130px;
}

/* Keep all top-right actions the same pill height */
.results-main .toolbar-actions .searchbar,
.results-main .toolbar-actions .btn-with-icon,
.results-main .toolbar-actions .sort-wrap select {
  height: 44px;
}

/* Slightly unify padding so Filters + Featured match nicely */
.results-main .toolbar-actions .btn-with-icon {
  padding: 10px 18px; /* a bit taller + same horizontal padding */
}

.results-main .toolbar-actions .sort-wrap select {
  padding: 10px 18px;
}
/* Centered / full-height empty state for browse pages */
#resultsEmpty {
  display: none; /* default hidden; JS will flip via .is-empty */
}

.results-main.is-empty {
  display: flex;
  flex-direction: column;
  /* fill viewport between header + footer */
  min-height: calc(90vh - var(--header-h, 88px) - 120px);
}

/* When empty, center the block both ways */
.results-main.is-empty #resultsEmpty {
  display: flex;
  flex: 1;
  align-items: center;       /* vertical center */
  justify-content: center;   /* horizontal center */
}

/* Keep content from getting too wide */
.results-main.is-empty #resultsEmpty .empty-wrap {
  max-width: 480px;
}

/* Typography + button */
.results-main.is-empty #resultsEmpty h3 {
  margin: 0 0 6px;
  font: 700 20px/1.25 "Poppins", system-ui;
  color: #0f172a;
}

.results-main.is-empty #resultsEmpty p {
  margin: 0 0 12px;
  font: 400 14.5px/1.5 "Poppins", system-ui;
  color: #4b5563;
}

.results-main.is-empty #resultsEmpty .btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #cfe1ff;
  background: #eaf3ff;
  font: 600 13px/1.2 "Poppins", system-ui;
  color: #0f172a;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .08s ease;
}

.results-main.is-empty #resultsEmpty .btn-reset:hover {
  background: #dbeafe;
  border-color: #b6d4fe;
  transform: translateY(-1px);
}
.results-main.is-empty #resultsEmpty .empty-wrap {
  max-width: 480px;
  padding: 24px 28px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  text-align: center;
}

/* Ensure tip close "X" is visible on all listing pages */
.results-main .results-tip .tip-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 8px;

  font-size: 18px !important;
  line-height: 1;
  font-weight: 800;
  color: #0f3d73 !important;
}
/* Force the "X" in the browse tip bar to be visible on all listing pages */
.results-main .results-tip .tip-dismiss {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* override any global button resets */
  font-size: 18px !important;
  line-height: 1;
  font-weight: 800;
  color: #0f3d73 !important;
  text-indent: 0 !important;
}

/* Draw the icon via pseudo-element so it shows even if the text node gets styled away */
.results-main .results-tip .tip-dismiss::before {
  content: "×";
}

/* Hover state */
.results-main .results-tip .tip-dismiss:hover {
  background: rgba(29, 78, 216, .08);
  opacity: 1;
}