/* SFL map: layout, pins, popup, side list. Works with or without the theme's CSS variables. */

.sfl-map-block {
  --sfl-red: var(--red, #B22234);
  --sfl-blue: var(--blue, #3C3B6E);
  --sfl-ink: var(--ink, #1B2340);
  --sfl-muted: var(--muted, #5C6378);
  --sfl-line: var(--line, #E5DCC9);
  --sfl-surface: var(--surface, #FFFDF8);
  --sfl-bg: var(--bg, #FAF6EC);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  color: var(--sfl-ink);
}
.sfl-map-block--list {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .sfl-map-block--list { grid-template-columns: minmax(0, 1fr); }
}
.sfl-map-main { min-width: 0; }

/* Toolbar: legend left, buttons right */
.sfl-map-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 0 2px 10px;
}
.sfl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; color: var(--sfl-muted); }
.sfl-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.sfl-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #B22234;
  background: #B22234;
}
.sfl-dot--ticketed { background: #3C3B6E; border-color: #3C3B6E; }
.sfl-dot--street { background: #FFFFFF; border-color: #B22234; }
.sfl-dot--closed { background: #8A8F9C; border-color: #8A8F9C; }

.sfl-map-near,
.sfl-map-reset {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid var(--sfl-red);
}
.sfl-map-near { background: var(--sfl-red); color: #FFFFFF; margin-left: auto; }
.sfl-map-reset { background: transparent; color: var(--sfl-ink); border-color: var(--sfl-blue); }
.sfl-map-near:disabled { opacity: 0.6; cursor: progress; }
.sfl-map-near:focus-visible,
.sfl-map-reset:focus-visible,
.sfl-loc:focus-visible,
.sfl-popup__link:focus-visible {
  outline: 3px solid var(--sfl-red);
  outline-offset: 2px;
}
.sfl-map-reset[hidden] { display: none; }

/* The map canvas */
.sfl-map {
  position: relative;
  z-index: 0;
  isolation: isolate; /* keeps Leaflet's high z-index panes under sticky headers and the bottom bar */
  width: 100%;
  min-height: 200px;
  border: 1px solid var(--sfl-line, #E5DCC9);
  border-radius: 10px;
  overflow: hidden;
  background: #F2EBDC;
}
@media (max-width: 860px) {
  .sfl-map { height: min(var(--sfl-h, 420px), 360px) !important; }
}
.sfl-map-status {
  min-height: 1.3em;
  margin: 8px 2px 0;
  font-size: 0.85rem;
  color: var(--sfl-muted);
}

/* Pins */
.sfl-divicon { background: transparent; border: 0; }
.sfl-pin {
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: 3px;
  border-radius: 50%;
  border: 3px solid #B22234;
  background: #B22234;
  box-shadow: 0 0 0 2px #FFFDF8, 0 2px 5px rgba(27, 35, 64, 0.35);
  transition: transform 120ms ease;
}
.sfl-pin--ticketed { background: #3C3B6E; border-color: #3C3B6E; }
.sfl-pin--street { background: #FFFFFF; border-color: #B22234; }
.sfl-pin--closed,
.sfl-pin--unknown { background: #8A8F9C; border-color: #8A8F9C; }
.sfl-pin--on { transform: scale(1.35); border-color: #1B2340; }
.leaflet-marker-icon:focus-visible {
  outline: 3px solid #B22234;
  outline-offset: 2px;
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  .sfl-pin { transition: none; }
}

/* Access chips */
.sfl-access {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
}
.sfl-access--public { background: #B22234; color: #FFFFFF; }
.sfl-access--ticketed { background: #3C3B6E; color: #FFFFFF; }
.sfl-access--street { border: 1.5px solid #B22234; color: #1B2340; background: transparent; }
.sfl-access--closed,
.sfl-access--unknown { background: #5C6378; color: #FFFFFF; }

/* Popup */
.sfl-popup { display: grid; gap: 6px; font-size: 0.9rem; line-height: 1.4; color: #1B2340; }
.sfl-popup__name { font-size: 1rem; }
.sfl-popup__where { color: #5C6378; }
.sfl-popup__lead { font-weight: 700; }
.sfl-popup__link { font-weight: 700; color: #3C3B6E; text-decoration: underline; text-decoration-color: #B22234; text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* Side list */
.sfl-map-list {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
}
.sfl-map-list:empty { display: none; }
.sfl-map-list[hidden] { display: none; }
@media (max-width: 900px) {
  .sfl-map-list { max-height: 520px; }
}
.sfl-loc {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--sfl-surface);
  border: 1px solid var(--sfl-line);
  border-radius: 10px;
  padding: 12px 14px;
}
.sfl-loc[hidden] { display: none; }
.sfl-loc:hover,
.sfl-loc.is-on {
  border-color: var(--sfl-red);
  box-shadow: inset 4px 0 0 var(--sfl-red);
}
.sfl-loc__name { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.sfl-loc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.86rem; color: var(--sfl-muted); }
.sfl-loc__dist {
  font-family: var(--font-mono, "Courier New", Courier, monospace);
  font-size: 0.78rem;
  color: var(--sfl-muted);
  font-variant-numeric: tabular-nums;
}
.sfl-loc__dist[hidden] { display: none; }

/* Location editor (wp-admin) */
.sfl-admin-map { height: 300px; max-width: 720px; border: 1px solid #c3c4c7; background: #F2EBDC; }
.sfl-meta-table > tbody > tr > th { width: 180px; }
.sfl-multi { min-width: 320px; max-width: 100%; }
.sfl-scenes-list { display: grid; gap: 6px; }
.sfl-scene-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: 6px;
  align-items: center;
}
@media (max-width: 782px) {
  .sfl-scene-row { grid-template-columns: minmax(0, 1fr); }
}