/**
 * LT Widgets Modular - Image Effects
 * Modules: Mask Fade + Shape Masks + Back Shape.
 *
 * Legacy-compatible classes from the old Mask Fade implementation are preserved.
 */

.lt-maskfade,
.lt-maskfade-enabled-yes {
    --lt-angle: 90deg;
    --lt-s: 0%;
    --lt-m: 50%;
    --lt-e: 100%;
    --lt-mid-alpha: 0.5;
}

.lt-maskfade-image img,
.lt-maskfade-enabled-yes.elementor-widget-image img {
    -webkit-mask-image: linear-gradient(
        var(--lt-angle),
        rgba(0, 0, 0, 0) var(--lt-s),
        rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m),
        rgba(0, 0, 0, 1) var(--lt-e)
    ) !important;
    mask-image: linear-gradient(
        var(--lt-angle),
        rgba(0, 0, 0, 0) var(--lt-s),
        rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m),
        rgba(0, 0, 0, 1) var(--lt-e)
    ) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

.lt-maskfade-container,
.lt-maskfade-enabled-yes.e-con {
    -webkit-mask-image: linear-gradient(
        var(--lt-angle),
        rgba(0, 0, 0, 0) var(--lt-s),
        rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m),
        rgba(0, 0, 0, 1) var(--lt-e)
    ) !important;
    mask-image: linear-gradient(
        var(--lt-angle),
        rgba(0, 0, 0, 0) var(--lt-s),
        rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m),
        rgba(0, 0, 0, 1) var(--lt-e)
    ) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

/* Do not force width:100%; Elementor width/max-width/aspect-ratio controls must keep working. */
.lt-maskfade-image img,
.lt-shapemask-image img,
.lt-backshape-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.lt-maskfade-container.e-con,
.lt-shapemask-container.e-con,
.lt-backshape-container.e-con,
.lt-backshape-enabled-yes.e-con {
    position: relative;
}

/* Shape Masks ------------------------------------------------------------ */
.lt-shapemask,
.lt-shapemask-type-rounded-soft,
.lt-shapemask-type-rounded-xl,
.lt-shapemask-type-circle,
.lt-shapemask-type-blob-svg,
.lt-shapemask-type-custom-svg,
.lt-shapemask-type-diagonal-cut,
.lt-shapemask-type-arch,
.lt-shapemask-type-ticket {
    --lt-shape-mask-size: contain;
}

.lt-shapemask-image.lt-shapemask-rounded-soft img,
.lt-shapemask-type-rounded-soft.elementor-widget-image img,
.lt-shapemask-container.lt-shapemask-rounded-soft,
.lt-shapemask-type-rounded-soft.e-con {
    border-radius: var(--lt-shape-radius-soft, 20px) !important;
}

.lt-shapemask-image.lt-shapemask-rounded-xl img,
.lt-shapemask-type-rounded-xl.elementor-widget-image img,
.lt-shapemask-container.lt-shapemask-rounded-xl,
.lt-shapemask-type-rounded-xl.e-con {
    border-radius: var(--lt-shape-radius-xl, 56px) !important;
}

.lt-shapemask-image.lt-shapemask-circle img,
.lt-shapemask-type-circle.elementor-widget-image img,
.lt-shapemask-container.lt-shapemask-circle,
.lt-shapemask-type-circle.e-con {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 999px !important;
}

.lt-shapemask-image.lt-shapemask-blob-svg img,
.lt-shapemask-type-blob-svg.elementor-widget-image img,
.lt-shapemask-container.lt-shapemask-blob-svg,
.lt-shapemask-type-blob-svg.e-con,
.lt-shapemask-image.lt-shapemask-custom-svg img,
.lt-shapemask-type-custom-svg.elementor-widget-image img,
.lt-shapemask-container.lt-shapemask-custom-svg,
.lt-shapemask-type-custom-svg.e-con {
    -webkit-mask-image: var(--lt-shape-mask-url) !important;
    mask-image: var(--lt-shape-mask-url) !important;
    -webkit-mask-size: var(--lt-shape-mask-size, contain) !important;
    mask-size: var(--lt-shape-mask-size, contain) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

.lt-shapemask-image.lt-shapemask-diagonal-cut img,
.lt-shapemask-type-diagonal-cut.elementor-widget-image img,
.lt-shapemask-container.lt-shapemask-diagonal-cut,
.lt-shapemask-type-diagonal-cut.e-con {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--lt-shape-diagonal-end, 88%), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% var(--lt-shape-diagonal-end, 88%), 0 100%);
}

.lt-shapemask-image.lt-shapemask-arch img,
.lt-shapemask-type-arch.elementor-widget-image img,
.lt-shapemask-container.lt-shapemask-arch,
.lt-shapemask-type-arch.e-con {
    border-radius: 999px 999px var(--lt-shape-arch-bottom-radius, 28px) var(--lt-shape-arch-bottom-radius, 28px) !important;
}

.lt-shapemask-image.lt-shapemask-ticket img,
.lt-shapemask-type-ticket.elementor-widget-image img,
.lt-shapemask-container.lt-shapemask-ticket,
.lt-shapemask-type-ticket.e-con {
    -webkit-clip-path: polygon(8% 0, 92% 0, 92% 8%, 100% 8%, 100% 92%, 92% 92%, 92% 100%, 8% 100%, 8% 92%, 0 92%, 0 8%, 8% 8%);
    clip-path: polygon(8% 0, 92% 0, 92% 8%, 100% 8%, 100% 92%, 92% 92%, 92% 100%, 8% 100%, 8% 92%, 0 92%, 0 8%, 8% 8%);
}

/* Back Shape ------------------------------------------------------------- */
.lt-backshape,
.lt-backshape-enabled-yes {
    --lt-backshape-color: #FF4B14;
    --lt-backshape-opacity: 1;
    --lt-backshape-w: 74%;
    --lt-backshape-h: 84%;
    --lt-backshape-x: 28px;
    --lt-backshape-y: 10px;
    --lt-backshape-rotate: -12deg;
    --lt-backshape-z: 0;
    --lt-backshape-overflow: visible;
    --lt-backshape-fit: contain;
    --lt-backshape-mask-url: none;
    --lt-backshape-image-url: none;
}

/*
 * Image widgets use a real internal frame injected by PHP. This avoids relying
 * on Elementor's aspect-ratio wrappers, which can clip pseudo-elements.
 */
.lt-backshape-image.elementor-widget-image,
.lt-backshape-enabled-yes.elementor-widget-image,
.lt-backshape-container.e-con,
.lt-backshape-enabled-yes.e-con {
    position: relative !important;
    overflow: var(--lt-backshape-overflow, visible) !important;
    isolation: isolate;
    z-index: 0;
}

.lt-backshape-image.elementor-widget-image > .elementor-widget-container,
.lt-backshape-enabled-yes.elementor-widget-image > .elementor-widget-container {
    position: relative !important;
    overflow: visible !important;
}

.lt-backshape-image.elementor-widget-image:not(.lt-backshape-clip-hidden),
.lt-backshape-enabled-yes.elementor-widget-image:not(.lt-backshape-clip-hidden),
.lt-backshape-container.e-con:not(.lt-backshape-clip-hidden),
.lt-backshape-enabled-yes.e-con:not(.lt-backshape-clip-hidden) {
    overflow: visible !important;
}

.lt-backshape-clip-visible.elementor-widget-image,
.lt-backshape-clip-visible.e-con,
.lt-backshape-clip-visible .lt-backshape-frame {
    --lt-backshape-overflow: visible !important;
    overflow: visible !important;
}

.lt-backshape-clip-hidden.elementor-widget-image,
.lt-backshape-clip-hidden.e-con,
.lt-backshape-clip-hidden .lt-backshape-frame {
    --lt-backshape-overflow: hidden !important;
    overflow: hidden !important;
}

.lt-backshape-frame {
    position: relative !important;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    overflow: var(--lt-backshape-overflow, visible) !important;
    isolation: isolate;
}

.lt-backshape-content {
    position: relative;
    z-index: 2;
    display: block;
}

.lt-backshape-content > * {
    position: relative;
    z-index: 2;
}

.lt-backshape-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.lt-backshape-node,
.lt-backshape-container.e-con::after,
.lt-backshape-enabled-yes.e-con::after {
    content: "";
    position: absolute;
    width: var(--lt-backshape-w, 74%);
    height: var(--lt-backshape-h, 84%);
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + var(--lt-backshape-x, 28px)), calc(-50% + var(--lt-backshape-y, 10px))) rotate(var(--lt-backshape-rotate, -12deg));
    background-color: var(--lt-backshape-color, #FF4B14);
    background-image: none;
    background-size: var(--lt-backshape-fit, contain);
    background-repeat: no-repeat;
    background-position: center;
    opacity: var(--lt-backshape-opacity, 1);
    pointer-events: none;
    z-index: var(--lt-backshape-z, 0) !important;
}

.lt-backshape-container.e-con > *,
.lt-backshape-enabled-yes.e-con > * {
    position: relative;
    z-index: 2;
}

.lt-backshape-rounded .lt-backshape-node,
.lt-backshape-type-rounded .lt-backshape-node,
.lt-backshape-rounded.e-con::after,
.lt-backshape-type-rounded.e-con::after {
    border-radius: var(--lt-shape-radius-xl, 56px);
}

.lt-backshape-circle .lt-backshape-node,
.lt-backshape-type-circle .lt-backshape-node,
.lt-backshape-circle.e-con::after,
.lt-backshape-type-circle.e-con::after {
    border-radius: 999px;
}

.lt-backshape-blob-svg .lt-backshape-node,
.lt-backshape-type-blob-svg .lt-backshape-node,
.lt-backshape-blob-svg.e-con::after,
.lt-backshape-type-blob-svg.e-con::after,
.lt-backshape-custom-svg .lt-backshape-node,
.lt-backshape-type-custom-svg .lt-backshape-node,
.lt-backshape-custom-svg.e-con::after,
.lt-backshape-type-custom-svg.e-con::after {
    -webkit-mask-image: var(--lt-backshape-mask-url);
    mask-image: var(--lt-backshape-mask-url);
    -webkit-mask-size: var(--lt-backshape-fit, contain);
    mask-size: var(--lt-backshape-fit, contain);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}


/* Back Shape render modes.
 * Mask mode: uses the SVG as a silhouette and paints it with Color.
 * Image mode: shows the SVG/image itself, complete, without using it as a mask.
 */
.lt-backshape-render-mask .lt-backshape-node,
.lt-backshape-frame-render-mask .lt-backshape-node {
    background-color: var(--lt-backshape-color, #FF4B14) !important;
    background-image: none !important;
}

.lt-backshape-render-image .lt-backshape-node,
.lt-backshape-frame-render-image .lt-backshape-node {
    background-color: transparent !important;
    background-image: var(--lt-backshape-image-url) !important;
    background-size: var(--lt-backshape-fit, contain) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.lt-backshape-layer-front .lt-backshape-node,
.lt-backshape-layer-front.e-con::after {
    z-index: 5 !important;
}

.lt-backshape-layer-behind .lt-backshape-node,
.lt-backshape-layer-behind.e-con::after {
    z-index: 1 !important;
}

.lt-backshape-layer-behind .lt-backshape-content,
.lt-backshape-layer-behind .lt-backshape-content > * {
    z-index: 2 !important;
}


/* v1.16.72: Back Shape + native Image aspect-ratio compatibility.
 * Keep Elementor's widget container intact, let the decorative frame overflow,
 * and move the aspect-ratio crop to the real image content only.
 */
.elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes > .elementor-widget-container,
.elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio > .elementor-widget-container,
.elementor-widget-image.lt-backshape-image.lt-image-ar-yes > .elementor-widget-container,
.elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio > .elementor-widget-container {
    overflow: visible !important;
    aspect-ratio: auto !important;
}

.elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-frame,
.elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-frame,
.elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-frame,
.elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-frame {
    width: 100%;
    max-width: 100%;
    overflow: var(--lt-backshape-overflow, visible) !important;
}

.elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-content,
.elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-content,
.elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-content,
.elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-content {
    display: block;
    width: 100%;
    aspect-ratio: var(--lt-image-aspect-ratio-desktop, auto) !important;
    overflow: hidden !important;
}

.elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-content > a,
.elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-content picture,
.elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-content > a,
.elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-content picture,
.elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-content > a,
.elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-content picture,
.elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-content > a,
.elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-content picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-content img,
.elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-content img,
.elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-content img,
.elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-content img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: var(--lt-image-object-fit, cover) !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
}

@media (max-width: 1024px) {
    .elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-content,
    .elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-content,
    .elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-content,
    .elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-content {
        aspect-ratio: var(--lt-image-aspect-ratio-tablet, var(--lt-image-aspect-ratio-desktop, auto)) !important;
    }
}

@media (max-width: 767px) {
    .elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-content,
    .elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-content,
    .elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-content,
    .elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-content {
        aspect-ratio: var(--lt-image-aspect-ratio-mobile, var(--lt-image-aspect-ratio-tablet, var(--lt-image-aspect-ratio-desktop, auto))) !important;
    }
}

.lt-backshape-frame-type-blob-svg .lt-backshape-node,
.lt-backshape-frame-type-custom-svg .lt-backshape-node {
    -webkit-mask-image: var(--lt-backshape-mask-url);
    mask-image: var(--lt-backshape-mask-url);
    -webkit-mask-size: var(--lt-backshape-fit, contain);
    mask-size: var(--lt-backshape-fit, contain);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.lt-backshape-frame-render-image.lt-backshape-frame-type-blob-svg .lt-backshape-node,
.lt-backshape-frame-render-image.lt-backshape-frame-type-custom-svg .lt-backshape-node {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* === v1.16.73: Back Shape inline SVG + aspect ratio stabilisation ===
 * Blob SVG is rendered as real inline SVG for Image widgets. This avoids
 * data-URI mask quirks and keeps SVG viewBox/transform behaviour predictable.
 */
.lt-backshape-frame-inline-svg .lt-backshape-node {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

.lt-backshape-frame-inline-svg .lt-backshape-node > svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    transform-origin: 50% 50%;
}

.lt-backshape-frame-inline-svg.lt-backshape-frame-render-mask .lt-backshape-node > svg,
.lt-backshape-frame-inline-svg.lt-backshape-frame-render-mask .lt-backshape-node > svg * {
    fill: var(--lt-backshape-color, #FF4B14) !important;
}

.lt-backshape-frame-inline-svg.lt-backshape-frame-render-image .lt-backshape-node > svg,
.lt-backshape-frame-inline-svg.lt-backshape-frame-render-image .lt-backshape-node > svg * {
    /* Keep the SVG's own colours in image mode. */
}

/* Keep the decorative frame as the sizing context even when the Image
 * Enhancements aspect-ratio mode makes the real image/content absolute. */
.elementor-widget-image.lt-backshape-enabled-yes .lt-backshape-frame,
.elementor-widget-image.lt-backshape-image .lt-backshape-frame {
    position: relative !important;
    display: block !important;
    line-height: 0 !important;
    overflow: var(--lt-backshape-overflow, visible) !important;
}

.elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-frame,
.elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-frame,
.elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-frame,
.elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-frame {
    width: 100% !important;
    min-height: var(--lt-backshape-frame-height, auto);
}

.elementor-widget-image.lt-backshape-enabled-yes.lt-image-ar-yes .lt-backshape-content,
.elementor-widget-image.lt-backshape-enabled-yes.has-lemon-image-aspect-ratio .lt-backshape-content,
.elementor-widget-image.lt-backshape-image.lt-image-ar-yes .lt-backshape-content,
.elementor-widget-image.lt-backshape-image.has-lemon-image-aspect-ratio .lt-backshape-content {
    position: relative !important;
    z-index: 2 !important;
}