/**
 * ============================================================================
 * MUAADH OFFER — Offer tile + summary (merchant catalogues)
 * ============================================================================
 *
 * Single source of truth for offer-related UI (41 rules) extracted
 * from muaadh-frontend.css in Phase 13 Wave 10 (band 13 of project
 * -10-of-10 plan, 2026-05-13).
 *
 * Owns:
 *   - .muaadh-offer-tile (root + BEM children: __photo, __body, etc.)
 *   - .muaadh-offer-summary (compact horizontal summary)
 *   - State variants: --unavailable, --in-stock, --out, --preorder
 *
 * Loaded via layout-customer.blade.php.
 * ============================================================================
 */


/* ============================================================================
 * APPENDED (Phase 13 Wave 10 — 2026-05-13): rules pulled from muaadh-frontend.css
 * ============================================================================ */

.muaadh-offer-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-elevated);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.muaadh-offer-summary__thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: var(--chassis-border-thin) solid var(--border-light);
    background: var(--surface-card);
    flex-shrink: 0;
}

.muaadh-offer-summary__body {
    flex: 1 1 200px;
    min-width: 0;
}

.muaadh-offer-summary__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    line-height: 1.3;
}

.muaadh-offer-summary__pn {
    display: inline-block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.muaadh-offer-summary__stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}

.muaadh-offer-summary__range {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.muaadh-offer-summary__range strong:first-of-type { color: var(--text-success); }

.muaadh-offer-summary__range strong:last-of-type  { color: var(--text-primary); }

.muaadh-offer-summary__sort {
    margin-inline-start: auto;
    font-size: var(--text-sm);
}

.muaadh-offer-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.muaadh-offer-tile {
    display: grid;
    grid-template-columns: 1fr 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,
                transform   var(--chassis-duration-fast) ease;
}

.muaadh-offer-tile:hover {
    border-color: var(--theme-primary, var(--border-light));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.muaadh-offer-tile--unavailable {
    opacity: 0.55;
}

.muaadh-offer-tile--unavailable:hover {
    transform: none;
    border-color: var(--border-light);
    box-shadow: none;
}

.muaadh-offer-tile__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.muaadh-offer-tile__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    line-height: 1.3;
}

.muaadh-offer-tile__merchant {
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.muaadh-offer-tile__branch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.muaadh-offer-tile__branch .muaadh-icon { font-size: 11px; }

.muaadh-offer-tile__rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.muaadh-offer-tile__meta {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex-wrap: wrap;
    font-size: var(--text-xs);
}

.muaadh-offer-tile__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-weight: var(--theme-font-medium);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.muaadh-offer-tile__quality-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 2px;
}

.muaadh-offer-tile__stock {
    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-offer-tile__stock--in-stock    { background: rgba(var(--theme-success-rgb, 16,185,129), 0.12); color: var(--theme-success, #10b981); }

.muaadh-offer-tile__stock--preorder    { background: rgba(var(--theme-warning-rgb, 245,158,11), 0.12); color: var(--theme-warning, #f59e0b); }

.muaadh-offer-tile__stock--out         { background: var(--surface-elevated); color: var(--text-muted); }

.muaadh-offer-tile__affiliate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--chassis-radius-circle);
    background: rgba(var(--theme-info-rgb, 59,130,246), 0.12);
    color: var(--theme-info, #3b82f6);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
}

.muaadh-offer-tile__photo {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: var(--chassis-border-thin) solid var(--border-light);
    cursor: pointer;
}

.muaadh-offer-tile__trailing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1-5);
    flex-shrink: 0;
}

.muaadh-offer-tile__pricing {
    display: flex;
    align-items: baseline;
    gap: var(--space-1-5);
    line-height: 1;
}

.muaadh-offer-tile__price {
    font-size: var(--text-base);
    font-weight: var(--theme-font-bold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.muaadh-offer-tile__price-old {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.muaadh-offer-tile__discount {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--chassis-radius-circle);
    background: rgba(var(--theme-danger-rgb, 239,68,68), 0.12);
    color: var(--theme-danger, #ef4444);
    font-size: 10px;
    font-weight: var(--theme-font-bold);
}

.muaadh-offer-tile__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}