/* ==========================================================================
   Friendse — Modern horizontal search control (fp-search-modern.css)
   --------------------------------------------------------------------------
   FIX (user report + screenshot): topbar ka search button ek chhota gol blue
   circle tha jis me ek text glyph (⌕) tha — mobile par adha kata lagta tha aur
   desktop par purana dikhta tha.

   Ab:
     • Horizontal pill button: SVG magnifier + "Search" label (desktop/tablet).
     • Mobile aur desktop dono par icon + "Search" ka horizontal pill rehta hai.
     • Left wala magnifier bhi ab SVG hai (har OS par same shape).
     • Focus ring, hover lift, dark theme — sab design tokens se.

   Purely presentational. Koi markup logic / JS / route change nahi.
   LOAD LAST (fp-mobile-search.css ke baad).
   ========================================================================== */

/* ---------- 1. Left magnifier: SVG ko sahi size dena ---------- */
.fp-smart-search__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: color-mix(in srgb, var(--c-text, #0f172a) 45%, transparent);
    font-size: 0;
    opacity: 1;
}

.fp-smart-search__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.fp-smart-search__row:focus-within .fp-smart-search__icon {
    color: var(--c-primary, #4f46e5);
}

/* ---------- 2. Submit: horizontal pill ---------- */
.fp-smart-search__submit,
.friende-topbar-inner .fp-smart-search--header .fp-smart-search__submit,
.fp-msearch .fp-smart-search__submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    height: 36px;
    padding: 0 15px 0 13px;
    border: 0;
    border-radius: 999px;
    background: var(--c-primary, #4f46e5);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c-primary, #4f46e5) 28%, transparent);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease;
}

/* purana pseudo-element glyph band — ab asli SVG hai */
.fp-smart-search__submit::before,
.fp-msearch .fp-smart-search__submit::before {
    content: none !important;
}

.fp-smart-search__submit-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: block;
}

.fp-smart-search__submit-label {
    white-space: nowrap;
}

.fp-smart-search__submit:hover {
    filter: none;
    background: color-mix(in srgb, var(--c-primary, #4f46e5) 88%, #000);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--c-primary, #4f46e5) 34%, transparent);
    transform: translateY(-1px);
}

.fp-smart-search__submit:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--c-primary, #4f46e5) 26%, transparent);
}

.fp-smart-search__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary, #4f46e5) 35%, transparent);
}

/* ---------- 3. Row: pill ke sath balance ---------- */
.friende-topbar-inner .fp-smart-search--header .fp-smart-search__row,
.fp-msearch .fp-smart-search__row {
    padding-right: 4px;
    gap: 8px;
}

/* Desktop par thoda zyada chaura dock taake label ke baad bhi typing space rahe */
@media (min-width: 1024px) {
    .friende-topbar-inner .fp-smart-search--header {
        flex: 0 1 min(520px, 38vw);
        width: min(520px, 38vw);
    }
}

/* ---------- 4. Clear (×) button: same round family ---------- */
.fp-smart-search__clear {
    border-radius: 999px;
}

/* ---------- 5. Tablet / mobile: desktop jaisa horizontal pill ---------- */
@media (max-width: 900px) {
    .fp-smart-search__submit-label {
        display: inline;
    }

    .fp-smart-search__submit,
    .friende-topbar-inner .fp-smart-search--header .fp-smart-search__submit,
    .fp-msearch .fp-smart-search__submit {
        height: 34px;
        padding: 0 12px 0 10px;
        gap: 6px;
        font-size: 12px;
    }

    .fp-smart-search__submit-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }
}

/* Page-level search bar ka button thumb-friendly rehta hai. */
@media (max-width: 900px) {
    .fp-smart-search--page .fp-smart-search__submit {
        height: 38px;
        padding: 0 13px 0 11px;
    }
}

@media (max-width: 420px) {
    .fp-smart-search__submit,
    .friende-topbar-inner .fp-smart-search--header .fp-smart-search__submit,
    .fp-msearch .fp-smart-search__submit {
        height: 32px;
        padding: 0 10px 0 9px;
        gap: 5px;
        font-size: 11px;
    }

    .fp-smart-search__icon {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }

    .fp-smart-search__icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ---------- 6. Dark theme ---------- */
.dark .fp-smart-search__icon,
[data-theme="dark"] .fp-smart-search__icon {
    color: color-mix(in srgb, var(--c-text, #e5e7eb) 55%, transparent);
}

/* ---------- 7. Motion-safe ---------- */
@media (prefers-reduced-motion: reduce) {
    .fp-smart-search__submit,
    .fp-smart-search__submit:hover,
    .fp-smart-search__submit:active {
        transition: none;
        transform: none;
    }
}

/* ---------- 8. Mobile dock: pill button ko bar ke andar rakhna ----------
   FIX (user screenshot): mobile dock me submit ka flex-basis 38px tha aur
   sirf `width: auto !important` override hota tha, is liye chaura "Search"
   pill bar ke round kinare se bahar nikal kar placeholder text ke upar
   chadh jata tha. Ab basis bhi auto hai, row me thoda right padding hai,
   aur input min-width:0 + ellipsis rakhta hai — koi overlap nahi. */
.fp-msearch .fp-smart-search__row {
    padding-right: 6px;
    gap: 8px;
    overflow: hidden;
}

.fp-msearch .fp-smart-search__submit {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 55%;
    font-size: 0;
}

.fp-msearch .fp-smart-search__submit .fp-smart-search__submit-label {
    font-size: 12.5px;
}

.fp-msearch .fp-smart-search__input {
    min-width: 0;
    text-overflow: ellipsis;
}

@media (max-width: 420px) {
    .fp-msearch .fp-smart-search__submit {
        flex: 0 0 auto !important;
        width: auto !important;
        height: 32px;
        padding: 0 11px 0 9px;
    }
}


/* Fix: Mobile header search hide */
@media (max-width: 900px) {
  .friende-topbar-inner .fp-smart-search--header,
  .friende-topbar-inner form.fp-smart-search--header,
  header.friende-topbar .fp-smart-search--header { display: none !important; }
}
/* --- Mobile Search Button Follow Style --- */
@media (max-width: 900px) {
  .fp-smart-search__submit,
  .friende-topbar-inner .fp-smart-search--header .fp-smart-search__submit,
  .fp-msearch .fp-smart-search__submit,
  .fp-smart-search--page .fp-smart-search__submit {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    gap: 5px !important;
    line-height: 1 !important;
    background: #1877f2 !important;
    border: 1.5px solid transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    transition: background .18s ease, transform .12s ease !important;
  }
  .fp-smart-search__submit:hover:not(:disabled) {
    background: #1568d1 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .fp-smart-search__submit:active:not(:disabled) {
    transform: scale(0.96) !important;
  }
  .fp-smart-search__submit-icon {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    stroke-width: 2.5 !important;
  }
  .fp-smart-search__submit-label {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
}
/* --- Search Placeholder Overflow Fix --- */
.fp-smart-search__row {
  max-width: 100% !important;
  overflow: hidden !important;
}
.fp-smart-search__input {
  min-width: 0 !important;
  max-width: 100% !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
.fp-smart-search__input::placeholder {
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}