/* section-image-hotspots.css */

.image-hotspots__container {
  position: relative;
  width: 100%;
  display: flex; /* Use flex for alignment settings */
  justify-content: var(--container-horizontal-alignment, center);
  align-items: var(--container-vertical-alignment, center);
}

.image-hotspots__image-wrapper {
  position: relative; /* Changed from absolute for flow */
  width: 100%;
  /* padding-bottom is set inline based on aspect ratio */
  overflow: hidden; /* Ensure image stays within bounds */
  line-height: 0; /* Remove space below image */
}

.image-hotspots__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the wrapper area */
  object-position: center center; /* Center the image */
}

.image-hotspots__hotspots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allow clicks/hovers through to image unless over a hotspot marker */
}

.image-hotspots__hotspot {
  position: absolute;
  top: var(--hotspot-pos-y);
  left: var(--hotspot-pos-x);
  transform: translate(-50%, -50%); /* Center the marker */
  z-index: 1; /* Ensure hotspots are above the image */
  pointer-events: all; /* Make hotspot interactive */
}

.image-hotspots__marker {
  position: relative;
  display: block;
  width: 32px; /* Increased size for easier interaction */
  height: 32px;
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-out, background-color 0.2s ease;
}

.image-hotspots__marker:hover,
.image-hotspots__marker:focus {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.9);
}

.image-hotspots__marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease;
}

.image-hotspots__marker:hover .image-hotspots__marker-dot,
.image-hotspots__marker:focus .image-hotspots__marker-dot {
   background-color: rgba(0, 0, 0, 1);
}

/* Popup styles */
.image-hotspots__popup {
  position: absolute;
  /* Position relative to the marker; adjust as needed */
  bottom: calc(100% + 10px); /* Position above the marker */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text));
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: var(--popup-corner-radius, 4px);
  padding: 15px; /* Reverted padding */
  box-shadow: var(--popup-shadow-horizontal-offset, 0px) var(--popup-shadow-vertical-offset, 4px) var(--popup-shadow-blur-radius, 10px) rgba(var(--color-shadow), var(--popup-shadow-opacity, 0.1));
  width: max-content; /* Adjust width based on content */
  max-width: 250px; /* Max width to prevent excessive size */
  z-index: 2; /* Ensure popup is above markers */
  pointer-events: auto; /* Allow interaction within the popup */
  text-align: left;
}

/* Adjust popup position if it's near the top edge */
.image-hotspots__hotspot[style*="--hotspot-pos-y: 0%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 1%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 2%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 3%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 4%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 5%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 6%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 7%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 8%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 9%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 10%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 11%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 12%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 13%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 14%;"],
.image-hotspots__hotspot[style*="--hotspot-pos-y: 15%;"] {
  .image-hotspots__popup {
     bottom: auto;
     top: calc(100% + 10px); /* Position below the marker */
  }
}


.image-hotspots__popup-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.image-hotspots__popup-image {
  flex-shrink: 0;
  width: 50px; /* Fixed width for the image container */
  height: auto;
  line-height: 0; /* Remove extra space */
}

.image-hotspots__popup-image img,
.image-hotspots__popup-image .placeholder-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 65px; /* Limit image height */
  object-fit: contain;
  border-radius: var(--inputs-radius-small, 2px);
}

.image-hotspots__popup-info {
  display: flex;
  flex-direction: column;
  gap: 5px; /* Space between title, price, link */
  flex-grow: 1;
}

.image-hotspots__popup-title {
  font-size: var(--font-body-scale);
  margin: 0;
  font-weight: 900; /* Increased boldness */
  line-height: 1.3;
  color: rgb(var(--color-foreground)); /* Ensure title color is foreground */
}

.image-hotspots__popup-price {
  font-size: calc(var(--font-body-scale) * 0.9rem);
  margin: 0;
}

.image-hotspots__popup-link {
  font-size: calc(var(--font-body-scale) * 0.9rem);
  text-decoration: underline;
  margin-top: 10px; /* Increased space above the link */
}

/* Hide element when using x-cloak until Alpine initializes */
[x-cloak] { display: none !important; } 