/* =======================
   Base
======================= */
#wpsl-wrap{
  --mm-gold:#BC955A;
  --mm-bronze:#83663c;
  --mm-dark:#171718;
  --mm-dark2:#1E1E1C;
  --mm-card:#2b2b29;
  --mm-text:rgba(255,255,255,.92);

  font-family: inherit !important;
  color: var(--mm-text) !important;
}

#wpsl-wrap, #wpsl-wrap *{ box-sizing:border-box; }

/* =======================
   Search Bar
======================= */
#wpsl-wrap .wpsl-search,
#wpsl-wrap #wpsl-search-wrap{
  background: var(--mm-gold) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  overflow: visible !important; /* don't clip dropdowns */
}

#wpsl-wrap #wpsl-search-wrap{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap: 14px 18px !important;
}

/* Labels */
#wpsl-wrap #wpsl-search-wrap label{
  font-family: inherit !important;
  font-weight: 800 !important;
  color: #171718 !important;
  margin:0 !important;
  white-space:nowrap !important;
}

/* Inputs */
#wpsl-wrap #wpsl-search-wrap input[type="text"],
#wpsl-wrap #wpsl-search-wrap input[type="search"]{
  background: var(--mm-bronze) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  height: 44px !important;
  padding: 0 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}
#wpsl-wrap #wpsl-search-input::placeholder{ color: rgba(255,255,255,.75) !important; }

/* FORCE NATIVE SELECTS (Radius + Results) */
#wpsl-wrap #wpsl-search-wrap select{
  appearance:auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;

  background: var(--mm-bronze) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  height: 44px !important;
  padding: 0 12px !important;
  line-height: 44px !important;
}

/* (Desktop only) option colors */
#wpsl-wrap #wpsl-search-wrap select option{
  background: var(--mm-dark2) !important;
  color:#fff !important;
}

/* Focus */
#wpsl-wrap #wpsl-search-wrap input:focus,
#wpsl-wrap #wpsl-search-wrap select:focus{
  outline:none !important;
  border-color: rgba(255,255,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(188,149,90,.30) !important;
}

/* Search button */
#wpsl-wrap #wpsl-search-btn{
  font-family: inherit !important;
  font-weight: 800 !important;
  color:#111 !important;
  background:#f1d4aa !important;
  border: 1px solid rgba(0,0,0,.2) !important;
  border-radius: 12px !important;
  height: 44px !important;
  padding: 0 18px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Reset icon align */
#wpsl-wrap .wpsl-icon-reset,
#wpsl-wrap #wpsl-reset-map,
#wpsl-wrap [id^="wpslicon-reset"]{
  float:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:44px !important;
  margin-left:8px !important;
  color:#171718 !important;
}

/* =======================
   Results Cards
======================= */
#wpsl-wrap #wpsl-result-list li,
#wpsl-wrap #wpsl-stores > li{
  background: var(--mm-card) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 3px solid rgba(188,149,90,.75) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.25) !important;
}

#wpsl-wrap #wpsl-result-list a{
  color: var(--mm-gold) !important;
  font-weight: 800 !important;
  text-decoration:none !important;
}
#wpsl-wrap #wpsl-result-list a:hover{ text-decoration:underline !important; }

/* =======================
   Directions Button (clear + arrow)
======================= */
#wpsl-wrap a.wpsl-directions,
#wpsl-wrap .wpsl-direction-wrap a,
#wpsl-wrap .wpsl-info-actions a.wpsl-directions{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;

  padding: 10px 14px !important;
  border-radius: 999px !important;

  background: rgba(188,149,90,.18) !important;
  border: 1px solid rgba(188,149,90,.55) !important;

  color: #f3e7d6 !important;
  font-weight: 700 !important;
  text-decoration: none !important;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

#wpsl-wrap a.wpsl-directions:hover,
#wpsl-wrap .wpsl-direction-wrap a:hover,
#wpsl-wrap .wpsl-info-actions a.wpsl-directions:hover{
  background: rgba(188,149,90,.28) !important;
  border-color: rgba(188,149,90,.85) !important;
  transform: translateY(-1px);
}

#wpsl-wrap a.wpsl-directions::after,
#wpsl-wrap .wpsl-direction-wrap a::after,
#wpsl-wrap .wpsl-info-actions a.wpsl-directions::after{
  content: "↗" !important;
  font-size: 1em !important;
  opacity: .95 !important;
}

/* =======================
   Desktop list scrolling
======================= */
#wpsl-wrap #wpsl-stores{
  max-height: 80vh !important;
  overflow-y:auto !important;
  padding: 0 12px !important;
}

/* =======================
   Kill any old “Nice Select” UI
======================= */
#wpsl-wrap .wpsl-nice-select{ display:none !important; }

/* Restore native selects if some old script hid them */
#wpsl-wrap .wpsl-native-hidden{
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
}

/* =======================
   Mobile: sticky search + obvious scroll list
======================= */
@media (max-width: 768px){

  /* Sticky search bar */
  #wpsl-wrap.wpsl-mobile #wpsl-search-wrap{
    position: sticky !important;
    top: 0 !important;
    z-index: 99 !important;
  }

  /* Stack controls full width */
  #wpsl-wrap #wpsl-search-wrap .wpsl-input,
  #wpsl-wrap #wpsl-search-wrap #wpsl-radius,
  #wpsl-wrap #wpsl-search-wrap #wpsl-results,
  #wpsl-wrap #wpsl-search-wrap #wpsl-category,
  #wpsl-wrap #wpsl-search-wrap input,
  #wpsl-wrap #wpsl-search-wrap select,
  #wpsl-wrap #wpsl-search-btn{
    width: 100% !important;
  }

  /* Results list gets its own obvious scroll area */
  #wpsl-wrap.wpsl-mobile #wpsl-result-list,
  #wpsl-wrap.wpsl-mobile #wpsl-stores{
    max-height: 62vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* make it visually different from the page */
    background: rgba(0,0,0,.18) !important;
    border: 1px solid rgba(188,149,90,.35) !important;
    border-radius: 14px !important;

    padding: 10px 10px 16px !important;
    margin: 10px 0 0 !important;

    /* strong scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--mm-gold) rgba(255,255,255,.10);
  }

  /* WebKit scrollbar obvious */
  #wpsl-wrap.wpsl-mobile #wpsl-result-list::-webkit-scrollbar,
  #wpsl-wrap.wpsl-mobile #wpsl-stores::-webkit-scrollbar{
    width: 10px !important;
  }
  #wpsl-wrap.wpsl-mobile #wpsl-result-list::-webkit-scrollbar-thumb,
  #wpsl-wrap.wpsl-mobile #wpsl-stores::-webkit-scrollbar-thumb{
    background: var(--mm-gold) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(23,23,24,.75) !important;
  }
  #wpsl-wrap.wpsl-mobile #wpsl-result-list::-webkit-scrollbar-track,
  #wpsl-wrap.wpsl-mobile #wpsl-stores::-webkit-scrollbar-track{
    background: rgba(0,0,0,.35) !important;
    border-radius: 999px !important;
  }

  /* Fade top & bottom to scream “SCROLL HERE” */
  #wpsl-wrap.wpsl-mobile #wpsl-result-list::before,
  #wpsl-wrap.wpsl-mobile #wpsl-stores::before,
  #wpsl-wrap.wpsl-mobile #wpsl-result-list::after,
  #wpsl-wrap.wpsl-mobile #wpsl-stores::after{
    content: "" !important;
    position: sticky !important;
    left: 0 !important;
    right: 0 !important;
    height: 18px !important;
    pointer-events: none !important;
    display: block !important;
    z-index: 5 !important;
  }

  /* top fade */
  #wpsl-wrap.wpsl-mobile #wpsl-result-list::before,
  #wpsl-wrap.wpsl-mobile #wpsl-stores::before{
    top: 0 !important;
    margin-top: -10px !important;
    background: linear-gradient(to bottom, rgba(23,23,24,.85), rgba(23,23,24,0)) !important;
  }

  /* bottom fade */
  #wpsl-wrap.wpsl-mobile #wpsl-result-list::after,
  #wpsl-wrap.wpsl-mobile #wpsl-stores::after{
    bottom: 0 !important;
    margin-bottom: -16px !important;
    background: linear-gradient(to top, rgba(23,23,24,.92), rgba(23,23,24,0)) !important;
  }

  /* Small hint: show only when there is at least 1 result item */
  #wpsl-wrap.wpsl-mobile #wpsl-result-list > li:first-child,
  #wpsl-wrap.wpsl-mobile #wpsl-stores > li:first-child{
    position: relative !important;
  }

  #wpsl-wrap.wpsl-mobile #wpsl-result-list > li:first-child::before,
  #wpsl-wrap.wpsl-mobile #wpsl-stores > li:first-child::before{
    content: "Scroll results ↓" !important;
    position: absolute !important;
    top: -38px !important;
    right: 8px !important;

    background: rgba(188,149,90,.18) !important;
    border: 1px solid rgba(188,149,90,.45) !important;
    color: rgba(255,255,255,.88) !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    letter-spacing: .2px !important;
  }
}

/* ===============================
   Mobile layout order: Search -> List -> Map
=============================== */
@media (max-width: 768px){

  #wpsl-wrap.wpsl-mobile{
    display: flex !important;
    flex-direction: column !important;
  }

  /* 1) Search bar first */
  #wpsl-wrap.wpsl-mobile #wpsl-search-wrap{
    order: 1 !important;
  }

  /* 2) Results list second */
  #wpsl-wrap.wpsl-mobile #wpsl-stores,
  #wpsl-wrap.wpsl-mobile #wpsl-result-list{
    order: 2 !important;
  }

  /* 3) Map last */
  #wpsl-wrap.wpsl-mobile #wpsl-gmap,
  #wpsl-wrap.wpsl-mobile #wpsl-gmap_0,
  #wpsl-wrap.wpsl-mobile #wpsl-base-gmap_0{
    order: 3 !important;
    margin-top: 14px !important;
    height: 38vh !important;
    min-height: 260px !important;
  }
}