/**
 * Cart line controls: the quantity stepper and the remove button.
 *
 * ONE component for the cart drawer and the cart page. Its markup is
 * template-parts/cart/item-controls.php (the drawer's own markup, which cart.js
 * builds the same way when it adds a row). These rules are the only place the
 * stepper and the remove button are styled; the drawer (cart-drawer.css) and the
 * page (cart-page.css) lay them out and never restyle them.
 *
 * Unscoped on purpose: the selectors carry no surface, so a control looks the same
 * wherever it is printed. The tokens are set on both surfaces.
 */

.cart-drawer,
.codleade-cart {
    --cd-ink: #1a1a1a;
    --cd-muted: #776f67; /* 4.9:1 on white, 4.5:1 on #f5f5f5 (WCAG AA); was #8a8279, 3.8:1. */
    --cd-hairline: rgba(26, 26, 26, 0.09);
}

/* A quantity-offer pack line: its quantity is the offer's, so no stepper
   (inc/woocommerce/cart-offers.php). */
.cart-item-qty-fixed {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--codleade-text-secondary, #6b7280);
}

.cart-item-remove {
    flex-shrink: 0;
    /* The surface's own type size must not reach the control (the page inherited
       14px, the drawer 16px). The glyph is sized in px below, so this is inert. */
    font-size: 1rem;
    line-height: 1.5;
    background: none;
    border: none;
    /* Padding, not icon size, carries the tap target: the glyph stays 15px and
       visually quiet while the hit area is 25px desktop / 33px mobile. The
       matching negative margin keeps the icon optically on the row's edge. */
    padding: 5px;
    margin: -5px -5px 0 0;
    cursor: pointer;
    color: var(--cd-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    /* No transition and no hover change: the brief asks for none on this control. */
}

.cart-item-remove:focus-visible {
    color: var(--cd-ink);
}

.cart-item-remove svg {
    width: var(--codleade-icon-size-sm);
    height: var(--codleade-icon-size-sm);
    display: block;
}

.quantity-control {
    display: flex;
    font-size: 1rem;
    line-height: 1.5;
    align-items: center;
    height: 28px;
    border: 1px solid var(--cd-hairline);
    border-radius: var(--codleade-radius);
    overflow: hidden;
    background: #fff;
}

/* (0,2,0) so a surface's own button rules (the page's `button { font: inherit }`)
   do not win over the stepper's size. */
.quantity-control .qty-btn {
    width: 28px;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    color: var(--cd-ink);
}

.quantity-control .qty-input {
    width: 30px;
    height: 100%;
    border: none;
    border-inline-start: 1px solid var(--cd-hairline);
    border-inline-end: 1px solid var(--cd-hairline);
    border-radius: 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cd-ink);
    background: #fff;
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
}

.quantity-control .qty-input::-webkit-outer-spin-button,
.quantity-control .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Bigger tap targets than desktop, without growing the visual weight. */
@media (max-width: 767px) {
    .quantity-control {
        height: 32px;
    }

    .quantity-control .qty-btn {
        width: 32px;
        font-size: 0.9rem;
    }

    .quantity-control .qty-input {
        width: 32px;
    }

    .cart-item-remove {
        padding: 9px;
        margin: -9px -9px 0 0;
    }
}

/* Empty cart: the header's own cart icon (assets/icons/ui/cart.svg, printed by
   get_svg()), drawn as a fine outline at 56px in light grey. The source glyph is
   solid, so the outline comes from the CSS of this one component: the file is not
   copied or changed. Used by the drawer's empty state and the empty cart page. */
.cart-empty-icon {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    color: #c4c4c4;
    opacity: 1;
    flex-shrink: 0;
}

.cart-empty-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    color: inherit;
}