/* Inside Elementor flex containers the widget has no intrinsic width (the
   figure is an inline-size query container), so it must claim the full
   available width explicitly or it collapses to 0. */
.elementor-widget-ahura_before_after {
    width: var(--container-widget-width, 100%);
    max-width: 100%;
}

.ahura-image-before-after {
    position: relative;
    width: 100%;
    margin: 0 auto 0 auto;
    overflow: hidden;
}

.ahura-image-before-after .cd-image-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    /* Establish a size container so the overlay image can be sized to the box
       width (100cqw) regardless of the clipped .cd-resize-img wrapper. */
    container-type: inline-size;
}

.ahura-image-before-after .cd-image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* When the box has a locked aspect ratio (intrinsic image size known) or an
   explicit height, both images fill the box so the height is deterministic and
   identical on the front end and inside the Elementor editor. */
.ahura-image-before-after .cd-image-container.has-fixed-ratio,
.ahura-image-before-after .cd-image-container.has-fixed-height {
    line-height: 0;
}

/* Keep the base image in normal flow in ratio mode: it must provide the
   intrinsic width, otherwise the widget collapses to 0 inside flex
   containers. Only an explicit height switches it to absolute cover mode. */
.ahura-image-before-after .cd-image-container.has-fixed-ratio > img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ahura-image-before-after .cd-image-container.has-fixed-height > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ahura-image-before-after .cd-image-label {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #ffffff;
    padding: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0;
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
    -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
    transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}

.ahura-image-before-after .cd-image-label.is-hidden {
    visibility: hidden;
}

.ahura-image-before-after .cd-image-label {
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.ahura-image-before-after .cd-resize-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 50%;
}

.ahura-image-before-after .cd-resize-img img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    /* Match the box (figure) width, not the clipped wrapper width, so the
       "after" image stays aligned with the "before" image at any box height. */
    width: 100cqw;
    max-width: none;
    object-fit: cover;
}

.ahura-image-before-after .cd-resize-img .cd-image-label {
    right: auto;
    left: 0;
}

@-webkit-keyframes cd-bounce-in {
    0% {
        width: 0;
    }
    60% {
        width: 55%;
    }
    100% {
        width: 50%;
    }
}
@-moz-keyframes cd-bounce-in {
    0% {
        width: 0;
    }
    60% {
        width: 55%;
    }
    100% {
        width: 50%;
    }
}
@keyframes cd-bounce-in {
    0% {
        width: 0;
    }
    60% {
        width: 55%;
    }
    100% {
        width: 50%;
    }
}

.ahura-image-before-after .cd-handle {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 1px;
    left: 50%;
    top: 0;
    margin-left: 0;
    background: #ffffff;
    cursor: move;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ahura-image-before-after .cd-handle:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    display: inline-block;
    width: 20px;
    height: 60px;
    background-color: #fff;
    border-radius: 50px;
    border: 1px solid #bbbcbe;
    transform: translateY(-50%);
}

.ahura-image-before-after .cd-handle.draggable:before {
    background-color: #445b7c;
}

.ahura-image-before-after .cd-handle {
    opacity: 1;
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
    -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
    transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}

.ahura-image-before-after .cd-handle .cd-handle-arrows {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 1px;
    color: #445b7c;
    pointer-events: none;
    z-index: 1;
    line-height: 0;
}

.ahura-image-before-after .cd-handle .cd-handle-arrows svg {
    width: 9px;
    height: 9px;
    display: block;
}