/**
 * File: /shared/css/quantity-container.css
 * Purpose: Visual appearance for the cart quantity selector.
 *
 * Styles the existing .quantity-container / .quantity-btn / .quantity-input
 * markup as a pill with circular minus and plus buttons. Brand colors come
 * from --brand-* tokens, with pale-green fallbacks when a brand does not
 * define them.
 *
 * Quantity behavior belongs to handleCart.js. This file must not change
 * how quantity is calculated, stored, submitted, or updated.
 */


/* ==========================================
   PILL
   ========================================== */

.quantity-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    width: 150px;
    height: 50px;
    padding: 4px 6px;

    background-color: var(--brand-surface, #eaf7ee);
    border: 1px solid var(--brand-quantity-border, var(--brand-accent, #c5e8d0));
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: none;
}


/* ==========================================
   MINUS / PLUS BUTTONS
   ========================================== */

.quantity-container .quantity-btn {
    box-sizing: border-box;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;

    background-color: var(--brand-primary, #c8e6c9);
    color: var(--brand-text-on-primary, #1b5e20);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    transform: none;
    transition: background-color 0.2s ease;
}

.quantity-container .quantity-btn.minusBtn,
.quantity-container .quantity-btn.plusBtn {
    transform: none;
}

.quantity-container .quantity-btn:hover:not(:disabled) {
    background-color: var(--brand-primary-hover, #a8d5b5);
}

.quantity-container .quantity-btn:active:not(:disabled) {
    background-color: var(--brand-primary-hover, #93c9a4);
    transform: none;
}

.quantity-container .quantity-btn:disabled {
    background-color: var(--brand-primary-soft, #d7eadc);
    color: var(--brand-text-accent, #6b8f70);
    cursor: not-allowed;
    opacity: 1;
}


/* ==========================================
   QUANTITY VALUE
   ========================================== */

.quantity-container .quantity-input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0 4px;

    border: none;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;

    background-color: transparent;
    color: var(--brand-text-accent, #1b5e20);
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
}

.quantity-container .quantity-input:focus {
    outline: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--brand-text-accent-hover, var(--brand-text-accent, #1b5e20));
}