/* ─────────────────────────────────────────────────────────────
   Mobile search dock (dashboard / home) — v2
   --------------------------------------------------------------
   FIX (user report):
   1) Mobile par topbar ka search bar + uska search icon dono
      duplicate dikh rahe thay aur logo ke upar overlap kar rahe
      thay -> home par mobile me topbar search hide, sirf yeh
      neeche wala saaf dock dikhta hai.
   2) Dock ka submit button ek bada blue circle tha jis me "Search"
      text kat raha tha -> ab proper icon-only round button, aur
      leading magnifier icon bhi seedha (tilt/clip ke bina).
   Desktop (>=901px) ka behaviour bilkul waisa hi hai — koi
   markup ya JS change nahi, sirf presentation.
   ───────────────────────────────────────────────────────────── */

.fp-msearch { display: none; }

@media (max-width: 900px) {

    /* 1 ── Topbar search (aur uska icon) mobile par hide.
            Logo + right icon cluster ko poori jagah mil jati hai. */
    .friende-topbar-inner .fp-smart-search--header {
        display: none !important;
    }

    /* 2 ── Neeche wala mobile dock */
    .fp-msearch {
        display: block;
        margin: 10px 0 12px;
        position: relative;
        z-index: 30;
    }

    .fp-msearch .fp-smart-search {
        width: 100%;
        max-width: none;
        position: relative;
    }

    /* Input row: ek saaf, elevated pill — hero card se match karta hai. */
    .fp-msearch .fp-smart-search__row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        padding: 5px 6px 5px 12px;
        border-radius: 999px;
        background: var(--c-surface, #fff);
        border: 1px solid var(--c-border, rgba(15, 23, 42, .12));
        box-shadow: 0 8px 22px -16px rgba(15, 23, 42, .55);
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    .fp-msearch .fp-smart-search__row:focus-within {
        border-color: color-mix(in srgb, var(--c-primary, #2563eb) 55%, var(--c-border, #e5e7eb));
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary, #2563eb) 12%, transparent);
    }

    /* Leading magnifier: seedha, sahi size, kabhi clip nahi hota. */
    .fp-msearch .fp-smart-search__icon {
        position: static;
        transform: none;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        font-size: 18px;
        line-height: 1;
        opacity: .6;
        color: var(--c-text-muted, #64748b);
        pointer-events: none;
    }

    .fp-msearch .fp-smart-search__input {
        flex: 1 1 auto;
        min-width: 0;
        height: 36px;
        padding: 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 15px;
        color: var(--c-text, #0f172a);
    }

    /* Submit: compact icon-only round button (text kabhi cut nahi hota). */
    .fp-msearch .fp-smart-search__submit {
        position: static;
        transform: none;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        padding: 0;
        border: none;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--c-primary, #2563eb);
        color: #fff;
        font-size: 0;
        cursor: pointer;
        transition: transform .15s ease, filter .15s ease;
    }

    .fp-msearch .fp-smart-search__submit::before {
        content: '⌕';
        font-size: 21px;
        line-height: 1;
        transform: none;
    }

    .fp-msearch .fp-smart-search__submit:active { transform: scale(.95); }

    .fp-msearch .fp-smart-search__clear {
        position: static;
        transform: none;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
    }

    .fp-msearch .fp-smart-search__loader {
        position: static;
        flex: 0 0 15px;
    }

    /* Suggestions panel: field ke neeche full-width sheet. */
    .fp-msearch .fp-smart-search__panel {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        width: auto;
        max-height: min(62vh, 440px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 18px;
        border: 1px solid var(--c-border, rgba(15, 23, 42, .10));
        background: var(--c-surface, #fff);
        box-shadow: 0 26px 60px -24px rgba(15, 23, 42, .65);
        z-index: 60;
    }

    .fp-msearch .fp-smart-search__item { padding: 10px 14px; }
    .fp-msearch .fp-smart-search__footer { position: sticky; bottom: 0; background: var(--c-surface, #fff); }
}

@media (max-width: 420px) {
    .fp-msearch .fp-smart-search__row { min-height: 44px; padding-left: 10px; }
    .fp-msearch .fp-smart-search__input { font-size: 14px; height: 34px; }
    .fp-msearch .fp-smart-search__submit { flex: 0 0 34px; width: 34px; height: 34px; }
    .fp-msearch .fp-smart-search__submit::before { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-msearch * { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   FIX v3 (search page par mobile):
   1) Filter dropdown ka text ("Hashtags", "Marketplace") search
      button ke saath dab kar cut ho jata tha -> chhoti screens par
      filter ab apni poori-chaurai wali line me, input ke neeche
      baithta hai, is liye koi bhi option ka naam kabhi cut nahi hota.
   2) Browser ka apna "clear" (×) aur humara clear button dono ek
      saath dikhte thay (do cross) -> native wala hide.
   Sirf presentation — koi markup ya JS change nahi.
   ───────────────────────────────────────────────────────────── */

.fp-smart-search__input::-webkit-search-cancel-button,
.fp-smart-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.fp-smart-search__input::-ms-clear { display: none; width: 0; height: 0; }

@media (max-width: 640px) {
    .fp-smart-search--page .fp-smart-search__row {
        flex-wrap: wrap;
        row-gap: 8px;
        padding-bottom: 8px;
        border-radius: 16px;
    }

    .fp-smart-search--page .fp-smart-search__filter-wrap {
        order: 9;
        flex: 1 1 100%;
        width: 100%;
        border-left: 0;
        border-top: 1px solid var(--c-border, #e5e7eb);
        padding: 8px 0 0;
    }

    .fp-smart-search--page .fp-smart-search__filter {
        width: 100%;
        max-width: none;
        height: 38px;
        padding: 0 30px 0 12px;
        font-size: 13px;
        text-overflow: ellipsis;
        background: var(--c-bg, #f8fafc);
    }
}