/* map-page.css - Styles for Google Maps-style full-screen map layout */

/* ===== Full-screen map layout ===== */
body.map-page {
  overflow: hidden;
  background: #e8e4df;
}
body.map-page .header {
  display: none;
}
body.map-page .sidebar {
  display: none;
}
body.map-page #main {
  margin: 0;
  padding: 0;
  margin-top: 0;
}
body.map-page #mapid {
  position: fixed;
  top: calc(-1 * env(safe-area-inset-top, 0px));
  left: calc(-1 * env(safe-area-inset-left, 0px));
  width: calc(100vw + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  height: calc(100vh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  min-height: calc(100vh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 0 !important;
  z-index: 0;
  aspect-ratio: auto;
  box-sizing: border-box;
}
body.map-page #mapid > div > div {
  height: calc(100vh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)) !important;
  height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)) !important;
}
body.map-page #updateMapButton {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
}

/* ===== Floating search bar ===== */
.gm-search-bar {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: calc(28px + env(safe-area-inset-left, 0px));
  z-index: 1000;
  width: 400px;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  padding: 4px;
}
.gm-search-bar .gm-hamburger {
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 20px;
  color: #444;
  flex-shrink: 0;
  line-height: 1;
}
.gm-search-bar input {
  border: none;
  outline: none;
  flex: 1;
  padding: 8px 12px 8px 0;
  font-size: 15px;
  background: transparent;
  min-width: 0;
}
.gm-search-bar .gm-search-btn {
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: #4154f1;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

/* ===== Floating slide-out panel ===== */
.gm-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 400px;
  max-width: 85vw;
  z-index: 1005;
  background: #fff;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow: hidden;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
}
.gm-panel.open {
  transform: translateX(0);
}
.gm-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1004;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.gm-panel-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.gm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.gm-panel-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #444;
  padding: 4px 8px;
  line-height: 1;
}
.gm-panel > ul {
  flex-shrink: 0;
}
.gm-panel .sidebar-scrollable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== Content summary below search bar ===== */
.gm-content-summary {
  position: fixed;
  top: calc(68px + env(safe-area-inset-top, 0px));
  left: calc(28px + env(safe-area-inset-left, 0px));
  z-index: 999;
  width: 400px;
  max-width: calc(100vw - 32px);
  font-size: 13px;
  color: #444;
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 14px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  line-height: 1.4;
  box-sizing: border-box;
}

/* ===== Map toolbar (drawer toggle + legend + share) =====
   Bottom-right on desktop so it stays clear of the left-docked details
   drawer. Mobile media query repositions to a full-width bottom bar. */
.gm-toolbar {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== Floating legend ===== */
.gm-legend {
  background: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 0.875rem;
}
/* Desktop: chips strip stacked above the frequency row. The mobile media
   query below flattens all three rows into one horizontal scroll strip
   inside the unified toolbar pill. */
.gm-carrier-strip {
  width: 360px;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eef0f5;
}
.gm-carrier-scroll {
  overflow-x: auto;
}
/* Verdict pill + BDC dBm scale (brand /coverage/ pages only). Row keeps the
   gm-bdc-row name deliberately: the brand views are @cache_page(24h), so
   after a deploy the HTML is up to a day older than the stylesheet next to
   it. Renaming a class the cached markup still uses strands that row with no
   styling at all — no border, no centering, jammed into row 1 — for the rest
   of the TTL. Same reason the pill inside is styled inline. */
.gm-bdc-row {
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid #eef0f5;
}
/* Brand pages have no frequency row, putting the dBm row right under the
   chip strip — the strip's border-bottom already divides them, so drop
   the row's own border to avoid a double hairline. (The mobile block
   below re-adds it later in the cascade, where the strip has no border.) */
.gm-carrier-strip ~ .gm-bdc-row {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
/* Carrier chips in the legend — styled as buttons with the carrier brand
   color so they communicate "click me to see this carrier's coverage". */
.gm-carrier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--brand, #222);
  background: color-mix(in srgb, var(--brand, #222) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand, #222) 35%, #fff);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}
.gm-carrier-chip:hover {
  background: color-mix(in srgb, var(--brand, #222) 16%, #fff);
  border-color: var(--brand, #222);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand, #222) 30%, transparent);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--brand, #222);
}
/* You-are-here state: the chip for the view being looked at renders filled.
   order:-1 pins it to the rail head on brand pages so it can't scroll out
   of view; the "All towers" chip sits ahead of it at order:-2 (visual-only
   reorder — DOM/tab order keeps the stable brand ranking). On /near/ pages
   the All chip carries aria-current itself, so -1 beats its class's -2 and
   it still renders first. */
.gm-chip-all {
  order: -2;
}
.gm-carrier-chip[aria-current="page"] {
  order: -1;
  background: var(--brand, #012970);
  border-color: var(--brand, #012970);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand, #012970) 40%, transparent);
}
.gm-carrier-chip[aria-current="page"]:hover {
  background: var(--brand, #012970);
  color: #fff;
  transform: none;
}
/* The inline brand-colored dot flips white on the filled chip; the dot's
   background is an inline style, hence the !important. */
.gm-carrier-chip[aria-current="page"] span[aria-hidden="true"] {
  background: #fff !important;
}

/* ===== Parent-page context line (brand coverage drawer) =====
   The always-visible path from a /coverage/ page back to the all-carrier
   /near/ page, rendered directly under the verdict panel. */
.gm-context-line {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f6f8ff;
  border: 1px solid #dfe5fb;
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0 0 16px;
  text-decoration: none;
  font-size: 13px;
  color: #012970;
  font-weight: 600;
  line-height: 1.35;
}
.gm-context-line:hover {
  border-color: #4154f1;
  background: #f0f3ff;
  color: #012970;
  text-decoration: none;
}
.gm-context-line svg {
  flex: none;
  color: #4154f1;
}
.gm-context-line small {
  display: block;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a93ad;
}

/* ===== Floating logo ===== */
.gm-logo {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  font-size: 18px;
  font-weight: 700;
  color: #012970;
  font-family: "Bungee", sans-serif;
  text-decoration: none;
  background: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.gm-logo i {
  margin-right: 4px;
}

/* ===== Drawer overlay =====
   Mobile-only tap target: with the sheet open, tapping the map closes it.
   On desktop the drawer docks as a side card that coexists with the map, so
   the overlay stays hidden and the map remains fully interactive. */
.gm-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 399;
  display: none;
}

/* ===== Details drawer =====
   Desktop: a Google-Maps-style card docked on the left, below the search
   bar and content summary, sliding in from the left edge. Mobile overrides
   below turn it back into a bottom sheet with a grabber handle. */
.gm-drawer {
  position: fixed;
  top: calc(116px + env(safe-area-inset-top, 0px));
  left: calc(28px + env(safe-area-inset-left, 0px));
  bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  width: 400px;
  max-width: calc(100vw - 56px);
  z-index: 1003;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(calc(-100% - 40px));
  visibility: hidden;
  transition:
    transform 0.3s ease,
    visibility 0.3s;
  padding: 0;
}
.gm-drawer.open {
  transform: none;
  visibility: visible;
}

/* Top chrome: grabber handle (mobile) / corner X (desktop). Sticky so the
   dismiss affordance stays reachable while the drawer content scrolls. */
.gm-drawer-chrome {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 5;
}
.gm-drawer-handle {
  display: none;
}
.gm-drawer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s;
}
.gm-drawer-close:hover {
  background: #e4e6e8;
  color: #202124;
}
.gm-drawer-content {
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.gm-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  /* Keep the H1 clear of the sticky corner X. */
  padding-right: 28px;
}

/* ===== Drawer toggle button =====
   Labeled pill: chevron + "Details". The old icon-only circle didn't
   communicate what it opened. Chevron rotates 180° when the drawer is
   open and the pill dims to read as "active". */
.gm-drawer-toggle {
  background: #012970;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  border-radius: 999px;
  height: 40px;
  padding: 0 16px 0 13px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 6px rgba(1, 41, 112, 0.4);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s,
    background 0.2s;
}
.gm-drawer-toggle:hover {
  background: #011d52;
  box-shadow: 0 4px 12px rgba(1, 41, 112, 0.5);
  transform: translateY(-1px);
}
.gm-drawer-toggle:active {
  transform: translateY(0);
}
.gm-drawer-toggle.open {
  background: #33436b;
}
.gm-drawer-toggle.open svg {
  transform: rotate(180deg);
}
.gm-drawer-toggle svg {
  transition: transform 0.25s ease;
  fill: #fff;
  flex-shrink: 0;
}
.gm-drawer-toggle-label {
  line-height: 1;
  white-space: nowrap;
}

/* ===== SEO footer ===== */
.gm-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px calc(16px + env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  font-size: 11px;
  line-height: 1.4;
  border-top: 1px solid #e0e4ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gm-footer-seo {
  flex: 1;
  min-width: 0;
}
.gm-footer-seo h2 {
  font-size: 12px;
  font-weight: 600;
  color: #012970;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-footer-seo p {
  font-size: 11px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-footer-links {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.gm-footer-links a {
  color: #4154f1;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 10px;
}
.gm-footer-links a:hover {
  text-decoration: underline;
}
.gm-footer-links a + a {
  border-left: 1px solid #ccc;
}

/* ===== Directory floating panel ===== */
.gm-directory-panel {
  position: fixed;
  top: 16px;
  left: 28px;
  bottom: 16px;
  width: 50vw;
  max-width: calc(100vw - 56px);
  z-index: 500;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 24px;
  overflow-y: auto;
  margin-top: 64px;
}
.gm-directory-close {
  display: none;
  padding: 4px;
  line-height: 1;
}
.gm-directory-close:hover {
  opacity: 0.7;
}

/* ===== SEO content in panel ===== */
.gm-seo-content {
  padding: 16px 0;
}
.gm-seo-content h2 {
  font-size: 18px;
  font-weight: 600;
  color: #012970;
  margin-bottom: 8px;
}
.gm-seo-content .lead {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

/* ===== Mobile breakpoints ===== */
@media (max-width: 768px) {
  .gm-search-bar {
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
  .gm-panel {
    width: 85vw;
    max-width: 360px;
  }
  .gm-toolbar {
    /* Mobile: one white bar replacing three disconnected floating cards.
       Grid so the legend's rows can slot in independently (the legend
       box itself dissolves via display:contents):
         row 1  Details · carrier chip scroller · share
         row 2  frequency dots (full width)
         row 3  dBm scale when the BDC overlay is active (full width) */
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    /* Base .gm-toolbar sets gap:12px for the desktop flex row; as a grid that
       also becomes a row-gap, padding dead space between the stacked legend
       rows (which space themselves with margin-top). */
    row-gap: 0;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    padding: 6px 10px;
  }
  .gm-legend {
    display: contents;
    font-size: 11px;
    line-height: 1.3;
  }
  .gm-drawer-toggle {
    grid-row: 1;
    grid-column: 1;
    height: 34px;
    padding: 0 13px 0 10px;
    font-size: 12px;
    box-shadow: none;
  }
  .gm-legend .gm-carrier-strip {
    grid-row: 1;
    grid-column: 2;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  .gm-legend .gm-carrier-fade {
    bottom: 0;
  }
  .gm-share-wrapper {
    grid-row: 1;
    grid-column: 3;
  }
  .gm-share-wrapper .gm-share-btn {
    width: 34px;
    height: 34px;
    background: #f1f3f4;
    box-shadow: none;
  }
  /* Rows below row 1: single-line strips spanning the full bar width.
     Centered while they fit, scrollable when they don't ("safe" keeps the
     leading content reachable under overflow instead of clipping it left).
     Placement is implicit — a brand page renders only the dBm row, and
     pinning it to row 3 would leave an empty row 2 behind. */
  .gm-legend .gm-freq-row,
  .gm-legend .gm-bdc-row {
    grid-column: 1 / -1;
    justify-content: safe center;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eef0f5;
  }
  .gm-legend .gm-freq-row::-webkit-scrollbar,
  .gm-legend .gm-bdc-row::-webkit-scrollbar {
    display: none;
  }
  .gm-legend .gm-freq-row > *,
  .gm-legend .gm-bdc-row > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .gm-logo {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    bottom: auto;
    right: auto;
    font-size: 12px;
    padding: 6px 14px;
  }
  .gm-content-summary {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  /* Mobile: bottom sheet. Grabber handle supports tap-to-close plus
     drag-down-to-dismiss / drag-up-to-expand (gesture logic in main.js;
     .dragging kills the transition while the finger moves the sheet). */
  .gm-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    max-height: 68vh;
    max-height: 68dvh;
    transform: translateY(100%);
    transition:
      transform 0.3s ease,
      max-height 0.3s ease,
      visibility 0.3s;
  }
  .gm-drawer.open {
    transform: none;
  }
  .gm-drawer.expanded {
    max-height: calc(94vh - env(safe-area-inset-top, 0px));
    max-height: calc(94dvh - env(safe-area-inset-top, 0px));
  }
  .gm-drawer.dragging {
    transition: none;
  }
  .gm-drawer-overlay.open {
    display: block;
  }
  .gm-drawer-chrome {
    height: auto;
    background: #fff;
    border-radius: 16px 16px 0 0;
  }
  .gm-drawer-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 0 8px;
    background: transparent;
    border: none;
    cursor: grab;
    touch-action: none;
  }
  .gm-drawer-handle-bar {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #d4d7dd;
  }
  .gm-drawer-close {
    display: none;
  }
  .gm-drawer-content {
    padding-top: 4px;
  }
  .gm-drawer-header {
    padding-right: 0;
  }
  .gm-footer {
    flex-direction: column;
    align-items: center;
    padding: 4px calc(8px + env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
    gap: 2px;
  }
  .gm-footer-seo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .gm-footer-links {
    justify-content: center;
    font-size: 10px;
  }
  .gm-footer-links a {
    padding: 0 5px;
  }
  .gm-footer-links a + a {
    border-left: 1px solid #ccc;
  }
  .gm-directory-panel {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    margin-top: 56px;
    padding: 16px;
  }
  .gm-directory-close {
    display: block;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .gm-directory-panel {
    width: 460px;
  }
}

/* ===== Search bar hover/focus states ===== */
.gm-search-bar:focus-within {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.gm-hamburger:hover {
  background-color: #f1f3f4;
  border-radius: 50%;
}

.gm-search-btn:hover {
  color: #012970;
}

/* Panel transitions */
.gm-panel {
  scrollbar-width: thin;
  scrollbar-color: #dadce0 transparent;
}

.gm-panel::-webkit-scrollbar {
  width: 6px;
}

.gm-panel::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 3px;
}

/* Bottom drawer scrollbar */
.gm-drawer {
  scrollbar-width: thin;
  scrollbar-color: #dadce0 transparent;
}

.gm-drawer::-webkit-scrollbar {
  width: 6px;
}

.gm-drawer::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 3px;
}

/* ===== Drawer content typography ===== */

/* H2 section headings — bold accent with left border */
.gm-drawer-content h2.card-title {
  font-size: 17px;
  font-weight: 700;
  color: #012970;
  padding: 0 0 0 12px;
  margin: 24px 0 12px;
  border-left: 4px solid #012970;
  line-height: 1.3;
}

/* H3 sub-headings — same accent style as H2 but smaller */
.gm-drawer-content h3 {
  font-size: 15px !important;
  font-weight: 700;
  color: #012970;
  padding: 0 0 0 12px;
  margin: 20px 0 10px;
  border-left: 4px solid #4154f1;
  line-height: 1.3;
}

/* Body paragraphs */
.gm-drawer-content p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 12px;
}

/* Bold keywords pop against lighter body */
.gm-drawer-content p strong {
  color: #012970;
  font-weight: 600;
}

/* Lists with bullets */
.gm-drawer-content ul,
.gm-seo-content ul {
  list-style: disc;
  padding-left: 24px;
  margin: 8px 0 16px;
}

.gm-drawer-content ul li,
.gm-seo-content ul li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.gm-drawer-content ul li strong {
  color: #012970;
}

/* FAQ section spacing */
.gm-drawer-faq {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e0e4ea;
}

/* SEO content section spacing */
.gm-drawer-seo-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e0e4ea;
}

/* Panel SEO content styling (legacy) */
.gm-seo-content .card-title {
  font-size: 16px;
  padding: 12px 0 8px 0;
}

.gm-seo-content .card-text {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}

.gm-seo-content .card-subtitle {
  font-size: 14px;
  margin-top: 12px;
}

/* Statistics rows */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f3f4;
  font-size: 14px;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  color: #666;
}

.stat-value {
  font-weight: 600;
  color: #012970;
  text-align: right;
}

/* Stats card wrapper */
.gm-stats-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
  border: 1px solid #e0e4ea;
}

/* FAQ-style cards in drawer */
.gm-drawer-faq .gm-stats-card {
}

.gm-stats-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #012970;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 14px 4px;
  margin: 0;
}

/* ===== Floating share button ===== */
.gm-share-wrapper {
  position: relative;
}
.gm-share-btn {
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition:
    background 0.2s,
    box-shadow 0.2s;
  color: #5f6368;
}
.gm-share-btn:hover {
  background: #f1f3f4;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.gm-share-menu {
  position: absolute;
  bottom: 52px;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 8px 0;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.gm-share-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.gm-share-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.gm-share-link:hover {
  background: #f1f3f4;
  color: #012970;
}
.gm-share-link svg {
  flex-shrink: 0;
}
.gm-share-divider {
  margin: 4px 12px;
  border: none;
  border-top: 1px solid #e0e4ea;
}
.gm-share-copied {
  color: #1b8a5a !important;
  font-weight: 600;
}

/* Logo hover */
.gm-logo:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Legend hover */
.gm-legend:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Smooth Leaflet map fill */
body.map-page .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}

/* Hide Folium default styling that conflicts */
body.map-page .folium-map {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0;
  left: 0;
}

/* Hide Leaflet top-left controls - they conflict with our floating search bar */
body.map-page .leaflet-top.leaflet-left {
  display: none !important;
}

/* Ensure map controls don't conflict with our floating UI */
body.map-page .leaflet-top.leaflet-left {
  top: 76px;
  left: 16px;
}

body.map-page .leaflet-bottom.leaflet-left {
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

body.map-page .leaflet-bottom.leaflet-right {
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  body.map-page .leaflet-top.leaflet-left {
    top: 12px;
    left: auto;
    right: 8px;
  }

  body.map-page .leaflet-bottom.leaflet-left {
    bottom: 100px;
  }
}