/**
 * ============================================================================
 * MUAADH VEHICLE-SEARCH — Vehicle picker (brand + model + year + VIN)
 * ============================================================================
 *
 * Single source of truth for the vehicle-search component (24 rules)
 * extracted from muaadh-frontend.css in Phase 13 Wave 6 (2026-05-13).
 *
 * Owns:
 *   - .muaadh-vehicle-search (root container)
 *   - .muaadh-vehicle-search__field / __option / __submit
 *   - .muaadh-vehicle-search--mobile / --desktop variants
 *   - .muaadh-vehicle-vin-dialog (VIN entry modal)
 *   - State modifiers: --open, --searching, --invalid
 *
 * JS-bound class names (see docs/js-bound-classes.md):
 *   .muaadh-vehicle-vin-dialog--open
 *   .muaadh-vehicle-search__* state modifiers
 *
 * Loaded via layout-customer.blade.php (public-facing pages only).
 * ============================================================================
 */


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

.muaadh-vehicle-search {
    position: relative;
    background: var(--surface-card);
    padding: var(--space-4);
    border-radius: var(--chassis-radius);
    border: var(--chassis-border-thin) solid var(--theme-border);
}

.muaadh-vehicle-search__tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.muaadh-vehicle-search__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 6px 14px;
    background: var(--surface-card);
    color: var(--theme-text-muted);
    border: var(--chassis-border-thin) solid var(--theme-border);
    border-radius: var(--chassis-radius);
    font-size: var(--text-sm);
    font-weight: var(--theme-font-medium);
    cursor: pointer;
    transition: all var(--chassis-duration-quick) ease;
}

.muaadh-vehicle-search__tab:hover {
    background: var(--theme-primary-light);
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

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

.muaadh-vehicle-search__tab .muaadh-icon {
    width: 14px;
    height: 14px;
}

.muaadh-vehicle-search__input-wrap {
    position: relative;
}

.muaadh-vehicle-search__input-group {
    display: flex;
    align-items: stretch;
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--theme-border);
    border-radius: var(--chassis-radius);
    overflow: hidden;
    transition: border-color var(--chassis-duration-normal) ease, box-shadow var(--chassis-duration-normal) ease;
}

.muaadh-vehicle-search__input-group:focus-within {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-light);
}

/* .muaadh-vehicle-search__icon — REMOVED 2026-05-18.
   Was a decorative leading icon (hashtag / tag / map-marker) that swapped
   per tab. Owner found it redundant with the trailing search button. */

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

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

.muaadh-vehicle-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: var(--theme-primary);
    border: none;
    color: var(--theme-btn-primary-text);
    cursor: pointer;
    font-weight: var(--theme-font-semibold);
    transition: background var(--chassis-duration-quick) ease;
}

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

.muaadh-vehicle-search__input-wrap--loading .muaadh-vehicle-search__input-group {
    position: relative;
    overflow: hidden;
}

.muaadh-vehicle-search__input-wrap--loading .muaadh-vehicle-search__input-group::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 40%;
    background: var(--theme-primary);
    border-radius: 0 0 var(--chassis-radius) var(--chassis-radius);
    animation: m-vehicle-search-loadbar var(--chassis-duration-slower) ease-in-out infinite;
}

.muaadh-vehicle-search__input-wrap--loading .muaadh-vehicle-search__input {
    opacity: 0.6;
}

.muaadh-vehicle-search__suggestions {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    width: 100%;
    background: var(--theme-bg-body);
    border: var(--chassis-border-thin) solid var(--border-color);
    border-radius: var(--chassis-radius);
    box-shadow: var(--chassis-shadow-card-elevated);
    z-index: 1030;
    max-height: 300px;
    overflow-y: auto;
    margin-top: var(--space-1);
    animation: m-vehicle-search-slideDown var(--chassis-duration-quick) ease;
}

.muaadh-vehicle-search__suggestion {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--chassis-duration-fast);
    border-bottom: var(--chassis-border-thin) solid var(--border-color);
    font-size: var(--text-sm);
    color: var(--theme-text-primary);
}

.muaadh-vehicle-search__suggestion:last-child {
    border-bottom: none;
}

.muaadh-vehicle-search__suggestion:hover {
    background: var(--theme-bg-lighter);
}

.muaadh-vehicle-search__msg {
    text-align: center;
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--chassis-duration-normal) ease, opacity var(--chassis-duration-normal) ease, padding var(--chassis-duration-normal) ease;
}

.muaadh-vehicle-search__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--theme-text-muted);
    margin-top: 10px;
}

.muaadh-vehicle-search__hint code {
    background: var(--theme-bg-lighter);
    padding: 2px var(--space-2);
    border-radius: var(--chassis-radius-sm);
    font-size: var(--text-xs);
    direction: ltr;
    display: inline-block;
}


/* ============================================================================
 * APPENDED (Phase 13 Wave 12 — VIN dialog appended): rules pulled from muaadh-frontend.css
 * ============================================================================ */

.muaadh-vehicle-vin-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.muaadh-vehicle-vin-dialog--open { display: flex; }

.muaadh-vehicle-vin-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: var(--theme-overlay-heavy);
    animation: m-vin-modal-fadeIn var(--chassis-duration-quick) ease;
}

.muaadh-vehicle-vin-dialog__panel {
    position: relative;
    width: 100%;
    max-width: var(--size-modal-md);
    background: var(--theme-modal-bg);
    border-radius: var(--chassis-radius-lg);
    box-shadow: var(--chassis-shadow-modal-deep);
    overflow: hidden;
    animation: m-vin-modal-scaleIn var(--chassis-duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.muaadh-vehicle-vin-dialog__close {
    position: absolute;
    top: var(--space-3);
    inset-inline-end: var(--space-3);
    width: var(--size-img-sm);
    height: var(--size-img-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-elevated);
    border: none;
    border-radius: var(--chassis-radius-pill);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--chassis-duration-fast) ease;
    z-index: 1;
}

.muaadh-vehicle-vin-dialog__close:hover {
    background: var(--border-default);
    color: var(--text-primary);
}

.muaadh-vehicle-vin-dialog__header {
    text-align: center;
    padding-block: var(--space-8) var(--space-4);
    padding-inline: var(--space-6);
}

.muaadh-vehicle-vin-dialog__check {
    width: var(--size-img-lg);
    height: var(--size-img-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--success-light);
    border-radius: var(--chassis-radius-pill);
    color: var(--theme-success);
    margin-block-end: var(--space-3);
}

.muaadh-vehicle-vin-dialog__check .muaadh-icon {
    width: var(--size-img-sm);
    height: var(--size-img-sm);
}

.muaadh-vehicle-vin-dialog__title {
    font-size: var(--text-lg);
    font-weight: var(--theme-font-bold);
    color: var(--text-primary);
    margin: 0;
}

.muaadh-vehicle-vin-dialog__body {
    padding-block-end: var(--space-6);
    padding-inline: var(--space-6);
}

.muaadh-vehicle-vin-dialog__vehicle {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-elevated);
    border-radius: var(--chassis-radius);
}

.muaadh-vehicle-vin-dialog__vehicle-icon {
    width: var(--size-img-md);
    height: var(--size-img-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-primary-light);
    border-radius: var(--chassis-radius);
    color: var(--action-primary);
    flex-shrink: 0;
}

.muaadh-vehicle-vin-dialog__vehicle-icon .muaadh-icon {
    width: var(--size-img-sm);
    height: var(--size-img-sm);
}

.muaadh-vehicle-vin-dialog__vehicle-info {
    flex: 1;
    min-width: 0;
}

.muaadh-vehicle-vin-dialog__vehicle-name {
    font-weight: var(--theme-font-bold);
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--theme-line-height-tight);
}

.muaadh-vehicle-vin-dialog__vehicle-vin {
    font-family: monospace;
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: var(--theme-letter-spacing-tight);
    margin-block-start: var(--space-1);
    direction: ltr;
    display: inline-block;
}

.muaadh-vehicle-vin-dialog__footer {
    padding-block-end: var(--space-6);
    padding-inline: var(--space-6);
}

.muaadh-vehicle-vin-dialog__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding-block: var(--space-4);
    padding-inline: var(--space-6);
    background: var(--action-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--chassis-radius-pill);
    font-size: var(--text-base);
    font-weight: var(--theme-font-semibold);
    cursor: pointer;
    transition: background var(--chassis-duration-quick) ease;
}

.muaadh-vehicle-vin-dialog__action:hover { background: var(--action-primary-hover); }

.muaadh-vehicle-vin-dialog__action .muaadh-loader__spinner-border {
    width: var(--size-img-xs);
    height: var(--size-img-xs);
}

.muaadh-vehicle-vin-dialog__action-icon {
    margin-inline-end: var(--space-2);
    transition: transform var(--chassis-duration-quick) ease;
}

.muaadh-vehicle-vin-dialog__action-text {
    font-weight: var(--theme-font-medium);
}

.muaadh-vehicle-vin-dialog__action-spinner {
    display: none;
    margin-inline-start: var(--space-2);
}