/**
 * Fix for invisible quantity control buttons on mobile
 * This file must be loaded AFTER quantity-mobile-unified.css
 * to properly override the gray button styles
 */

/* Target all mobile devices */
@media screen and (max-width: 768px), 
       screen and (max-device-width: 768px),
       (hover: none) and (pointer: coarse) {
    
    /* Force proper button visibility for custom quantity controls */
    .wcc-qty-up,
    .wcc-qty-down,
    button.wcc-qty-up,
    button.wcc-qty-down,
    .wcc-quantity-option button.wcc-qty-up,
    .wcc-quantity-option button.wcc-qty-down {
        /* Override the gray background from quantity-mobile-unified.css */
        background: #007cba !important;
        background-color: #007cba !important;
        border: 2px solid #007cba !important;
        color: white !important;
        
        /* Ensure visibility */
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        
        /* Proper sizing */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        
        /* Center content */
        align-items: center !important;
        justify-content: center !important;
        
        /* Button styling */
        font-size: 24px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        text-align: center !important;
        border-radius: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        
        /* Visual enhancements */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        cursor: pointer !important;
        
        /* Remove any appearance overrides */
        -webkit-appearance: none !important;
        appearance: none !important;
        
        /* Touch optimization */
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        touch-action: manipulation !important;
    }
    
    /* Clear any pseudo-elements since we're using span elements */
    .wcc-qty-up::before,
    .wcc-qty-down::before,
    .wcc-qty-up::after,
    .wcc-qty-down::after {
        content: none !important;
    }
    
    /* If buttons contain span elements */
    .wcc-qty-up span,
    .wcc-qty-down span {
        color: white !important;
        font-size: 24px !important;
        font-weight: bold !important;
        display: block !important;
        line-height: 1 !important;
    }
    
    /* Active/hover states */
    .wcc-qty-up:hover,
    .wcc-qty-down:hover,
    .wcc-qty-up:active,
    .wcc-qty-down:active {
        background: #005a87 !important;
        background-color: #005a87 !important;
        border-color: #005a87 !important;
        color: white !important;
        transform: scale(0.95) !important;
    }
    
    /* Ensure input field is visible too */
    .wcc-quantity-input,
    input.wcc-quantity-input,
    input[type="number"].wcc-quantity-input {
        width: 65px !important;
        height: 44px !important;
        font-size: 18px !important;
        border: 2px solid #ddd !important;
        background: white !important;
        background-color: white !important;
        color: #333 !important;
        text-align: center !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        border-radius: 6px !important;
        padding: 5px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Extra specificity for stubborn cases */
body .wcc-customization-container .wcc-quantity-option button.wcc-qty-up,
body .wcc-customization-container .wcc-quantity-option button.wcc-qty-down {
    background: #007cba !important;
    background-color: #007cba !important;
    color: white !important;
    border: 2px solid #007cba !important;
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    .wcc-qty-up,
    .wcc-qty-down {
        -webkit-appearance: none !important;
        background: #007cba !important;
        background-color: #007cba !important;
        color: white !important;
    }
}

/* Android specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .wcc-qty-up,
    .wcc-qty-down {
        background: #007cba !important;
        background-color: #007cba !important;
        color: white !important;
    }
}

/* Override any WooCommerce default button styles on mobile */
@media (max-width: 768px) {
    .woocommerce .quantity .wcc-qty-up,
    .woocommerce .quantity .wcc-qty-down,
    .woocommerce-page .quantity .wcc-qty-up,
    .woocommerce-page .quantity .wcc-qty-down {
        background: #007cba !important;
        background-color: #007cba !important;
        color: white !important;
    }
}