/**
 * ============================================================================
 * MUAADH FITMENT — Part-fitment indicator (compatible vehicles for a part)
 * ============================================================================
 *
 * Single source of truth for fitment UI (21 rules) extracted from
 * muaadh-frontend.css in Phase 13 Wave 11 (band 13, 2026-05-13).
 *
 * Owns:
 *   - .muaadh-fitment-brand* (brand badges showing supported brands)
 *   - .muaadh-fitment-action* (fitment-check buttons)
 *   - State variants: --compatible, --partial, --not-compatible
 *
 * Paired with: resources/views/components/fitment-brands-modal.blade.php
 *              + fitment-details-modal.blade.php
 *
 * Loaded via layout-customer.blade.php.
 * ============================================================================
 */


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

.muaadh-fitment-brand-tile {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--chassis-radius);
    border: var(--chassis-border-thin) solid var(--border-default);
    transition: all var(--chassis-duration-quick) ease;
    text-decoration: none;
    color: inherit;
}

.muaadh-fitment-brand-tile:hover {
    background: var(--surface-primary);
    border-color: var(--action-primary);
    box-shadow: 0 2px 8px var(--theme-overlay-medium);
    transform: translateY(-2px);
}

.muaadh-fitment-brand-logo {
    width: var(--size-img-md);
    height: var(--size-img-md);
    object-fit: contain;
    margin-inline-end: var(--space-3);
    border-radius: var(--chassis-radius-sm);
    background: var(--surface-primary);
    padding: var(--space-1);
}

.muaadh-fitment-brand-logo-placeholder {
    width: var(--size-img-md);
    height: var(--size-img-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: var(--space-3);
    border-radius: var(--chassis-radius-sm);
    background: var(--action-primary);
    color: var(--text-inverse);
    font-size: var(--text-xl);
}

.muaadh-fitment-brand-name {
    font-weight: var(--theme-font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.muaadh-fitment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: 6px var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
    border-radius: var(--radius-md);
    border: var(--chassis-border-thin) solid var(--action-primary);
    background: transparent;
    color: var(--action-primary);
    cursor: pointer;
    transition: all var(--chassis-duration-quick) ease;
    text-decoration: none;
    white-space: nowrap;
}

.muaadh-fitment-action:hover {
    background: var(--action-primary);
    color: var(--text-on-primary);
    text-decoration: none;
}

.muaadh-fitment-action::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.muaadh-fitment-action--logo::before {
    display: none;
}

.muaadh-fitment-action__logo {
    width: var(--size-img-xs);
    height: var(--size-img-xs);
    object-fit: contain;
    border-radius: var(--chassis-radius-xs);
}

.muaadh-fitment-action__count {
    font-size: var(--text-xs);
    font-weight: var(--theme-font-bold);
    background: var(--action-primary);
    color: var(--text-on-primary);
    border-radius: 9px;
    padding: 1px 6px;
    line-height: 1.3;
}

.muaadh-fitment-action:hover .muaadh-fitment-action__count {
    background: var(--text-on-primary);
    color: var(--action-primary);
}

.muaadh-fitment-brand-tabs {
    padding: 0 0 var(--space-3) 0;
    border-bottom: var(--chassis-border-thin) solid var(--border-light);
}

.muaadh-fitment-brand-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-2-5);
    border: var(--chassis-border-thin) solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
    cursor: pointer;
    transition: all var(--chassis-duration-quick) ease;
}

.muaadh-fitment-brand-tab:hover {
    border-color: var(--action-primary);
    color: var(--action-primary);
}

.muaadh-fitment-brand-tab.active {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--text-on-primary);
}

.muaadh-fitment-brand-tab-logo {
    width: var(--size-img-xs);
    height: var(--size-img-xs);
    object-fit: contain;
}

.muaadh-fitment-brand-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: var(--size-control-xxs);
    padding: 0 6px;
    border-radius: var(--radius-xl);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
}

.muaadh-fitment-brand-tab.active .muaadh-fitment-brand-tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-on-primary);
}

.muaadh-fitment-brand-panel {
    display: none;
}

.muaadh-fitment-brand-panel.active {
    display: block;
}