:root {
  --sl-accent: #2563eb;
  --sl-geo-button: #111827;
  --sl-widget-bg: #f9fafb;
  --sl-card-bg: #f9fafb;
  --sl-text: #111827;

  --sl-radius-wrapper: 14px;
  --sl-radius-map: 12px;
  --sl-radius-card: 8px;
}

/* =====================================================
   Utility
===================================================== */

.sl-hidden { display: none !important; }

/* =====================================================
   Widget Container
===================================================== */

.store-locator-wrapper.sl-widget-container {
  width: 80%;
  margin: 20px auto;
}

.store-locator-wrapper.sl-widget-full {
  width: calc(100% - 40px);
  margin: 20px 0;
  border-radius: 0;
}

/* Square corners option */

.store-locator-wrapper.sl-corners-square {
  --sl-radius-wrapper: 0px;
  --sl-radius-map: 0px;
  --sl-radius-card: 0px;
}

/* Text color overrides */

.store-locator-wrapper.sl-text-white { --sl-text: #ffffff; }
.store-locator-wrapper.sl-text-black { --sl-text: #111827; }

/* =====================================================
   Main Layout
===================================================== */

.store-locator-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(320px,1fr);
  gap: 20px;

  background: var(--sl-widget-bg);
  color: var(--sl-text);

  padding: 20px;
  border-radius: var(--sl-radius-wrapper);
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

#store-locator-map {
  width: 100%;
  min-height: 450px;
  border-radius: var(--sl-radius-map);
  overflow: hidden;
}

.store-locator-side-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

#store-locator-list {
  flex: 1;
  max-height: 500px;
  overflow-y: auto;
}

/* =====================================================
   Mobile Toggle
===================================================== */

.store-locator-mobile-toggle {
  display: none;
  width: 100%;
  margin-bottom: 10px;
}

.store-locator-mobile-toggle button {
  flex: 1;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.store-locator-mobile-toggle button.active {
  background: #222;
  color: #fff;
}

/* =====================================================
   Listing Cards
===================================================== */

.sl-listing {
  width: 90%;
  padding: 10px;
  color: var(--sl-text);
  transition: all .2s ease;
}

.sl-listing h4 {
  display: inline-block;
  width: 70%;
  margin: 0;
  padding: 3px 0;
  font: bold 1rem sans-serif;
}

.sl-listing a {
  color: color-mix(in srgb, var(--sl-text) 85%, var(--sl-accent));
}

.sl-basic {
  padding: 10px;
  border-bottom: 1px solid var(--sl-accent);
}

.sl-slim-card,
.sl-full-card {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-accent);
  border-radius: var(--sl-radius-card);
}

.sl-slim-card {
  padding: 12px;
  margin-bottom: 10px;
}

.sl-full-card {
  padding: 16px;
  margin-bottom: 15px;
}

.sl-full-card img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.sl-slim-card .sl-address {
  width: calc(70% - 10px);
  font: normal .8rem sans-serif;
  padding-left: 10px;
  margin: 0;
}

.sl-slim-card .sl-phone {
  display: inline-block;
  width: 28%;
  text-align: right;
  font: bold 1.1rem sans-serif;
  margin: 0;
  padding: 3px 0;
}

.sl-slim-card .sl-website {
  width: calc(70% - 10px);
  padding-left: 10px;
  margin: 0;
}

/* =====================================================
   Full Card Details
===================================================== */

.sl-full-card .sl-address,
.sl-full-card .sl-phone,
.sl-full-card .sl-website,
.sl-full-card .sl-email,
.sl-full-card .sl-hours {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 4px 0;
}

/* Address slightly muted */
.sl-full-card .sl-address {
  color: color-mix(in srgb, var(--sl-text) 75%, #666);
}

/* Phone number emphasized */
.sl-full-card .sl-phone {
  font-weight: 600;
  font-size: 1rem;
}

.sl-full-card .sl-phone a {
  text-decoration: none;
  color: var(--sl-accent);
}

.sl-full-card .sl-phone a:hover {
  text-decoration: underline;
}

/* Website links */
.sl-full-card .sl-website a {
  color: var(--sl-accent);
  font-weight: 500;
  text-decoration: none;
}

.sl-full-card .sl-website a:hover {
  text-decoration: underline;
}

/* Email links */
.sl-full-card .sl-email a {
  color: var(--sl-accent);
  text-decoration: none;
}

.sl-full-card .sl-email a:hover {
  text-decoration: underline;
}

/* Hours block */
.sl-full-card .sl-hours {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--sl-text) 20%, transparent);
  font-size: 0.85rem;
}

/* =====================================================
   Selection States
===================================================== */

.sl-selected {
  border: 2px solid var(--sl-accent);
  background: color-mix(in srgb, var(--sl-accent) 12%, transparent);
}

.sl-active {
  background: var(--sl-accent);
  border-color: #000;
  color: #fff;
}

.sl-active a { color: #fff; }

.sl-listing.sl-hovered,
.sl-listing.sl-selected {
  background: var(--sl-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* =====================================================
   Search Bar
===================================================== */

.store-locator-search {
  display: grid;
  grid-template-columns: minmax(120px, 3fr) auto auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.store-locator-search > * { min-width: 0; }

#sl-search-address {
  width: 100%;
  min-width: 120px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 15px;
}

#sl-search-address:focus {
  border-color: var(--sl-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  outline: none;
}

#sl-radius {
  flex: 0 1 60px;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#sl-search-btn,
#sl-use-location-btn {
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

#sl-search-btn {
  background: var(--sl-accent);
  color: #fff;
}

#sl-search-btn:hover {
  background: color-mix(in srgb, var(--sl-accent) 85%, black);
  transform: translateY(-1px);
}

#sl-use-location-btn {
  background: var(--sl-geo-button);
  color: #fff;
}

#sl-use-location-btn:hover {
  background: color-mix(in srgb, var(--sl-geo-button) 85%, black);
  transform: translateY(-1px);
}

/* =====================================================
   Map Markers
===================================================== */

.sl-marker-wrapper {
  background: transparent !important;
  border: none !important;
  width: 25px;
  height: 34px;
}

.sl-marker-inner {
  width: 100%;
  height: 100%;
  background: var(--sl-marker-default) no-repeat center;
  background-size: contain;
  will-change: transform;
}

.sl-active .sl-marker-inner {
  background-image: var(--sl-marker-active);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

.leaflet-div-icon {
  background: transparent !important;
  border: none !important;
}

/* Bounce animation */

.sl-bounce {
  animation: slBounce .7s ease-in-out infinite;
}

#sl-reset-btn {
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  background: #e5e7eb;
  color: #111827;
  transition: all .2s ease;
}

#sl-reset-btn:hover {
  background: #d1d5db;
  transform: translateY(-1px);
}

#sl-suggestions {
  position: absolute;
  top: 75px;
  background: #fff;
  border: 1px solid #ddd;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  z-index: 999;
  display: none;
}

.sl-suggestion {
  padding: 8px;
  cursor: pointer;
}

.sl-suggestion:hover {
  background: #f3f4f6;
}

.store-locator-search {
  position: relative;
}

#sl-use-location-btn {
  display: none;
}

@keyframes slBounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-10px); }
  70%  { transform: translateY(-4px); }
  100% { transform: translateY(-6px); }
}




/* =====================================================
   Mobile Layout
===================================================== */

@media (max-width: 992px) {

  .store-locator-search {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Address input full width */
  #sl-search-address {
    width: 100%;
    padding: 12px;
    font-size: 16px;
  }

  /* Second row: radius + buttons */
  .store-locator-search {
    grid-template-areas:
      "address"
      "controls";
  }

  #sl-search-address {
    grid-area: address;
  }

  /* Wrap controls */
  #sl-radius,
  #sl-search-btn,
  #sl-use-location-btn,
  #sl-reset-btn {
    width: 100%;
  }

  /* Create button row */
  #sl-radius {
    margin-bottom: 5px;
    padding: 10px;
  }

  #sl-search-btn,
  #sl-use-location-btn,
  #sl-reset-btn {
    padding: 12px;
    font-size: 15px;
  }

  .store-locator-wrapper {
    grid-template-columns: 1fr;
  }

  .store-locator-mobile-toggle {
    display: flex;
  }

  #store-locator-map.active,
  #store-locator-list.active {
    display: block;
  }

  #store-locator-map {
    min-height: 400px;
  }

  .sl-popup-details {
    pointer-events: auto;
    cursor: pointer;
  }
}