/*!
Theme Name: inkture
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: inkture
*/

/* 1. Hide the browser's native number arrows (spinners) that were not working */
.custom-qty-wrapper input[type="number"]::-webkit-inner-spin-button,
.custom-qty-wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.custom-qty-wrapper input[type="number"] {
    -moz-appearance: textfield; /* Hides arrows in Firefox */
}

/* 2. Style the main wrapper for a horizontal layout */
.custom-qty-wrapper {
    display: flex;
    align-items: stretch; /* Make all children (buttons/input) the same height */
    max-width: 140px; /* Adjust size as needed */
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden; /* Contains the border effects */
}

/* 3. Style the input field inside the wrapper */
.custom-qty-wrapper input.qty {
    flex-grow: 1; /* Input takes up the center space */
    border: none !important; /* Remove the original input border */
    box-shadow: none !important;
    text-align: center;
    padding: 0;
    min-width: 40px; /* Ensure space for the number */
    height: 40px; /* Define height */
}

/* 4. Style the custom buttons */
.custom-qty-wrapper button {
    height: 40px;
    width: 40px;
    background-color: #f9f9f9;
    color: #333;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background-color 0.2s;
    outline: none;
}

.custom-qty-wrapper button:hover {
    background-color: #eee;
}

/* 5. Add visual separation and rounding */
.custom-qty-wrapper .minus-btn {
    border-right: 1px solid #ccc;
}

.custom-qty-wrapper .plus-btn {
    border-left: 1px solid #ccc;
}