@keyframes moveRoad {
  0% { background-position: 0% center; }
  100% { background-position: 100% center; }
}
body { 
  margin:0; 
  background-image: url('/templates/protos/img/road3.jpg');
  background-size: 150% auto;
  background-position: center;
  background-attachment: fixed;
  animation: moveRoad 60s linear infinite alternate;
}
.animate-fadeInUp { animation: fadeInUp 0.9s ease both; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(30px);} to {opacity:1; transform: translateY(0);} }

.fade-in { animation: fadeIn 0.7s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.date-placeholder { top: 50%; transform: translateY(-50%); left: 2.5rem; transition: all 0.2s; }
input[type="date"]:required:invalid + .date-placeholder { display: block; }
input[type="date"]:required:valid + .date-placeholder { display: none; }
input[type="date"]:required:invalid::-webkit-datetime-edit { color: transparent; }
input[type="date"]:required:valid::-webkit-datetime-edit { color: inherit; }

#map { height: 70vh; width: 100%; border-radius: 0.5rem; }
.controls-container { position: absolute; top: 10px; left: 10px; z-index: 1000; background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,0.4); max-height: 60vh; overflow-y: auto; max-width: 95%; }
.controls-container h3 { margin: 0 0 8px 0; font-size: 16px; color: #333; }
.controls-container label { display: flex; align-items: center; margin-bottom: 5px; cursor: pointer; font-size: 14px; white-space: nowrap; }
.controls-container input { margin-right: 8px; }
.color-swatch { width: 15px; height: 15px; border: 1px solid #ccc; margin-right: 8px; flex-shrink: 0; }
.leaflet-tooltip.city-tooltip { background-color: rgba(255, 255, 255, 0.85); border: 1px solid #555; border-radius: 3px; color: #333; font-weight: bold; box-shadow: none; }

#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px; /* 10px vertical, 20px horizontal gap */
}

@media (max-width: 767px) {
  .controls-container {
    top: auto;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    max-height: 15vh; /* Limit height */
  }
  #controls {
    flex-wrap: nowrap; /* Prevent wrapping on mobile, allow horizontal scroll */
    overflow-x: auto;
    padding-bottom: 10px;
  }
}