/* craftforms-layered-image web component styles
 * Reuses the .cfpi-* viewer chrome from craftforms-product-image and adds the
 * .cfli-* layer-stack rules. Self-contained so the component works whether or
 * not the product-image stylesheet is also enqueued. */

craftforms-layered-image {
    display: block;
    width: 100%;
    align-self: stretch; /* fill the cross-axis when a direct flex child */
    box-sizing: border-box;
}

craftforms-layered-image *,
craftforms-layered-image *::before,
craftforms-layered-image *::after {
    box-sizing: border-box;
}

/* ── Main image area ──────────────────────────────────────────────────────── */

.cfli-main {
    position: relative;
    overflow: hidden;
    border-radius: var(--cfpi-radius, 4px);
    background: var(--cfpi-bg, #f5f5f5);
    cursor: zoom-in;
    line-height: 0;
    /* Fallback floor for when there's no gallery <img> at all (no `images`
       configured) — nothing left would have a real intrinsic size to anchor
       the box, since percentage/aspect-ratio sizing needs a definite
       containing block, and if an ancestor (e.g. a flex Group block) is
       itself shrink-to-fit the box would otherwise collapse to the small
       fixed-size .cfpi-thumb. Irrelevant whenever a gallery image exists —
       see the [hidden] override below, which keeps that image in flow (and
       therefore sizing the box) even while the composite is shown on top. */
    min-width: 220px;
}

.cfli-main .cfpi-main-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.15s ease;
    aspect-ratio: var(--cfpi-aspect, 1 / 1);
}

/* Stays in normal flow (not display:none) so it keeps establishing the box's
   size — via its own real intrinsic photo dimensions — even while hidden
   behind the composite stack. Only the composite (absolutely positioned,
   below) actually needs a size handed to it; this is what hands it one.
   A dedicated class, NOT the `hidden` attribute — Chrome's UA stylesheet
   applies `[hidden]{display:none!important}`, which no author rule (of any
   specificity) can override, so `display:block` here would never win. */
.cfli-main .cfpi-main-img.cfli-img-covered {
    visibility: hidden;
}

/* The composite overlays the gallery image exactly, rather than sizing
   itself — this is what keeps the preview the same size as the normal photo
   instead of shrinking to whatever the stack's own content can establish. */
.cfli-main .cfli-stack {
    position: absolute;
    inset: 0;
}

/* ── Layer stack (composite preview) ──────────────────────────────────────── */

.cfli-stack {
    position: relative;
    width: 100%;
    line-height: 0;
}

.cfli-stack[hidden] {
    display: none;
}

/* No background image → the stack itself carries the aspect ratio so the
   absolutely-positioned layers have a box to fill. */
.cfli-stack--no-bg {
    aspect-ratio: var(--cfpi-aspect, 1 / 1);
}

.cfli-bg {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: var(--cfpi-aspect, 1 / 1);
}

.cfli-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.cfli-layer[hidden] {
    display: none;
}

/* Color layer: a solid fill clipped to the mask PNG's non-transparent pixels. */
.cfli-layer--color {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Thumbnail-sized stack inside the preview thumb (cover to fill the square). */
.cfli-stack--thumb,
.cfli-stack--thumb .cfli-bg {
    width: 100%;
    height: 100%;
}

/* The thumb button is a fixed square — fill it, ignore the aspect ratio. */
.cfli-stack--thumb,
.cfli-stack--thumb.cfli-stack--no-bg {
    aspect-ratio: auto;
}

.cfli-stack--thumb .cfli-bg {
    object-fit: cover;
    aspect-ratio: auto;
}

.cfli-stack--thumb .cfli-layer {
    object-fit: cover;
}

/* Zoom button (hover reveal) */
.cfpi-zoom-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
    line-height: 1;
}

.cfli-main:hover .cfpi-zoom-btn {
    opacity: 1;
}

.cfpi-zoom-btn:focus-visible {
    opacity: 1;
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* ── Thumbnail strip ──────────────────────────────────────────────────────── */

.cfpi-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cfpi-thumb-gap, 6px);
    margin-top: var(--cfpi-thumb-gap, 6px);
    padding: 0;
    list-style: none;
}

.cfpi-thumbs[hidden] {
    display: none;
}

.cfpi-thumb {
    flex: 0 0 auto;
    width: var(--cfpi-thumb-size, 64px);
    height: var(--cfpi-thumb-size, 64px);
    padding: 0;
    background: var(--cfpi-bg, #f5f5f5);
    border: 2px solid transparent;
    border-radius: var(--cfpi-radius, 4px);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s ease, opacity 0.12s ease;
    line-height: 0;
    opacity: 0.65;
}

.cfpi-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cfpi-thumb:hover {
    opacity: 1;
    border-color: var(--cfpi-thumb-hover-border, #b0b0b0);
}

.cfpi-thumb.is-active {
    border-color: var(--cfpi-thumb-active-border, #007cba);
    opacity: 1;
}

.cfpi-thumb:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Preview thumb, empty state (no layer choice matches the current selection
   yet) — show a generic placeholder icon instead of a blank/stale swatch. */
.cfli-preview-thumb {
    position: relative;
}

.cfli-preview-empty-icon {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: var(--cfpi-thumb-hover-border, #b0b0b0);
    pointer-events: none;
}

.cfli-preview-thumb--empty .cfli-stack {
    visibility: hidden;
}

.cfli-preview-thumb--empty .cfli-preview-empty-icon {
    display: flex;
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */

.cfpi-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    padding: 20px;
    animation: cfpi-lb-in 0.18s ease;
}

.cfpi-lightbox[hidden] {
    display: none;
}

@keyframes cfpi-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cfpi-lb-img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--cfpi-lb-radius, 4px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    animation: cfpi-lb-img-in 0.2s ease;
}

@keyframes cfpi-lb-img-in {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.cfpi-lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cfpi-lb-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.cfpi-lb-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .cfpi-thumb {
        width: var(--cfpi-thumb-size-mobile, 54px);
        height: var(--cfpi-thumb-size-mobile, 54px);
    }
}