/* ==============================================
   MODAL ANIMATIONS - Enhanced & Organized
   ============================================== */

/* Animation Variables */
:root {
    --amwal-animation-duration-fast: 0.2s;
    --amwal-animation-duration-normal: 0.4s;
    --amwal-animation-duration-slow: 0.5s;
    --amwal-animation-easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --amwal-animation-easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --amwal-animation-easing-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Primary Overlay Animation */
@keyframes amwal-overlay-enter {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

/* Primary Modal Animation */
@keyframes amwal-modal-enter {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(50px);
        filter: blur(8px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02) translateY(10px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

/* Alternative Animation Variants */
@keyframes amwal-modal-slide-up {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes amwal-modal-zoom-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes amwal-modal-fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content Animation Stagger */
@keyframes amwal-content-stagger {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility Animations */
@keyframes amwal-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes amwal-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes amwal-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ==============================================
   MODAL OVERLAY STYLES
   ============================================== */

/* Modal Overlay - Completely Isolated */
.amwal-modal-overlay {
    all: initial !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    backdrop-filter: blur(4px) !important;
    animation: amwal-overlay-enter var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* CSS Specificity Boosters - Use attribute selectors to increase specificity */
div[data-amwal-modal="true"].amwal-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: amwal-overlay-enter var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
}

div[data-amwal-content="true"].amwal-modal-container {
    width: 90vw !important;
    max-width: 900px !important;
    max-height: 95vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: linear-gradient(to bottom, #e8f4ef, #f5faf7) !important;
    border-radius: 17px !important;
    color: #292929 !important;
    text-align: left !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    animation: amwal-modal-enter var(--amwal-animation-duration-slow) var(--amwal-animation-easing-bounce) !important;
}

/* Ultimate fallback with maximum specificity */
html body div[data-amwal-modal="true"].amwal-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgb(0 0 0 / 50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    animation: amwal-overlay-enter var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
}

html body div[data-amwal-modal="true"].amwal-modal-overlay div[data-amwal-content="true"].amwal-modal-container {
    width: 90vw !important;
    max-width: 850px !important;
    height: 67vh !important;
    background: linear-gradient(to bottom, #e8f4ef, #f5faf7) !important;
    border-radius: 17px !important;
    color: #292929 !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: relative !important;
    animation: amwal-modal-enter var(--amwal-animation-duration-slow) var(--amwal-animation-easing-bounce) !important;
}

/* ==============================================
   ANIMATION MODIFIERS & VARIANTS
   ============================================== */

/* Animation variant classes for different modal types */
.amwal-modal-overlay.amwal-animation-slide {
    animation: amwal-overlay-enter var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
}

.amwal-modal-overlay.amwal-animation-slide .amwal-modal-container {
    animation: amwal-modal-slide-up var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
}

.amwal-modal-overlay.amwal-animation-zoom {
    animation: amwal-overlay-enter var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
}

.amwal-modal-overlay.amwal-animation-zoom .amwal-modal-container {
    animation: amwal-modal-zoom-in var(--amwal-animation-duration-normal) var(--amwal-animation-easing-bounce) !important;
}

.amwal-modal-overlay.amwal-animation-fade {
    animation: amwal-overlay-enter var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
}

.amwal-modal-overlay.amwal-animation-fade .amwal-modal-container {
    animation: amwal-modal-fade-in var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .amwal-modal-overlay,
    .amwal-modal-container,
    div[data-amwal-modal="true"].amwal-modal-overlay,
    div[data-amwal-content="true"].amwal-modal-container {
        animation: amwal-modal-fade-in 0.2s ease !important;
    }

    .amwal-spinner {
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .amwal-modal-overlay {
        background: rgba(0, 0, 0, 0.9) !important;
        backdrop-filter: none !important;
    }
}

/* ==============================================
   DEPRECATED ANIMATIONS (Backwards Compatibility)
   ============================================== */

@keyframes amwal-overlay-fade-in {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes amwal-modal-scale-in {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(50px);
        filter: blur(8px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02) translateY(10px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

@keyframes amwal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes amwal-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Container - Override any conflicting modal styles */
.amwal-modal-overlay .amwal-modal-container,
div.amwal-modal-overlay div.amwal-modal-container {
    all: initial !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    width: 90vw;
    max-width: 800px;
    max-height: 90vh;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: linear-gradient(to bottom, #e8f4ef, #f5faf7) !important;
    border-radius: 17px !important;
    color: #292929 !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: amwal-modal-scale-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-align: left !important;
    position: relative !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
    transform: none !important;
}

/* Modal Header */
.amwal-modal-container .amwal-header {
    all: initial !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px 8px 20px !important;
    background: inherit !important;
    font-family: inherit !important;
    flex-shrink: 0 !important;
}

.amwal-modal-container .amwal-header > svg {
    width: 80px !important;
    height: 32px !important;
}

.amwal-modal-container .amwal-close {
    all: initial !important;
    position: relative !important;
    cursor: pointer !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
    padding: 4px !important;
}

.amwal-modal-container .amwal-close:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.amwal-modal-container .amwal-close:before,
.amwal-modal-container .amwal-close:after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 2px !important;
    background-color: #3e3e3e !important;
    border-radius: 1px !important;
    transform-origin: center !important;
}

.amwal-modal-container .amwal-close:before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.amwal-modal-container .amwal-close:after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Modal Body */
.amwal-modal-container .amwal-body {
    all: initial !important;
    flex: 1 !important;
    padding: 0 20px 20px 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Iframe */
#amwal-iframe {
    width: 100% !important;
    height: 62.3vh !important;
    border: none !important;
    display: block !important;
}

/* Loading Indicator - Enhanced centering */
.amwal-loading-indicator {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    z-index: 10 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner - Updated styles */
.amwal-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 4px solid #f0f0f0 !important;
    border-top: 4px solid #4666f5 !important;
    border-radius: 50% !important;
    animation: amwal-spin 1s linear infinite !important;
    flex-shrink: 0 !important;
}

/* Error Message */
.amwal-error-message {
    padding: 40px 20px !important;
    text-align: center !important;
    color: #e74c3c !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    background: #fff !important;
    border-radius: 8px !important;
    margin: 20px !important;
    border: 1px solid #e74c3c !important;
}

/* ==============================================
   RTL SUPPORT FOR MODAL
   ============================================== */

/* RTL Modal Overlay */
[dir="rtl"] .amwal-modal-overlay,
[dir="rtl"] div[data-amwal-modal="true"].amwal-modal-overlay {
    direction: rtl !important;
}

/* RTL Modal Container */
[dir="rtl"] .amwal-modal-container,
[dir="rtl"] div[data-amwal-content="true"].amwal-modal-container {
    text-align: right !important;
    direction: rtl !important;
}

/* RTL Modal Header */
[dir="rtl"] .amwal-modal-container .amwal-header {
    flex-direction: row-reverse !important;
    padding: 16px 20px 8px 20px !important;
}

/* RTL Modal Body */
[dir="rtl"] .amwal-modal-container .amwal-body {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL Close Button */
[dir="rtl"] .amwal-modal-container .amwal-close {
    /* Close button stays on the left in RTL for consistency with UI patterns */
    order: -1 !important;
}

/* RTL Error Message */
[dir="rtl"] .amwal-error-message {
    text-align: right !important;
    direction: rtl !important;
}

/* RTL Iframe Container */
[dir="rtl"] .amwal-modal-container .amwal-body iframe {
    direction: rtl !important;
}

/* RTL Animation Adjustments */
@keyframes amwal-modal-slide-up-rtl {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[dir="rtl"] .amwal-modal-overlay.amwal-animation-slide .amwal-modal-container {
    animation: amwal-modal-slide-up-rtl var(--amwal-animation-duration-normal) var(--amwal-animation-easing-smooth) !important;
}

/* RTL Responsive Design */
@media only screen and (max-width: 768px) {
    [dir="rtl"] .amwal-modal-container .amwal-header {
        padding: 12px 16px 6px 16px !important;
    }

    [dir="rtl"] .amwal-modal-container .amwal-body {
        padding: 0 16px 16px 16px !important;
    }
}

@media only screen and (max-width: 480px) {
    [dir="rtl"] .amwal-modal-container {
        margin: 10px !important;
        border-radius: 12px !important;
    }

    [dir="rtl"] .amwal-modal-container .amwal-header {
        padding: 10px 12px 4px 12px !important;
    }

    [dir="rtl"] .amwal-modal-container .amwal-body {
        padding: 0 12px 12px 12px !important;
    }
}

/* Comprehensive protection against theme modal CSS conflicts */
.amwal-modal-overlay *[class*="modal"],
.amwal-modal-overlay .modal,
.amwal-modal-overlay .modal-dialog,
.amwal-modal-overlay .modal-content,
.amwal-modal-overlay .modal-header,
.amwal-modal-overlay .modal-body,
.amwal-modal-overlay .modal-footer,
div.amwal-modal-overlay *[class*="modal"],
div.amwal-modal-overlay .modal,
div.amwal-modal_overlay .modal-dialog,
div.amwal-modal_overlay .modal-content,
div.amwal-modal_overlay .modal-header,
div.amwal-modal_overlay .modal-body,
div.amwal-modal_overlay .modal-footer {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-align: inherit !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    white-space: normal !important;
    vertical-align: baseline !important;
    list-style: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    z-index: auto !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    float: none !important;
    clear: none !important;
}

/* Prevent theme interference */
.amwal-modal-overlay,
.amwal-modal-overlay *,
div.amwal-modal-overlay,
div.amwal-modal-overlay * {
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation-delay: 0s !important;
    animation-duration: 0.3s !important;
    animation-fill-mode: both !important;
    float: none !important;
    clear: none !important;
    position: relative !important;
}

/* Fix overlay positioning */
.amwal-modal-overlay {
    position: fixed !important;
    z-index: 999999 !important;
}

.amwal-modal-overlay .amwal-modal-container {
    position: relative !important;
}

html body div[data-amwal-modal="true"].amwal-modal-overlay div[data-amwal-content="true"].force-mobile {
    max-width: 475px !important;
    width: 100% !important;
    container-type: inline-size !important;
    container-name: amwal-modal !important;
}

@supports not (container-type: inline-size) {
    html body div[data-amwal-modal="true"].amwal-modal-overlay div[data-amwal-content="true"].force-mobile {
        max-width: 475px !important;
    }
}