/**
 * Image Color Override Styles
 * CSS for multiply blend mode color tinting on white images  
 * Works by applying a colored overlay with mix-blend-mode: multiply
 * Uses isolation and proper stacking to preserve alpha transparency
 * CRITICAL: Ensures 0 alpha stays 0 alpha (fully transparent areas remain transparent)
 */

/* Base class for elements with color overlay (picture or div wrapper) */
.color-overlay-active {
    position: relative;
    display: inline-block;
    isolation: isolate; /* Create stacking context for blend modes */
    background: transparent !important; /* Force transparent background */
}

/* Create overlay using ::after pseudo-element */
/* The overlay multiplies with the image RGB but PRESERVES the image's alpha channel */
/* This works because multiply blend mode in CSS respects the destination alpha */
/* MASKING: Clip the overlay to only visible (opaque) parts of the image */
.color-overlay-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Ensure overlay covers the entire element (sizing is handled by parent positioning) */
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay, transparent);
    mix-blend-mode: var(--blend-mode, multiply);
    pointer-events: none;
    transition: background-color 0.3s ease;
    z-index: 1;
    /* Mask the overlay using the image's alpha channel */
    /* This ensures overlay only appears where image is opaque */
    -webkit-mask-image: var(--image-mask, none);
    mask-image: var(--image-mask, none);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Ensure images inside overlay containers are positioned correctly */
.color-overlay-active img {
    display: block;
    position: relative;
    z-index: 0;
    /* CRITICAL: Ensure image background is transparent, not white */
    background: transparent !important;
    background-color: transparent !important;
    /* Images should maintain their natural size without being stretched */
}

/* Picture elements with overlay - ensure proper positioning */
picture.color-overlay-active img {
    display: block;
    z-index: 0;
    background: transparent !important;
}

/* Mask-only mode: use normal blend to render tinted overlay without base image */
.color-overlay-active[data-color-overlay-mask-only="true"]::after {
    mix-blend-mode: normal !important;
    z-index: 2;
}

/* In mask-only mode, keep layout box but hide the white source icon */
.color-overlay-active[data-color-overlay-mask-only="true"] img {
    visibility: hidden;
}

/* Ensure picture wrapper has no background */
.color-overlay-active picture {
    background: transparent !important;
}

/* Picture elements need to be display: inline-block to create a proper container for the overlay */
picture.color-overlay-active {
    display: inline-block;
    position: relative;
    background: transparent !important;
    vertical-align: top; /* Prevent extra space from inline-block */
    min-width: 1px;  /* Ensure the picture has at least some width for overlay */
    min-height: 1px; /* Ensure the picture has at least some height for overlay */
}

/* Ensure parent containers also have transparent backgrounds */
.widget-image.color-overlay-active,
.button-image.color-overlay-active,
.widget-background.color-overlay-active {
    background: transparent !important;
}

/* Widget image containers */
.widget-image.color-overlay-active {
    display: block;
}

/* Button image overlays */
.button-image.color-overlay-active {
    display: inline-block;
}

/* Background widgets with color override */
.widget-background.color-overlay-active {
    display: block;
}

/* Performance optimization: Use GPU acceleration */
.color-overlay-active,
.color-overlay-active::after {
    transform: translateZ(0);
    will-change: background-color;
}

/* Disable will-change after interaction (better performance) */
.color-overlay-active:not(:hover)::after {
    will-change: auto;
}

/* Ensure the overlay waits for HQ image to load before applying color */
/* This prevents applying overlay to low-quality preview which may lack proper alpha */
.color-overlay-active img:not([data-hq-loaded]) {
    /* While loading, don't show the overlay */
}

.color-overlay-active img[data-hq-loaded="true"] ~ .color-overlay-active::after,
.color-overlay-active:has(img[data-hq-loaded="true"])::after {
    /* Overlay is active after HQ loads */
}