/* Image Hotspot - Interactive image with clickable hotspots */

:root {
  /* Colors */
  --usk-hotspot-dark: #2b2d42;
  --usk-hotspot-white: #fff;
  --usk-hotspot-bg: #ffffff;

  /* Spacing */
  --usk-hotspot-gap: clamp(15px, 3vw, 30px);
  --usk-hotspot-margin: clamp(15px, 3vw, 30px);
  --usk-hotspot-thumb-size: clamp(32px, 3vw, 40px);
  --usk-hotspot-btn-height: clamp(40px, 3vw, 50px);
  --usk-hotspot-spacing: clamp(10px, 1vw, 25px);

  /* Animation */
  --usk-hotspot-transition: all 0.3s ease;
}

/* Base Layout */
.usk-image-hotspot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--usk-hotspot-gap);
  width: 100%;
}

/* Thumbnails Container */
.usk-image-hotspot-thumbs {
  position: relative;
  width: 100%;
  display: flex;
}

.usk-image-hotspot-thumbs .swiper-wrapper {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
}

/* Thumbnail Items */
.usk-image-hotspot-thumbs .usk-thumbs-item {
  position: absolute !important;
  height: var(--usk-hotspot-thumb-size);
  width: var(--usk-hotspot-thumb-size) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: visible !important;
  z-index: 1;
}

.usk-image-hotspot-thumbs .usk-thumbs-box {
  background-color: var(--usk-hotspot-bg);
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.usk-image-hotspot-thumbs .usk-thumbs-box i,
.usk-image-hotspot-thumbs .usk-thumbs-box svg {
  width: 1em;
  height: 1em;
  transition: var(--usk-hotspot-transition);
}

.usk-image-hotspot-thumbs .usk-thumbs-box i {
  color: var(--usk-hotspot-dark);
  font-size: 14px;
}

.usk-image-hotspot-thumbs .usk-thumbs-box svg {
  fill: var(--usk-hotspot-dark);
}

/* Image Wrap */
.usk-image-hotspot-thumbs .usk-image-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
}

.usk-image-hotspot-thumbs .usk-image-wrap .usk-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Active Thumbnail State */
.usk-image-hotspot-thumbs
  .usk-thumbs-item.swiper-slide-thumb-active
  .usk-thumbs-box {
  background-color: var(--usk-hotspot-dark);
  transform: scale(1.1);
}

.usk-image-hotspot-thumbs
  .usk-thumbs-item.swiper-slide-thumb-active
  .usk-thumbs-box
  i,
.usk-image-hotspot-thumbs
  .usk-thumbs-item.swiper-slide-thumb-active
  .usk-thumbs-box
  svg {
  color: var(--usk-hotspot-white);
  fill: var(--usk-hotspot-white);
}

/* Hotspot Animation */
.usk-image-hotspot-thumbs .usk-thumbs-item:after {
  content: "";
  position: absolute;
  display: block;
  animation: 2s infinite hotspot-icon;
  border-radius: 50%;
  backface-visibility: hidden;
  perspective: 800px;
  background-color: var(--usk-hotspot-white);
  opacity: 0.3;
  width: 64px;
  height: 64px;
  transition: 0.2s ease-in-out;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Main Content */
.usk-image-hotspot-main {
  width: 80%;
  position: relative;
}

/* Tippy Tooltip Styles */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] {
  background-color: transparent !important;
  max-width: 300px !important;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .tippy-content {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .tippy-arrow {
  color: var(--usk-hotspot-white);
  z-index: 1;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] a {
  text-decoration: none;
  color: inherit;
}

/* Common Styles for Tippy and Main Content */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"],
.usk-image-hotspot-main {
  --btn-width: 100%;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-item,
.usk-image-hotspot-main .usk-item {
  overflow: hidden;
  background-color: var(--usk-hotspot-white);
  position: relative;
  border-radius: 4px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

/* Action Button */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-action-btn,
.usk-image-hotspot-main .usk-action-btn {
  transform: translateX(25px);
  transition: var(--usk-hotspot-transition);
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"]
  .usk-item:hover
  .usk-action-btn,
.usk-image-hotspot-main .usk-item:hover .usk-action-btn {
  transform: translateX(0);
}

/* Shopping and Badge Positioning */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-shoping,
.usk-image-hotspot-main .usk-shoping {
  position: absolute;
  top: var(--usk-hotspot-spacing);
  right: var(--usk-hotspot-spacing);
  z-index: 2;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-badge-label-wrapper,
.usk-image-hotspot-main .usk-badge-label-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

/* Button Styles */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-button,
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .added_to_cart,
.usk-image-hotspot-main .usk-button,
.usk-image-hotspot-main .added_to_cart {
  position: absolute;
  font-weight: 600;
  text-align: center;
  left: 0;
  bottom: 0;
  width: var(--btn-width);
  margin: 0 calc(calc(100% - var(--btn-width)) / 2);
  background: var(--usk-hotspot-dark);
  text-decoration: none;
  color: var(--usk-hotspot-white);
  text-transform: capitalize;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: var(--usk-hotspot-transition);
  height: var(--usk-hotspot-btn-height);
  line-height: var(--usk-hotspot-btn-height);
  font-size: 14px;
  z-index: 3;
}

/* Button States */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-button.added,
.usk-image-hotspot-main .usk-button.added {
  display: none;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-button.loading i,
.usk-image-hotspot-main .usk-button.loading i {
  transition: var(--usk-hotspot-transition);
  transform: translate(70px);
  opacity: 0.02;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-item:hover .usk-button,
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"]
  .usk-item:hover
  .added_to_cart,
.usk-image-hotspot-main .usk-item:hover .usk-button,
.usk-image-hotspot-main .usk-item:hover .added_to_cart {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Loading State */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-button.loading::after,
.usk-image-hotspot-main .usk-button.loading::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px dotted var(--usk-hotspot-white);
  border-radius: 50%;
  margin-left: -15px;
  display: inline-block;
  position: absolute;
  top: 31%;
  text-align: center;
  animation: rotation 2s linear infinite;
}

/* Added to Cart State */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .added_to_cart::after,
.usk-image-hotspot-main .added_to_cart::after {
  content: "\2713";
  margin-left: 5px;
  font-size: 20px;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .added_to_cart i,
.usk-image-hotspot-main .added_to_cart i {
  display: none;
}

/* Rating and Price Toggle */
.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-have-rating .usk-price,
.usk-image-hotspot-main .usk-have-rating .usk-price {
  margin: 0;
  opacity: 1;
  transition: var(--usk-hotspot-transition);
  transform: translateY(0);
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"] .usk-have-rating .usk-rating,
.usk-image-hotspot-main .usk-have-rating .usk-rating {
  transform: translateY(0);
  opacity: 0;
  transition: var(--usk-hotspot-transition);
  position: absolute;
  width: 100%;
  display: flex;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"]
  .usk-have-rating:hover
  .usk-rating,
.usk-image-hotspot-main .usk-have-rating:hover .usk-rating {
  transform: translateY(-20px);
  opacity: 1;
}

.tippy-box[data-theme^="bdt-tippy-image-hotspot-"]
  .usk-have-rating:hover
  .usk-price,
.usk-image-hotspot-main .usk-have-rating:hover .usk-price {
  transform: translateY(-20px);
  opacity: 0;
  visibility: hidden;
}

/* Animations */
@keyframes hotspot-icon {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Styles */
@media (min-width: 768px) {
  .usk-image-hotspot-main {
    width: 27%;
    min-width: 27%;
  }

  .usk-image-hotspot-slider-left .usk-image-hotspot {
    flex-direction: row;
  }

  .usk-image-hotspot-slider-left .usk-image-hotspot-main {
    margin-left: var(--usk-hotspot-margin);
  }

  .usk-image-hotspot-slider-right .usk-image-hotspot {
    flex-direction: row-reverse;
  }

  .usk-image-hotspot-slider-right .usk-image-hotspot-main {
    margin-right: var(--usk-hotspot-margin);
  }
}
