/* The semi-transparent background overlay */
.info-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.info-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* The main popup window container */
.info-popup-container {
    background-color: #fff;
    color: #333; /* Set default text color for popups */
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    max-width: 600px;
    width: 90%;
}

/* The close button (X) */
.info-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
}

.info-popup-close:hover {
    color: #000;
}

/* Styles for image hotspots */
.product-image-map-container {
    position: relative;
    display: block; /* Revert to block to fix header layout */
}

/* Use a grid to overlay hotspots directly on top of the image */
.image-grid-container {
    display: grid;
    display: inline-grid; /* Allows the container to be centered */
    position: relative; /* Establish positioning context for hotspots */
    /* Place all children in the same grid cell */
    grid-template-areas: "overlay";
}

.image-grid-container > * {
    /* Assign all children to the same grid area */
    grid-area: overlay;
}

.image-grid-container .product-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Use a more specific selector to override the default '?' icon styles */
a.hotspot[data-popup-content-id] {
    position: absolute;
    z-index: 1; /* Ensure hotspots are on top of the image */
    cursor: pointer;
    transform: translate(-50%, -50%); /* Center the hotspot on its coordinates */
    background-color: transparent; /* Ensure the hotspot itself is invisible */
    border: none;
    /* Set a specific size for the clickable area */
    width: 15%;
    height: 15%;
    line-height: normal;
    font-size: initial;
}

/* Subtle pulsing ring to indicate interactivity */
.hotspot::before {
    /* This pseudo-element is no longer needed as the hotspot itself is the clickable area */
    display: none;
}

.hotspot:hover::before {
    /* This is no longer needed */
}

@keyframes pulse-subtle {
    to {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}