/**
 * Section Dividers - Elementor-style
 * Provides curve, angle, waves and animated wave divider styles for sections
 */

/* Base divider styles */
.section-divider {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    overflow: hidden;
    line-height: 0;
}

.section-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 50px;
}

.section-divider.divider-top {
    top: 0;
}

.section-divider.divider-bottom {
    bottom: 0;
}

/* Flip dividers when positioned at bottom */
.section-divider.divider-bottom svg {
    transform: rotateX(180deg);
}

/* Special handling for waves - flip vertically for bottom position */
.section-divider.divider-bottom.divider-waves svg {
    transform: rotateX(180deg) scaleY(-1);
}

/* Special handling for triangle - flip vertically for bottom position */
.section-divider.divider-bottom.divider-triangle svg {
    transform: rotateX(180deg) scaleY(-1);
}

/* Special handling for rounded split - flip vertically for bottom position */
.section-divider.divider-bottom.divider-rounded-split svg {
    transform: rotateX(180deg) scaleY(-1);
}

/* Special handling for rounded split - flip vertically for bottom position */
.section-divider.divider-bottom.divider-rounded-split svg {
    transform: rotateX(180deg) scaleY(-1);
}

/* Small Waves Divider */
.section-divider.divider-curve svg {
    height: 40px;
}

/* Angle Divider */
.section-divider.divider-angle svg {
    height: 30px;
}

/* Wave Divider */
.section-divider.divider-waves svg {
    height: 60px;
}

/* Triangle Divider */
.section-divider.divider-triangle svg {
    height: 80px;
}

/* Rounded Split Divider */
.section-divider.divider-rounded-split svg {
    height: 60px;
}

/* Slanted Divider */
.section-divider.divider-slanted svg {
    height: 40px;
}

/* Slanted Opposite Divider */
.section-divider.divider-slanted-opposite svg {
    height: 40px;
}

/* Special handling for slanted - flip vertically for bottom position */
.section-divider.divider-bottom.divider-slanted svg {
    transform: rotateX(180deg) scaleY(-1);
}

/* Special handling for slanted opposite - flip vertically for bottom position */
.section-divider.divider-bottom.divider-slanted-opposite svg {
    transform: rotateX(180deg) scaleY(-1);
}

/* Animated Wave Divider */
.section-divider.divider-animated-waves {
    height: 120px;
}

.animated-waves {
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom: -7px;
}

.animated-waves .waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;
}

.animated-waves .parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.animated-waves .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.animated-waves .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.animated-waves .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.animated-waves .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }
    100% { 
        transform: translate3d(85px,0,0);
    }
}

.section-divider.divider-animated-waves {
    transform: scaleY(-1);
}

/* Special handling for animated waves bottom position */
.section-divider.divider-bottom.divider-animated-waves .animated-waves {
    transform: rotateX(180deg) scaleY(-1);
}

/* Color variations */
.section-divider svg,
.section-divider .animated-waves {
    fill: var(--white);
    color: var(--white);
}

.section-divider.divider-white svg,
.section-divider.divider-white .animated-waves {
    fill: var(--white);
    color: var(--white);
}

.section-divider.divider-primary svg,
.section-divider.divider-primary .animated-waves {
    fill: var(--primary);
    color: var(--primary);
}

.section-divider.divider-darker-primary svg,
.section-divider.divider-darker-primary .animated-waves {
    fill: var(--darker-primary);
    color: var(--darker-primary);
}

.section-divider.divider-secondary svg,
.section-divider.divider-secondary .animated-waves {
    fill: var(--secondary);
    color: var(--secondary);
}

.section-divider.divider-dark-gray svg,
.section-divider.divider-dark-gray .animated-waves {
    fill: var(--dark-gray);
    color: var(--dark-gray);
}

.section-divider.divider-gray svg,
.section-divider.divider-gray .animated-waves {
    fill: var(--gray);
    color: var(--gray);
}

.section-divider.divider-blue svg,
.section-divider.divider-blue .animated-waves {
    fill: var(--blue);
    color: var(--blue);
}

.section-divider.divider-medium-gray svg,
.section-divider.divider-medium-gray .animated-waves {
    fill: var(--medium-gray);
    color: var(--medium-gray);
}

.section-divider.divider-light-gray svg,
.section-divider.divider-light-gray .animated-waves {
    fill: var(--light-gray);
    color: var(--light-gray);
}

.section-divider.divider-info svg,
.section-divider.divider-info .animated-waves {
    fill: var(--info);
    color: var(--info);
}

.section-divider.divider-success svg,
.section-divider.divider-success .animated-waves {
    fill: var(--success);
    color: var(--success);
}

.section-divider.divider-alert svg,
.section-divider.divider-alert .animated-waves {
    fill: var(--alert);
    color: var(--alert);
}

/* Section positioning for dividers */
.section-with-dividers {
    position: relative;
    z-index: 1;
}

/* Adjust section padding when dividers are present */
.section-with-dividers.has-top-divider {
    padding-top: calc(var(--section-padding-y, 4rem) + 40px);
}

.section-with-dividers.has-bottom-divider {
    padding-bottom: calc(var(--section-padding-y, 4rem) + 40px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-divider svg {
        height: 30px;
    }
    
    .section-divider.divider-waves svg {
        height: 40px;
    }
    
    .section-divider.divider-animated-waves {
        height: 80px;
    }
    
    .animated-waves .waves {
        height: 10vh;
        min-height: 60px;
        max-height: 80px;
    }
    
    .section-with-dividers.has-top-divider {
        padding-top: calc(var(--section-padding-y, 2rem) + 30px);
    }
    
    .section-with-dividers.has-bottom-divider {
        padding-bottom: calc(var(--section-padding-y, 2rem) + 30px);
    }
}