/**
 * YUVANA Product Manager - Elementor Specific Styles
 * 
 * Custom CSS สำหรับการใช้งานกับ Elementor
 * โหลดเฉพาะเมื่อ Elementor active และอยู่ในหน้า Product page
 * 
 * @package YUVANA_Product_Manager
 * @since 1.0.0
 */

/* ==========================================================================
   Elementor Product Page Adjustments
   ========================================================================== */

/* ปรับ countdown ให้เข้ากับ Elementor layout */
.elementor-widget-woocommerce-product-add-to-cart .yuvana-countdown-container {
    margin-bottom: 30px;
}

/* ปรับ waitlist form ให้เข้ากับ Elementor */
.elementor-widget-woocommerce-product-add-to-cart .yuvana-waitlist-container {
    margin-top: 20px;
}

/* ==========================================================================
   Elementor Loop Grid Items (Product Hover)
   ========================================================================== */

/* Product hover effects in Elementor loop */
.elementor-loop-item {
    position: relative;
    overflow: hidden;
}

.elementor-loop-item .product-hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.elementor-loop-item:hover .product-hover-image {
    opacity: 1;
}

.elementor-loop-item .product-hover-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Overlay effect */
.elementor-loop-item .product-hover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 3;
}

.elementor-loop-item:hover .product-hover-overlay {
    opacity: 1;
    transform: translateY(0);
}

.elementor-loop-item .product-hover-content {
    color: white;
}

.elementor-loop-item .hover-product-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: white;
}

.elementor-loop-item .hover-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #75C7B7;
}

/* ==========================================================================
   Elementor Single Product Template
   ========================================================================== */

/* เมื่อใช้ Elementor สร้าง Single Product Template */
.elementor-location-single .yuvana-product-state-badge {
    margin-bottom: 15px;
}

.elementor-location-single .yuvana-countdown-container {
    margin: 30px 0;
}

.elementor-location-single .yuvana-waitlist-container {
    margin: 30px 0;
}

/* ปรับ spacing กับ Elementor widgets */
.elementor-widget-woocommerce-product-title + .yuvana-product-state-badge {
    margin-top: -10px;
}

/* ==========================================================================
   Elementor Archive/Loop Templates
   ========================================================================== */

/* Archive template adjustments */
.elementor-location-archive .yuvana-product-state-badge {
    font-size: 12px;
    padding: 4px 10px;
}

/* Loop template adjustments */
.elementor-loop-container .yuvana-product-state-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

/* ==========================================================================
   Elementor Editor Mode
   ========================================================================== */

/* แสดง placeholder ใน Elementor Editor */
.elementor-editor-active .yuvana-countdown-container {
    opacity: 0.8;
    pointer-events: none;
}

.elementor-editor-active .yuvana-waitlist-container {
    opacity: 0.8;
    pointer-events: none;
}

/* ==========================================================================
   Responsive Design for Elementor
   ========================================================================== */

/* Mobile adjustments */
@media (max-width: 767px) {
    .elementor-loop-item .product-hover-overlay {
        padding: 15px;
    }
    
    .elementor-loop-item .hover-product-title {
        font-size: 16px;
    }
    
    .elementor-loop-item .hover-product-price {
        font-size: 14px;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-loop-item .product-hover-overlay {
        padding: 18px;
    }
}

/* ==========================================================================
   Elementor Pro Features
   ========================================================================== */

/* Theme Builder compatibility */
.elementor-theme-builder .yuvana-countdown-container,
.elementor-theme-builder .yuvana-waitlist-container {
    width: 100%;
    max-width: 100%;
}

/* Popup compatibility */
.elementor-popup-modal .yuvana-waitlist-form {
    padding: 0;
}

.elementor-popup-modal .yuvana-countdown-container {
    border: none;
    background: transparent;
}

/* ==========================================================================
   Container Widget Compatibility (Elementor Flexbox)
   ========================================================================== */

.e-con .yuvana-countdown-container,
.e-con-inner .yuvana-countdown-container {
    width: 100%;
}

.e-con .yuvana-waitlist-container,
.e-con-inner .yuvana-waitlist-container {
    width: 100%;
}

/* ==========================================================================
   Fix z-index issues with Elementor
   ========================================================================== */

/* Prevent countdown from overlapping Elementor controls */
.elementor-editor-active .yuvana-countdown-container {
    z-index: 1;
}

/* Ensure proper stacking in Elementor sections */
.elementor-section .yuvana-product-state-badge {
    position: relative;
    z-index: 1;
}