/* Popup Manager Styles - Bootstrap 5 Compatible */

/* Minimal custom styles - Bootstrap handles most styling */

/* Banner gradients (since Bootstrap doesn't have these exact ones) */
.bg-gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.bg-gradient-pink {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

/* Animation keyframes */
@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Banner animations */
.banner-top,
.banner-bottom {
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.banner-top {
    animation-name: slideDownFade;
}

.banner-bottom {
    animation-name: slideUpFade;
}

/* Slide-in animations */
.slide-right,
.slide-left {
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.slide-right {
    animation-name: slideInRight;
}

.slide-left {
    animation-name: slideInLeft;
}

/* Smooth transitions for other popup types */
[data-popup-type="cookie"],
[data-popup-type="notification"] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Additional animation support */
.toast.show {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    
    [data-popup-type="slide-in"] .card {
        max-width: calc(100vw - 1rem) !important;
    }
    
    [data-popup-type="notification"] .toast {
        min-width: auto;
        max-width: calc(100vw - 1rem);
    }
}