/*
 * Cart Item Component — Standardised across all cart contexts:
 *   - Sidebar mini-cart
 *   - Main cart page (/cart)
 *   - Checkout order summary step
 *   - Order confirmation page
 *
 * Variables controlled by context:
 *   [data-cart-context="view"]        — sidebar / cart page  (qty controls + delete visible)
 *   [data-cart-context="checkout"]    — checkout summary      (qty controls + delete visible)
 *   [data-cart-context="readonly"]    — order confirmation    (qty controls + delete hidden)
 *
 * If no data-cart-context is set the item defaults to "view" (interactive).
 */

/* ─── Base item layout ─────────────────────────────────────────────────────── */
.uci {                                  /* uci = unified-cart-item */
    display: grid !important;
    grid-template-columns: 76px 1fr;
    grid-template-areas:
        "img  body"
        ".    footer";
    column-gap: 12px;
    row-gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid #ebebeb;
    position: relative;
    transition: background 0.15s ease;
    align-items: start;
    flex-direction: unset; /* prevent any inherited flex-direction from interfering */
}

.uci:last-child {
    border-bottom: none;
}

/* ─── Image ───────────────────────────────────────────────────────────────── */
.uci__img {
    grid-area: img;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.uci__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* placeholder when image missing */
.uci__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 8px;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}

.uci__img--placeholder i {
    font-size: 24px;
    color: #bbb;
}

/* ─── Body (right of image) ───────────────────────────────────────────────── */
.uci__body {
    grid-area: body;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── Name ─────────────────────────────────────────────────────────────────── */
.uci__name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.35;
    /* Cap at 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Size / variant ──────────────────────────────────────────────────────── */
.uci__size {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    margin: 0;
}

/* ─── Price row ───────────────────────────────────────────────────────────── */
.uci__prices {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.uci__price-original {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
}

.uci__price-current {
    font-size: 13px;
    font-weight: 600;
    color: #FF6B35;
}

.uci__savings-badge {
    font-size: 11px;
    font-weight: 600;
    background: rgba(40, 167, 69, 0.12);
    color: #28a745;
    padding: 2px 6px;
    border-radius: 10px;
}

/* ─── Footer row: qty controls + total + delete ───────────────────────────── */
.uci__footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ─── Quantity controls ───────────────────────────────────────────────────── */
.uci__qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    height: 30px;
}

.uci__qty-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #424242;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.uci__qty-btn:hover {
    color: #FF6B35;
    background: rgba(255, 107, 53, 0.08);
}

.uci__qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.uci__qty-value {
    min-width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    height: 30px;
    line-height: 30px;
    padding: 0 4px;
    /* When used as an <input> */
    background: transparent;
    border-top: none;
    border-bottom: none;
    outline: none;
    -moz-appearance: textfield;
}

.uci__qty-value::-webkit-inner-spin-button,
.uci__qty-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* ─── Item total ──────────────────────────────────────────────────────────── */
.uci__total {
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #FF6B35 0%, #e55a2b 100%);
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(255,107,53,0.25);
    /* Keep class for legacy subtotal calculation selectors */
}

/* ─── Delete button ───────────────────────────────────────────────────────── */
.uci__delete {
    background: rgba(220,53,69,0.10);
    border: 1px solid rgba(220,53,69,0.20);
    color: #dc3545;
    border-radius: 6px;
    padding: 5px 9px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.uci__delete:hover {
    background: rgba(220,53,69,0.20);
    color: #b02a37;
    text-decoration: none;
}

.uci__delete i { font-size: 13px; }

/* ─── Readonly mode: hide interactive elements ────────────────────────────── */
.uci--readonly .uci__qty,
.uci--readonly .uci__delete {
    display: none !important;
}

/* In readonly the qty label still shows but as plain text */
.uci__qty-label {
    display: none;    /* only shown in readonly mode */
    font-size: 12px;
    color: #FF6B35;
    font-weight: 600;
    background: rgba(255, 107, 53, 0.1);
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.uci--readonly .uci__qty-label {
    display: inline-block;
}

/* ─── Savings line (optional, shown below total in interactive mode) ───────── */
.uci__saved {
    font-size: 11px;
    color: #28a745;
    font-weight: 500;
    white-space: nowrap;
}

/* ─── Mobile adjustments ──────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .uci {
        /* Full-bleed footer row on mobile: spans under the image too */
        display: grid !important;
        grid-template-columns: 56px 1fr !important;
        grid-template-areas:
            "img    body"
            "footer footer" !important;
        column-gap: 10px;
        row-gap: 8px;
        padding: 12px 0;
        flex-direction: unset;
    }

    .uci__img,
    .uci__img--placeholder {
        width: 56px;
        height: 56px;
    }

    .uci__name {
        font-size: 13px;
    }

    .uci__size {
        font-size: 11px;
    }

    .uci__footer {
        gap: 6px;
    }

    .uci__total {
        font-size: 13px;
        padding: 4px 10px;
    }

    .uci__delete span {
        display: none;     /* hide "Remove" text on small screens, keep icon */
    }
}