/* Advanced Modals Frontend Styles */

.advanced-modals-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.advanced-modals-overlay > * {
    position: relative !important;
    z-index: 1000000 !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    overflow: auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
}

/* Prevent body scroll when modal is open */
body.advanced-modals-no-scroll {
    overflow: hidden !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .advanced-modals-overlay {
        padding: 10px !important;
    }
    
    .advanced-modals-overlay > * {
        max-width: 95vw !important;
        max-height: 95vh !important;
    }
}

@media (max-width: 480px) {
    .advanced-modals-overlay {
        padding: 5px !important;
    }
    
    .advanced-modals-overlay > * {
        max-width: 98vw !important;
        max-height: 98vh !important;
        border-radius: 4px !important;
    }
}

/* Ensure modal content is visible */
.advanced-modals-overlay [style*="display: none"] {
    display: block !important;
}

/* Animation classes for smooth transitions */
.advanced-modals-fade-in {
    animation: advancedModalsFadeIn 0.3s ease-out;
}

.advanced-modals-fade-out {
    animation: advancedModalsFadeOut 0.3s ease-out;
}

@keyframes advancedModalsFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes advancedModalsFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
} 