/**
 * Updated Frontend CSS - Fixed Orbital Animations
 * 
 * Location: /wp-content/plugins/natural-powders-export/assets/css/frontend.css
 */

/* FORCE SECTION STYLES */
body .elementor-widget-npe_product_slider .product-section,
body .product-section {
    padding: 60px 0 !important;
    position: relative !important;
    background: white !important;
    overflow: hidden !important;
}

body .elementor-widget-npe_product_slider .container,
body .product-section .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* FORCE HEADER STYLES */
body .elementor-widget-npe_product_slider .section-header,
body .product-section .section-header {
    text-align: center !important;
    margin-bottom: 50px !important;
}

body .elementor-widget-npe_product_slider .section-title,
body .product-section .section-title {
    font-size: 3rem !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #2c3e50 !important;
}

body .elementor-widget-npe_product_slider .section-subtitle,
body .product-section .section-subtitle {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #7f8c8d !important;
}

/* FORCE SLIDER CONTAINER */
body .elementor-widget-npe_product_slider .slider-container,
body .product-section .slider-container {
    position: relative !important;
    overflow: hidden !important;
    height: 480px !important;
}

body .elementor-widget-npe_product_slider .slider-track,
body .product-section .slider-track {
    display: flex !important;
    gap: 25px !important;
    height: 100% !important;
    will-change: transform !important;
    transition: transform 0.8s ease !important;
}

/* FORCE PRODUCT CARD LAYOUT */
body .elementor-widget-npe_product_slider .product-card,
body .product-section .product-card {
    flex: 0 0 250px !important;
    height: 440px !important;
    background: #F3EDEA !important;
    border-radius: 15px !important;
    padding: 25px 20px 20px !important;
    text-align: center !important;
    position: relative !important;
    border: 1px solid #e8ddd4 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

body .elementor-widget-npe_product_slider .product-card:hover,
body .product-section .product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}

/* FORCE IMAGE CONTAINER - FIXED STRUCTURE */
body .elementor-widget-npe_product_slider .product-image-container,
body .product-section .product-image-container {
    position: relative !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 20px !important;
    flex-shrink: 0 !important;
}

/* FIXED: Product Image Mask */
body .elementor-widget-npe_product_slider .product-image-mask,
body .product-section .product-image-mask {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 3px solid #ddd !important;
}

body .elementor-widget-npe_product_slider .product-image,
body .product-section .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
    border-radius: 50% !important;
}

/* FIXED: Global Pulse Animation */
body .elementor-widget-npe_product_slider .global-pulse,
body .product-section .global-pulse {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 180px !important;
    height: 180px !important;
    border: 2px solid rgba(255, 145, 0, 0.15) !important;
    border-radius: 50% !important;
    z-index: 0 !important;
    animation: npe-pulse-expand 3s ease-in-out infinite !important;
    transform-origin: center !important;
}

/* FIXED: Orbital Rings */
body .elementor-widget-npe_product_slider .orbit-ring,
body .product-section .orbit-ring {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    border: 2px solid rgba(255, 145, 0, 0.4) !important;
    border-radius: 50% !important;
    z-index: 2 !important;
    transform-origin: center !important;
}

body .elementor-widget-npe_product_slider .orbit-ring-1,
body .product-section .orbit-ring-1 {
    width: 140px !important;
    height: 140px !important;
    margin-left: -70px !important;
    margin-top: -70px !important;
    animation: npe-rotate-clockwise 15s linear infinite !important;
}

body .elementor-widget-npe_product_slider .orbit-ring-2,
body .product-section .orbit-ring-2 {
    width: 160px !important;
    height: 160px !important;
    margin-left: -80px !important;
    margin-top: -80px !important;
    border-color: rgba(255, 145, 0, 0.25) !important;
    animation: npe-rotate-counter-clockwise 20s linear infinite !important;
}

/* FIXED: Export Dots */
body .elementor-widget-npe_product_slider .export-dot,
body .product-section .export-dot {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: #FF9100 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(255, 145, 0, 0.6) !important;
    z-index: 5 !important;
}

/* Dot positions relative to their orbit rings */
body .elementor-widget-npe_product_slider .dot-1,
body .product-section .dot-1 { 
    top: -4px !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
}

body .elementor-widget-npe_product_slider .dot-2,
body .product-section .dot-2 { 
    top: 50% !important; 
    right: -4px !important; 
    transform: translateY(-50%) !important; 
}

body .elementor-widget-npe_product_slider .dot-3,
body .product-section .dot-3 { 
    bottom: -4px !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
}

body .elementor-widget-npe_product_slider .dot-4,
body .product-section .dot-4 { 
    top: 50% !important; 
    left: -4px !important; 
    transform: translateY(-50%) !important; 
}

/* FIXED: Keyframe Animations */
@keyframes npe-rotate-clockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes npe-rotate-counter-clockwise {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes npe-pulse-expand {
    0% { 
        transform: translate(-50%, -50%) scale(0.8); 
        opacity: 0.3; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2); 
        opacity: 0.1; 
    }
    100% { 
        transform: translate(-50%, -50%) scale(0.8); 
        opacity: 0.3; 
    }
}

@keyframes npe-float-particle {
    0% { 
        transform: translateY(0px) translateX(0px); 
        opacity: 0.2; 
    }
    50% { 
        transform: translateY(-40px) translateX(15px); 
        opacity: 0.6; 
    }
    100% { 
        transform: translateY(0px) translateX(0px); 
        opacity: 0.2; 
    }
}

/* FORCE PRODUCT CONTENT SPACING */
body .elementor-widget-npe_product_slider .product-content,
body .product-section .product-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 60px !important;
    padding: 10px 0 !important;
}

body .elementor-widget-npe_product_slider .product-name,
body .product-section .product-name {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    color: #2c3e50 !important;
}

body .elementor-widget-npe_product_slider .product-type,
body .product-section .product-type {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
    color: #7f8c8d !important;
    font-weight: 500 !important;
}

/* FORCE BUTTON CONTAINER - MOST IMPORTANT */
body .elementor-widget-npe_product_slider .product-buttons,
body .product-section .product-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    padding-top: 15px !important;
    min-height: 100px !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
}

/* FORCE VIEW DETAILS BUTTON */
body .elementor-widget-npe_product_slider .view-details-btn,
body .product-section .view-details-btn {
    background: transparent !important;
    border: 2px solid #FF9100 !important;
    color: #FF9100 !important;
    padding: 12px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 45px !important;
    line-height: 1.2 !important;
    position: relative !important;
    z-index: 10 !important;
}

body .elementor-widget-npe_product_slider .view-details-btn:hover,
body .product-section .view-details-btn:hover {
    background: #FF9100 !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 145, 0, 0.3) !important;
}

/* FORCE QUOTE BUTTON */
body .elementor-widget-npe_product_slider .quote-btn,
body .product-section .quote-btn {
    background: #FF9100 !important;
    border: 2px solid #FF9100 !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(255, 145, 0, 0.3) !important;
    text-decoration: none !important;
    display: block !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 45px !important;
    line-height: 1.2 !important;
    position: relative !important;
    z-index: 10 !important;
}

body .elementor-widget-npe_product_slider .quote-btn:hover,
body .product-section .quote-btn:hover {
    background: #e8820e !important;
    border-color: #e8820e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 145, 0, 0.4) !important;
    text-decoration: none !important;
    color: white !important;
}

/* FORCE NAVIGATION */
body .elementor-widget-npe_product_slider .slider-nav,
body .product-section .slider-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 30px !important;
}

body .elementor-widget-npe_product_slider .nav-dot,
body .product-section .nav-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #bdc3c7 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body .elementor-widget-npe_product_slider .nav-dot.active,
body .product-section .nav-dot.active {
    background: #FF9100 !important;
    transform: scale(1.2) !important;
}

/* FLOATING PARTICLES */
body .elementor-widget-npe_product_slider .floating-particles,
body .product-section .floating-particles {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body .elementor-widget-npe_product_slider .floating-particle,
body .product-section .floating-particle {
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    background: rgba(255, 145, 0, 0.5) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    animation: npe-float-particle 8s ease-in-out infinite !important;
}

/* HOVER EFFECTS */
body .elementor-widget-npe_product_slider .product-card:hover .product-image,
body .product-section .product-card:hover .product-image {
    transform: scale(1.1) !important;
}

body .elementor-widget-npe_product_slider .product-card:hover .orbit-ring-1,
body .product-section .product-card:hover .orbit-ring-1 {
    animation-duration: 10s !important;
}

body .elementor-widget-npe_product_slider .product-card:hover .orbit-ring-2,
body .product-section .product-card:hover .orbit-ring-2 {
    animation-duration: 12s !important;
}

/* CLONED SLIDES FOR INFINITE EFFECT */
body .elementor-widget-npe_product_slider .product-card.clone,
body .product-section .product-card.clone {
    opacity: 1 !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    body .elementor-widget-npe_product_slider .product-card,
    body .product-section .product-card {
        flex: 0 0 200px !important;
        height: 400px !important;
        padding: 20px 15px 15px !important;
    }
    
    body .elementor-widget-npe_product_slider .product-image-container,
    body .product-section .product-image-container {
        width: 100px !important;
        height: 100px !important;
    }
    
    body .elementor-widget-npe_product_slider .orbit-ring-1,
    body .product-section .orbit-ring-1 {
        width: 120px !important;
        height: 120px !important;
        margin-left: -60px !important;
        margin-top: -60px !important;
    }
    
    body .elementor-widget-npe_product_slider .orbit-ring-2,
    body .product-section .orbit-ring-2 {
        width: 140px !important;
        height: 140px !important;
        margin-left: -70px !important;
        margin-top: -70px !important;
    }
    
    body .elementor-widget-npe_product_slider .global-pulse,
    body .product-section .global-pulse {
        width: 150px !important;
        height: 150px !important;
    }
    
    body .elementor-widget-npe_product_slider .product-buttons,
    body .product-section .product-buttons {
        gap: 10px !important;
        min-height: 85px !important;
    }
    
    body .elementor-widget-npe_product_slider .view-details-btn,
    body .elementor-widget-npe_product_slider .quote-btn,
    body .product-section .view-details-btn,
    body .product-section .quote-btn {
        padding: 10px 16px !important;
        font-size: 0.8rem !important;
        min-height: 40px !important;
    }
}

/* WEBKIT BROWSER SUPPORT */
@-webkit-keyframes npe-rotate-clockwise {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes npe-rotate-counter-clockwise {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0deg); }
}

/* ENSURE ANIMATIONS ARE ENABLED */
body .elementor-widget-npe_product_slider *,
body .product-section * {
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
}

/* FORCE ANIMATION SPECIFICITY */
body .elementor-widget-npe_product_slider .orbit-ring-1,
body .product-section .orbit-ring-1 {
    -webkit-animation: npe-rotate-clockwise 15s linear infinite !important;
    -moz-animation: npe-rotate-clockwise 15s linear infinite !important;
    animation: npe-rotate-clockwise 15s linear infinite !important;
}

body .elementor-widget-npe_product_slider .orbit-ring-2,
body .product-section .orbit-ring-2 {
    -webkit-animation: npe-rotate-counter-clockwise 20s linear infinite !important;
    -moz-animation: npe-rotate-counter-clockwise 20s linear infinite !important;
    animation: npe-rotate-counter-clockwise 20s linear infinite !important;
}

body .elementor-widget-npe_product_slider .global-pulse,
body .product-section .global-pulse {
    -webkit-animation: npe-pulse-expand 3s ease-in-out infinite !important;
    -moz-animation: npe-pulse-expand 3s ease-in-out infinite !important;
    animation: npe-pulse-expand 3s ease-in-out infinite !important;
}