.storepoint-container {
  --storepoint-accent-color:              #532480;
  --storepoint-accent-text-color:         #ffffff;
  --storepoint-link-color:                #532480;
  --storepoint-directions-color:          #532480;
  --storepoint-directions-text-color:     #ffffff;
  --storepoint-website-field-color:       #38AD25;
  --storepoint-website-field-text-color:  #ffffff;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* ── 2. Search Header ────────────────────────────────────────── */
.storepoint-search {
  background: linear-gradient(135deg, #390A51 0%, #532480 100%) !important;
  padding: 14px 16px !important;
  border-bottom: none !important;
}

/* White pill */
.storepoint-search-bar {
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  overflow: visible !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.2) !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  flex: 1 !important;
}

.storepoint-search-bar-combobox {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  background: #ffffff !important;
  min-width: 0 !important;
}

/* Vue-scoped inner containers — must flex so input fills the pill */
.geocoder-container,
.new-places-api-container {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  background: transparent !important;
}

/* Input */
.google-geocoder-input,
input.google-geocoder-input,
#google-geocoder-input {
  border: none !important;
  outline: none !important;
  padding: 12px 14px !important;
  font-size: 0.9rem !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  color: #1a1a2e !important;
  background: #ffffff !important;
  box-shadow: none !important;
  width: 100% !important;
  min-width: 0 !important;
  -webkit-text-fill-color: #1a1a2e !important;
}
.google-geocoder-input::placeholder,
#google-geocoder-input::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  opacity: 1 !important;
}

/* Geo button */
.geolocation-btn {
  background: #ffffff !important;
  border: none !important;
  border-left: 1px solid #e5e7eb !important;
  padding: 0 12px !important;
  cursor: pointer !important;
  color: #532480 !important;
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  opacity: 0.65 !important;
  transition: opacity 0.15s !important;
  flex-shrink: 0 !important;
}
.geolocation-btn:hover { opacity: 1 !important; }
.geolocation-btn svg, .geolocation-btn i { color: #532480 !important; }

.storepoint-vertical-divider {
  width: 1px !important;
  background: #e5e7eb !important;
  align-self: stretch !important;
  margin: 6px 0 !important;
  flex-shrink: 0 !important;
}

/* ── 3. Radius & Filter Dropdowns ───────────────────────────── */
/* White bg + purple text — readable on the purple header */
.storepoint-dropdown {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 7px !important;
  margin-left: 8px !important;
}

.storepoint-dropdown-target {
  color: #532480 !important;
  -webkit-text-fill-color: #532480 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  background: transparent !important;
}
.storepoint-dropdown-target:hover {
  background: rgba(83,36,128,0.06) !important;
  border-radius: 7px !important;
}

.dropdown-arrow {
  color: #532480 !important;
  opacity: 0.6 !important;
  font-size: 0.7rem !important;
}

/* Dropdown options panel */
.storepoint-dropdown-options {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(83,36,128,0.15) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  padding: 4px 0 !important;
  z-index: 9999 !important;
}
.storepoint-dropdown-option {
  padding: 9px 16px !important;
  font-size: 0.85rem !important;
  color: #374151 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.storepoint-dropdown-option:hover {
  background: #f3eefb !important;
  color: #532480 !important;
}
.storepoint-dropdown-option[aria-selected="true"] {
  background: #f3eefb !important;
  color: #532480 !important;
  font-weight: 600 !important;
}
.storepoint-dropdown-checkbox { accent-color: #532480 !important; }
.storepoint-dropdown-option-text {
  font-size: 0.85rem !important;
  color: inherit !important;
}

/* ── 4. Results Container ────────────────────────────────────── */
.storepoint-results-container {
  background: #F9F9F9 !important;
}

/* ── 5. Distance (shown after search) ───────────────────────── */
.storepoint-distance,
[class*="storepoint-distance"] {
  display: block !important;
  font-size: 0.7rem !important;
  color: #9ca3af !important;
  font-weight: 500 !important;
  margin-bottom: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. LOCATION CARD — full rewrite
   Real HTML structure from DevTools:
     .storepoint-location
       .storepoint-location-card
         .storepoint-location-info
           .storepoint-name
           .storepoint-tags-container
           .storepoint-text-fields   (empty)
           .storepoint-description   (hidden)
           .storepoint-icon-links    (FA icons — <i> tags)
           .storepoint-address
           .storepoint-hours
           .storepoint-contact-details
           .storepoint-buttons

   Goal: reorder to Name → Tag → Address → Hours → Contact → Social → Button
   ═══════════════════════════════════════════════════════════════ */

/* Hover / active states on the card row */
.storepoint-location {
  background: #ffffff !important;
  border-left: 3px solid transparent !important;
  border-bottom: 1px solid #eeeeee !important;
  cursor: pointer !important;
  position: relative !important;
  transition: border-left-color 0.15s, box-shadow 0.15s !important;
}
.storepoint-location:hover {
  background: #ffffff !important;
  border-left-color: #532480 !important;
  box-shadow: inset 4px 0 0 0 #532480, 2px 0 18px rgba(83,36,128,0.07) !important;
  z-index: 1 !important;
}
.storepoint-location.active,
.storepoint-location[aria-selected="true"] {
  background: #faf7fe !important;
  border-left-color: #532480 !important;
  box-shadow: inset 4px 0 0 0 #532480 !important;
}
.storepoint-location:hover .storepoint-name,
.storepoint-location.active .storepoint-name {
  color: #532480 !important;
}

/* Card padding wrapper */
.storepoint-location-card {
  padding: 0 !important;
}

/* Info block → flex column so we can reorder children */
.storepoint-location-info {
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 14px 10px !important;
  gap: 0 !important;
}

/* Nuclear reset — wipe ALL margin/padding Storepoint sets inside the card,
   then each element below only adds back what it explicitly needs */
.storepoint-location-info *,
.storepoint-location-info > * {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ── DOM reorder via flex order ── */
.storepoint-name            { order: 1 !important; }
.storepoint-tags-container  { order: 2 !important; }
.storepoint-address         { order: 3 !important; }  /* pull before social */
.storepoint-hours           { order: 4 !important; }
.storepoint-contact-details { order: 5 !important; }
.storepoint-icon-links      { order: 6 !important; }  /* push social after contact */
.storepoint-buttons         { order: 7 !important; }
/* Invisible elements — push to end and hide */
.storepoint-description,
.storepoint-text-fields {
  order: 99 !important;
  display: none !important;
}

/* ── Name ── */
.storepoint-name {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

/* ── Tags ── */
.storepoint-tag-group-name { display: none !important; }
.storepoint-tags-container { margin-bottom: 6px !important; }
.storepoint-tag-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.storepoint-tag {
  display: inline-block !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: #532480 !important;
  background: #f3eefb !important;
  border: 1px solid rgba(83,36,128,0.2) !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  line-height: 1.6 !important;
}
.storepoint-tag-label { font: inherit !important; }

/* ── Address ── */
.storepoint-address {
  font-size: 0.77rem !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  white-space: normal !important;
}

/* ── Hours ── */
.storepoint-hours {
  border-top: 1px solid #f0f0f0 !important;
  padding-top: 5px !important;
  margin-bottom: 5px !important;
}
.storepoint-hours-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.73rem !important;
  color: #9ca3af !important;
  line-height: 1.55 !important;
}
/* Today's row — green */
.storepoint-hours-today,
.storepoint-hours-today .storepoint-hours-day,
.storepoint-hours-today .storepoint-hours-time {
  color: #166534 !important;
  font-weight: 600 !important;
}

/* ── Contact: phone + website side by side ── */
.storepoint-contact-details {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid #f0f0f0 !important;
  padding-top: 5px !important;
  margin-bottom: 7px !important;
}
.storepoint-phone,
.storepoint-website {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important; /* collapse wrapper text node */
}
.storepoint-link,
.storepoint-phone-link,
.storepoint-website-link {
  font-size: 0.75rem !important;
  color: #532480 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.storepoint-link:hover,
.storepoint-phone-link:hover,
.storepoint-website-link:hover {
  color: #390A51 !important;
  text-decoration: underline !important;
}

/* FA icons injected before phone + website links */
.storepoint-phone-link::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f095" !important; /* fa-phone */
  font-size: 11px !important;
  opacity: 0.55 !important;
  flex-shrink: 0 !important;
}
.storepoint-website-link::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f0ac" !important; /* fa-globe */
  font-size: 11px !important;
  opacity: 0.55 !important;
  flex-shrink: 0 !important;
}

/* ── Social icons: Font Awesome <i> inside <a> — no boxes ── */
.storepoint-icon-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 13px !important;
  margin-bottom: 8px !important;
}
.storepoint-icon-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  text-decoration: none !important;
  color: rgba(83,36,128,0.5) !important;
  transition: color 0.15s !important;
}
.storepoint-icon-link:hover {
  color: #532480 !important;
  background: none !important;
  border: none !important;
}
.storepoint-icon-link i {
  font-size: 14px !important;
  line-height: 1 !important;
  display: block !important;
}

/* ── Directions button ── */
.storepoint-buttons {
  padding: 0 !important;
  margin: 0 !important;
}
.storepoint-button.storepoint-directions-button {
  display: inline-flex !important;
  align-items: center !important;
  background: #532480 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 7px 16px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background 0.15s !important;
}
.storepoint-button.storepoint-directions-button:hover {
  background: #390A51 !important;
}
.storepoint-button-label { font: inherit !important; }

/* ── 7. Detail panel back button ────────────────────────────── */
.storepoint-location-detail-panel-back-button {
  background: none !important;
  border: none !important;
  color: #532480 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 12px 16px !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.storepoint-location-detail-panel-back-button:hover {
  color: #390A51 !important;
}

/* ── 8. Branding footer ──────────────────────────────────────── */
.storepoint-brand {
  padding: 8px 16px !important;
  background: #F9F9F9 !important;
  border-top: 1px solid #e5e7eb !important;
}
.storepoint-brand-link {
  opacity: 0.4 !important;
  transition: opacity 0.15s !important;
}
.storepoint-brand-link:hover { opacity: 0.7 !important; }

/* ── Mobile — hide radius + filter dropdowns so search gets full width ── */
@media (max-width: 640px) {
  .storepoint-dropdown {
    display: none !important;
  }
  /* Search bar takes full width of the header */
  .storepoint-search {
    padding: 10px 12px !important;
  }
  .storepoint-search-bar {
    width: 100% !important;
  }
}

/* ── 9. Thin scrollbar ───────────────────────────────────────── */
.storepoint-results-container::-webkit-scrollbar,
#panel-locations::-webkit-scrollbar {
  width: 4px !important;
}
.storepoint-results-container::-webkit-scrollbar-track,
#panel-locations::-webkit-scrollbar-track {
  background: #F9F9F9 !important;
}
.storepoint-results-container::-webkit-scrollbar-thumb,
#panel-locations::-webkit-scrollbar-thumb {
  background: #532480 !important;
  border-radius: 4px !important;
}