/**
 * ============================================================================
 * MUAADH SMART-SEARCH — Free-text smart search with category disambiguation
 * ============================================================================
 *
 * Single source of truth for smart-search (46 rules) extracted from
 * muaadh-frontend.css in Phase 13 Wave 10 (2026-05-13).
 *
 * Owns:
 *   - .muaadh-smart-search (root)
 *   - __input, __suggestions, __category, __option (sub-elements)
 *   - --active state modifier on options
 *   - Mobile responsive overrides
 *
 * One of three search systems (per project_search_systems memory):
 *   - smart-search (this) — free-text query with category buckets
 *   - search-hub (muaadh-search-hub.css) — universal topbar bar
 *   - vehicle-search (muaadh-vehicle-search.css) — brand+model+year+VIN
 *
 * Loaded via layout-customer.blade.php.
 * ============================================================================
 */


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

.muaadh-smart-search {
    margin-bottom: var(--space-6);
}

.muaadh-smart-search__form {
    margin-bottom: var(--space-4);
}

.muaadh-smart-search__input-wrap {
    display: flex;
    border: var(--chassis-border-normal) solid var(--theme-primary);
    border-radius: var(--chassis-radius);
    overflow: hidden;
    background: var(--theme-card-bg);
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.12);
    transition: box-shadow var(--chassis-duration-quick);
}

.muaadh-smart-search__input-wrap:focus-within {
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb), 0.25);
}

.muaadh-smart-search__input {
    flex: 1;
    border: none;
    padding: var(--space-3) 14px;
    font-size: var(--text-base);
    background: transparent;
    color: var(--theme-text);
    outline: none;
}

.muaadh-smart-search__input::placeholder {
    color: var(--theme-text-muted);
    opacity: 0.7;
}

.muaadh-smart-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px var(--space-5);
    background: var(--theme-primary);
    color: var(--theme-text-on-primary);
    border: none;
    cursor: pointer;
    transition: background var(--chassis-duration-quick);
}

.muaadh-smart-search__btn:hover {
    background: var(--theme-primary-hover);
}

.muaadh-smart-search__btn svg {
    width: var(--size-control-xxs);
    height: var(--size-control-xxs);
}

.muaadh-smart-search__context {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) 0;
}

.muaadh-smart-search__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: var(--theme-font-medium);
}

.muaadh-smart-search__tag--part {
    background: rgba(var(--theme-primary-rgb), 0.12);
    color: var(--theme-primary);
}

.muaadh-smart-search__tag--brand {
    background: rgba(52, 152, 219, 0.12);
    color: var(--theme-primary);
}

.muaadh-smart-search__tag--catalog {
    background: rgba(46, 204, 113, 0.12);
    color: var(--theme-primary);
}

.muaadh-smart-search__tag--spec {
    background: rgba(155, 89, 182, 0.12);
    color: var(--theme-primary);
}

.muaadh-smart-search__tag--year {
    background: rgba(243, 156, 18, 0.12);
    color: var(--theme-primary);
}

.muaadh-smart-search__tag--unknown {
    background: rgba(var(--theme-secondary-rgb), 0.08);
    color: var(--theme-text-muted);
    text-decoration: line-through;
}

.muaadh-smart-search__results {
    margin-top: var(--space-2);
}

.muaadh-smart-search__empty {
    text-align: center;
    padding: var(--space-10) var(--space-5);
    color: var(--theme-text-muted);
}

.muaadh-smart-search__hint {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    opacity: 0.7;
}

.muaadh-smart-search__count {
    padding: var(--space-3) 0;
    font-weight: var(--theme-font-semibold);
    color: var(--theme-text);
    border-bottom: var(--chassis-border-thin) solid var(--theme-border);
}

.muaadh-smart-search__meta {
    font-weight: var(--theme-font-normal);
    color: var(--theme-text-muted);
    font-size: var(--text-sm);
}

/* Card rows reuse the unified .muaadh-catalogitem-list table (same as /brands),
   styled by muaadh-catalogitem-list.css — loaded globally by layout-customer. */

/* ============================================================================
 * Vehicle tabs — results grouped per catalog, horizontal scroll strip
 * ============================================================================ */

.muaadh-smart-search__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-3) 0;
    margin-bottom: var(--space-2);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.muaadh-smart-search__tab {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--theme-card-bg);
    border: var(--chassis-border-thin) solid var(--theme-border);
    border-radius: var(--radius-md);
    color: var(--theme-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--chassis-duration-fast), border-color var(--chassis-duration-fast);
}

.muaadh-smart-search__tab:hover {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.06);
}

.muaadh-smart-search__tab--active {
    border-color: var(--theme-primary);
    background: var(--theme-primary);
    color: var(--theme-text-on-primary);
}

.muaadh-smart-search__tab-image {
    flex-shrink: 0;
    width: 44px;
    height: 30px;
    object-fit: contain;
}

.muaadh-smart-search__tab-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.muaadh-smart-search__tab-vehicle {
    font-weight: var(--theme-font-semibold);
    font-size: var(--text-sm);
}

.muaadh-smart-search__tab-years {
    font-size: var(--text-xs);
    opacity: 0.85;
}

.muaadh-smart-search__tab-count {
    padding: 0 var(--space-2);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--theme-font-bold);
    background: rgba(var(--theme-primary-rgb), 0.12);
    color: var(--theme-primary);
}

.muaadh-smart-search__tab--active .muaadh-smart-search__tab-count {
    background: var(--theme-card-bg);
    color: var(--theme-primary);
}

.muaadh-smart-search__panel {
    display: none;
}

.muaadh-smart-search__panel--active {
    display: block;
}

.muaadh-smart-search__panel--loading {
    opacity: 0.5;
    pointer-events: none;
}