/* Main Image Container */
.listing-details .main-image-container {
  width: 300px !important; /* Fixed width for main image */
  height: 450px !important; /* Fixed height for main image */
  overflow: hidden; /* Ensure the image fits within the container */
  border: 2px solid #ddd; /* Optional border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow */
  background: transparent; /* Make the container transparent */
  margin-bottom: 20px; /* Space between main image and thumbnails */
  display: flex;
  justify-content: center;
  align-items: center;
}

.listing-details .main-image-container .main-image {
  width: 100% !important; /* Force width */
  height: 100% !important; /* Force height */
  object-fit: cover; /* Ensures the image fills the container */
  border-radius: 6px; /* Match container border radius */
  background: transparent; /* Ensure no black background */
}

/* Thumbnails Grid (Two Columns) */
.listing-details .thumbs {
  display: grid !important; /* Force grid layout */
  grid-template-columns: repeat(2, 1fr) !important; /* Two columns */
  gap: 10px !important; /* Space between thumbnails */
  max-width: 620px; /* Adjust based on your design */
  padding: 10px 0;
  background: transparent; /* Ensure no black background */
}

/* Thumbnail Styling */
.listing-details .thumbs .f-carousel__slide {
  width: 145px !important; /* Fixed width */
  height: 200px !important; /* Fixed height */
  flex: 0 0 145px !important; /* Prevent flex resizing */
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  position: relative !important;
  margin-right: 8px !important; /* Adjust spacing between slides */
}

.listing-details .thumbs .f-carousel__slide img,
.listing-details .thumbs .f-carousel__slide video {
  width: 100% !important; /* Force full width */
  height: 100% !important; /* Force full height */
  object-fit: cover !important; /* Ensures thumbnails fill the container */
  border: 2px solid white !important;
  border-radius: 4px !important;
  background: transparent !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Highlight Active Thumbnail */
.listing-details .thumbs .f-carousel__slide.active img,
.listing-details .thumbs .f-carousel__slide.active video {
  border-color: #222 !important; /* Highlight active thumbnail */
}

/* Mobile Responsive Styles */
@media screen and (max-width: 767px) {
  .listing-details .main-image-container {
    width: 100% !important; /* Full width on small screens */
    height: auto !important; /* Auto height to maintain aspect ratio */
    max-height: 450px; /* Limit height */
  }

  .listing-details .thumbs {
    grid-template-columns: repeat(1, 1fr) !important; /* Single column on small screens */
    gap: 5px !important; /* Smaller gap on small screens */
  }

  .listing-details .thumbs .f-carousel__slide {
    flex: 0 0 145px !important; /* Fixed width */
    width: 145px !important; /* Fixed width */
    height: 200px !important; /* Fixed height */
    margin: 0 5px !important; /* Adjust spacing between slides */
    padding-bottom: 0 !important; /* Remove padding-bottom */
  }

  .listing-details .thumbs .f-carousel__slide img,
  .listing-details .thumbs .f-carousel__slide video {
    border: 0 !important; /* Remove border */
    border-radius: 0 !important; /* Remove border radius */
  }

  .listing-details .thumbs .f-carousel__wrapper {
    padding-bottom: 0 !important; /* Remove padding-bottom */
  }
}

/* Desktop and Tablet Styles */
@media screen and (min-width: 768px) {
  .listing-details .thumbs .f-carousel__slide {
    flex: 0 0 145px !important; /* Fixed width */
    width: 145px !important; /* Fixed width */
    height: 200px !important; /* Fixed height */
    margin-right: 8px !important; /* Adjust spacing between slides */
  }

  .listing-details .thumbs .f-carousel__slide img,
  .listing-details .thumbs .f-carousel__slide video {
    border: 2px solid white !important; /* Add border */
    border-radius: 4px !important; /* Add border radius */
  }

  .listing-details .thumbs .f-carousel__wrapper {
    padding-bottom: 0 !important; /* Remove padding-bottom */
  }
}

/* Common Styles for All Screen Sizes */
.listing-details .thumbs .f-carousel__slide {
  padding: 0;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  position: relative !important;
}

.listing-details .thumbs .f-carousel__slide img,
.listing-details .thumbs .f-carousel__slide video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background: rgba(225, 148, 70, 0.3) !important;
}

.listing-details .thumbs .f-carousel__slide.locked img {
  background-color: #eeeeee !important;
  background-image: url("../../img/lock.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: auto !important;
}