.footer-wrapper {
    position: relative;
}

.footerbar {
    position: relative;
    background-color: var(--primary);
    color: var(--text-light);
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    border-top: 2px solid var(--secondary);
    z-index: 2; /* sits above the flower */
}

.flower {
    position: absolute;
    bottom: 56px; /* 👈 pushes it *under* the footer a bit */
    width: 120px;
    height: 180px;
    pointer-events: none;
    z-index: 1; /* stays *behind* footerbar */
    background-repeat: no-repeat;
    background-size: contain;
    animation: sway 5s ease-in-out infinite;
    opacity: 0.98;
}

.flower-left {
    left: 20px;
    background-image: image-set(
            url('/images/assets/leave_asset_01.webp') type('image/webp'),
            url('/images/assets/leave_asset_ill.svg') type('image/svg+xml'),
            url('/images/assets/leave_asset_ill.png') type('image/png')
    );
}

.flower-right {
    right: 20px;
    background-image: image-set(
            url('/images/assets/leave_asset_02.webp') type('image/webp'),
            url('/images/assets/leave_asset_ill_02.svg') type('image/svg+xml'),
            url('/images/assets/leave_asset_ill_02.png') type('image/png')
    );
}

.footer-complete {
    position: relative;
}

.pre-footer-flowers {
    position: relative;
    height: 180px;
    max-width: 100%;
    overflow: hidden; /* ✅ clamp overflowing flower bits */
    margin-bottom: -80px; /* Optional: tweak how far it overlaps footer */
    z-index: 1;
}



.flower-left-mid,
.flower-right-mid {
    position: absolute;
    bottom: 0;
    max-width: 100%;
    overflow: hidden;
    width: 120px;
    height: auto;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.flower-left-mid {
    left: 100px;
    background-image: image-set(
            url('/images/assets/rose_asset_01.webp') type('image/webp'),
            url('/images/assets/rose_asset_01.png') type('image/png')
    );
}

.flower-right-mid {
    right: 100px;
    transform: scaleX(-1);
    background-image: image-set(
            url('/images/assets/rose_asset_01.webp') type('image/webp'),
            url('/images/assets/rose_asset_01.png') type('image/png')
    );
}



.footer-content {
    max-width: 1200px;   /* centers content if the footer gets wider */
    margin: 0 auto;
    padding: 0 1rem;     /* horizontal padding to prevent text touching screen edges */
}

.footer-content p {
    margin: 0;
}


/* Responsive tweaks */
@media (max-width: 768px) {
    .footerbar {
        padding: 1.5rem 1rem;
        font-size: 0.85rem;
    }
    .flower {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
}