/* frontend-style.css - Styles for Layered Accordion Images (v1.2.3+) */

/* The main wrapper for all image layers.
   The ID (e.g., #popupimg) and height/width are set inline by the shortcode.
   This class provides a common styling hook if needed. */
.accordion-image-layers-wrapper { /* This class is on the #popupimg div */
    position: relative; /* Establishes a containing block for absolute positioned children */
    overflow: hidden;  /* Ensures child layers don't spill out if dimensions are odd */
}

/* Individual image layers within the wrapper.
   Background images are set inline on these divs by the PHP shortcode. */
.accordion-image-layers-wrapper .accordion-image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0; /* All layers start hidden */
    transition: opacity 0.4s ease-in-out;
    z-index: 1; /* Default z-index for non-active layers */
}

/* --- Rules to show the active layer based on #popupimg (wrapper) class --- */

/* Fallback image layer */
/* Using #popupimg as the default ID. If user changes it, this specific ID selector won't match.
   A more generic selector would be .accordion-image-layers-wrapper.active-img-fallback ...
   but #popupimg is more specific if it's the guaranteed ID. */
#popupimg.active-img-fallback .accordion-image-layer[data-image-id="fallback"],
.accordion-image-layers-wrapper.active-img-fallback .accordion-image-layer[data-image-id="fallback"] {
    opacity: 1;
    z-index: 2; /* Ensure active fallback is on top */
}

/* Item-specific image layers.
   Add a similar block for each sanitized accordion item ID you have configured.
   Examples provided for common IDs.
*/
#popupimg.active-img-stay .accordion-image-layer[data-image-id="stay"],
.accordion-image-layers-wrapper.active-img-stay .accordion-image-layer[data-image-id="stay"] {
    opacity: 1;
    z-index: 2;
}

#popupimg.active-img-dine .accordion-image-layer[data-image-id="dine"],
.accordion-image-layers-wrapper.active-img-dine .accordion-image-layer[data-image-id="dine"] {
    opacity: 1;
    z-index: 2;
}

#popupimg.active-img-experience .accordion-image-layer[data-image-id="experience"],
.accordion-image-layers-wrapper.active-img-experience .accordion-image-layer[data-image-id="experience"] {
    opacity: 1;
    z-index: 2;
}

#popupimg.active-img-gather .accordion-image-layer[data-image-id="gather"],
.accordion-image-layers-wrapper.active-img-gather .accordion-image-layer[data-image-id="gather"] {
    opacity: 1;
    z-index: 2;
}

#popupimg.active-img-discover .accordion-image-layer[data-image-id="discover"],
.accordion-image-layers-wrapper.active-img-discover .accordion-image-layer[data-image-id="discover"] {
    opacity: 1;
    z-index: 2;
}

#popupimg.active-img-about .accordion-image-layer[data-image-id="about"],
.accordion-image-layers-wrapper.active-img-about .accordion-image-layer[data-image-id="about"] {
    opacity: 1;
    z-index: 2;
}

/* Add more rules here if you have other accordion item IDs, e.g.:
#popupimg.active-img-your-custom-id .accordion-image-layer[data-image-id="your-custom-id"],
.accordion-image-layers-wrapper.active-img-your-custom-id .accordion-image-layer[data-image-id="your-custom-id"] {
    opacity: 1;
    z-index: 2;
}
*/