/* Import Google Fonts for Persian text */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Mobile viewport fixes */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Additional mobile browser fixes */
@supports (height: 100dvh) {
  #map {
    height: 100dvh;
  }

  #container {
    height: 100dvh;
  }
}

/* Handle safe areas for mobile browsers */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Custom styles that work with Tailwind */
body.no-scroll {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* Map specific styles */
#map {
  flex: 1;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
  /* Ensure map takes available space when URL bar is present */
  min-height: 0;
  transition: margin-top 0.3s ease, height 0.3s ease;
}

/* Ensure container takes full height */
#container {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
  overflow: hidden;
}

/* Header section styling */
#header-section {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile header adjustments */
@media (max-width: 768px) {
  /* Ensure full viewport height on mobile */
  #map {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
  }

  #container {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
  }

  #header-section {
    /* Dynamic min-height set by JavaScript */
    padding: 12px 16px;
    transition: min-height 0.5s ease-in-out;
  }

        #header-section.expanded {
    min-height: auto;
  }

  #header-section.collapsed {
    min-height: auto;
  }

  #map {
    /* Dynamic margin-top and height set by JavaScript */
    transition: margin-top 0.5s ease-in-out, height 0.5s ease-in-out;
  }

    /* Removed hardcoded values - JavaScript handles dynamic calculations */
  #map.header-expanded {
    /* Dynamic margin-top set by JavaScript */
  }

  #map.header-collapsed {
    /* Dynamic margin-top set by JavaScript */
  }

    /* Mobile RTL adjustments */
  [dir="rtl"] #main-title-mobile {
    margin-right: 0;
    margin-left: 16px;
  }

  [dir="rtl"] #language-selector-mobile {
    order: -1;
  }

  /* Mobile controls styling */
  #language-selector-mobile select {
    min-width: 70px;
  }

  #toggle-header-btn-mobile {
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    /* Mobile controls styling */
  #language-selector-mobile select {
    min-width: 60px;
  }

  #toggle-header-btn-mobile {
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    /* Description container transitions */
  #mobile-description-container {
    max-height: 100px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  }

  #mobile-description-container.hidden {
    max-height: 0;
    opacity: 0;
  }



  /* Very small screens - make text smaller */
  @media (max-width: 480px) {
    #main-title-mobile {
      font-size: 0.875rem !important; /* text-sm */
      line-height: 1.25rem;
    }

      #header-section.collapsed {
    /* Dynamic min-height set by JavaScript */
  }
  }

  /* Extra small screens - even smaller text */
  @media (max-width: 360px) {
    #main-title-mobile {
      font-size: 0.75rem !important; /* text-xs */
      line-height: 1rem;
    }

    #header-section.collapsed {
      /* Dynamic min-height set by JavaScript */
    }
  }
}

/* Desktop header adjustments */
@media (min-width: 769px) {
  #header-section {
    min-height: 120px;
    transition: transform 0.3s ease-in-out;
  }

  #map {
    /* Dynamic margin-top and height set by JavaScript */
    transition: margin-top 0.3s ease-in-out, height 0.3s ease-in-out;
  }

  /* Desktop header never auto-collapses */
  #header-section.expanded,
  #header-section.collapsed {
    min-height: 120px;
  }
}

/* Language selector positioning */
#language-selector {
  right: 1rem;
  left: auto;
  transition: left 0.3s ease, right 0.3s ease;
}

[dir="rtl"] #language-selector {
  left: 1rem;
  right: auto;
}

/* Close button positioning */
#close-panel-btn {
  right: 1rem;
  left: auto;
}

[dir="rtl"] #close-panel-btn {
  left: 1rem;
  right: auto;
}

/* Panel positioning for RTL/LTR */
#info-panel.rtl-panel {
  right: 0;
}

#info-panel.ltr-panel {
  left: 0;
}

/* Panel visibility and animations */
#info-panel.hidden {
  display: none !important;
}

#info-panel:not(.hidden) {
  display: block !important;
}

#info-panel.rtl-panel:not(.hidden) {
  transform: translateX(0);
}

#info-panel.ltr-panel:not(.hidden) {
  transform: translateX(0);
}

/* Custom scrollbar for panel */
#info-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

#info-content::-webkit-scrollbar {
  width: 6px;
}

#info-content::-webkit-scrollbar-track {
  background: transparent;
}

#info-content::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

#info-content::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
}

/* Custom popup styling */
.custom-popup .leaflet-popup-content-wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.custom-popup .leaflet-popup-content {
  margin: 0 !important;
  line-height: normal !important;
}

.custom-popup .leaflet-popup-tip {
  background: white !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Hide default close button since we have our own */
.custom-popup .leaflet-popup-close-button {
  display: none !important;
}

/* Ensure popup close button positioning works correctly */
.custom-popup .left-2 {
  left: 0.5rem !important;
  right: auto !important;
}

.custom-popup .right-2 {
  right: 0.5rem !important;
  left: auto !important;
}

/* Ensure text padding works in popups */
.custom-popup .pl-2 {
  padding-left: 0.5rem !important;
}

.custom-popup .pr-2 {
  padding-right: 0.5rem !important;
}

/* Ensure margin works in popups */
.custom-popup .ml-2 {
  margin-left: 0.5rem !important;
}

.custom-popup .mr-2 {
  margin-right: 0.5rem !important;
}

/* Custom styling for language dropdown */
#language-dropdown {
  /* Hide the default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Add custom arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;

  /* Ensure enough padding for the custom arrow */
  padding-right: 2.5rem !important;
}

/* RTL positioning for dropdown arrow */
[dir="rtl"] #language-dropdown {
  background-position: left 0.75rem center;
  padding-right: 1rem !important;
  padding-left: 2.5rem !important;
}