/* OpenStreet Store Locator - Stable Modern Skin (v1.1.2) */
:root { /* variables for reference only; actual scope is .osl-wrap */ }
.osl-wrap {
  --osl-accent: #111827;
  --osl-bg: #ffffff;
  --osl-muted: #6b7280;
  --osl-border: #e5e7eb;
  --osl-card: #ffffff;
  --osl-card-hover: #f9fafb;
  --osl-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: var(--osl-bg);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--osl-shadow);
}

.osl-wrap[data-theme="dark"]{
  --osl-bg: #0b0f17;
  --osl-card: #0f1623;
  --osl-card-hover: #161e2d;
  --osl-border: #1f2a3b;
  --osl-muted: #9aa6bd;
  --osl-shadow: 0 8px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  .osl-wrap[data-theme="auto"]{
    --osl-bg: #0b0f17;
    --osl-card: #0f1623;
    --osl-card-hover: #161e2d;
    --osl-border: #1f2a3b;
    --osl-muted: #9aa6bd;
    --osl-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
}

.osl-wrap .osl-search {
  display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 12px 0;
  background: var(--osl-card);
  border:1px solid var(--osl-border);
  border-left: 4px solid var(--osl-accent);
  border-radius: 14px; padding: 12px;
}
.osl-wrap .osl-search input[type="text"]{
  flex:1; min-width:260px; padding:12px 14px; border:1px solid var(--osl-border);
  border-radius: 12px; background: var(--osl-bg);
  color: inherit; outline: none;
}
.osl-wrap .osl-search input[type="text"]:focus{ border-color: var(--osl-accent); box-shadow: 0 0 0 3px rgba(17,24,39,.15); }
.osl-wrap .osl-search select{
  padding:12px 14px; border:1px solid var(--osl-border); border-radius: 12px; background: var(--osl-bg);
}
.osl-wrap .osl-btn {
  padding:12px 16px; border-radius: 12px; border:1px solid var(--osl-accent);
  background: var(--osl-accent); color:#fff; cursor:pointer; font-weight:600;
  transition: transform .06s ease, filter .2s ease;
}
.osl-wrap .osl-btn:hover { filter: brightness(1.05); }
.osl-wrap .osl-btn:active { transform: translateY(1px); }
.osl-wrap .osl-btn.secondary { background: transparent; color: var(--osl-accent); }

.osl-wrap .osl-grid-ui { display:grid; gap:14px; align-items: stretch; }
.osl-wrap[data-layout="split"] .osl-grid-ui{
  grid-template-columns: 2fr 1.2fr;
}
.osl-wrap[data-layout="stack"] .osl-grid-ui{ grid-template-columns: 1fr; }
.osl-wrap[data-layout="map-only"] .osl-list{ display:none; }

.osl-wrap .osl-map {
  width:100%; border-radius:14px; overflow:hidden; border:1px solid var(--osl-border);
  box-shadow: var(--osl-shadow);
}

.osl-wrap .osl-list {
  border:1px solid var(--osl-border);
  border-radius:16px; padding:12px;
  background: var(--osl-card);
  max-height: 560px; overflow:auto;
}

.osl-wrap .osl-list .osl-item {
  display:grid; grid-template-columns: 72px 1fr; gap:12px;
  border:1px solid var(--osl-border);
  border-radius:14px; padding:12px; margin-bottom:12px;
  background: var(--osl-bg);
  transition: box-shadow .2s ease, background .2s ease, transform .08s ease;
}
.osl-wrap .osl-list .osl-item:hover { transform: translateY(-1px); box-shadow: var(--osl-shadow); }
.osl-wrap .osl-list .osl-item:last-child { margin-bottom: 0; }

.osl-wrap .osl-item img {
  width:72px; height:72px; object-fit:cover; border-radius:12px; border:1px solid var(--osl-border);
}
.osl-wrap .osl-item .content h4{
  margin:0 0 6px 0; font-size:16px; line-height:1.2;
}
.osl-wrap .osl-item .row { font-size:13px; color: var(--osl-muted); margin-bottom:5px; }
.osl-wrap .osl-item .badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; background: rgba(17,24,39,.06);
  color: var(--osl-accent); border:1px solid rgba(17,24,39,.1);
}
.osl-wrap .osl-item.active { background: var(--osl-card-hover); }

/* Leaflet popup tweaks scoped */
.osl-wrap .leaflet-popup-content a { color: var(--osl-accent); font-weight:600; text-decoration: underline; }