/**
 * ============================================================================
 * MUAADH SEARCH-HUB — Universal search bar component
 * ============================================================================
 *
 * Single source of truth for the search-hub component (38 rules)
 * extracted from muaadh-frontend.css in Phase 13 Wave 5 (2026-05-13).
 *
 * BEFORE this wave: search-hub rules lived in muaadh-frontend.css
 * (role file). Violated single-source-of-truth.
 *
 * Owns:
 *   - .muaadh-search-hub (root + open state)
 *   - .muaadh-search-hub__input-wrap + --loading state
 *   - .muaadh-search-hub__input / __trigger / __submit
 *   - .muaadh-search-hub__panel (suggestions dropdown)
 *   - .muaadh-search-hub__tab + --active modifier
 *   - .muaadh-search-hub__suggestion + --active
 *   - Mobile responsive overrides
 *
 * JS-bound class names (DO NOT rename without coordinated JS update):
 *   __panel--active, __suggestion--active, __tab--active,
 *   __input-wrap--loading
 *   (see docs/js-bound-classes.md and JS-bound list at top of core.css)
 *
 * Loaded via layout-customer.blade.php (public-facing pages only).
 * ============================================================================
 */


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

.muaadh-search-hub {
    width: 100%;
    max-width: var(--search-hub-max);
    margin-inline: auto;
    text-align: start;
    position: relative;
    z-index: 50;
}

.muaadh-search-hub__tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    margin-block-end: var(--space-5);
}

.muaadh-search-hub__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    padding-inline: var(--space-6);
    background: transparent;
    border: var(--chassis-border-normal) solid var(--border-default);
    border-radius: var(--chassis-radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--theme-font-semibold);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--chassis-duration-quick) ease;
}

.muaadh-search-hub__tab:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.muaadh-search-hub__tab--active {
    background: var(--action-primary);
    color: var(--text-on-primary);
    border-color: var(--action-primary);
}

.muaadh-search-hub__tab--active:hover {
    background: var(--action-primary-hover);
    color: var(--text-on-primary);
    border-color: var(--action-primary-hover);
}

.muaadh-search-hub__panel { display: none; }

.muaadh-search-hub__panel--active { display: block; }

.muaadh-search-hub__input-wrap { position: relative; }

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

.muaadh-search-hub__input-group:focus-within {
    border-color: var(--action-primary);
    box-shadow: var(--shadow-primary);
}

/* .muaadh-search-hub__icon — REMOVED 2026-05-18.
   Was a decorative leading icon inside the input group. Owner found it
   redundant with the trailing button which already carries a search
   icon and is the actual clickable action. */

.muaadh-search-hub__input {
    flex: 1;
    padding-block: var(--space-4);
    padding-inline: var(--space-3);
    border: none;
    background: transparent;
    font-size: var(--text-lg);
    font-weight: var(--theme-font-medium);
    color: var(--text-primary);
    outline: none;
}

.muaadh-search-hub__input::placeholder { color: var(--text-muted); }

.muaadh-search-hub__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-4);
    padding-inline: var(--space-6);
    background: var(--action-primary);
    border: none;
    color: var(--text-on-primary);
    cursor: pointer;
    font-weight: var(--theme-font-semibold);
    font-size: var(--text-base);
    transition: background var(--chassis-duration-quick) ease;
}

.muaadh-search-hub__btn:hover { background: var(--action-primary-hover); }

.muaadh-search-hub__hint {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-block-start: var(--space-3);
}

.muaadh-search-hub__hint code {
    background: var(--surface-elevated);
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
    border-radius: var(--chassis-radius-sm);
    font-size: var(--text-sm);
    direction: ltr;
    display: inline-block;
}

.muaadh-search-hub__smart-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    margin-block-start: var(--space-2);
    background: var(--theme-primary-light);
    border: var(--chassis-border-thin) solid transparent;
    border-radius: var(--chassis-radius);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.muaadh-search-hub__smart-hint .muaadh-icon {
    color: var(--action-primary);
    flex-shrink: 0;
}

.muaadh-search-hub__smart-link {
    color: var(--action-primary);
    font-weight: var(--theme-font-semibold);
    text-decoration: none;
}

.muaadh-search-hub__smart-link:hover { text-decoration: underline; }

.muaadh-search-hub__suggestions {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    width: 100%;
    background: var(--surface-card);
    border: var(--chassis-border-thin) solid var(--border-default);
    border-radius: var(--chassis-radius);
    box-shadow: var(--chassis-shadow-card-elevated);
    z-index: 1030;
    max-height: var(--suggestions-max-height);
    overflow-y: auto;
    margin-block-start: var(--space-1);
    animation: m-search-hub-slideDown var(--chassis-duration-quick) ease;
}

.muaadh-search-hub__suggestion {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    cursor: pointer;
    transition: background var(--chassis-duration-fast);
    border-block-end: var(--chassis-border-thin) solid var(--border-light);
}

.muaadh-search-hub__suggestion:last-child { border-block-end: none; }

.muaadh-search-hub__suggestion:hover,
.muaadh-search-hub__suggestion--active {
    background: var(--surface-elevated);
}

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

.muaadh-search-hub__suggestion-content {
    flex: 1;
    min-width: 0;
}

.muaadh-search-hub__suggestion-part {
    font-weight: var(--theme-font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.muaadh-search-hub__suggestion-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.muaadh-search-hub__input-wrap--loading .muaadh-search-hub__input-group {
    position: relative;
    overflow: hidden;
}

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

.muaadh-search-hub__input-wrap--loading .muaadh-search-hub__input { opacity: 0.6; }

.muaadh-search-hub__msg {
    text-align: center;
    font-size: var(--text-sm);
    margin-block-start: var(--space-3);
    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-search-hub__msg-hint {
    font-size: var(--text-xs);
    opacity: 0.85;
}

.muaadh-search-hub__msg-link {
    color: var(--action-primary);
    text-decoration: underline;
    cursor: pointer;
    font-weight: var(--theme-font-semibold);
}

.muaadh-search-hub__msg-link:hover { opacity: 0.8; }


/* ============================================================================
 * RESPONSIVE — tabs + input shrink on narrow screens
 * Added 2026-05-18 because the home + /result pages keep their layout
 * fixed at every viewport (owner: "في كل الشاشات سوا صغيرة أو كبيرة نفس
 * المقاس يعني ماتصغر"). One breakpoint at 600px is enough — the inputs
 * already scale via max-width above that.
 * ============================================================================ */

@media (max-width: 600px) {
    .muaadh-search-hub__tabs {
        gap: var(--space-2);
        margin-block-end: var(--space-4);
    }

    .muaadh-search-hub__tab {
        padding-block: var(--space-2);
        padding-inline: var(--space-4);
        font-size: var(--text-xs);
        flex: 1 1 0;
        justify-content: center;
    }

    .muaadh-search-hub__input {
        padding-block: var(--space-3);
        padding-inline: var(--space-2);
        font-size: var(--text-base);
        min-width: 0;
    }

    .muaadh-search-hub__btn {
        padding-block: var(--space-3);
        padding-inline: var(--space-3);
        font-size: var(--text-sm);
    }

    .muaadh-search-hub__btn .search-icon {
        margin-inline-end: 0;
    }

    .muaadh-search-hub__hint {
        font-size: var(--text-xs);
    }
}