/* 
 * Choozin Farm Customer Core (Module 1) — Modern Edge Design System
 * UI UX Pro Max compliant — Dark & Light themes with glassmorphism
 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap');

:root {
  /* Dark Theme Palette (Default) */
  --color-background: #090d16;
  --color-surface: #0f172a;
  --color-secondary: #1e293b;
  --color-secondary-hover: #273549;
  --color-foreground: #f8fafc;
  --color-muted: #94a3b8;
  --color-border: #334155;
  --color-border-subtle: rgba(255, 255, 255, 0.08);

  /* Choozin Brand Identity */
  --color-primary: #fab72b;       /* Choozin Gold */
  --color-primary-hover: #e0a325;
  --color-primary-glow: rgba(250, 183, 43, 0.25);
  --color-accent: #10b981;        /* Edge Emerald */
  --color-info: #38bdf8;          /* Sky Blue */
  --color-danger: #ef4444;

  /* Typography */
  --font-heading: 'Outfit', 'Prompt', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Prompt', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Metrics & Layout */
  --topbar-height: 56px;
  --sidebar-width: 420px;
  --sidebar-collapsed-width: 76px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --glass-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --hover-bg: rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] {
  --color-background: #f1f5f9;
  --color-surface: #ffffff;
  --color-secondary: #f8fafc;
  --color-secondary-hover: #e2e8f0;
  --color-foreground: #0f172a;
  --color-muted: #64748b;
  --color-border: #cbd5e1;
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --color-primary-glow: rgba(250, 183, 43, 0.35);
  --glass-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --hover-bg: rgba(0, 0, 0, 0.04);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-foreground);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Custom Webkit Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}

/* -------------------------------------------------------------------------- */
/* Top Header Banner                                                          */
/* -------------------------------------------------------------------------- */
.chz-topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 50;
  flex-shrink: 0;
}

.chz-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chz-brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
}

.chz-brand-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-foreground);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chz-badge-edge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-accent);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chz-badge-edge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
}

.chz-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chz-status-pill {
  font-size: 12px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-secondary);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
}

/* Theme Switch (Strong Squid) */
.chz-theme-container {
  display: flex;
  align-items: center;
}

.theme-switch {
  --toggle-size: 8px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-block;
  cursor: pointer;
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-night-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}

.theme-switch__checkbox { display: none; }

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
}

.theme-switch__moon {
  transform: translate(0);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
.theme-switch__spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -4.062em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: 50%;
  transform: translateY(-50%);
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-light-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: var(--circle-container-offset);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translateX(100%);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -0.625em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: -100%;
}

/* -------------------------------------------------------------------------- */
/* Main Layout & Sliding Drawer                                               */
/* -------------------------------------------------------------------------- */
.chz-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
  position: relative;
}

.chz-layout.sidebar-right {
  flex-direction: row-reverse;
}

.chz-sidebar-window {
  width: var(--sidebar-width);
  height: 100%;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  box-shadow: var(--glass-shadow);
  transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.chz-layout.sidebar-right .chz-sidebar-window {
  border-right: none;
  border-left: 1px solid var(--color-border);
}

.chz-sidebar-window.collapsed {
  width: var(--sidebar-collapsed-width);
}
.chz-sidebar-window.collapsed .chz-panel {
  width: var(--sidebar-collapsed-width);
}
.chz-sidebar-window.collapsed .hide-on-collapse {
  display: none !important;
}
.chz-sidebar-window.collapsed .chz-directory-header {
  padding: 16px 8px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border-bottom: none !important;
  overflow-y: auto !important;
}
.chz-sidebar-window.collapsed .header-top-row {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.chz-sidebar-window.collapsed .header-actions {
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
.chz-sidebar-window.collapsed #day-pills {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  padding: 0 !important;
  width: 100% !important;
  align-items: center !important;
}
.chz-sidebar-window.collapsed #day-pills .filter-pill {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  flex: 0 0 44px !important;
}

.chz-sidebar-slider {
  display: flex;
  width: calc(var(--sidebar-width) * 2);
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(0);
}

.chz-sidebar-slider.show-details {
  transform: translateX(calc(-1 * var(--sidebar-width)));
}

.chz-panel {
  width: var(--sidebar-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
}

/* -------------------------------------------------------------------------- */
/* Directory Header & Filters                                                 */
/* -------------------------------------------------------------------------- */
.chz-directory-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.directory-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.directory-stats-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-foreground);
}

.directory-stats-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-glow);
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(250, 183, 43, 0.3);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-sm);
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-icon:hover {
  color: var(--color-foreground);
  background: var(--color-secondary-hover);
  border-color: var(--color-foreground);
}

.btn-icon.active {
  background: var(--color-primary);
  color: #090d16;
  border-color: var(--color-primary);
}

/* Search input */
.search-wrapper {
  position: relative;
  width: 100%;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}

.chz-search-input {
  width: 100%;
  padding: 9px 36px 9px 38px;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
  border-radius: var(--border-radius-sm);
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.chz-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Cascading Location Selects */
.chz-advanced-filters {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chz-advanced-filters.expanded {
  max-height: 180px;
  opacity: 1;
  padding-top: 4px;
}

.chz-select {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
  border-radius: var(--border-radius-sm);
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s;
  cursor: pointer;
}

.chz-select:focus {
  border-color: var(--color-primary);
}

/* Filter Pills Container */
.filter-pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-secondary);
  color: var(--color-muted);
  transition: all 0.2s ease;
  user-select: none;
}

.filter-pill:hover {
  border-color: var(--color-foreground);
  color: var(--color-foreground);
}

.filter-pill.active[data-day="All"] { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }
.filter-pill.active[data-day="Sun"] { background: rgba(248, 113, 113, 0.15); color: #f87171; border-color: #f87171; }
.filter-pill.active[data-day="Mon"] { background: rgba(250, 204, 21, 0.15); color: #facc15; border-color: #facc15; }
.filter-pill.active[data-day="Tue"] { background: rgba(244, 114, 182, 0.15); color: #f472b6; border-color: #f472b6; }
.filter-pill.active[data-day="Wed"] { background: rgba(74, 222, 128, 0.15); color: #4ade80; border-color: #4ade80; }
.filter-pill.active[data-day="Thu"] { background: rgba(251, 146, 60, 0.15); color: #fb923c; border-color: #fb923c; }
.filter-pill.active[data-day="Fri"] { background: rgba(96, 165, 250, 0.15); color: #60a5fa; border-color: #60a5fa; }
.filter-pill.active[data-day="Sat"] { background: rgba(192, 132, 252, 0.15); color: #c084fc; border-color: #c084fc; }

/* Route Pills */
.route-pill {
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.route-pill.mode-1 {
  background-color: var(--r-bg) !important;
  color: var(--r-color) !important;
  border-color: var(--r-border) !important;
  opacity: 1 !important;
  cursor: pointer;
}
.route-pill.mode-1 .pill-dot {
  background-color: var(--r-color) !important;
}
.route-pill.mode-2 {
  background-color: transparent !important;
  color: var(--r-color) !important;
  border-color: var(--r-color) !important;
  opacity: 1 !important;
}
.route-pill.mode-2 .pill-dot {
  background-color: var(--r-color) !important;
}
.route-pill.mode-3 {
  background-color: var(--color-secondary) !important;
  color: var(--r-color) !important;
  border-color: transparent !important;
  opacity: 0.9 !important;
}
.route-pill.mode-3 .pill-dot {
  background-color: var(--r-color) !important;
}
.route-pill.disabled {
  background-color: var(--color-secondary) !important;
  color: var(--color-muted) !important;
  border-color: transparent !important;
  opacity: 0.55 !important;
  cursor: default;
}
.route-pill.disabled .pill-dot {
  background-color: var(--color-muted) !important;
}

/* -------------------------------------------------------------------------- */
/* Customer Directory List                                                    */
/* -------------------------------------------------------------------------- */
.chz-directory-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chz-shop-card {
  padding: 14px 16px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: all 0.2s ease;
  position: relative;
}

.chz-shop-card:hover {
  border-color: var(--color-primary);
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chz-shop-card.active {
  border-color: var(--color-primary);
  background: rgba(250, 183, 43, 0.08);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.shop-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.shop-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-foreground);
  line-height: 1.4;
}

.shop-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
}

.shop-id {
  font-family: var(--font-mono);
  color: var(--color-muted);
  font-size: 11px;
}

.shop-location-snippet {
  color: var(--color-muted);
  font-size: 11px;
}

/* -------------------------------------------------------------------------- */
/* Details Panel                                                              */
/* -------------------------------------------------------------------------- */
.chz-details-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-back {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-back:hover {
  background: var(--color-foreground);
  color: var(--color-background);
}

.chz-details-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-group {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 16px;
}

.detail-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.detail-value-large {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-foreground);
  margin-bottom: 4px;
}

.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-action-primary {
  flex: 1;
  background: var(--color-primary);
  color: #090d16;
  border: none;
  padding: 8px 14px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-action-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* -------------------------------------------------------------------------- */
/* Fullscreen Map Canvas & Markers                                            */
/* -------------------------------------------------------------------------- */
.chz-main {
  flex: 1;
  height: 100%;
  position: relative;
  background: var(--color-background);
}

#map {
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Fullscreen Loader */
#loader {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(9, 13, 22, 0.85);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.3s ease;
}

.loader-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(250, 183, 43, 0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: chz-spin 0.8s linear infinite;
}

@keyframes chz-spin {
  to { transform: rotate(360deg); }
}

.loader-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 16px 28px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--glass-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* Leaflet Cluster Bubbles */
.chz-cluster {
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(250, 183, 43, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  color: #f8fafc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  transition: transform 0.2s ease, border-color 0.2s;
}

.chz-cluster:hover {
  transform: scale(1.1);
  border-color: var(--color-primary);
}

/* Custom Leaflet Tooltip */
.leaflet-tooltip.chz-tooltip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--glass-shadow);
  padding: 8px 12px;
  font-family: var(--font-body);
}
.leaflet-tooltip.chz-tooltip::before {
  border-top-color: var(--color-border);
}

/* Custom Pin Animation */
.custom-pin {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-pulse {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-pulse::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  opacity: 0.6;
  animation: pin-wave 1.6s ease-out infinite;
}

@keyframes pin-wave {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}