/**
 * MOBILE VIEWPORT OVERFLOW FIX - COMPREHENSIVE SOLUTION
 * 
 * This file fixes ALL CSS rules causing mobile viewport overflow.
 * Based on deep analysis of ALL CSS files in the plugin.
 * 
 * Target Issue: WCC containers forcing page wider than mobile viewport
 * Result: Mobile browsers zoom page to fit content, header appears narrow
 * 
 * Version: 2025-01-27 - Complete Mobile Viewport Fix
 */

/* ==================================================
   1. CRITICAL: Navigation Buttons Container Fix
   ================================================== */
@media (max-width: 768px) {
    .wcc-navigation-buttons {
        min-width: 0 !important; /* Remove 300px minimum */
        max-width: 100% !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
}

@media (max-width: 480px) {
    .wcc-navigation-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ==================================================
   2. CRITICAL: Quantity Controls Container Fix
   ================================================== */
@media (max-width: 768px) {
    .wcc-quantity-controls,
    .wcc-field-container[data-field-type="quantity_price"] > div {
        min-width: 0 !important; /* Remove 180px/200px minimum */
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Individual quantity components */
    .wcc-quantity-controls input,
    .wcc-quantity-controls button {
        max-width: 60px !important;
        min-width: 40px !important;
    }
}

@media (max-width: 375px) {
    .wcc-quantity-controls {
        max-width: 280px !important; /* Safe for iPhone SE */
    }
}

/* ==================================================
   3. CRITICAL: Mini-Cart Dropdown Fix
   ================================================== */
@media (max-width: 768px) {
    .widget_shopping_cart_content {
        min-width: 0 !important; /* Remove 280px minimum */
        max-width: calc(100vw - 40px) !important; /* Account for screen edges */
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .widget_shopping_cart_content {
        min-width: 0 !important; /* Remove 250px minimum */
        max-width: calc(100vw - 20px) !important;
        width: 95% !important;
    }
}

@media (max-width: 320px) {
    .widget_shopping_cart_content {
        min-width: 0 !important;
        max-width: 300px !important; /* Safe for very small screens */
        width: 90% !important;
    }
}

/* ==================================================
   4. Cart Options Horizontal Layout Fix
   ================================================== */
@media (max-width: 768px) {
    .woocommerce-cart dl.variation dd {
        min-width: 0 !important; /* Remove 400px minimum */
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .wcc-cart-option-box {
        min-width: 0 !important; /* Remove 110px minimum */
        max-width: 100% !important;
        width: auto !important;
        flex: 1 1 auto !important;
    }
}

/* ==================================================
   5. Image Options Container Fix
   ================================================== */
@media (max-width: 768px) {
    .wcc-image-option:only-child,
    .wcc-image-options-container.wcc-single-option .wcc-image-option,
    .wcc-customization-container .wcc-image-option {
        max-width: 100% !important; /* Remove 600px limit */
        width: 100% !important;
    }
    
    .wcc-image-options-container,
    .wcc-image-options {
        max-width: 100% !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }
}

/* ==================================================
   6. Popup Container Mobile Override
   ================================================== */
@media (max-width: 768px) {
    .wcc-popup-fields-column,
    .wcc-popup-canvas-column {
        min-width: 0 !important; /* Remove 400px/350px minimum */
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    #wcc-popup {
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: 20px !important;
        margin: 0 !important;
    }
}

/* ==================================================
   7. Template Container Mobile Fix
   ================================================== */
@media (max-width: 768px) {
    .template-container,
    .field-container {
        max-width: 100% !important; /* Remove 600px limit */
        width: 100% !important;
    }
}

/* ==================================================
   8. Table Layout Mobile Fix
   ================================================== */
@media (max-width: 768px) {
    .wcc-option-price-item,
    .wcc-popup-table table,
    .wcc-popup-table tr,
    .wcc-popup-table td {
        table-layout: auto !important; /* Remove fixed layout */
        width: 100% !important;
        max-width: 100% !important;
        display: block !important; /* Convert to block layout */
    }
    
    .wcc-option-price-item:nth-child(odd),
    .wcc-option-price-item:nth-child(even) {
        width: 100% !important; /* Remove 50% width */
        float: none !important;
        display: block !important;
    }
}

/* ==================================================
   9. Step Content Container Fix
   ================================================== */
@media (max-width: 768px) {
    .wcc-steps-content,
    .wcc-step-content,
    .wcc-customization-container,
    .wcc-steps-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
    }
}

/* ==================================================
   10. Quantity Field Title Fix (160px fixed width issue)
   ================================================== */
@media (max-width: 768px) {
    .wcc-quantity-option > div:first-child > div {
        flex: 1 1 auto !important; /* Remove flex: 0 0 160px */
        width: auto !important;
        max-width: 60% !important; /* Prevent text from taking full width */
        min-width: 0 !important;
    }
}

/* ==================================================
   11. Safe Container Constraints
   ================================================== */
@media (max-width: 768px) {
    /* Ensure ALL WCC containers respect viewport */
    [class*="wcc-"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent any container from forcing horizontal scroll */
    .wcc-customization-container *,
    .wcc-step-content *,
    .wcc-steps-wrapper * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   12. Viewport Meta Tag Backup (JavaScript will handle this)
   ================================================== */
/* This CSS provides backup styling if viewport meta tag fails */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* ==================================================
   13. Emergency Overflow Prevention
   ================================================== */
@media (max-width: 480px) {
    /* Nuclear option: prevent ANY element from exceeding viewport */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Exception: Allow specific small elements their natural width */
    input[type="radio"],
    input[type="checkbox"],
    .wcc-loader,
    .wcc-spinner {
        max-width: initial !important;
    }
}