body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #111827; /* bg-gray-900 */
}

/* Moroccan Theme Colors */
:root {
  --moroccan-red: #c1272d;
  --moroccan-green: #006233;
  --moroccan-green-light: #6deca9; /* Lighter green for text accents or hovers */
}

#app-header {
  background-color: var(--moroccan-red);
  color: white;
}

#app-header .header-accent {
  color: var(--moroccan-green);
  filter: brightness(1.8); /* Making green brighter on red */
}

#app-header svg {
    color: white; /* Make wave icon white */
}

/* Navigation Links */
#app-header nav .nav-link {
  color: white;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  border-radius: 0.375rem; /* rounded-md */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
}

#app-header nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--moroccan-green-light);
}

#app-header nav .nav-link.active-nav-link {
  background-color: var(--moroccan-green); /* Or a darker red: #a02025 */
  color: white;
  font-weight: 600; /* font-semibold */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
#app-header nav .nav-link.active-nav-link i {
    color: white;
}

#app-header nav .nav-link i {
  color: white; /* Ensure icons in links are also white by default */
  transition: color 0.2s ease-in-out;
  font-size: 0.8em; /* Slightly smaller icons in nav */
}
#app-header nav .nav-link:hover i {
  color: var(--moroccan-green-light); /* Match icon color to text on hover */
}


.text-moroccan-red {
  color: var(--moroccan-red);
}

.text-moroccan-green {
  color: var(--moroccan-green);
}
.text-moroccan-green-light {
  color: var(--moroccan-green-light);
}

.bg-moroccan-red {
  background-color: var(--moroccan-red);
}

.bg-moroccan-green {
  background-color: var(--moroccan-green);
}

#spot-selector-sidebar .spot-button {
  transition: all 0.15s ease-in-out;
}

#spot-selector-sidebar .spot-button.selected {
  background-color: var(--moroccan-green);
  color: white;
  transform: scale(1.03); /* Slightly reduced scale for a more subtle effect */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#spot-selector-sidebar .spot-button:not(.selected):hover {
  background-color: #4a5568; /* hover:bg-gray-600 */
}

#conditions-display-container .condition-item {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* space-x-3 */
  padding: 0.75rem; /* p-3 */
  background-color: #2d3748; /* bg-gray-700 */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow */
}

#conditions-display-container .condition-item i {
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem; /* text-lg, was text-xl */
}

#conditions-display-container .condition-item .condition-label {
  font-size: 0.75rem; /* text-xs */
  color: #a0aec0; /* text-gray-400 */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
}

#conditions-display-container .condition-item .condition-value {
  font-weight: 600; /* font-semibold */
  color: #f7fafc; /* text-gray-100 */
  font-size: 0.875rem; /* text-sm */
}

#cam-player {
    min-height: 200px; /* Ensure it doesn't collapse */
}

/* Map Page Specific Styles */
#map-container {
  /* Using a public domain SVG map of Morocco regions */
  background-image: url('https://cdn.jsdelivr.net/gh/hyper超/Provinces-and-cities-of-Morocco@master/Maroc_regions_map.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px; /* Ensure map has some height */
}

.map-marker {
  position: absolute;
  transform: translate(-50%, -50%); /* Center the marker on its coordinates */
  cursor: pointer;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-marker-pin {
  width: 18px; /* Slightly smaller pin */
  height: 18px;
  background-color: var(--moroccan-red);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.2s ease-out, background-color 0.2s ease;
}

.map-marker:hover .map-marker-pin,
.map-marker:focus .map-marker-pin {
  transform: scale(1.25); /* Slightly increased hover scale */
  background-color: var(--moroccan-green);
}
.map-marker:focus {
    outline: none; /* Remove default focus outline */
}
.map-marker:focus-visible .map-marker-pin { /* For keyboard nav, show outline on pin */
  outline: 2px solid var(--moroccan-green-light);
  outline-offset: 1px;
}

.map-marker-tooltip {
  position: absolute;
  bottom: 110%; /* Position above the pin, with a bit more space */
  left: 50%;
  transform: translateX(-50%); /* Center tooltip */
  background-color: rgba(17, 24, 39, 0.85); /* bg-gray-900 with opacity */
  color: white;
  padding: 5px 10px; /* Slightly more padding */
  border-radius: 4px;
  font-size: 0.8rem; 
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.1s ease;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.map-marker:hover .map-marker-tooltip,
.map-marker:focus .map-marker-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-3px); /* Slight upward movement on show */
}

/* Static Page Content Container */
.page-content-container {
    line-height: 1.7; /* Improve readability */
}
.page-content-container h2, .page-content-container h3 {
    letter-spacing: 0.025em;
}
.page-content-container p, .page-content-container li {
    font-size: 0.95rem; /* text-base equivalent Tailwind: text-sm=0.875rem, text-base=1rem */
}

/* Contact Form Styles */
.contact-input {
    width: 100%;
    background-color: #2d3748; /* bg-gray-700 */
    color: #e2e8f0; /* text-gray-200 or 300 */
    border: 1px solid #4a5568; /* border-gray-600 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.65rem 0.75rem; /* py-2 px-3 like */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.contact-input:focus {
    outline: none;
    border-color: var(--moroccan-green-light);
    box-shadow: 0 0 0 2px rgba(109, 236, 169, 0.4); /* ring-moroccan-green-light with opacity */
}


/* Responsive adjustments */
@media (max-width: 768px) { /* md breakpoint */
  #spot-selector-sidebar {
    max-height: 250px; /* Limit height on smaller screens */
    order: 2; /* Move sidebar below cam/conditions on mobile */
  }
  #main-content {
    order: 1;
  }
  #app-container main {
    flex-direction: column;
  }
  #cam-viewer-container {
     min-height: 300px; /* Adjust as needed for video aspect ratio */
  }
  #map-container {
    min-height: 300px; /* Adjust map height for smaller screens */
    max-width: 95vw; /* Ensure map is not too wide */
  }
  .map-marker-pin {
    width: 16px;
    height: 16px;
  }
  #app-header .flex.items-center.space-x-3 h1 {
    font-size: 1.25rem; /* text-xl for title on mobile */
  }
  
  /* Responsive Navigation */
  #app-header nav {
      width: 100%;
      justify-content: space-around; /* Distribute links more evenly on small screens */
  }
  #app-header nav .nav-link {
    font-size: 0.75rem; /* Smaller nav links on mobile */
    padding: 0.4rem 0.5rem;
  }
   #app-header nav .nav-link i {
    margin-right: 3px; /* Smaller margin for icons */
  }
  #app-header nav img.h-6 { /* Moroccan flag */
    height: 1.25rem; /* h-5 */
    margin-left: 0.25rem; /* Reduce margin for flag */
  }

}