/*
 * components/mobile-search.css
 *
 * What:  Sticky full-width search row shown only on small screens
 *        (< 768 px). Sits directly under the site header and above
 *        the cuisines row so the user has a constant search affordance
 *        no matter how far they scroll on the home page.
 * Why:   The mobile header is already crowded (logo / two-line
 *        location / bell / hamburger) — there isn't room for an inline
 *        search box like the desktop has. Dedicated row keeps the
 *        input big enough to be tappable.
 * Used:  Loaded by views/_layout.ejs via its own <link> tag.
 *        Markup mount lives in views/partials/mobile-search.ejs.
 */

/* Desktop hides the mobile search entirely — the desktop header has
 * its own inline search input. */
@media (min-width: 768px) {
    .mobile-search { display: none !important; }
}

@media (max-width: 767px) {
    /* Hide the desktop header search slot — on mobile the inline
     * version would collide with the location chip + bell + hamburger. */
    .site-header__search { display: none; }
}

.mobile-search {
    position: sticky;
    /* Top of the viewport — on mobile the site header is NOT sticky
     * (it scrolls away with the page, see mobile.css). The search
     * bar is the first thing that stops at the top edge as the user
     * scrolls; the cuisines row stacks just below it. */
    top: 0;
    /* Above the cuisines sticky strip (z-index 40) so when the user
     * scrolls and the cuisines come up under this bar they slip
     * underneath, not over it. */
    z-index: 45;
    background-color: #fff;
    border-bottom: 1px solid var(--color-border-soft);
    padding: var(--space-2) var(--space-3);
    /* Flex row so the search form stretches and the filter button
     * pins to the right. */
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Search form fills the available width; filter button takes its
 * natural square size to the right of it. */
.mobile-search__form { flex: 1; min-width: 0; }

/* Filter trigger — opens the bottom sheet at /partials/filter-sheet.
 * Visually a circular icon button matching the search input height
 * for vertical alignment. Brand-red icon so the user spots it.  */
.mobile-search__filter {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mobile-search__filter:hover,
.mobile-search__filter:focus-visible {
    background-color: #fff;
    border-color: var(--color-primary);
    outline: none;
}

.mobile-search__form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.55rem 0.85rem;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.mobile-search__form:focus-within {
    background-color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(229, 37, 42, 0.12);
}
.mobile-search__icon { color: var(--color-text-soft); flex: 0 0 auto; }
.mobile-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    color: var(--color-text);
}
.mobile-search__input::placeholder { color: var(--color-text-soft); }
.mobile-search__input::-webkit-search-cancel-button,
.mobile-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Inside a single restaurant or a product page there is nothing to
 * filter/sort (the home-feed facets don't apply here), so the filter
 * trigger is hidden and the search input takes the full width — a
 * cleaner, app-like top bar. */
body.view-restaurant .mobile-search__filter,
body.view-product .mobile-search__filter { display: none; }

/* The search + filter bar STAYS sticky and never hides on scroll — it
 * owns the top of the screen exactly like the cuisines row below it
 * (mobile.css .section--cuisines). Only the bottom-nav hides on scroll
 * (bottom-nav.css, driven by body.is-header-hidden); the top chrome is
 * deliberately left pinned so search/filter is always one tap away. */