/* Stays & Tales — mapa Fruške gore */

.st-mapa-omot {
  margin: 2.2em 0;
  padding: 0;
}
.st-mapa-naslov {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .92rem;
  line-height: 1.5;
}
.st-mapa-naslov strong { display: block; color: var(--text-dark, #222); font-weight: 700; }
.st-mapa-naslov span   { display: block; color: var(--text-muted, #717171); font-size: .86rem; margin-top: 2px; }

.st-mapa {
  position: relative;
  width: 100%;
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  background: var(--bg-warm, #FAF8F5);
  font-family: var(--font-sans, system-ui, sans-serif);
}
.st-mapa .leaflet-container { font-family: inherit; background: var(--bg-warm, #FAF8F5); }

/* stanje pre učitavanja */
.st-mapa::after {
  content: "Mapa se učitava…";
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  color: var(--text-muted, #717171); font-size: .88rem;
  pointer-events: none;
}
.st-mapa.je-spremna::after { content: none; }
.st-mapa.je-greska::after { content: "Mapa trenutno ne može da se učita."; }

.st-mapa-noscript { margin: 0; padding: 24px; text-align: center; color: var(--text-muted, #717171); font-size: .88rem; }

.st-mapa-izvor {
  margin: 8px 2px 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .74rem;
  color: var(--text-muted, #8A7F76);
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
}
.st-mapa-izvor a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.st-mapa-izvor .st-mapa-puna { margin-left: auto; color: var(--accent, #B85D3B); font-weight: 600; text-decoration: none; }
.st-mapa-izvor .st-mapa-puna:hover { text-decoration: underline; }

/* široka varijanta — izlazi iz kolone teksta */
@media (min-width: 1000px) {
  .st-mapa-omot.je-siroka {
    width: min(1180px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- pribadače ---------- */
.st-pin {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 4px;
  transform: rotate(45deg);
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 2px 6px rgba(0,0,0,.32);
  display: grid; place-items: center;
}
.st-pin span { transform: rotate(-45deg); font-size: 12px; line-height: 1; color: #fff; }
.st-klaster div {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ---------- oblačić ---------- */
.st-mapa .leaflet-popup-content { margin: 12px 14px; font-size: .86rem; }
.st-pop-t { font-weight: 700; font-size: .95rem; margin-bottom: 2px; color: var(--text-dark, #222); }
.st-pop-m { color: var(--text-muted, #717171); font-size: .76rem; margin-bottom: 6px; }
.st-pop-l { font-size: .76rem; }
.st-pop-l a { color: var(--accent, #B85D3B); }

/* ---------- bočni panel ---------- */
.st-panel {
  position: absolute; top: 12px; right: 12px; z-index: 900;
  width: 262px; max-height: calc(100% - 24px);
  display: flex; flex-direction: column;
  background: var(--bg-white, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
}
.st-panel-glava { padding: 12px 14px 10px; border-bottom: 1px solid var(--border-subtle, #E5E7EB); }
.st-panel-glava p { margin: 0 0 8px; font-size: .74rem; color: var(--text-muted, #717171); }
.st-panel-glava input {
  width: 100%; padding: 7px 10px; font: inherit; font-size: .82rem;
  color: var(--text-dark, #222); background: var(--bg-warm, #FAF8F5);
  border: 1px solid var(--border-subtle, #E5E7EB); border-radius: 8px; outline: none;
}
.st-panel-glava input:focus { border-color: var(--accent, #B85D3B); }
.st-panel-lista { overflow: auto; padding: 6px 8px; }
.st-red {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 6px; border-radius: 8px; cursor: pointer; user-select: none;
}
.st-red:hover { background: var(--bg-warm, #FAF8F5); }
.st-red input { accent-color: var(--accent, #B85D3B); width: 15px; height: 15px; margin: 0; cursor: pointer; flex: none; }
.st-tacka { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; flex: none; }
.st-red .st-ime { flex: 1; font-size: .82rem; color: var(--text-dark, #222); }
.st-red .st-broj { font-size: .72rem; color: var(--text-muted, #717171); font-variant-numeric: tabular-nums; }
.st-panel-noga { padding: 8px 14px; border-top: 1px solid var(--border-subtle, #E5E7EB); font-size: .72rem; color: var(--text-muted, #717171); }

/* prekidač panela na uskim ekranima */
.st-panel-dugme {
  position: absolute; top: 12px; right: 12px; z-index: 901;
  display: none; align-items: center; gap: 6px;
  padding: 8px 12px; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--text-dark, #222); background: var(--bg-white, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB); border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); cursor: pointer;
}

@media (max-width: 720px) {
  .st-panel-dugme { display: inline-flex; }
  .st-panel { top: 56px; right: 12px; left: 12px; width: auto; max-height: calc(100% - 72px); }
  .st-panel[hidden] { display: none; }
}

/* rezultati pretrage */
.st-nalaz { padding: 4px 6px 8px; }
.st-nalaz button {
  display: block; width: 100%; text-align: left;
  padding: 6px 8px; margin: 0 0 3px;
  font: inherit; font-size: .82rem; color: var(--text-dark, #222);
  background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.st-nalaz button:hover { background: var(--bg-warm, #FAF8F5); }
.st-nalaz .st-prazno { padding: 6px 8px; font-size: .8rem; color: var(--text-muted, #717171); }