/* Custom Swiper Navigation Buttons (Optional) */
.swiper-button-next, .swiper-button-prev {
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.swiper-button-next svg, .swiper-button-prev svg {
    color: #1a202c; /* Tailwind color 'gray-800' */
}
.swiper-button-next svg, .swiper-button-prev svg {
    padding: 10px;
    width: 50px;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    display: none;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    display: none;
}

.drawer {
    transition: transform 0.3s ease;
    transform: translateX(100%); /* Hidden off-screen */
  }

  .drawer.open {
    transform: translateX(0); /* Fully visible */
  }

  /* To prevent the main content from shifting when the drawer opens */
  body.drawer-open {
    overflow: hidden;
  }

  .scrollbar-hide::-webkit-scrollbar {
      display: none;
  }
  .scrollbar-hide {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
  }

  .descriptions {
      width: 70%;
  }
  .sidebar-similar{
      width: 30%;
  }

  /* Modal Styles */
  .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
      z-index: 50;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

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

  .modal-content {
      background-color: white;
      padding: 2rem;
      border-radius: 10px;
      max-width: 500px;
      width: 100%;
      position: relative;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Shadow */
  }

  .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      padding: 5px;
      color: rgb(58, 55, 55);
      font-size: 20px;
  }

  .image-placeholder {
      width: 100%;
      height: auto;
      background-color: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
  }

  @media screen and (max-width: 768px) {
      .descriptions {
          width: 100%;
          padding: 10px;
      }

      .sidebar-similar{
          width: 100%;
          padding: 10px;
      }
  }