/*!
Theme Name: limestone
Theme URI: http://underscores.me/
Author: Lasantha Attanayake
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: limestone
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

limestone is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* For fade effect on slides */
    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.7s ease;
      background-size: cover; /* Ensures image covers the whole area */
      background-position: center; /* Centers the image */
      display: flex;
      align-items: center; /* Vertically center content */
      justify-content: center;
      color: white;
      width: 100vw;
      height: 80vh;
    }
    .slide.active {
      opacity: 1;
      position: relative;
      z-index: 10;
    }


    /* Custom style for image hover effect, ensuring overflow is hidden for zoom */
    .gallery-item-wrapper {
      overflow: hidden;
      border-radius: 0.75rem; /* rounded-xl */
    }
    .gallery-item-wrapper img {
      transition: transform 0.3s ease-in-out;
    }
    .gallery-item-wrapper:hover img {
      transform: scale(1.1); /* Zoom effect */
    }

    /* Styles for the image popup modal */
    .image-popup-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }
    .image-popup-modal.active {
      opacity: 1;
      visibility: visible;
    }
    .image-popup-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
      display: flex; /* For aligning navigation arrows */
      align-items: center;
    }
    .image-popup-content img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .image-popup-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: white;
      color: #333;
      border: none;
      border-radius: 50%;
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      cursor: pointer;
      z-index: 1001;
      transition: background-color 0.2s ease;
    }
    .image-popup-close:hover {
      background-color: #f0f0f0;
    }
    .popup-nav-button {
      background: rgba(255, 255, 255, 0.7);
      color: #333;
      border: none;
      border-radius: 50%;
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      cursor: pointer;
      margin: 0 1rem;
      z-index: 1001;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .popup-nav-button:hover {
      background-color: white;
      transform: scale(1.1);
    }
    .popup-nav-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    

     /* Lazy Load Sections */
    .lazy-load-section {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .lazy-load-section.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Back to Top button styles with progress fill */
    #backToTopBtn {
      position: fixed;
      bottom: 4.5rem;
      right: 1.5rem;
      background-color: transparent; /* Base color or transparent */
      color: white;
      padding: 0.75rem;
      border-radius: 9999px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
      z-index: 900;
      width: 3rem;
      height: 3rem;
      border: 2px solid var(--theme-base-color); /* Add a border to define the shape */
      /* Initial fill: transparent, or a very small percentage of the primary color */
      background-image: linear-gradient(to top, var(--theme-base-color) 0%, transparent 0%); /* Managed by JS */
      background-size: 100% 100%;
      background-repeat: no-repeat;

    }

    #backToTopBtn i {
        position: relative;
        z-index: 1; /* Keep icon above gradient */
    }

    #backToTopBtn.show {
      opacity: 1;
      visibility: visible;
    }

    /* Hover effect for the button - could be subtle border change or icon change */
    #backToTopBtn:hover {
        /* No background-color change, as fill is managed by JS */
        border-color: #6da235; /* Slightly darker border on hover */
    }

     /* Smooth sliding for the track */
  .similar-viewport {
  overflow: hidden;
  position: relative;
}

.similar-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.similar-slide {
  min-width: 300px; /* will be adjusted dynamically */
  position: relative;
  z-index: 5;
}

.similar-slide a {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.similar-nav {
  z-index: 20;
  cursor: pointer;
}

@media (min-width: 768px) {
  .similar-slide {
    min-width: 33.3333%; /* 3 slides per view */
  }
}

@media (max-width: 767px) {
  .similar-slide {
    min-width: 100%; /* 1 slide per view */
  }
}

  .wpcf7-response-output,.wpcf7-not-valid-tip {
    border: none !important;
    background: transparent;
    color: #FFFFFF; /* Tailwind green-600 */
    margin-top: 0 !important; /* mt-2 */
    text-align: center;
  }
  .wpcf7-not-valid-tip{
    color: red;
    font-weight: 400;
    text-transform: capitalize;
  }
  .wpcf7-spinner{
    display: table;
    margin: 0 auto;
  }

  #contact-from #your-email{
    width: 100% !important;
  }

  #contact-from  .wpcf7-response-output{
    color: var(--theme-base-color);
  }

  #nl-wrap input[type="email"]{
    border-radius: 9999px !important;
  }


  /* Tab styles */
    .tab-button.active-tab-button {
        border-color: var(--theme-base-color);
        color: var(--theme-base-color);
    }
    .tab-pane.hidden {
        display: none;
    }

    /* Sub-tab styles for Room Types */
    .sub-tab-button {
        border: 1px solid #d1d5db; /* Light gray border */
        transition: all 0.2s ease-in-out;
    }

    .sub-tab-button.active {
        background-color: var(--theme-base-color); /* Green background for active sub-tab */
        color: white;
        border-color: var(--theme-base-color);
    }

    .sub-tab-pane {
        display: none;
    }

    .sub-tab-pane.active {
        display: block;
    }

    /* Slideshow styles */
    .room-slideshow {
      position: relative;
      max-width: 100%;
      overflow: hidden;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .room-slideshow-inner {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .room-slide {
      min-width: 100%;
      display: block;
    }