/* =============================================================
   storefinder.css — production-ready, consolidated
   ============================================================= */


/* ── 1. THEME TOKENS & ROOT VARIABLES ── */

:root {
  --sf-header: 96px;     /* match your site's sticky header height */
  --sf-section-pad: 0px; /* add top+bottom section padding here if needed */
}

.storefinder {
  --sf-bg:      #fff;
  --sf-border:  #e5e7eb;
  --sf-text:    #111827;
  --sf-muted:   #6b7280;
  --sf-accent:  #111827; /* selected brand outline color */
  --sf-radius:  10px;
  --sf-gap:     8px;
}


/* ── 2. WIDGET SHELL ── */

.storefinder {
  box-sizing:  border-box;
  height:      calc(100dvh - var(--sf-header) - var(--sf-section-pad));
  max-height:  calc(100dvh - var(--sf-header) - var(--sf-section-pad));
  min-height:  360px;
  display:     flex;
  flex-direction: column;
  overflow:    hidden;
  color:       var(--sf-text);
  background:  var(--sf-bg);
}

/* WordPress admin bar offset */
body.admin-bar .storefinder {
  height:     calc(100dvh - var(--sf-header) - var(--sf-section-pad) - 32px);
  max-height: calc(100dvh - var(--sf-header) - var(--sf-section-pad) - 32px);
}

/* Zero out section padding when widget lives inside an Elementor section.
   Add class="sf-section" to that section in the editor. */
.sf-section { padding-block: 0 !important; }


/* ── 3. SEARCH / FILTER FORM BAR ── */

.storefinder__form {
  position:    sticky;
  top:         0;
  z-index:     3;
  background:  var(--sf-bg);
  border-bottom: 1px solid var(--sf-border);
  padding:     10px;
  display:     flex;
  align-items: center;
  gap:         var(--sf-gap);
  flex-wrap:   wrap;
}

.storefinder__search { flex: 1 1 320px; min-width: 220px; }
.storefinder__radius { flex: 0 0 auto; width: 90px; max-width: 110px; }


/* ── 4. SHARED BUTTON BASE ── */

.storefinder__submit,
.storefinder__geolocate,
.storefinder__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           auto !important;
  height:          34px;
  padding:         0 12px;
  border:          1px solid var(--sf-border);
  border-radius:   8px;
  background:      #fff;
  color:           #111;
  font-size:       14px;
  line-height:     1;
  white-space:     nowrap;
  text-decoration: none;
  cursor:          pointer;
  transition:      background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.storefinder__btn:hover  { background: #f7f7f7; border-color: #d1d5db; }
.storefinder__btn:active { background: #efefef; }
.storefinder__btn:focus  { outline: none; box-shadow: 0 0 0 2px rgba(17,24,39,.15); }

/* Dark / primary variant */
.storefinder__btn--primary             { background: #111; color: #fff; border-color: #111; }
.storefinder__btn--primary:hover       { background: #222; }


/* ── 5. TWO-COLUMN WRAP (sidebar | map) ── */

.storefinder__wrap {
  display: grid;
  grid-template-columns: 360px 1fr; /* tweak as needed */
  height: 100%;
  min-height: 0;
}


/* ── 6. LEFT COLUMN — RESULTS LIST ── */

.storefinder__results {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sf-border);
  box-shadow: 2px 0 6px rgba(0,0,0,0.05);
  z-index: 2;
}

.storefinder__list {
  flex: 1;
  overflow-y: auto;
  height: 100%;
}

/* Group headings */
.storefinder__group {
  font-weight:   700;
  font-size:     0.95rem;
  padding:       8px 8px 6px;
  border-bottom: 1px solid #eee;
  background:    #fafafa;
}

/* State messages */
.storefinder__loading,
.storefinder__empty,
.storefinder__error { padding: 10px 12px; }


/* ── 7. STORE CARD ── */

.storefinder__item {
  display:        block;
  padding:        14px 12px;
  border-bottom:  1px solid #eee;
  background:     #ddeaf7;
  border-radius:  8px;
  margin-bottom:  8px;
  text-decoration: none;
  color:          inherit;
}

.storefinder__item:last-child { border-bottom: 0; }

/* Preferred stores */
.storefinder__item.preferred {
  background:   #e6f0fa;
  border-left:  4px solid #1e40af;
  padding-left: 10px;
}
.storefinder__item.preferred:hover { background: #dbeafe; }


/* ── 7a. TOP ROW: full-width title, then address + Shop Now ── */

.storefinder__item-head {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  12px;
}

.storefinder__item-left {
  /* No flex needed - title will be full width by default */
}

.storefinder h3 {
  margin:         0 0 6px;
  font-size:      20px;
  font-weight:    900;
  text-transform: uppercase;
  color:          #0E2453;
  line-height:    1.2;
  letter-spacing: 0.03em;
  width:          100%;  /* explicitly span full width */
}

/* Address + Shop button on same line */
.storefinder__item-meta-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

.storefinder__item-meta {
  font-size:   15px;
  line-height: 1.3;
  color:       var(--sf-muted);
  flex:        1;  /* takes available space, pushes button right */
}

.storefinder__shop {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
}

.storefinder__btn--shop {
  background:     #167bb8;
  color:          #fff;
  border:         none;
  border-radius:  10px;
  padding:        12px 22px;
  font-size:      0.9rem;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space:    nowrap;
  cursor:         pointer;
  transition:     background .2s ease;
}
.storefinder__btn--shop:hover { background: #155f99; }
```__



/* ── 7b. BOTTOM ROW: logos (left) + links (right) ── */

.storefinder__item-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  flex-wrap:       wrap;
}

/* ── Brand logos inside result cards ── */




.storefinder__item-cta {
  display:     flex;
  gap:         20px;
  align-items: center;
  flex-shrink: 0;
}

.storefinder__link {
  background:     none;
  border:         none;
  padding:        0;
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #1a2e5a;
  cursor:         pointer;
  transition:     color .2s ease;
}
.storefinder__link:hover { color: #1a7fc1; text-decoration: underline; }


.storefinder__brands {
  height: 34px;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
}

/* ── 9. RIGHT COLUMN — MAP ── */

.storefinder__map {
  height:   100%;
  min-height: 0;
  position: relative;
  z-index:  1;
  overflow: hidden;
}

/* Leaflet */
.storefinder .leaflet-container          { height: 100% !important; width: 100% !important; }
.storefinder .leaflet-container img      { max-width: none !important; }
.storefinder .leaflet-pane,
.storefinder .leaflet-tile-container,
.storefinder .leaflet-marker-pane        { will-change: transform; }


/* ── 10. MAP MARKERS ── */

/* Preferred star marker */
.sf-marker--preferred {
  font-size:   30px;
  line-height: 24px;
  text-align:  center;
  color:       #162046;
  text-shadow: 0 0 2px #fff, 0 1px 1px rgba(0,0,0,.35);
}

/* SVG pin shadow */
.leaflet-marker-icon.sf-pin svg {
  display: block;
  filter:  drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.leaflet-marker-icon.sf-pin--preferred { z-index: 1000; }
.sf-pin--preferred                     { color: #60a5fa; }

.leaflet-marker-icon.sf-marker--preferred-img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}


/* ── 11. AUTOCOMPLETE DROPDOWN ── */

.sf-autocomplete {
  position:     absolute;
  left: 0; right: 0;
  top:          calc(100% + 4px);
  z-index:      1000;
  max-height:   260px;
  overflow:     auto;
  border:       1px solid #e5e7eb;
  background:   #fff;
  border-radius: 8px;
  box-shadow:   0 8px 18px rgba(0,0,0,.08);
  font-size:    14px;
}

.sf-autocomplete__item               { padding: 10px 12px; cursor: pointer; line-height: 1.25; }
.sf-autocomplete__item:hover,
.sf-autocomplete__item.is-active     { background: #f5f7fb; }


/* ── 12. ACCESSIBILITY ── */

.storefinder a:focus-visible,
.storefinder button:focus-visible,
.storefinder input:focus-visible,
.storefinder select:focus-visible {
  outline:        2px solid #2563eb;
  outline-offset: 2px;
  border-radius:  6px;
}


/* ── MOBILE (max-width: 900px) ── */
@media (max-width: 900px) {

  .storefinder {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }

  .storefinder__wrap {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    column-gap: 0;
  }

  /* MAP ON TOP */
  .storefinder__map {
    order: 1;
    width: 100%;
    height: 320px; /* tweak as needed */
  }

  /* LIST BELOW */
  .storefinder__results {
    order: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
    border-right: none;
    box-shadow: none;
  }

  .storefinder__search {
    flex: 1 1 100%;
    min-width: 0;
  }

  .storefinder__brands .brand-check__img {
    width: 72px;
    height: 72px;
  }

  .storefinder__item-cta {
    gap: 14px;
  }
}


/* ── 14. REDUCED MOTION ── */

@media (prefers-reduced-motion: reduce) {
  .storefinder__brands .brand-check__img { transition: none; }
  .storefinder__btn--shop                { transition: none; }
  .storefinder__link                     { transition: none; }
}


/* ── CTA text link buttons ── */

.storefinder__item-cta {
  display:     flex;
  gap:         20px;
  align-items: center;
  flex-shrink: 0;
}

.storefinder__link {
  appearance:         none !important;
  -webkit-appearance: none !important;
  background:         none !important;
  border:             none !important;
  padding:            0 !important;
  margin:             0 !important;
  box-shadow:         none !important;
  outline:            none !important;
  font-size:          13px !important;
  font-weight:        700 !important;
  letter-spacing:     0.08em;
  text-transform:     uppercase;
  color:              #1a2e5a !important;
  cursor:             pointer;
  text-decoration:    underline !important;
  text-underline-offset: 3px;
  transition:         color .2s ease, opacity .2s ease;
  line-height:        1 !important;
  border-radius:      0 !important;  /* kills rounded corners */
  min-height:         auto !important;  /* prevents forced button height */
}

.storefinder__link:hover {
  color:              #1a7fc1 !important;
  opacity:            1;
  background:         none !important;  /* some themes add hover backgrounds */
}

/* Default white background for all stores */
.storefinder__item {
  background-color: #dedede;
  /* other styles... */
}

/* Blue background ONLY for preferred (Ascend) stores */
.storefinder__item.preferred {
  background-color: #your-blue-color; /* whatever blue you want */
  /* other preferred styles... */
}


/* Create layout isolation from Elementor */
.storefinder-outer {
  display: block !important;
  width: 100%;
}

/* Your actual layout */
.storefinder__wrap {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  width: 100%;
}

/* Prevent flex weirdness */
.storefinder__results,
.storefinder__map {
  min-width: 0;
}


/* ===== FILTER BAR WRAPPER ===== */
.storefinder__form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f5f6f7;
  border-bottom: 1px solid #ddd;
  flex-wrap: wrap;
}

/* ===== SEARCH INPUT ===== */
.storefinder__search {
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}

/* ===== DROPDOWN (brand) ===== */
.storefinder__brands {
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid #1e6fb9;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  appearance: none;
}

/* ===== RADIUS DROPDOWN (optional style match) ===== */
.storefinder__radius {
  padding: 10px 12px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 13px;
}

/* ===== PRIMARY BUTTON ===== */
.storefinder__submit {
  background: #1e6fb9;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.storefinder__submit:hover {
  background: #165a96;
}

/* ===== GEO BUTTON (make it secondary) ===== */
.storefinder__geolocate {
  background: #e9ecef;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

/* ===== OPTIONAL: pill-style filters (future-ready) ===== */
.storefinder__form select {
  transition: all 0.2s ease;
}

.storefinder__form select:hover {
  border-color: #1e6fb9;
}

.sf-pill {
  padding: 8px 14px;
  border-radius: 20px;
  background: #e9ecef;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sf-pill.active {
  background: #1e6fb9;
  color: #fff;
}

.storefinder__item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* IMAGE WRAPPER (locks ratio) */
.storefinder__card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 2; /* 🔥 adjust this */
  overflow: hidden;
  background: #eee;
}

/* IMAGE */
.storefinder__card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BODY */
.storefinder__card-body {
  padding: 14px;
}

/* HEADER */
.storefinder__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.storefinder__eyebrow {
text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.storefinder__card-title-wrap h3 {
  font-size: 18px;
  margin: 0;
}

/* ADDRESS */
.storefinder__card-address {
  margin-top: 8px;
  font-size: 14px;
  color: #374151;
}

/* TAGS */
.storefinder__card-tags {
  margin-top: 6px;
  font-size: 13px;
  color: #2563eb;
}

/* LINKS */
.storefinder__card-links {
  margin-top: 10px;
  font-size: 13px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* STATUS */
.storefinder__card-status {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.status {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 700;
}

.status--closed {
  background: #dc2626;
  color: #fff;
}

.hours {
  font-size: 13px;
  color: #2563eb;
  font-weight: 600;
}

.storefinder__card-title-wrap h3::before {
  content: none !important;
}




.storefinder__btn--shop {
	border-radius: 25px !important;
	padding: 4px 20px !important;
}


.storefinder__card-address {
	line-height: 1em;
}

.storefinder__card-title-wrap {
		line-height: 1em;	
}

.storefinder__card-title-wrap h3 {
		font-weight: bold;
		font-size: 20px;
}

.storefinder__link {
	font-size: 10px !important;
}


.storefinder__item.preferred {
	border-left: none;
	 margin-bottom:0;
}

.storefinder__brands {
  width: 100%;
  min-width: 160px;
  padding: 8px 40px 8px 12px;
  box-sizing: border-box;
  white-space: nowrap;
}

.storefinder__search-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.storefinder__search {
  flex: 1;
  min-width: 190px;
	height: 35px;
	font-size: 12px !important;
}

.storefinder__geolocate {
  white-space: nowrap;
	font-size: 10px !important;
	padding:5px;
}

/* Wrapper */
.storefinder__brand-filter {
  width: 100%;
}


/* Match input styling */
.storefinder__brands {
  width: 100%;
  display: block;
  height: 36px;
  padding: 0 40px 0 12px; 
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 12px;
  line-height: 1.2;
  color: #666;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* custom arrow */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23000' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}


/* Focus state (match your input highlight) */
.storefinder__brands:focus {
  outline: none;
  border-color: #2e6cff; /* your blue */
  box-shadow: 0 0 0 2px rgba(46,108,255,0.2);
}

.storefinder__item {
  border-radius: 12px;
  overflow: visible; /* 👈 allow image to escape rounding */
}

.storefinder__card-address {
	margin-top: 0;	
}


@media (max-width: 900px) {

  .storefinder__wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .storefinder__map {
    order: -1; /* forces map ABOVE list */
    height: 300px;
  }

  .storefinder__results {
    order: 1;
  }

}


/* ===== SEARCH ROW POLISH OVERRIDES ===== */

.storefinder__search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.storefinder__search {
  flex: 1;
  height: 34px;
  padding: 0 10px;
  font-size: 12px !important;
  border-radius: 6px;
}

/* unify button styles */
.storefinder__go,
.storefinder__geolocate {
  height: 34px;
  padding: 0 12px;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* GO button */
.storefinder__go {
  background: #1e6fb9;
  color: #fff;
  border: none;
}

.storefinder__go:hover {
  background: #155a96;
}

/* Nearest button */
.storefinder__geolocate {
  background: #e5e7eb;
  color: #111;
  border: none;
}

.storefinder__geolocate:hover {
  background: #d1d5db;
}

.sf-popup-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e6fb9;
  margin-bottom: 2px;
}


/* ===== MAPBOX POPUP STYLING ===== */

.mapboxgl-popup-content {
  border-radius: 10px;
  padding: 14px 14px 12px;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  min-width: 220px;
}

/* brand eyebrow */
.sf-popup-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e6fb9;
  margin-bottom: 2px;
}

/* store name */
.mapboxgl-popup-content strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
}

/* address */
.mapboxgl-popup-content br + text,
.mapboxgl-popup-content {
  font-size: 13px;
  line-height: 1.1em;
  color: #444;
}

/* links row */
.mapboxgl-popup-content a {
  font-size: 12px;
  font-weight: 600;
  color: #1e6fb9;
  text-decoration: none;
  margin-right: 6px;
}

.mapboxgl-popup-content a:hover {
  text-decoration: underline;
}

/* make links feel like buttons (optional but nice) */
.mapboxgl-popup-content a:last-of-type {
  display: inline-block;
  margin-top: 8px;
  background: #1e6fb9;
  color: #fff;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.mapboxgl-popup-content a:last-of-type:hover {
  background: #155a96;
  text-decoration: none;
}

/* close button cleanup */
.mapboxgl-popup-close-button {
  font-size: 16px;
  color: #666;
  right: 6px;
  top: 4px;
}

.mapboxgl-popup-close-button:hover {
  color: #000;
}

/* popup actions row */
.sf-popup-actions {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

/* push Shop Now to the right */
.sf-popup-actions .sf-popup-shop {
  margin-left: auto;
  background: #1e6fb9;
  color: #fff !important;
  padding: 6px 20px !important;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.sf-popup-actions a {
  font-size: 12px;
  font-weight: 600;
  color: #1e6fb9;
  text-decoration: none;
}