/* =========================================================================
   Scoped reset — WordPress themes frequently style h1-h6, p, a, button,
   and input globally (sometimes with gradient "text-fill" effects, custom
   margins, or !important rules). Everything in here is neutralized first
   so the widget looks the same regardless of the theme it's dropped into.
   ========================================================================= */
.nsl-locator,
.nsl-locator *{ box-sizing: border-box; }
.nsl-locator h1, .nsl-locator h2, .nsl-locator h3,
.nsl-locator h4, .nsl-locator h5, .nsl-locator h6,
.nsl-locator p{
  margin: 0; padding: 0; font-weight: normal; line-height: normal;
  text-transform: none; letter-spacing: normal;
  background: none !important; -webkit-background-clip: initial !important;
  background-clip: initial !important; -webkit-text-fill-color: currentColor !important;
}
.nsl-locator ul, .nsl-locator li{ margin: 0; padding: 0; list-style: none; }
.nsl-locator a{ text-decoration: none; }
.nsl-locator button, .nsl-locator input{
  font-family: inherit; border-radius: 0; box-shadow: none; background: none;
}
.nsl-locator button{
  appearance: none; -webkit-appearance: none;
  padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important;
  line-height: normal !important; border: none !important;
}

/* =========================================================================
   Theme
   ========================================================================= */
.nsl-locator{
  --nsl-primary: #2C1024;
  --nsl-primary-soft: #4C2140;
  --nsl-accent: #E2572B;
  --nsl-accent-deep: #C6431E;
  --nsl-gold: #B8935A;
  --nsl-gold-light: #E7D4B0;
  --nsl-cream: #FBF7F1;
  --nsl-card: #FFFFFF;
  --nsl-ink: #241C1F;
  --nsl-ink-soft: #7A6E6B;
  --nsl-line: #ECE2D4;
  --nsl-open: #3C7A52;
  --nsl-closed: #B4432E;
  --nsl-radius: 16px;
  --nsl-radius-sm: 12px;
  --nsl-shadow: 0 8px 22px rgba(44, 16, 36, 0.10);
  --nsl-shadow-lg: 0 22px 50px rgba(44, 16, 36, 0.20);
  --nsl-font-display: 'Playfair Display', Georgia, serif;
  --nsl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nsl-body-height: 460px;

  width: 100%;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--nsl-line);
  box-shadow: var(--nsl-shadow-lg);
  background: var(--nsl-card);
  font-family: var(--nsl-font-body);
  color: var(--nsl-ink);
}

/* Two-column body: search/filter/results on the left, map on the right */
.nsl-locator .nl-body{ display: grid; grid-template-columns: 340px 1fr; height: var(--nsl-body-height); }

/* Left pane */
.nsl-locator .nl-list-pane{ border-right: 1px solid var(--nsl-line); display: flex; flex-direction: column; min-height: 0; background: var(--nsl-cream); }

.nsl-locator .nl-list-top{ padding: 26px 24px 20px; border-bottom: 1px solid var(--nsl-line); flex-shrink: 0; }

.nsl-locator .nl-eyebrow{
  font-family: var(--nsl-font-body) !important; font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--nsl-gold) !important; margin: 0 0 6px !important;
}
.nsl-locator .nl-title{
  font-family: var(--nsl-font-display) !important; font-weight: 700 !important; font-size: 22px !important;
  color: var(--nsl-primary) !important; margin: 0 0 18px !important; line-height: 1.2 !important;
}

.nsl-locator .nl-search{ position: relative; }
.nsl-locator .nl-search input{
  width: 100%; padding: 13px 18px 13px 42px; border-radius: 999px; border: 1px solid var(--nsl-line); outline: none;
  font-size: 13.5px; background: #fff; color: var(--nsl-ink); box-shadow: 0 2px 6px rgba(44,16,36,0.04);
}
.nsl-locator .nl-search input::placeholder{ color: var(--nsl-ink-soft); }
.nsl-locator .nl-search input:focus{ border-color: var(--nsl-accent); box-shadow: 0 0 0 3px rgba(226,87,43,0.14); }
.nsl-locator .nl-search svg{ position:absolute; left:16px; top:50%; transform: translateY(-50%); opacity: 0.45; width:14px; height:14px; }

.nsl-locator .nl-filters{ display:flex; gap:8px; margin-top: 14px; flex-wrap: wrap; }
.nsl-locator .nl-chip{
  border: 1px solid var(--nsl-line) !important; background: #fff;
  color: var(--nsl-ink-soft); padding: 7px 16px !important; border-radius: 999px !important; font-size: 11.5px;
  font-weight: 600; cursor: pointer; transition: all .15s ease; letter-spacing: 0.01em;
}
.nsl-locator .nl-chip:hover{ border-color: var(--nsl-gold); color: var(--nsl-ink); }
.nsl-locator .nl-chip.active{ background: var(--nsl-primary); border-color: var(--nsl-primary); color: var(--nsl-gold-light); }

.nsl-locator .nl-count{
  font-size: 10.5px !important; color: var(--nsl-ink-soft) !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important; margin: 16px 0 0 !important;
}

.nsl-locator .nl-list{ overflow-y: auto; padding: 14px; flex: 1; min-height: 0; }
.nsl-locator .nl-list::-webkit-scrollbar{ width: 5px; }
.nsl-locator .nl-list::-webkit-scrollbar-thumb{ background: var(--nsl-line); border-radius: 6px; }

.nsl-locator .nl-card{
  background: var(--nsl-card); border: 1px solid var(--nsl-line); border-left: 3px solid transparent;
  border-radius: var(--nsl-radius-sm);
  padding: 13px 14px; margin-bottom: 8px; cursor: pointer; display:flex; gap: 11px; align-items:flex-start;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.nsl-locator .nl-card:hover{ transform: translateY(-1px); box-shadow: var(--nsl-shadow); }
.nsl-locator .nl-card.active{ border-left-color: var(--nsl-accent); box-shadow: var(--nsl-shadow); }
.nsl-locator .nl-badge{
  flex-shrink:0; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--nsl-accent), var(--nsl-gold));
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family: var(--nsl-font-display) !important; font-weight:700 !important; font-size: 12.5px !important;
}
.nsl-locator .nl-card-body{ flex:1; min-width:0; }
.nsl-locator .nl-card-name{
  font-family: var(--nsl-font-display) !important; font-weight: 700 !important; font-size: 14.5px !important;
  color: var(--nsl-ink) !important; margin: 0 0 3px !important; line-height: 1.3 !important;
}
.nsl-locator .nl-tag{
  display:inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: rgba(184,147,90,0.15); color: var(--nsl-gold); margin-bottom: 5px;
}
.nsl-locator .nl-status{ font-size: 11px; font-weight: 600; margin: 0 0 3px; }
.nsl-locator .nl-status.open{ color: var(--nsl-open); }
.nsl-locator .nl-status.closed{ color: var(--nsl-closed); }
.nsl-locator .nl-addr{ font-size: 11.5px; color: var(--nsl-ink-soft); margin: 0; line-height: 1.4; }
.nsl-locator .nl-empty{ padding: 34px 18px; text-align:center; color: var(--nsl-ink-soft); font-size: 12.5px; line-height:1.6; }

/* Right pane — map, freely zoomable/pannable at all times */
.nsl-locator .nl-map-pane{ position: relative; min-height: 0; background: var(--nsl-cream); }
.nsl-locator .nl-map{ width: 100%; height: 100%; }

.nsl-marker-pin{
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--nsl-primary, #2C1024);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.nsl-marker-pin.active{
  background: var(--nsl-accent, #E2572B);
  transform: scale(1.25);
  box-shadow: 0 0 0 5px rgba(226,87,43,0.22), 0 2px 8px rgba(0,0,0,0.35);
}

/* Cluster badges (Leaflet.markercluster) — restyled to match the brand */
.nsl-locator .marker-cluster{
  background: rgba(44, 16, 36, 0.16);
}
.nsl-locator .marker-cluster div{
  background: var(--nsl-primary, #2C1024);
  color: var(--nsl-gold-light, #E7D4B0);
  font-family: var(--nsl-font-display, 'Playfair Display', serif) !important;
  font-weight: 700 !important;
  font-size: 13px;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.nsl-locator .marker-cluster span{ line-height: inherit; }

/* Detail popover, floats over the map */
.nsl-locator .nl-detail{
  position: absolute; top: 16px; left: 16px; width: 270px; background: var(--nsl-card);
  border-radius: var(--nsl-radius); box-shadow: var(--nsl-shadow-lg); overflow: hidden; z-index: 500;
  transform: translateY(6px); opacity: 0; pointer-events: none; transition: all .22s ease;
  max-height: calc(100% - 32px); overflow-y: auto;
}
.nsl-locator .nl-detail.show{ transform: translateY(0); opacity: 1; pointer-events: all; }
.nsl-locator .nl-detail-top{
  background: linear-gradient(135deg, var(--nsl-primary) 0%, var(--nsl-primary-soft) 60%, var(--nsl-accent-deep) 140%);
  padding: 18px 18px 26px; position: relative;
}
.nsl-locator .nl-detail-close{
  position:absolute !important; top:10px !important; right:10px !important;
  width: 24px !important; height: 24px !important; padding: 0 !important; border-radius: 50% !important;
  background: rgba(255,255,255,0.9); border: none; cursor: pointer; display:flex; align-items:center;
  justify-content:center; font-size: 13px; color: var(--nsl-primary); line-height:1;
}
.nsl-locator .nl-detail-mark{
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center; color: var(--nsl-gold-light);
  font-family: var(--nsl-font-display) !important; font-weight: 700 !important; font-size: 13px !important;
  border: 1px solid rgba(255,255,255,0.25);
}
.nsl-locator .nl-detail-name{
  font-family: var(--nsl-font-display) !important; font-size: 17px !important; font-weight: 700 !important;
  color: #fff !important; margin: 12px 0 0 !important; line-height:1.3 !important;
}
.nsl-locator .nl-detail-content{ padding: 14px 18px 18px; }
.nsl-locator .nl-detail-tag{
  display:inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: rgba(184,147,90,0.15); color: var(--nsl-gold); margin-bottom: 10px;
}
.nsl-locator .nl-detail-desc{ font-size: 12px; color: var(--nsl-ink-soft); line-height: 1.55; margin: 0 0 12px; }
.nsl-locator .nl-detail-row{ display:flex; gap: 9px; align-items:flex-start; font-size: 12.5px; margin-bottom: 9px; line-height: 1.4; }
.nsl-locator .nl-detail-row svg{ flex-shrink:0; margin-top: 2px; opacity: 0.5; width:13px; height:13px; }
.nsl-locator .nl-detail-row a{ color: var(--nsl-ink); text-decoration: none; word-break: break-word; }
.nsl-locator .nl-detail-row a:hover{ color: var(--nsl-accent); }
.nsl-locator .nl-cta{
  display:block; width: 100%; text-align:center; padding: 11px !important; border-radius: 999px !important;
  background: var(--nsl-primary); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
  margin-top: 6px; border: none; cursor: pointer; transition: background .15s ease;
}
.nsl-locator .nl-cta:hover{ background: var(--nsl-accent-deep); }

@media (max-width: 640px){
  .nsl-locator{ border-radius: 14px; }

  /* The desktop layout is CSS Grid with a flex column nested inside one
     of the grid cells (list-pane -> header + scrolling list). That
     combination doesn't reliably size itself when the grid collapses to
     a single auto-height track on mobile. Switching to a plain flex
     column for the whole thing sidesteps that — each section gets an
     explicit height instead of fighting the grid for one. */
  .nsl-locator .nl-body{
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .nsl-locator .nl-list-pane{
    order: 1;
    border-right: none;
    border-bottom: 1px solid var(--nsl-line);
  }
  .nsl-locator .nl-map-pane{ order: 2; flex-shrink: 0; }

  .nsl-locator .nl-list-top{ padding: 14px 14px 10px; background: var(--nsl-cream); }
  .nsl-locator .nl-eyebrow{ display: none; }
  .nsl-locator .nl-title{ font-size: 16px !important; margin: 0 0 10px !important; }

  /* Search bar: real padding, rounded corners (not a full pill), and a
     visible border so it reads as an input, not a floating shape. */
  .nsl-locator .nl-search input{
    font-size: 16px; /* keeps iOS Safari from auto-zooming on focus */
    padding: 11px 14px 11px 40px;
    border-radius: 12px;
    border: 1.5px solid var(--nsl-line);
    background: #fff;
  }
  .nsl-locator .nl-search svg{ left: 14px; }

  /* Filter chips: a visible fill + border regardless of what's behind
     them, instead of a near-white chip that can wash out. */
  .nsl-locator .nl-filters{ margin-top: 10px; }
  .nsl-locator .nl-chip{
    padding: 6px 12px;
    font-size: 11px;
    background: var(--nsl-cream);
    border: 1.5px solid var(--nsl-line);
    color: var(--nsl-ink);
    box-shadow: 0 1px 3px rgba(44,16,36,0.06);
  }
  .nsl-locator .nl-chip.active{ border-color: var(--nsl-primary); }

  .nsl-locator .nl-count{ padding: 10px 14px 4px; background: var(--nsl-cream); font-size: 10px !important; }

  /* Results panel: a compact, fixed-height scroll area sized to show
     roughly 3 cards, with the rest reachable by scrolling. */
  .nsl-locator .nl-list{
    flex: none;
    min-height: 0;
    height: 250px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 12px;
  }
  .nsl-locator .nl-card{ padding: 10px 12px; margin-bottom: 6px; gap: 9px; }
  .nsl-locator .nl-badge{ width: 28px; height: 28px; font-size: 11px !important; }
  .nsl-locator .nl-card-name{ font-size: 13px !important; }
  .nsl-locator .nl-status{ font-size: 10.5px; margin: 0 0 2px; }
  .nsl-locator .nl-addr{ font-size: 11px; }

  /* Map: a padded, framed section instead of edge-to-edge. */
  .nsl-locator .nl-map-pane{
    padding: 12px;
    background: var(--nsl-cream);
  }
  .nsl-locator .nl-map{
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--nsl-shadow);
  }
  /* Detail card: a small, compact card (not full width) so it reads as
     a floating popup over the map, moved down so it clears Leaflet's
     zoom control (top-left of the map) instead of overlapping it. */
  .nsl-locator .nl-detail{
    top: 64px; left: 14px; right: auto; width: 210px;
    max-height: calc(100% - 78px);
    border-radius: 14px;
  }
  .nsl-locator .nl-detail-top{ padding: 12px 12px 18px; }
  .nsl-locator .nl-detail-mark{ width: 28px; height: 28px; font-size: 10px !important; }
  .nsl-locator .nl-detail-name{ font-size: 13.5px !important; margin: 7px 0 0 !important; }
  .nsl-locator .nl-detail-content{ padding: 10px 12px 12px; }
  .nsl-locator .nl-detail-tag{ margin-bottom: 7px; }
  .nsl-locator .nl-detail-desc{ font-size: 10.5px; margin-bottom: 7px; }
  .nsl-locator .nl-detail-row{ font-size: 11px; gap: 6px; margin-bottom: 6px; }
  .nsl-locator .nl-detail-row svg{ width: 11px; height: 11px; }
  .nsl-locator .nl-cta{ padding: 9px !important; font-size: 10.5px; margin-top: 4px; }
}

@media (max-width: 400px){
  .nsl-locator .nl-list{ height: 220px; }
  .nsl-locator .nl-map{ height: 220px; }
  .nsl-locator .nl-detail{ width: 180px; top: 58px; }
  .nsl-locator .nl-title{ font-size: 15px !important; }
  .nsl-locator .nl-list-top{ padding: 12px 12px 8px; }
}