/**
 * MicroModal Base Styles
 * Global styles shared across all MicroModal implementations
 * Used by: Login Modal, Artisan Modal, Product Modal
 */

/* ============================================
   Base Modal Structure
   ============================================ */

/* Base modal display logic */
.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

/* Generic modal base (used by modals without micromodal-slide class) */
.modal {
    display: none;
}

.modal.is-open,
.modal[aria-hidden="false"] {
    display: block;
}

/* ============================================
   Modal Overlay - Full Viewport Coverage
   ============================================ */

.modal__overlay,
.login-modal__overlay,
.artisan-modal-overlay,
.product-modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000012;
    pointer-events: none;
}

/* Pseudo-element to make overlay background clickable for closing */
.modal__overlay::before,
.login-modal__overlay::before,
.artisan-modal-overlay::before,
.product-modal__overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: auto;
    z-index: -1;
}

/* Artisan modal uses slightly darker overlay with blur */
.artisan-modal-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
}

/* ============================================
   Modal Container Base
   ============================================ */
.modal__container,
.login-modal__container,
.artisan-modal-container,
.product-modal__container {
    position: relative;
    background-color: #ffffff;
    border-radius: 8px;
    /* max-width: 90%; */
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    z-index: 1;
}

/* Enhanced shadow for artisan modal */
.artisan-modal-container {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Product modal specific container adjustments */
.product-modal__container {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   MicroModal Animations
   ============================================ */

/* Fade In Animation */
@keyframes mmfadeIn {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

/* Fade Out Animation */
@keyframes mmfadeOut {
    from { 
        opacity: 1; 
    }
    to { 
        opacity: 0; 
    }
}

/* Slide In Animation */
@keyframes mmslideIn {
    from { 
        opacity: 0;
        transform: translateY(-15%); 
    }
    to { 
        opacity: 1;
        transform: translateY(0); 
    }
}

/* Slide Out Animation */
@keyframes mmslideOut {
    from { 
        opacity: 1;
        transform: translateY(0); 
    }
    to { 
        opacity: 0;
        transform: translateY(-10%); 
    }
}

/* ============================================
   Animation Triggers
   ============================================ */

/* Overlay animations */
.micromodal-slide[aria-hidden="false"] .modal__overlay,
.micromodal-slide[aria-hidden="false"] .login-modal__overlay,
.micromodal-slide[aria-hidden="false"] .artisan-modal-overlay,
.micromodal-slide[aria-hidden="false"] .product-modal__overlay {
    animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay,
.micromodal-slide[aria-hidden="true"] .login-modal__overlay,
.micromodal-slide[aria-hidden="true"] .artisan-modal-overlay,
.micromodal-slide[aria-hidden="true"] .product-modal__overlay {
    animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* Container animations */
.micromodal-slide[aria-hidden="false"] .modal__container,
.micromodal-slide[aria-hidden="false"] .login-modal__container,
.micromodal-slide[aria-hidden="false"] .artisan-modal-container,
.micromodal-slide[aria-hidden="false"] .product-modal__container {
    animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container,
.micromodal-slide[aria-hidden="true"] .login-modal__container,
.micromodal-slide[aria-hidden="true"] .artisan-modal-container,
.micromodal-slide[aria-hidden="true"] .product-modal__container {
    animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* Performance optimization */
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay,
.micromodal-slide .login-modal__container,
.micromodal-slide .login-modal__overlay,
.micromodal-slide .artisan-modal-container,
.micromodal-slide .artisan-modal-overlay,
.micromodal-slide .product-modal__container,
.micromodal-slide .product-modal__overlay {
    will-change: transform;
}

/* ============================================
   Body Scroll Prevention
   ============================================ */

/* Base: All devices prevent overflow scrolling */
body.micromodal-open {
    overflow: hidden !important;
}

/* Mobile-specific scroll lock (< 768px)
   
   Why different from desktop?
   - CANNOT use position: fixed on mobile browsers
   - Causes page to "jump" to scroll position 0 when modal opens
   - Creates jarring visual "jump" when closing and reopening
   - Mobile browsers handle position: fixed differently than desktop
   
   Solution:
   - Use position: relative + overflow: hidden instead
   - JavaScript saves/restores scroll position (see login-modal.js)
   - Prevents layout jumps while still locking scroll
*/
@media (max-width: 767px) {
    body.micromodal-open {
        position: relative;
        overflow: hidden;
    }
}

/* Desktop scroll lock (≥ 768px)
   
   Why different from mobile?
   - position: fixed works perfectly on desktop browsers
   - Completely prevents all background scrolling (mouse wheel, keyboard)
   - No layout shift issues on desktop
   - More robust scroll prevention than overflow: hidden alone
   
   Note: width and height ensure no content reflow when fixed
*/
@media (min-width: 768px) {
    body.micromodal-open {
        position: fixed;
        width: 100%;
        height: 100%;
    }
}