/* VVSOutlet B2C - AGGRESSIVE Mobile Fixes */
/* CRITICAL: Remove ALL margins, fix cart, fix modals */

/* ========================================
   NUCLEAR MOBILE LAYOUT RESET - FORCE EVERYTHING
========================================= */

/* KILL SPECIFIC PROBLEMATIC OVERLAYS ONLY */
@media (max-width: 767px) {
    /* Only remove problematic pseudo-elements that cause white margins */
    .vvsoutlet-add-to-cart::before,
    .vvsoutlet-add-to-cart::after,
    .vvsoutlet-logistics-section-desktop::before,
    .vvsoutlet-logistics-section-desktop::after,
    .vvsoutlet-price-wrapper-desktop::before,
    .vvsoutlet-price-wrapper-desktop::after {
        display: none !important;
        content: none !important;
        background: none !important;
    }
    
    /* Kill the chat widget overlay gradient specifically */
    .vvsoutlet-add-to-cart::before {
        display: none !important;
        content: none !important;
        background: none !important;
        width: 0 !important;
    }
}

/* KILL ALL WHITE MARGINS - AGGRESSIVE APPROACH */
@media (max-width: 767px) {
    /* Global resets - nuke everything */
    * {
        box-sizing: border-box !important;
    }
    
    html, body {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Kill any container that could cause white margins */
    .container,
    .container-fluid,
    .wrapper,
    .main-wrapper,
    .site-main,
    .content-area,
    .vvsoutlet-product-page,
    .vvsoutlet-product-container,
    .vvsoutlet-product-grid {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }
    
    /* Force full width on grid */
    .vvsoutlet-product-grid {
        display: block !important;
        padding: 5px !important;
    }
}

/* ========================================
   FORCE CONTENT BOXES - NO WHITE MARGINS
========================================= */

/* All content sections must be full width */
@media (max-width: 767px) {
    .vvsoutlet-product-images,
    .vvsoutlet-product-info,
    .vvsoutlet-title-meta-frame-desktop,
    .vvsoutlet-product-tags-frame-desktop,
    .vvsoutlet-price-wrapper-desktop,
    .vvsoutlet-add-to-cart,
    .vvsoutlet-product-actions,
    .vvsoutlet-stock-section {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }
}

/* ========================================
   CRITICAL CART FIX - SEPARATE QUANTITY FROM BUTTON
========================================= */

/* FIRST - KILL THE INTEGRATED MOBILE CART DESIGN FROM product-page.css */
@media (max-width: 768px) {
    /* DESTROY the integrated cart design that puts quantity inside button */
    .vvsoutlet-add-to-cart form.cart,
    .vvsoutlet-cart-mobile form.cart,
    form.vvsoutlet-add-to-cart-form {
        /* Override the green background integrated design */
        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
        padding: 15px !important;
        height: auto !important;
        min-height: 200px !important; /* Ensure form has enough height */
        gap: 15px !important;
        flex-direction: column !important;
        display: flex !important; /* Ensure form uses flexbox */
    }
    
    /* DESTROY the quantity being part of button */
    .vvsoutlet-add-to-cart .quantity {
        background: white !important;
        border: 2px solid #ddd !important;
        border-radius: 6px !important;
        padding: 8px !important;
        position: relative !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Remove the divider */
    .vvsoutlet-add-to-cart .quantity::after {
        display: none !important;
        content: none !important;
    }
    
    /* Fix quantity input to be normal */
    .vvsoutlet-add-to-cart .quantity input {
        width: 80px !important;
        height: 44px !important;
        background: white !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        text-align: center !important;
        font-weight: normal !important;
        font-size: 16px !important;
        border-radius: 4px !important;
    }
    
    /* Fix the button to be separate and normal */
    .vvsoutlet-add-to-cart .single_add_to_cart_button {
        flex: none !important;
        width: 100% !important;
        height: 56px !important;
        background: #27ae60 !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        margin: 0 !important;
        padding: 0 20px !important;
        font-size: 16px !important;
        color: white !important;
        display: block !important;
        text-align: center !important;
        line-height: 56px !important;
    }
}

/* NUCLEAR CART FIX - Force proper layout */
@media (max-width: 767px) {
    /* Disable ONLY the sticky footer, not the cart section */
    .vvsoutlet-mobile-sticky-footer {
        /* Removed - let the template handle this */
    }
    
    body.single-vvsoutlet-product {
        padding-bottom: 0 !important;
    }
    
    /* Force proper add-to-cart layout */
    .vvsoutlet-add-to-cart {
        background: white !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        padding: 20px !important;
        margin: 10px 0 !important;
        display: block !important;
        position: static !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force form to be vertical layout */
    .vvsoutlet-add-to-cart form.cart {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    /* Quantity section - completely separate */
    .vvsoutlet-add-to-cart .quantity {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }
    
    .vvsoutlet-add-to-cart .quantity label {
        display: block !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
        color: #333 !important;
        text-align: center !important;
    }
    
    .vvsoutlet-add-to-cart .quantity input {
        width: 80px !important;
        height: 50px !important;
        text-align: center !important;
        font-size: 18px !important;
        border: 2px solid #ddd !important;
        border-radius: 6px !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Add-to-cart button - completely separate - FOR BOTH TEMPLATES */
    .vvsoutlet-add-to-cart .single_add_to_cart_button,
    .vvsoutlet-cart-mobile .vvsoutlet-add-btn,
    .vvsoutlet-add-to-cart-form .vvsoutlet-add-btn,
    .vvsoutlet-add-to-cart-form button[type="submit"],
    form.cart.vvsoutlet-add-to-cart-form button {
        width: 100% !important;
        height: 60px !important;
        background: linear-gradient(135deg, #28a745, #20c997) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 15px 0 !important;
        padding: 0 20px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 6px rgba(40, 167, 69, 0.2) !important;
        position: relative !important;
        z-index: 999 !important;
        /* Force remove any input styling */
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    .vvsoutlet-add-to-cart .single_add_to_cart_button:hover {
        background: #219a52 !important;
    }
}

/* ========================================
   MODAL CLOSE FIX
========================================= */

/* Fix modal close buttons - target specific VVSOutlet modal classes */
@media (max-width: 767px) {
    /* VVSOutlet modal close button */
    .vvsoutlet-modal-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
        background: #ef4444 !important;
        color: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 28px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        border: 2px solid white !important;
        text-decoration: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        outline: none !important;
    }
    
    .vvsoutlet-modal-close:hover {
        background: #dc2626 !important;
        transform: scale(1.1) !important;
    }
    
    /* Ensure the close button text is visible */
    .vvsoutlet-modal-close::before,
    .vvsoutlet-modal-close::after {
        display: none !important;
    }
    
    /* Modal overlay clickable area */
    .vvsoutlet-modal {
        cursor: pointer !important;
    }
    
    .vvsoutlet-modal-content {
        cursor: auto !important;
        position: relative !important;
        max-width: 90% !important;
        max-height: 90% !important;
        overflow-y: auto !important;
    }
    
    /* Make sure modal header is properly positioned */
    .vvsoutlet-modal-header {
        position: relative !important;
        padding-right: 50px !important;
    }
}

/* ========================================
   SIMPLE PRICING BOX
========================================= */

@media (max-width: 767px) {
    .vvsoutlet-price-wrapper-desktop {
        background: white !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin: 0 0 10px 0 !important;
    }
    
    .vvsoutlet-price-grid-desktop {
        display: block !important;
        gap: 8px !important;
    }
    
    .vvsoutlet-price-column-desktop {
        display: block !important;
        margin-bottom: 8px !important;
        padding: 10px !important;
        background: #f8f9fa !important;
        border-radius: 6px !important;
        text-align: center !important;
    }
    
    .vvsoutlet-column-divider-desktop {
        display: none !important;
    }
}

/* DUPLICATE REMOVED - Using stronger overrides above */

/* ========================================
   FINAL CONTENT SECTIONS
========================================= */

@media (max-width: 767px) {
    /* Product images - stronger overrides */
    .vvsoutlet-product-main-image {
        max-height: 40vh !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    
    .vvsoutlet-product-gallery {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .vvsoutlet-gallery-thumb {
        width: 70px !important;
        height: 70px !important;
        flex-shrink: 0 !important;
    }
    
    /* All content boxes - consistent styling */
    .vvsoutlet-title-meta-frame-desktop,
    .vvsoutlet-product-tags-frame-desktop,
    .vvsoutlet-stock-section,
    .vvsoutlet-product-actions {
        background: white !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin: 0 0 10px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Product title */
    .vvsoutlet-product-title {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        color: #333 !important;
    }
    
    /* Product actions - stack vertically */
    .vvsoutlet-product-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .vvsoutlet-action-button {
        width: 100% !important;
        height: 50px !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #ddd !important;
        background: white !important;
        color: #333 !important;
        cursor: pointer !important;
    }
    
    .vvsoutlet-action-button:hover {
        background: #f0f0f0 !important;
    }
    
    /* Stock section - center everything */
    .vvsoutlet-stock-section {
        text-align: center !important;
    }
    
    .vvsoutlet-stock-status {
        justify-content: center !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }
    
    .vvsoutlet-stock-quantity {
        font-size: 24px !important;
        font-weight: bold !important;
        color: #27ae60 !important;
    }
    
    /* Breadcrumbs */
    .vvsoutlet-breadcrumbs {
        padding: 10px !important;
        margin: 0 !important;
        background: white !important;
        border-bottom: 1px solid #e0e0e0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .vvsoutlet-breadcrumbs ul {
        font-size: 12px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ========================================
   LOGISTICS/SHIPPING BOX FIX
========================================= */

@media (max-width: 767px) {
    /* Main logistics section container */
    .vvsoutlet-logistics-section-desktop {
        margin: 10px 0 !important;
        border-radius: 8px !important;
        background: white !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    /* Content wrapper - make it stack vertically */
    .vvsoutlet-logistics-content-desktop {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        gap: 12px !important;
        align-items: stretch !important;
        justify-content: center !important;
    }
    
    /* Shipping info text */
    .vvsoutlet-shipping-info-desktop {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
        color: #555 !important;
    }
    
    .vvsoutlet-shipping-info-desktop svg {
        width: 18px !important;
        height: 18px !important;
        color: #28a745 !important;
    }
    
    /* Actions container - stack vertically on mobile */
    .vvsoutlet-logistics-actions-desktop {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    /* Individual buttons - full width on mobile */
    .vvsoutlet-click-collect-btn-desktop,
    .vvsoutlet-shipping-info-btn-desktop {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        justify-content: center !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
        border: 1px solid #ddd !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: normal !important;
        text-align: center !important;
    }
    
    .vvsoutlet-click-collect-btn-desktop:hover,
    .vvsoutlet-shipping-info-btn-desktop:hover {
        background: #e8f5e9 !important;
        border-color: #28a745 !important;
        transform: none !important;
    }
    
    /* Icons in buttons */
    .vvsoutlet-click-collect-btn-desktop svg,
    .vvsoutlet-shipping-info-btn-desktop svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }
    
    /* Dropdown arrow */
    .vvsoutlet-dropdown-arrow {
        width: 14px !important;
        height: 14px !important;
        margin-left: auto !important;
    }
}