:root{
      --sidebar-w: 380px;
      --accent: #4A00E2;
      --dark: #110057;
      --muted:#6b7280;
      --chip:#F7F5F9;
      --fade:.35;
      --iw-w: 380px;
      --iw-w-sm: 320px;
    }

    html, body { height: 100%; margin: 0; color: var(--dark); font-family: 'Source Sans 3', Arial, sans-serif; }
    h1, h2, h3, h4, .btn, .chip { font-family: 'Inter', Arial, sans-serif; }

/* html, body {
    position: relative;
    top: -5px;
} */

    .app { height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
    .sidebar { height: 100%; overflow: hidden; border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; background: #fff; }
    .sidebar header { padding: 16px 16px 8px; border-bottom: 1px solid #e5e7eb; position: relative; }
    .sidebar h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
    .meta { color: var(--muted); font-size: 12px; margin-top: 4px;}

    .controls { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; gap: 8px; display: grid; grid-template-columns: 1fr; background: #fff; }
    .row { display:flex; gap:8px; align-items:center; }
    .row > * { flex:1; }
    .search input { width:100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 14px; }
    .btn { appearance:none; border:1px solid #d1d5db; background:#fff; border-radius:10px; padding:8px 10px; font-size:13px; cursor:pointer; }

    .filters { padding:10px 16px; overflow:auto; border-bottom:1px solid #e5e7eb; max-height:30%; background:#fff; }
    .filters h3 { margin:10px 0 8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
    .chips { display:flex; flex-wrap:wrap; gap:6px; }
    .chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:var(--chip); border:1px solid #e5e7eb; border-radius:999px; font-size:12px; cursor:pointer; user-select:none; }

    .list { overflow:auto; flex:1; background:#fff; }

    /* Group (accordion) */
    .group-section { border-top:1px solid #eee; }
    .group-head {
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 12px 10px 16px; font-size:13px; color:#374151; font-weight:600;
      text-transform:uppercase; letter-spacing:.04em; background:#fafafa;
      position:sticky; top:0; z-index:1; border-bottom:1px solid #f0f0f0;
    }
    .group-head .left { display:flex; align-items:center; gap:8px; }
    .group-head .controls { display:flex; gap:8px; align-items:center; }
    .pill { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:#eef; color:#223; font-size:11px; border:1px solid #dde; }
    .iconbtn { appearance:none; border:none; background:transparent; padding:4px; cursor:pointer; color:#374151; border-radius:6px; }
    .iconbtn:hover { background:#efefef; }
    .chev{ transition:transform .18s ease; }
    .collapsed .chev { transform: rotate(90deg); }
    .faded{ opacity: var(--fade); }

    .group-body { display:block; }
    .collapsed + .group-body { display:none; }

    .card { border-bottom:1px solid #f3f4f6; padding:12px 16px; cursor:pointer; display:flex; align-items:center; gap:10px; }
    .card:hover { background:#f9fafb; }
    .card h4 { margin:0 0 2px; font-size:15px; }
    .pin-img { width:20px; height:20px; flex:0 0 20px; object-fit:contain; }
    .meta-row { color:var(--muted); font-size:12px; }

    #map { height:100%; width:100%; position:relative; }

.map-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #222;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 5;
}

.map-zoom-hint.show {
  opacity: 1;
}

    /* MapLibre popup */
    .maplibregl-popup { z-index: 2000; }
    .maplibregl-popup-content {
      padding: 0 !important;
      width: var(--iw-w);
      max-width: none !important;
      border-radius: 10px;
      box-shadow: 0 8px 20px rgba(0,0,0,.15);
      overflow: hidden;
      font-family: 'Source Sans 3', Arial, sans-serif;
    }
    .iw .hero { position:relative; width:100%; height:150px; overflow:hidden; }
    .iw .hero img { width:100%; height:100%; object-fit:cover; }
    .iw .tagpill { position:absolute; top:10px; left:10px; background:#fff; color:#111827; font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid #e5e7eb; }
    .iw .pad { padding:12px 14px 14px; }
    .iw h3 { margin:10px 0 4px; font-size:18px; font-weight:700; }
    .iw .group { color:#374151; font-size:13px; margin-bottom:8px; }
    .iw .addr { margin-bottom:8px; }
    .iw .addr-link { font-size:15px; font-weight:600; color:#110057; text-decoration:underline; border: none; }
    .iw .addr-link:hover { text-decoration:none; }
    .iw .btn-learn {
      display:block; width:100%; box-sizing:border-box; text-align:center;
      padding:12px 14px; background:#110057; color:#fff; border-radius:10px;
      text-decoration:none; font-family:'Inter', Arial, sans-serif; font-weight:600;
      margin-top:10px; white-space:normal; overflow:hidden; text-overflow:ellipsis;
    }
.iw .phone,
.iw .comments{
  color:#374151;
  font-size:13px;
  margin-bottom:8px;
}

.iw .phone-link{
  color:#110057;
  font-weight:600;
  text-decoration:none;
border: none;
font-size:15px;
}
.iw .phone-link:hover{ text-decoration:none; }

.iw .comments{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
background: #fafafa;
padding:6px 6px;
border: 1px solid #f0f0f0;
}
/* Ensure popup sits above zoom hint */
.maplibregl-popup {
  z-index: 20;
}

/* Keep zoom hint below popup */
#zoom-hint {
  z-index: 50;
}

.maplibregl-popup-content .iw a:focus,
.maplibregl-popup-content .iw a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

    /* Icon-only controls */
    .icon-btn { border:none; background:none; padding:6px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--dark); }
    .icon-btn:hover { background:#f3f4f6; }
    .icon-btn svg { width:18px; height:18px; }
    /* smaller variant for compact icon buttons */
    .iconbtn.small { padding: 2px; }
    .iconbtn.small svg { width: 14px; height: 14px; }

    /* Mobile drawer */
    .menu-btn {
      display:none; position: fixed;              
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  right: auto;
  z-index: 9999;  
      background:#110057; color:#fff; border:none; padding:10px 12px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.2);
    }
    .menu-btn:focus { outline:2px solid #4A00E2; outline-offset:2px; }
.menu-btn.is-open {
  left: auto;
  right: 12px;
}
    .backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:900; }
    .backdrop.show { display:block; }

    /* Desktop sidebar toggle */
    @media (min-width: 769px) { .desk-toggle { display:inline-flex; } }
    .desk-toggle {
      position:absolute; top:8px; right:12px; z-index:3000; background:#110057; color:#fff; border:none;
      padding:8px 10px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.2); gap:6px; cursor:pointer; display:inline-flex;
    }
    .desk-toggle .icon { transition: transform .2s ease; }
    .desk-toggle-floating { position:fixed !important; top:12px !important; left:12px !important; right:auto !important; z-index:3000 !important; display:inline-flex !important; }
    .desk-toggle .icon.flipped { transform: rotate(180deg); }

    .app .sidebar { transition: transform .3s ease; }
    .app.sidebar-collapsed { grid-template-columns: 0 1fr !important; }
    .app.sidebar-collapsed .sidebar { transform: translateX(-100%); }
    .app.sidebar-collapsed .desk-toggle { position:fixed !important; top:12px !important; left:12px !important; right:auto !important; }
    .app.sidebar-collapsed .desk-toggle .icon { transform: rotate(180deg); }

    /* Responsive */
    @media (max-width: 768px){
      .app { grid-template-columns: 1fr; }

      .sidebar {
        position:fixed; top:0; left:0; height:100%; width:80%; max-width:320px;
        transform:translateX(-100%); transition:transform .3s ease; z-index:1000; box-shadow:2px 0 8px rgba(0,0,0,.2);
      }
      .sidebar.open { transform:translateX(0); }
      #map { grid-row:1/2; height:100vh; }
.backdrop { z-index: 900; }
     .menu-btn { 
  display:inline-flex;
  align-items:center;
  gap:8px;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  right: auto;
  z-index: 10001;  /* higher than sidebar */
}

  /* When sidebar is open, move button to the right so it doesn't cover the logo */
  .menu-btn.is-open {
    left: auto;
    right: 12px;
  }
      .maplibregl-popup-content { width: var(--iw-w-sm); }
      .desk-toggle { display:none !important; }
    }
@media (max-width: 768px){
  .menu-btn { z-index: 10001 !important; }
}