/* CC Symbol Font */
@font-face {
  font-display: swap;
  font-family: CCSymbols;
  font-synthesis: none;
  src: url('/fonts/web/CCSymbols.woff2') format(woff2),
       url('/fonts/web/CCSymbols.woff')  format(woff);
  unicode-range: u+a9, u+229c, u+1f10d-1f10f, u+1f16d-1f16f;
}

/* Inter Font */
:root { font-family: 'Inter', 'Helvetica', sans-serif; }

/* Variables */
:root {
  --navbar-height: 3.5rem;
  --logo-red: #FF5733;
  --logo-blue: #3498DB;
  --logo-green: #2ECC71;
  --logo-yellow: #F1C40F;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #ccc;
}

html.lg-on, .lg-container {
  overscroll-behavior: none;
}

#gallery {
  overscroll-behavior: none;
}

#map {
  height: calc(100% - var(--navbar-height));
  width: 100%;
  transition: height 0.25s linear;
}

.leaflet-container .leaflet-control-attribution a {
  color: inherit;
}

.leaflet-container .leaflet-control-attribution {
  color: #777;
  background: transparent !important;
  margin-right: 5px !important;
  margin-bottom: 5px !important;
  font-family: 'Inter', sans-serif, CCSymbols;
}

.cluster-marker,
.photo-marker {
  position: relative;
  width: 60px; /* Width of the cluster image */
  height: 60px; /* Height of the cluster image */
  font-family: 'Inter', sans-serif;
}

.cluster-marker img,
.photo-marker img {
  border-radius: inherit;
}

.cluster-marker,
.photo-marker {
  border: 3px solid #fff;
  /* box-shadow: 3px 3px 5px -2px #333; */
}

.photo-marker {
  border-radius: 10%;
}

.cluster-marker {
  border-radius: 50%;
  background-size: 60px 60px;
}

.photo-marker .marker-count-badge {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -10px;
  margin-top: -10px;
  background-color: #1e90ff; /* Blue background */
  color: #fff; /* White text */
  border-radius: 5px; /* Rounded corners */
  padding: 2px 5px;
  font-size: 12px;
  font-weight: bold;
}

.cluster-marker .marker-count-badge {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 60px;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  width: 60px;
  text-align: center;
  background-color: transparent;
  border-radius: 10%;
  text-shadow: 1px 1px 2px #333;
}

/* Loading Overlay */

/* Overlay covering the entire screen */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  z-index: 99999; /* High z-index to ensure it's on top */
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-overlay.hidden {
  animation: fadeOutOverlay 1s ease forwards;
}

.loading-overlay h1 {
  text-align: center;
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 3em;
  letter-spacing: -0.05em;
}

.logo-red {
  color: var(--logo-red);
}

.logo-green {
  color: var(--logo-green);
}

.logo-blue {
  color: var(--logo-blue);
}

.logo-yellow {
  color: var(--logo-yellow);
}

/* Keyframes for fading out the overlay */
@keyframes fadeOutOverlay {
  0% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Pulsasting logo loading animation */
.loading-logo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
  width: 50px; /* Adjust the size of the logo */
  height: 50px;
  margin: auto;
  justify-content: center;
  align-items: center;
}

.loading-circle {
  width: 20px; /* Adjust the size of the circles */
  height: 20px;
  border-radius: 50%;
  opacity: 0.25; /* start with circles hidden */
  animation: pulsate 2s infinite;
}

/* Define colors for the circles */
.loading-circle:nth-child(1) { background-color: var(--logo-red); animation-delay: 0s; }
.loading-circle:nth-child(2) { background-color: var(--logo-green); animation-delay: 0.125s; }
.loading-circle:nth-child(3) { background-color: var(--logo-blue); animation-delay: 0.25s; }
.loading-circle:nth-child(4) { background-color: var(--logo-green); animation-delay: 0.375s; }
.loading-circle:nth-child(5) { background-color: var(--logo-blue); animation-delay: 0.5s; }
.loading-circle:nth-child(6) { background-color: var(--logo-red); animation-delay: 0.625s; }
.loading-circle:nth-child(7) { background-color: var(--logo-blue); animation-delay: 0.75s; }
.loading-circle:nth-child(8) { background-color: var(--logo-red); animation-delay: 0.875s; }
.loading-circle:nth-child(9) { background-color: var(--logo-green); animation-delay: 1s; }

/* Define the pulsating (fading in and out) animation */
@keyframes pulsate {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* Menu bar */

.bottom-nav {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ccc;
  border-top: 1px solid #666;
  height: var(--navbar-height);
  z-index: 999;
  /* box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.2); */
}


.bottom-nav .nav-container {
  display: flex;
  justify-content: space-evenly;
  width: 18rem;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333; /* Adjust color as needed */
  width: 4rem;
  margin: auto 0;
}

.nav-item:hover {
  color: #fff; /* Adjust hover color as needed */
}

.nav-item.disabled, .nav-item.disabled:hover {
  color: #999
}
.nav-item svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.5;
  /* fill: currentColor; */
}

.nav-item span {
  font-size: 0.75em;
  font-weight: 500;
}

/* Modal */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fff;
  margin: 10% auto; /* 15% from the top and centered */
  padding: 2em;
  border: 1px solid #888;
  border-radius: 5px;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 600px;
  text-align: justify;
}

/* The Close Button */
.close {
  color: #ccc;
  float: right;
  font-size: 2em;
  font-weight: bold;
  margin-left: 1em;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}