/**
 * ============================================================================
 * MUAADH CART — Single source of truth for cart component
 * ============================================================================
 *
 * Cart component (76 rules) extracted from muaadh-frontend.css in Phase
 * 13 Wave 1 (2026-05-13).
 *
 * BEFORE this wave: cart rules lived in muaadh-frontend.css (a role file).
 * That violated the new architecture rule "single source of truth per
 * component" — role files (frontend/merchant/operator) must NOT redefine
 * components, they only do page-specific layout.
 *
 * AFTER this wave: this file is the SOLE owner of .muaadh-cart and its
 * descendants. Any future cart-related rule goes here.
 *
 * Owns:
 *   - .muaadh-cart (root container)
 *   - .muaadh-cart-section (page-level wrapper)
 *   - .muaadh-cart__branch-section, __merchant-header, __body (BEM children)
 *   - .muaadh-cart__item-* (item row layout: thumb / body / trailing)
 *   - .muaadh-cart__quantity-*, __price-*, __actions (per-item controls)
 *   - .muaadh-cart-button + variants (add-to-cart widget)
 *   - .muaadh-cart-count--updated + @keyframes pulse
 *   - Responsive overrides via @media (max-width: 991.98px) etc.
 *
 * Removed 2026-05-27: the .muaadh-cart-overlay mini-cart dropdown family
 * (+ .muaadh-cart-menu-item / -item-quantity / -remove) — its only
 * renderer, load/merchant-cart.blade.php, was an orphan (header is now a
 * plain cart link, no dropdown).
 *
 * NOT in this file (intentionally):
 *   - .muaadh-cart-count base style (lives in muaadh-shell.css — it's a
 *     shell-level badge in the topbar)
 *   - .muaadh-cart__item-image img inside a compound selector for all
 *     zoomable images (frontend.css:22) — shared across components
 *
 * History (Phase 11.10, 2026-05-12): merchant cart redesigned to match
 * the unified site look. Legacy 120px margins removed, layout switched
 * to grid [thumb][body][trailing] mirroring offer-tile aesthetic.
 * ============================================================================
 */

/* ============================================================================
 * SECTION 1: CART SECTION (page wrapper)
 * ============================================================================ */

.muaadh-cart-section {
    /* Phase 11.10 — the legacy 120px top/bottom margins left a wide
       empty band between the breadcrumb and the first branch card
       (owner: "ماهي الطبقة هذي"). The cart layout already pads itself
       via muaadh-padding-block-* on the section element; no outer
       margin is needed. */
}


/* ============================================================================
 * SECTION 2: CART CANONICAL (root + branches + items + controls)
 *            Phase 11.10 unified redesign (2026-05-12)
 * ============================================================================ */

.muaadh-cart {
    padding: var(--space-6) 0;
}
/* ── Merchant Cart — Phase 11.10 unified redesign (2026-05-12) ─────────
   Replaces the overlapping flex/grid mix that left every item row
   broken on render (quality badge, fits button, stock warning all
   stacking on top of each other per the owner's screenshot). The new
   structure mirrors the offer-card aesthetic from Phase 11.7: clean
   row card with [thumb] [body] [trailing] grid, meta tags wrapping
   naturally on a single line, summary panel below the items list.

   JS contract preserved: every class name merchant-cart.js touches
   keeps its identity (.muaadh-cart__item, __qty-input, __qty-control,
   __branch-section, __summary-value--total, __summary-value--subtotal,
   __summary-qty, __item-reservation*, __remove, __empty, __empty-icon,
   __branch-separator, __item-total-value, __item-image). Only the
   visual rules change.

   Branch container — outer card per cart-branch. */
.muaadh-cart__branch-section {
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.muaadh-cart__branch-separator {
    display: none;     /* separation handled by margin-bottom on the section */
}

.muaadh-cart__merchant-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-elevated);
    border-bottom: var(--chassis-border-thin) solid var(--border-light);
    flex-wrap: wrap;
}
.muaadh-cart__merchant-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    font-size: var(--text-sm);
}
.muaadh-cart__branch-name {
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
}
.muaadh-cart__merchant-count {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--chassis-radius-circle);
    background: rgba(var(--theme-primary-rgb), 0.10);
    color: var(--theme-primary);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
}

.muaadh-cart__body {
    padding: var(--space-3);
}
.muaadh-cart__table-header { display: none; }      /* unused — kept hidden for legacy markup */

/* Items list — stack of row cards, no inner separators. */
.muaadh-cart__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Single item row card.
   Grid: [thumb] [body] [qty/total] [remove]
     - thumb     auto   the leading image
     - body      1fr    name + meta (PN, quality, fits, offers, status)
     - qty/total auto   qty controls stacked over the line total
     - remove    auto   pinned at the top-end corner via align-self:start
   The four-column grid was introduced 2026-05-12 after the owner
   reported the remove icon and the qty buttons sharing the same cell
   in the previous three-column layout — they overlapped at the top-end
   of the row and looked clustered. */
.muaadh-cart__item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-md);
    transition: border-color var(--chassis-duration-fast) ease,
                box-shadow  var(--chassis-duration-fast) ease;
}
.muaadh-cart__item:hover {
    border-color: var(--theme-primary, var(--border-light));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* ───────────────────────────────────────────────────────────────────────
   Cart as the unified catalog table (parity with /brands, /result, favorites).
   The row keeps its .muaadh-cart__item JS hook + data-* attributes, but inside
   the muaadh-catalogitem-list table it must be a plain table row — the
   grid-card layout above is neutralised; .muaadh-catalogitem-list__row /
   __cell own the styling.
   ─────────────────────────────────────────────────────────────────────── */
.muaadh-catalogitem-list__table tr.muaadh-cart__item {
    display: table-row;
    grid-template-columns: none;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.muaadh-catalogitem-list__table tr.muaadh-cart__item:hover {
    border-color: transparent;
    box-shadow: none;
}

/* Stock-column cluster: stacks the availability chips (preorder / stock state
   / reservation countdown) vertically inside the Stock cell so each reads on
   its own line, centred. */
.muaadh-cart__stock-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}

.muaadh-cart__item-image {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.muaadh-cart__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: var(--chassis-border-thin) solid var(--border-light);
    background: var(--surface-elevated);
}

.muaadh-cart__item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.muaadh-cart__item-name {
    font-size: var(--text-sm);
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.muaadh-cart__item-name:hover { color: var(--theme-primary); }

.muaadh-cart__item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex-wrap: wrap;
    font-size: var(--text-xs);
}
.muaadh-cart__item-part-number {
    font-family: monospace;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Brands row — quality badge + fits/offers buttons in one wrap row. */
.muaadh-cart__item-brands {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex-wrap: wrap;
}
.muaadh-cart__item-quality {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--chassis-radius-circle);
    background: rgba(var(--theme-primary-rgb), 0.10);
    color: var(--theme-primary);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
    white-space: nowrap;
}
.muaadh-cart__quality-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 2px;
}

/* Status tags — preorder, low-stock, in-stock, reservation. */
.muaadh-cart__item-preorder,
.muaadh-cart__stock-info,
.muaadh-cart__item-reservation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--chassis-radius-circle);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
    white-space: nowrap;
}
.muaadh-cart__item-preorder {
    background: rgba(var(--theme-info-rgb, 59,130,246), 0.12);
    color: var(--theme-info, #3b82f6);
}
.muaadh-cart__stock-info {
    background: rgba(var(--theme-success-rgb, 16,185,129), 0.12);
    color: var(--theme-success, #10b981);
}
.muaadh-cart__stock-info--low {
    background: rgba(var(--theme-warning-rgb, 245,158,11), 0.12);
    color: var(--theme-warning, #f59e0b);
}
.muaadh-cart__item-reservation {
    background: var(--surface-elevated);
    color: var(--text-muted);
}
.muaadh-cart__item-reservation-label { color: var(--text-muted); }
.muaadh-cart__item-reservation-countdown {
    font-weight: var(--theme-font-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--theme-primary);
    min-width: 3ch;
}
.muaadh-cart__item-reservation--expired {
    background: rgba(var(--theme-danger-rgb, 239,68,68), 0.12);
    color: var(--theme-danger, #ef4444);
}
.muaadh-cart__item-min-qty {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* Trailing region — qty controls + line total stacked vertically.
   Owns the 3rd grid column. The remove button has its own (4th)
   column so the two don't fight for space. */
.muaadh-cart__item-qty {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    grid-row: 1;
    grid-column: 3;
}
.muaadh-cart__qty-controls {
    display: flex;
    align-items: center;
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.muaadh-cart__qty-control {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    border: 0;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--chassis-duration-fast) ease, color var(--chassis-duration-fast) ease;
}
.muaadh-cart__qty-control:hover:not(:disabled) {
    background: var(--theme-primary);
    color: var(--text-inverse, #fff);
}
.muaadh-cart__qty-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.muaadh-cart__qty-input {
    width: 36px;
    height: 28px;
    text-align: center;
    border: 0;
    background: transparent;
    font-weight: var(--theme-font-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.muaadh-cart__item-price,
.muaadh-cart__item-price-mobile { display: none; }      /* deprecated — total displays the line total */
.muaadh-cart__item-total {
    font-size: var(--text-sm);
    font-weight: var(--theme-font-bold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.muaadh-cart__item-actions {
    grid-row: 1;
    grid-column: 4;
    align-self: flex-start;          /* pin to the top-end corner */
    justify-self: flex-end;
}
.muaadh-cart__remove {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--chassis-radius-circle);
    transition: background var(--chassis-duration-fast) ease, color var(--chassis-duration-fast) ease;
}
.muaadh-cart__remove:hover {
    background: rgba(var(--theme-danger-rgb, 239,68,68), 0.12);
    color: var(--theme-danger, #ef4444);
}

/* Per-branch summary panel — sits below the items list inside the
   same branch card so each branch reads as a self-contained unit. */
.muaadh-cart__summary {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-elevated);
    border-top: var(--chassis-border-thin) solid var(--border-light);
}
.muaadh-cart__summary-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2-5) 0;
}
.muaadh-cart__summary-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}
.muaadh-cart__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.muaadh-cart__summary-row--info { font-size: var(--text-xs); }
.muaadh-cart__summary-label { color: var(--text-secondary); }
.muaadh-cart__summary-value {
    font-weight: var(--theme-font-medium);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.muaadh-cart__summary-value--subtotal { font-weight: var(--theme-font-semibold); }
.muaadh-cart__summary-value--info {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.muaadh-cart__summary-qty { font-weight: var(--theme-font-semibold); }
.muaadh-cart__summary-divider {
    margin: 6px 0;
    border: 0;
    border-top: var(--chassis-border-thin) solid var(--border-light);
}
.muaadh-cart__summary-row--total {
    font-size: var(--text-base);
    padding-top: 2px;
}
.muaadh-cart__summary-row--total .muaadh-cart__summary-label {
    color: var(--text-primary);
    font-weight: var(--theme-font-semibold);
}
.muaadh-cart__summary-value--total {
    font-size: var(--text-base);
    font-weight: var(--theme-font-bold);
    color: var(--theme-primary);
}
.muaadh-cart__checkout-action {
    width: 100%;
    margin-top: var(--space-2);
}
.muaadh-cart__clear-branch-action {
    width: 100%;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
}
.muaadh-cart__clear-branch-action:hover { color: var(--theme-danger); }

/* Empty state — same elegant footprint, centred message + CTA. */
.muaadh-cart__empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-lg);
}
.muaadh-cart__empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-elevated);
    color: var(--text-muted);
    border-radius: var(--chassis-radius-circle);
    font-size: var(--text-2xl);
}
.muaadh-cart__empty h3 {
    font-size: var(--text-lg);
    font-weight: var(--theme-font-semibold);
    margin: 0 0 var(--space-1) 0;
}
.muaadh-cart__empty p {
    color: var(--text-muted);
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-sm);
}

/* Narrow viewports — body + qty stack vertically, remove stays
   pinned at the top-end. Three-column grid (thumb · body · remove)
   leaves room for the remove icon on the same line as the name. */
@media (max-width: 599.98px) {
    .muaadh-cart__item {
        grid-template-columns: auto 1fr auto;
    }
    .muaadh-cart__item-qty {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .muaadh-cart__item-actions {
        grid-row: 1;
        grid-column: 3;
        justify-self: flex-end;
    }
}


/* ============================================================================
 * SECTION 3: CART ADD-WIDGET + MINI-CART OVERLAY
 * ============================================================================ */

/* ----- Cart-button widget (consumed by resources/js/modules/muaadh-cart-add.js)
   Wrapper element groups an "add" button + qty input + a hidden loading
   spinner. The .muaadh-cart-add base class is purely a JS hook (paired
   with .muaadh-catalog-action--success for visual style) — no CSS rule
   needed for it. */
.muaadh-cart-button.muaadh-is-loading .muaadh-cart-button__loading {
    display: flex;
}
.muaadh-cart-count--updated {
    animation: muaadh-cart-count-pulse var(--chassis-duration-normal) ease;
}
@keyframes muaadh-cart-count-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); color: var(--theme-success); }
    100% { transform: scale(1); }
}

/* Cart popup / mini-cart dropdown family removed 2026-05-27 — the
   load/merchant-cart.blade.php partial it styled was orphaned (header is
   now a plain cart link; no dropdown). */