/* Style for dot navigation */
.flex-control-paging {
  position: absolute;
  bottom: 10px; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px; /* Space between dots */
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 10; /* Ensure dots are above images */
}

.flex-control-paging li {
  display: inline-block;
}

.flex-control-paging a {
  display: block;
  width: 12px; /* Diameter of the dots */
  height: 12px;
  border: 2px solid white; /* Outline color */
  background-color: transparent; /* Default dot color */
  border-radius: 50%;
  text-indent: -9999px; /* Hide the text */
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

.flex-control-paging a.flex-active {
  background-color: white; /* Active dot color */
  border-color: white; /* Active dot border color */
}

/* Style for direction navigation */
.flex-direction-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 10; /* Ensure arrows are above images */
  padding: 0.5rem;
}

.flex-direction-nav li {
  display: inline-block;
}

.flex-direction-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* Arrow size */
  height: 30px;
  background-color: rgba(255, 255, 255, 0.7); /* Arrow background color */
  border-radius: 50%;
  text-indent: -9999px; /* Hide the text */
  position: relative;
  transition: background-color 0.3s;
}

.flex-direction-nav a:hover {
  background-color: white;
}

.flex-direction-nav a::before {
  content: "";
  width: 70%;
  height: 70%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.flex-prev::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23333%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%2215 18 9 12 15 6%22/%3E%3C/svg%3E");
}

.flex-next::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23333%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%229 18 15 12 9 6%22/%3E%3C/svg%3E");
}

/* Vertical Thumbnail */

.thumbnail-layout-vertical .woocommerce-product-gallery {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.5rem;
}

.thumbnail-layout-vertical .flex-control-nav.flex-control-thumbs {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  gap: 0.5rem;
  min-width: 32px;
}

.flex-control-nav.flex-control-thumbs li {
  width: 100% !important;
}

.flex-control-nav.flex-control-thumbs img {
  border-radius: 4px;
  opacity: 1 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  border: currentColor 1px solid;
}

.thumbnail-layout-horizontal .flex-control-nav.flex-control-thumbs {
  margin-top: 0.5rem !important;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
}

@media (min-width: 782px) {
  :is(.gallery-layout-single_column, .gallery-layout-two_column) .flex-control-nav {
    display: none !important;
  }

  :is(.gallery-layout-single_column, .gallery-layout-two_column) .woocommerce-product-gallery__wrapper {
    display: grid !important;
    overflow: visible !important;
    width: 100% !important;
  }

  .gallery-layout-two_column .woocommerce-product-gallery__wrapper {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  :is(.gallery-layout-single_column, .gallery-layout-two_column) .woocommerce-product-gallery__image {
    width: 100% !important;
  }

  .gallery-layout-two_column img {
    height: 100% !important;
    object-fit: cover;
  }

  :is(.gallery-layout-single_column, .gallery-layout-two_column) .flex-viewport {
    height: auto !important;
  }

  :is(.gallery-layout-single_column, .gallery-layout-two_column) .woocommerce-product-gallery__wrapper {
    gap: 1rem;
  }
}