/* ==========================================================================
   Forefind — franchise archive (/franchises/)
   Depends on forefind-ui.css for the tokens, the .page-hero shell and the
   listing card itself. Only the page's own furniture lives here: the results
   toolbar, the grid, pagination and the empty state.
   ========================================================================== */

.forefind-listings {
  background: var(--ff-bg, #F7F8FA);
  min-height: 60vh;
}

.forefind-listings .ff-wrap {
  max-width: var(--ff-container, 1200px);
  margin: 0 auto;
  padding: 0 24px 72px;
}

/* ── Results toolbar ───────────────────────────────────────────────────── */

.forefind-listings .lst-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 26px 0 20px;
}

.forefind-listings .lst-count {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ff-muted, #6B7280);
}
.forefind-listings .lst-count strong {
  color: var(--ff-ink, #111827);
  font-weight: 700;
}

.forefind-listings .lst-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* A chip is the filter AND its remove control — the whole thing is the link
   that drops it, so there is no separate × to aim at. */
.forefind-listings .lst-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--ff-brand-soft, #E9F8ED);
  border: 1px solid var(--ff-brand-mid, #CFEFD6);
  color: var(--ff-brand-dark, #26993D);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.forefind-listings .lst-chip:hover {
  background: #fff;
  border-color: var(--ff-brand, #30B94A);
}
.forefind-listings .lst-chip svg { flex: 0 0 auto; opacity: .7; }
.forefind-listings .lst-chip:hover svg { opacity: 1; }

.forefind-listings .lst-chip-clear {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--ff-muted, #6B7280);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.forefind-listings .lst-chip-clear:hover { color: var(--ff-ink, #111827); }

/* ── The grid ──────────────────────────────────────────────────────────── */

.forefind-listings .lst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Pagination ────────────────────────────────────────────────────────── */

.forefind-listings .lst-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 44px;
}

.forefind-listings .lst-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--ff-border, rgba(17,24,39,.10));
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ff-ink, #111827);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.forefind-listings .lst-pager a.page-numbers:hover {
  border-color: var(--ff-brand, #30B94A);
  color: var(--ff-brand-dark, #26993D);
}
.forefind-listings .lst-pager .page-numbers.current {
  background: var(--ff-brand, #30B94A);
  border-color: var(--ff-brand, #30B94A);
  color: #fff;
}
.forefind-listings .lst-pager .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--ff-muted, #6B7280);
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.forefind-listings .lst-empty {
  text-align: center;
  padding: 72px 24px 88px;
  background: #fff;
  border: 1px solid var(--ff-border, rgba(17,24,39,.10));
  border-radius: 18px;
}
.forefind-listings .lst-empty-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ff-brand-soft, #E9F8ED);
  color: var(--ff-brand-dark, #26993D);
}
.forefind-listings .lst-empty-mark svg { width: 24px; height: 24px; }
.forefind-listings .lst-empty h2 {
  font-family: var(--ff-font-display, 'DM Sans', sans-serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--ff-ink, #111827);
  margin: 0 0 8px;
}
.forefind-listings .lst-empty p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--ff-muted, #6B7280);
  margin: 0 0 22px;
}
.forefind-listings .lst-empty-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.forefind-listings .lst-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--ff-brand, #30B94A);
  border: 1px solid var(--ff-brand, #30B94A);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.forefind-listings .lst-btn:hover { background: var(--ff-brand-dark, #26993D); color: #fff; }
.forefind-listings .lst-btn-ghost {
  background: #fff;
  border-color: var(--ff-border, rgba(17,24,39,.10));
  color: var(--ff-ink, #111827);
}
.forefind-listings .lst-btn-ghost:hover { background: var(--ff-bg, #F7F8FA); color: var(--ff-ink, #111827); }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .forefind-listings .lst-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .forefind-listings .lst-grid { grid-template-columns: 1fr; }
  .forefind-listings .ff-wrap { padding: 0 16px 52px; }
  .forefind-listings .lst-toolbar { align-items: flex-start; flex-direction: column; }
}

/* ── The existing search/filter bar ────────────────────────────────────────
   Kept rather than rebuilt: it carries the working investment, city and
   franchise-count controls. Its internals are styled by the parent theme,
   which this file cannot see, so the bar is given a home in the new design
   rather than restyled from the outside — a white panel matching the cards,
   and a reset of the stock container widths that would otherwise fight the
   page's own wrapper. */
.forefind-listings .lst-filterbar {
  background: #fff;
  border: 1px solid var(--ff-border, rgba(17,24,39,.10));
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 26px;
  /* Everything inside is Bootstrap floats — .col-md-12, .filter-top-section
     (float:left, main.css:15412), .pull-left — so without a flow root the panel
     collapses to a strip and the fields render outside it on the page ground. */
  display: flow-root;
}
.forefind-listings .lst-filterbar > *:last-child { margin-bottom: 0; }
.forefind-listings .lst-filterbar .container,
.forefind-listings .lst-filterbar .row,
.forefind-listings .lst-filterbar [class*="col-"] {
  display: flow-root;
  float: none;
  width: auto; max-width: none;
  margin-left: 0; margin-right: 0;
  padding-left: 0; padding-right: 0;
}
.forefind-listings .lst-filterbar .filter-top-section { float: none; width: 100%; }

/* .lp-filter-inner (#pop) is itself a bordered white card — 1px #dedede, 5px
   radius, 15px padding — from the days when it WAS the filter panel. Inside
   this one it draws a second box around the controls, a card within a card.
   Stripped back to a plain wrapper so the panel has one edge, not two. */
.forefind-listings .lst-filterbar .lp-filter-inner {
  float: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* The map toggle. There is no map container anywhere on these pages — the
   results block renders a card grid — so the control opens nothing; it is the
   old template's furniture arriving with the filter bar. Hidden rather than
   left as a button that does nothing when clicked. */
.forefind-listings .lst-filterbar .open-map-view { display: none; }

/* "Results For <Category> Listings" — the heading inside the bar.

   Two parent-theme rules threw it out of alignment on every industry and
   investment archive:

     .margin-top-subtract-35 { margin-top: -50px }   (listingpro/main.css:852)

   sits on the same element as the heading's row. It exists to lap the stock
   filter bar over the old page banner; inside this white panel it drags the
   heading 50px up, out through the panel's top edge.

     .lp-title is also .col-md-10 — a Bootstrap column carrying 15px of side
   padding, which indents the heading from the left edge of everything else in
   the panel, and caps its width at 10/12 with the switcher column beside it.

   Both are neutralised here rather than in the parent theme, which other
   layouts still rely on. */
.forefind-listings .lst-filterbar .margin-top-subtract-35 { margin-top: 0; }
.forefind-listings .lst-filterbar .filter-top-section { margin-bottom: 14px; }
.forefind-listings .lst-filterbar .lp-title {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.forefind-listings .lst-filterbar .lp-title {
  position: relative;
  padding-left: 13px;
}
/* A green rule marks the heading as the panel's own, and gives the eye a left
   edge to start from — the stock heading floated in white space. */
.forefind-listings .lst-filterbar .lp-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 3px;
  background: var(--ff-brand, #30B94A);
}
/* "Results For" is scaffolding; the category name is the information. The
   wrapper carries the muted tone and the two spans take it back — the phrase is
   one text node in the parent theme's markup and cannot be split further. */
.forefind-listings .lst-filterbar .lp-title h3 {
  margin: 0;
  padding-left: 0;
  font-family: var(--ff-font, inherit);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ff-muted, #6B7280);
  text-align: left;
}
.forefind-listings .lst-filterbar .lp-title h3 .term-name,
.forefind-listings .lst-filterbar .lp-title h3 .lstring {
  font-size: 17px;
  font-weight: 700;
  color: var(--ff-ink, #111827);
  letter-spacing: -.01em;
}

/* ── The three filter controls ─────────────────────────────────────────────

   Each "field" is really an <a> that reveals a popover holding a <select>
   (.lp-tooltip-outer:hover .lp-tooltip-div, listingpro/main.css:23748). The
   stock treatment paints it #f8f8f8 on #eaeaea with #9f9f9f text, so all three
   read as disabled inputs rather than controls you can open. They are given the
   weight of real dropdowns here: white ground, the panel's own border, ink
   text, and a chevron that says the thing opens.

   The floats the parent theme lays them out with are replaced by flex, so the
   row fills the panel and wraps cleanly instead of stopping at col-md-9. */
.forefind-listings .lst-filterbar .more-filter-left-col {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.forefind-listings .lst-filterbar .more-filter-left-col > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.forefind-listings .lst-filterbar .form-group {
  float: none;
  margin: 0;
  flex: 1 1 190px;
  min-width: 0;
}
.forefind-listings .lst-filterbar .search-filters > ul,
.forefind-listings .lst-filterbar .search-filters > ul > li {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
.forefind-listings .lst-filterbar .search-filters > ul > li { position: relative; }
.forefind-listings .lst-filterbar .search-filters > ul > li > a {
  float: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 13px;
  background: #fff;
  border: 1px solid var(--ff-border, rgba(17,24,39,.10));
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ff-ink, #111827);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.forefind-listings .lst-filterbar .search-filters > ul > li > a:hover,
.forefind-listings .lst-filterbar .search-filters > ul > li:hover > a {
  background: var(--ff-brand-soft, #E9F8ED);
  border-color: var(--ff-brand-mid, #CFEFD6);
  box-shadow: none;
}

/* Icons. All three ship with fa-line-chart, which says nothing about any of
   them — a chart for "City / Location" is simply wrong. The stock <i> is
   replaced per field: rupee, map pin, sitemap. */
.forefind-listings .lst-filterbar .search-filters > ul > li > a i { display: none; }
.forefind-listings .lst-filterbar .search-filters > ul > li > a::before {
  font-family: 'FontAwesome';
  font-size: 13px;
  font-weight: normal;
  color: var(--ff-brand, #30B94A);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.forefind-listings .lst-filterbar .form-group:nth-of-type(1) .search-filters > ul > li > a::before { content: '\f156'; }
.forefind-listings .lst-filterbar .form-group:nth-of-type(2) .search-filters > ul > li > a::before { content: '\f041'; }
.forefind-listings .lst-filterbar .form-group:nth-of-type(3) .search-filters > ul > li > a::before { content: '\f0e8'; }

/* Chevron, rotating when the popover is open. */
.forefind-listings .lst-filterbar .search-filters > ul > li > a::after {
  content: '\f107';
  font-family: 'FontAwesome';
  position: absolute;
  right: 13px;
  top: 50%;
  font-size: 14px;
  color: var(--ff-faint, #9CA3AF);
  transform: translateY(-50%);
  transition: transform .15s, color .15s;
  pointer-events: none;
}
.forefind-listings .lst-filterbar .search-filters > ul > li:hover > a::after {
  color: var(--ff-brand, #30B94A);
  transform: translateY(-50%) rotate(180deg);
}

/* The popover: a proper dropdown panel rather than the stock 11px tooltip. */
.forefind-listings .lst-filterbar .lp-tooltip-div {
  min-width: 100%;
  border: 1px solid var(--ff-border, rgba(17,24,39,.10));
  border-radius: 12px;
  box-shadow: 0 12px 28px -12px rgba(17,24,39,.22);
  font-size: 13px;
}
.forefind-listings .lst-filterbar .lp-tooltip-div > .lp-tooltip-arrow { display: none; }
.forefind-listings .lst-filterbar .lp-tool-tip-content {
  max-width: none;
  padding: 10px;
  color: var(--ff-body, #374151);
}
.forefind-listings .lst-filterbar .lp-tool-tip-content .form-control {
  height: 38px;
  width: 100%;
  border: 1px solid var(--ff-border, rgba(17,24,39,.10));
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--ff-ink, #111827);
  box-shadow: none;
}

/* Search. The parent theme writes this button's colour as an INLINE style, so
   the stylesheet cannot reach it without !important — the one place in this
   file that needs it. */
.forefind-listings .lst-filterbar #searchform button[type="submit"] {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 24px !important;
  background: var(--ff-brand, #30B94A) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--ff-font, inherit);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.forefind-listings .lst-filterbar #searchform button[type="submit"]:hover {
  background: var(--ff-brand-dark, #26993D) !important;
  transform: translateY(-1px);
}

/* select2 sizes itself inline to 200px; inside a flexible field it should fill
   the panel instead. */
.forefind-listings .lst-filterbar .select2-container { width: 100% !important; }

@media (max-width: 720px) {
  .forefind-listings .lst-filterbar { padding: 16px 14px; }
  .forefind-listings .lst-filterbar .form-group { flex: 1 1 100%; }
  .forefind-listings .lst-filterbar #searchform button[type="submit"] { width: 100%; }
}

/* With the bar present the toolbar sits tighter beneath it. */
.forefind-listings .lst-filterbar + .lst-toolbar { padding-top: 18px; }

/* ── Sponsored row ─────────────────────────────────────────────────────────
   Visually separated from the results, not blended into them: the directory's
   whole pitch is that rankings are not for sale, so a paid placement has to be
   unmistakable rather than tastefully subtle. */
.forefind-listings .lst-sponsored {
  margin-top: 26px;
  padding: 18px 18px 20px;
  background: #FFFDF5;
  border: 1px solid #F2E3BE;
  border-radius: 14px;
}
.forefind-listings .lst-sponsored-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.forefind-listings .lst-sponsored-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: #B4820E;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.forefind-listings .lst-sponsored-note {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #6B5A2E;
}
.forefind-listings .lst-sponsored + .lst-toolbar { padding-top: 22px; }