/* Common styles used across all templates */
body.no-scroll {
  position: fixed;
  width: 100%;
  overflow-y: scroll; /* Keeps the scrollbar visible */
  touch-action: none; /* Prevents touch gestures */
}

/* 
Loader with animated dots
- Displays 4 dots horizontally spaced.
- Animates the size of each dot sequentially.
- Uses custom properties for color, size, and speed.
- Color is inherited from 'color' property (currentColor).

Usage example:

<div class="loader"></div>

Optional: customize color and speed:

<div class="loader" style="color: #3498db; --speed: 1.5s;"></div>
*/

.loader {
  width: 90px;
  aspect-ratio: 6; /* Maintain width to height ratio 6:1 */

  /* Define dot appearance */
  --dot: no-repeat
    radial-gradient(circle closest-side, currentColor 90%, transparent);

  /* Size of each dot (25% of container width) */
  --size: calc(100% / 4);

  /* Animation speed */
  --speed: 1s;

  /* Place 4 dots horizontally at specific positions */
  background: var(--dot) 0% 50%, var(--dot) 33% 50%, var(--dot) 66% 50%,
    var(--dot) 100% 50%;

  /* Set initial size for all dots */
  background-size: var(--size) 100%;

  /* Apply animation */
  animation: l7 var(--speed) infinite ease-in-out;
}

/* 
Animation 'l7' steps:
- Sequentially shrink each dot while keeping others full size.
- Creates a "moving empty spot" effect.
*/
@keyframes l7 {
  20% {
    background-size: var(--size) 0%, var(--size) 100%, var(--size) 100%,
      var(--size) 100%;
  }
  40% {
    background-size: var(--size) 100%, var(--size) 0%, var(--size) 100%,
      var(--size) 100%;
  }
  60% {
    background-size: var(--size) 100%, var(--size) 100%, var(--size) 0%,
      var(--size) 100%;
  }
  80% {
    background-size: var(--size) 100%, var(--size) 100%, var(--size) 100%,
      var(--size) 0%;
  }
}

/* used in the booking.js */
.availabile-date {
  margin: 2px;
  background-color: rgba(var(--success-color-rgb), 0.1);
  border-radius: 2px;
}

.lightboxOverlay,
.lightbox {
  z-index: 2000000002 !important;
}