/* Точечные стили, которые неудобно выражать утилитами Tailwind:
   метки на карте, кластеры, попапы Leaflet, скроллбар, мобильная шторка. */

:root {
  --pin-sell: #047857;   /* emerald-700 — продажа */
  --pin-buy:  #b45309;   /* amber-700  — спрос */
}

html { scroll-behavior: smooth; }

/* ——— Метки-«ценники» ——— */
.agro-pin-wrap { width: 0 !important; height: 0 !important; }

.agro-pin {
  position: absolute;
  transform: translate(-50%, calc(-100% - 9px));
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 5px;
  border-radius: 9px;
  background: #fff;
  border: 1.5px solid var(--pin-color, var(--pin-sell));
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.18);
  font: 600 11.5px/1.1 ui-sans-serif, system-ui, sans-serif;
  color: #0f172a;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.agro-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1.5px solid var(--pin-color, var(--pin-sell));
  border-bottom: 1.5px solid var(--pin-color, var(--pin-sell));
  transform: translateX(-50%) rotate(45deg);
  border-bottom-right-radius: 2px;
}
.agro-pin__ico { font-size: 13px; line-height: 1; }
.agro-pin__price { letter-spacing: -0.01em; }

.pin-sell { --pin-color: var(--pin-sell); }
.pin-buy  { --pin-color: var(--pin-buy); }
.pin-buy .agro-pin__price { color: #92400e; }

.agro-pin:hover,
.agro-pin.is-active {
  transform: translate(-50%, calc(-100% - 13px)) scale(1.06);
  box-shadow: 0 10px 22px rgb(15 23 42 / 0.26);
  z-index: 1000;
}
.agro-pin.is-active { background: #ecfdf5; }
.pin-buy.is-active  { background: #fffbeb; }

/* ——— Кластеры ——— */
.agro-cluster-wrap { background: transparent; }
.agro-cluster {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgb(5 150 105 / 0.92);
  color: #fff;
  font: 700 13px/1 ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 0 0 6px rgb(5 150 105 / 0.18), 0 4px 12px rgb(15 23 42 / 0.2);
  transition: box-shadow .15s ease;
}
.agro-cluster:hover { box-shadow: 0 0 0 10px rgb(5 150 105 / 0.22), 0 6px 16px rgb(15 23 42 / 0.28); }

/* ——— Popup ——— */
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 12px 32px rgb(15 23 42 / 0.18);
  padding: 4px;
}
.leaflet-popup-content { margin: 12px 14px; width: auto !important; }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-container { font-family: ui-sans-serif, system-ui, sans-serif; }
.leaflet-container a.leaflet-popup-close-button { top: 6px; right: 6px; color: #94a3b8; }

/* ——— Скроллбар списка ——— */
.thin-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.thin-scroll::-webkit-scrollbar { width: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* ——— Мобильная шторка со списком на странице карты ——— */
@media (max-width: 1023px) {
  #map-panel {
    position: absolute;
    inset: auto 0 0 0;
    height: 78vh;
    transform: translateY(calc(100% - 3.5rem));
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgb(15 23 42 / 0.18);
    z-index: 800;
  }
  #map-panel.panel-open { transform: translateY(0); }
}

/* ——— График котировок ——— */
.viz-root {
  --surface-1: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #52514e;
  --grid: #e2e8f0;
}
.viz-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-dot { r: 4.5; stroke: var(--surface-1); stroke-width: 2; }
.viz-crosshair { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 3 3; }