/**
 * Waverse Modal Popup - CSS
 * Version: 1.2.8
 * 
 * Inspired by Elementor Popup + Off-Canvas
 * Features: CSS Variables, Accessibility, Animations
 * 
 * IMPORTANT: All widget CSS is loaded inline via Elementor API
 * This file only contains modal structure and animations
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Overlay */
    --waverse-modal-overlay-bg: rgba(0, 0, 0, 0.8);
    --waverse-modal-overlay-z-index: 9999;
    
    /* Modal */
    --waverse-modal-bg: #141414;
    --waverse-modal-max-width: 700px;
    --waverse-modal-max-height: 750px;
    --waverse-modal-border-radius: 8px;
    --waverse-modal-padding: 40px 20px 20px;
    --waverse-modal-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    
    /* Close Button */
    --waverse-modal-close-size: 32px;
    --waverse-modal-close-color: #ffffff;
    --waverse-modal-close-hover-color: #ffffff;
    --waverse-modal-close-bg: rgba(0, 0, 0, 0.6);
    --waverse-modal-close-hover-bg: rgba(0, 0, 0, 0.8);
    
    /* Loading */
    --waverse-modal-loading-spinner-color: #ffffff;
    --waverse-modal-loading-bg: rgba(128, 128, 128, 0.15);
    
    /* Animation */
    --waverse-modal-animation-duration: 300ms;
}

/* ============================================
   OVERLAY
   ============================================ */
#waverse-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--waverse-modal-overlay-z-index);
    display: none;
    opacity: 0;
    transition: opacity var(--waverse-modal-animation-duration) ease-in-out;
}

#waverse-modal-overlay[aria-hidden="false"] {
    opacity: 1;
}

/* Backdrop */
.waverse-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--waverse-modal-overlay-bg);
    cursor: pointer;
}

/* Container */
.waverse-modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
}

/* ============================================
   MODAL
   ============================================ */
.waverse-modal {
    position: relative;
    background: var(--waverse-modal-bg);
    max-width: var(--waverse-modal-max-width);
    max-height: var(--waverse-modal-max-height);
    width: 100%;
    border-radius: var(--waverse-modal-border-radius);
    padding: var(--waverse-modal-padding);
    box-shadow: var(--waverse-modal-box-shadow);
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: all;
    transform: scale(0.9);
    opacity: 0;
    transition: transform var(--waverse-modal-animation-duration) ease-out,
                opacity var(--waverse-modal-animation-duration) ease-out;
}

#waverse-modal-overlay[aria-hidden="false"] .waverse-modal {
    transform: scale(1);
    opacity: 1;
}

/* Smooth scrolling */
.waverse-modal {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar (WebKit) */
.waverse-modal::-webkit-scrollbar {
    width: 8px;
}

.waverse-modal::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.waverse-modal::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.waverse-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar */
.waverse-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* ============================================
   CLOSE BUTTON
   ============================================ */
.waverse-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: var(--waverse-modal-close-size);
    height: var(--waverse-modal-close-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(60, 60, 60, 0.9) !important; /* Dark gray, force override */
    border: none;
    border-radius: 50%;
    color: #ffffff !important;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    padding: 0;
}

.waverse-modal-close:hover {
    background: rgba(40, 40, 40, 0.95) !important; /* Darker gray on hover */
    color: #ffffff !important;
    transform: scale(0.9); /* Shrink animation */
}

.waverse-modal-close:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.waverse-modal-close svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

/* ============================================
   CONTENT
   ============================================ */
.waverse-modal-content {
    width: 100%;
    min-height: 100px;
}

/* Ensure Elementor content fits */
.waverse-modal-content .elementor {
    width: 100%;
}

.waverse-modal-content .elementor-section-wrap {
    overflow: visible;
}

/* Fix for Waverse Content Cards */
.waverse-modal-content .waverse-content-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
}

.waverse-modal-content .waverse-content-cards {
    width: 100%;
}

.waverse-modal-content .waverse-content-card svg,
.waverse-modal-content .waverse-content-card img {
    max-width: 100%;
    height: auto;
}

/* Fix for audio players */
.waverse-modal-content audio {
    width: 100%;
    max-width: 100%;
}

.waverse-modal-content .waverse-waveform-preview {
    width: 100%;
}

/* Fix for video players */
.waverse-modal-content video,
.waverse-modal-content iframe {
    max-width: 100%;
    height: auto;
}

.waverse-modal-content .elementor-widget-video {
    width: 100%;
}

.waverse-modal-content .elementor-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.waverse-modal-content .elementor-video-wrapper iframe,
.waverse-modal-content .elementor-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   LOADING STATE
   ============================================ */
.waverse-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.waverse-modal-loading p {
    display: none; /* Hide loading text */
}

.waverse-modal-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--waverse-modal-loading-bg);
    border-top-color: var(--waverse-modal-loading-spinner-color);
    border-radius: 50%;
    animation: waverse-modal-spin 0.6s linear infinite;
}

@keyframes waverse-modal-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   ERROR STATE
   ============================================ */
.waverse-modal-error {
    padding: 40px 20px;
    text-align: center;
    color: #d32f2f;
}

.waverse-modal-error p {
    margin: 0;
    font-size: 16px;
}

/* ============================================
   BODY SCROLL LOCK
   ============================================ */
body.waverse-modal-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    :root {
        --waverse-modal-max-width: 95%;
        --waverse-modal-padding: 30px 15px 15px;
        --waverse-modal-border-radius: 12px;
    }
    
    .waverse-modal-container {
        padding: 10px;
    }
    
    .waverse-modal {
        max-height: 95vh;
    }
    
    .waverse-modal-close {
        top: 5px;
        right: 5px;
    }
}

@media (max-width: 480px) {
    :root {
        --waverse-modal-max-width: 100%;
        --waverse-modal-border-radius: 0;
    }
    
    .waverse-modal-container {
        padding: 0;
    }
    
    .waverse-modal {
        max-height: 100vh;
        border-radius: 0;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus visible (modern browsers) */
.waverse-modal-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
.waverse-modal-close:focus:not(:focus-visible) {
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .waverse-modal {
        border: 2px solid currentColor;
    }
    
    .waverse-modal-close {
        border: 1px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #waverse-modal-overlay,
    .waverse-modal,
    .waverse-modal-close {
        transition: none;
        animation: none;
    }
    
    .waverse-modal-spinner {
        animation: none;
        border-top-color: transparent;
        border-right-color: var(--waverse-modal-loading-spinner-color);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --waverse-modal-bg: #131313;
        --waverse-modal-close-color: #ffffff;
        --waverse-modal-close-hover-color: #ffffff;
        --waverse-modal-close-bg: rgba(255, 255, 255, 0.15);
        --waverse-modal-close-hover-bg: rgba(255, 255, 255, 0.25);
    }
}

/* ============================================
   BUTTON STYLES
   ============================================ */
.waverse-modal-button-wrapper {
    display: block;
    width: 100%;
}

.waverse-modal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    outline: none;
}

.waverse-modal-button .elementor-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon positioning */
.waverse-modal-button .elementor-button-icon.icon-right {
    order: 2;
}

.waverse-modal-button .elementor-button-text {
    flex-grow: 0;
    order: 1;
}

/* ============================================
   BUTTON HOVER ANIMATIONS
   ============================================ */

/* Grow */
.waverse-hover-grow:hover {
    transform: scale(1.1);
}

/* Shrink */
.waverse-hover-shrink:hover {
    transform: scale(0.9);
}

/* Pulse */
@keyframes waverse-pulse {
    25% { transform: scale(1.05); }
    75% { transform: scale(0.95); }
}
.waverse-hover-pulse:hover {
    animation: waverse-pulse 1s infinite;
}

/* Pulse Grow */
@keyframes waverse-pulse-grow {
    to { transform: scale(1.1); }
}
.waverse-hover-pulse-grow:hover {
    animation: waverse-pulse-grow 0.3s alternate infinite;
}

/* Pulse Shrink */
@keyframes waverse-pulse-shrink {
    to { transform: scale(0.9); }
}
.waverse-hover-pulse-shrink:hover {
    animation: waverse-pulse-shrink 0.3s alternate infinite;
}

/* Push */
.waverse-hover-push:hover {
    transform: scale(0.95);
}

/* Pop */
@keyframes waverse-pop {
    50% { transform: scale(1.2); }
}
.waverse-hover-pop:hover {
    animation: waverse-pop 0.3s;
}

/* Float */
.waverse-hover-float:hover {
    transform: translateY(-5px);
}

/* Sink */
.waverse-hover-sink:hover {
    transform: translateY(5px);
}

/* Bounce In */
@keyframes waverse-bounce-in {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% { transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    to { transform: scale3d(1, 1, 1); }
}
.waverse-hover-bounce-in:hover {
    animation: waverse-bounce-in 0.75s;
}

/* Bounce Out */
@keyframes waverse-bounce-out {
    20% { transform: scale3d(0.9, 0.9, 0.9); }
    50%, 55% { transform: scale3d(1.1, 1.1, 1.1); }
    to { transform: scale3d(0.3, 0.3, 0.3); }
}
.waverse-hover-bounce-out:hover {
    animation: waverse-bounce-out 0.75s;
}

/* Rotate */
.waverse-hover-rotate:hover {
    transform: rotate(4deg);
}

/* Grow Rotate */
.waverse-hover-grow-rotate:hover {
    transform: scale(1.1) rotate(4deg);
}

/* Float Shadow */
.waverse-hover-float-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Glow */
.waverse-hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

/* Shadow */
.waverse-hover-shadow:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Shadow Radial */
.waverse-hover-shadow-radial:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    #waverse-modal-overlay {
        display: none !important;
    }
}