/* ==========================================================================
   GLOBAL NUMBER INPUT SPINNER REMOVAL - HIGHEST PRIORITY
   This file removes spinner buttons from number inputs across all browsers
   ========================================================================== */

/* Hide number input spinners (up/down arrows) for all number inputs */
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    right: -50px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Internet Explorer/Edge Legacy */
input[type="number"]::-ms-clear,
input[type="number"]::-ms-reveal {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Ultra-high specificity targeting for weight input fields */
html body #dynamic-product-container input[type="number"],
html body .product-card-wrapper input[type="number"],
html body input[id*="weight-"][type="number"],
html body input[style*="width: 80px"][type="number"],
html body input[style*="width: 100px"][type="number"],
html body div[style*="display: flex"] input[type="number"] {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

html body #dynamic-product-container input[type="number"]::-webkit-outer-spin-button,
html body #dynamic-product-container input[type="number"]::-webkit-inner-spin-button,
html body .product-card-wrapper input[type="number"]::-webkit-outer-spin-button,
html body .product-card-wrapper input[type="number"]::-webkit-inner-spin-button,
html body input[id*="weight-"][type="number"]::-webkit-outer-spin-button,
html body input[id*="weight-"][type="number"]::-webkit-inner-spin-button,
html body input[style*="width: 80px"][type="number"]::-webkit-outer-spin-button,
html body input[style*="width: 80px"][type="number"]::-webkit-inner-spin-button,
html body input[style*="width: 100px"][type="number"]::-webkit-outer-spin-button,
html body input[style*="width: 100px"][type="number"]::-webkit-inner-spin-button,
html body div[style*="display: flex"] input[type="number"]::-webkit-outer-spin-button,
html body div[style*="display: flex"] input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    right: -50px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -999 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Additional browser-specific overrides */
@supports (-webkit-appearance: none) {
    input[type="number"] {
        -webkit-appearance: none !important;
    }
    
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        display: none !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        right: -100px !important;
        top: -100px !important;
        width: 0 !important;
        height: 0 !important;
    }
}

@supports (-moz-appearance: textfield) {
    input[type="number"] {
        -moz-appearance: textfield !important;
    }
}

/* Force remove spinners on focus */
input[type="number"]:focus::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Media queries for different screen sizes */
@media screen and (min-width: 1px) {
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        display: none !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    input[type="number"] {
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }
}