/* Full-screen map, dark background, no scrollbars */
html, body { 
  overflow: hidden !important; 
  height: 100% !important; 
  margin: 0 !important; 
  padding: 0 !important; 
  background: #000;
}

body { 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 
}

#map.map-container { 
  height: 100vh !important; 
  width: 100% !important; 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* White transparent navbar */
.pmd-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px; /* Smanjeno za 20% (70px -> 56px) */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 1.6rem; /* Smanjeno za 20% (2rem -> 1.6rem) */
}

.pmd-navbar-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem; /* Smanjeno za 20% (2rem -> 1.6rem) */
}

.pmd-logo-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.pmd-logo {
  font-size: 1.2rem; /* Smanjeno za 20% (1.5rem -> 1.2rem) */
  font-weight: 700;
  color: #333;
  letter-spacing: 1.6px; /* Smanjeno za 20% (2px -> 1.6px) */
  white-space: nowrap;
  line-height: 1.2;
}

.logo-red {
  color: #dc3545; /* Crvena boja */
}

.logo-white {
  color: #333; /* Tamno siva boja za bijeli navbar */
}

.pmd-tagline {
  font-size: 0.7rem;
  color: #6c757d; /* Siva boja */
  line-height: 1.2;
  white-space: nowrap;
}

.tagline-sub {
  color: #6c757d; /* Siva boja */
  font-weight: 400;
}

.pmd-search-container {
  flex: 1;
  max-width: 600px;
  position: relative;
  margin: 0 auto;
}

.pmd-search {
  width: 100%;
  padding: 0.6rem 2rem 0.6rem 2rem; /* Padding desno za X gumb */
  background: rgba(0, 0, 0, 0.05);
  border: 0px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  color: #333;
  font-size: 0.76rem; /* Smanjeno za 20% (0.95rem -> 0.76rem) */
  transition: all 0.3s ease;
}

.pmd-search::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.pmd-search:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.pmd-search-icon {
  position: absolute;
  left: 0.7rem; /* Smanjeno za 20% (0.875rem -> 0.7rem) */
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  font-size: 0.9rem; /* Smanjeno proporcionalno */
}

.pmd-search-clear {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: color 0.2s ease;
  z-index: 10;
}

.pmd-search-clear:hover {
  color: rgba(0, 0, 0, 0.9);
}

.pmd-search-clear:focus {
  outline: none;
}

.pmd-right {
  display: flex;
  align-items: center;
  gap: 1.2rem; /* Smanjeno za 20% (1.5rem -> 1.2rem) */
  white-space: nowrap;
}

.pmd-nav-link {
  color: #6c757d; /* Tamno siva boja za bijeli navbar */
  text-decoration: none;
  font-size: 0.76rem; /* Smanjeno za 20% (0.95rem -> 0.76rem) */
  font-weight: 600; /* Kao na slici */
  text-transform: uppercase; /* Velika slova */
  transition: color 0.2s ease;
}

.pmd-nav-link:hover {
  color: #333;
}

.pmd-mark-logo {
  height: 40px; /* Smanjeno za 20% (50px -> 40px) */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Top-left controls - glassy style */
.map-controls {
  position: absolute;
  top: 72px; /* Smanjeno za 20% (90px -> 72px) - prilagođeno nižem navbaru */
  left: 20px;
  z-index: 1000;
  /* Pozadina uklonjena - samo gumbovi */
}

.btn-map {
  background: rgba(73, 80, 87, 0.7); /* Tamno siva boja 30% transparentna */
  color: #fff; /* Bijeli tekst */
  border: 0; /* Border uklonjen */
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
  margin-right: 6px;
}

.btn-map:hover { 
  background: rgba(52, 58, 64, 0.8); /* Tamnija siva na hover - malo manje transparentna */
  color: #fff; 
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-map:last-child { 
  margin-right: 0; 
}

/* Category badges - same style as btn-map */
.filter-badge {
  background: rgba(73, 80, 87, 0.7); /* Tamno siva boja 30% transparentna */
  color: #fff;
  padding: 5px 12px; /* Minimalistički padding */
  border-radius: 4px; /* Manji border-radius */
  font-size: 0.75rem; /* Manji font */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Hide all category buttons except "All" by default - will be shown by JavaScript if enabled */
.filter-badge[data-category]:not([data-category=""]) {
  display: none;
}

.filter-badge .soon-text {
  text-transform: lowercase;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.7); /* Siva boja (bijela s 70% opacity) */
}

.filter-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.filter-badge.active { 
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-weight: 600;
}

/* Category colors - matching map markers (30% transparent) */
.filter-badge[data-category=""] { 
  background: rgba(111, 121, 255, 0.7); /* Ljubičasta za "All" - 30% transparentna */
  color: #fff; 
}

.filter-badge[data-category=""]:hover {
  background: rgba(90, 99, 230, 0.8);
}

.filter-badge[data-category=""]:active {
  background: rgba(76, 84, 212, 0.8);
}

.filter-badge[data-category="event"] { 
  background: rgba(13, 110, 253, 0.7); /* Plava za Events - odgovara marker-event - 30% transparentna */
  color: #fff; 
}

.filter-badge[data-category="event"]:hover {
  background: rgba(11, 94, 215, 0.8);
}

.filter-badge[data-category="event"].active {
  background: rgba(10, 88, 202, 0.8);
}

.filter-badge[data-category="studio"] { 
  background: rgba(220, 53, 69, 0.7); /* Crvena za Studios - odgovara marker-studio - 30% transparentna */
  color: #fff; 
}

.filter-badge[data-category="studio"]:hover {
  background: rgba(187, 45, 59, 0.8);
}

.filter-badge[data-category="studio"].active {
  background: rgba(176, 42, 55, 0.8);
}

.filter-badge[data-category="venue"] { 
  background: rgba(40, 167, 69, 0.7); /* Zelena za Venues - 30% transparentna */
  color: #fff; 
}

.filter-badge[data-category="venue"]:hover {
  background: rgba(33, 136, 56, 0.8);
}

.filter-badge[data-category="venue"].active {
  background: rgba(30, 126, 52, 0.8);
}

.filter-badge[data-category="school"] { 
  background: rgba(255, 193, 7, 0.7); /* Žuta za Schools - 30% transparentna */
  color: #000; 
}

.filter-badge[data-category="school"]:hover {
  background: rgba(255, 179, 0, 0.8);
}

.filter-badge[data-category="school"].active {
  background: rgba(255, 179, 0, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.badge-count { 
  background: rgba(255, 255, 255, 0.2); 
  border-radius: 3px; 
  padding: 1px 5px; 
  margin-left: 3px;
  font-weight: 600;
  font-size: 0.65rem;
}

/* Badge count for yellow category (school) - darker background for better contrast */
.filter-badge[data-category="school"] .badge-count {
  background: rgba(0, 0, 0, 0.15);
  color: #000;
}

/* Custom round markers (S/E) with white border */
.custom-marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.marker-studio { 
  background: #dc3545; 
}

.marker-event { 
  background: #0d6efd; 
}

.marker-published { 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); 
}

.marker-unpublished { 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0.8;
}

/* Glassy Popup Style (pmd-popup) */
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.5); /* 50% transparent */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28); /* soft dark shadow */
}

.leaflet-popup-content { 
  margin: 0; 
  padding: 12px 16px 14px; 
  line-height: 1.4; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-width: 300px;
  max-width: 350px;
}

.leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.5); /* 50% transparent */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.popup-content {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  overflow: hidden;
}

.popup-content .card-body {
  padding: 0; /* Padding je sada na .leaflet-popup-content */
}

/* Title (location name) */
.popup-content h5.card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 0;
  color: #111827;
  line-height: 1.3;
}

/* Body text lines */
.popup-content .card-text {
  margin: 0;
  font-size: 0.80rem;
  color: #111827; /* Darker values */
  line-height: 1.4;
}

/* Spacing between consecutive lines */
.popup-content .card-text + .card-text {
  margin-top: 2px;
}

/* Labels (TYPE:, CITY:, PHONE:, etc.) */
.popup-content .card-text strong {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #6b7280; /* Lighter labels */
  display: inline-block;
  margin-right: 6px;
  font-size: 0.80rem;
  text-transform: uppercase;
}

/* Status badge styled as pill */
.popup-content .badge,
.popup-content .status-section .badge,
.leaflet-popup-content .badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.popup-content .badge.bg-success,
.popup-content .status-section .badge.bg-success {
  background: #16a34a !important;
  color: #ffffff !important;
}

.popup-content .badge.bg-secondary,
.popup-content .status-section .badge.bg-secondary {
  background: #6b7280 !important;
  color: #ffffff !important;
}

/* Website link as plain text - exclude social icons */
.popup-content .card-text a:not(.social-icon),
.popup-content a[href^="http"]:not(.social-icon),
.leaflet-popup-content a[href^="http"]:not(.social-icon) {
  color: #0d6efd;
  font-size: 0.80rem;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.popup-content .card-text a:not(.social-icon):hover,
.popup-content a[href^="http"]:not(.social-icon):hover,
.leaflet-popup-content a[href^="http"]:not(.social-icon):hover {
  color: #0a58ca;
  text-decoration: underline;
}

/* Social icons section styling */
.popup-content .social-icons-section {
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.popup-content .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-decoration: none !important;
  transition: all 0.2s ease;
  font-size: 18px;
  cursor: pointer;
  color: #ffffff;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Website icon - Blue */
.popup-content .social-icon-website {
  background-color: #0d6efd;
}

.popup-content .social-icon-website:hover {
  background-color: #0a58ca;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

/* Facebook icon - Facebook blue */
.popup-content .social-icon-facebook {
  background-color: #1877f2;
}

.popup-content .social-icon-facebook:hover {
  background-color: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(24, 119, 242, 0.3);
}

/* Instagram icon - Pink to orange gradient */
.popup-content .social-icon-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.popup-content .social-icon-instagram:hover {
  background: linear-gradient(45deg, #e0852e 0%, #d55a31 25%, #c9233a 50%, #b91f5a 75%, #a91575 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(188, 24, 136, 0.3);
}

/* YouTube icon - Red */
.popup-content .social-icon-youtube {
  background-color: #ff0000;
}

.popup-content .social-icon-youtube:hover {
  background-color: #cc0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
}

/* TikTok icon - Black */
.popup-content .social-icon-tiktok {
  background-color: #000000;
}

.popup-content .social-icon-tiktok:hover {
  background-color: #333333;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Non-clickable icons (when no link) */
.popup-content .social-icon:not(a) {
  cursor: default;
  opacity: 0.6;
}

.popup-content .social-icon:not(a):hover {
  transform: none;
  box-shadow: none;
}

.popup-content .social-icon i {
  font-size: 18px;
  color: #ffffff;
}

/* Ensure no underline or border on social icons */
.popup-content .social-icons-section a,
.popup-content .social-icons-section a:hover,
.popup-content .social-icons-section a:focus,
.popup-content .social-icons-section a:active {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pmd-navbar {
    height: auto;
    min-height: 56px; /* Smanjeno za 20% (70px -> 56px) */
    padding: 0.6rem 0.8rem; /* Smanjeno za 20% */
  }

  .pmd-navbar-content {
    flex-direction: column;
    gap: 0.5rem;
  }

  .pmd-logo {
    font-size: 1.2rem;
  }

  .pmd-search-container {
    max-width: 100%;
    order: 2;
  }

  .pmd-right {
    order: 1;
    gap: 1rem;
  }

  .map-controls {
    top: 96px; /* Smanjeno za 20% (120px -> 96px) - prilagođeno nižem navbaru */
    flex-wrap: wrap;
    gap: 4px;
  }

  .btn-map {
    font-size: 0.75rem;
    padding: 6px 12px;
    margin-right: 4px;
  }

  .categories-bar {
    bottom: 10px;
    right: 10px;
    padding: 8px 10px;
  }

  .filter-badge {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .pmd-footer-links {
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6.4px 9.6px;
    gap: 0.6rem;
  }

  .pmd-footer-link {
    font-size: 0.6rem;
  }

  .pmd-footer-logo {
    height: 22.4px;
  }
}

/* Extra small screens (phones) */
@media (max-width: 576px) {
  .pmd-navbar {
    padding: 0.5rem 0.6rem;
  }

  .pmd-logo {
    font-size: 1rem;
  }

  .pmd-tagline {
    font-size: 0.5rem;
  }

  .pmd-search {
    font-size: 0.85rem;
    padding: 6px 10px 6px 32px;
  }

  .pmd-search-container {
    width: 100%;
  }

  .map-controls {
    top: 80px;
    gap: 3px;
  }

  .btn-map {
    font-size: 0.7rem;
    padding: 5px 10px;
  }

  .filter-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  .categories-bar {
    padding: 6px 8px;
    gap: 4px;
  }

  .pmd-footer-links {
    padding: 5px 10px;
    gap: 0.5rem;
  }

  .pmd-footer-link {
    font-size: 0.55rem;
  }

  .pmd-footer-logo {
    height: 20px;
  }
}

/* Footer links (bottom-center) */
.pmd-footer-links {
  position: fixed;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 8px 12.8px;
  border-radius: 6.4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.pmd-footer-link {
  color: #333;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.pmd-footer-link:hover {
  color: #dc3545;
}

.pmd-footer-logo {
  height: 25.6px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-left: 4px;
}

/* Hide scrollbars everywhere */
* { 
  scrollbar-width: none !important; 
  -ms-overflow-style: none !important; 
}

*::-webkit-scrollbar { 
  display: none !important; 
}

/* Leaflet attribution control - ispod footer menija, centrirano, floating stil */
.leaflet-control-attribution {
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  text-align: center !important;
  display: inline-block !important;
  position: fixed !important;
  z-index: 999 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  max-width: none !important;
}

.leaflet-control-attribution a,
.leaflet-control-attribution {
  white-space: nowrap !important;
  display: inline !important;
}

/* Watermark logo (if needed) */
.pmd-watermark {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 100;
}

.pmd-watermark img {
  max-width: 120px;
  height: auto;
}

/* Email link styling */
.contact-email a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  color: #dc3545;
  word-break: break-all;
}

.contact-email a:hover {
  text-decoration: underline;
}

/* Custom HTML overlay for visibility popup - NOT using Leaflet popup */
.pmd-visibility-overlay {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  pointer-events: auto;
}

.pmd-visibility-content {
  position: relative;
  border-radius: 14px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
  min-width: 300px;
  max-width: 380px;
}

.pmd-visibility-close {
  position: relative;
  width: 32px;
  height: 32px;
  border: 2px solid #dc3545;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
  font-weight: bold;
  margin: 0 auto;
}

.pmd-visibility-close:hover {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
  transform: scale(1.1);
}

.pmd-visibility-overlay .card {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}

.pmd-visibility-overlay .card-body {
  padding: 0;
}

.pmd-visibility-overlay .popup-content {
  margin: 0;
  padding: 20px 24px 22px;
  line-height: 1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.pmd-visibility-overlay .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.4;
}

.pmd-visibility-overlay .card-text {
  font-size: 0.9rem;
  color: #111827;
  line-height: 1.7;
  margin: 0;
}

.pmd-visibility-overlay .card-text p {
  margin-bottom: 14px;
}

.pmd-visibility-overlay .card-text p:last-child {
  margin-bottom: 0;
}

.pmd-visibility-overlay .card-text a {
  color: #0d6efd;
  text-decoration: underline;
  transition: color 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
}

.pmd-visibility-overlay .card-text a:hover {
  color: #0a58ca;
  text-decoration: underline;
}

/* Logo styling in visibility popup */
.pmd-visibility-overlay .pmd-footer-logo {
  height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 16px auto 0;
}

/* Tagline styling in visibility popup */
.pmd-visibility-overlay .pmd-tagline {
  font-size: 0.75rem;
  color: #6c757d;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  margin-top: 8px;
}

.pmd-visibility-overlay .pmd-tagline .logo-red {
  color: #dc3545;
  font-weight: 600;
}