/* ========== Destinations panel ==========
   Rows reuse .filter-section from styles.css so this reads as the same family
   as the Explore panel rather than a third design. */

.destination-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.destination-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Same box as a category row, without the icon slot. */
.destination-toggle {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--brand);
}

.destination-section .filter-row-title {
  font-size: 0.92rem;
}

/* Sits in .panel-sticky-actions at the top of the panel, which owns the
   spacing - hence no margin of its own. */
.destination-clear {
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  min-height: var(--tap-target);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.destination-clear:hover {
  background: rgba(0, 119, 190, 0.06);
  border-color: rgba(0, 119, 190, 0.3);
}

.destination-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------- Zones ----------
   The 13 BOM coastal zones, each holding its destinations behind the same
   disclosure the Explore panel's boat-ramp filters use. */

.destination-zones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.destination-zone-toggle {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--brand);
}

.destination-zone-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.destination-zone-range {
  font-size: 0.72rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--muted);
}

/* Listed so the coast the map will eventually cover is visible, but nothing to
   select: an empty zone would only hide every pin. */
.destination-zone--empty {
  opacity: 0.5;
}

.destination-zone--empty:hover {
  border-color: var(--line);
}

.destination-zone--empty .destination-zone-toggle,
.destination-zone--empty .filter-row-label {
  cursor: default;
}

/* The shared .section-body caps at 600px, which the eight Moreton Bay rows
   would clip. */
.destination-zone.open .section-body {
  max-height: 900px;
}

.destination-zone .section-body .destination-list {
  padding-top: 10px;
}

/* Nested one level in, on a plain background, so the children read as contents
   of the zone rather than as more zones. */
.destination-section {
  background: #fff;
}

.destination-section .filter-row {
  min-height: 40px;
  padding-left: 10px;
}