/* ============================================================
   verkooppunten.css — PAGE-SPECIFIC layer for /verkooppunten/,
   loaded via the master's `contentCss` option AFTER css/master.css.

   Holds ONLY the map + list components and the Leaflet dark theming.
   Tokens, chrome (preloader, bar, menu, guide, footer, .ask) and the
   `.intro`/`.lead` page-opener come from master.css — do NOT redefine
   them here. The `.leaflet-*` overrides win over Leaflet's own
   stylesheet via the `.leaflet-container` prefix (higher specificity),
   regardless of load order.
============================================================ */

/* ── map + list layout ─────────────────────────────────── */
.vk {
  padding: clamp(8px, 1.5vh, 16px) var(--gutter) clamp(40px, 7vh, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(20px, 2.5vw, 36px); align-items: start;
}
@media (max-width: 900px) { .vk { grid-template-columns: 1fr; } }

.vk-map-wrap {
  position: relative; border: 1px solid var(--line-dark); border-radius: 4px;
  overflow: hidden; background: var(--ink-2);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.vk-map, .vk-map-wrap iframe {
  display: block; width: 100%; height: clamp(380px, 64vh, 640px); border: 0;
}
.vk-map { background: var(--ink-2); }

/* Leaflet dark theming — prefixed with .leaflet-container so these win over
   Leaflet's own stylesheet, which loads after this block. */
.leaflet-container { background: #0f0e0b !important; font-family: var(--sans); }
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:hover {
  background: var(--ink-2); color: var(--cream); border-bottom-color: var(--line-dark);
}
.leaflet-container .leaflet-bar a:hover { background: #221f17; }
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip { background: var(--cream); color: var(--ink); }
.leaflet-container .leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-container .leaflet-popup-content { margin: 12px 14px; }
.leaflet-container .leaflet-control-attribution {
  background: rgba(15,14,11,0.82) !important; color: rgba(244,239,227,0.55) !important;
}
.leaflet-container .leaflet-control-attribution a { color: rgba(244,239,227,0.8) !important; }

/* dark info window: tame the default white bubble */
.gm-style .gm-style-iw,
.gm-style .gm-style-iw-c { padding: 0 !important; }
.vk-iw { font-family: var(--sans); color: var(--ink); padding: 4px 6px 6px; max-width: 230px; }
.vk-iw-name { font-weight: 700; font-size: 0.98rem; line-height: 1.25; }
.vk-iw-desc { margin-top: 4px; font-size: 0.82rem; color: rgba(15,14,11,0.7); line-height: 1.4; }
.vk-iw-link {
  display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #8a7600; text-decoration: none;
}
.vk-iw-link:hover { text-decoration: underline; }

/* list panel */
.vk-list-head {
  display: flex; align-items: baseline; gap: 14px;
  border-top: 1px solid var(--line-dark); padding-top: 16px; margin-bottom: 6px;
}
.vk-list-head .num { font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--gold); }
.vk-list-head h2 {
  margin: 0; font-family: var(--sans); font-weight: 400; font-size: var(--fs-h2);
  text-transform: none; letter-spacing: -0.01em;
}
.vk-count { margin-left: auto; font-size: var(--fs-label); color: rgba(244,239,227,0.45); }
.vk-list {
  list-style: none; margin: 0; padding: 0;
  max-height: clamp(380px, 64vh, 640px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(244,239,227,0.2) transparent;
}
.vk-list li { border-bottom: 1px solid var(--line-dark); }
.vk-list button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--cream);
  padding: 13px 4px 13px 0; transition: padding-left 0.25s var(--ease), color 0.2s;
}
.vk-list button:hover, .vk-list button:focus-visible, .vk-list button.is-hover { color: var(--gold); padding-left: 8px; outline: none; }
.vk-list button.is-active { color: var(--gold); padding-left: 8px; }
.vk-list .dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); border: 1px solid rgba(15,14,11,0.5);
  box-shadow: 0 0 0 3px rgba(255,217,0,0.12);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.vk-list button.is-active .dot,
.vk-list button.is-hover .dot,
.vk-list button:hover .dot { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(255,217,0,0.28); }
.vk-list .vk-list-name { font-size: 0.98rem; line-height: 1.25; }

.vk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
/* The buttons inside are the shared pill — see css/button.css, which lists `.vk-actions a`
   among its aliases. This file keeps only what is unique to the map page. */