/* Global Quantity Input Component Styles */
.quantity-input {
    max-width: 125px;
}

.quantity-input button,
.quantity-input .btn {
    border-radius: 100% !important;
    background-color: white !important;
    border: none !important;
    font-weight: 800;
    -webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.26);
    box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.26) !important;
    color: gray !important;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.quantity-input button:hover:not(:disabled),
.quantity-input .btn:hover:not(:disabled) {
    background-color: #27aa88 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0px 2px 25px 0px rgba(39, 170, 136, 0.4) !important;
    border-color: #27aa88 !important;
}

.quantity-input button:disabled,
.quantity-input .btn:disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) !important;
}

.quantity-input input {
    border: none !important;
    width: 70px;
    text-align: center;
    font-weight: 600;
    background: transparent !important;
}

.quantity-input input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Override Bootstrap input-group styling */
.quantity-input.input-group {
    background: transparent;
    border: none;
}

.quantity-input .input-group-prepend,
.quantity-input .input-group-append {
    background: transparent;
}

.quantity-input .input-group-prepend .btn,
.quantity-input .input-group-append .btn {
    border-radius: 100% !important;
    margin: 0 5px;
}

/* Specific button classes for different naming conventions */
.decrement-btn, .increment-btn, 
.decrement, .increment {
    border-radius: 100% !important;
    background-color: white !important;
    border: none !important;
    font-weight: 800;
    -webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.26);
    box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.26) !important;
    color: gray !important;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.decrement-btn:hover:not(:disabled), .increment-btn:hover:not(:disabled),
.decrement:hover:not(:disabled), .increment:hover:not(:disabled) {
    background-color: #27aa88 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0px 2px 25px 0px rgba(39, 170, 136, 0.4) !important;
    border-color: #27aa88 !important;
}

.decrement-btn:disabled, .increment-btn:disabled,
.decrement:disabled, .increment:disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) !important;
}

/* Alternative compact version for smaller spaces */
.quantity-input-compact {
    max-width: 100px;
}

.quantity-input-compact button {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

.quantity-input-compact input {
    width: 50px;
    font-size: 0.9rem;
}