/**
 * ============================================================================
 * MUAADH CATALOG — Catalog UI (item cards, tags, quickview, table, filters)
 * ============================================================================
 *
 * Single source of truth for ALL catalog-related UI extracted from
 * muaadh-frontend.css in Phase 13 Wave 9 (2026-05-13).
 *
 * Owns the entire .muaadh-catalog-* family (149 rules):
 *   - .muaadh-catalog-item* (41 rules — product/part item cards)
 *   - .muaadh-catalog-tag*  (21 rules — quality/source/value tags)
 *   - .muaadh-catalog-quickview* (17 rules — quickview modal)
 *   - .muaadh-catalog-table* (11 rules — table layout for items)
 *   - .muaadh-catalog-original* (10 rules — original part info)
 *   - .muaadh-catalog-chips*, -action*, -pagination*, -filter*,
 *     -offers*, -match*, -fitment*, -ext*, -specs*, -section*,
 *     -empty*, -alternatives*, -price*, -merchant*, -filters*
 *
 * NOT in this file (intentionally):
 *   - .muaadh-catalogitem-list.css (existing file from earlier phases)
 *     — handles the list/grid wrapper layout. This file owns the
 *     item-card internals; catalogitem-list.css owns the page-level
 *     grid that contains them.
 *
 * Loaded via layout-customer.blade.php (public-facing pages only).
 * ============================================================================
 */


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

.muaadh-catalog-item-name {
    font-size: var(--text-sm);
    font-weight: var(--theme-font-medium);
    color: var(--theme-catalogItem-name);
    margin-bottom: var(--space-2);
    line-height: var(--theme-line-height-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.muaadh-catalog-item-price {
    font-size: var(--text-lg);
    font-weight: var(--theme-font-bold);
    color: var(--theme-primary);
}

.muaadh-catalog-filter__steps-shell {
    padding-top: var(--space-6);
}

.muaadh-catalog-filter__steps-shell ul li a {
    color: var(--theme-text-primary);
    font-size: var(--text-base);
    font-style: normal;
    font-weight: var(--theme-font-normal);
    line-height: 120%;
    width: 100%;
    display: block;
    margin-bottom: var(--space-5);
    cursor: pointer;
}

.muaadh-catalog-filter__steps-shell ul li a:hover {
    color: var(--theme-primary);
}

.muaadh-catalog-filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--theme-card-bg);
    border: var(--chassis-border-thin) solid var(--border-color);
    border-radius: var(--chassis-radius-lg);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.muaadh-catalog-filters__search {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
}

.muaadh-catalog-quickview {
    padding: 0;
}

.muaadh-catalog-quickview-image {
    text-align: center;
}

.muaadh-catalog-quickview-main-img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--chassis-radius);
    width: 100%;
    background: var(--theme-bg-light);
    padding: var(--space-2-5);
}

.muaadh-catalog-quickview-photos {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}

.muaadh-catalog-quickview-thumb {
    width: var(--size-img-md);
    height: var(--size-img-md);
    object-fit: cover;
    border-radius: var(--chassis-radius-sm);
    border: var(--chassis-border-normal) solid var(--theme-border);
    cursor: pointer;
    transition: var(--theme-transition-fast);
}

.muaadh-catalog-quickview-name {
    font-size: var(--text-lg);
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.4;
    margin-bottom: var(--space-2);
}

.muaadh-catalog-quickview-price {
    margin-bottom: var(--space-3);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.muaadh-catalog-quickview-brand,
.muaadh-catalog-quickview-merchant,
.muaadh-catalog-quickview-branch,
.muaadh-catalog-quickview-fitment {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    flex-wrap: wrap;
}

.muaadh-catalog-quickview-stock {
    margin: var(--space-3) 0;
}

.muaadh-catalog-quickview-cart {
    margin-top: var(--space-4);
}

.muaadh-catalog-quickview-link {
    margin-top: var(--space-3);
}

.muaadh-catalog-price-current {
    font-size: var(--text-xl);
    font-weight: var(--theme-font-bold);
    color: var(--theme-primary);
}

.muaadh-catalog-price-old {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: line-through;
}

.muaadh-catalog-brand-logo,
.muaadh-catalog-fitment-logo {
    height: var(--size-control-xs);
    width: auto;
    object-fit: contain;
}

.muaadh-catalog-brand-name {
    font-weight: var(--theme-font-medium);
    color: var(--text-primary);
}

.muaadh-catalog-merchant-label,
.muaadh-catalog-branch-label,
.muaadh-catalog-fitment-label {
    color: var(--text-muted);
}

.muaadh-catalog-merchant-name,
.muaadh-catalog-branch-name {
    font-weight: var(--theme-font-medium);
    color: var(--text-primary);
}

.muaadh-catalog-fitment-brands {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.muaadh-catalog-fitment-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-elevated);
    border-radius: var(--chassis-radius-sm);
    font-size: var(--text-xs);
}

.muaadh-catalog-add-to-cart {
    flex: 1;
}

.muaadh-catalog-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 15px;
    background: var(--theme-bg-light);
    border-bottom: var(--chassis-border-thin) solid var(--theme-border);
    margin-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.muaadh-catalog-section-header h5 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--theme-font-semibold);
    color: var(--theme-info);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.muaadh-catalog-section-header h5 i {
    color: var(--action-primary);
}

.muaadh-catalog-original-part {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(124, 58, 237, 0.08) 100%);
    border: var(--chassis-border-thin) solid var(--action-primary);
    border-radius: var(--chassis-radius);
    padding: var(--space-2) 10px;
}

.muaadh-catalog-original-part__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.muaadh-catalog-original-part__photo {
    width: var(--size-img-sm);
    height: var(--size-img-sm);
    border-radius: var(--radius-md);
    object-fit: cover;
    border: var(--chassis-border-thin) solid var(--border-light);
    flex-shrink: 0;
}

.muaadh-catalog-original-part__info {
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.muaadh-catalog-original-part__number {
    font-weight: var(--theme-font-bold);
    font-size: var(--text-xs);
    color: var(--action-primary);
    font-family: monospace;
}

.muaadh-catalog-original-part__name {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.muaadh-catalog-original-part__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.muaadh-catalog-original-part__price {
    font-weight: var(--theme-font-semibold);
    font-size: var(--text-xs);
    color: var(--text-primary);
}

.muaadh-catalog-tag-sm {
    font-size: var(--text-xs);
    padding: 2px 5px;
}

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

.muaadh-catalog-alternatives-list .muaadh-catalog-original-part {
    background: var(--theme-bg-body);
    border-color: var(--border-default);
}

.muaadh-catalog-alternatives-list .muaadh-catalog-original-part:hover {
    border-color: var(--action-primary);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.02) 0%, rgba(124, 58, 237, 0.04) 100%);
}

.muaadh-catalog-original-part--no-offers {
    opacity: 0.6;
}

.muaadh-catalog-match-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.muaadh-catalog-match-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
}

.muaadh-catalog-match-tag--generic {
    background: var(--action-success-light);
    color: var(--action-success);
}

.muaadh-catalog-match-tag__label {
    color: var(--text-muted);
    font-weight: var(--theme-font-normal);
    margin-inline-end: var(--space-1);
}

.muaadh-catalog-match-tag--more,
.muaadh-catalog-ext-tag--more {
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: var(--chassis-border-thin) dashed var(--border-light);
    cursor: pointer;
}

.muaadh-catalog-ext-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.muaadh-catalog-ext-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 5px;
    background: var(--action-warning-light);
    color: var(--action-warning-hover);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
}

.muaadh-catalog-ext-tag__key {
    color: var(--text-muted);
}

.muaadh-catalog-specs-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-1);
    border-radius: var(--chassis-radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-normal);
    margin-inline-start: 6px;
    vertical-align: middle;
    margin-left: auto;
}

.muaadh-catalog-specs-tag-vin {
    background: var(--theme-info);
    color: var(--theme-text-white);
}

.muaadh-catalog-specs-tag-set {
    background: var(--theme-success);
    color: var(--theme-text-white);
}

.muaadh-catalog-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    border-radius: var(--chassis-radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--theme-transition);
    text-decoration: none;
    white-space: nowrap;
    min-height: var(--size-control-sm);
}

.muaadh-catalog-action:hover {
    text-decoration: none;
}

.muaadh-catalog-action--primary {
    background: var(--theme-info);
    color: var(--theme-text-white);
    border-color: var(--action-primary);
}

.muaadh-catalog-action--primary:hover {
    background: var(--theme-info-hover);
    border-color: var(--action-primary-hover);
    color: var(--theme-text-white);
}

.muaadh-catalog-action--outline {
    background: transparent;
    color: var(--action-primary);
    border-color: var(--action-primary);
}

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

.muaadh-catalog-action--compact {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    min-height: 28px;
}

.muaadh-catalog-offers-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 6px var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--theme-font-medium);
    background: var(--action-primary-muted);
    color: var(--action-primary);
    border: var(--chassis-border-thin) solid var(--action-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

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

.muaadh-catalog-offers-action .muaadh-icon {
    font-size: var(--text-sm);
}

.muaadh-catalog-offers-action .offers-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: var(--size-control-xxs);
    padding: 0 6px;
    background: var(--action-primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-xl);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
}

.muaadh-catalog-offers-action:hover .offers-count {
    background: var(--text-on-primary);
    color: var(--action-primary);
}

.muaadh-catalog-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: var(--chassis-radius-xs);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-normal);
    gap: var(--space-1);
}

.muaadh-catalog-tag--success {
    background: var(--action-success-light);
    color: var(--action-success);
}

.muaadh-catalog-tag--warning {
    background: var(--action-warning-light);
    color: var(--action-warning-hover);
}

.muaadh-catalog-tag--info {
    background: var(--action-info-light);
    color: var(--action-info);
}

.muaadh-catalog-tag--secondary {
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.muaadh-catalog-tag--primary {
    background: var(--action-primary-muted);
    color: var(--action-primary);
}

.muaadh-catalog-tag--danger {
    background: var(--action-danger-light);
    color: var(--action-danger);
}

.muaadh-catalog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-5);
    text-align: center;
    color: var(--theme-text-light);
}

.muaadh-catalog-empty i {
    font-size: var(--text-4xl);
    margin-bottom: 15px;
    opacity: 0.5;
}

.muaadh-catalog-empty p {
    margin: 0;
    font-size: var(--text-base);
}

.muaadh-catalog-table {
    margin-bottom: 0;
    font-size: var(--theme-font-xs);
    width: 100%;
}

.muaadh-catalog-table.table-nowrap {
    width: auto;
    min-width: 100%;
}

.muaadh-catalog-table.table-nowrap th,
.muaadh-catalog-table.table-nowrap td {
    white-space: nowrap;
}

.muaadh-catalog-table th {
    background: var(--theme-bg-light);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-tight);
    color: var(--theme-text-muted);
    border-bottom: var(--chassis-border-normal) solid var(--theme-border-dark);
    padding: var(--space-2) var(--space-1);
    white-space: nowrap;
}

.muaadh-catalog-table td {
    padding: var(--space-2);
    vertical-align: middle;
    font-size: var(--text-xs);
}

.muaadh-catalog-table tbody tr {
    transition: var(--theme-transition-fast);
}

.muaadh-catalog-table tbody tr:hover {
    background: var(--surface-elevated);
    background-color: var(--theme-bg-light);
}

.muaadh-catalog-table tbody tr.is-generic {
    background: var(--action-success-light);
}

.muaadh-catalog-table .part-link {
    font-family: 'Roboto Mono', monospace;
    font-weight: var(--theme-font-semibold);
    color: var(--action-primary);
}

.muaadh-catalog-table .part-link:hover {
    text-decoration: underline;
}

.muaadh-catalog-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-top: var(--chassis-border-thin) solid var(--border-light);
    background: var(--surface-elevated);
    margin-top: var(--space-4);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--text-xs);
}

.muaadh-catalog-pagination__info {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.muaadh-catalog-pagination__nav {
    display: flex;
    gap: var(--space-1);
    width: 100%;
    justify-content: center;
}

.muaadh-catalog-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: var(--size-control-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
    border-radius: var(--radius-sm);
    border: var(--chassis-border-thin) solid var(--border-light);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--chassis-duration-fast) ease;
    text-decoration: none;
}

.muaadh-catalog-pagination__link:hover {
    border-color: var(--action-primary);
    color: var(--action-primary);
    text-decoration: none;
}

.muaadh-catalog-pagination__link.muaadh-is-active {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--text-on-primary);
}

.muaadh-catalog-qty-input {
    width: var(--size-control-md);
    height: 26px;
    text-align: center;
    border: none;
    font-weight: var(--theme-font-semibold);
    font-size: var(--text-sm);
    background: var(--theme-card-bg);
}

.muaadh-catalog-action--success {
    background: var(--theme-success);
    color: var(--theme-text-white);
}

.muaadh-catalog-action--success:hover {
    background: var(--theme-success-hover);
    color: var(--theme-text-white);
}

.muaadh-catalog-tag--success,
.muaadh-catalog-tag--warning,
.muaadh-catalog-tag--danger,
.muaadh-catalog-tag--info,
.muaadh-catalog-tag--primary,
.muaadh-catalog-tag--secondary,
.muaadh-catalog-tag i {
    font-size: 0.8em;
}

.muaadh-catalog-quickview-thumb:hover,

.muaadh-catalog-chips-bar {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--chassis-radius);
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
}

.muaadh-catalog-chips-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: 0.35rem;
}

.muaadh-catalog-chips-name {
    color: var(--theme-text-white);
    font-weight: var(--theme-font-semibold);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.muaadh-catalog-chips-name i {
    font-size: var(--text-xs);
}

.muaadh-catalog-chips-count {
    background: var(--theme-card-bg);
    color: var(--theme-text-primary);
    padding: 0.05rem 0.3rem;
    border-radius: var(--chassis-radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
}

.muaadh-catalog-chips-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--theme-card-bg-rgb), 0.5) transparent;

}

.muaadh-catalog-chips-container::-webkit-scrollbar {
    height: 10px;
}

.muaadh-catalog-chips-container::-webkit-scrollbar-track {
    background: rgba(var(--theme-card-bg-rgb), 0.2);
    border-radius: var(--chassis-radius-xs);
}

.muaadh-catalog-chips-container::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-card-bg-rgb), 0.5);
    border-radius: var(--chassis-radius-xs);
}

.muaadh-catalog-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: var(--theme-card-bg);
    border-radius: var(--chassis-radius-pill);
    font-size: var(--theme-font-xs);
    box-shadow: var(--chassis-shadow-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.muaadh-catalog-tag-label {
    color: var(--theme-text-muted);
    font-weight: var(--theme-font-medium);
    font-size: var(--text-xs);
}

.muaadh-catalog-tag-value {
    font-weight: var(--theme-font-semibold);
    color: var(--theme-text-primary);
    margin-left: 0.15rem;
    font-size: var(--text-xs);
}

.muaadh-catalog-tag-source {
    font-size: var(--text-xs);
    padding: 0.02rem 0.2rem;
    border-radius: var(--chassis-radius-pill);
    margin-left: 0.2rem;
    color: var(--theme-text-white);
}

.muaadh-catalog-tag-source-vin {
    background: var(--theme-info);
}

.muaadh-catalog-tag-source-manual {
    background: var(--theme-success);
}

.muaadh-catalog-filter__steps-shell ul li button[aria-expanded=true] {
  color: var(--theme-primary);
}

.muaadh-catalog-filter__steps-shell ul li ul li {
  margin-bottom: 0;
}

.muaadh-catalog-filter__steps-shell ul li ul li a {
  margin-bottom: var(--space-4);
}

.muaadh-catalog-item-nav-wrapper {
  background-color: var(--theme-text-white);
  border: var(--chassis-border-thin) solid var(--theme-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
}

.muaadh-catalog-item-nav-wrapper h5 {
  font-weight: var(--theme-font-medium);
}

.muaadh-catalog-item-nav-wrapper .sort-wrapper {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.muaadh-catalog-item-nav-wrapper .filter-wrapper {
  display: flex;
  gap: var(--space-10);
}

.muaadh-catalog-item-description { padding: 1rem 0; }

/* ============================================================================
 * APPENDED (Phase 13 Wave 30): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-catalog-filter__steps .muaadh-catalog-filter__step {
    position: relative;
}

.muaadh-catalog-filter__steps .muaadh-catalog-filter__step-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--theme-font-semibold);
    color: var(--theme-text-primary);
    margin-bottom: var(--space-1-5);
}

.muaadh-catalog-filter__steps .muaadh-select,
.muaadh-catalog-filter__steps select {
    width: 100%;
    padding: 10px 35px 10px var(--space-3);
    font-size: var(--text-sm);
    border: var(--chassis-border-thin) solid var(--theme-border);
    border-radius: var(--radius-md);
    background-color: var(--theme-card-bg);
    cursor: pointer;
    transition: all var(--chassis-duration-quick) ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.muaadh-catalog-filter__steps .muaadh-select:focus,
.muaadh-catalog-filter__steps select:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.1);
    outline: none;
}

.muaadh-catalog-filter__steps .muaadh-select:hover,
.muaadh-catalog-filter__steps select:hover {
    border-color: var(--theme-border-dark);
}

.muaadh-catalog-filter__steps .muaadh-catalog-filter__step.muaadh-display-none {
    display: none;
}

.muaadh-catalog-filter__steps .muaadh-select,
.muaadh-catalog-filter__steps select  { font-size: var(--text-base); /* Prevent zoom on iOS */ }


/* ============================================================================
 * Modal split (2026-05-19) — visual primitives for the catalog category
 * modal and its toolbar trigger. Two sections below, in render order:
 *
 *   1. Toolbar — the "Catalog categories" button next to the Filters
 *      button on the listing toolbar. Mirrors the filter button shape
 *      but carries a depth indicator (current selected label) instead
 *      of a numeric badge.
 *
 *   2. Category Wizard — the modal body itself. Stepper → crumbs →
 *      panel (search + list of items) → footer (prev/next/done). All
 *      4 surfaced panels share these rules; exactly one is .is-active
 *      at a time (server-decided from currentStep). The list scrolls
 *      inside a fixed-height frame so a long option list (40+ models)
 *      never grows the dialog.
 *
 * Loading state goes at the very bottom: a single `.is-loading` flag
 * on the AJAX container (#ajax-region-category-modal-content), set by
 * the item-click handler and cleared in loadCategoryContent.finally,
 * dims every interactive part except the just-picked item.
 * ============================================================================ */


/* ----- 1. Toolbar Categories button ------------------------------------- */

.muaadh-category-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.muaadh-category-toggle__depth {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    height: var(--size-control-xs, 1.5rem);
    border-radius: var(--chassis-radius-sm);
    background: var(--theme-bg-light);
    color: var(--theme-text-primary);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-medium);
    line-height: 1;
    max-width: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ----- 2a. Stepper ------------------------------------------------------ */

/* Progress strip at the top of the wizard. One bubble per surfaced UI
   step; states cascade: locked → available → current → filled. The
   connector line between bubbles tints to action-primary when the
   prior step is filled, visualising completed progress. */
.muaadh-catalog-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
}

.muaadh-catalog-stepper__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    gap: var(--space-1);
    position: relative;
    text-align: center;
}

.muaadh-catalog-stepper__item[data-step-jump] {
    cursor: pointer;
}

.muaadh-catalog-stepper__item--locked[data-step-jump] {
    cursor: default;
}

.muaadh-catalog-stepper__item + .muaadh-catalog-stepper__item::before {
    content: "";
    position: absolute;
    top: calc(var(--size-control-sm) / 2);
    inset-inline-start: calc(-50% + var(--size-control-sm) / 2);
    width: calc(100% - var(--size-control-sm));
    height: var(--chassis-border-thin);
    background: var(--border-color);
}

.muaadh-catalog-stepper__index {
    width: var(--size-control-sm);
    height: var(--size-control-sm);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--chassis-border-thin) solid var(--border-color);
    background: var(--surface-card);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-bold);
    position: relative;
    z-index: 1;
}

.muaadh-catalog-stepper__label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.2;
}

/* State variants — exclusive (the blade picks exactly one). */
.muaadh-catalog-stepper__item--filled .muaadh-catalog-stepper__index {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--text-inverse);
}

.muaadh-catalog-stepper__item--filled .muaadh-catalog-stepper__label {
    color: var(--theme-text-primary);
    font-weight: var(--theme-font-medium);
}

.muaadh-catalog-stepper__item--filled + .muaadh-catalog-stepper__item::before {
    background: var(--action-primary);
}

.muaadh-catalog-stepper__item--current .muaadh-catalog-stepper__index {
    border-color: var(--action-primary);
    color: var(--action-primary);
    background: var(--theme-bg-light);
}

.muaadh-catalog-stepper__item--current .muaadh-catalog-stepper__label {
    color: var(--action-primary);
    font-weight: var(--theme-font-medium);
}

.muaadh-catalog-stepper__item--available .muaadh-catalog-stepper__index {
    border-color: var(--action-primary);
    color: var(--action-primary);
}

.muaadh-catalog-stepper__item--available .muaadh-catalog-stepper__label {
    color: var(--theme-text-primary);
}

.muaadh-catalog-stepper__item--locked {
    opacity: 0.55;
}


/* ----- 2b. Wizard layout (container + body + panel) --------------------- */

.muaadh-catalog-wizard {
    display: flex;
    flex-direction: column;
    min-height: 30rem;
}

.muaadh-catalog-wizard__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.muaadh-catalog-wizard__panel {
    display: none;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-height: 0;
}

.muaadh-catalog-wizard__panel.is-active {
    display: flex;
}


/* ----- 2c. Crumbs strip ------------------------------------------------- */

/* One chip per already-resolved level, rendered above the panel body.
   Compact sizing — the strip is a supporting indicator, not a CTA. */
.muaadh-catalog-wizard__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.muaadh-catalog-wizard__crumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--theme-bg-light);
    border: var(--chassis-border-thin) solid var(--border-color);
    border-radius: 999px;
    color: var(--theme-text-primary);
    font-size: var(--text-xs);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--chassis-duration-quick) ease, color var(--chassis-duration-quick) ease;
}

.muaadh-catalog-wizard__crumb:hover,
.muaadh-catalog-wizard__crumb:focus {
    border-color: var(--action-primary);
    color: var(--action-primary);
    outline: none;
}

.muaadh-catalog-wizard__crumb-icon {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    color: var(--action-primary);
}

.muaadh-catalog-wizard__crumb-level {
    color: var(--text-muted);
}

.muaadh-catalog-wizard__crumb-level::after {
    content: ":";
    margin-inline-end: var(--space-1);
}

.muaadh-catalog-wizard__crumb-value {
    font-weight: var(--theme-font-medium);
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ----- 2d. Search input + option list + empty state --------------------- */

.muaadh-catalog-wizard__search {
    width: 100%;
}

.muaadh-catalog-wizard__list {
    list-style: none;
    margin: 0;
    padding: var(--space-1);
    flex: 1 1 auto;
    min-height: 12rem;
    max-height: 22rem;
    overflow-y: auto;
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--border-color);
    border-radius: var(--chassis-radius);
}

.muaadh-catalog-wizard__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--chassis-radius-sm);
    color: var(--theme-text-primary);
    font-size: var(--text-base);
    line-height: 1.4;
    cursor: pointer;
    transition: background-color var(--chassis-duration-quick) ease;
}

.muaadh-catalog-wizard__item:hover,
.muaadh-catalog-wizard__item:focus,
.muaadh-catalog-wizard__item.is-focused {
    background: var(--theme-bg-light);
    outline: none;
}

.muaadh-catalog-wizard__item--selected,
.muaadh-catalog-wizard__item--selected:hover,
.muaadh-catalog-wizard__item--selected:focus,
.muaadh-catalog-wizard__item--selected.is-focused {
    background: var(--action-primary);
    color: var(--text-inverse);
    font-weight: var(--theme-font-medium);
}

/* Search-filter hides non-matching items via .is-hidden (set by the
   typeahead handler in catalog-items.js Section 3). */
.muaadh-catalog-wizard__item.is-hidden {
    display: none;
}

.muaadh-catalog-wizard__item-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.muaadh-catalog-wizard__item-check {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.muaadh-catalog-wizard__empty {
    margin: 0;
    padding: var(--space-5);
    text-align: center;
    color: var(--text-muted);
    background: var(--theme-bg-light);
    border-radius: var(--chassis-radius);
}


/* ----- 2e. Footer + navigation ----------------------------------------- */

.muaadh-catalog-wizard__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.muaadh-catalog-wizard__nav {
    display: flex;
    gap: var(--space-2);
    margin-inline-start: auto;
}

.muaadh-catalog-wizard__nav .muaadh-action[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Last step → hide Next, leaving Previous + Done. The flag is toggled
   in updateNavButtons (catalog-items.js Section 3). */
.muaadh-catalog-wizard.is-last-step [data-wizard-next] {
    display: none;
}


/* ----- 2f. Loading state ------------------------------------------------ */

/* Set on the AJAX container by the item-click handler the instant a
   value is picked; cleared in loadCategoryContent.finally. Disables
   every interactive piece of the wizard while the request is in
   flight, except the just-picked item (which stays full-opacity so
   the user can see what they chose). */
#ajax-region-category-modal-content.is-loading .muaadh-catalog-wizard__item,
#ajax-region-category-modal-content.is-loading .muaadh-catalog-wizard__crumb,
#ajax-region-category-modal-content.is-loading .muaadh-catalog-stepper__item[data-step-jump],
#ajax-region-category-modal-content.is-loading [data-wizard-prev],
#ajax-region-category-modal-content.is-loading [data-wizard-next],
#ajax-region-category-modal-content.is-loading [data-wizard-done],
#ajax-region-category-modal-content.is-loading #muaadh-catalog-category-reset {
    pointer-events: none;
    opacity: 0.55;
    cursor: wait;
}

#ajax-region-category-modal-content.is-loading .muaadh-catalog-wizard__item--selected {
    opacity: 1;
}

#ajax-region-category-modal-content.is-loading .muaadh-catalog-wizard__search {
    pointer-events: none;
    opacity: 0.7;
}