html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* optional: prevents scrollbars */
  touch-action: none;
  /* optional: disables gestures */
}





body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
}




/* Sigla peste loading overlay */
.manta-maps-logo{
  z-index: 1045; /* mai mare decât 99999 */
}





/* ===== Loading overlay ===== */
.loading-overlay{
  position: fixed;
  inset: 0;
  z-index: 1040;             /* peste tot (mai sus decât butoanele tale cu 999) */
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;         /* blochează interacțiunea cu harta */
}

.loading-overlay.is-hidden{
  display: none;
}

.loading-card{
  width: min(520px, 92vw);
  padding: 18px 22px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 38px rgba(0,0,0,0.18);
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.loading-text{
  font-size: 16px;
/*  font-weight: 700;     */
  color: #0b3a64;
}









#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#touch-blocker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  touch-action: none;
  background: transparent;
}

.custom-square-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
}

.custom-square-btn img {
  width: 28px !important;
  height: 28px !important;
}

.dropstart .dropdown-toggle::before {
  display: none !important;
}

.table-custom {
  --bs-table-bg: #004529 !important;
}

table td,
table th {
  border-left: none;
  border-right: none;
}

.text-white {
  color: white !important;
}


/* animație rotativă */
@keyframes spin-locating {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* când este în starea requesting, rotesc iconița */
#locate-btn.is-requesting #locate-icon {
  animation: spin-locating 2s linear infinite;
  transform-origin: center center;
}


.hide-me { display: none !important; }


#meteo-info-l {
  height: 36px !important;
  width: auto !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #0dcaf0;
}

#meteo-info-m {
  height: 36px !important;
  width: auto !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #0dcaf0;
}

#meteo-info-s {
  height: 36px !important;
  width: auto !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #0dcaf0;
  /* ✅ margine albastră */

}


#poi-info-l {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #198754;
}

#poi-info-m {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #198754;
  /* ✅ margine albastră */
}

#poi-info-s {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #198754;
  /* ✅ margine albastră */
}

.poi-img,
.pow-img,
.fun-img,
.man-img {
    max-width: 100%;   /* imaginea nu va depăși 100% din lățimea modalului */
    height: auto;     /* păstrează proporțiile */
}

#man-info-l {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #8c510a;
}

#man-info-m {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #8c510a;
  /* ✅ margine albastră */
}

#man-info-s {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #8c510a;
  /* ✅ margine albastră */
}


#pow-info-l {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #6f42c1;
}

#pow-info-m {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #6f42c1;
  /* ✅ margine albastră */
}

#pow-info-s {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #6f42c1;
  /* ✅ margine albastră */
}


#fun-info-l {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #fd7e14;
}

#fun-info-m {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #fd7e14;
  /* ✅ margine albastră */
}

#fun-info-s {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #fd7e14;
  /* ✅ margine albastră */
}


#maps-info-l {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #0d6efd;
}

#maps-info-m {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #0d6efd;
  /* ✅ margine albastră */
}

#maps-info-s {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #0d6efd;
  /* ✅ margine albastră */
}





#mapbox-s {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #0d6efd;
}

#mapbox-m {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #0d6efd;
  /* ✅ margine albastră */
}

#mapbox-l {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #0d6efd;
  /* ✅ margine albastră */
}




#mapbox-features-s {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #0d6efd;
}

#mapbox-features-m {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #0d6efd;
  /* ✅ margine albastră */
}

#mapbox-features-l {
  height: 36px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 4px 4px;
  position: relative;
  margin-top: 8px !important;
margin-right: 0px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  z-index: 10;

  background-color: white;
  /* ✅ fundal alb */
  border-radius: 8px;
  /* 🔹 opțional: colțuri rotunjite */
  border: 1px solid #0d6efd;
  /* ✅ margine albastră */
}


.hidden-delayed {
  display: none !important;
}



.qr-img {
    max-width: 40%;   /* imaginea nu va depăși 60% din lățimea modalului */
    height: auto;     /* păstrează proporțiile */
}

#mapbox-features-s:hover,
#mapbox-features-m:hover,
#mapbox-features-l:hover,
#mapbox-s:hover,
#mapbox-m:hover,
#mapbox-l:hover,
#fun-info-s:hover,
#fun-info-m:hover,
#fun-info-l:hover,
#man-info-s:hover,
#man-info-m:hover,
#man-info-l:hover,
#poi-info-s:hover,
#poi-info-m:hover,
#poi-info-l:hover,
#pow-info-s:hover,
#pow-info-m:hover,
#pow-info-l:hover,
#maps-info-s:hover,
#maps-info-m:hover,
#maps-info-l:hover,
#meteo-info-s:hover,
#meteo-info-m:hover,
#meteo-info-l:hover
 {
    background-color: #e9ecef !important;
    transition: background-color 0.2s;
}


.poi-pulsating-marker {
  width: 8px;
  height: 8px;
  background-color: #19875440;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  /* Asigură-te că e deasupra hărții */
  box-shadow: 0 0 10px #19875480;
  transform: translate(-50%, -50%);
  /* centrează markerul pe coordonate */
}

.poi-pulsating-marker::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  animation: pulse 2s infinite;
  background-color: #198754;
}


.man-pulsating-marker {
  width: 8px;
  height: 8px;
  background-color: #8c510a40;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  /* Asigură-te că e deasupra hărții */
  box-shadow: 0 0 10px #8c510a80;
  transform: translate(-50%, -50%);
  /* centrează markerul pe coordonate */
}

.man-pulsating-marker::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  animation: pulse 2s infinite;
  background-color: #8c510a;
}


.pow-pulsating-marker {
  width: 8px;
  height: 8px;
  background-color: #6f42c140;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  /* Asigură-te că e deasupra hărții */
  box-shadow: 0 0 10px #6f42c180;
  transform: translate(-50%, -50%);
  /* centrează markerul pe coordonate */
}

.pow-pulsating-marker::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  animation: pulse 2s infinite;
  background-color: #6f42c1;
}


.fun-pulsating-marker {
  width: 8px;
  height: 8px;
  background-color: #fd7e1440;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  /* Asigură-te că e deasupra hărții */
  box-shadow: 0 0 10px #fd7e1480;
  transform: translate(-50%, -50%);
  /* centrează markerul pe coordonate */
}

.fun-pulsating-marker::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  animation: pulse 2s infinite;
  background-color: #fd7e14;
}


.meteo-pulsating-marker {
  width: 8px;
  height: 8px;
background-color: #0dcaf040;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  /* Asigură-te că e deasupra hărții */
  box-shadow: 0 0 10px #0dcaf080;
  transform: translate(-50%, -50%);
  /* centrează markerul pe coordonate */
}

.meteo-pulsating-marker::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  animation: pulse 2s infinite;
  background-color: #0dcaf0;
}


@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ==========================================================================
   1) GEOCODER - Neutralize any transform on the geocoder or its children at ≤640px
   ========================================================================== */
@media screen and (max-width: 640px) {

  /* targets the control container wherever it lives */
  .mapboxgl-ctrl-geocoder,
  /* targets every element inside it (inputs, icons, etc.) */
  .mapboxgl-ctrl-geocoder * {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    transform-origin: initial !important;
  }
}

/* ==========================================================================
   2) GEOCODER - Re-enforce your fixed dimensions & typography
   ========================================================================== */
/* control box */
.mapboxgl-ctrl-top-right .mapboxgl-ctrl-geocoder {
  top: -41px !important;
  right: auto !important;
  left: -42px !important;
  display: inline-block !important;
  flex: none !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

/* text input */
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  width: 100% !important;
  height: 36px !important;
  font-size: 14px !important;
  line-height: 34px !important;
}

/* suggestions dropdown */
.mapboxgl-ctrl-geocoder .suggestions {
  width: 100% !important;
  max-width: 100% !important;
}

.mapboxgl-ctrl-geocoder .suggestions li {
  font-size: 14px !important;
}

/* lock magnifier + clear icons */
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-icon {
  width: 20px !important;
  height: 20px !important;
}

.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* 1) Hide the built-in search (magnifier) icon */
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon {
  display: none !important;
}

/* 2) Optional: shift the input left to reclaim that space */
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  padding-left: 8px !important;
  /* tweak as needed */
}

/* ==========================================================================
   GEOCODER - Bootstrap match
   ========================================================================== */
/* 1) Input: blue border, rounded corners, Bootstrap padding */

.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  border: 1px solid #0d6efd !important;
  /* Bootstrap primary blue */
  border-radius: 8px !important;
  /* 8px corners */
  padding: 8px 8px !important;
  /* match Bootstrap form-control */
  box-shadow: none !important;
  /* remove Mapbox default shadow */
  background-color: #fff !important;
  /* white background */
}

/* 2) Input focus: blue glow, no outline */
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
  outline: none !important;
}

/* 3) Suggestions dropdown: match input radius and border */
.mapboxgl-ctrl-geocoder .suggestions {
  border: 1px solid #0d6efd !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  /* clip any overflow */
}

/* 4) Suggestion items: remove default hover background, use Bootstrap hover */
.mapboxgl-ctrl-geocoder .suggestions li {
  border-bottom: 1px solid #dee2e6 !important;
  /* light divider */
}

.mapboxgl-ctrl-geocoder .suggestions li:last-child {
  border-bottom: none !important;
}

.mapboxgl-ctrl-geocoder .suggestions li:hover {
  background-color: rgba(13, 110, 253, .1) !important;
  /* light blue hover */
}