/**
 * Shape Dividers CSS
 */
.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
    pointer-events: none;
}

.shape-divider-top {
    top: -1px;
}

/*
 * Bottom divider sits INSIDE the section at its bottom edge so that
 * the wave/curve, when filled with the next section's color, appears
 * to carve into the current section (e.g. white curve into a peach
 * hero). `top: auto` is set explicitly so it isn't pulled to top:0
 * by any cascade; `bottom: -1px` avoids a sub-pixel hairline gap.
 */
.shape-divider-bottom {
    top: auto;
    bottom: -1px;
    transform: rotate(180deg);
}

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

@media (max-width: 767px) {
    .shape-divider svg {
        height: 30px;
    }
}

/* Color Mappings */
.shape-divider.bg-white .shape-fill {
    fill: var(--color-white);
}

.shape-divider.bg-light .shape-fill {
    fill: var(--color-light);
}

.shape-divider.bg-dark .shape-fill {
    fill: var(--color-gray-900);
}

.shape-divider.bg-primary .shape-fill {
    fill: var(--color-primary);
}

.shape-divider.bg-secondary .shape-fill {
    fill: var(--color-secondary);
}

/* Ensure parents have relative positioning */
.how-it-works,
.benefits-grid,
.benefits-flex,
.cta-banner,
.testimonials,
.content-section,
.stats-numbers,
.faq-accordion,
.form-block,
.image-gallery,
.page-header,
.content-cards,
.pricing-table,
.half-text-half-image,
.wysiwyg,
.medications-list,
.half-accordion-half-image,
.half-text-half-form,
.hero-banner {
    position: relative;
}