/* JG Interactive Map Styles */

/*
 * ── Responsywna baza czcionek wtyczki ──────────────────────────────────────
 *
 * --jg: multiplikator 1px, skaluje się z szerokością ekranu przez clamp().
 *
 * Matematyka jak w "dziesiątkach":
 *   font-size: calc(14 * var(--jg))   →  14px na mobile, ~15px na 1440px
 *   font-size: calc(13 * var(--jg))   →  13px na mobile, ~14px na 1440px
 *
 * Zakresy clamp(1px, 0.065vw, 1.1px):
 *   < 1538px viewport  → skaluje się liniowo z vw
 *   ≥ 1538px viewport  → 1.1px (+10%, max — duże monitory)
 *
 * Duże wyświetlacze (progresywne skalowanie przez media query):
 *   ≥ 1600px  → --jg: 1.05px (+5%)
 *   ≥ 1920px  → --jg: 1.1px  (+10%, duże monitory 24-26")
 *   ≥ 2560px  → --jg: 1.2px  (+20%, monitory 27"+)
 *
 * --jg-sidebar-w: responsywna szerokość sidebara:
 *   clamp(280px, 19vw, 400px)
 *   ~280px na 15" (1366px viewport) — mniej zajętej mapy
 *   ~361px na 19" (1900px viewport) — bez zmiany
 *   ~400px na 27" (2560px viewport) — lepsze wykorzystanie przestrzeni
 *
 * NIE zmienia html/body font-size → bezpieczne dla Leaflet, motywu i Elementora.
 * Elementor ustawia własne font-size w px — nie reaguje na --jg.
 * ────────────────────────────────────────────────────────────────────────────
 */
:root {
  --jg: clamp(1px, 0.065vw, 1.1px);
  --jg-sidebar-w: clamp(280px, 19vw, 400px);
}

@media (min-width: 1600px) {
  :root {
    --jg: 1.05px;
  }
}

@media (min-width: 1920px) {
  :root {
    --jg: 1.1px;
  }
}

@media (min-width: 2560px) {
  :root {
    --jg: 1.2px;
  }
}

.jg-map-tiles .leaflet-tile {
  will-change: transform;
  transform: translateZ(0);
  filter: brightness(0.88) contrast(1.2) saturate(1.5);
}

.jg-map--satellite .jg-map-tiles .leaflet-tile {
  filter: none;
}


/* ── Info Bar (pasek informacyjny) ──────────────────────────────────────────
   Rendered above .jg-nav-bar and .jg-custom-top-bar (wp_body_open priority 1).
   Uses ID + !important selectors to defeat Elementor overrides on mobile.

   CRITICAL: Do NOT add all:unset or transform:none !important to
   .jg-info-bar-text — CSS animations have lower cascade priority than
   !important author rules, so the transform would be locked and invisible.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Container — flex so track and close button are true siblings.
   The track gets flex:1 and its own overflow:hidden, which means text is
   clipped exactly at the track's right edge — BEFORE the close button.
   There is no longer any risk of scrolling text sliding under the X. ── */
#jg-info-bar {
  all: unset !important;
  display: flex !important;         /* row; track + button side-by-side */
  align-items: stretch !important;  /* both children fill the bar height */
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  background: #f3f4f6 !important;
  border-bottom: 1px solid #e2e4e7 !important;
  overflow: hidden !important;
  z-index: 100000 !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* ── Scrolling track — takes all remaining width ── */
#jg-info-bar .jg-info-bar-track {
  all: unset !important;
  display: flex !important;
  flex: 1 1 0 !important;    /* fills available space; shrinks if button is present */
  min-width: 0 !important;   /* allow flex to shrink below content size */
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;   /* clips text exactly at this element's right edge */
  box-sizing: border-box !important;
  padding: 6px 14px !important;
  min-height: 30px !important;
}

/* ── Text span ──
   NO all:unset here! It would set transform:none !important which prevents
   CSS animation from changing transform (animations < !important in cascade).
   Instead we use targeted resets for properties Elementor commonly overrides. */
#jg-info-bar .jg-info-bar-text {
  display: inline-block !important;
  flex-shrink: 0 !important;       /* keep full natural width so JS can measure it */
  color: #8d2324 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  text-align: center !important;
  /* Targeted Elementor resets */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  vertical-align: middle !important;
  max-width: none !important;
  width: auto !important;
  /* Do NOT set transform or animation here */
}

/* Links inside bar */
html body #jg-info-bar .jg-info-bar-text a,
html body #jg-info-bar .jg-info-bar-text a:visited {
  color: #8d2324 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
html body #jg-info-bar .jg-info-bar-text a:hover,
html body #jg-info-bar .jg-info-bar-text a:focus {
  color: #6b1a1b !important;
}

/* ── Close button — flex item next to the track, never overlaps text ── */
#jg-info-bar .jg-info-bar-close {
  all: unset !important;
  /* Static flex item — text is clipped at track's right edge before reaching button */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 32px !important;          /* fixed width = clickable zone */
  cursor: pointer !important;
  color: #8d2324 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  opacity: 0.6 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 6px 0 0 !important;   /* 6px gap from bar right edge */
  margin: 0 !important;
}
#jg-info-bar .jg-info-bar-close:hover,
#jg-info-bar .jg-info-bar-close:focus {
  opacity: 1 !important;
}

/* ── Responsive font / padding ───────────────────────────────────────────── */

@media (min-width: 640px) {
  #jg-info-bar .jg-info-bar-track { padding: 7px 20px !important; min-height: 34px !important; }
  #jg-info-bar .jg-info-bar-text  { font-size: 13px !important; }
}
@media (min-width: 1024px) {
  #jg-info-bar .jg-info-bar-track { padding: 9px 24px !important; min-height: 38px !important; }
  #jg-info-bar .jg-info-bar-text  { font-size: 14px !important; }
}
@media (min-width: 1440px) {
  #jg-info-bar .jg-info-bar-track { padding: 10px 32px !important; min-height: 42px !important; }
  #jg-info-bar .jg-info-bar-text  { font-size: 15px !important; }
}

/* ── Ticker / scrolling state ─────────────────────────────────────────────── */

#jg-info-bar.jg-info-bar--scroll .jg-info-bar-track {
  justify-content: flex-start !important;
}

/* Duration set via --jg-info-bar-dur CSS custom property by JS.
   Custom properties are inherited and NOT blocked by !important — the correct
   channel to pass a dynamic value from JS into a !important CSS rule. */
#jg-info-bar.jg-info-bar--scroll .jg-info-bar-text {
  animation-name:            jg-info-bar-ticker !important;
  animation-duration:        var(--jg-info-bar-dur, 15s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode:       none !important;
  animation-direction:       normal !important;
  animation-play-state:      running !important;
  will-change:               transform !important;
}

/* Pause on hover (desktop) and focus-within (keyboard/touch) */
#jg-info-bar.jg-info-bar--scroll:hover       .jg-info-bar-text,
#jg-info-bar.jg-info-bar--scroll:focus-within .jg-info-bar-text {
  animation-play-state: paused !important;
}

@keyframes jg-info-bar-ticker {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ── Custom Top Bar - Fixed at top of page */
.jg-custom-top-bar {
  position: sticky;
  top: var(--jg-info-bar-h, 0px);
  left: 0;
  right: 0;
  background: #8d2324;
  color: #fff;
  padding: 10px 24px;
  min-height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: calc(15 * var(--jg));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  box-sizing: border-box;
  /* overflow: hidden would clip the Menu dropdown — flex-shrink + min-width:0
     on children is enough to prevent horizontal overflow */
}

.jg-top-bar-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 24px); /* was 48px — fluid so it shrinks before overflow */
  min-width: 0;
  flex-shrink: 1;
}

.jg-top-bar-right {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vw, 16px); /* fluid gap between user-action buttons */
  min-width: 0;
  flex-shrink: 0; /* right side (user actions) stays intact */
}

.jg-top-bar-site-title {
  color: #fff;
  font-size: clamp(11px, 0.85vw, 14px); /* shrinks continuously with viewport width */
  font-weight: 500;                      /* thinner = narrower, still readable */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
  text-decoration: none;
  letter-spacing: 0.01em;
  max-width: clamp(60px, 22vw, 340px);
  flex-shrink: 1;
}
.jg-title-sub {
  opacity: 0.75; /* slightly dimmer to visually separate from main name */
}

.jg-top-bar-user {
  margin-right: 6px;
  font-size: calc(15 * var(--jg));
  display: flex;
  align-items: center;
}

/* Level indicator in top bar */
.jg-top-bar-level {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.15rem;
  flex-shrink: 0;
}

.jg-top-bar-level-num {
  font-size: calc(16 * var(--jg));
  font-weight: 800;
  color: #fbbf24;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.jg-top-bar-xp-bar {
  display: inline-block;
  width: 5.5rem;
  height: 0.5rem;
  background: rgba(255,255,255,0.18);
  border-radius: 0.3rem;
  overflow: hidden;
  vertical-align: middle;
}

.jg-top-bar-xp-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 0.25rem;
  transition: width 0.4s ease;
}

/* Level color tiers - Forza Horizon prestige style */
.jg-level-prestige-bronze .jg-top-bar-level-num {
  color: #cd7f32;
}
.jg-level-prestige-bronze .jg-top-bar-xp-fill {
  background: linear-gradient(90deg, #cd7f32, #a0522d);
}

.jg-level-prestige-silver .jg-top-bar-level-num {
  color: #c0c0c0;
}
.jg-level-prestige-silver .jg-top-bar-xp-fill {
  background: linear-gradient(90deg, #b0b0b0, #d4d4d4);
}

.jg-level-prestige-gold .jg-top-bar-level-num {
  color: #fbbf24;
  text-shadow: 0 1px 4px rgba(251,191,36,0.4);
}
.jg-level-prestige-gold .jg-top-bar-xp-fill {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.jg-level-prestige-emerald .jg-top-bar-level-num {
  color: #34d399;
  text-shadow: 0 1px 4px rgba(52,211,153,0.4);
}
.jg-level-prestige-emerald .jg-top-bar-xp-fill {
  background: linear-gradient(90deg, #34d399, #10b981);
}

.jg-level-prestige-purple .jg-top-bar-level-num {
  color: #a78bfa;
  text-shadow: 0 1px 4px rgba(167,139,250,0.4);
}
.jg-level-prestige-purple .jg-top-bar-xp-fill {
  background: linear-gradient(90deg, #a78bfa, #8b5cf6);
}

.jg-level-prestige-diamond .jg-top-bar-level-num {
  color: #67e8f9;
  text-shadow: 0 1px 4px rgba(103,232,249,0.4);
}
.jg-level-prestige-diamond .jg-top-bar-xp-fill {
  background: linear-gradient(90deg, #67e8f9, #22d3ee);
}

.jg-level-prestige-ruby .jg-top-bar-level-num {
  color: #fb7185;
  text-shadow: 0 1px 4px rgba(251,113,133,0.4);
}
.jg-level-prestige-ruby .jg-top-bar-xp-fill {
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

.jg-level-prestige-legend .jg-top-bar-level-num {
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #fb7185, #a78bfa, #67e8f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(251,191,36,0.3));
}
.jg-level-prestige-legend .jg-top-bar-xp-fill {
  background: linear-gradient(90deg, #fbbf24, #fb7185, #a78bfa, #67e8f9);
}

.jg-top-bar-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: calc(14 * var(--jg));
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jg-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.jg-top-bar-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

/* Admin panel button - golden style */
.jg-top-bar-btn-admin {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
  border: 1px solid #f59e0b !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.jg-top-bar-btn-admin:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
  transform: translateY(-2px);
}

/* Notification container */
#jg-top-bar-notifications {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Hide when empty - use both :empty and manual class for reliability */
#jg-top-bar-notifications:empty,
#jg-top-bar-notifications.jg-notifications-empty {
  display: none;
  width: 0;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Notification buttons with badges */
.jg-top-bar-notif {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.jg-notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #ef4444;
  color: #fff;
  border-radius: 10px;
  font-size: calc(12 * var(--jg));
  font-weight: 700;
  line-height: 1;
}

/* Top bar logo */
.jg-top-bar-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: normal;
  margin-left: 0;
}

.jg-top-bar-logo-img {
  height: 48px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Top bar navigation menu dropdown */
.jg-top-bar-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.jg-top-bar-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  padding: 7px 16px !important;
  cursor: pointer !important;
  font-size: calc(14 * var(--jg)) !important;
  font-weight: 500 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s, transform 0.2s !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.jg-top-bar-menu-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.jg-top-bar-menu-chevron {
  font-size: 0.7em;
  line-height: 1;
  transition: transform 0.2s;
}

.jg-top-bar-menu-btn[aria-expanded="true"] .jg-top-bar-menu-chevron {
  transform: rotate(180deg);
}

.jg-top-bar-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: #8d2324;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 10001;
  overflow: hidden;
  flex-direction: column;
}

.jg-top-bar-menu-dropdown.jg-top-bar-menu-open {
  display: flex;
}

.jg-top-bar-menu-item {
  display: block;
  padding: 10px 16px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: calc(14 * var(--jg));
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s;
}

.jg-top-bar-menu-item:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff !important;
}

.jg-top-bar-menu-empty {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  cursor: default;
}


.jg-wrap {
  position: relative;
  overflow-x: clip;
  overflow-y: visible; /* Allow pins to extend beyond edges */
  box-sizing: border-box;
  min-width: 0;
}

/* Prevent grid blowout: without an explicit column track, an implicit grid column
   can be sized by max-content of its items (the nowrap filter bar), causing
   #jg-map-wrap to expand beyond the Elementor column width and overlap the sidebar.
   minmax(0, 1fr) constrains the track to the grid container width. */
#jg-map-wrap {
  grid-template-columns: minmax(0, 1fr);
}

.jg-map {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: visible; /* Allow sponsored pins to extend beyond edges */
  background: #e5e7eb;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}

/* Full-screen loading overlay */
#jg-map-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.jg-loader-pins {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.jg-loader-pin {
  animation: jg-loader-bounce 1.2s ease-in-out infinite;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}

@keyframes jg-loader-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-18px); }
}

.jg-spinner {
  width: 60px;
  height: 60px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #8d2324;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Desktop filter bar – Elementor isolation ── */
#jg-map-filters-wrapper {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  font-size: calc(14 * var(--jg)) !important;
  line-height: 1.4 !important;
  color: #374151 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-sizing: border-box !important;
  min-width: 0 !important; /* prevent grid item from expanding beyond grid track */
  max-width: 100% !important;
  position: relative !important; /* anchor for absolutely-positioned category dropdowns */
}

.jg-filters {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  flex-wrap: nowrap !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.jg-filter-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1.5px solid transparent !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
  user-select: none !important;
  position: relative !important;
  color: #374151 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  font-size: calc(13.5 * var(--jg)) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  outline: none !important;
}

.jg-filter-label:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

/* Desktop: active/checked state matches map UI brand color */
.jg-filter-label:has(input[type="checkbox"]:checked) {
  background: rgba(141, 35, 36, 0.07) !important;
  border-color: #8d2324 !important;
  color: #8d2324 !important;
}

.jg-filter-icon {
  font-size: calc(20 * var(--jg));
  line-height: 1;
  display: none;
}

.jg-filter-text {
  display: inline;
}

.jg-filters input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  accent-color: #8d2324 !important;
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
}

.jg-search {
  width: 240px;
  min-width: 160px;
  max-width: 280px;
  position: relative;
  display: flex;
  align-items: center;
  order: 9;
  flex-shrink: 1;
  margin-left: auto;
}

/* ── Sync status indicator – Elementor-isolated ── */
.jg-sync-indicator {
  order: 10 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  color: #6b7280 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  font-size: calc(11 * var(--jg)) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: help !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  transition: border-color 0.2s, background 0.2s, color 0.2s !important;
  text-decoration: none !important;
  height: auto !important;
  min-height: auto !important;
}

.jg-sync-indicator[data-state="online"],
.jg-sync-indicator[data-state="completed"] {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
}

.jg-sync-indicator[data-state="syncing"] {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

.jg-sync-indicator[data-state="offline"] {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

/* Dot */
.jg-sync-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #9ca3af !important;
  flex-shrink: 0 !important;
}

.jg-sync-dot--online  { background: #16a34a !important; }
.jg-sync-dot--syncing { background: #f59e0b !important; }
.jg-sync-dot--offline { background: #dc2626 !important; }

.jg-sync-dot--pulse {
  animation: jg-sync-pulse 2s infinite !important;
}

.jg-sync-dot--pulse-fast {
  animation: jg-sync-pulse 0.9s infinite !important;
}

@keyframes jg-sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.8); }
}

/* Icon */
.jg-sync-icon {
  font-size: calc(12 * var(--jg)) !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.jg-sync-icon--spin {
  animation: jg-sync-spin 1s linear infinite !important;
}

@keyframes jg-sync-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Keep old id-based rule for backwards compatibility */
#jg-sync-status {
  order: 10;
  flex-shrink: 0;
}

/* ── Desktop category columns: max 10 items/col, max 3 cols visible, then h-scroll ── */
@media (min-width: 769px) {
  .jg-category-dropdown {
    overflow-x: auto;
    overflow-y: visible;
    /* 3 columns × 172px + 2 gaps × 8px + container padding 12px×2 = 556px */
    max-width: 556px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }

  .jg-category-dropdown::-webkit-scrollbar {
    height: 4px;
  }

  .jg-category-dropdown::-webkit-scrollbar-track {
    background: transparent;
  }

  .jg-category-dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
  }

  .jg-category-checkboxes {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(10, auto) !important;
    grid-auto-columns: 172px !important;
    gap: 0 8px !important;       /* uniform horizontal gap; vertical spacing via padding in label */
    align-items: stretch !important; /* equal row height per grid row */
  }
}

/* Category Filters – floats over the map, does not push it down */
.jg-category-filters {
  position: absolute;
  top: 100%; /* directly below the filter bar */
  left: 0;
  z-index: 1010; /* above Leaflet controls (z-index 1000) */
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 0;
  /* no background/shadow – individual dropdowns have their own */
  pointer-events: auto;
}

.jg-category-filters[style*="display: none"],
.jg-category-filters[style*="display:none"] {
  pointer-events: none;
}

.jg-category-dropdown {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-width: 200px;
  /* JS sets display:flex when open – ensure children stack vertically */
  flex-direction: column;
}

.jg-category-dropdown-header {
  font-weight: 600;
  font-size: calc(13 * var(--jg));
  color: #374151;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

/* Section header inside a dropdown (e.g. "Dodatkowe filtry") */
.jg-category-dropdown-section-header {
  font-weight: 600;
  font-size: calc(12 * var(--jg));
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 12px;
  margin-bottom: 4px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

.jg-category-extra-filters {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jg-category-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jg-category-filter-label {
  display: flex;
  align-items: flex-start; /* align to top when text wraps */
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: calc(13 * var(--jg));
  line-height: 1.4;
  transition: background 0.2s;
}

/* Checkbox and icon vertically centred to first line of text */
.jg-category-filter-label input[type="checkbox"],
.jg-category-filter-label .jg-filter-icon {
  margin-top: 1px; /* optical alignment to cap-height of first line */
  flex-shrink: 0;
}

/* Text: allow wrapping, prevent long words from overflowing the column */
.jg-category-filter-label__text {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.jg-category-filter-label:hover {
  background: #f3f4f6;
}

.jg-category-filter-label input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  accent-color: #8d2324 !important;
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  box-sizing: content-box !important;
}

.jg-filter-expand-btn {
  margin-left: 4px;
  font-size: calc(10 * var(--jg));
  color: #6b7280;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.jg-filter-expand-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.jg-filter-label--expandable {
  position: relative;
}

.jg-search input {
  flex: 1 !important;
  padding: 8px 40px 8px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: calc(13.5 * var(--jg)) !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  background: #ffffff !important;
  color: #374151 !important;
  height: auto !important;
  min-height: auto !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  width: 100% !important;
}

.jg-search input:focus {
  outline: none !important;
  border-color: #8d2324 !important;
  box-shadow: 0 0 0 3px rgba(141, 35, 36, 0.12) !important;
}

.jg-search-btn {
  position: absolute !important;
  right: 4px !important;
  width: 30px !important;
  height: 30px !important;
  border: none !important;
  background: #8d2324 !important;
  background-color: #8d2324 !important;
  color: #fff !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, transform 0.1s !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  text-transform: none !important;
  font-family: system-ui !important;
  box-shadow: none !important;
  line-height: 1 !important;
  outline: none !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.jg-search-btn:hover {
  background: #a02829 !important;
  background-color: #a02829 !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.jg-search-btn:active {
  transform: translateY(-50%) scale(0.94) !important;
}

/* Search Autocomplete Suggestions */
.jg-search-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  max-height: 320px;
  overflow-y: auto;
}

@media (min-width: 769px) {
  .jg-search .jg-search-suggestions {
    /* Anchor to the right edge of the search box and extend leftward
       so the dropdown does not disappear under the right-side sidebar */
    left: auto;
    right: 0;
    min-width: 420px;
  }
}

.jg-suggest-group {
  border-bottom: 1px solid #e5e7eb;
}

.jg-suggest-group:last-child {
  border-bottom: none;
}

.jg-suggest-header {
  padding: 6px 12px;
  font-size: calc(10 * var(--jg));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8d2324;
  background: #f9fafb;
  text-transform: uppercase;
  position: sticky;
  top: 0;
}

.jg-suggest-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  transition: background 0.1s;
}

.jg-suggest-item:hover,
.jg-suggest-item.jg-suggest-active {
  background: #f3f4f6;
}

.jg-suggest-main {
  font-size: calc(13 * var(--jg));
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.jg-suggest-sub {
  font-size: calc(11 * var(--jg));
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 2;
  min-width: 0;
}

/* Search Results Side Panel */
.jg-search-panel {
  position: absolute;
  top: 70px;
  right: 0;
  width: 350px;
  max-width: 100%;
  height: calc(100% - 70px);
  background: #fff;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 9900;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  visibility: hidden;
  pointer-events: none;
}

.jg-search-panel.active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* FAB transition for smooth position changes */
.jg-map #jg-fab-container {
  transition: right 0.3s ease-in-out;
}

/* Desktop: search panel sits above FAB (9998) so FAB hides behind it when they overlap */
@media (min-width: 769px) {
  .jg-search-panel {
    z-index: 9999 !important;
  }
}

.jg-search-panel-header {
  padding: 20px;
  background: #8d2324;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.jg-search-panel-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jg-search-panel-header h3 {
  margin: 0;
  font-size: calc(18 * var(--jg));
  font-weight: 600;
}

/* Close button at the top of the search results panel - white with black font for contrast */
.jg-search-panel-header-close {
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: center !important;
  background: #fff !important;
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #ddd !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: calc(14 * var(--jg)) !important;
  font-weight: 400 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: auto !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.jg-search-panel-header-close:hover {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
  color: #111 !important;
}

.jg-search-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: calc(14 * var(--jg));
  font-weight: 600;
}

.jg-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.jg-search-result-item {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.jg-search-result-item:hover {
  background: #f9fafb;
}

.jg-search-result-item:active {
  background: #f3f4f6;
}

.jg-search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: calc(16 * var(--jg));
}

.jg-search-result-icon--miejsce {
  background: #dcfce7;
  color: #15803d;
}

.jg-search-result-icon--ciekawostka {
  background: #dbeafe;
  color: #1e40af;
}

.jg-search-result-icon--zgloszenie {
  background: #f3f4f6;
  color: #6b7280;
}

.jg-search-result-icon--sponsored {
  background: #fef3c7;
  color: #f59e0b;
}

.jg-search-result-content {
  flex: 1;
  min-width: 0;
}

.jg-search-result-title {
  font-weight: 600;
  font-size: calc(15 * var(--jg));
  color: #111827;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jg-search-result-excerpt {
  font-size: calc(13 * var(--jg));
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jg-search-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.jg-search-panel-footer .jg-btn {
  width: 100%;
}

/* ── Map Zoom Controls ── */
.leaflet-control-zoom {
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  margin-left: 14px !important;
  margin-top: 14px !important;
}

.leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: calc(18 * var(--jg)) !important;
  font-weight: 600 !important;
  color: #111827 !important;
  background: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, color 0.2s !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
}

.leaflet-control-zoom a:hover {
  background: #8d2324 !important;
  color: #fff !important;
}

.leaflet-control-zoom-in {
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 10px 10px 0 0 !important;
}

.leaflet-control-zoom-out {
  border-radius: 0 0 10px 10px !important;
}

/* ── Fullscreen Control ── */
.jg-fullscreen-control {
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  margin-left: 14px !important;
  margin-top: 6px !important;
}

.jg-fullscreen-btn {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: calc(18 * var(--jg)) !important;
  color: #111827 !important;
  background: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, color 0.2s !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  text-decoration: none !important;
}

.jg-fullscreen-btn:hover {
  background: #8d2324 !important;
  color: #fff !important;
}

.jg-fullscreen-btn svg {
  pointer-events: none;
}

/* ── Fullscreen Mode ── */
body.jg-fullscreen-active {
  overflow: hidden !important;
}

#jg-map-wrap.jg-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99990 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
}

/* Hide the original filter bar in fullscreen - replaced by floating panels */
#jg-map-wrap.jg-fullscreen #jg-map-filters-wrapper {
  display: none !important;
}

/* In fullscreen the original search panel is mirrored to fsSearchPanel - hide the original */
body.jg-fullscreen-active #jg-search-panel {
  display: none !important;
}

#jg-map-wrap.jg-fullscreen .jg-map {
  flex: 1 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
}

/* ── Fullscreen: Floating filter button (legacy, hidden) ── */
.jg-fs-filter-btn {
  display: none !important;
}

/* ── Fullscreen: Floating filter panel ── */
.jg-fs-filter-panel {
  display: none;
  position: absolute;
  z-index: 1002;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 12px;
  overflow-y: auto;
}

.jg-fs-filter-panel.active {
  display: block;
}

.jg-fs-filter-panel .jg-filters {
  margin-bottom: 0;
}

/* ── Fullscreen search results panel: base styles (all screen sizes) ── */
.jg-fs-search-results-panel {
  display: none;
}

.jg-fs-search-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px;
  background: #8d2324;
  color: #fff;
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
}

.jg-fs-search-title {
  font-size: calc(14 * var(--jg));
  font-weight: 600;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jg-fs-search-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: calc(12 * var(--jg));
  font-weight: 600;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  flex-shrink: 0;
}

/* Close button styled to match plugin's jg-close button pattern */
.jg-fs-search-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: #fff !important;
  font-size: calc(20 * var(--jg)) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: background 0.15s ease !important;
  box-shadow: none !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
}

.jg-fs-search-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.jg-fs-search-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* Desktop fullscreen: sidebar + filter panel as floating overlays */
@media (min-width: 769px) {
  .jg-sidebar-fullscreen-overlay {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--jg-sidebar-w) !important;
    height: calc(100% - 24px) !important;
    max-height: calc(100% - 24px) !important;
    min-height: 0 !important;
    z-index: 1001 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    overflow-y: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
  }

  /* Desktop filter panel: floating to the left of the sidebar */
  .jg-fs-filter-panel {
    top: 12px;
    right: calc(var(--jg-sidebar-w) + 24px);
    bottom: auto;
    left: auto;
    width: auto;
    min-width: 260px;
    max-width: calc(100% - var(--jg-sidebar-w) - 120px);
    max-height: calc(100% - 24px);
    border-radius: 16px;
    padding: 0;
    overflow: visible;
  }

  /* Desktop: filter panel always visible in fullscreen (no button needed) */
  .jg-fs-filter-panel.desktop-visible {
    display: block;
  }

  /* ── Collapsible filter panel header ── */
  .jg-fs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-size: calc(14 * var(--jg));
    font-weight: 600;
    color: #374151;
    border-radius: 16px;
    transition: border-radius 0.2s;
  }

  .jg-fs-panel-header:hover {
    background: rgba(0, 0, 0, 0.03);
  }

  .jg-fs-panel-header.expanded {
    border-radius: 16px 16px 0 0;
  }

  .jg-fs-panel-arrow {
    font-size: calc(11 * var(--jg));
    color: #9ca3af;
    transition: transform 0.2s;
  }

  .jg-fs-panel-header.expanded .jg-fs-panel-arrow {
    transform: rotate(180deg);
  }

  .jg-fs-panel-content {
    padding: 0 12px 12px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    max-height: 600px;
    opacity: 1;
  }

  .jg-fs-panel-content.jg-fs-panel-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }

  /* Filters inside the panel: vertical layout, left-aligned */
  .jg-fs-filter-panel .jg-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0;
    background: transparent;
    margin-bottom: 0;
  }

  .jg-fs-filter-panel .jg-filter-label {
    justify-content: flex-start;
    width: 100%;
  }

  .jg-fs-filter-panel .jg-search {
    width: 100%;
    margin-top: 4px;
  }

  /* ── Notification circles (desktop fullscreen) ── */
  .jg-fs-notif-container {
    display: none;
  }

  body.jg-fullscreen-active .jg-fs-notif-container:not(:empty) {
    display: flex;
    position: absolute;
    top: 88px;
    left: 12px;
    z-index: 1003;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
  }

  .jg-fs-notif-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    position: relative;
    transition: transform 0.15s, background 0.15s;
    cursor: pointer;
  }

  .jg-fs-notif-circle:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.95);
  }

  .jg-fs-notif-icon {
    font-size: calc(18 * var(--jg));
    line-height: 1;
  }

  .jg-fs-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc2626;
    color: #fff;
    font-size: calc(11 * var(--jg));
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  }

  /* ── Fullscreen search results panel (desktop) ── */
  .jg-fs-search-results-panel {
    display: none;
    position: absolute;
    z-index: 1002;
    top: auto;
    right: calc(var(--jg-sidebar-w) + 24px);
    bottom: 12px;
    width: 340px;
    max-width: calc(100% - var(--jg-sidebar-w) - 120px);
    max-height: 50%;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    flex-direction: column;
  }

  .jg-fs-search-results-panel.active {
    display: flex;
  }

  /* Desktop: border-radius matches larger panel corners */
  .jg-fs-search-header {
    border-radius: 16px 16px 0 0;
  }

  .jg-fs-search-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
  }

  .jg-fs-search-list .jg-search-result-item {
    cursor: pointer;
  }

  .jg-fs-search-list .jg-search-result-item:hover {
    background: #f9fafb;
  }

  /* Move FAB to the left of the sidebar panel in fullscreen */
  body.jg-fullscreen-active #jg-fab-container {
    right: calc(var(--jg-sidebar-w) + 40px) !important;
    transition: right 0.3s ease !important;
  }

}

/* Fullscreen float styles are injected inline with randomised class names (see class-slot-keys.php) */

/* Mobile fullscreen */
@media (max-width: 768px) {
  #jg-map-wrap.jg-fullscreen .jg-map {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
  }

  /* Hide sidebar inside map container on mobile fullscreen to prevent flash during layer switch */
  .jg-map .jg-sidebar-fullscreen-overlay {
    display: none !important;
  }

  /* ── Mobile fullscreen: filter icon button (topright, below toggle) ── */
  .jg-fs-filter-icon-btn {
    display: none !important;
  }

  body.jg-fullscreen-active .jg-fs-filter-icon-btn.visible {
    display: flex !important;
    position: absolute;
    top: 46px;
    right: 10px;
    z-index: 1001;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: #111827;
    transition: background 0.2s, color 0.2s;
  }

  body.jg-fullscreen-active .jg-fs-filter-icon-btn.visible:active {
    background: #8d2324;
    color: #fff;
  }

  /* Mobile: filter panel opens below the icon button */
  body.jg-fullscreen-active .jg-fs-filter-panel.mobile-visible {
    display: block !important;
    position: absolute;
    top: 88px;
    right: 10px;
    left: auto;
    bottom: auto;
    width: calc(100% - 80px);
    min-width: 0;
    max-width: 300px;
    max-height: calc(100dvh - 100px);
    z-index: 1002;
    padding: 0;
    border-radius: 12px;
    overflow: visible;
  }

  /* Mobile: filter panel header styling */
  .jg-fs-filter-panel .jg-fs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-size: calc(13 * var(--jg));
    font-weight: 600;
    color: #374151;
    border-radius: 12px;
    transition: border-radius 0.2s;
  }

  .jg-fs-filter-panel .jg-fs-panel-header.expanded {
    border-radius: 12px 12px 0 0;
  }

  .jg-fs-filter-panel .jg-fs-panel-content {
    padding: 0 10px 10px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    max-height: 500px;
    opacity: 1;
  }

  .jg-fs-filter-panel .jg-fs-panel-content.jg-fs-panel-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }

  .jg-fs-filter-panel .jg-fs-panel-arrow {
    font-size: calc(10 * var(--jg));
    color: #9ca3af;
    transition: transform 0.2s;
  }

  .jg-fs-filter-panel .jg-fs-panel-header.expanded .jg-fs-panel-arrow {
    transform: rotate(180deg);
  }

  /* Mobile: filters vertical layout inside panel */
  .jg-fs-filter-panel .jg-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0;
    background: transparent;
    margin-bottom: 0;
  }

  .jg-fs-filter-panel .jg-filter-label {
    justify-content: flex-start;
    width: 100%;
    padding: 8px;
  }

  .jg-fs-filter-panel .jg-filter-text {
    display: inline !important;
  }

  .jg-fs-filter-panel .jg-search {
    width: 100%;
    margin-top: 4px;
  }

  /* Mobile fullscreen search results panel */
  body.jg-fullscreen-active .jg-fs-search-results-panel {
    display: none;
    position: absolute;
    z-index: 10001;  /* Above FAB (#jg-fab-container z-index: 9998) */
    top: auto;
    right: 10px;
    bottom: 12px;
    left: 10px;
    width: auto;
    max-width: none;
    max-height: 50dvh;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    flex-direction: column;
  }

  body.jg-fullscreen-active .jg-fs-search-results-panel.active {
    display: flex;
  }

  /* Ensure list inside is scrollable on touch */
  body.jg-fullscreen-active .jg-fs-search-results-panel .jg-fs-search-list {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  /* Hide FAB when search results panel is active on mobile fullscreen */
  body.jg-fullscreen-active .jg-fs-search-results-panel.active ~ #jg-fab-container,
  body.jg-fullscreen-active:has(.jg-fs-search-results-panel.active) #jg-fab-container {
    display: none !important;
  }

  body.jg-fullscreen-active .jg-fs-search-header {
    padding: 10px 14px;
    border-radius: 14px 14px 0 0;
  }

  .jg-fullscreen-control {
    margin-left: 10px !important;
    margin-top: 4px !important;
  }

  .jg-fullscreen-btn {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
  }

}

/* Very small phones */
@media (max-width: 380px) {
  /* Float styles for very small phones are injected inline (see class-slot-keys.php) */
}

/* ── Desktop-Wide Mode (auto-activated on desktop ≥769px) ──
   Map fills the full viewport between Elementor header and footer.
   Sidebar, filter bar and search float as overlays above the map.
   Banner floats at the top, centred between zoom controls and satellite toggle. */
@media (min-width: 769px) {
  /* Prevent page scroll while map occupies the full content area */
  body.jg-desktop-wide-active {
    overflow: hidden !important;
  }

  /* Filter bar: lifted out of document flow, floats at the top of the map.
     top/left use 10px to match Leaflet's standard control offset so all
     navigation elements share the same margin from the map edge. */
  #jg-map-wrap.jg-desktop-wide #jg-map-filters-wrapper {
    position: absolute !important;
    top: 10px !important;
    left: 55px !important;
    right: calc(var(--jg-sidebar-w) + 24px) !important;
    bottom: auto !important;
    z-index: 1001 !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Remove bottom margin from floating filter bar */
  #jg-map-wrap.jg-desktop-wide .jg-filters {
    margin-bottom: 0 !important;
  }

  /* Map element expands to fill all available height */
  #jg-map-wrap.jg-desktop-wide .jg-map {
    flex: 1 !important;
    height: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }

  /* White background so no page colour bleeds through while tiles load */
  #jg-map-wrap.jg-desktop-wide {
    background: #fff !important;
  }

  /* Sidebar: floating overlay on the right (mirrors fullscreen behaviour) */
  .jg-sidebar-desktop-wide-overlay {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--jg-sidebar-w) !important;
    height: calc(100% - 24px) !important;
    max-height: calc(100% - 24px) !important;
    min-height: 0 !important;
    z-index: 1001 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    overflow-y: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
  }

  /* Search results panel: shifted left to avoid the floating sidebar */
  body.jg-desktop-wide-active #jg-search-panel {
    right: calc(var(--jg-sidebar-w) + 12px) !important;
  }

  /* FAB: shifted left to stay clear of the floating sidebar */
  body.jg-desktop-wide-active #jg-fab-container {
    right: calc(var(--jg-sidebar-w) + 40px) !important;
    transition: right 0.3s ease !important;
  }
}

/* === Fullscreen topbar: absolute positioning (not in Leaflet container) === */

/* Combined controls container */
body.jg-fullscreen-active .jg-fs-top-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1002;
  display: flex;
  align-items: stretch;
  gap: 8px;
  pointer-events: auto;
}

/* Desktop: to the left of the sidebar overlay */
@media (min-width: 769px) {
  body.jg-fullscreen-active .jg-fs-top-controls {
    top: 10px;
    right: calc(var(--jg-sidebar-w) + 24px);
  }
}

/* Apple-style search control – same look as jg-map-toggle-control */
.jg-fs-search-ctrl {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  display: flex;
  align-items: center;
  padding: 6px 4px 6px 10px;
  gap: 4px;
  position: relative;
  overflow: visible;
  cursor: text;
}

.jg-fs-search-ctrl-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: calc(13 * var(--jg)) !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: #111827 !important;
  width: 150px;
  min-width: 60px;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
}

.jg-fs-search-ctrl-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.jg-fs-search-icon {
  color: #9ca3af;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  pointer-events: none;
}

.jg-fs-search-clear-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: #9ca3af !important;
  padding: 0 2px !important;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: calc(16 * var(--jg)) !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  transition: color 0.15s;
}

.jg-fs-search-clear-btn:hover {
  color: #374151 !important;
  background: none !important;
}

.jg-fs-search-clear-btn.visible {
  display: flex;
}

/* Magnifier submit button inside the search control */
.jg-fs-search-submit-btn {
  background: #8d2324 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: #fff !important;
  padding: 0 !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background 0.15s;
  margin-left: 2px;
  box-shadow: none !important;
}

.jg-fs-search-submit-btn:hover {
  background: #a02829 !important;
}

/* Suggestions dropdown inside the fullscreen search control */
.jg-fs-search-ctrl .jg-search-suggestions {
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 260px;
  border-radius: 8px;
  z-index: 10010;
}

/* Apple-style filter dropdown button – same look as jg-map-toggle-control */
.jg-fs-filter-ctrl {
  position: relative;
  display: flex;
}

.jg-fs-filter-dropdown-btn {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  padding: 6px 10px !important;
  font-size: calc(13 * var(--jg)) !important;
  font-weight: 500 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #374151 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  user-select: none;
  -webkit-user-select: none;
}

.jg-fs-filter-dropdown-btn:hover {
  background: #f9fafb !important;
  color: #374151 !important;
}

.jg-fs-filter-dropdown-btn.jg-active {
  background: #8d2324 !important;
  color: #fff !important;
}

.jg-fs-filter-arrow {
  font-size: calc(9 * var(--jg));
  color: #9ca3af;
  transition: transform 0.2s;
}

.jg-fs-filter-dropdown-btn.jg-active .jg-fs-filter-arrow {
  transform: rotate(180deg);
  color: rgba(255, 255, 255, 0.7);
}

/* Filter dropdown panel – Apple style */
.jg-fs-filter-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10010;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  min-width: 220px;
  padding: 6px;
  overflow: hidden;
}

.jg-fs-filter-dropdown-panel.open {
  display: block;
}

/* Filters inside the dropdown panel */
.jg-fs-filter-dropdown-panel .jg-filters {
  flex-direction: column !important;
  gap: 2px !important;
  background: transparent !important;
  padding: 4px 0 !important;
  margin-bottom: 0 !important;
}

.jg-fs-filter-dropdown-panel .jg-filter-label {
  justify-content: flex-start !important;
  width: 100% !important;
  font-size: calc(13 * var(--jg)) !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  margin-left: 0 !important;
}

.jg-fs-filter-dropdown-panel .jg-filter-label:hover {
  background: #f3f4f6 !important;
}

.jg-fs-filter-dropdown-panel .jg-filter-icon {
  display: inline !important;
  font-size: calc(16 * var(--jg)) !important;
}

.jg-fs-filter-dropdown-panel .jg-filter-text {
  display: inline !important;
}

.jg-fs-filter-dropdown-panel .jg-filter-expand-btn {
  display: none !important;
}

/* Mobile: filter icon-only (no text label), narrower input, keep row layout */
@media (max-width: 768px) {
  .jg-fs-filter-label-text {
    display: none !important;
  }

  .jg-fs-search-ctrl-input {
    width: 110px;
  }
}

/* Very small phones: hide "Filtry" label text, keep icon only */
@media (max-width: 400px) {
  .jg-fs-search-ctrl-input {
    width: 70px;
  }

  .jg-fs-filter-label-text {
    display: none !important;
  }
}

/* ── Progressive top-bar compression ───────────────────────────────────────
   Each breakpoint hides the next "least important" text so the bar stays
   usable as long as possible before anything gets clipped.
   ────────────────────────────────────────────────────────────────────────── */

/* Step 1 ≤1800px — hide longest labels (Admin, Wyloguj) + subtitle of site title */
@media (max-width: 1800px) {
  .jg-top-bar-btn-admin .jg-btn-text,
  a.jg-top-bar-btn[title="Wyloguj"] .jg-btn-text {
    display: none !important;
  }
  .jg-top-bar-btn-admin,
  a.jg-top-bar-btn[title="Wyloguj"] {
    padding: 7px !important;
    width: 34px !important;
    height: 34px !important;
    justify-content: center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  .jg-top-bar-btn-admin .jg-btn-icon,
  a.jg-top-bar-btn[title="Wyloguj"] .jg-btn-icon {
    width: 18px !important;
    height: 18px !important;
  }
  /* Hide "– Interaktywna mapa Jeleniej Góry", keep "Jeleniogórzanie to my" */
  .jg-title-sub {
    display: none !important;
  }
}

/* Step 2 ≤1600px — hide Ranking + Edytuj profil text; shrink XP bar */
@media (max-width: 1600px) {
  #jg-ranking-btn .jg-btn-text,
  #jg-edit-profile-btn .jg-btn-text {
    display: none !important;
  }
  #jg-ranking-btn,
  #jg-edit-profile-btn {
    padding: 7px !important;
    width: 34px !important;
    height: 34px !important;
    justify-content: center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  #jg-ranking-btn .jg-btn-icon,
  #jg-edit-profile-btn .jg-btn-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .jg-top-bar-xp-bar {
    width: 40px !important;
  }
}

/* Step 2b ≤1300px — now hide the entire site title (logo image still visible) */
@media (max-width: 1300px) {
  .jg-top-bar-site-title {
    display: none !important;
  }
}

/* Step 3 ≤1440px — smaller bar padding */
@media (max-width: 1440px) {
  .jg-custom-top-bar {
    padding: 10px 16px;
  }
}

/* Step 4 ≤1280px — tighter padding + smaller button font/padding */
@media (max-width: 1280px) {
  .jg-custom-top-bar {
    padding: 8px 12px;
    min-height: 52px;
  }
  .jg-top-bar-btn {
    padding: 7px 14px;
    font-size: calc(14 * var(--jg));
  }
}

/* Tablet responsive - More compact layout */
@media (max-width: 1024px) {
  .jg-custom-top-bar {
    padding: 10px 14px;
    min-height: 56px;
    gap: 8px;
  }

  .jg-top-bar-left,
  .jg-top-bar-right {
    gap: 10px;
  }

  .jg-top-bar-btn {
    padding: 6px 12px;
    font-size: calc(13 * var(--jg));
  }

  .jg-top-bar-user {
    font-size: calc(14 * var(--jg));
  }

  .jg-top-bar-xp-bar {
    width: 45px;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  /* Hide filter bar above map on mobile - filters are now on the map */
  #jg-map-filters-wrapper {
    display: none !important;
  }

  /* Map fills entire available container space.
     NOTE: height here has NO !important – JS sets inline height via
     style.setProperty('height', …, 'important') which then wins. */
  .jg-wrap,
  #jg-map-wrap {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100%;           /* overridden by JS inline !important */
    min-height: 0 !important;
    max-height: none;       /* overridden by JS inline !important */
    flex: 1 1 0% !important;
  }

  .jg-map {
    flex: 1 1 0% !important;
    min-height: 0 !important;   /* was 300px – prevented shrink below 300 */
    max-height: none !important;
    overflow: hidden !important;
  }

  /* Remove Elementor section/widget padding that creates dead space below the map.
     :has() is supported on iOS 16+, Chrome 105+, Firefox 121+. */
  :is(
    .elementor-section,
    .e-con,
    .e-con-inner,
    .elementor-container,
    .elementor-column,
    .elementor-col-wrap,
    .elementor-widget,
    .elementor-widget-wrap,
    .elementor-widget-container
  ):has(#jg-map-wrap) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── Info bar: sticky on mobile so it never scrolls away ── */
  #jg-info-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100000 !important;
  }

  /* Top bar mobile responsive — styled to match .jg-mobile-user-panel on the map page */
  .jg-custom-top-bar {
    padding: 8px 12px;
    font-size: calc(13 * var(--jg));
    flex-wrap: nowrap !important;
    gap: 8px;
    /* stick below info bar + nav bar; --jg-info-bar-h updated by JS */
    top: calc(var(--jg-info-bar-h, 0px) + 52px) !important;
    border-radius: 0 !important;  /* full-width bar needs no rounded corners */
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    justify-content: flex-start !important;
  }

  /* Hide entire left side (logo + Menu button) — hamburger nav already handles navigation */
  .jg-custom-top-bar .jg-top-bar-left {
    display: none !important;
  }

  .jg-custom-top-bar .jg-top-bar-right {
    gap: 4px;
    flex-wrap: nowrap !important;
    overflow: hidden;
    align-items: center;
    flex: 1 1 auto;
  }

  /* ── Element order matching .jg-mobile-user-panel: info (left) → actions (right) ── */
  .jg-top-bar-user {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 28vw !important;
    font-size: calc(13 * var(--jg)) !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .jg-top-bar-level {
    order: 2 !important;
    flex-shrink: 0 !important;
  }
  #jg-ranking-btn    { order: 3 !important; }
  #jg-edit-profile-btn { order: 4 !important; margin-left: 0 !important; }
  /* .jg-top-bar-btn-admin order is set in the higher-specificity rule below */
  a.jg-top-bar-btn[title="Wyloguj"] { order: 6 !important; }
  #jg-auth-btn       { order: 3 !important; }

  /* Level num: same size as .jg-mup-level-num */
  .jg-top-bar-level-num {
    font-size: calc(12 * var(--jg)) !important;
  }

  /* XP bar: same dimensions as .jg-mup-xp-bar */
  .jg-top-bar-xp-bar {
    width: 3rem !important;
    height: 5px !important;
  }

  .jg-top-bar-site-title {
    font-size: calc(11 * var(--jg));
    white-space: normal;
    line-height: 1.2;
    max-width: 45vw;
  }

  /* ── Action buttons: match .jg-mup-btn exactly ── */
  .jg-custom-top-bar .jg-top-bar-btn {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: background 0.15s !important;
  }
  .jg-custom-top-bar .jg-top-bar-btn:active {
    background: rgba(255,255,255,0.18) !important;
  }
  /* Admin button: transparent bg (no gold), icon stays gold, correct order */
  .jg-custom-top-bar .jg-top-bar-btn-admin {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fbbf24 !important;
    order: 5 !important; /* (0,2,0) beats all:unset on .jg-top-bar-btn (0,2,0) by source order */
  }
  /* Remove legacy ::before pseudo-elements — replaced by SVG icons */
  .jg-custom-top-bar .jg-top-bar-btn::before,
  .jg-custom-top-bar .jg-top-bar-btn::after {
    content: none !important;
    display: none !important;
  }
  /* Hide inline notification badges — too noisy on mobile */
  .jg-custom-top-bar #jg-top-bar-notifications {
    display: none !important;
  }

  .jg-search-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 70vh;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    visibility: visible;
    pointer-events: auto;
    z-index: 10000;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
  }

  .jg-search-panel.active {
    transform: translateY(0);
  }

  .jg-search-results {
    max-height: 45vh;
    overflow-y: auto;
  }

  /* Mobile: collapsible filters */
  .jg-mobile-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #8d2324 0%, #a02829 100%) !important;
    color: #fff !important;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-size: calc(14 * var(--jg));
    line-height: 1.4;
    font-weight: 600;
    border-radius: 12px;
    margin-bottom: 6px;
  }

  .jg-mobile-filters-toggle span {
    color: #fff !important;
  }

  .jg-mobile-filters-toggle .jg-toggle-arrow {
    transition: transform 0.2s;
    font-size: calc(12 * var(--jg));
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .jg-mobile-filters-toggle.expanded .jg-toggle-arrow {
    transform: rotate(180deg);
    color: #fff !important;
  }

  #jg-map-filters-wrapper.collapsed #jg-map-filters,
  #jg-map-filters-wrapper.collapsed #jg-category-filters {
    display: none !important;
  }

  /* Mobile filters - icon only */
  .jg-filters {
    justify-content: space-between;
    gap: 4px;
    padding: 8px;
  }

  .jg-filter-label {
    padding: 8px;
    min-width: 46px;
    justify-content: center;
    border: 2px solid transparent;
  }

  .jg-filter-label input[type="checkbox"] {
    display: none;
  }

  .jg-filter-icon {
    display: block;
    font-size: calc(24 * var(--jg));
  }

  .jg-filter-text {
    display: none;
  }

  .jg-filter-label input[type="checkbox"]:checked + .jg-filter-icon {
    transform: scale(1.1);
  }

  .jg-filter-label input[type="checkbox"]:checked ~ .jg-filter-label {
    background: rgba(141, 35, 36, 0.1);
    border-color: #8d2324;
  }

  /* Visual feedback for checked state */
  .jg-filter-label:has(input[type="checkbox"]:checked) {
    background: rgba(141, 35, 36, 0.1);
    border-color: #8d2324;
  }

  .jg-search {
    flex: 1;
    min-width: 120px;
    max-width: none;
  }

  /* Modal adjustments for mobile.
     padding: 14px sets all sides; padding-top overrides the shorthand to
     place the modal below the nav bar. align-items:flex-start means the
     modal starts exactly at padding-top, so this MUST account for nav height.
     Both rules need !important to beat the desktop base rule AND to prevent
     accidental JS override via inline style (which cannot beat !important). */
  .jg-modal-bg {
    padding: 14px !important;
    padding-top: calc(var(--jg-nav-bottom, 60px) + 14px) !important;
  }
  .jg-modal {
    max-height: calc(100dvh - var(--jg-nav-bottom, 60px) - 28px);
    /* On mobile scroll the whole modal as a single block */
    overflow: auto !important;
    display: block !important;
  }

  /* Modal header - allow wrapping for badges but hide X from flex */
  .jg-modal header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 48px 12px 10px !important; /* Extra right padding for absolute X */
    position: relative;
    overflow: hidden;
  }

  /* Ranking header - match pin modal header proportions on mobile */
  .jg-modal .jg-ranking-header {
    padding: 20px 48px 20px 20px !important; /* Generous vertical padding, right space for X */
    overflow: visible !important; /* Don't clip ranking header content */
  }

  /* Prevent header children from overflowing */
  .jg-modal header > div {
    min-width: 0;
    overflow: hidden;
    flex-shrink: 1;
  }

  /* Truncate long header title on mobile */
  .jg-modal header h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Truncate long badge text on mobile */
  .jg-modal header > div > div {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Position close button absolutely, vertically centered in header on mobile */
  .jg-modal header .jg-close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: calc(28 * var(--jg));
    color: #374151;
    margin: 0 !important;
    flex-shrink: 0;
  }
}

/* Stack top bar on very small screens */
@media (max-width: 640px) {
  .jg-custom-top-bar {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    padding: 6px 12px;
  }

  /* Hide left section — hamburger nav covers navigation on mobile */
  .jg-top-bar-left {
    display: none !important;
  }

  /* Right section stays as a single compact row */
  .jg-top-bar-right {
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    gap: 8px;
    align-items: center;
    overflow: hidden;
  }

  /* Remove column-layout separators — layout and order are handled by the 768px block */
  .jg-top-bar-user {
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .jg-top-bar-level {
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .jg-top-bar-notif {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }

  .jg-top-bar-notif:hover {
    background: #f9fafb;
    border-color: rgba(0, 0, 0, 0.2);
  }

  /* Hide text labels, show only icons */
  .jg-top-bar-notif span:first-child {
    font-size: 0;
    line-height: 0;
  }

  /* Show only emoji by setting font-size to 22px for emoji characters */
  .jg-top-bar-notif span:first-child::before {
    font-size: calc(22 * var(--jg));
    line-height: 1;
    display: inline-block;
  }

  /* Extract emoji for each notification type */
  .jg-top-bar-notif[data-type*="nowe"] span:first-child::before {
    content: "➕";
  }

  .jg-top-bar-notif[data-type*="edycje"] span:first-child::before {
    content: "📝";
  }

  .jg-top-bar-notif[data-type*="zgłoszenia"] span:first-child::before {
    content: "🚨";
  }

  .jg-top-bar-notif[data-type*="usunięcia"] span:first-child::before {
    content: "🗑️";
  }

  /* Position badge absolutely in top-right corner of circle */
  .jg-top-bar-notif .jg-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    font-size: calc(10 * var(--jg));
    background: #ef4444;
    border: 2px solid #8d2324;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  /* Action buttons (Edit Profile, Admin Panel, Logout) - white icon + text with bullet separators */
  .jg-top-bar-btn:not(.jg-top-bar-notif) {
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 4px 8px;
    font-size: calc(13.6 * var(--jg));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    background: transparent;
    border: none;
    flex-shrink: 0;
    color: #ffffff;
    white-space: nowrap;
  }

  .jg-top-bar-btn:not(.jg-top-bar-notif):hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  /* Login/Register buttons on mobile - white icon + text with bullet separator */
  #jg-login-btn,
  #jg-register-btn {
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 4px 8px;
    font-size: calc(13.6 * var(--jg));
    background: transparent;
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  #jg-login-btn:hover,
  #jg-register-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  /* Add white Unicode icons to login/register buttons */
  #jg-login-btn::before {
    content: "→";
    font-size: calc(16 * var(--jg));
    display: inline-block;
    color: #ffffff;
  }

  #jg-register-btn::before {
    content: "✚";
    font-size: calc(16 * var(--jg));
    display: inline-block;
    color: #ffffff;
  }

  /* Remove bullet separator - no separator needed */
  /* Separator removed for cleaner mobile navigation */

  /* Fix Leaflet zoom control visibility on mobile */
  .leaflet-control-zoom {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
  }

  .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: calc(16 * var(--jg)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure zoom buttons are always visible and not hidden by map interactions */
  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Keep filters visible - prevent them from disappearing on map click */
  .jg-filters {
    display: flex !important;
    visibility: visible !important;
    z-index: 400 !important;  /* Lower than top bar (9999) to not overlap during scroll */
    position: relative !important;
  }

  /* Force filter bar to stay visible even when map is focused */
  #jg-map-filters {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 400 !important;  /* Lower than top bar to not overlap during scroll */
  }

  /* Fix FAB (Floating Action Button) visibility on mobile */
  /* Ensure map container has relative positioning for FAB */
  .jg-map {
    position: relative !important;
  }

  #jg-fab-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;  /* Absolute relative to .jg-map container */
    z-index: 1001 !important;  /* Above Leaflet controls (1000) */
    bottom: 15px !important;  /* Bottom-right corner of map */
    right: 15px !important;
    pointer-events: auto !important;
  }

  #jg-fab-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 56px !important;
    height: 56px !important;
  }

  #jg-help-fab {
    bottom: 15px !important;
    left: 15px !important;
  }

  #jg-help-btn {
    width: 56px !important;
    height: 56px !important;
  }

  /* User counter: align vertically with FABs and center horizontally between them */
  #jg-user-count-indicator {
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

}


/* Prevent page scroll when modal is open */
body.jg-modal-open {
  overflow: hidden;
}

/* Modals */
.jg-modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  /* flex-start: modal top is pinned to padding-top edge — it can never
     drift above the nav bar the way align-items:center can when modal
     height approaches the padded content area height. */
  align-items: flex-start;
  justify-content: center;
  z-index: 10001;
  /* CSS-level positioning using --jg-nav-bottom (set by jgUpdateNavBottom()
     in the inline PHP script, never affected by JS file caching).
     JS (jgPositionModalBg / jgFitModal) overwrites these at open-time with
     exact measured values, but this CSS already produces a correct layout
     even without JS. */
  padding: calc(18 * var(--jg));
  padding-top: calc(var(--jg-nav-bottom, 90px) + 18 * var(--jg));
}

.jg-modal {
  background: #fff;
  color: #111;
  width: min(900px, 96vw);
  /* CSS-level max-height keeps the modal inside the available area below
     the nav bar. JS (jgFitModal) overwrites this with a precisely measured
     value, but the CSS fallback is already correct. */
  max-height: calc(100dvh - var(--jg-nav-bottom, 90px) - 36px);
  border-radius: calc(12 * var(--jg));
  padding: calc(14 * var(--jg));
  /* overflow:hidden keeps scrollbar inside the rounded corners on desktop.
     Inner non-header children carry overflow-y:auto via the flex rule below.
     On mobile the more specific rule in the media query overrides to block+auto. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Desktop: header stays pinned, non-header children scroll inside the frame */
@media (min-width: 769px) {
  .jg-modal header {
    flex-shrink: 0;
  }

  /* Every direct child that is not a header becomes the scrollable body.
     min-height: 0 is required so a flex child can shrink below its content size. */
  .jg-modal > *:not(header):not(.jg-ranking-header) {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
}

.jg-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--jg));
  margin: calc(-14 * var(--jg)) calc(-14 * var(--jg)) calc(16 * var(--jg)) calc(-14 * var(--jg));
  padding: calc(16 * var(--jg)) calc(14 * var(--jg));
  position: sticky;
  top: calc(-14 * var(--jg));
  background: #fff;
  z-index: 20;
  border-bottom: 2px solid #eee;
  border-radius: calc(12 * var(--jg)) calc(12 * var(--jg)) 0 0;
}

.jg-modal header h3 {
  margin: 0;
  font-size: calc(22 * var(--jg)); /* 22px */
  font-weight: 700;
  color: #111;
}

/* Place title in modal - improved readability */
.jg-place-title {
  font-size: calc(28 * var(--jg)) !important; /* 28px - larger, more prominent */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #111 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* Place content/description - improved readability */
.jg-place-content,
.jg-place-excerpt {
  font-size: calc(20 * var(--jg)) !important; /* 20px - larger for better readability */
  line-height: 1.8 !important; /* More breathing room */
  color: #374151 !important; /* Softer black for less eye strain */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  margin: 1rem 0 !important; /* 16px vertical spacing */
}

/* Override all text elements inside place content */
.jg-place-content *,
.jg-place-content p,
.jg-place-content div,
.jg-place-content span,
.jg-place-excerpt {
  font-size: calc(20 * var(--jg)) !important; /* 20px */
  line-height: 1.8 !important;
  color: #374151 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.jg-place-content p,
.jg-place-excerpt {
  margin-bottom: 1rem !important; /* 16px between paragraphs */
}

.jg-place-content p:last-child {
  margin-bottom: 0 !important;
}

/* Pin links in content */
.jg-place-content a.jg-pin-link {
  color: #8d2324 !important;
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}
.jg-place-content a.jg-pin-link:hover {
  color: #b91c1c !important;
}
.jg-place-content a:not(.jg-pin-link) {
  color: #2563eb !important;
  text-decoration: underline;
}
.jg-place-content a:not(.jg-pin-link):hover {
  color: #1d4ed8 !important;
}

/* ===== Rich Text Editor ===== */
.jg-rte-wrap {
  position: relative;
  border: 1px solid #ddd;
  border-radius: calc(8 * var(--jg));
  overflow: visible;
  background: #fff;
  transition: border-color 0.2s;
}
.jg-rte-wrap:focus-within {
  border-color: #8d2324;
  box-shadow: 0 0 0 3px rgba(141, 35, 36, 0.1);
}
.jg-rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 * var(--jg));
  padding: calc(6 * var(--jg)) calc(8 * var(--jg));
  background: #f9fafb;
  border-bottom: 1px solid #ddd;
  border-radius: calc(7 * var(--jg)) calc(7 * var(--jg)) 0 0;
  align-items: center;
}
.jg-rte-btn {
  background: #111 !important;
  background-color: #111 !important;
  color: #fff !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: calc(8 * var(--jg)) !important;
  padding: calc(6 * var(--jg)) calc(10 * var(--jg)) !important;
  cursor: pointer !important;
  font-size: calc(13 * var(--jg)) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transition: background 0.15s !important;
  white-space: nowrap !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}
.jg-rte-btn:hover {
  background: #333 !important;
  background-color: #333 !important;
  color: #fff !important;
}
.jg-rte-sep {
  display: inline-block;
  width: 1px;
  height: calc(18 * var(--jg));
  background: #ddd;
  margin: 0 calc(3 * var(--jg));
  flex-shrink: 0;
}
.jg-section-incomplete {
  background: rgba(255, 30, 30, 0.1);
  border: 2px dotted rgba(220, 38, 38, 0.5);
  border-radius: 3px;
  padding: 1px 2px;
  cursor: help !important;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
div.jg-section-incomplete,
ul.jg-section-incomplete,
ol.jg-section-incomplete,
li.jg-section-incomplete,
p.jg-section-incomplete,
h1.jg-section-incomplete,
h2.jg-section-incomplete,
h3.jg-section-incomplete,
h4.jg-section-incomplete,
h5.jg-section-incomplete,
h6.jg-section-incomplete,
blockquote.jg-section-incomplete {
  display: block;
  position: relative;
  padding: 2px 4px;
  box-sizing: border-box;
}
.jg-section-incomplete a,
.jg-section-incomplete * {
  cursor: help !important;
}
a.jg-section-incomplete {
  display: inline;
}
/* Badge in the top-right corner of the outermost incomplete section */
.jg-section-incomplete:not(.jg-section-incomplete *)::after {
  content: '⚠ Uzupełnij dane';
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: #b91c1c;
  color: #fff;
  font-size: calc(13 * var(--jg));
  font-weight: 600;
  line-height: 1.6;
  padding: calc(1 * var(--jg)) calc(6 * var(--jg));
  border-radius: 0 2px 0 4px;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
span.jg-section-incomplete:not(.jg-section-incomplete *) {
  display: inline-block;
  position: relative;
}

.jg-rte-editor {
  padding: calc(10 * var(--jg)) calc(12 * var(--jg));
  min-height: clamp(80px, 10vh, 120px);
  max-height: clamp(180px, 25vh, 300px);
  overflow-y: auto;
  font-size: calc(14 * var(--jg));
  line-height: 1.6;
  color: #111;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.jg-rte-editor:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}
.jg-rte-editor ul,
.jg-rte-editor ol {
  margin: calc(4 * var(--jg)) 0;
  padding-left: calc(24 * var(--jg));
}
.jg-rte-editor li {
  margin-bottom: 2px;
}
.jg-rte-editor a {
  color: #8d2324;
  text-decoration: underline;
}
.jg-rte-editor a.jg-pin-link {
  color: #8d2324;
  font-weight: 500;
}
.jg-rte-counter {
  padding: calc(4 * var(--jg)) calc(12 * var(--jg)) calc(6 * var(--jg));
  font-size: calc(11 * var(--jg));
  color: #999;
  text-align: right;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 calc(7 * var(--jg)) calc(7 * var(--jg));
}

/* Link dialog */
.jg-rte-link-dialog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(32 * var(--jg));
  background: #fff;
  border: 1px solid #ddd;
  border-radius: calc(8 * var(--jg));
  padding: calc(14 * var(--jg)) calc(16 * var(--jg));
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 100;
}
.jg-rte-link-dialog label {
  display: block;
  font-size: calc(13 * var(--jg));
  color: #111;
}
.jg-rte-link-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(12 * var(--jg));
  padding-bottom: calc(8 * var(--jg));
  border-bottom: 1px solid #ddd;
}
.jg-rte-link-dialog-header strong {
  font-size: calc(14 * var(--jg));
  color: #111;
}
.jg-rte-link-close {
  background: none;
  border: none;
  font-size: calc(20 * var(--jg));
  cursor: pointer;
  color: #999;
  padding: 0 calc(4 * var(--jg));
  line-height: 1;
  transition: color 0.15s;
}
.jg-rte-link-close:hover {
  color: #8d2324;
}

/* Pin autocomplete results */
.jg-rte-pin-results {
  max-height: clamp(120px, 18vh, 200px);
  overflow-y: auto;
  margin-top: calc(6 * var(--jg));
  border: 1px solid #ddd;
  border-radius: calc(8 * var(--jg));
  background: #fff;
}
.jg-rte-pin-results:empty {
  display: none;
}
.jg-rte-pin-hint {
  padding: calc(12 * var(--jg));
  font-size: calc(12 * var(--jg));
  color: #9ca3af;
  text-align: center;
}
.jg-rte-pin-item {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--jg));
  padding: calc(8 * var(--jg)) calc(10 * var(--jg));
  cursor: pointer;
  font-size: calc(13 * var(--jg));
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.1s;
}
.jg-rte-pin-item:last-child {
  border-bottom: none;
}
.jg-rte-pin-item:hover {
  background: #f9f5f5;
}
.jg-rte-pin-item--selected {
  background: #fdf2f2 !important;
  border-left: 3px solid #8d2324;
}
.jg-rte-pin-type {
  display: inline-block;
  padding: calc(2 * var(--jg)) calc(8 * var(--jg));
  border-radius: 999px;
  font-size: calc(10 * var(--jg));
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.jg-rte-pin-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111;
}

/* Small buttons for RTE dialogs */
.jg-btn--sm {
  padding: calc(6 * var(--jg)) calc(14 * var(--jg)) !important;
  font-size: calc(13 * var(--jg)) !important;
  min-height: auto !important;
  border-radius: calc(8 * var(--jg)) !important;
}

/* Mobile: stack toolbar buttons more compactly */
@media (max-width: 600px) {
  .jg-rte-toolbar {
    gap: 2px;
    padding: 4px 6px;
  }
  .jg-rte-btn {
    padding: 5px 7px;
    font-size: calc(12 * var(--jg));
  }
  .jg-rte-sep {
    height: 16px;
    margin: 0 2px;
  }
  .jg-rte-editor {
    min-height: 80px;
    padding: 8px 10px;
  }
  .jg-rte-link-dialog {
    padding: 10px 12px;
  }
}

.jg-modal header .jg-close {
  font-size: calc(24 * var(--jg));
  line-height: 1;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  cursor: pointer;
  padding: 0 0 calc(2 * var(--jg)) 0;
  color: #374151;
  width: calc(36 * var(--jg));
  height: calc(36 * var(--jg));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
  box-sizing: border-box;
}

.jg-modal header .jg-close:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #111;
}

.jg-modal--miejsce header {
  background: #d1fae5;
  border-bottom-color: #86efac;
}

.jg-modal--ciekawostka header {
  background: #dbeafe;
  border-bottom-color: #93c5fd;
}

.jg-modal--zgloszenie header {
  background: #e5e7eb;
  border-bottom-color: #d1d5db;
}

.jg-modal--promo header {
  background: linear-gradient(90deg, #fff7e6, #fef3c7);
  border-bottom-color: #f7d899;
}


/* Buttons - base styles */
.jg-btn {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: calc(14 * var(--jg));
}

.jg-btn:hover {
  background: #333;
}

.jg-btn.jg-btn--ghost {
  background: transparent;
  color: #111;
  border: 1px solid #ddd;
}

.jg-btn.jg-btn--ghost:hover {
  background: #f5f5f5;
}

.jg-btn.jg-btn--secondary {
  background: #fff;
  color: #111;
  border: 1px solid #ddd;
}

.jg-btn.jg-btn--secondary:hover {
  background: #f5f5f5;
  color: #111;
}

.jg-btn.jg-btn--danger {
  background: #dc2626;
  color: #fff;
}

.jg-btn.jg-btn--danger:hover {
  background: #b91c1c;
}

/* ── Elementor Style Isolation for Plugin Buttons ── */
/* Override any Elementor global/theme button styles with !important */
#jg-map-wrap .jg-btn,
.jg-modal-bg .jg-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111 !important;
  background-color: #111 !important;
  color: #fff !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  font-size: calc(14 * var(--jg)) !important;
  font-weight: 400 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  outline: none !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#jg-map-wrap .jg-btn:hover,
.jg-modal-bg .jg-btn:hover {
  background: #333 !important;
  background-color: #333 !important;
  color: #fff !important;
}

#jg-map-wrap .jg-btn.jg-btn--ghost,
.jg-modal-bg .jg-btn.jg-btn--ghost {
  background: transparent !important;
  background-color: transparent !important;
  color: #111 !important;
  border: 1px solid #ddd !important;
  border-width: 1px !important;
}

#jg-map-wrap .jg-btn.jg-btn--ghost:hover,
.jg-modal-bg .jg-btn.jg-btn--ghost:hover {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
  color: #111 !important;
}

#jg-map-wrap .jg-btn.jg-btn--secondary,
.jg-modal-bg .jg-btn.jg-btn--secondary,
.jg-search-panel .jg-btn.jg-btn--secondary {
  background: #fff !important;
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #ddd !important;
  border-width: 1px !important;
}

#jg-map-wrap .jg-btn.jg-btn--secondary:hover,
.jg-modal-bg .jg-btn.jg-btn--secondary:hover,
.jg-search-panel .jg-btn.jg-btn--secondary:hover {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
  color: #111 !important;
}

#jg-map-wrap .jg-btn.jg-btn--danger,
.jg-modal-bg .jg-btn.jg-btn--danger {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  color: #fff !important;
  border: none !important;
  border-width: 0 !important;
}

#jg-map-wrap .jg-btn.jg-btn--danger:hover,
.jg-modal-bg .jg-btn.jg-btn--danger:hover {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
}

#jg-map-wrap .jg-btn.jg-btn--sm,
.jg-modal-bg .jg-btn.jg-btn--sm {
  padding: 6px 14px !important;
  font-size: calc(13 * var(--jg)) !important;
}

.jg-search-panel-footer .jg-btn {
  width: 100% !important;
}

/* Push non-fullscreen page content up so the fixed footer doesn't cover it */
body.jg-has-map #jg-map-wrap:not(.jg-fullscreen) {
  padding-bottom: var(--jg-footer-h, 28px) !important;
  box-sizing: border-box !important;
}

/* Sponsored CTA Button - Square button inside contact info frame */
.jg-btn-cta-sponsored {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  padding: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
  background-size: 200% 100%;
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: calc(10 * var(--jg)) !important;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
  gap: 2px;
  box-shadow: 0 4px 0 #d97706, 0 6px 12px rgba(245, 158, 11, 0.4);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.jg-btn-cta-sponsored::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.jg-btn-cta-sponsored:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #d97706, 0 8px 16px rgba(245, 158, 11, 0.5);
  background-position: 100% 0;
}

.jg-btn-cta-sponsored:hover::before {
  left: 100%;
}

.jg-btn-cta-sponsored:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #d97706, 0 4px 8px rgba(245, 158, 11, 0.3);
}

/* Grid */
.jg-grid {
  display: grid;
  /* minmax(0,1fr): the single implicit column always fills available width and
     can shrink to 0 — prevents auto-sizing to min-content which would make the
     column narrower than the container and cause content to appear right-shifted
     or to scroll horizontally. cols-2 overrides this with 1fr 1fr below. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* Prevent horizontal scroll in the view modal's content grid.
   The inline style uses overflow-x:hidden (set in JS); !important is kept as
   belt-and-suspenders in case any future inline style reverts to overflow:auto. */
.jg-modal .jg-grid:not(.cols-2) {
  overflow-x: hidden !important;
}

.jg-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.jg-grid.cols-2 > .cols-2 {
  grid-column: 1/-1;
}

/* Badges */
.jg-badge {
  display: inline-block;
  background: #f0f2f5;
  color: #111;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: calc(12 * var(--jg));
  margin-right: 6px;
}

.jg-promo-tag {
  display: inline-block;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  color: #111;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  margin-right: 6px;
  font-size: calc(12 * var(--jg));
}

/* Responsive badge on mobile */
@media (max-width: 768px) {
  .jg-promo-tag {
    font-size: calc(11 * var(--jg));
    padding: 3px 6px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .jg-promo-tag {
    font-size: calc(10 * var(--jg));
    padding: 2px 5px;
  }
}

/* Voting */
/* Star rating widget — !important guards against Elementor/theme overrides */
.jg-vote {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  background: none !important;
  padding: 0.75rem 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 0.625rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

.jg-vote-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.jg-vote-stars {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  line-height: 1 !important;
}

.jg-star-btn {
  all: revert !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: calc(30 * var(--jg)) !important;
  color: #d1d5db !important;
  padding: 2px 2px !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-family: inherit !important;
  transition: color 0.15s, transform 0.1s !important;
  outline: none !important;
}

.jg-star-btn:hover,
.jg-star-btn.active {
  color: #f59e0b !important;
  transform: scale(1.15) !important;
  background: none !important;
  border: none !important;
}

.jg-star-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Own point — read-only, no interaction */
.jg-vote--own .jg-star-btn {
  cursor: default !important;
  pointer-events: none !important;
}

.jg-vote-avg {
  font-size: calc(14 * var(--jg)) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.jg-vote-hint {
  font-size: calc(12 * var(--jg)) !important;
  color: #6b7280 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.jg-vote--own .cnt {
  font-size: calc(14 * var(--jg));
  font-weight: 600;
  min-width: auto;
  line-height: 1;
}

.jg-vote-own-icon {
  font-size: calc(16 * var(--jg));
}

/* Share bar */
.jg-share-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.jg-share-label {
  font-size: calc(13 * var(--jg));
  font-weight: 500;
  color: #64748b;
  margin-right: 4px;
  white-space: nowrap;
}

.jg-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  text-decoration: none;
  background: #8d2324;
  color: #fff;
}

.jg-share-btn svg {
  display: block;
}

.jg-share-btn:hover {
  transform: scale(1.12);
  opacity: 0.85;
  color: #fff;
}

.jg-share-btn--copied {
  background: #10b981 !important;
}

/* Gallery */
.jg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.jg-gallery img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s;
}

.jg-gallery img:hover {
  transform: scale(1.05);
}

/* Lightbox */
.jg-lightbox {
  background: #000;
  width: min(92vw, 1200px);
  max-height: 90vh;
  border-radius: 12px;
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* Lightbox backdrop sits above all other modals (9999) */
/* pointer-events: auto overrides the mobile .jg-modal-bg rule that sets none !important */
#jg-map-lightbox.jg-modal-bg {
  z-index: 10001;
  pointer-events: auto !important;
}

.jg-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  margin: 0 auto;
}

.jg-lightbox .jg-lb-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (max-width: 768px) {
  .jg-lightbox .jg-lb-close {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 16px;
    font-size: calc(16 * var(--jg));
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Markers - SVG Pin Style */
.jg-pin-marker {
  background: transparent !important;
  border: none !important;
  will-change: transform;
}

.jg-pin-svg-wrapper {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.jg-pin-svg-wrapper:hover {
  transform: translateY(-4px);
}

.jg-pin-emoji {
  pointer-events: none;
  user-select: none;
}

/* Twemoji SVG images inside pin markers */
.jg-pin-emoji img.emoji {
  height: 1em;
  width: 1em;
  display: inline-block;
  vertical-align: middle;
}

/* Twemoji images in general UI elements (filter buttons, top bar, notifications, etc.) */
img.emoji {
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* Sponsored pin - No animation, just subtle shadow */
.jg-pin-marker--promo .jg-pin-svg-wrapper {
  position: relative;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3));
}

/* Legacy support for old circular pins (if needed) */
.jg-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  color: #fff;
  background: #111;
  font-size: calc(20 * var(--jg));
}

.jg-pin--ciekawostka {
  background: #2563eb;
}

.jg-pin--miejsce {
  background: #16a34a;
}

.jg-pin--promo {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  color: #111;
  font-size: calc(28 * var(--jg));
  font-weight: 800;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7), 0 4px 16px rgba(245, 158, 11, 0.5);
}

.jg-pin.jg-pin--pending {
  background: #dc2626 !important;
  opacity: 0.7 !important;
}

.jg-pin.jg-pin--edit {
  background: #9333ea !important;
  opacity: 0.7 !important;
}

.jg-reports-counter {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #dc2626;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11 * var(--jg));
  font-weight: 700;
  border: 2px solid #fff;
  z-index: 10;
}

.jg-deletion-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  background: #fff;
  color: #dc2626;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14 * var(--jg));
  font-weight: 700;
  border: 2px solid #dc2626;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.leaflet-marker-icon.jg-pin--promo {
  z-index: 1000 !important;
}

.leaflet-marker-icon.jg-pin-marker--promo {
  z-index: 1000 !important;
}

/* Marker Labels */
.jg-marker-label {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: calc(12 * var(--jg));
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 1000;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.jg-marker-label--promo {
  background: linear-gradient(135deg, #fff7e6, #fef3c7);
  border: 2px solid #f59e0b;
  padding: 6px 12px;
  font-size: calc(13 * var(--jg));
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.4);
}

.jg-marker-label--pending {
  background: rgba(254, 226, 226, 0.95) !important;
  color: #991b1b !important;
  border: 1px solid #dc2626 !important;
  opacity: 0.9 !important;
}

.jg-marker-label--edit {
  background: rgba(243, 232, 255, 0.95) !important;
  color: #6b21a8 !important;
  border: 1px solid #9333ea !important;
  opacity: 0.9 !important;
}

.jg-marker-label--reported {
  background: rgba(254, 243, 199, 0.95) !important;
  color: #713f12 !important;
  border: 1px solid #ca8a04 !important;
  opacity: 0.9 !important;
}

/* Admin Note */
.jg-admin-note {
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
}

.jg-admin-note-title {
  font-weight: 700;
  color: #92400e;
  margin-bottom: 8px;
  font-size: calc(14 * var(--jg));
}

.jg-admin-note-content {
  color: #78350f;
  line-height: 1.5;
}

/* Admin Panel */
.jg-admin-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
}

.jg-admin-panel-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}

.jg-admin-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Reports Warning */
.jg-reports-warning {
  background: #fee;
  border: 2px solid #dc2626;
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
}

.jg-reports-warning-title {
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 8px;
  font-size: calc(16 * var(--jg));
}

.jg-report-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  margin-top: 8px;
}

.jg-report-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.jg-report-item-user {
  font-weight: 600;
  color: #111;
}

.jg-report-item-date {
  font-size: calc(12 * var(--jg));
  color: #666;
}

.jg-report-item-reason {
  color: #444;
  font-size: calc(14 * var(--jg));
  line-height: 1.5;
}

/* Date Info */
.jg-date-info {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font-size: calc(13 * var(--jg)) !important;
  color: #6b7280 !important;
  font-family: inherit !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}

.jg-date-info .jg-meta-date,
.jg-date-info .jg-meta-sep,
.jg-date-info .jg-meta-author {
  font-size: calc(13 * var(--jg)) !important;
  color: #6b7280 !important;
  font-family: inherit !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
}

.jg-date-info .jg-meta-author-link {
  font-size: calc(13 * var(--jg)) !important;
  color: #6b7280 !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* Meta row: date info + voting on the same line */
.jg-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.jg-meta-row .jg-date-info {
  margin-bottom: 0 !important;
}

.jg-meta-row .jg-vote,
.jg-meta-row .jg-vote--own {
  margin-top: 0 !important;
  padding: 0.3rem 0 !important;
  flex-shrink: 0 !important;
  width: fit-content !important;
}

.jg-meta-row .jg-star-btn {
  font-size: calc(22 * var(--jg)) !important;
}

.jg-meta-row .jg-vote-avg {
  font-size: calc(12 * var(--jg)) !important;
}

@media (max-width: 520px) {
  .jg-meta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

/* Status Badge */
.jg-status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: calc(13 * var(--jg));
  font-weight: 600;
  margin-bottom: 12px;
}

.jg-status-badge--added {
  background: #e5e7eb;
  color: #374151;
}

.jg-status-badge--reported {
  background: #dbeafe;
  color: #1e40af;
}

.jg-status-badge--resolved {
  background: #d1fae5;
  color: #065f46;
}

.jg-status-badge--needs_better_documentation {
  background: #fef3c7;
  color: #92400e;
}

.jg-status-badge--processing {
  background: #ffedd5;
  color: #9a3412;
}

/* Case ID Badge */
.jg-case-id-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: calc(11 * var(--jg));
  font-weight: 500;
  margin-bottom: 12px;
  margin-left: 8px;
  background: #f3f4f6;
  color: #4b5563;
}

/* Map/Satellite Toggle Control */
.jg-map-toggle-control {
  background: #fff;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  overflow: hidden;
}

.jg-map-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.jg-map-toggle-label {
  font-size: calc(13 * var(--jg));
  font-weight: 500;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jg-map-toggle-label--active {
  color: #111;
  font-weight: 600;
}

.jg-map-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.jg-map-toggle-switch[data-active="satellite"] {
  background: #8d2324;
}

.jg-map-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.jg-map-toggle-switch[data-active="satellite"] .jg-map-toggle-thumb {
  transform: translateX(16px);
}

/* Fullscreen: map/satellite toggle – compact vertical slider with icon above/below */
#jg-map-wrap.jg-fullscreen .jg-map-toggle-control {
  margin-left: 14px !important;
  margin-top: 6px !important;
  width: 36px !important;
  overflow: visible !important; /* allow icons to be visible */
}

#jg-map-wrap.jg-fullscreen .jg-map-toggle {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  gap: 4px;
  width: 36px;
}

/* In fullscreen: show labels but display only the SVG icon (hide text) */
#jg-map-wrap.jg-fullscreen .jg-map-toggle-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  white-space: normal;
}

#jg-map-wrap.jg-fullscreen .jg-map-toggle-text {
  display: none !important;
}

#jg-map-wrap.jg-fullscreen .jg-map-toggle-icon {
  width: 14px !important;
  height: 14px !important;
  display: block;
}

/* Vertical slider: narrow width, tall height, thumb moves top→bottom */
#jg-map-wrap.jg-fullscreen .jg-map-toggle-switch {
  width: 20px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

/* Thumb at top = Mapa */
#jg-map-wrap.jg-fullscreen .jg-map-toggle-thumb {
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  transform: translateY(0) !important;
  transition: transform 0.2s !important;
}

/* Thumb at bottom = Satelita */
#jg-map-wrap.jg-fullscreen .jg-map-toggle-switch[data-active="satellite"] .jg-map-toggle-thumb {
  transform: translateY(20px) !important;
}

@media (max-width: 768px) {
  #jg-map-wrap.jg-fullscreen .jg-map-toggle-control {
    margin-left: 10px !important;
    margin-top: 4px !important;
    width: 32px !important;
  }
  #jg-map-wrap.jg-fullscreen .jg-map-toggle {
    width: 32px;
    padding: 4px 6px;
    gap: 3px;
  }
  #jg-map-wrap.jg-fullscreen .jg-map-toggle-icon {
    width: 12px !important;
    height: 12px !important;
  }
  #jg-map-wrap.jg-fullscreen .jg-map-toggle-switch {
    width: 18px !important;
    height: 36px !important;
  }
  #jg-map-wrap.jg-fullscreen .jg-map-toggle-thumb {
    width: 14px !important;
    height: 14px !important;
  }
  #jg-map-wrap.jg-fullscreen .jg-map-toggle-switch[data-active="satellite"] .jg-map-toggle-thumb {
    transform: translateY(18px) !important;
  }
}

/* Desktop-wide: map/satellite toggle – compact vertical slider (mirrors fullscreen) */
@media (min-width: 769px) {
  #jg-map-wrap.jg-desktop-wide .jg-map-toggle-control {
    margin-left: 14px !important;
    margin-top: 6px !important;
    width: 36px !important;
    overflow: visible !important;
  }

  #jg-map-wrap.jg-desktop-wide .jg-map-toggle {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    gap: 4px;
    width: 36px;
  }

  #jg-map-wrap.jg-desktop-wide .jg-map-toggle-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    white-space: normal;
  }

  #jg-map-wrap.jg-desktop-wide .jg-map-toggle-text {
    display: none !important;
  }

  #jg-map-wrap.jg-desktop-wide .jg-map-toggle-icon {
    width: 14px !important;
    height: 14px !important;
    display: block;
  }

  #jg-map-wrap.jg-desktop-wide .jg-map-toggle-switch {
    width: 20px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  #jg-map-wrap.jg-desktop-wide .jg-map-toggle-thumb {
    top: 2px !important;
    left: 2px !important;
    width: 16px !important;
    height: 16px !important;
    transform: translateY(0) !important;
    transition: transform 0.2s !important;
  }

  #jg-map-wrap.jg-desktop-wide .jg-map-toggle-switch[data-active="satellite"] .jg-map-toggle-thumb {
    transform: translateY(20px) !important;
  }
}

/* Leaflet Overrides */
.leaflet-container {
  background: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.leaflet-container a {
  color: #2563eb;
}

/* Animations */
@keyframes pulse-gold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7), 0 4px 16px rgba(245, 158, 11, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0), 0 4px 24px rgba(245, 158, 11, 0.8);
  }
}

/* Cluster z-index layers */
.marker-cluster {
  z-index: 500 !important;
}

/* Grid Cluster Layout */
.jg-cluster-wrapper {
  background: transparent !important;
}

.jg-cluster-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.jg-cluster-grid-top {
  display: flex;
  justify-content: center;
  width: 100%;
}

.jg-cluster-grid-bottom {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.jg-cluster-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-weight: 700;
}

.jg-cluster-icon {
  font-size: calc(18 * var(--jg));
}

.jg-cluster-num {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #fff;
  color: #111;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11 * var(--jg));
  font-weight: 800;
  border: 2px solid currentColor;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Sponsored cell - gold */
.jg-cluster-cell--sponsored {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  color: #111;
  width: 56px;
  height: 56px;
  animation: pulse-gold 2s ease-in-out infinite;
}

.jg-cluster-cell--sponsored .jg-cluster-num {
  border-color: #f59e0b;
  color: #111;
}

/* Places cell - green */
.jg-cluster-cell--places {
  background: #16a34a;
  color: #fff;
  width: 42px;
  height: 42px;
}

.jg-cluster-cell--places .jg-cluster-num {
  border-color: #16a34a;
  color: #16a34a;
}

/* Curiosities cell - blue */
.jg-cluster-cell--curiosities {
  background: #2563eb;
  color: #fff;
  width: 42px;
  height: 42px;
}

.jg-cluster-cell--curiosities .jg-cluster-num {
  border-color: #2563eb;
  color: #2563eb;
}

/* Events cell - black */
.jg-cluster-cell--events {
  background: #111;
  color: #fff;
  width: 42px;
  height: 42px;
}

.jg-cluster-cell--events .jg-cluster-num {
  border-color: #111;
  color: #111;
}

/* ========================================
   SATELLITE MODE: white outline on pins & clusters
   ======================================== */
/* Move filter to <svg> only so sibling .jg-marker-label is unaffected;
   skip sponsored pins entirely */
.jg-map--satellite .jg-pin-marker:not(.jg-pin-marker--promo) .jg-pin-svg-wrapper {
  filter: none;
}

.jg-map--satellite .jg-pin-marker:not(.jg-pin-marker--promo) .jg-pin-svg-wrapper svg {
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.jg-map--satellite .jg-cluster-cell {
  box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Search highlighted sponsored pin - pulsing red stroke animation */
@keyframes jg-pin-pulse {
  0%, 100% {
    stroke-width: 2.5;
    opacity: 1;
  }
  50% {
    stroke-width: 4;
    opacity: 0.6;
  }
}

.jg-pin-pulse-stroke {
  animation: jg-pin-pulse 1.5s ease-in-out infinite;
}

.jg-pin-marker--search-highlighted {
  z-index: 10000 !important;
}

/* Autocomplete list for address fields */
.jg-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
}

.jg-autocomplete-list.active {
  display: block;
}

.jg-autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}

.jg-autocomplete-item:hover {
  background: #f3f4f6;
}

.jg-autocomplete-item:last-child {
  border-bottom: none;
}

/* Message Modals (alert/confirm replacements) */
.jg-modal-message {
  text-align: center;
  padding: 32px 24px 24px 24px;
}

.jg-modal-message-content {
  font-size: calc(16 * var(--jg));
  line-height: 1.6;
  color: #374151;
  margin-bottom: 24px;
  padding: 0 8px;
}

.jg-modal-message-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.jg-modal-message-buttons .jg-btn {
  min-width: 120px;
  padding: 12px 24px;
  font-size: calc(15 * var(--jg));
  font-weight: 600;
}

/* Real-time sync notification animations */
@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ========================================
   SIDEBAR WIDGET STYLES
   ======================================== */

.jg-map-sidebar {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* Ensure height includes padding and border */
  min-height: 0; /* Allow flex children to shrink below content size */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Force equal height for map and sidebar - override Elementor container styles */
.elementor-element .jg-map,
.elementor-widget .jg-map,
.elementor-element .jg-map-sidebar,
.elementor-widget .jg-map-sidebar,
#jg-map,
#jg-map-sidebar {
  max-height: none !important;
  min-height: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
}

/* Statistics Summary */
.jg-sidebar-stats {
  background: #fff;
  padding: 12px 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.jg-sidebar-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(10px);
  min-width: 0;
  overflow: hidden;
}

.jg-sidebar-stat-icon {
  font-size: calc(17 * var(--jg));
  line-height: 1;
  flex-shrink: 0;
}

.jg-sidebar-stat-value {
  font-size: calc(15 * var(--jg));
  font-weight: 700;
  color: #8d2324;
  line-height: 1;
}

/* Filters and Sorting Section - Single Collapsible */
.jg-sidebar-filters-sort {
  padding: 12px 15px;
  border-bottom: 1px solid #e5e7eb;
  background: #fafafa;
  flex-shrink: 0;
}

/* Collapsible header styles - Use stronger selector to ensure it applies */
.jg-map-sidebar .jg-sidebar-filters-sort .jg-sidebar-collapsible-header,
.jg-sidebar-collapsible-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  padding: 8px 12px !important;
  background: #8d2324 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-size: calc(12 * var(--jg)) !important;
  font-weight: 600 !important;
  transition: background-color 0.2s !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.jg-map-sidebar .jg-sidebar-filters-sort .jg-sidebar-collapsible-header:hover,
.jg-sidebar-collapsible-header:hover {
  background: #a02829 !important;
}

.jg-sidebar-collapsible-header span {
  pointer-events: none !important;
}

.jg-sidebar-toggle-icon {
  font-size: calc(10 * var(--jg)) !important;
  transition: transform 0.2s !important;
  color: #ffffff !important;
  pointer-events: none !important;
}

.jg-sidebar-collapsible-content {
  overflow: hidden;
  margin-top: 12px;
}

/* Subsection titles inside collapsible */
.jg-sidebar-filter-section h4,
.jg-sidebar-sort-section h4 {
  margin: 0 0 8px 0;
  font-size: calc(11 * var(--jg));
  font-weight: 600;
  color: #1f2937;
}

.jg-sidebar-filter-section {
  margin-bottom: 16px;
}

.jg-sidebar-sort-section {
  margin-bottom: 16px;
}

/* Category sub-collapsible headers */
.jg-sidebar-category-header {
  background: #f3f4f6 !important;
  color: #374151 !important;
  padding: 6px 10px !important;
  font-size: calc(11 * var(--jg)) !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

.jg-sidebar-category-header:hover {
  background: #e5e7eb !important;
}

.jg-sidebar-category-header .jg-sidebar-toggle-icon {
  color: #ffffff !important;
}

.jg-sidebar-category-header + .jg-sidebar-collapsible-content {
  margin-top: 8px;
}

.jg-sidebar-filter-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.jg-sidebar-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: calc(10 * var(--jg));
  color: #374151;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid transparent;
}

.jg-sidebar-filter-label:hover {
  background: #f3f4f6;
}

.jg-sidebar-filter-icon {
  font-size: calc(14 * var(--jg));
  line-height: 1;
  display: none;
}

.jg-sidebar-filter-text {
  display: inline;
}

.jg-sidebar-filter-label:has(input[type="checkbox"]:checked) {
  background: rgba(141, 35, 36, 0.1);
  border-color: #8d2324;
}

.jg-sidebar-filter-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #8d2324;
  flex-shrink: 0;
}

/* Sorting controls */
.jg-sidebar-sort-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jg-sidebar-sort-controls label {
  font-size: calc(10 * var(--jg));
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}

.jg-sidebar-sort-controls select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(10 * var(--jg));
  color: #374151;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
}

.jg-sidebar-sort-controls select:hover {
  border-color: #8d2324;
}

.jg-sidebar-sort-controls select:focus {
  outline: none;
  border-color: #8d2324;
  box-shadow: 0 0 0 3px rgba(141, 35, 36, 0.1);
}

/* Loading State */
.jg-sidebar-loading {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
}

.jg-sidebar-loading .jg-spinner {
  margin: 0 auto 15px;
}

/* Points List */
.jg-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  min-height: 200px; /* Ensure list stays visible when filters are expanded */
}

/* Custom scrollbar for sidebar list */
.jg-sidebar-list::-webkit-scrollbar {
  width: 8px;
}

.jg-sidebar-list::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

.jg-sidebar-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.jg-sidebar-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Empty State */
.jg-sidebar-empty {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: calc(13 * var(--jg));
}

/* Error State */
.jg-sidebar-error {
  padding: 20px;
  text-align: center;
  color: #dc2626;
  background: #fee2e2;
  border-radius: 8px;
  margin: 10px;
  font-size: calc(12 * var(--jg));
}

/* Section Titles */
.jg-sidebar-section-title {
  font-size: calc(12 * var(--jg));
  font-weight: 700;
  color: #1f2937;
  padding: 12px 4px 8px 4px;
  margin-top: 8px;
  margin-bottom: 12px;
  border-bottom: 2px solid #8d2324;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jg-sidebar-section-title:first-child {
  margin-top: 0;
}

/* Point Item */
.jg-sidebar-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  gap: 14px;
  min-width: 0; /* Fix for flex overflow */
  overflow: hidden; /* Prevent content overflow */
}

.jg-sidebar-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.jg-sidebar-item:active {
  transform: translateY(0);
}

/* Sponsored items get special styling */
.jg-sidebar-item--sponsored {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.jg-sidebar-item--sponsored:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

/* Item Image */
.jg-sidebar-item__image {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

.jg-sidebar-item__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Star icon for sponsored places without image */
.jg-sidebar-item__image--star {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.jg-sidebar-star-icon {
  font-size: calc(40 * var(--jg));
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* "No photo" placeholder for items without images */
.jg-sidebar-item__image--no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  gap: 4px;
}

.jg-sidebar-no-photo-icon {
  font-size: calc(24 * var(--jg));
  opacity: 0.6;
}

.jg-sidebar-no-photo-text {
  font-size: calc(10 * var(--jg));
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Item Content */
.jg-sidebar-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.jg-sidebar-item__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jg-sidebar-item__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: calc(9 * var(--jg));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.jg-sidebar-item__badge--sponsored {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #78350f;
  font-size: calc(8 * var(--jg));
  padding: 3px 6px;
}

.jg-sidebar-item__badge--miejsce {
  background: #d1fae5;
  color: #065f46;
}

.jg-sidebar-item__badge--ciekawostka {
  background: #dbeafe;
  color: #1e40af;
}

.jg-sidebar-item__badge--zgloszenie {
  background: #f3f4f6;
  color: #374151;
}

.jg-sidebar-item__title {
  font-size: calc(13 * var(--jg));
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: break-word;
}

.jg-sidebar-item__hours {
  font-size: calc(11 * var(--jg));
  color: #166534;
  margin-top: 2px;
  line-height: 1.3;
}

.jg-sidebar-item__hours--closed {
  color: #dc2626;
}

.jg-sidebar-item__hours-warning {
  margin-left: 6px;
  color: #d97706;
  font-weight: 700;
  font-size: calc(10 * var(--jg));
}

.jg-sidebar-item__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: auto;
  min-width: 0;
}

.jg-sidebar-item__votes {
  font-size: calc(11 * var(--jg));
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.jg-sidebar-item__votes--positive {
  color: #92400e;
  background: #fef3c7;
}

.jg-sidebar-item__votes--negative {
  color: #b91c1c;
  background: #fee2e2;
}

.jg-sidebar-item__votes--neutral {
  color: #6b7280;
  background: #f3f4f6;
}

.jg-sidebar-item__date {
  font-size: calc(10 * var(--jg));
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

/* ── Info-badges strip ─────────────────────────────────────────────────────
   Niezależne od Elementora: wszystkie właściwości ustawione jawnie.
   Pasek małych ikon u dołu boksu miejsca w sidebarze.
   ────────────────────────────────────────────────────────────────────────── */
.jg-map-sidebar .jg-sidebar-item__info-badges {
  all: unset;
  box-sizing: border-box;
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f1f3;
  min-height: 0;
}

.jg-map-sidebar .jg-info-badge {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: calc(11 * var(--jg));
  line-height: 1;
  cursor: default;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.jg-map-sidebar .jg-info-badge:hover {
  background: #e9eaec;
  border-color: #c8cad0;
}

/* Admin/moderator-only badges – subtle distinct style */
.jg-map-sidebar .jg-info-badge--admin {
  border-color: #c7d2fe;
  background: #eef2ff;
}
.jg-map-sidebar .jg-info-badge--admin:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}
/* Menu badges */
.jg-map-sidebar .jg-info-badge--has-menu {
  border-color: #6ee7b7;
  background: #d1fae5;
  color: #065f46;
}
.jg-map-sidebar .jg-info-badge--has-menu:hover {
  background: #a7f3d0;
  border-color: #34d399;
}
.jg-map-sidebar .jg-info-badge--no-menu {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #991b1b;
  opacity: 0.75;
}
.jg-map-sidebar .jg-info-badge--no-menu:hover {
  background: #fecaca;
  border-color: #f87171;
  opacity: 1;
}

/* Tooltip is rendered as a fixed <div> by JS (jg-sidebar.js) to avoid
   clipping by overflow:hidden parents. See #jg-badge-tooltip below. */

/* Global JS-driven badge tooltip */
#jg-badge-tooltip {
  position: fixed;
  z-index: 99999;
  display: none;
  background: rgba(31, 41, 55, 0.96);
  color: #f9fafb;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(9 * var(--jg));
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 9px;
  border-radius: 5px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: opacity 0.12s;
  opacity: 0;
}
#jg-badge-tooltip.jg-badge-tooltip--visible {
  opacity: 1;
}
/* Arrow */
#jg-badge-tooltip::after {
  content: '';
  position: absolute;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  pointer-events: none;
}
#jg-badge-tooltip.jg-badge-tooltip--above::after {
  top: 100%;
  border-top-color: rgba(31, 41, 55, 0.96);
}
#jg-badge-tooltip.jg-badge-tooltip--below::after {
  bottom: 100%;
  border-bottom-color: rgba(31, 41, 55, 0.96);
}



/* Responsive Design */

/* Tablets and smaller desktops (up to 768px) */
@media (max-width: 768px) {
  .jg-sidebar-stats {
    flex-wrap: wrap;
    gap: 10px 8px;
    padding: 10px;
    justify-content: space-between;
  }

  .jg-sidebar-stat {
    gap: 4px;
  }

  .jg-sidebar-stat-icon {
    font-size: calc(15 * var(--jg));
  }

  .jg-sidebar-stat-value {
    font-size: calc(14 * var(--jg));
  }

  /* Sidebar filters - icon only on mobile */
  .jg-sidebar-filter-group {
    gap: 4px;
    justify-content: space-between;
  }

  .jg-sidebar-filter-label {
    padding: 6px;
    min-width: 42px;
    justify-content: center;
  }

  .jg-sidebar-filter-label input[type="checkbox"] {
    display: none;
  }

  .jg-sidebar-filter-icon {
    display: block;
    font-size: calc(17 * var(--jg));
  }

  .jg-sidebar-filter-text {
    display: none;
  }

  .jg-sidebar-filters-sort {
    padding: 10px;
  }

  .jg-sidebar-collapsible-header {
    font-size: calc(11 * var(--jg));
    padding: 6px 10px;
  }

  .jg-sidebar-filter-section h4,
  .jg-sidebar-sort-section h4 {
    font-size: calc(10 * var(--jg));
  }

  .jg-sidebar-filter-group {
    gap: 6px 8px;
  }

  .jg-sidebar-filter-group label {
    font-size: calc(9 * var(--jg));
  }

  .jg-sidebar-sort-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .jg-sidebar-sort-controls label {
    font-size: calc(9 * var(--jg));
  }

  .jg-sidebar-section-title {
    font-size: calc(10 * var(--jg));
    padding: 10px 4px 6px 4px;
    margin-bottom: 10px;
  }

  .jg-sidebar-item {
    padding: 10px;
    gap: 10px;
  }

  .jg-sidebar-item__image {
    width: 60px;
    height: 60px;
  }

  .jg-sidebar-star-icon {
    font-size: calc(32 * var(--jg));
  }

  .jg-sidebar-item__title {
    font-size: calc(11 * var(--jg));
  }

  .jg-sidebar-item__badge {
    font-size: calc(8 * var(--jg));
    padding: 3px 8px;
  }

  .jg-sidebar-item__votes {
    font-size: calc(9 * var(--jg));
    padding: 3px 6px;
  }

  .jg-sidebar-item__date {
    font-size: calc(9 * var(--jg));
  }
}

/* Mobile phones (up to 480px) */
@media (max-width: 480px) {
  .jg-sidebar-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 8px;
  }

  .jg-sidebar-stat {
    padding: 4px 2px;
  }

  .jg-sidebar-stat-label {
    font-size: calc(7 * var(--jg));
    margin-bottom: 2px;
  }

  .jg-sidebar-stat-value {
    font-size: calc(14 * var(--jg));
  }

  .jg-sidebar-filters-sort {
    padding: 8px;
  }

  .jg-sidebar-collapsible-header {
    font-size: calc(10 * var(--jg));
    padding: 6px 8px;
  }

  .jg-sidebar-filter-section h4,
  .jg-sidebar-sort-section h4 {
    font-size: calc(9 * var(--jg));
  }

  .jg-sidebar-filter-group {
    gap: 4px 6px;
  }

  .jg-sidebar-filter-group label {
    font-size: calc(8 * var(--jg));
  }

  .jg-sidebar-filter-group input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  .jg-sidebar-sort-controls label {
    font-size: calc(8 * var(--jg));
  }

  .jg-sidebar-sort-controls select {
    font-size: calc(9 * var(--jg));
    padding: 6px 10px;
  }

  .jg-sidebar-list {
    padding: 6px;
  }

  .jg-sidebar-section-title {
    font-size: calc(9 * var(--jg));
    padding: 8px 4px 4px 4px;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
  }

  .jg-sidebar-item {
    padding: 8px;
    gap: 8px;
  }

  .jg-sidebar-item__image {
    width: 50px;
    height: 50px;
  }

  .jg-sidebar-star-icon {
    font-size: calc(28 * var(--jg));
  }

  .jg-sidebar-item__title {
    font-size: calc(10 * var(--jg));
    line-height: 1.3;
  }

  .jg-sidebar-item__badge {
    font-size: calc(7 * var(--jg));
    padding: 2px 6px;
  }

  .jg-sidebar-item__votes {
    font-size: calc(8 * var(--jg));
    padding: 2px 5px;
  }

  .jg-sidebar-item__date {
    font-size: calc(8 * var(--jg));
  }

  .jg-sidebar-item__footer {
    gap: 6px;
    flex-wrap: wrap;
  }
}

/* Very narrow screens (up to 360px) */
@media (max-width: 360px) {
  .jg-sidebar-stats {
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 6px;
  }

  .jg-sidebar-stat {
    padding: 3px 2px;
  }

  .jg-sidebar-stat-label {
    font-size: calc(6 * var(--jg));
  }

  .jg-sidebar-stat-value {
    font-size: calc(12 * var(--jg));
  }

  .jg-sidebar-section-title {
    font-size: calc(8 * var(--jg));
    padding: 6px 4px 4px 4px;
    margin-bottom: 6px;
  }

  .jg-sidebar-item {
    padding: 6px;
    gap: 6px;
  }

  .jg-sidebar-item__image {
    width: 45px;
    height: 45px;
  }

  .jg-sidebar-star-icon {
    font-size: calc(24 * var(--jg));
  }

  .jg-sidebar-item__title {
    font-size: calc(9 * var(--jg));
  }

  .jg-sidebar-item__badge {
    font-size: calc(7 * var(--jg));
    padding: 2px 4px;
  }
}

/* ========================================
   ONBOARDING & HELP SYSTEM
   ======================================== */

/* Welcome Modal */
.jg-onboarding-modal {
  max-width: 560px !important;
  max-height: min(85vh, 600px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* #jg-onboarding-content jest blokiem pomiędzy flex-wrapperem a header/steps/footer.
   Musi sam być flex-column, żeby footer (Pomiń) zawsze był widoczny. */
#jg-onboarding-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.jg-onboarding-header {
  background: linear-gradient(135deg, #8d2324 0%, #a02829 100%);
  color: #fff;
  padding: 32px 28px 24px;
  text-align: center;
  flex-shrink: 0;
}

.jg-onboarding-header h2 {
  margin: 0 0 8px 0;
  font-size: calc(24 * var(--jg));
  font-weight: 700;
}

.jg-onboarding-header p {
  margin: 0;
  font-size: calc(15.2 * var(--jg));
  opacity: 0.9;
  line-height: 1.5;
}

.jg-onboarding-steps {
  padding: 24px 28px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.jg-onboarding-step {
  display: none;
}

.jg-onboarding-step.active {
  display: block;
}

.jg-onboarding-step h3 {
  margin: 0 0 16px 0;
  font-size: calc(18.4 * var(--jg));
  font-weight: 700;
  color: #111;
}

.jg-onboarding-type-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jg-onboarding-type-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.jg-onboarding-type-item .jg-onb-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
}

.jg-onboarding-type-item strong {
  display: block;
  font-size: calc(15.2 * var(--jg));
  color: #111;
  margin-bottom: 2px;
}

.jg-onboarding-type-item p {
  margin: 0;
  font-size: calc(13.6 * var(--jg));
  color: #6b7280;
  line-height: 1.4;
}

.jg-onboarding-how-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: onb-step;
}

.jg-onboarding-how-item {
  display: flex;
  align-items: center;
  gap: 12px;
  counter-increment: onb-step;
}

.jg-onboarding-how-item::before {
  content: counter(onb-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #8d2324;
  color: #fff;
  font-weight: 700;
  font-size: calc(14 * var(--jg));
  flex-shrink: 0;
}

.jg-onboarding-how-item span {
  font-size: calc(14.4 * var(--jg));
  color: #374151;
  line-height: 1.4;
}

/* Small note below a step (e.g. "You can also use the + button") */
.jg-onb-note {
  margin: 12px 0 0;
  font-size: calc(12.8 * var(--jg));
  color: #6b7280;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

/* XP & Levels step */
.jg-onboarding-xp-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jg-onboarding-xp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jg-onboarding-xp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.jg-xp-action {
  font-size: calc(13.6 * var(--jg));
  color: #374151;
  flex: 1;
}

.jg-xp-badge {
  font-size: calc(12.8 * var(--jg));
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #15803d, #22c55e);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Level tier badges */
.jg-onboarding-levels {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}

.jg-lvl-badge {
  font-size: calc(11.5 * var(--jg));
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  color: #fff;
}

.jg-lvl-bronze { background: linear-gradient(135deg, #92400e, #d97706); }
.jg-lvl-silver { background: linear-gradient(135deg, #6b7280, #9ca3af); }
.jg-lvl-gold   { background: linear-gradient(135deg, #a16207, #eab308); color: #1a1a1a; }
.jg-lvl-legend { background: linear-gradient(135deg, #7c2d12, #dc2626); }

.jg-lvl-sep {
  font-size: calc(13 * var(--jg));
  color: #9ca3af;
  font-weight: 400;
}

/* Help panel: XP mini-list */
.jg-help-xp-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jg-help-xp-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: calc(13 * var(--jg));
  color: #374151;
  padding: 5px 8px;
  background: #f9fafb;
  border-radius: 4px;
}

.jg-help-xp-list li strong {
  color: #15803d;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Onboarding footer / nav */
.jg-onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 24px;
  gap: 12px;
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.jg-onboarding-dots {
  display: flex;
  gap: 8px;
}

.jg-onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  transition: background 0.2s;
}

.jg-onboarding-dot.active {
  background: #8d2324;
  width: 24px;
  border-radius: 4px;
}

.jg-onboarding-nav {
  display: flex;
  gap: 8px;
}

.jg-onboarding-nav .jg-btn {
  padding: 10px 20px;
  font-size: calc(14 * var(--jg));
  font-weight: 600;
}

.jg-onboarding-btn-primary {
  background: #8d2324 !important;
}

.jg-onboarding-btn-primary:hover {
  background: #a02829 !important;
}

/* Help Panel (positioned above the ? FAB inside #jg-map) */
.jg-help-panel {
  position: absolute;
  bottom: 100px;
  left: 30px;
  width: 360px;
  max-height: 70vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: jgHelpSlideUp 0.25s ease-out;
}

@keyframes jgHelpSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jg-help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: #8d2324;
  color: #fff;
}

.jg-help-panel-header h3 {
  margin: 0;
  font-size: calc(16 * var(--jg));
  font-weight: 700;
}

.jg-help-panel-header .jg-close {
  background: none;
  border: none;
  color: #fff;
  font-size: calc(22 * var(--jg));
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
  line-height: 1;
}

.jg-help-panel-header .jg-close:hover {
  opacity: 1;
}

.jg-help-panel-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

.jg-help-section {
  margin-bottom: 20px;
}

.jg-help-section:last-child {
  margin-bottom: 0;
}

.jg-help-section h4 {
  margin: 0 0 10px 0;
  font-size: calc(14 * var(--jg));
  font-weight: 700;
  color: #8d2324;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jg-help-section--footer {
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

/* Help types */
.jg-help-types {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jg-help-type {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.jg-help-type-icon {
  flex-shrink: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Colored pin dots for point types (help panel) */
.jg-pin-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.jg-pin-dot--zgloszenie {
  background: linear-gradient(135deg, #000 0%, #1f1f1f 50%, #000 100%);
}

.jg-pin-dot--ciekawostka {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1e40af 100%);
}

.jg-pin-dot--miejsce {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 50%, #15803d 100%);
}

.jg-help-type strong {
  display: block;
  font-size: calc(13.6 * var(--jg));
  color: #111;
}

.jg-help-type p {
  margin: 2px 0 0;
  font-size: calc(12.8 * var(--jg));
  color: #6b7280;
  line-height: 1.4;
}

/* Onboarding icon variants */
.jg-onb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
}

.jg-onb-icon svg {
  display: block;
}

.jg-onb-icon--round {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: calc(18 * var(--jg));
  line-height: 1;
  color: #fff;
}

/* Help steps */
.jg-help-steps {
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
}

.jg-help-steps li {
  font-size: calc(13.6 * var(--jg));
  color: #374151;
  line-height: 1.5;
  margin-bottom: 4px;
}

.jg-help-tip {
  margin: 10px 0 0;
  font-size: calc(12.8 * var(--jg));
  color: #6b7280;
  font-style: italic;
}

/* Help features */
.jg-help-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jg-help-features li {
  font-size: calc(13.6 * var(--jg));
  color: #374151;
  line-height: 1.5;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: 6px;
  border-left: 3px solid #8d2324;
}

.jg-help-features li strong {
  color: #111;
}

/* Pulse animation on fullscreen button when mobile onboarding tip is active */
.jg-onboarding-fs-pulse {
  position: relative;
}

.jg-onboarding-fs-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  border: 3px solid rgba(141, 35, 36, 0.85);
  pointer-events: none;
  animation: jgFsOnbPulse 1.4s ease-out infinite;
}

@keyframes jgFsOnbPulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Contextual Tips (matches plugin brand) */
.jg-tip-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9997;
  animation: jgTipSlideUp 0.3s ease-out;
  pointer-events: auto;
}

@keyframes jgTipSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.jg-tip-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1e2329;
  color: #f0f1f3;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: calc(14.4 * var(--jg));
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  max-width: 440px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.jg-tip-dismiss {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(16 * var(--jg));
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.2s;
}

.jg-tip-dismiss:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ======================================================
   First-use UI hints (Layer 2)
   Positioned via JS (fixed), so they float above everything
   ====================================================== */
.jg-hint {
  position: fixed;
  z-index: 999999;
  max-width: 240px;
  background: #fff;
  border-radius: 10px;
  border-left: 3px solid #8d2324;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
  animation: jgHintIn 0.18s ease-out both;
}

@keyframes jgHintIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.jg-hint-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
}

.jg-hint-text {
  font-size: calc(13 * var(--jg));
  color: #374151;
  line-height: 1.45;
  flex: 1;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.jg-hint-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: calc(17 * var(--jg));
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  margin-top: -1px;
  transition: color 0.15s;
}

.jg-hint-close:hover {
  color: #374151;
}

/* ======================================================
   Unified Spotlight Hints (Layer 2 – v2)
   Overlay + card rendered by JS into document.body.
   ====================================================== */

/* Semi-transparent overlay — dims everything behind the card */
.jg-spotlight-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.45);
  animation: jgSpotlightFadeIn 0.2s ease-out both;
}

@keyframes jgSpotlightFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card — floats above everything, positioned near target element by JS */
.jg-spotlight-card {
  position: fixed;
  z-index: 99999;
  width: 280px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.1);
  border-top: 3px solid #8d2324;
  animation: jgSpotlightCardIn 0.2s ease-out both;
  pointer-events: auto;
}

/* Light variant (hover hints, no overlay, auto-dismiss) */
.jg-spotlight-card--light {
  border-top-color: #4b5563;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.07);
}

@keyframes jgSpotlightCardIn {
  from { opacity: 0; transform: scale(0.94) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.jg-spotlight-card-inner {
  padding: 16px 16px 12px;
}

.jg-spotlight-card-text {
  margin: 0 0 12px;
  font-size: calc(13.5 * var(--jg));
  color: #1f2937;
  line-height: 1.5;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.jg-spotlight-card-btn {
  display: block;
  margin-left: auto;
  background: #8d2324;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: calc(13 * var(--jg));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.jg-spotlight-card-btn:hover {
  background: #a02829;
}

/* Light variant — ×  button  */
.jg-spotlight-card--light .jg-spotlight-card-btn {
  background: #e5e7eb;
  color: #374151;
  padding: 4px 10px;
  font-weight: 500;
}

.jg-spotlight-card--light .jg-spotlight-card-btn:hover {
  background: #d1d5db;
}

/* Responsive adjustments for onboarding */
@media (max-width: 768px) {
  .jg-help-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 80px;
    width: auto;
    max-height: 60vh;
  }

  .jg-tip-container {
    bottom: 16px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
  }

  @keyframes jgTipSlideUp {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .jg-tip-content {
    max-width: 100%;
    font-size: calc(13.6 * var(--jg));
    padding: 12px 14px;
  }
}

@media (max-width: 768px) {
  /* The base .jg-modal mobile rule forces display:block + overflow:auto which
     breaks the "steps scroll, footer always visible" flex-column pattern.
     Override both with !important to restore the correct layout. */
  .jg-onboarding-modal {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #jg-onboarding-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .jg-onboarding-steps {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .jg-onboarding-footer {
    /* Static flex-child — always visible because flex-shrink:0 is set on the
       base rule and the steps area absorbs all leftover height. No sticky needed. */
    position: static;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .jg-onboarding-modal {
    max-width: 95vw !important;
  }

  .jg-onboarding-header {
    padding: 24px 20px 18px;
  }

  .jg-onboarding-steps {
    padding: 18px 20px;
  }

  .jg-onboarding-footer {
    padding: 12px 20px 18px;
  }

  .jg-tip-content {
    max-width: 100%;
    font-size: calc(13.12 * var(--jg));
  }
}

/* Compact onboarding for smaller viewport heights (laptops) */
@media (max-height: 700px) {
  .jg-onboarding-modal {
    max-height: 90vh !important;
  }

  .jg-onboarding-header {
    padding: 20px 24px 16px;
  }

  .jg-onboarding-header h2 {
    font-size: calc(20.8 * var(--jg));
  }

  .jg-onboarding-header p {
    font-size: calc(14 * var(--jg));
  }

  .jg-onboarding-steps {
    padding: 16px 24px;
  }

  .jg-onboarding-step h3 {
    font-size: calc(16.8 * var(--jg));
    margin-bottom: 12px;
  }

  .jg-onboarding-type-list {
    gap: 8px;
  }

  .jg-onboarding-type-item {
    padding: 10px;
  }

  .jg-onboarding-type-item p {
    font-size: calc(12.8 * var(--jg));
  }

  .jg-onboarding-how-list {
    gap: 8px;
  }

  .jg-onboarding-how-item::before {
    width: 28px;
    height: 28px;
    font-size: calc(13 * var(--jg));
  }

  .jg-onboarding-how-item span {
    font-size: calc(13.6 * var(--jg));
  }

  .jg-onboarding-footer {
    padding: 12px 24px 16px;
  }

  .jg-onboarding-nav .jg-btn {
    padding: 8px 16px;
    font-size: calc(13 * var(--jg));
  }
}

/* Very small viewport height (e.g. landscape phone) */
@media (max-height: 550px) {
  .jg-onboarding-modal {
    max-height: 95vh !important;
  }

  .jg-onboarding-header {
    padding: 12px 20px 10px;
  }

  .jg-onboarding-header h2 {
    font-size: calc(18.4 * var(--jg));
    margin-bottom: 0;
  }

  /* Hide the subtitle on step 1 — saves ~36px so footer stays in view */
  .jg-onboarding-header p {
    display: none;
  }

  .jg-onboarding-steps {
    padding: 12px 20px;
  }

  .jg-onboarding-type-item {
    padding: 8px;
    gap: 10px;
  }

  .jg-onboarding-type-item .jg-onb-icon {
    width: 28px;
    min-height: 28px;
  }

  .jg-onboarding-footer {
    padding: 10px 20px 12px;
  }
}

/* Mobile: Override Elementor container heights for map – fill entire container */
@media (max-width: 768px) {
  /* Force Elementor containers to pass height down to the map */
  .elementor-element:has(> .elementor-widget-container > #jg-map-wrap),
  .elementor-element:has(> .elementor-widget-container > .jg-wrap),
  .elementor-widget:has(#jg-map-wrap),
  .elementor-widget:has(.jg-wrap) {
    height: 100% !important;
    min-height: 0 !important;
  }

  .elementor-element > .elementor-widget-container:has(#jg-map-wrap),
  .elementor-element > .elementor-widget-container:has(.jg-wrap) {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .elementor-element .jg-wrap,
  .elementor-widget .jg-wrap,
  .elementor-element #jg-map-wrap,
  .elementor-widget #jg-map-wrap {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 0% !important;
  }

  /* Ensure the map container inside Elementor fills available space */
  .elementor-element .jg-map,
  .elementor-widget .jg-map,
  .elementor-element #jg-map,
  .elementor-widget #jg-map {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 300px !important;
    max-height: none !important;
    flex-shrink: 0 !important;
  }

  /* Prevent Elementor from overriding padding/margin on the map section */
  .elementor-element .jg-map *,
  .elementor-widget .jg-map * {
    box-sizing: border-box;
  }

  /* Prevent Elementor's default section heights from squishing the map */
  .elementor-section:has(#jg-map-wrap),
  .elementor-container:has(#jg-map-wrap),
  .elementor-column:has(#jg-map-wrap),
  .elementor-column-wrap:has(#jg-map-wrap),
  .elementor-widget-wrap:has(#jg-map-wrap),
  .e-con:has(#jg-map-wrap),
  .e-con-inner:has(#jg-map-wrap) {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* ========================================
   APPROVAL NOTIFICATION MODAL
   Eye-catching modal for point approval
   ======================================== */

.jg-approval-modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  animation: jgApprovalFadeIn 0.3s ease-out;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.jg-approval-modal-bg.jg-approval-modal-closing {
  animation: jgApprovalFadeOut 0.3s ease-out forwards;
}

@keyframes jgApprovalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes jgApprovalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.jg-approval-modal {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 420px;
  width: 100%;
  max-height: calc(100vh - 40px);
  text-align: center;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  animation: jgApprovalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: auto;
}

.jg-approval-modal-bg.jg-approval-modal-closing .jg-approval-modal {
  animation: jgApprovalSlideDown 0.3s ease-out forwards;
}

@keyframes jgApprovalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes jgApprovalSlideDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
}

.jg-approval-modal-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -40px auto 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
  animation: jgApprovalPulse 2s ease-in-out infinite;
}

@keyframes jgApprovalPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(16, 185, 129, 0.6);
  }
}

.jg-approval-checkmark {
  font-size: calc(40 * var(--jg));
  color: #fff;
  font-weight: 700;
  animation: jgCheckmarkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes jgCheckmarkPop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.jg-approval-modal-content {
  padding: 24px 28px 20px;
}

.jg-approval-modal-title {
  font-size: calc(28 * var(--jg));
  font-weight: 800;
  color: #1f2937;
  margin: 12px 0 8px;
  background: linear-gradient(135deg, #8d2324 0%, #a02829 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.jg-approval-modal-subtitle {
  font-size: calc(16 * var(--jg));
  color: #6b7280;
  margin: 0 0 20px;
}

.jg-approval-modal-point {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.jg-approval-modal-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(12 * var(--jg));
  font-weight: 600;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  align-self: flex-start;
}

.jg-approval-modal-name {
  font-size: calc(16 * var(--jg));
  font-weight: 600;
  color: #1f2937;
  text-align: left;
  word-break: break-word;
}

.jg-approval-modal-info {
  font-size: calc(14 * var(--jg));
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.jg-approval-modal-actions {
  display: flex;
  gap: 12px;
  padding: 16px 28px 24px;
  justify-content: center;
}

.jg-approval-modal-actions .jg-btn {
  flex: 1;
  max-width: 160px;
  padding: 12px 20px;
  font-size: calc(14 * var(--jg));
  font-weight: 600;
}

.jg-approval-modal-actions .jg-btn:not(.jg-btn--ghost) {
  background: linear-gradient(135deg, #8d2324 0%, #a02829 100%);
  border-color: #8d2324;
  box-shadow: 0 4px 12px rgba(141, 35, 36, 0.3);
}

.jg-approval-modal-actions .jg-btn:not(.jg-btn--ghost):hover {
  background: linear-gradient(135deg, #a02829 0%, #8d2324 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(141, 35, 36, 0.4);
}

/* Confetti container */
.jg-approval-confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

@keyframes jgConfettiFall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(400px) rotate(720deg);
    opacity: 0;
  }
}

/* Responsive adjustments for approval modal - small height screens (laptops) */
@media (max-height: 700px) {
  .jg-approval-modal-bg {
    padding: 10px;
    align-items: flex-start;
  }

  .jg-approval-modal {
    margin-top: 20px;
    max-height: calc(100vh - 40px);
  }

  .jg-approval-modal-icon {
    width: 60px;
    height: 60px;
    margin: -30px auto 0;
  }

  .jg-approval-checkmark {
    font-size: calc(28 * var(--jg));
  }

  .jg-approval-modal-title {
    font-size: calc(22 * var(--jg));
    margin: 8px 0 6px;
  }

  .jg-approval-modal-subtitle {
    font-size: calc(14 * var(--jg));
    margin: 0 0 14px;
  }

  .jg-approval-modal-content {
    padding: 16px 20px 14px;
  }

  .jg-approval-modal-point {
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  .jg-approval-modal-info {
    font-size: calc(13 * var(--jg));
  }

  .jg-approval-modal-actions {
    padding: 12px 20px 16px;
    gap: 10px;
  }

  .jg-approval-modal-actions .jg-btn {
    padding: 10px 16px;
    font-size: calc(13 * var(--jg));
  }
}

/* Responsive adjustments for approval modal - very small height screens */
@media (max-height: 550px) {
  .jg-approval-modal-icon {
    width: 50px;
    height: 50px;
    margin: -25px auto 0;
  }

  .jg-approval-checkmark {
    font-size: calc(24 * var(--jg));
  }

  .jg-approval-modal-title {
    font-size: calc(20 * var(--jg));
  }

  .jg-approval-modal-content {
    padding: 12px 16px 10px;
  }

  .jg-approval-modal-actions {
    padding: 10px 16px 14px;
  }
}

/* Responsive adjustments for approval modal - narrow screens */
@media (max-width: 480px) {
  .jg-approval-modal {
    max-width: 95%;
  }

  .jg-approval-modal-icon {
    width: 70px;
    height: 70px;
    margin: -35px auto 0;
  }

  .jg-approval-checkmark {
    font-size: calc(32 * var(--jg));
  }

  .jg-approval-modal-title {
    font-size: calc(24 * var(--jg));
  }

  .jg-approval-modal-content {
    padding: 20px 20px 16px;
  }

  .jg-approval-modal-actions {
    flex-direction: column;
    padding: 12px 20px 20px;
  }

  .jg-approval-modal-actions .jg-btn {
    max-width: none;
  }
}

/* Combined small height AND narrow width */
@media (max-height: 600px) and (max-width: 480px) {
  .jg-approval-modal-icon {
    width: 50px;
    height: 50px;
    margin: -25px auto 0;
  }

  .jg-approval-checkmark {
    font-size: calc(24 * var(--jg));
  }

  .jg-approval-modal-title {
    font-size: calc(20 * var(--jg));
  }

  .jg-approval-modal-subtitle {
    font-size: calc(13 * var(--jg));
  }

  .jg-approval-modal-content {
    padding: 12px 16px 10px;
  }

  .jg-approval-modal-actions {
    padding: 10px 16px 14px;
  }
}

/* =========================================================
   LEVELS, XP & ACHIEVEMENTS
   ========================================================= */

/* Level badge in user modal header */
.jg-level-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 0.75rem;
  font-size: calc(13.6 * var(--jg));
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 2px 6px rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Prestige tier badge colors */
.jg-badge-bronze {
  background: linear-gradient(180deg, #cd9a62 0%, #a0522d 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 2px 6px rgba(160,82,45,0.4);
}

.jg-badge-silver {
  background: linear-gradient(180deg, #d4d4d4 0%, #a0a0a0 100%);
  color: #333;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 2px 6px rgba(160,160,160,0.4);
}

.jg-badge-gold {
  background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%);
  color: #5c3300;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 2px 8px rgba(217,119,6,0.4);
}

.jg-badge-emerald {
  background: linear-gradient(180deg, #6ee7b7 0%, #059669 100%);
  color: #052e16;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 2px 8px rgba(5,150,105,0.4);
}

.jg-badge-purple {
  background: linear-gradient(180deg, #c4b5fd 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 2px 8px rgba(124,58,237,0.4);
}

.jg-badge-diamond {
  background: linear-gradient(180deg, #a5f3fc 0%, #0891b2 100%);
  color: #083344;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 2px 8px rgba(8,145,178,0.4);
}

.jg-badge-ruby {
  background: linear-gradient(180deg, #fda4af 0%, #be123c 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 2px 8px rgba(190,18,60,0.4);
}

.jg-badge-legend {
  background: linear-gradient(135deg, #fbbf24, #fb7185, #a78bfa, #67e8f9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 2px 10px rgba(251,191,36,0.3), 0 0 12px rgba(167,139,250,0.2);
}

/* XP progress bar in header */
.jg-xp-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jg-xp-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  overflow: hidden;
}

.jg-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.jg-xp-bar-text {
  font-size: calc(10 * var(--jg));
  color: rgba(255,255,255,0.8);
  text-align: right;
  line-height: 1;
}

/* Achievements panel (in user modal header) */
.jg-achievements-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.jg-achievement-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  transition: transform 0.2s;
  cursor: pointer;
}

.jg-achievement-icon:hover {
  transform: scale(1.15);
}

.jg-achievement-icon span {
  font-size: calc(16 * var(--jg));
  line-height: 1;
}

.jg-achievement-more {
  font-size: calc(11 * var(--jg));
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  padding: 0 4px;
}

/* Achievements grid (full modal) */
.jg-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.jg-achievement-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}

.jg-achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.jg-achievement-locked {
  opacity: 0.45;
  filter: grayscale(60%);
}

.jg-achievement-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f9fafb;
}

.jg-achievement-card-info {
  flex: 1;
  min-width: 0;
}

.jg-achievement-card-name {
  font-weight: 700;
  font-size: calc(14 * var(--jg));
  color: #111;
  margin-bottom: 2px;
}

.jg-achievement-card-desc {
  font-size: calc(12 * var(--jg));
  color: #6b7280;
  margin-bottom: 4px;
}

.jg-achievement-card-rarity {
  font-size: calc(11 * var(--jg));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jg-achievement-card-date {
  font-size: calc(11 * var(--jg));
  color: #9ca3af;
  margin-top: 2px;
}

/* Level-up notification modal */
.jg-levelup-modal {
  text-align: center;
  padding: 20px 0;
}

.jg-levelup-icon {
  font-size: calc(48 * var(--jg));
  margin-bottom: 12px;
  animation: jg-levelup-bounce 0.6s ease;
}

.jg-levelup-title {
  font-size: calc(14 * var(--jg));
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 8px;
}

.jg-levelup-level {
  font-size: calc(64 * var(--jg));
  font-weight: 900;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 12px;
}

.jg-levelup-subtitle {
  font-size: calc(15 * var(--jg));
  color: #374151;
}

@keyframes jg-levelup-bounce {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Real-time XP gain floating indicator — injected as position:fixed by JS, below the badge */
.jg-xp-gain-indicator {
  position: fixed;
  /* left / top set dynamically by JS (getBoundingClientRect of the badge) */
  transform: translateX(-50%);
  background: rgba(251, 191, 36, 0.95);
  color: #1a1a1a;
  font-size: calc(11 * var(--jg));
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  animation: jg-xp-float-down 1.4s ease-out forwards;
  z-index: 10100;
}

@keyframes jg-xp-float-down {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(10px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(18px); }
}

/* Red variant for XP deduction (vote retraction, etc.) */
.jg-xp-gain-indicator--negative {
  background: rgba(220, 38, 38, 0.93);
  color: #fff;
}

/* Keyframe-based confetti burst — uses CSS custom properties set inline per-particle.
   --jg-dx, --jg-dy: final displacement in px (already includes gravity)
   --jg-rot: final rotation in deg */
@keyframes jgConfettiBurst {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  75%  { opacity: 0.7; }
  100% { transform: translate(var(--jg-dx), var(--jg-dy)) rotate(var(--jg-rot)); opacity: 0; }
}

/* Level-up pulse animation on the top-bar level badge */
.jg-level-levelup-pulse {
  animation: jg-level-pulse 0.8s ease;
}

@keyframes jg-level-pulse {
  0%   { transform: scale(1);    filter: brightness(1); }
  25%  { transform: scale(1.25); filter: brightness(1.6); }
  60%  { transform: scale(1.1);  filter: brightness(1.3); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* Ensure the level badge has relative positioning for the floating indicator */
.jg-top-bar-level {
  position: relative;
}

/* Achievement earned notification modal */
.jg-achievement-modal {
  text-align: center;
  padding: 20px 0;
}

.jg-achievement-modal-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  background: #f9fafb;
  animation: jg-ach-pulse 1.2s ease infinite;
}

.jg-achievement-modal-title {
  font-size: calc(14 * var(--jg));
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 8px;
}

.jg-achievement-modal-name {
  font-size: calc(24 * var(--jg));
  font-weight: 800;
  margin-bottom: 6px;
}

.jg-achievement-modal-desc {
  font-size: calc(14 * var(--jg));
  color: #374151;
  margin-bottom: 8px;
}

.jg-achievement-modal-rarity {
  font-size: calc(12 * var(--jg));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes jg-ach-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Mobile adjustments for level/achievements */
@media (max-width: 640px) {
  .jg-achievements-grid {
    grid-template-columns: 1fr;
  }

  .jg-xp-bar-wrap {
    min-width: 80px !important;
  }

  .jg-achievements-panel {
    margin-top: 8px;
    width: 100%;
  }
}

/* ========================================
   Ranking Modal Styles
   ======================================== */

.jg-modal .jg-ranking-header {
  background: linear-gradient(135deg, #8d2324 0%, #a02829 100%);
  padding: 20px 24px;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 0;
  border-bottom: none;
  flex-shrink: 0;
}

.jg-modal .jg-ranking-header .jg-close {
  color: #fff;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.15);
}

.jg-modal .jg-ranking-header .jg-close:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.jg-ranking-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.jg-ranking-trophy {
  font-size: calc(40 * var(--jg));
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.jg-modal .jg-ranking-header .jg-ranking-title {
  margin: 0;
  color: #fff;
  font-size: calc(21.6 * var(--jg));
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.jg-ranking-subtitle {
  margin: 4px 0 0 0;
  color: rgba(255,255,255,0.85);
  font-size: calc(14 * var(--jg));
}

.jg-ranking-body {
  padding: 16px 20px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

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

.jg-ranking-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.jg-ranking-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 1st place - gold */
.jg-ranking-gold {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 16px rgba(245,158,11,0.25);
}

.jg-ranking-gold .jg-ranking-pos {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: calc(17.6 * var(--jg));
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}

.jg-ranking-gold .jg-ranking-name {
  font-size: calc(17.6 * var(--jg));
  font-weight: 700;
  color: #78350f;
}

.jg-ranking-silver .jg-ranking-name {
  color: #4c1d95;
}

.jg-ranking-bronze .jg-ranking-name {
  color: #065f46;
}

/* 2nd place - purple */
.jg-ranking-silver {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #ddd6fe 100%);
  border: 2px solid #a78bfa;
  box-shadow: 0 4px 12px rgba(167,139,250,0.2);
}

.jg-ranking-silver .jg-ranking-pos {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 2px 8px rgba(139,92,246,0.4);
}

/* 3rd place - green */
.jg-ranking-bronze {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
  border: 2px solid #34d399;
  box-shadow: 0 4px 12px rgba(52,211,153,0.2);
}

.jg-ranking-bronze .jg-ranking-pos {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}

.jg-ranking-pos {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(15 * var(--jg));
  color: #6b7280;
  background: #e5e7eb;
  flex-shrink: 0;
}

.jg-ranking-info {
  flex: 1;
  min-width: 0;
}

.jg-ranking-name {
  font-weight: 600;
  font-size: calc(16 * var(--jg));
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.jg-ranking-star {
  font-size: calc(15 * var(--jg));
}

.jg-ranking-user-link {
  color: inherit !important;
  text-decoration: none;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.jg-ranking-user-link:hover {
  text-decoration: underline;
  color: #8d2324 !important;
}

.jg-ranking-meta {
  display: flex;
  gap: 12px;
  margin-top: 3px;
  font-size: calc(13 * var(--jg));
  color: #6b7280;
}

.jg-ranking-level {
  font-weight: 600;
  color: #d97706;
}

.jg-ranking-places {
  color: #6b7280;
}

.jg-ranking-count {
  font-size: calc(24 * var(--jg));
  font-weight: 700;
  color: #374151;
  flex-shrink: 0;
  min-width: 40px;
  text-align: center;
}

/* Ranking modal width */
#jg-map-modal-ranking .jg-modal {
  max-width: 520px;
  width: 90%;
  overflow: hidden; /* Prevent double scrollbar — only .jg-ranking-body scrolls */
  display: flex;
  flex-direction: column;
}

/* Ranking empty placeholder rows */
.jg-ranking-empty {
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  opacity: 0.55;
}

.jg-ranking-empty:hover {
  transform: none;
  box-shadow: none;
}

.jg-ranking-empty .jg-ranking-pos {
  background: #e5e7eb;
  color: #cbd5e1;
}

.jg-ranking-empty-bar {
  height: 12px;
  width: 65%;
  background: #e5e7eb;
  border-radius: 6px;
}

.jg-ranking-empty-bar--short {
  width: 40%;
  height: 8px;
  margin-top: 6px;
}

.jg-ranking-empty-count {
  width: 28px;
  height: 12px;
  background: #e5e7eb;
  border-radius: 6px;
}

/* Sparkle particles for top 3 ranking rows — CSS only */
.jg-ranking-gold,
.jg-ranking-silver,
.jg-ranking-bronze {
  position: relative;
  overflow: hidden;
}

.jg-ranking-gold::after,
.jg-ranking-silver::after,
.jg-ranking-bronze::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

/* Gold particles — box-shadow dots */
.jg-ranking-gold::after {
  box-shadow:
    12px 6px 0 1.5px rgba(245,158,11,0.8),
    45px 18px 0 2px rgba(251,191,36,0.9),
    80px 4px 0 1px rgba(252,211,77,0.85),
    120px 22px 0 2.5px rgba(217,119,6,0.8),
    155px 8px 0 1.5px rgba(251,191,36,0.9),
    190px 20px 0 2px rgba(245,158,11,0.85),
    225px 5px 0 1px rgba(252,211,77,0.9),
    260px 16px 0 2.5px rgba(217,119,6,0.8),
    295px 10px 0 1.5px rgba(245,158,11,0.85),
    330px 22px 0 2px rgba(251,191,36,0.9),
    365px 3px 0 1.5px rgba(252,211,77,0.8),
    400px 18px 0 2px rgba(217,119,6,0.9),
    30px 28px 0 1px rgba(245,158,11,0.7),
    70px 30px 0 2px rgba(251,191,36,0.8),
    110px 35px 0 1.5px rgba(252,211,77,0.85),
    150px 32px 0 1px rgba(217,119,6,0.7),
    200px 36px 0 2px rgba(245,158,11,0.8),
    250px 30px 0 1.5px rgba(251,191,36,0.9),
    310px 34px 0 2px rgba(252,211,77,0.8),
    350px 28px 0 1px rgba(217,119,6,0.85),
    435px 8px 0 1.5px rgba(245,158,11,0.9),
    460px 28px 0 2px rgba(251,191,36,0.8),
    490px 14px 0 1px rgba(252,211,77,0.85);
  animation: jg-sparkle-gold 2.5s ease-in-out infinite alternate;
}

/* Purple particles */
.jg-ranking-silver::after {
  box-shadow:
    15px 8px 0 1.5px rgba(167,139,250,0.8),
    50px 20px 0 2px rgba(139,92,246,0.9),
    85px 5px 0 1px rgba(196,181,253,0.85),
    115px 24px 0 2.5px rgba(124,58,237,0.8),
    150px 10px 0 1.5px rgba(167,139,250,0.9),
    185px 22px 0 2px rgba(139,92,246,0.85),
    220px 6px 0 1px rgba(196,181,253,0.9),
    255px 18px 0 2.5px rgba(124,58,237,0.8),
    290px 12px 0 1.5px rgba(167,139,250,0.85),
    325px 24px 0 2px rgba(139,92,246,0.9),
    360px 4px 0 1.5px rgba(196,181,253,0.8),
    395px 20px 0 2px rgba(124,58,237,0.9),
    35px 30px 0 1px rgba(167,139,250,0.7),
    75px 32px 0 2px rgba(139,92,246,0.8),
    115px 36px 0 1.5px rgba(196,181,253,0.85),
    155px 34px 0 1px rgba(124,58,237,0.7),
    205px 38px 0 2px rgba(167,139,250,0.8),
    245px 32px 0 1.5px rgba(139,92,246,0.9),
    305px 36px 0 2px rgba(196,181,253,0.8),
    345px 30px 0 1px rgba(124,58,237,0.85),
    430px 10px 0 1.5px rgba(167,139,250,0.9),
    455px 30px 0 2px rgba(139,92,246,0.8),
    485px 16px 0 1px rgba(196,181,253,0.85);
  animation: jg-sparkle-purple 2.8s ease-in-out infinite alternate;
}

/* Green particles */
.jg-ranking-bronze::after {
  box-shadow:
    18px 7px 0 1.5px rgba(52,211,153,0.8),
    48px 19px 0 2px rgba(16,185,129,0.9),
    82px 3px 0 1px rgba(110,231,183,0.85),
    118px 23px 0 2.5px rgba(5,150,105,0.8),
    152px 9px 0 1.5px rgba(52,211,153,0.9),
    188px 21px 0 2px rgba(16,185,129,0.85),
    222px 7px 0 1px rgba(110,231,183,0.9),
    258px 17px 0 2.5px rgba(5,150,105,0.8),
    292px 11px 0 1.5px rgba(52,211,153,0.85),
    328px 23px 0 2px rgba(16,185,129,0.9),
    362px 5px 0 1.5px rgba(110,231,183,0.8),
    398px 19px 0 2px rgba(5,150,105,0.9),
    32px 29px 0 1px rgba(52,211,153,0.7),
    72px 31px 0 2px rgba(16,185,129,0.8),
    112px 37px 0 1.5px rgba(110,231,183,0.85),
    152px 33px 0 1px rgba(5,150,105,0.7),
    202px 37px 0 2px rgba(52,211,153,0.8),
    248px 31px 0 1.5px rgba(16,185,129,0.9),
    308px 35px 0 2px rgba(110,231,183,0.8),
    348px 29px 0 1px rgba(5,150,105,0.85),
    432px 9px 0 1.5px rgba(52,211,153,0.9),
    458px 29px 0 2px rgba(16,185,129,0.8),
    488px 15px 0 1px rgba(110,231,183,0.85);
  animation: jg-sparkle-green 3s ease-in-out infinite alternate;
}

@keyframes jg-sparkle-gold {
  0% { opacity: 0.4; filter: brightness(1); }
  25% { opacity: 1; filter: brightness(1.3); }
  50% { opacity: 0.5; filter: brightness(0.9); }
  75% { opacity: 1; filter: brightness(1.2); }
  100% { opacity: 0.3; filter: brightness(1); }
}

@keyframes jg-sparkle-purple {
  0% { opacity: 0.3; filter: brightness(1); }
  20% { opacity: 1; filter: brightness(1.2); }
  45% { opacity: 0.4; filter: brightness(0.9); }
  70% { opacity: 1; filter: brightness(1.3); }
  100% { opacity: 0.35; filter: brightness(1); }
}

@keyframes jg-sparkle-green {
  0% { opacity: 0.35; filter: brightness(1); }
  30% { opacity: 1; filter: brightness(1.2); }
  50% { opacity: 0.45; filter: brightness(0.9); }
  80% { opacity: 1; filter: brightness(1.3); }
  100% { opacity: 0.3; filter: brightness(1); }
}

/* Ranking button styling */
#jg-ranking-btn {
  position: relative;
}

/* Ranking responsive - tablet */
@media (max-width: 768px) {
  .jg-ranking-body {
    padding: 12px 14px 16px;
  }

  .jg-ranking-row {
    padding: 10px 12px;
    gap: 10px;
  }

  .jg-ranking-trophy {
    font-size: calc(32 * var(--jg));
  }

  .jg-ranking-title {
    font-size: calc(19.2 * var(--jg));
  }

  #jg-map-modal-ranking .jg-modal {
    max-width: 95%;
    width: 95%;
  }
}

/* Ranking responsive - mobile */
@media (max-width: 640px) {
  .jg-ranking-header {
    padding: 18px 48px 18px 16px !important;
    overflow: visible !important;
  }

  .jg-ranking-trophy {
    font-size: calc(28 * var(--jg));
  }

  .jg-ranking-title {
    font-size: calc(17.6 * var(--jg));
  }

  .jg-ranking-subtitle {
    font-size: calc(12 * var(--jg));
  }

  .jg-ranking-body {
    padding: 10px 12px 14px;
  }

  .jg-ranking-row {
    padding: 10px;
    gap: 8px;
  }

  .jg-ranking-pos {
    width: 30px;
    height: 30px;
    font-size: calc(13 * var(--jg));
  }

  .jg-ranking-gold .jg-ranking-pos {
    font-size: calc(15 * var(--jg));
  }

  .jg-ranking-name {
    font-size: calc(14 * var(--jg));
  }

  .jg-ranking-gold .jg-ranking-name {
    font-size: calc(15 * var(--jg));
  }

  .jg-ranking-meta {
    gap: 8px;
    font-size: calc(12 * var(--jg));
  }

  .jg-ranking-count {
    font-size: calc(19.2 * var(--jg));
    min-width: 30px;
  }

  /* Ranking button on mobile */
  #jg-ranking-btn {
    order: 3;
  }

  #jg-edit-profile-btn {
    order: 4;
  }

  .jg-top-bar-btn-admin {
    order: 5;
  }

  .jg-top-bar-btn[href*="logout"] {
    order: 6;
  }

  /* Ranking button icon on mobile */
  #jg-ranking-btn::before {
    content: "🏆";
    font-size: calc(16 * var(--jg));
    display: inline-block;
  }
}

/* Business promotion section in place modal */
.jg-business-promo {
  margin-top: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.jg-business-promo__icon {
  font-size: calc(32 * var(--jg));
  line-height: 1;
  flex-shrink: 0;
}

.jg-business-promo__text {
  flex: 1;
  min-width: 180px;
}

.jg-business-promo__text strong {
  color: #1e40af;
  font-size: calc(16 * var(--jg));
}

.jg-business-promo__btn {
  align-self: center;
  padding: 10px 20px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: calc(14.4 * var(--jg));
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.jg-business-promo__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.jg-business-promo__btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===== TAG INPUT ===== */
.jg-tags-wrap {
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 8px !important;
  background: #fff !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: calc(14 * var(--jg)) !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.jg-tags-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  list-style: none !important;
}

.jg-tag-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 16px !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  font-size: calc(13 * var(--jg)) !important;
  color: #374151 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.jg-tag-text {
  color: #8d2324 !important;
  font-weight: 500 !important;
}

.jg-tag-remove {
  background: none !important;
  border: none !important;
  color: #9ca3af !important;
  cursor: pointer !important;
  font-size: calc(16 * var(--jg)) !important;
  line-height: 1 !important;
  padding: 0 2px !important;
  margin-left: 2px !important;
  box-shadow: none !important;
  outline: none !important;
}

.jg-tag-remove:hover {
  color: #dc2626 !important;
}

.jg-tags-input {
  width: 100% !important;
  padding: 6px 8px !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  font-size: calc(14 * var(--jg)) !important;
  font-family: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #111 !important;
  margin: 0 !important;
}

.jg-tags-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.jg-tags-counter {
  font-size: calc(11 * var(--jg)) !important;
  color: #9ca3af !important;
  text-align: right !important;
  margin-top: 4px !important;
  font-family: inherit !important;
}

.jg-tags-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.jg-tags-suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: calc(13 * var(--jg));
  color: #374151;
}

.jg-tags-suggestion-item:hover,
.jg-tags-suggestion-item.active {
  background: #f3f4f6;
  color: #8d2324;
}

/* ===== TAGS DISPLAY (in point view) ===== */
.jg-place-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
}

.jg-place-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 14px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: 0.85em;
  color: #8d2324;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

a.jg-place-tag:hover {
  background: #8d2324;
  color: #fff;
  border-color: #8d2324;
  cursor: pointer;
}

/* ===== CATALOG INLINE TAGS ===== */
.jg-dir-tags {
  display: inline;
}

.jg-dir-tag-inline {
  font-size: calc(12 * var(--jg));
  color: #8d2324;
  font-weight: 500;
  text-decoration: none;
}

a.jg-dir-tag-inline:hover {
  text-decoration: underline;
}

/* ===== CONFETTI PARTICLE SHARED RULES ===== */
/*
 * All confetti particles are injected as fixed-position divs via JS.
 * The animations (jg-xp-float-up, jg-level-pulse) are already defined
 * above near the XP gain indicator.  Additional @keyframes for the
 * map-marker and vote-button bursts live here.
 */

/* Particles shot from map markers on approval - burst outward then fade */
@keyframes jg-marker-confetti-burst {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg);   opacity: 1; }
  60%  { opacity: 0.8; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.6) rotate(var(--rot)); opacity: 0; }
}

/* Particles shot from vote buttons - float upward with wobble */
@keyframes jg-vote-confetti-up {
  0%   { opacity: 1;   transform: translate(-50%, -50%) rotate(0deg);   }
  40%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

/* ===== ADVERTISE LINK IN FILTERS BAR ===== */
.jg-partner-link {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  border: 1.5px dashed #8d2324 !important;
  color: #8d2324 !important;
  font-size: calc(13 * var(--jg)) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  order: 8 !important;
  margin-left: auto !important;
  transition: background 0.15s, color 0.15s !important;
}

@media (max-width: 768px) {
  .jg-partner-link {
    display: none !important;
  }
}

.jg-partner-link:hover {
  background: #8d2324 !important;
  color: #fff !important;
  border-style: solid !important;
}

/* Top slot styles are injected inline with randomised class names (see class-slot-keys.php) */

/* ========================================
   MOBILE: ON-MAP FILTER BUTTON & PANEL
   Styled to match the map/satellite toggle
   ======================================== */

/* Only visible on mobile (created by JS only on mobile) – Elementor isolation */
#jg-map .jg-mobile-map-filter-control,
.jg-mobile-map-filter-control {
  background: #fff !important;
  background-color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

/* Hard isolation from Elementor global button styles */
#jg-map .jg-mobile-map-filter-btn,
.jg-mobile-map-filter-control .jg-mobile-map-filter-btn,
button.jg-mobile-map-filter-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  background: #fff !important;
  background-color: #fff !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  color: #374151 !important;
  transition: background 0.2s, color 0.2s !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}

#jg-map .jg-mobile-map-filter-btn:hover,
#jg-map .jg-mobile-map-filter-btn:active,
.jg-mobile-map-filter-control .jg-mobile-map-filter-btn:hover,
.jg-mobile-map-filter-control .jg-mobile-map-filter-btn:active {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

#jg-map .jg-mobile-map-filter-btn.jg-active,
.jg-mobile-map-filter-control .jg-mobile-map-filter-btn.jg-active {
  background: #8d2324 !important;
  background-color: #8d2324 !important;
  color: #fff !important;
}

#jg-map .jg-mobile-map-filter-btn svg,
.jg-mobile-map-filter-control .jg-mobile-map-filter-btn svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  pointer-events: none !important;
}

/* Floating filter panel on the map (mobile) – hard Elementor isolation */
#jg-map .jg-mobile-map-filter-panel,
.jg-mobile-map-filter-panel {
  position: absolute !important;
  top: 54px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1002 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  background-color: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  padding: 8px !important;
  margin: 0 !important;
  width: calc(100vw - 80px) !important;
  max-width: 280px !important;
  /* overflow: visible so suggestions dropdown is not clipped */
  overflow: visible !important;
  border: none !important;
  text-transform: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  box-sizing: border-box !important;
}

/* Filters inside the on-map panel: vertical layout */
.jg-mobile-map-filter-panel .jg-filters {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.jg-mobile-map-filter-panel .jg-filter-label {
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 10px 8px !important;
  min-width: unset !important;
  border: none !important;
  border-radius: 8px !important;
  gap: 10px !important;
}

.jg-mobile-map-filter-panel .jg-filter-label:hover {
  background: #f3f4f6 !important;
}

/* Show both icon and text in the panel */
.jg-mobile-map-filter-panel .jg-filter-icon {
  display: block !important;
  font-size: calc(18 * var(--jg)) !important;
  flex-shrink: 0 !important;
}

.jg-mobile-map-filter-panel .jg-filter-text {
  display: inline !important;
  font-size: calc(13 * var(--jg)) !important;
  font-weight: 500 !important;
  color: #374151 !important;
  text-transform: none !important;
}

/* Show checkboxes in the panel */
.jg-mobile-map-filter-panel .jg-filter-label input[type="checkbox"] {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
}

/* Checked state visual feedback */
.jg-mobile-map-filter-panel .jg-filter-label:has(input[type="checkbox"]:checked) {
  background: rgba(141, 35, 36, 0.08) !important;
}

/* Search input inside the panel – full Elementor isolation */
.jg-mobile-map-filter-panel .jg-search {
  width: 100% !important;
  margin-top: 4px !important;
  max-width: none !important;
  min-width: unset !important;
  overflow: visible !important;
  position: relative !important;
}

.jg-mobile-map-filter-panel .jg-search input[type="text"],
.jg-mobile-map-filter-panel .jg-search input {
  font-size: calc(13 * var(--jg)) !important;
  padding: 8px 36px 8px 12px !important;
  background: #fff !important;
  background-color: #fff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  color: #374151 !important;
  height: auto !important;
  min-height: auto !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Hide expand arrows in the compact mobile panel */
.jg-mobile-map-filter-panel .jg-filter-expand-btn {
  display: none;
}

/* Suggestions dropdown inside the mobile filter panel */
.jg-mobile-map-filter-panel .jg-search-suggestions {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  z-index: 10001 !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.jg-mobile-map-filter-panel .jg-suggest-group {
  border-bottom: 1px solid #e5e7eb;
}

.jg-mobile-map-filter-panel .jg-suggest-group:last-child {
  border-bottom: none;
}

.jg-mobile-map-filter-panel .jg-suggest-header {
  padding: 5px 10px !important;
  font-size: calc(9 * var(--jg)) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #8d2324 !important;
  background: #f9fafb !important;
  text-transform: uppercase !important;
  position: sticky !important;
  top: 0 !important;
}

.jg-mobile-map-filter-panel .jg-suggest-item {
  padding: 8px 10px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  transition: background 0.1s !important;
  font-size: calc(13 * var(--jg)) !important;
}

.jg-mobile-map-filter-panel .jg-suggest-item:hover,
.jg-mobile-map-filter-panel .jg-suggest-item.jg-suggest-active {
  background: #f3f4f6 !important;
}

.jg-mobile-map-filter-panel .jg-suggest-main {
  font-size: calc(13 * var(--jg)) !important;
  font-weight: 500 !important;
  color: #111827 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.jg-mobile-map-filter-panel .jg-suggest-sub {
  font-size: calc(11 * var(--jg)) !important;
  color: #9ca3af !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Mobile: arrange topright Leaflet controls in a row (filter btn left of toggle) */
@media (max-width: 768px) {
  #jg-map .leaflet-top.leaflet-right {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: flex-start !important;
    gap: 6px;
    top: 10px !important;
    right: 10px !important;
  }

  #jg-map .leaflet-top.leaflet-right .leaflet-control {
    margin: 0 !important;
    float: none !important;
    clear: none !important;
  }
}

/* Hide mobile on-map filter button in fullscreen mode (fullscreen has its own filter UI) */
#jg-map-wrap.jg-fullscreen .jg-mobile-map-filter-control {
  display: none !important;
}

#jg-map-wrap.jg-fullscreen .jg-mobile-map-filter-panel {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   JG Nav Bar – logo + hamburger menu
   Fully isolated from Elementor via all:unset + !important + ID selectors.
   Do NOT use class selectors here – Elementor overwrites them too easily.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Main bar ── */
#jg-nav-bar {
  all: unset !important;
  display: flex !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: #fff !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid #8d2324 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: calc(15 * var(--jg)) !important;
  color: #1f2937 !important;
  line-height: 1 !important;
  overflow: visible !important;
  /* Containment: style so Elementor's global counters/properties don't bleed in */
  contain: style !important;
}

/* ── Logo link ── */
#jg-nav-bar .jg-nav-logo-link {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* ── Nav site title ── */
#jg-nav-bar .jg-nav-site-title {
  all: unset !important;
  display: block !important;
  margin-left: 10px !important;
  font-size: calc(12 * var(--jg)) !important;
  font-weight: 700 !important;
  color: #8d2324 !important;
  line-height: 1.2 !important;
  max-width: 55vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* ── Logo image ── */
#jg-nav-bar .jg-nav-logo-img {
  all: unset !important;
  display: block !important;
  height: 36px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 36px !important;
  object-fit: contain !important;
}

/* ── Hamburger button: reset every property Elementor or a theme could set ── */
#jg-nav-bar .jg-hamburger-btn {
  all: unset !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  vertical-align: middle !important;
  font-family: inherit !important;
  color: #8d2324 !important;
}

#jg-nav-bar .jg-hamburger-btn:hover,
#jg-nav-bar .jg-hamburger-btn:focus {
  background-color: rgba(141, 35, 36, 0.08) !important;
  outline: none !important;
}

/* ── The three lines inside the button ── */
#jg-nav-bar .jg-hamburger-btn > span {
  all: unset !important;
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  background: #8d2324 !important;
  background-color: #8d2324 !important;
  border-radius: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  transform-origin: center !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

/* Animate to × when open */
#jg-nav-bar .jg-hamburger-btn.jg-nav-open > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}
#jg-nav-bar .jg-hamburger-btn.jg-nav-open > span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
#jg-nav-bar .jg-hamburger-btn.jg-nav-open > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* ── Dropdown nav menu – prawa boczna szuflada, niezależna od Elementora ── */
#jg-nav-menu {
  all: unset !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 52px !important;
  right: 0 !important;
  left: auto !important;
  width: min(300px, 92vw) !important;
  max-height: calc(100dvh - 52px) !important;
  overflow-y: auto !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid #8d2324 !important;
  border-left: 2px solid #8d2324 !important;
  border-radius: 0 0 0 10px !important;
  box-shadow: -4px 6px 24px rgba(0, 0, 0, 0.22) !important;
  z-index: 99998 !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: calc(15 * var(--jg)) !important;
  color: #1f2937 !important;
  line-height: 1.5 !important;
  contain: style !important;
  /* Animacja: schowane poza prawą krawędzią */
  transform: translateX(110%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              visibility 0s linear 0.3s !important;
}

#jg-nav-menu.jg-nav-open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              visibility 0s linear 0s !important;
}

/* ── Menu links – isolated from Elementor link/anchor styles ── */
#jg-nav-menu .jg-nav-menu-link {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  padding: 13px 20px !important;
  margin: 0 !important;
  color: #8d2324 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: calc(17 * var(--jg)) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid #f3f4f6 !important;
  outline: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s, color 0.15s !important;
}

#jg-nav-menu .jg-nav-menu-link:last-child {
  border-bottom: none !important;
}

#jg-nav-menu .jg-nav-menu-link:hover,
#jg-nav-menu .jg-nav-menu-link:focus {
  background-color: rgba(141, 35, 36, 0.06) !important;
  color: #8d2324 !important;
  outline: none !important;
}

/* ── Nav items with submenu ── */
.jg-nav-menu-item {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.jg-nav-menu-item:last-child {
  border-bottom: none !important;
}

.jg-nav-menu-link-wrap {
  all: unset !important;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.jg-nav-menu-link-wrap .jg-nav-menu-link {
  flex: 1 !important;
  border-bottom: none !important;
}

.jg-nav-sub-toggle {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  cursor: pointer !important;
  color: #8d2324 !important;
  font-size: 12px !important;
  transition: background-color 0.15s, color 0.15s !important;
  box-sizing: border-box !important;
  border-left: 1px solid #f3f4f6 !important;
}

.jg-nav-sub-toggle:hover,
.jg-nav-sub-toggle:focus {
  background-color: rgba(141, 35, 36, 0.06) !important;
  color: #8d2324 !important;
  outline: none !important;
}

.jg-nav-sub-toggle .jg-nav-arrow {
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}

.jg-nav-sub-toggle.jg-sub-open .jg-nav-arrow {
  transform: rotate(180deg) !important;
}

.jg-nav-submenu {
  display: none !important;
  background-color: #f9fafb !important;
}

.jg-nav-submenu.jg-sub-open {
  display: block !important;
}

#jg-nav-menu .jg-nav-sub-link {
  padding-left: 36px !important;
  font-size: calc(14 * var(--jg)) !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

#jg-nav-menu .jg-nav-sub-link:last-child {
  border-bottom: none !important;
}

/* ── Overlay przyciemniający ekran – płynna animacja ── */
#jg-nav-overlay {
  all: unset !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99997 !important;
  background: rgba(0, 0, 0, 0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: background 0.35s ease,
              opacity 0.35s ease,
              visibility 0s linear 0.35s !important;
  contain: style !important;
}

#jg-nav-overlay.jg-nav-open {
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: background 0.35s ease,
              opacity 0.35s ease,
              visibility 0s linear 0s !important;
}

/* ── Desktop: hide nav bar + menu + overlay (mobile-only) ── */
@media (min-width: 769px) {
  #jg-nav-bar {
    display: none !important;
  }
  #jg-nav-menu {
    display: none !important;
  }
  #jg-nav-overlay {
    display: none !important;
  }
}

/* ── Mobile: #jg-nav-bar sticks just below the info bar.
   Must appear AFTER the base #jg-nav-bar { top: 0 !important } rule above
   so that this later declaration wins the !important + equal-specificity tie. ── */
@media (max-width: 768px) {
  #jg-nav-bar {
    top: var(--jg-info-bar-h, 0px) !important;
  }
}

/* ── Fullscreen (mobile): hide nav bar + menu + overlay ── */
body.jg-fullscreen-active #jg-nav-bar,
body.jg-fullscreen-active #jg-nav-menu,
body.jg-fullscreen-active #jg-nav-overlay {
  display: none !important;
}

/* ── Fullscreen: modal musi byc ponad wrapperem (z-index: 99990) ── */
body.jg-fullscreen-active .jg-modal-bg {
  z-index: 99995 !important;
  top: 0 !important; /* nadpisuje offset 52px spod nav bara ktory jest ukryty w fullscreen */
}

/* ========================================
   MOBILE: Standalone search bar
   Positioned below filter/toggle buttons
   ======================================== */

.jg-mobile-search-bar {
  position: absolute !important;
  top: 54px !important;
  /* left/right set by JS to match topright controls width; fallback below */
  right: 10px !important;
  left: 10px !important;
  z-index: 1001 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  padding: 6px 10px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.jg-mobile-search-bar-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #9ca3af !important;
  pointer-events: none !important;
}

.jg-mobile-search-bar-input {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: calc(14 * var(--jg)) !important;
  color: #374151 !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

.jg-mobile-search-bar-input::placeholder {
  color: #9ca3af !important;
  font-size: calc(13 * var(--jg)) !important;
}

.jg-mobile-search-bar-clear {
  display: none;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  background: #e5e7eb !important;
  border-radius: 50% !important;
  color: #6b7280 !important;
  font-size: calc(14 * var(--jg)) !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Suggestions dropdown – appended to body, positioned via JS with position:fixed
   so virtual keyboard cannot obscure them */
.jg-mobile-search-bar-suggestions {
  position: fixed !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  /* top/bottom/left/right/maxHeight set by JS */
}

.jg-mobile-search-bar-suggestions .jg-suggest-group {
  border-bottom: 1px solid #e5e7eb;
}

.jg-mobile-search-bar-suggestions .jg-suggest-group:last-child {
  border-bottom: none;
}

.jg-mobile-search-bar-suggestions .jg-suggest-header {
  padding: 5px 10px !important;
  font-size: calc(9 * var(--jg)) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #8d2324 !important;
  background: #f9fafb !important;
  text-transform: uppercase !important;
  position: sticky !important;
  top: 0 !important;
}

.jg-mobile-search-bar-suggestions .jg-suggest-item {
  padding: 10px 10px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  transition: background 0.1s !important;
  font-size: calc(14 * var(--jg)) !important;
}

.jg-mobile-search-bar-suggestions .jg-suggest-item:hover,
.jg-mobile-search-bar-suggestions .jg-suggest-item.jg-suggest-active {
  background: #f3f4f6 !important;
}

.jg-mobile-search-bar-suggestions .jg-suggest-main {
  font-size: calc(13 * var(--jg)) !important;
  font-weight: 500 !important;
  color: #111827 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.jg-mobile-search-bar-suggestions .jg-suggest-sub {
  font-size: calc(11 * var(--jg)) !important;
  color: #9ca3af !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hide mobile search bar in fullscreen (fullscreen has its own search) */
#jg-map-wrap.jg-fullscreen .jg-mobile-search-bar {
  display: none !important;
}

/* ========================================
   80/20 MAP–SIDEBAR LAYOUT OVERRIDE
   Force map column to 80% and sidebar column to 20%
   regardless of Elementor settings, on non-mobile screens.
   ======================================== */
@media (min-width: 769px) {
  /* 1. Remove the "boxed" max-width constraint from the section that
        wraps both map and sidebar, so it stretches full-width. */
  .e-con-boxed:has(#jg-map-wrap):has(#jg-map-sidebar) {
    --container-max-width: 100% !important;
  }
  .e-con-boxed:has(#jg-map-wrap):has(#jg-map-sidebar) > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2. Set the two child columns to 80% / 20%.
        :not() guard ensures we only hit the direct column, not the parent section. */
  .e-con:has(#jg-map-wrap):not(:has(#jg-map-sidebar)),
  .e-con:has(.jg-wrap):not(:has(#jg-map-sidebar)) {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    width: 85% !important;
  }

  .e-con:has(#jg-map-sidebar):not(:has(#jg-map-wrap)) {
    flex: 0 0 15% !important;
    max-width: 15% !important;
    width: 15% !important;
  }

  /* 3. Classic Elementor (non-flex) columns fallback */
  .elementor-column:has(#jg-map-wrap):not(:has(#jg-map-sidebar)),
  .elementor-column:has(.jg-wrap):not(:has(#jg-map-sidebar)) {
    width: 85% !important;
    max-width: 85% !important;
  }

  .elementor-column:has(#jg-map-sidebar):not(:has(#jg-map-wrap)) {
    width: 15% !important;
    max-width: 15% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE REDESIGN — Full-height map + floating overlays
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0. #jg-map-wrap must be the containing block for #jg-mobile-overlays ── */
/* position:absolute on overlays anchors to nearest positioned ancestor.
   Without this, overlays anchor to a distant Elementor container instead. */
@media (max-width: 768px) {
  #jg-map-wrap {
    position: relative !important;
  }
}

/* ── 1. Hide top bar AND Elementor/theme site header on mobile when map is present ── */
/* The inline <style> in wp_head (hide_elementor_header_early) handles desktop flash
   with zero FOUC by detecting the map page in PHP before body renders. These CSS
   rules are fallbacks for the mobile viewport. */
@media (max-width: 768px) {
  body:has(#jg-map-wrap) .jg-custom-top-bar,
  body:has(#jg-map-wrap) .elementor-location-header,
  body:has(#jg-map-wrap) header.site-header,
  body:has(#jg-map-wrap) .site-header,
  body:has(#jg-map-wrap) #masthead,
  body:has(#jg-map-wrap) #site-header,
  body:has(#jg-map-wrap) .wp-block-template-part[class*="header"] {
    display: none !important;
  }
}

/* ── 2. Floating overlays container ── */
#jg-mobile-overlays {
  display: none;
}
@media (max-width: 768px) {
  #jg-mobile-overlays {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 900;
    gap: 8px;
    pointer-events: none;
  }
  #jg-mobile-overlays > * {
    pointer-events: auto;
  }
}

/* ── 3. Mobile user panel ── */
.jg-mobile-user-panel {
  display: none;
}
@media (max-width: 768px) {
  .jg-mobile-user-panel {
    /* Hard reset – prevent Elementor/theme from bleeding styles in */
    all: unset !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: #8d2324 !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.28) !important;
    color: #fff !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-size: calc(13 * var(--jg)) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    contain: style !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  .jg-mobile-user-panel--guest {
    justify-content: center;
  }
  .jg-mup-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .jg-mup-username {
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    font-size: calc(13 * var(--jg));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .jg-mup-role {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .jg-mup-role--spon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #f59e0b;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .jg-mup-level {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }
  .jg-mup-level-num {
    font-size: calc(12 * var(--jg));
    font-weight: 800;
    white-space: nowrap;
    color: #fbbf24; /* default bronze-ish, overridden by prestige classes below */
  }
  .jg-mup-xp-bar {
    display: inline-block;
    width: 3rem;
    height: 5px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
  }
  .jg-mup-xp-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width 0.4s ease;
  }
  .jg-mup-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }
  .jg-mup-btn {
    all: unset;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .jg-mup-btn:active {
    background: rgba(255,255,255,0.18);
  }
  .jg-mup-btn--admin {
    color: #fbbf24 !important;
  }
  .jg-mup-login-btn {
    all: unset;
    display: flex !important;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-weight: 600;
    font-size: calc(14 * var(--jg));
    cursor: pointer;
    padding: 4px 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  /* ── Mobile user panel: two-row layout ── */
  .jg-mobile-user-panel {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .jg-mup-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  /* Moderation notifications row */
  .jg-mup-notifications {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,0.18);
    flex-wrap: wrap;
  }
  .jg-mup-notifications--empty {
    display: none !important;
  }
  .jg-mup-notif-btn {
    all: unset;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background 0.15s;
  }
  .jg-mup-notif-btn:active {
    background: rgba(255,255,255,0.28);
  }
  .jg-mup-notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    pointer-events: none;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1;
  }

  /* Prestige level colours for mobile user panel */
  .jg-level-prestige-bronze .jg-mup-level-num  { color: #cd7f32; }
  .jg-level-prestige-bronze .jg-mup-xp-fill    { background: linear-gradient(90deg, #cd7f32, #a0522d); }
  .jg-level-prestige-silver .jg-mup-level-num  { color: #e0e0e0; }
  .jg-level-prestige-silver .jg-mup-xp-fill    { background: linear-gradient(90deg, #c0c0c0, #d4d4d4); }
  .jg-level-prestige-gold .jg-mup-level-num    { color: #fbbf24; text-shadow: 0 1px 3px rgba(251,191,36,.5); }
  .jg-level-prestige-gold .jg-mup-xp-fill      { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
  .jg-level-prestige-emerald .jg-mup-level-num { color: #34d399; text-shadow: 0 1px 3px rgba(52,211,153,.5); }
  .jg-level-prestige-emerald .jg-mup-xp-fill   { background: linear-gradient(90deg, #34d399, #10b981); }
  .jg-level-prestige-purple .jg-mup-level-num  { color: #a78bfa; text-shadow: 0 1px 3px rgba(167,139,250,.5); }
  .jg-level-prestige-purple .jg-mup-xp-fill    { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
  .jg-level-prestige-diamond .jg-mup-level-num { color: #67e8f9; text-shadow: 0 1px 3px rgba(103,232,249,.5); }
  .jg-level-prestige-diamond .jg-mup-xp-fill   { background: linear-gradient(90deg, #67e8f9, #22d3ee); }
  .jg-level-prestige-ruby .jg-mup-level-num    { color: #fb7185; text-shadow: 0 1px 3px rgba(251,113,133,.5); }
  .jg-level-prestige-ruby .jg-mup-xp-fill      { background: linear-gradient(90deg, #fb7185, #e11d48); }
  .jg-level-prestige-legend .jg-mup-level-num  {
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #fb7185, #a78bfa, #67e8f9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    text-shadow: none;
  }
  .jg-level-prestige-legend .jg-mup-xp-fill    { background: linear-gradient(90deg, #fbbf24, #fb7185, #a78bfa, #67e8f9); }
}

/* ── 4. Mobile controls row ── */
#jg-mobile-controls-row {
  display: none;
}
@media (max-width: 768px) {
  #jg-mobile-controls-row {
    /* Hard reset – prevent Elementor/theme from bleeding any styles in */
    all: unset !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    padding: 5px 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    contain: style !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-size: calc(14 * var(--jg)) !important;
    color: #374151 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* Filter button — high-specificity prefix beats Elementor's button rules */
  #jg-mobile-controls-row .jg-mcr-filter-btn {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-size: calc(14 * var(--jg)) !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  #jg-mobile-controls-row .jg-mcr-filter-btn:active,
  #jg-mobile-controls-row .jg-mcr-filter-btn.jg-active {
    background: #8d2324 !important;
    color: #fff !important;
  }

  /* Search wrapper (flex-grow) */
  #jg-mobile-controls-row .jg-mcr-search {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 5px !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #jg-mobile-controls-row .jg-mcr-search-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #9ca3af !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #jg-mobile-controls-row .jg-mcr-search-input {
    all: unset !important;
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: calc(14 * var(--jg)) !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    color: #374151 !important;
    caret-color: #8d2324 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    border-radius: 0 !important;
  }
  #jg-mobile-controls-row .jg-mcr-search-input::placeholder {
    color: #9ca3af !important;
    font-size: calc(13 * var(--jg)) !important;
  }
  #jg-mobile-controls-row .jg-mcr-search-clear {
    all: unset !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    background: #e5e7eb !important;
    border-radius: 50% !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
  }
  #jg-mobile-controls-row .jg-mcr-search-clear.jg-visible {
    display: flex !important;
  }

  /* Locate me button */
  #jg-mobile-controls-row .jg-mcr-locate-btn {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  #jg-mobile-controls-row .jg-mcr-locate-btn--active {
    color: #1a73e8 !important;
    background: rgba(26, 115, 232, 0.1) !important;
  }
  #jg-mobile-controls-row .jg-mcr-locate-btn--loading {
    animation: jg-locate-pulse 0.9s ease-in-out infinite !important;
  }

  /* Map/satellite toggle inside controls row — icons only, no text */
  #jg-mobile-controls-row .jg-map-toggle-control {
    flex-shrink: 0;
    box-shadow: none !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  #jg-mobile-controls-row .jg-map-toggle {
    gap: 0 !important;
    padding: 2px !important;
    border: none !important;
  }
  #jg-mobile-controls-row .jg-map-toggle-text {
    display: none !important;
  }
  #jg-mobile-controls-row .jg-map-toggle-label {
    padding: 5px 8px !important;
    border-radius: 6px !important;
    font-size: 0 !important; /* extra safety */
  }
  #jg-mobile-controls-row .jg-map-toggle-switch {
    display: none !important; /* hide the toggle switch; clicking labels is enough */
  }

  /* Zoom buttons (right) — high-specificity prefix */
  #jg-mobile-controls-row .jg-mcr-zoom {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #jg-mobile-controls-row .jg-mcr-zoom-btn {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 7px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.15s !important;
    flex-shrink: 0 !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  #jg-mobile-controls-row .jg-mcr-zoom-btn:active {
    background: #e5e7eb !important;
  }
}

/* ── Locate me button pulse animation ── */
@keyframes jg-locate-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── 5. Mobile banner slot ── */
@media (max-width: 768px) {
  .jg-mobile-banner-slot {
    border-radius: 10px;
    overflow: visible;
    max-height: none;
    display: block;
  }
  .jg-mobile-banner-slot > * {
    border-radius: 10px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* ── 6. Hide superseded mobile controls on mobile; fullscreen button hidden everywhere ── */
.jg-fullscreen-control { display: none !important; }
@media (max-width: 768px) {
  .jg-mobile-search-bar          { display: none !important; }
  .jg-mobile-map-filter-control  { display: none !important; }
}

/* ── 7. Filter panel: position below controls row (via JS top, override CSS) ── */
@media (max-width: 768px) {
  #jg-map .jg-mobile-map-filter-panel,
  .jg-mobile-map-filter-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    /* top is set dynamically by JS */
  }
}

/* ── 8. Landscape orientation overlay ── */
#jg-landscape-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #111827;
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align: center;
  padding: 32px 24px;
  box-sizing: border-box;
}
#jg-landscape-overlay p {
  font-size: 16px;
  font-weight: 500;
  color: #d1d5db;
  max-width: 280px;
  margin: 0;
  line-height: 1.5;
}
@media screen and (orientation: landscape) and (max-height: 500px) {
  #jg-landscape-overlay {
    display: flex !important;
  }
}

/* Ukryj logo portalu w stopce strony */
.site-footer .site-logo,
.site-footer .site-branding .site-logo,
#site-footer .site-logo,
footer.site-footer .custom-logo-link,
footer.site-footer .site-branding {
  display: none !important;
}

/* === Kontakt + przycisk trasy === */
.jg-kontakt-wrapper {
  margin: 12px 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch;
}
.jg-kontakt-box {
  flex: 0 0 calc(80% - 4px);
  padding: 12px 16px;
  background: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #bae6fd;
  box-sizing: border-box;
}
.jg-kontakt-dir-col {
  flex: 0 0 calc(20% - 4px);
  display: flex;
}
.jg-kontakt-dir-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 64px;
  background: #eff6ff;
  color: #1d4ed8 !important;
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
  transition: background 0.2s, box-shadow 0.2s;
}
.jg-kontakt-dir-btn:hover {
  background: #dbeafe;
  box-shadow: 0 2px 10px rgba(37,99,235,0.18);
}
.jg-kontakt-solo-dir {
  margin: 12px 0;
}
.jg-kontakt-solo-dir .jg-kontakt-dir-btn {
  flex-direction: row;
  width: auto;
  height: auto;
  min-height: unset;
  white-space: nowrap;
  padding: 10px 20px;
  gap: 8px;
}
@media (max-width: 768px) {
  .jg-kontakt-wrapper {
    flex-direction: column;
  }
  .jg-kontakt-box {
    flex: none;
    width: 100%;
  }
  .jg-kontakt-dir-col {
    flex: none;
    width: 100%;
    order: -1;
  }
  .jg-kontakt-dir-btn {
    flex-direction: row;
    min-height: 48px;
    gap: 10px;
    padding: 12px 16px;
  }
  .jg-kontakt-solo-dir .jg-kontakt-dir-btn {
    width: 100%;
    height: auto;
    min-height: 48px;
  }
}

/* ==========================================================================
   Menu – modal display section
   ========================================================================== */

.jg-menu-modal-section {
  padding: 10px 14px;
  background: #d1fae5;
  border: 1px solid #86efac;
  border-radius: 8px;
  font-size: calc(13 * var(--jg));
  color: #065f46;
}

.jg-menu-modal-photos {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 8px;
}

.jg-menu-modal-photo {
  width: 64px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.jg-menu-modal-photo:hover {
  transform: scale(1.05);
}

.jg-menu-modal-sec-name {
  font-size: calc(10 * var(--jg));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #065f46;
  margin: 8px 0 4px;
  opacity: 0.8;
}

.jg-menu-modal-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.jg-menu-modal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted #fde68a;
}

.jg-menu-modal-row:last-child {
  border-bottom: none;
}

.jg-menu-modal-name {
  font-size: calc(13 * var(--jg));
  color: #1f2937;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jg-menu-modal-price {
  font-size: calc(13 * var(--jg));
  font-weight: 700;
  color: #065f46;
  white-space: nowrap;
  flex-shrink: 0;
}

.jg-menu-modal-link {
  display: inline-block;
  margin-top: 8px;
  font-size: calc(12 * var(--jg));
  font-weight: 600;
  color: #14532d !important;
  text-decoration: underline;
}

/* ==========================================================================
   Menu editor – Elementor isolation (inputs, textareas, labels, buttons)
   ========================================================================== */

.jg-modal-bg .jg-menu-ed-sec-name,
.jg-modal-bg .jg-menu-ed-item-name,
.jg-modal-bg .jg-menu-ed-item-price,
.jg-modal-bg .jg-menu-ed-item-desc,
.jg-modal-bg .jg-menu-ed-variant-label,
.jg-modal-bg .jg-menu-ed-variant-price,
.jg-modal-bg .jg-menu-ed-size-input {
  box-sizing: border-box !important;
  background: #fff !important;
  color: #1f2937 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.jg-modal-bg .jg-menu-ed-sec-name:focus,
.jg-modal-bg .jg-menu-ed-item-name:focus,
.jg-modal-bg .jg-menu-ed-item-price:focus,
.jg-modal-bg .jg-menu-ed-item-desc:focus,
.jg-modal-bg .jg-menu-ed-variant-label:focus,
.jg-modal-bg .jg-menu-ed-variant-price:focus,
.jg-modal-bg .jg-menu-ed-size-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.35) !important;
}

.jg-modal-bg .jg-menu-ed-dtag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: calc(11 * var(--jg)) !important;
  font-weight: 400 !important;
  color: #374151 !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.jg-modal-bg .jg-menu-ed-dtag input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  accent-color: #8d2324 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
}

.jg-modal-bg .jg-menu-ed-sec-del,
.jg-modal-bg .jg-menu-ed-item-del,
.jg-modal-bg .jg-menu-ed-variants-toggle,
.jg-modal-bg .jg-menu-ed-add-item,
.jg-modal-bg .jg-menu-ed-add-variant,
.jg-modal-bg .jg-menu-ed-variant-del,
.jg-modal-bg .jg-menu-ed-size-tag-del {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

/* ── Hard-reset every custom button in the menu editor ── */

/* "Usuń" section delete */
.jg-modal-bg .jg-menu-ed-sec-del {
  font-size: calc(12 * var(--jg)) !important;
  color: #dc2626 !important;
  background: none !important;
  background-color: transparent !important;
  border: 1px solid #dc2626 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  transition: background 0.15s !important;
}
.jg-modal-bg .jg-menu-ed-sec-del:hover {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
}

/* 🗑 item delete */
.jg-modal-bg .jg-menu-ed-item-del {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  color: #9ca3af !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}
.jg-modal-bg .jg-menu-ed-item-del:hover {
  color: #dc2626 !important;
  background: none !important;
  background-color: transparent !important;
}

/* "Rozmiary" variants toggle */
.jg-modal-bg .jg-menu-ed-variants-toggle {
  font-size: calc(11 * var(--jg)) !important;
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 3px 7px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  color: #374151 !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}
.jg-modal-bg .jg-menu-ed-variants-toggle:hover {
  background: #e0f2fe !important;
  background-color: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #374151 !important;
}

/* "+ Dodaj pozycję" */
.jg-modal-bg .jg-menu-ed-add-item {
  font-size: calc(12 * var(--jg)) !important;
  color: #8d2324 !important;
  background: none !important;
  background-color: transparent !important;
  border: 1px dashed #8d2324 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  display: inline-block !important;
}
.jg-modal-bg .jg-menu-ed-add-item:hover {
  background: #fff5f5 !important;
  background-color: #fff5f5 !important;
  color: #8d2324 !important;
}

/* "× " variant row delete */
.jg-modal-bg .jg-menu-ed-variant-del {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  color: #9ca3af !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-transform: none !important;
  font-family: inherit !important;
}
.jg-modal-bg .jg-menu-ed-variant-del:hover {
  color: #dc2626 !important;
  background: none !important;
  background-color: transparent !important;
}

/* "+ Rozmiar" */
.jg-modal-bg .jg-menu-ed-add-variant {
  font-size: calc(11 * var(--jg)) !important;
  color: #0284c7 !important;
  background: none !important;
  background-color: transparent !important;
  border: 1px dashed #7dd3fc !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  align-self: flex-start !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}
.jg-modal-bg .jg-menu-ed-add-variant:hover {
  background: #e0f2fe !important;
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
}

/* "× " size tag delete */
.jg-modal-bg .jg-menu-ed-size-tag-del {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  color: #0369a1 !important;
  opacity: 0.6;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
}
.jg-modal-bg .jg-menu-ed-size-tag-del:hover {
  opacity: 1;
  background: none !important;
  background-color: transparent !important;
}

/* "Dodaj" size label add button */
.jg-modal-bg #jg-menu-ed-size-btn {
  font-size: calc(12 * var(--jg)) !important;
  padding: 5px 10px !important;
  height: auto !important;
  min-height: auto !important;
}

/* ==========================================================================
   Menu editor panel (inside modalEdit)
   ========================================================================== */

.jg-menu-ed-photos-area {
  margin-bottom: 16px;
}

.jg-menu-ed-photos-title {
  font-size: calc(11 * var(--jg));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 8px;
}

.jg-menu-ed-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.jg-menu-ed-photo {
  position: relative;
  width: 80px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.jg-menu-ed-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jg-menu-ed-photo-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(220,38,38,0.85);
  color: #fff;
  border: none;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.jg-menu-ed-photo-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  color: #9ca3af;
  font-size: 28px;
  transition: border-color 0.15s, color 0.15s;
}

.jg-menu-ed-photo-add:hover {
  border-color: #8d2324;
  color: #8d2324;
}

.jg-menu-ed-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.jg-menu-ed-sec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.jg-menu-ed-drag {
  color: #d1d5db;
  font-size: 18px;
  cursor: grab;
  flex-shrink: 0;
  line-height: 1;
}

.jg-menu-ed-sec-name {
  flex: 1;
  font-size: calc(14 * var(--jg));
  font-weight: 600;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 10px;
  color: #1f2937;
}

.jg-menu-ed-sec-del {
  font-size: calc(12 * var(--jg));
  color: #dc2626;
  background: none;
  border: 1px solid #dc2626;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.jg-menu-ed-sec-del:hover {
  background: #fee2e2;
}

.jg-menu-ed-item {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}

.jg-menu-ed-item-top {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.jg-menu-ed-item-name {
  flex: 1;
  font-size: calc(13 * var(--jg));
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
}

.jg-menu-ed-item-price {
  font-size: calc(13 * var(--jg));
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
  width: 90px !important;
  flex-shrink: 0 !important;
}

.jg-menu-ed-item-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #9ca3af;
  flex-shrink: 0;
  padding: 2px 4px;
  transition: color 0.15s;
}

.jg-menu-ed-item-del:hover {
  color: #dc2626;
}

.jg-menu-ed-item-desc {
  width: 100%;
  font-size: calc(12 * var(--jg));
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
  resize: vertical;
  font-family: inherit;
  color: #374151;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.jg-menu-ed-dietary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.jg-menu-ed-dtag {
  font-size: calc(11 * var(--jg));
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.jg-menu-ed-add-item {
  font-size: calc(12 * var(--jg));
  color: #8d2324;
  background: none;
  border: 1px dashed #8d2324;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s;
}

.jg-menu-ed-add-item:hover {
  background: #fff5f5;
}

/* Variants toggle + rows */
.jg-menu-ed-variants-toggle {
  font-size: calc(11 * var(--jg));
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
  color: #374151;
  transition: background 0.15s, border-color 0.15s;
}
.jg-menu-ed-variants-toggle:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
}
.jg-menu-ed-variants {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 4px;
  padding: 6px 8px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
}
.jg-menu-ed-variant-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.jg-menu-ed-variant-label {
  flex: 1;
  min-width: 0;
  font-size: calc(12 * var(--jg)) !important;
  padding: 4px 6px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
}
.jg-menu-ed-variant-price {
  font-size: calc(12 * var(--jg)) !important;
  padding: 4px 6px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
}
.jg-menu-ed-variant-del {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
}
.jg-menu-ed-variant-del:hover { color: #dc2626; }
.jg-menu-ed-add-variant {
  font-size: calc(11 * var(--jg));
  color: #0284c7;
  background: none;
  border: 1px dashed #7dd3fc;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 2px;
}
.jg-menu-ed-add-variant:hover { background: #e0f2fe; }

/* Preset size pills inside variants panel */
.jg-menu-ed-variant-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.jg-menu-ed-preset-pill {
  display: inline-flex;
  align-items: center;
  font-size: calc(11 * var(--jg));
  background: #f0f9ff;
  border: 1px solid #7dd3fc;
  border-radius: 20px;
  padding: 3px 10px;
  color: #0284c7;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.jg-menu-ed-preset-pill:hover {
  background: #bae6fd;
  color: #0369a1;
}

/* Elementor reset for preset pills */
.jg-modal-bg .jg-menu-ed-preset-pill {
  font-size: calc(11 * var(--jg)) !important;
  background: #f0f9ff !important;
  background-color: #f0f9ff !important;
  border: 1px solid #7dd3fc !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  color: #0284c7 !important;
  cursor: pointer !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
.jg-modal-bg .jg-menu-ed-preset-pill:hover {
  background: #bae6fd !important;
  background-color: #bae6fd !important;
  color: #0369a1 !important;
}

/* Size labels manager (predefined sizes per place) */
.jg-menu-ed-sizes-area {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.jg-menu-ed-size-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 8px;
}
.jg-menu-ed-size-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  border-radius: 20px;
  padding: 3px 8px 3px 10px;
  font-size: calc(12 * var(--jg));
  color: #0369a1;
  font-weight: 500;
  white-space: nowrap;
}
.jg-menu-ed-size-tag-del {
  background: none;
  border: none;
  color: #0369a1;
  opacity: 0.6;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.jg-menu-ed-size-tag-del:hover { opacity: 1; }
.jg-menu-ed-size-add {
  display: flex;
  gap: 6px;
  align-items: center;
}
.jg-menu-ed-size-input {
  flex: 1;
  min-width: 0;
  font-size: calc(12 * var(--jg)) !important;
  padding: 5px 8px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  max-width: 160px;
}

/* ── Contact footer bar ──────────────────────────────────────────────────────
   Fixed at the bottom of every page. Height tracked via --jg-footer-h so the
   map viewport calculation can subtract it (see jgFitMobileViewport in
   class-enqueue.php). z-index 9998 = below modals (99999) but above content.
   ─────────────────────────────────────────────────────────────────────────── */
#jg-footer-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  background: #8d2324 !important;
  color: #fff !important;
  height: 28px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: calc(12 * var(--jg)) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  white-space: nowrap !important;
}

.jg-footer-bar-copy {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: inherit !important;
}

.jg-footer-bar-link {
  all: unset !important;
  color: #fff !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.45) !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  transition: text-decoration-color 0.15s !important;
}

.jg-footer-bar-link:hover,
.jg-footer-bar-link:focus {
  text-decoration-color: #fff !important;
  color: #fff !important;
}

/* Desktop fullscreen map: account for footer height */
#jg-map-wrap.jg-fullscreen {
  height: calc(100vh - var(--jg-footer-h, 28px)) !important;
}

/* Lift Leaflet bottom controls above the fixed footer bar so they remain
   accessible. The footer overlays the bottom of the map (no gap needed). */
.jg-map .leaflet-bottom {
  bottom: calc(var(--jg-footer-h, 28px) + 4px) !important;
}

/* ── Mobile nav: envelope (contact) icon ────────────────────────────────────
   Sits between the logo link and the hamburger button inside #jg-nav-bar.
   Uses margin-left: auto to push itself (and the hamburger) to the right,
   overriding justify-content: space-between on the parent.
   ─────────────────────────────────────────────────────────────────────────── */
#jg-nav-bar .jg-nav-contact-btn {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #8d2324 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;   /* push contact + hamburger to the right */
  margin-right: 4px !important;
  transition: background 0.15s !important;
  -webkit-tap-highlight-color: transparent !important;
}

#jg-nav-bar .jg-nav-contact-btn:hover,
#jg-nav-bar .jg-nav-contact-btn:focus {
  background: rgba(141, 35, 36, 0.08) !important;
  color: #8d2324 !important;
}

#jg-nav-bar .jg-nav-contact-btn svg {
  display: block !important;
  flex-shrink: 0 !important;
}

/* ── Desktop top bar: contact button (icon-only) ────────────────────────────
   Rendered in .jg-top-bar-left, after the Menu dropdown.
   Always icon-only — the top bar has too many items to show text.
   ─────────────────────────────────────────────────────────────────────────── */
.jg-top-bar-contact-btn {
  text-decoration: none !important;
  color: #fff !important;
  padding: 7px !important;
  width: 34px !important;
  height: 34px !important;
  justify-content: center !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
.jg-top-bar-contact-btn:hover {
  color: #fff !important;
  opacity: 0.8 !important;
}
.jg-top-bar-contact-btn .jg-btn-icon {
  width: 18px !important;
  height: 18px !important;
}

/* On mobile the entire .jg-top-bar-left is hidden (hamburger nav covers it).
   So the desktop contact button is automatically hidden on mobile. */

/* ── Place contact modal ────────────────────────────────────────────────────
   Used by openPlaceContactModal() in jg-map.js to show a contact form.
   ─────────────────────────────────────────────────────────────────────────── */
.jg-place-contact-form {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--jg));
}

.jg-place-contact-form label {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--jg));
  font-size: calc(13 * var(--jg));
  font-weight: 600;
  color: #374151;
}

.jg-place-contact-form input,
.jg-place-contact-form textarea {
  width: 100%;
  padding: calc(9 * var(--jg)) calc(12 * var(--jg));
  border: 1.5px solid #d1d5db;
  border-radius: calc(8 * var(--jg));
  font-size: calc(14 * var(--jg));
  font-family: inherit;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s;
  resize: vertical;
}

.jg-place-contact-form input:focus,
.jg-place-contact-form textarea:focus {
  outline: none;
  border-color: #8d2324;
}

.jg-place-contact-form textarea {
  min-height: clamp(80px, 10vh, 120px);
}

.jg-place-contact-status {
  font-size: calc(13 * var(--jg));
  min-height: 18px;
  text-align: center;
}

.jg-place-contact-status--error { color: #b91c1c; }
.jg-place-contact-status--ok    { color: #15803d; }

/* ── "Napisz wiadomość" button inside the kontakt box ─────────────────────── */
/* High-specificity + !important to beat Elementor global button styles */
#jg-map-modal-view .jg-place-contact-open-btn,
.jg-modal .jg-place-contact-open-btn {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(6 * var(--jg)) !important;
  padding: calc(7 * var(--jg)) calc(14 * var(--jg)) !important;
  background: #eff6ff !important;
  border: 1.5px solid #93c5fd !important;
  border-radius: calc(8 * var(--jg)) !important;
  color: #1d4ed8 !important;
  font-size: calc(13 * var(--jg)) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
#jg-map-modal-view .jg-place-contact-open-btn:hover,
#jg-map-modal-view .jg-place-contact-open-btn:focus,
.jg-modal .jg-place-contact-open-btn:hover,
.jg-modal .jg-place-contact-open-btn:focus {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
  color: #1e40af !important;
}
#jg-map-modal-view .jg-place-contact-open-btn svg,
.jg-modal .jg-place-contact-open-btn svg {
  flex-shrink: 0 !important;
}