/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REMOVE GREY BOX / CONTAINER LIMITS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-results,
.wtb-left,
.wtb-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAIN WRAPPER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  gap: 0;
  margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEFT COLUMN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-left {
  width: 50%;
  flex: 0 0 50%;
  position: sticky;
  top: 80px; /* ← change to your header height */
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f2f2f2;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILTER BAR — never scrolls
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-filters {
  flex-shrink: 0;
  border-bottom: 1px solid #eee;
  z-index: 2;
}
.wtb-filters-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  padding-right: 20px;
}
.wtb-filters-row .facetwp-facet-proximity {
  flex: 1 1 auto;
  min-width: 0;
}
.wtb-filters-row .facetwp-facet-proximity input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  padding: 0 10px;
  font-size: 14px;
}
.wtb-filters-row .facetwp-facet-radius select {
  height: 40px;
  border: 1px solid #ddd;
  padding: 0 10px;
  font-size: 14px;
  min-width: 120px;
}
.wtb-filters-row .facetwp-facet-location_services .facetwp-radio {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  white-space: nowrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COUNTS ROW — never scrolls
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-counts {
  flex-shrink: 0;
  background: #f9f9f9;
  border-bottom: 1px solid #eee;
  padding: 10px 15px;
}
.wtb-counts-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}
.wtb-count-dealers,
.wtb-count-retailers {
  font-size: 14px;
  color: #333;
}
.wtb-count-dealers strong,
.wtb-count-retailers strong {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESULTS — only this scrolls
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-results {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.wtb-results::-webkit-scrollbar { width: 5px; }
.wtb-results::-webkit-scrollbar-track { background: #f1f1f1; }
.wtb-results::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DEFAULT: 2 columns (no filter selected)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div.facetwp-template[data-name="location_template"] {
  grid-template-columns: 1fr 1fr !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHEN any radio is checked → 1 column
   Uses :has() to check parent for checked child
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-left:has(.wtb-filters .facetwp-radio.checked[data-value="dealer"],.wtb-filters .facetwp-radio.checked[data-value="retailer"])
div.facetwp-template[data-name="location_template"] {
  grid-template-columns: 1fr !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHEN dealer checked → dealer cards full width
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-left:has(.facetwp-radio.checked[data-value="dealer"])
div.facetwp-template[data-name="location_template"] .result.dealer-card {
  grid-column: 1 !important;
  width: 100% !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHEN retailer checked → retailer cards full width
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-left:has(.facetwp-radio.checked[data-value="retailer"])
div.facetwp-template[data-name="location_template"] .result.retailer-card {
  grid-column: 1 !important;
  width: 100% !important;
}


div.facetwp-template[data-name="location_template"] {
  display: grid !important;
  grid-auto-flow: dense !important;  /* ← fills gaps automatically */
  gap: 15px !important;
  padding: 15px !important;
  align-items: start !important;
}

/* Each card only takes its own natural height */
div.facetwp-template[data-name="location_template"] .result.dealer,
div.facetwp-template[data-name="location_template"] .result.retailer {
  height: auto !important;
  align-self: start !important;
}


/* ── Dealer always LEFT column ── */
div.facetwp-template[data-name="location_template"] .result.dealer-card {
  grid-column: 1 !important;
}

/* ── Retailer always RIGHT column ── */
.wtb-left:has(.facetwp-radio.checked[data-value="retailer"])
div.facetwp-template[data-name="location_template"] .result.retailer-card {
  grid-column: 1 !important;
}

.wtb-left:has(.facetwp-radio[data-value="retailer"])
div.facetwp-template[data-name="location_template"] .result.retailer-card {
  grid-column: 2 !important;
}



div.facetwp-template[data-name="location_template"] .result {
  width: 100% !important;
  flex: unset !important;
  flex-basis: unset !important;
  margin: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RIGHT COLUMN — sticky map
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-right {
  width: 50%;
  flex: 0 0 50%;
  position: sticky;
  top: 80px;
  align-self: flex-start;
  height: calc(100vh - 80px);
  padding: 0;
  margin: 0;
}
.wtb-right .facetwp-facet-map,
.wtb-right .facetwp-map,
.wtb-right #facetwp-map {
  height: 100% !important;
  width: 100% !important;
  display: block !important;
}
.wtb-right .facetwp-facet-map > div,
.wtb-right .facetwp-map > div,
.wtb-right #facetwp-map > div {
  width: 100% !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  .wtb-title { font-size: 24px; }
  .wtb-title-section { padding: 20px 15px; }
  .wtb-filters-row { flex-wrap: wrap; }
  .wtb-wrapper { flex-direction: column; }
  .wtb-left, .wtb-right {
    width: 100%;
    flex: 0 0 100%;
    position: relative;
    top: 0;
    height: auto;
  }
  .wtb-results { max-height: 35vh; margin-top: 10px;}
  .wtb-right { height: 400px; }
  div.facetwp-template[data-name="location_template"] {
    grid-template-columns: 1fr;
  }

  div.facetwp-template[data-name="location_template"] {
    grid-template-columns: 1fr!important;
    display: block !important;
  }
  .wtb-filters-row .facetwp-facet-proximity
  {
    max-width: 100%;
  }
  div.facetwp-facet-location_services
  {
    margin: auto;
  }
  div.facetwp-template[data-name="location_template"] .result {
     margin-bottom: 10px !important;
  }
  .wtb-wrapper
  {
    display: block !important;
  }
  div.facetwp-facet-proximity .facetwp-radius
  {
    flex-basis:50% !important;
  }
  div.facetwp-facet-proximity .facetwp-input-wrap
  {
    max-width: 50%;
  }
  .wtb-filters .wtb-filters-row .facetwp-facet-location_services .facetwp-radio
  {
    padding: 0 46px !important;
  }
  div.facetwp-facet-proximity
  {
    padding: 20px 15px;
  }
  .wtb-col-header-dealer,.wtb-col-header-retailer{
    display: none;
  }

}

.facetwp-location,.facetwp-radius.facetwp-radius-dropdown {
  border: 1.5px solid #c8c8c8 !important;
  background-color: #fff;
}

/* Hide the "Any" option if not needed */
.wtb-filters-row .facetwp-facet-location_services .facetwp-radio[aria-label="Any"],
.wtb-filters-row .facetwp-facet-location_services .facetwp-radio[data-value="installer"],
.wtb-filters-row .facetwp-facet-location_services li:first-child {
  display: none !important;
}

/* Reset list styles */
.wtb-filters-row .facetwp-facet-location_services ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
}

/* Each button base style */
.wtb-filters-row .facetwp-facet-location_services .facetwp-radio {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 20px !important;
  border: 1px solid #ccc !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;

  /* DEFAULT: white background, dark text */
  background: #fff !important;
  color: #1a1a1a !important;
}

/* Hover state */
.wtb-filters-row .facetwp-facet-location_services .facetwp-radio:hover {
  background: #e5e5e5 !important;
  color: #1a1a1a !important;
  border-color: #999 !important;
}

/* SELECTED / active state */
.wtb-filters-row .facetwp-facet-location_services .facetwp-radio.checked {
  background-color:#e5e5e5 !important;
  border-color: #1a1a1a !important;
}

/* Remove double border between buttons */
.wtb-filters-row .facetwp-facet-location_services li + li .facetwp-radio {
  border-left: none !important;
}

/* Text inside button — force color */
.wtb-filters-row .facetwp-facet-location_services .facetwp-radio span,
.wtb-filters-row .facetwp-facet-location_services .facetwp-radio a {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
}

div.facetwp-facet-location_services .facetwp-radio .facetwp-counter
{
    display: block!important;
}

div.facetwp-facet-proximity .facetwp-input-wrap{display:flex;flex-basis:100%;margin-right: 5px;}
div.facetwp-facet-proximity .facetwp-radius{flex-basis:33%}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARD: contain the badge inside
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div.facetwp-template[data-name="location_template"] .result.dealer-card,
div.facetwp-template[data-name="location_template"] .result.retailer-card {
  position: relative !important;
  overflow: hidden !important; /* ← badge stays inside card */
  padding-top: 0 !important;
  border: 1.5px solid #c8c8c8 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGE: sits at very top-left of card
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGE: match expected design exactly
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div.facetwp-template[data-name="location_template"] .result.dealer-card::before,
div.facetwp-template[data-name="location_template"] .result.retailer-card::before {
  position: absolute !important;
  top: 5px !important;
  left: 0 !important;
  display: inline-block !important;
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 20px 0 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
  white-space: nowrap !important;
  clip-path: polygon(
    0 0,
    100% 0,
    88% 50%,
    100% 100%,
    0 100%
  ) !important;
}

/* DEALER — light bg, orange text, orange border following ribbon shape */
div.facetwp-template[data-name="location_template"] .result.dealer-card::before {
  content: 'DEALER';
  color: #e15200 !important;
  background: #e5e5e5 !important;
}

/* RETAILER — solid orange bg, white text, no border needed */
div.facetwp-template[data-name="location_template"] .result.retailer-card::before {
  content: 'RETAILER';
  color: #fff !important;
  background: #e15200 !important;
  filter: none !important;
}

/* spacing fix */
div.facetwp-template[data-name="location_template"] .result.dealer-card > *:first-child,
div.facetwp-template[data-name="location_template"] .result.retailer-card > *:first-child {
  padding-top: 50px !important;
}

.facetwp-facet-proximity .facetwp-location {
  padding-right: 30px !important; /* ← space for the icon */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLUMN HEADERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wtb-col-header-dealer,
.wtb-col-header-retailer {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  padding: 8px 5px !important;
  margin-bottom: 5px !important;
  align-self: start !important;
}

/* Dealer header — LEFT column */
.wtb-col-header-dealer {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* Retailer header — RIGHT column */
.wtb-col-header-retailer {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Push all cards to start from row 2 */
div.facetwp-template[data-name="location_template"] .result.dealer-card,
div.facetwp-template[data-name="location_template"] .result.retailer-card {
  grid-row: auto !important;
}

.wtb-col-header-single {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  padding: 8px 5px !important;
  margin-bottom: 5px !important;
  align-self: start !important;
  width: 100% !important;
}

/* French badge translations */
/* html[lang="fr-FR"] div.facetwp-template[data-name="location_template"] .result.dealer-card::before {
  content: 'REVENDEUR' !important;
}
html[lang="fr-FR"] div.facetwp-template[data-name="location_template"] .result.retailer-card::before {
  content: 'DÉTAILLANT' !important;
} */

html[lang="fr-FR"] .result.dealer-card::before {
  content: 'REVENDEUR' !important;
}
html[lang="fr-FR"] .result.retailer-card::before {
  content: 'DÉTAILLANT' !important;
}