/* Variant pill — used by the product page (size / color / etc.
 * selectors) and the product popup. Was duplicated inline in
 * layouts/storefront.blade.php and storefront/product_page.blade.php
 * with two slightly different definitions (inline-block vs
 * inline-flex). Consolidated to a single flex variant so an icon +
 * label can sit side-by-side inside the same pill when needed; plain
 * text-only pills still render the same. */

.variant-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.variant-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1.5px solid #dee2e6;
    border-radius: 20px;
    cursor: pointer;
    font-size: .85rem;
    transition: all .15s;
    user-select: none;
}

.variant-pill:hover { border-color: #6c757d; }

.variant-pill.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Small "+ amount" label tucked next to the pill's main label —
 * used when a variant adds a surcharge to the base price. */
.pill-add-label {
    font-size: .72rem;
    opacity: .75;
}

/* Multi-select pills (Pills / checkbox variants) — render a small
 * empty circle before the label that fills with a checkmark when
 * active, so the shopper instantly reads "I can pick multiple
 * here" instead of treating it like a single-choice swatch. */
.variant-pills--multi .variant-pill::before {
    content: "";
    display: inline-block;
    width: 14px; height: 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    margin-inline-end: 6px;
    background: #fff;
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
}
.variant-pills--multi .variant-pill.active::before {
    background: #fff;
    border-color: #fff;
    /* white check on the active (dark) background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Cart line — Pills add-ons rendered as tiny chips under the product
 * name so the shopper can see which extras they picked. The optional
 * +₪ price label sits on the same row in a softer green tint. */
.cart-pill-addons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 6px;
}
.cart-pill-addon {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: .68rem;
    font-weight: 600;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    line-height: 1.45;
    white-space: nowrap;
}
.cart-pill-addon-price {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    line-height: 1.45;
}

/* Plain comma-separated pills list in the cart line — simpler than
 * the chip-row look when many add-ons are picked. Single line with
 * label + values + optional green price tag at the end. */
.cart-pill-addons-plain {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin: 4px 0 6px;
    font-size: .72rem;
    line-height: 1.4;
}
.cart-pill-addons-plain__label {
    color: #64748b;
    font-weight: 700;
}
.cart-pill-addons-plain__list {
    color: #334155;
    font-weight: 500;
}
.cart-pill-addons-plain__price {
    margin-inline-start: 2px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    font-weight: 700;
}