/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 .85rem;
  border: 1px solid var(--border); border-radius: 50px;
  background: transparent; color: var(--text-secondary);
  font-family: 'Outfit', sans-serif; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
.pagination__btn:hover:not(.active):not(.disabled) {
  background: var(--card-bg); color: var(--text); border-color: var(--text-secondary);
}
.pagination__btn.active {
  background: var(--green-600); border-color: var(--green-600); color: #fff;
}
.pagination__btn.disabled { opacity: .35; cursor: default; pointer-events: none; }
.pagination__btn--arrow { padding: 0; width: 44px; }

/* ===== CATALOG LAYOUT (Filter Sidebar + Grid) ===== */
.catalog-layout {
  position: relative;
  padding-left: calc(280px + 2rem);
}
.section:has(.catalog-layout) { padding-top: 1.5rem; padding-left: 1rem; padding-right: 1rem; overflow: visible; }
.container:has(.catalog-layout) { max-width: 1400px; z-index: auto; }

/* Sidebar track — not used on desktop, used as drawer wrapper on mobile */
.sidebar-track {
  display: contents;
}

/* --- Filter Sidebar --- */
.filter-sidebar {
  position: fixed;
  top: 100px;
  left: -9999px;
  width: 280px;
  z-index: 100;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  background: var(--card-bg);
  border-radius: 1rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  will-change: top;
}
.filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.filter-sidebar__header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.filter-sidebar__close {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: .25rem;
}
.filter-sidebar__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--green-500) transparent;
}
.filter-sidebar__footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
}
.filter-sidebar__clear {
  width: 100%;
  padding: .5rem 1.25rem;
  background: rgba(5,150,105,.08);
  border: 1px solid rgba(5,150,105,.2);
  border-radius: 50px;
  color: var(--green-600);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}
.filter-sidebar__clear:hover {
  background: var(--green-600);
  color: #ffffff;
  transform: translateY(-1px);
  border-color: var(--green-600);
  box-shadow: 0 4px 15px rgba(5,150,105,.3);
}
[data-theme="dark"] .filter-sidebar__clear { background: rgba(52,211,153,.1); color: var(--green-400); border-color: rgba(52,211,153,.2); }
[data-theme="dark"] .filter-sidebar__clear:hover { background: var(--green-500); color: #0f1419; border-color: var(--green-500); }

/* Filter group */
.filter-group {
  border-bottom: 1px solid var(--border);
}
.filter-group:last-child { border-bottom: none; }
.filter-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .85rem 1.25rem;
  background: none;
  border: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: color .2s;
}
.filter-group__toggle:hover { color: var(--green-600); }
.filter-group__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform .25s;
  color: var(--text-muted);
}
.filter-group.collapsed .filter-group__toggle svg {
  transform: rotate(-90deg);
}
.filter-group__content {
  padding: 0 1.25rem .85rem;
}
.filter-group.collapsed .filter-group__content {
  display: none;
}

/* Checkbox items */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  cursor: pointer;
  font-size: .85rem;
  color: var(--text);
  transition: color .15s;
}
.filter-checkbox:hover { color: var(--green-600); }
.filter-checkbox input[type="checkbox"],
.filter-checkbox input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all .2s;
}
.filter-checkbox input[type="radio"] { border-radius: 50%; }
.filter-checkbox input:checked {
  background: var(--green-600);
  border-color: var(--green-600);
}
.filter-checkbox input:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-checkbox input[type="radio"]:checked::after {
  top: 3px; left: 3px;
  width: 8px; height: 8px;
  border: none;
  border-radius: 50%;
  background: #fff;
  transform: none;
}
.filter-checkbox__label { flex: 1; }
.filter-checkbox__count {
  font-size: .78rem;
  color: var(--text-muted);
  opacity: .7;
}

/* --- Catalog Main --- */
.catalog-main {
  min-width: 0;
  min-height: calc(100vh - 200px);
}

/* --- Topbar --- */
.catalog-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.catalog-topbar__search {
  flex: 1;
  min-width: 200px;
  position: relative;
  display: flex;
  align-items: center;
}
.catalog-topbar__search svg {
  display: none;
}
.catalog-topbar__search input {
  width: 100%;
  padding: .75rem 1.75rem .75rem 1rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: .75rem;
  color: var(--text);
  font-size: .95rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.catalog-topbar__search input:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.catalog-topbar__search input::placeholder { color: var(--text-muted); opacity: .6; }
.catalog-topbar__clear-search {
  position: absolute;
  right: .75rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: .25rem;
  display: none;
  line-height: 1;
}
.catalog-topbar__clear-search.visible { display: block; }
.catalog-topbar__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.catalog-topbar__filter-btn {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: .75rem;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.catalog-topbar__filter-btn:hover {
  border-color: var(--green-500);
  color: var(--green-600);
}
.catalog-topbar__filter-btn svg { flex-shrink: 0; }
#sortSelect {
  padding: .75rem 2rem .75rem 1rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: .75rem;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  outline: none;
  transition: border-color .2s;
}
#sortSelect:focus { border-color: var(--green-500); }

/* --- Active Filters Tags --- */
.catalog-active-filters {
  display: flex;
  align-items: center;
  gap: .6rem .75rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  background: var(--green-50);
  border: 1px solid rgba(16,185,129,.18);
  border-radius: .75rem;
  margin-bottom: 1.25rem;
}
.catalog-active-filters.collapsed {
  display: none;
}
.catalog-active-filters__count {
  font-size: .8rem;
  font-weight: 700;
  color: var(--green-700);
  white-space: nowrap;
  padding-right: .25rem;
  border-right: 1px solid rgba(16,185,129,.22);
  margin-right: .15rem;
}
.catalog-active-filters__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  flex: 1;
  min-width: 0;
}
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .3rem .3rem .7rem;
  background: var(--green-100);
  color: var(--green-800);
  border-radius: 2rem;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease;
  animation: filterTagIn .2s ease both;
}
.filter-tag:hover {
  background: var(--green-200);
}
@keyframes filterTagIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.filter-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--green-700);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.filter-tag__remove svg {
  width: 9px;
  height: 9px;
  display: block;
}
.filter-tag__remove:hover {
  background: var(--green-600);
  color: #fff;
}
.catalog-active-filters__clear {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .7rem;
  margin-left: auto;
  background: transparent;
  border: none;
  border-radius: 2rem;
  color: var(--green-700);
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.catalog-active-filters__clear:hover {
  background: var(--green-100);
  color: var(--green-800);
}

/* ===== CATALOG LOADING & ERROR STATES ===== */
.catalog-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1.25rem;
  grid-column: 1 / -1;
}
.catalog-loading__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--green-500);
  border-radius: 50%;
  animation: catalogSpin .8s linear infinite;
}
@keyframes catalogSpin {
  to { transform: rotate(360deg); }
}
.catalog-loading p {
  font-size: .95rem;
  color: var(--text-muted);
  font-weight: 500;
}
.catalog-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
  text-align: center;
  grid-column: 1 / -1;
}
.catalog-error__icon {
  color: var(--text-muted);
  opacity: .5;
}
.catalog-error p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 400px;
}

/* --- No Results --- */
.catalog-no-results {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}
.catalog-no-results__icon {
  margin-bottom: 1rem;
  opacity: .4;
}
.catalog-no-results__icon svg { color: var(--text-muted); }
.catalog-no-results p {
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

/* "Budi prvi" CTA — shown when ?city=X has zero approved listings.
   Replaces the generic noResults state with a recruitment pitch:
   strong heading + signup button + reassurance + nearby-cities fallback.
   Lives on /treneri and /teretane (and any future catalog page that
   wants to opt in by adding <div id="cityCta">). */
.catalog-no-results__cta-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .75rem;
}
.catalog-no-results__cta-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 32rem;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}
.catalog-no-results__cta-hint {
  font-size: .85rem;
  color: var(--text-muted);
  opacity: .7;
  margin-top: .85rem;
}
.catalog-no-results__cta-divider {
  width: 60%;
  max-width: 240px;
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 2rem auto 1.25rem;
}
.catalog-no-results__cta-nearby-label {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .65rem;
}
.catalog-no-results__cta-nearby {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.catalog-no-results__cta-nearby a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.catalog-no-results__cta-nearby a:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}
.catalog-no-results__cta-nearby a span {
  opacity: .7;
  font-weight: 500;
}
.catalog-no-results__cta-cross {
  margin-top: 1.5rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.catalog-no-results__cta-cross a {
  color: var(--green-400);
  text-decoration: none;
  font-weight: 500;
}
.catalog-no-results__cta-cross a:hover { text-decoration: underline; }

/* --- Sidebar mobile backdrop --- */
.filter-sidebar__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  opacity: 0;
  transition: opacity .3s;
}
.filter-sidebar__backdrop.active {
  display: block;
  opacity: 1;
}

/* ===== CATALOG MAP PANEL ===== */
.map-toggle-btn {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: .75rem;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.map-toggle-btn:hover {
  border-color: var(--green-500);
  color: var(--green-600);
}
.map-toggle-btn.is-active {
  background: var(--green-600);
  color: #fff;
  border-color: var(--green-600);
}
.map-toggle-btn.is-active:hover { color: #fff; }
.catalog-map-panel {
  display: none;
  position: relative;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--card-bg);
  animation: mapPanelIn .3s ease;
}
.catalog-map-panel.is-open { display: block; }
@keyframes mapPanelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.catalog-map-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}
.catalog-map-panel__counter {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.catalog-map-panel__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: .15rem .45rem;
  border-radius: .4rem;
  transition: background .2s, color .2s;
}
.catalog-map-panel__close:hover {
  background: var(--input-bg);
  color: var(--text);
}
.catalog-map {
  width: 100%;
  height: 460px;
  background: var(--input-bg);
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.catalog-map .leaflet-top,
.catalog-map .leaflet-bottom { z-index: 400; }
.catalog-map .leaflet-pane { z-index: 200; }
.catalog-map .leaflet-popup-pane { z-index: 500; }
@media (max-width: 640px) {
  .catalog-map { height: 340px; }
}

/* Leaflet overrides for theme */
.catalog-map .leaflet-container { font-family: inherit; background: var(--input-bg); }
.catalog-map .leaflet-control-attribution {
  background: rgba(255,255,255,.85);
  color: #555;
  font-size: .7rem;
}
[data-theme="dark"] .catalog-map .leaflet-control-attribution {
  background: rgba(20,20,20,.8);
  color: #bbb;
}
[data-theme="dark"] .catalog-map .leaflet-control-attribution a { color: #5eead4; }

/* Custom pin */
.map-pin {
  background: none !important;
  border: none !important;
}
.map-pin__inner {
  display: block;
  width: 30px; height: 38px;
  color: #059669;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  transition: transform .15s ease;
}
.map-pin:hover .map-pin__inner {
  transform: scale(1.15) translateY(-2px);
}
.map-pin--verified .map-pin__inner { color: #2563eb; }

/* Floating "Najbliže meni" control on the map (bottom-right corner) */
.map-nearby-btn {
  position: absolute;
  right: 12px;
  bottom: 28px;
  z-index: 500; /* above Leaflet tiles/controls base layer */
  height: 40px;
  padding: 0 14px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg, #fff);
  color: var(--text, #111);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.map-nearby-btn__label {
  white-space: nowrap;
}
.map-nearby-btn:hover {
  transform: translateY(-1px);
}
.map-nearby-btn.is-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.map-nearby-btn.is-loading {
  opacity: .7;
  pointer-events: none;
}
.map-nearby-btn.is-loading svg {
  animation: nearby-spin .9s linear infinite;
}
@keyframes nearby-spin {
  to { transform: rotate(360deg); }
}

/* "You are here" marker — pulsing blue dot */
.map-me {
  background: none !important;
  border: none !important;
}
.map-me__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: #2563eb;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(37,99,235,.4), 0 2px 4px rgba(0,0,0,.25);
}
.map-me__pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(37,99,235,.35);
  animation: map-me-pulse 1.8s ease-out infinite;
}
@keyframes map-me-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(3.2); opacity: 0;  }
}

/* Popup */
.leaflet-popup.map-popup .leaflet-popup-content-wrapper {
  background: var(--card-bg);
  color: var(--text);
  border-radius: .75rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.leaflet-popup.map-popup .leaflet-popup-content {
  margin: 0;
  width: 240px !important;
}
.leaflet-popup.map-popup .leaflet-popup-tip { background: var(--card-bg); }
.leaflet-popup.map-popup .leaflet-popup-close-button { color: var(--text-muted); }
.map-popup__img {
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: var(--input-bg);
}
.map-popup__body { padding: .7rem .85rem .85rem; }
.map-popup__name {
  font-size: .98rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .15rem;
}
.map-popup__verified {
  display: inline-block;
  background: #2563eb;
  color: #fff;
  border-radius: 999px;
  width: 16px; height: 16px;
  font-size: .7rem;
  text-align: center;
  line-height: 16px;
  margin-left: .15rem;
}
.map-popup__sub {
  font-size: .82rem;
  color: var(--green-600);
  font-weight: 600;
  margin-bottom: .1rem;
}
.map-popup__city {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .55rem;
}
.map-popup__btn {
  width: 100%;
  padding: .5rem .75rem;
  background: var(--green-600);
  color: #fff;
  border: none;
  border-radius: .5rem;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.map-popup__btn:hover { background: var(--green-700, #047857); }