.gallery-section {
  position: relative;
  /* padding-top: 4rem; */
  
}

/* .gallery-section img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
} */

/* --- MAIN GALLERY --- */
.gallery-main-swiper {
  position: relative;
  margin-top: 1rem;
}

.gallery-main-swiper .swiper-slide img {
  width: 100%;
  height: 100dvh;
  object-fit: cover;
  display: block;
}

.gallery-main-swiper .swiper-slide {
    background-color: transparent; 
    
    max-height: 80dvh; 
}

@media screen and (max-width: 768px) {
  .gallery-main-swiper .swiper-slide img {
    height: auto !important; 
        width: 100%;
        max-height: 100%;
        object-fit: contain;
  }
  .gallery-main-swiper .swiper-slide {
        height: auto !important;
        max-height: 80dvh; /* Keep this to limit image size */
        display: flex;
        align-items: center; 
        justify-content: center;
    }
    
.gallery-main-swiper .swiper-wrapper {
        height: auto !important;
        align-items: center;
        
    }
  .gallery-main-swiper {
    height: auto !important;  
  }

  .gallery-btn {
        right: 2rem ;
        left: auto;
        font-size: 0.8rem !important;
        /* transform: translateX(50%); */
        bottom: 1.5rem;
        padding: 6px 10px !important;
    }
}
/* Remove black overlay effect */
.gallery-main-swiper::before {
  content: none !important;
}

/* --- Scrollbar Pagination --- */
.scrollbar-pagination {
  position: absolute !important;
  bottom: 2rem !important;
  left: 50% !important;
  transform: translateX(-50%);
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0 !important;
  width: 20rem !important;
  z-index: 10;
}

.scrollbar-bullet {
  display: block;
  height: 2px !important;
  flex: 1;
  background: white !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  transition: all 0.4s ease;
  cursor: pointer;
  margin: 0 !important;
}

.swiper-pagination-bullet-active.scrollbar-bullet {
  background: white !important;
  height: 8px !important;
  border-radius: 0 !important;
}

/* --- Modal --- */
.gallerymodal {
  position: fixed;
  inset: 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  
}

.gallerymodal.active {
  visibility: visible;
  opacity: 1;
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 1.5rem;
  color: #00379e ;
  background: none;
  border: none;
  cursor: pointer;
}

.main-gallery-modal {
  width: 100%;
  max-width: 1000px;
  margin-bottom: 2rem;
  min-height: 70vh; /* Adjust as needed, e.g., 40% of viewport height */
 overflow: hidden; 
  /* overflow: visible !important; */
}
.main-gallery-modal .swiper-slide {
    /* ADD: Ensure the slide container has a minimum height */
    min-height: 40vh;
}
.main-gallery-modal .swiper-slide img {
  width: 100%;
  height: 70vh;
  object-fit: contain;
}

.swiper-button-next,
.swiper-button-prev {
  color: #00379e !important;
}

/* --- Thumbnails --- */
.gallery-thumbnail {
  width: 100%;
  max-width: 800px;
   z-index: 10;
  
}

.gallery-thumbnail .swiper-slide {
  cursor: pointer;
  /* border: 2px solid transparent; */
  transition: border 0.3s ease;
}
.gallery-thumbnail .swiper-slide:hover img,
.gallery-thumbnail .swiper-slide-thumb-active img {
    border: 2px solid #692C18; /* Border will now hug the image */
    transition: border 0.3s ease;
}
.gallery-thumbnail .swiper-slide:hover {
  border: 2px solid #00379e;
}

.gallery-thumbnail img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

/* --- Gallery Button --- */
.gallery-btn {
  position: absolute;
  right: 1.5rem;
  bottom: 2rem;
  background-color: #00379e;
  color: white;
  font-size: 1.5rem;
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
  z-index: 20;
}

.gallery-btn:hover {
  background-color: #007aff;
}

/* --- Fraction Pagination --- */
.fraction-pagination {
  text-align: center;
  margin-top: 16px;
  font-size: 1.5rem;
  color: #00379e !important;
   position: relative;
  pointer-events: none; 
   z-index: 5;
}

/* Responsive */
@media (max-width: 768px) {
  .scrollbar-pagination {
    width: 150px !important;
   bottom: 1rem !important;
  }
  /* .gallery-thumbnail img {
    height: 70px;
  } */
}


/* Ensure the button containers are positioned and centered */
.main-gallery-modal .swiper-button-prev,
.main-gallery-modal .swiper-button-next {
    color: #00379e !important; 
    z-index: 20; 
  
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0 !important;
}
.main-gallery-modal .swiper-button-prev::after,
.main-gallery-modal .swiper-button-next::after {
  font-size: 36px;      /* ⬅️ Bigger arrow icon */
  color: #00379e;       /* Match your brand color */
  font-weight: 700;
}
/* Ensure your custom wrappers are correctly positioned (as confirmed from your last inspection image) */
.main-gallery-modal .swiper-button-prev {
    position: absolute; 
    left: 10px !important; 
    right: auto;
}

.main-gallery-modal .swiper-button-next {
    position: absolute; 
    right: 10px !important; 
    left: auto;
}

/* Ensure the Swiper wrapper for the thumbnails has auto height to contain all content */
.swiper.gallery-thumbnail {
    /* Use !important to override any Swiper inline styles or conflicting rules */
    height: auto !important; 
    overflow: hidden !important; /* Prevents vertical scroll on the thumbnail area itself */
}

/* Ensure the wrapper inside the thumbnail Swiper has auto height */
.gallery-thumbnail .swiper-wrapper {
    height: auto !important; 
    /* If the clipping is still happening, check for any negative translateY on the wrapper */
    transform: none !important;
}

/* Ensure the entire modal section has sufficient height on iOS */
.gallerymodal section.page-wrapper {
    height: 100%;
    /* Allow scrolling on the entire modal content if needed */
    overflow-y: auto; 
}