/* CW Elementor Wave Shapes - frontend/editor CSS only, no JavaScript needed */
.elementor-element.cw-wave-enable-yes {
    --cw-wave-color: #45C3BD;
    --cw-wave-count: 12;
    --cw-wave-height: 28px;
    --cw-wave-offset: 1px;
    --cw-wave-z-index: 1;

    position: relative;
    overflow: visible !important;
}

.elementor-element.cw-wave-enable-yes::before,
.elementor-element.cw-wave-enable-yes::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--cw-wave-height);
    background: var(--cw-wave-color);
    background-color: var(--cw-wave-color);
    pointer-events: none;
    display: none;
    z-index: var(--cw-wave-z-index);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: calc(100% / var(--cw-wave-count)) var(--cw-wave-height);
    mask-size: calc(100% / var(--cw-wave-count)) var(--cw-wave-height);
    -webkit-mask-position: left top;
    mask-position: left top;
}

/* Keep Elementor content above the wave */
.elementor-element.cw-wave-enable-yes > .e-con-inner,
.elementor-element.cw-wave-enable-yes > .elementor-container,
.elementor-element.cw-wave-enable-yes > .elementor-widget-container {
    position: relative;
    z-index: calc(var(--cw-wave-z-index) + 1);
}

/* Default position is bottom, even if Elementor does not print the default position class */
.elementor-element.cw-wave-enable-yes:not(.cw-wave-position-top):not(.cw-wave-position-both)::after,
.elementor-element.cw-wave-enable-yes.cw-wave-position-bottom::after,
.elementor-element.cw-wave-enable-yes.cw-wave-position-both::after {
    display: block;
    bottom: calc((var(--cw-wave-height) * -1) + var(--cw-wave-offset));
}

.elementor-element.cw-wave-enable-yes.cw-wave-position-top::before,
.elementor-element.cw-wave-enable-yes.cw-wave-position-both::before {
    display: block;
    top: calc((var(--cw-wave-height) * -1) + var(--cw-wave-offset));
}

/* Inside / cut-edge mode */
.elementor-element.cw-wave-enable-yes.cw-wave-mode-inside:not(.cw-wave-position-top):not(.cw-wave-position-both)::after,
.elementor-element.cw-wave-enable-yes.cw-wave-mode-inside.cw-wave-position-bottom::after,
.elementor-element.cw-wave-enable-yes.cw-wave-mode-inside.cw-wave-position-both::after {
    bottom: 0;
}

.elementor-element.cw-wave-enable-yes.cw-wave-mode-inside.cw-wave-position-top::before,
.elementor-element.cw-wave-enable-yes.cw-wave-mode-inside.cw-wave-position-both::before {
    top: 0;
}

/* Figma Soft - default */
.elementor-element.cw-wave-enable-yes::after,
.elementor-element.cw-wave-enable-yes.cw-wave-style-figma::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 C90 0 84 30 50 30 C16 30 10 0 0 0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 C90 0 84 30 50 30 C16 30 10 0 0 0 Z' fill='black'/%3E%3C/svg%3E");
}

.elementor-element.cw-wave-enable-yes::before,
.elementor-element.cw-wave-enable-yes.cw-wave-style-figma::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 H100 C90 30 84 0 50 0 C16 0 10 30 0 30 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 H100 C90 30 84 0 50 0 C16 0 10 30 0 30 Z' fill='black'/%3E%3C/svg%3E");
}

/* Round Deep */
.elementor-element.cw-wave-enable-yes.cw-wave-style-round::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 C96 0 92 36 50 36 C8 36 4 0 0 0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 C96 0 92 36 50 36 C8 36 4 0 0 0 Z' fill='black'/%3E%3C/svg%3E");
}

.elementor-element.cw-wave-enable-yes.cw-wave-style-round::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'%3E%3Cpath d='M0 36 H100 C96 36 92 0 50 0 C8 0 4 36 0 36 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'%3E%3Cpath d='M0 36 H100 C96 36 92 0 50 0 C8 0 4 36 0 36 Z' fill='black'/%3E%3C/svg%3E");
}

/* Gentle Small */
.elementor-element.cw-wave-enable-yes.cw-wave-style-gentle::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 C88 0 80 20 50 20 C20 20 12 0 0 0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 C88 0 80 20 50 20 C20 20 12 0 0 0 Z' fill='black'/%3E%3C/svg%3E");
}

.elementor-element.cw-wave-enable-yes.cw-wave-style-gentle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 H100 C88 24 80 4 50 4 C20 4 12 24 0 24 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 H100 C88 24 80 4 50 4 C20 4 12 24 0 24 Z' fill='black'/%3E%3C/svg%3E");
}

/* Horizontal reverse */
.elementor-element.cw-wave-enable-yes.cw-wave-reverse-yes::before,
.elementor-element.cw-wave-enable-yes.cw-wave-reverse-yes::after {
    transform: scaleX(-1);
}

/* Avoid click issues in Elementor editor */
body.elementor-editor-active .elementor-element.cw-wave-enable-yes::before,
body.elementor-editor-active .elementor-element.cw-wave-enable-yes::after {
    pointer-events: none !important;
}