/* ==========================================================================
   Where to Ride — map, list, popups, submit-a-spot form
   ========================================================================== */

.map-legend{
  display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0 0;
  font-size: 0.85rem; color: var(--foam-dim);
}
.map-legend span{ display: inline-flex; align-items: center; gap: 8px; }
.map-legend .spot-pin{ flex-shrink: 0; }

.wtr-layout{
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 20px; margin: 32px 0 40px;
}
@media (max-width: 900px){ .wtr-layout{ grid-template-columns: 1fr; } }

#spotsMap{
  position: relative; z-index: 0;
  height: 560px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--ink-2);
}
@media (max-width: 900px){ #spotsMap{ height: 420px; } }
.map-error{ padding: 24px; color: var(--foam-dim); }

.spots-list-panel{
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; max-height: 560px;
}
@media (max-width: 900px){ .spots-list-panel{ max-height: 420px; } }
.spots-list-header{
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--teal);
}
.spots-list{ list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }

.spot-list-item{
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px;
  border-radius: 10px; cursor: pointer; transition: background 0.15s;
}
.spot-list-item:hover, .spot-list-item:focus-visible{ background: var(--ink-3); outline: none; }
.spot-list-item.is-active{ background: var(--ink-3); box-shadow: inset 3px 0 0 var(--coral); }
.spot-list-item-pin{ margin-top: 4px; flex-shrink: 0; }
.spot-list-item-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spot-list-item-name{ font-weight: 700; font-size: 0.94rem; color: var(--foam); }
.spot-list-item-meta{ font-size: 0.82rem; color: var(--foam-faint); }

/* ---------- pins (shared between map + list) ---------- */
.spot-pin{
  display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
}
.spot-pin--verified{ background: var(--coral); border: 2px solid var(--ink); }
.spot-pin--community{ background: transparent; border: 2px solid var(--coral); }
.spot-pin-wrapper .spot-pin{ width: 18px; height: 18px; box-shadow: 0 0 0 2px rgba(6,35,44,0.6); }

/* ---------- Leaflet overrides ---------- */
.leaflet-popup-content-wrapper{
  background: var(--ink-2); color: var(--foam); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.leaflet-popup-tip{ background: var(--ink-2); }
.leaflet-popup-content{ margin: 16px 18px; line-height: 1.5; }
.leaflet-popup-close-button{ color: var(--foam-dim) !important; }
.leaflet-popup-close-button:hover{ color: var(--foam) !important; }
.leaflet-container{ font-family: var(--font-body); }
.leaflet-control-attribution{ background: rgba(6,35,44,0.75) !important; color: var(--foam-faint) !important; }
.leaflet-control-attribution a{ color: var(--foam-dim) !important; }
.leaflet-control-zoom a{
  background: var(--ink-2) !important; color: var(--foam) !important; border-color: var(--line) !important;
}
.leaflet-control-zoom a:hover{ background: var(--ink-3) !important; }

@media (max-width: 640px){
  .leaflet-control-zoom a{
    width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 20px !important;
  }
}

.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large{
  background-color: rgba(47,209,197,0.28);
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div{
  background-color: var(--teal);
}
.marker-cluster span{ color: var(--ink); font-weight: 700; }

.spot-popup h3{ font-size: 1.1rem; margin: 8px 0 6px; color: var(--foam); }
.spot-popup-location{ font-size: 0.85rem; color: var(--foam-faint); margin: 0 0 10px; }
.spot-popup-badges{ display: flex; gap: 6px; flex-wrap: wrap; }
.spot-badge{
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
}
.spot-badge--verified{ background: var(--coral); color: var(--ink); }
.spot-badge--community{ background: transparent; border: 1px solid var(--coral); color: var(--coral); }
.spot-badge--locals{ background: var(--ink-3); color: var(--teal); border: 1px solid var(--teal); }
.spot-popup-facts{ margin: 10px 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.85rem; }
.spot-popup-facts dt{ color: var(--foam-faint); font-weight: 600; }
.spot-popup-facts dd{ margin: 0; color: var(--foam-dim); }
.spot-popup-desc{ font-size: 0.88rem; margin: 8px 0 0; color: var(--foam-dim); }
.spot-popup-source{ font-size: 0.76rem; font-style: italic; color: var(--foam-faint); margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }

.spot-popup-wind{ margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.spot-popup-wind-label{
  margin: 0 0 8px; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--teal);
}
.spot-popup-wind-frame{
  position: relative; width: 100%; padding-bottom: 68%; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
}
.spot-popup-wind-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.spot-popup-wind-attribution{ font-size: 0.72rem; color: var(--foam-faint); margin: 6px 0 0; }

/* ---------- Submit a Spot ---------- */
.submit-spot{ margin: 8px 0 40px; }
.submit-spot-note{ margin: 0 0 20px; font-size: 0.92rem; color: var(--foam-dim); max-width: 640px; }

body.modal-open{ overflow: hidden; }
.submit-spot-modal{
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.submit-spot-modal[hidden]{ display: none; }
.submit-spot-modal-backdrop{
  position: absolute; inset: 0; background: rgba(6,35,44,0.82); backdrop-filter: blur(4px);
}
.submit-spot-modal-dialog{
  position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 90vh;
  overflow-y: auto; background: var(--ink-2); border: 1px solid var(--line);
  border-top: 2px solid var(--teal); border-radius: var(--radius); padding: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  animation: submitSpotModalIn 0.18s ease;
}
@keyframes submitSpotModalIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
.submit-spot-modal-header{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.submit-spot-modal-eyebrow{ margin-bottom: 6px; }
.submit-spot-modal-title{ margin: 0; font-size: 1.3rem; }
.submit-spot-modal-close{
  flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--foam-dim); font-size: 1.6rem; line-height: 1;
  cursor: pointer; border-radius: 8px; transition: color 0.15s, background 0.15s;
}
.submit-spot-modal-close:hover{ color: var(--foam); background: var(--ink-3); }
.submit-spot-modal-dialog iframe{
  display: block; width: 100%; border: none !important; border-radius: 10px;
}