/* CRITICAL FIX - Force blue buttons to show on mobile */

/* Target all mobile devices with maximum specificity */
@media screen and (max-width: 768px), 
       screen and (max-device-width: 768px),
       (hover: none) and (pointer: coarse) {
    
    /* FORCE BLUE BACKGROUND AND WHITE TEXT */
    .wcc-qty-up,
    .wcc-qty-down,
    button.wcc-qty-up,
    button.wcc-qty-down,
    .wcc-quantity-option button,
    .wcc-quantity-option button[class*="qty"] {
        background: #007cba !important;
        background-color: #007cba !important;
        border: 2px solid #007cba !important;
        color: white !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 24px !important;
        font-weight: bold !important;
        border-radius: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        line-height: 1 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        touch-action: manipulation !important;
        position: relative !important;
    }
    
    /* Remove font-size: 0 to allow span content to show */
    .wcc-qty-up,
    .wcc-qty-down {
        /* font-size: 0 !important; -- Removed to allow span visibility */
    }
    
    /* Allow span content to be visible */
    .wcc-qty-up span,
    .wcc-qty-down span {
        /* Removed rules that were hiding spans */
        display: block !important;
        color: white !important;
        font-size: 24px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        text-align: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Remove all ::before pseudo-elements */
    .wcc-qty-up::before,
    .wcc-qty-down::before {
        content: none !important;
        display: none !important;
    }
    
    /* Removed ::after pseudo-elements since we're using span elements */
    /* The span elements now handle displaying the + and - symbols */
    
    /* Active/hover states */
    .wcc-qty-up:active,
    .wcc-qty-down:active,
    .wcc-qty-up:hover,
    .wcc-qty-down:hover {
        background: #005a87 !important;
        background-color: #005a87 !important;
        border-color: #005a87 !important;
        transform: scale(0.95) !important;
    }
    
    /* Quantity input styling for mobile */
    .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;
        color: #333 !important;
        text-align: center !important;
        -webkit-appearance: none !important;
        border-radius: 6px !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    
    /* Container fixes for mobile */
    .wcc-quantity-option > div[style*="background: #f8f9fa"] {
        background: #f8f9fa !important;
        padding: 12px !important;
        border-radius: 8px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Row containing buttons and input */
    .wcc-quantity-option div[style*="display: flex"][style*="gap"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    .wcc-qty-up,
    .wcc-qty-down {
        -webkit-appearance: none !important;
        background: #007cba !important;
        -webkit-background-clip: padding-box !important;
        background-clip: padding-box !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;
    }
}

/* 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;
    color: white !important;
    border: 2px solid #007cba !important;
}

/* Remove any duplicate content that might be interfering */
/* This section has been consolidated into the main media query rules above */