:root {
  --navbar-height: 68px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --color-bg: #f6f4f1;
  --color-surface: #ffffff;
  --color-text: #1c1917;
  --color-text-muted: #79726b;
  --color-border: #e8e3db;
  --color-accent: #d3541a;
  --color-accent-dark: #b8440f;
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 10px 24px rgba(28, 25, 23, 0.10);
  --radius-md: 10px;
  --radius-lg: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  /* vh is a fallback for browsers without dvh support; the dvh line below wins when supported.
     iOS Safari's vh is sized against the largest possible viewport (chrome collapsed), so content
     sized with plain vh ends up taller than what's actually visible and gets tucked behind the
     address bar / bottom toolbar. dvh tracks the real, currently-visible viewport instead. */
  height: 100vh;
  height: 100dvh;
  margin: 0;
}

body {
  /* Header sizes to its own content (min-height as a floor, so it can grow if the
     brand text wraps onto extra lines) and the row below fills whatever is left,
     rather than the row assuming a fixed header height. */
  display: flex;
  flex-direction: column;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

.container-fluid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.row {
  flex: 1 1 auto;
  min-height: 0;
  --bs-gutter-x: 0rem;
}

/* Header */

.site-header {
  flex: none;
  min-height: calc(var(--navbar-height) + var(--safe-top));
  padding-top: calc(var(--safe-top) + 0.5rem);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.site-logo {
  height: 40px;
  width: auto;
  flex: none;
}

.site-logo-mobile {
  display: none;
}

.site-brand-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-brand-tagline {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Sidebar */

#sidebar {
  overflow-y: auto;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  padding: 1.25rem;
}

.search-box {
  position: relative;
  margin-bottom: 0.6rem;
}

.search-box svg {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-input-control {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0.65rem 0.9rem 0.65rem 2.5rem;
  font-size: 0.9rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(211, 84, 26, 0.15);
  outline: none;
}

/* Category filter buttons (shared by the sidebar grid and the mobile rail) */

.category-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.category-btn-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--cat-color, var(--color-accent));
}

.category-btn-icon {
  display: flex;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.category-btn-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.category-btn.active {
  border-color: var(--cat-color, var(--color-accent));
}

.category-btn.active .category-btn-label,
.category-btn.active .category-btn-icon {
  color: var(--cat-color, var(--color-accent));
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.category-grid .category-btn {
  justify-content: center;
  padding: 0.55rem 0.3rem;
  box-shadow: var(--shadow-sm);
}

.category-grid .category-btn:hover {
  box-shadow: var(--shadow-md);
}

#results-count {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 0.3rem 0.1rem 0.7rem;
}

/* Business list */

.business-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.business-item {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--cat-color, var(--color-accent));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0.65rem 0.85rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.business-item:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.business-item.active {
  box-shadow: var(--shadow-md);
  border-color: var(--cat-color, var(--color-accent));
}

.business-item-featured {
  border-width: 2px;
  border-left-width: 4px;
}

.business-item .business-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.business-item .business-category {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 2.5rem 1rem;
}

/* Map */

.map-col {
  position: relative;
}

#map {
  height: 100%;
  width: 100%;
  background: var(--color-bg);
}

.category-rail {
  display: none;
}

.mobile-only-control {
  display: none;
}

.mobile-search-panel {
  display: none;
}

.biz-marker-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 5px rgba(28, 25, 23, 0.45);
  color: #ffffff;
}

.biz-marker-dot svg {
  width: 16px;
  height: 16px;
  display: block;
}

.biz-marker-featured {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24x;
  height: 24px;
}

.biz-marker-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #ebcb13;
  box-shadow: 0 1px 6px rgba(28, 25, 23, 0.45);
  pointer-events: none;
}

/* Popups */

.leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.leaflet-popup-content {
  margin: 0.9rem 1rem;
  font-family: inherit;
  line-height: 1.4;
  min-width: 190px;
}

.leaflet-popup-content h6 {
  font-family: 'Fraunces', Georgia, serif;
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.leaflet-popup-content .category-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.55rem;
}

.leaflet-popup-content small {
  display: block;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.leaflet-popup-tip {
  box-shadow: var(--shadow-sm);
}

.btn-directions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.btn-directions:hover {
  background: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
}

/* Leaflet controls */

.leaflet-control-icon-btn {
  font-size: 18px;
  line-height: 26px;
  text-align: center;
}

.leaflet-control-icon-btn.locating {
  opacity: 0.5;
  pointer-events: none;
}

.leaflet-bar {
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}

.leaflet-bar a {
  border-bottom: 1px solid var(--color-border) !important;
}

.leaflet-bar a:last-child {
  border-bottom: none !important;
}

@media (min-width: 768px) {
  /* Bootstrap's .row uses flex-wrap: wrap, which stops align-items:stretch from
     clipping #sidebar to the row's height once content is taller than the viewport
     (the wrapped line grows to fit content instead of the reverse). Giving #sidebar
     its own explicit height (100% of the now flex-bounded .row) sidesteps that and
     lets #business-list fill what's left below the search/filter/locate controls,
     scrolling independently of them. */
  #sidebar {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .business-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.2rem;
  }
}

@media (max-width: 767.98px) {
  #sidebar {
    display: none;
  }

  .site-logo-desktop {
    display: none;
  }

  .site-logo-mobile {
    display: block;
    height: 32px;
  }

  .category-rail {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: 210px;
    left: 10px;
    z-index: 1000;
  }

  .category-rail .category-btn {
    justify-content: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-md);
  }

  .mobile-only-control {
    display: block;
  }

  .mobile-search-panel.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    max-height: calc(100% - 20px);
    z-index: 1100;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 0.6rem 0.6rem;
    overflow: hidden;
  }

  .mobile-search-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .mobile-search-row .search-box {
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  .mobile-search-close {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .mobile-search-count {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin: 0.6rem 0.1rem 0.5rem;
  }

  .mobile-search-list {
    overflow-y: auto;
    min-height: 0;
    padding-right: 0.2rem;
  }
}