/* Shape Divider Base Styles */
.has-shape-divider-top,
.has-shape-divider-bottom {
    position: relative;
}

/* Shape divider pseudo elements */
.has-shape-divider-top::before,
.has-shape-divider-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.has-shape-divider-top::before {
    top: 0;
    height: var(--shape-divider-top-height, 6.25rem);
    clip-path: var(--shape-divider-top-clip, ellipse(75% 200% at 50% -105%));
    background: var(--shape-divider-top-color, #ffffff);
}

.has-shape-divider-bottom::after {
    bottom: 0;
    height: var(--shape-divider-bottom-height, 6.25rem);
    clip-path: var(--shape-divider-bottom-clip, ellipse(75% 200% at 50% 205%));
    background: var(--shape-divider-bottom-color, #ffffff);
}

/* Inverted (flip vertically) */
.has-shape-divider-top-inverted::before {
    transform: scaleY(-1);
    top: calc(var(--shape-divider-top-height, 6.25rem) * -1);
}

.has-shape-divider-bottom-inverted::after {
    transform: scaleY(-1);
    bottom: calc(var(--shape-divider-bottom-height, 6.25rem) * -1);
}

/* Mobile adjustments - flatten the curve on smaller screens */
@media (max-width: 768px) {
    .has-shape-divider-top::before {
        clip-path: ellipse(100% 150% at 50% -105%) !important;
    }
    
    .has-shape-divider-bottom::after {
        clip-path: ellipse(100% 150% at 50% 205%) !important;
    }
    
    .has-shape-divider-top-inverted::before {
        clip-path: ellipse(100% 150% at 50% -105%) !important;
    }
    
    .has-shape-divider-bottom-inverted::after {
        clip-path: ellipse(100% 150% at 50% 205%) !important;
    }
}