/*
 * Cart Hover Animation Fix
 * Solves menu displacement and modal positioning issues
 * Author: Claude Code
 * Description: Fixes strange animation and layout shifts when hovering over cart icon
 */

/* ==========================================================================
   CRITICAL FIX: Prevent layout shift during cart hover animations
   ========================================================================== */

/* Force consistent positioning for cart holder - prevent layout shifts */
.mkdf-shopping-cart-holder {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 15px 0 0 !important;
    /* Ensure fixed dimensions to prevent menu displacement */
    min-width: 40px !important;
    height: auto !important;
}

/* Stabilize cart opener - prevent size/position changes on hover */
.mkdf-sc-opener {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #000 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    position: relative !important;
    padding: 8px !important;
    border-radius: 4px !important;
    /* CRITICAL: Remove problematic transitions that cause layout shifts */
    transition: color 0.2s ease, background-color 0.2s ease !important;
    /* Fix dimensions to prevent menu displacement */
    min-width: 40px !important;
    min-height: 32px !important;
    width: auto !important;
    height: auto !important;
    /* Prevent any transform or scale changes */
    transform: none !important;
    will-change: color, background-color !important;
}

/* Clean hover effect without layout changes */
.mkdf-sc-opener:hover {
    color: #ed1d24 !important;
    background-color: rgba(237, 29, 36, 0.1) !important;
    /* NO transform, scale, or size changes */
    transform: none !important;
}

/* Stabilize cart icon - prevent any movement */
.mkdf-sc-opener-icon {
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin-right: 5px !important;
    /* Prevent any movement or scale changes */
    transform: none !important;
    transition: none !important;
}

/* Fix count badge positioning - prevent shifts */
.mkdf-sc-opener-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    background: #ed1d24 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    /* Prevent layout interference */
    transform: none !important;
    will-change: contents !important;
}

/* ==========================================================================
   FIX DROPDOWN POSITIONING AND ANIMATION ISSUES
   ========================================================================== */

/* Remove problematic transforms and stabilize dropdown positioning */
.mkdf-sc-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    width: 320px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 99999 !important;
    margin-top: 10px !important;
    
    /* DEFAULT STATE: Hidden but stable positioning */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    
    /* CRITICAL: Use only opacity for show/hide - NO TRANSFORM */
    transform: none !important;
    
    /* Smooth transition only for opacity */
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
    
    /* Prevent any layout shifts or positioning changes */
    will-change: opacity, visibility !important;
}

/* Desktop hover behavior - STABLE positioning */
@media (min-width: 769px) {
    .mkdf-shopping-cart-holder:not(.mkdf-mobile-cart):hover .mkdf-sc-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        /* NO transform changes - keep stable positioning */
        transform: none !important;
    }
}

/* JavaScript-controlled visibility - STABLE positioning */
.mkdf-shopping-cart-holder.mkdf-cart-opened .mkdf-sc-dropdown,
.mkdf-sc-dropdown.mkdf-visible,
.mkdf-sc-dropdown.mkdf-force-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* NO transform changes - keep stable positioning */
    transform: none !important;
}

/* Mobile positioning - stable and controlled */
@media (max-width: 768px) {
    .mkdf-shopping-cart-holder.mkdf-mobile-cart .mkdf-sc-dropdown {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        z-index: 99999 !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        /* NO transforms on mobile either */
        transform: none !important;
    }
}

/* ==========================================================================
   OVERRIDE PROBLEMATIC ANIMATIONS FROM OTHER CSS FILES
   ========================================================================== */

/* Force remove ANY translateY animations that cause layout shifts */
.mkdf-sc-dropdown,
.mkdf-shopping-cart-dropdown,
.widget_shopping_cart_content {
    /* NEVER use translateY - it causes menu displacement */
    transform: none !important;
}

/* Override bounceIn animation for count updates - keep it subtle */
@keyframes stableCountUpdate {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

.mkdf-sc-opener-count.updated {
    /* Replace bouncy animation with subtle fade */
    animation: stableCountUpdate 0.3s ease !important;
    /* NO scale or transform changes */
    transform: none !important;
}

/* ==========================================================================
   ENSURE PROPER Z-INDEX WITHOUT LAYOUT INTERFERENCE
   ========================================================================== */

/* Fix z-index issues on all page types without affecting layout */
.mkdf-sc-dropdown,
.single-product .mkdf-sc-dropdown,
.woocommerce-page .mkdf-sc-dropdown,
.woocommerce-cart .mkdf-sc-dropdown,
.woocommerce-checkout .mkdf-sc-dropdown {
    z-index: 99999 !important;
    /* Ensure dropdown doesn't affect document flow */
    position: absolute !important;
}

/* ==========================================================================
   DROPDOWN CONTENT STYLING - STABLE AND CONSISTENT
   ========================================================================== */

.mkdf-sc-dropdown-inner {
    padding: 20px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
}

/* Product items styling - prevent any movement */
.mkdf-sc-product-item,
.mkdf-sc-dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    /* Prevent any transforms or animations */
    transform: none !important;
    transition: none !important;
}

.mkdf-sc-product-item:last-child,
.mkdf-sc-dropdown-item:last-child {
    border-bottom: none !important;
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Optimize rendering performance */
.mkdf-shopping-cart-holder {
    /* Use GPU acceleration only for opacity changes */
    will-change: auto !important;
}

.mkdf-sc-dropdown {
    /* Optimize for opacity transitions only */
    will-change: opacity, visibility !important;
    /* Use layer promotion for smooth opacity transitions */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* ==========================================================================
   ACCESSIBILITY AND REDUCED MOTION SUPPORT
   ========================================================================== */

/* For users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mkdf-sc-opener,
    .mkdf-sc-dropdown,
    .mkdf-sc-opener-count {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   CRITICAL: PREVENT ANY LAYOUT REFLOW ON HOVER
   ========================================================================== */

/* Ensure hover states don't change element dimensions */
.mkdf-shopping-cart-holder,
.mkdf-shopping-cart-holder:hover,
.mkdf-sc-opener,
.mkdf-sc-opener:hover {
    /* Lock dimensions to prevent menu displacement */
    box-sizing: border-box !important;
    /* Prevent any width/height changes */
    min-width: inherit !important;
    max-width: none !important;
    /* Prevent margin/padding changes */
    margin: 0 15px 0 0 !important;
    padding: 8px !important;
}

/* Force container stability */
.mkdf-shopping-cart-holder * {
    box-sizing: border-box !important;
}

/* ==========================================================================
   FINAL SAFEGUARDS AGAINST LAYOUT SHIFTS
   ========================================================================== */

/* Prevent any transform-based animations that could affect layout */
.mkdf-shopping-cart-holder,
.mkdf-shopping-cart-holder *,
.mkdf-sc-dropdown,
.mkdf-sc-dropdown * {
    /* Override any transform animations from theme */
    transform: none !important;
}

/* Exception: Only allow opacity and visibility changes for dropdown */
.mkdf-sc-dropdown {
    transform: translateZ(0) !important; /* GPU layer only */
}

/* Prevent any scale, rotate, or translate animations on cart elements */
.mkdf-sc-opener,
.mkdf-sc-opener-icon,
.mkdf-sc-opener-count {
    transform: none !important;
}