/*! * Bazeh Search — live search pill + dropdown panel. * * All rules scope under `.bzh-search` so we never leak into theme inputs * elsewhere. The dropdown is positioned absolutely under the input so it * inherits horizontal width automatically. */ .bzh-search, .bzh-search * { box-sizing: border-box; } .bzh-search { --bzh-s-primary: #f05823; --bzh-s-primary-2: #ff7a3d; --bzh-s-surface: #ffffff; --bzh-s-surface-2: #f8fafc; --bzh-s-border: #e5e7eb; --bzh-s-text: #111827; --bzh-s-muted: #6b7280; --bzh-s-radius: 14px; --bzh-s-ease: cubic-bezier(0.22, 0.61, 0.36, 1); position: relative; width: 100%; max-width: 960px; margin: 0 auto; font-family: 'Vazirmatn', Tahoma, 'Iran Sans', system-ui, sans-serif; direction: rtl; } .bzh-search--full { max-width: 100%; } /* ------------------------------ Pill input ------------------------------ */ .bzh-search-form { /* `!important` here is deliberate: page builders (Elementor, Gutenberg blocks, Astra) sometimes force `form` to `display: block` or set `flex-wrap: wrap`, which makes the icons stack vertically under the input. These flags keep the pill layout on any theme. */ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px; width: 100%; max-width: 100%; background: var(--bzh-s-surface); border: 1px solid var(--bzh-s-border); border-radius: 999px; padding: 6px 10px; margin: 0; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06); transition: border-color 0.18s var(--bzh-s-ease), box-shadow 0.22s var(--bzh-s-ease); } .bzh-search.is-open .bzh-search-form, .bzh-search-form:focus-within { border-color: var(--bzh-s-primary); box-shadow: 0 8px 26px rgba(240, 88, 35, 0.18); } .bzh-search-submit, .bzh-search-clear { flex: 0 0 auto !important; display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; min-width: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--bzh-s-muted); cursor: pointer; transition: background 0.18s var(--bzh-s-ease), color 0.18s var(--bzh-s-ease); font-family: inherit; padding: 0; line-height: 0; -webkit-tap-highlight-color: transparent; } .bzh-search-submit svg, .bzh-search-clear svg { display: block; flex-shrink: 0; } .bzh-search-submit { /* `!important` guards against wp-admin button resets and theme * global `button { background: none !important }` rules that would * otherwise turn the submit into a plain gray icon. */ background: linear-gradient(135deg, var(--bzh-s-primary), var(--bzh-s-primary-2)) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(240, 88, 35, 0.28) !important; } .bzh-search-submit:hover { transform: scale(1.04); box-shadow: 0 6px 14px rgba(240, 88, 35, 0.38) !important; } .bzh-search-clear:hover { background: rgba(17, 24, 39, 0.06); color: var(--bzh-s-text); } .bzh-search-input { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: 100%; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 10px 8px; margin: 0; font-size: 15px; font-family: inherit; color: var(--bzh-s-text); direction: rtl; text-align: start; height: auto; line-height: 1.6; } .bzh-search-input::placeholder { color: var(--bzh-s-muted); opacity: 0.85; } .bzh-search-input::-webkit-search-cancel-button { display: none; } /* ------------------------------ Dropdown ------------------------------- */ /* Self-contained tokens + font: the panel is portaled to on mobile and no longer inherits from `.bzh-search`. */ .bzh-search-panel { --bzh-s-primary: #f05823; --bzh-s-primary-2: #ff7a3d; --bzh-s-surface: #ffffff; --bzh-s-surface-2: #f8fafc; --bzh-s-border: #e5e7eb; --bzh-s-text: #111827; --bzh-s-muted: #6b7280; --bzh-s-radius: 14px; --bzh-s-ease: cubic-bezier(0.22, 0.61, 0.36, 1); font-family: 'Vazirmatn', Tahoma, 'Iran Sans', system-ui, sans-serif; direction: rtl; color: var(--bzh-s-text); -webkit-font-smoothing: antialiased; } .bzh-search-panel { position: absolute; top: calc(100% + 10px); /* Widen the dropdown past the pill so long product titles & prices never wrap. On narrow viewports (<= 720px) we fall back to the input width so it still fits on screen. */ right: 0; left: auto; width: max(100%, 640px); max-width: min(900px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; overflow-x: hidden; background: var(--bzh-s-surface); border: 1px solid var(--bzh-s-border); border-radius: var(--bzh-s-radius); box-shadow: 0 20px 50px rgba(17, 24, 39, 0.18); z-index: 999; padding: 10px 4px; animation: bzh-search-in 0.18s var(--bzh-s-ease); } .bzh-search--full .bzh-search-panel { width: 100%; max-width: 100%; } /* -------------------------- Mobile top bar ------------------------------ The top bar is injected into every panel by JS so the close button survives re-renders. On desktop we just hide it — the desktop dropdown sits right under the pill so there's nothing to close explicitly. */ .bzh-search-topbar { display: none; } .bzh-search-results { display: block; } /* -------------------------- Mobile full-screen overlay ------------------ On mobile we promote the panel from a compact dropdown to a full-screen overlay (think: iOS Mail search, YouTube search). This matches the user's expectation for a mobile search flow, removes every overflow question (the panel IS the viewport so it can't overflow it), and gives us room for a dedicated header with a close button. */ .bzh-search-panel.is-mobile-overlay { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100% !important; max-width: 100vw !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; z-index: 2147483000 !important; display: flex !important; flex-direction: column !important; background: var(--bzh-s-surface-2) !important; animation: bzh-search-mobile-in 0.2s var(--bzh-s-ease); } .bzh-search-panel.is-mobile-overlay .bzh-search-topbar { display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex: 0 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px)); padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: linear-gradient(180deg, var(--bzh-s-surface) 0%, var(--bzh-s-surface-2) 100%); border-bottom: 1px solid var(--bzh-s-border); direction: rtl; } .bzh-search-panel.is-mobile-overlay .bzh-search-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(17, 24, 39, 0.06); color: var(--bzh-s-text); cursor: pointer; padding: 0; transition: background 0.18s var(--bzh-s-ease), transform 0.18s var(--bzh-s-ease); -webkit-tap-highlight-color: transparent; } .bzh-search-panel.is-mobile-overlay .bzh-search-close:hover, .bzh-search-panel.is-mobile-overlay .bzh-search-close:active { background: rgba(240, 88, 35, 0.12); color: var(--bzh-s-primary); transform: scale(0.96); } .bzh-search-panel.is-mobile-overlay .bzh-search-close svg { width: 20px; height: 20px; display: block; } .bzh-search-panel.is-mobile-overlay .bzh-search-topbar-title { display: block; font-size: 13px; font-weight: 700; color: var(--bzh-s-text); text-align: right; margin-bottom: 6px; } .bzh-search-panel.is-mobile-overlay .bzh-search-topbar-main { flex: 1 1 auto; min-width: 0; } .bzh-search-panel.is-mobile-overlay .bzh-search-topbar-input-wrap { position: relative; } .bzh-search-panel.is-mobile-overlay .bzh-search-topbar-input { width: 100%; border: 1px solid var(--bzh-s-border); border-radius: 10px; background: #fff; padding: 9px 34px 9px 10px; font: inherit; font-size: 14px; color: var(--bzh-s-text); outline: none; } .bzh-search-panel.is-mobile-overlay .bzh-search-topbar-input:focus { border-color: var(--bzh-s-primary); box-shadow: 0 0 0 3px rgba(240, 88, 35, 0.12); } .bzh-search-panel.is-mobile-overlay .bzh-search-topbar-clear { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%; background: #eef2f7; color: #475569; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 0; -webkit-tap-highlight-color: transparent; } .bzh-search-panel.is-mobile-overlay .bzh-search-topbar-clear svg { display: block; width: 14px; height: 14px; flex-shrink: 0; } .bzh-search-panel.is-mobile-overlay .bzh-search-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 12px 12px; padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; background: var(--bzh-s-surface) !important; border: 1px solid var(--bzh-s-border); border-radius: var(--bzh-s-radius); box-shadow: 0 20px 50px rgba(17, 24, 39, 0.18); } /* Prevent background scroll while the overlay is open — stops the page underneath from bouncing when the user drags inside the result list on iOS Safari. Applied to both and because some themes attach their own scrollbar management to one or the other. */ html.bzh-search-locked, body.bzh-search-locked { overflow: hidden !important; touch-action: none !important; } /* Portal root: panel is moved here on mobile so fixed positioning is not trapped under Elementor hero/slider stacking contexts. */ #bzhSearchPortalRoot.bzh-search-portal-root { position: static; z-index: auto; pointer-events: none; } #bzhSearchPortalRoot .bzh-search-panel { pointer-events: auto; } /* Keep the pill above nearby content; the portaled panel carries the extreme z-index so we do not repaint the whole header/menu stack. */ .bzh-search.is-open, .bzh-search.has-mobile-overlay { position: relative; z-index: 120; } body.bzh-search-locked .bzh-hero-slides--full, body.bzh-search-locked .bzh-section { z-index: 0 !important; } @keyframes bzh-search-mobile-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { /* Belt-and-braces: if JS fails to toggle the `.is-mobile-overlay` class (script blocked, slow connection, etc.) the panel still renders full-screen on mobile rather than overflowing. */ .bzh-search-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; z-index: 2147483000; overflow-x: hidden !important; } /* Flex rows default to `min-width: auto` on flex children, which lets their intrinsic content push the row wider than the panel. Reset that so the rows respect the panel's width and ellipsify instead. */ .bzh-search-panel .bzh-search-item { max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; padding-right: 14px; padding-left: 14px; } .bzh-search-panel .bzh-search-item > * { min-width: 0; } .bzh-search-panel .bzh-search-item--prod .bzh-search-item-media { flex: 0 0 48px; width: 48px; height: 48px; } .bzh-search-panel .bzh-search-item--prod .bzh-search-item-price { min-width: 0; margin-inline-start: 8px; font-size: 11.5px; white-space: normal; } .bzh-search-panel img { max-width: 100%; height: auto; } .bzh-search-panel .bzh-search-item--cat .bzh-search-item-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @keyframes bzh-search-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .bzh-search-panel[hidden] { display: none !important; } /* Force everything inside the results panel to render right-to-left and text-align: right. The `.bzh-search` wrapper already sets `direction: rtl`, but `display: -webkit-box` (used by the product title for line-clamp) and some themes' global `text-align: left` on `` tags can quietly flip the copy back to left. Being explicit here makes titles, statuses, and subtitles consistently hug the right edge — matching the rest of the UI. */ .bzh-search-panel, .bzh-search-panel .bzh-search-item, .bzh-search-panel .bzh-search-item-body, .bzh-search-panel .bzh-search-item-title, .bzh-search-panel .bzh-search-item-sub, .bzh-search-panel .bzh-search-group-title, .bzh-search-panel .bzh-search-status, .bzh-search-panel .bzh-search-all, .bzh-search-panel .bzh-search-topbar-input { direction: rtl; text-align: right; font-family: inherit; } .bzh-search-group-title { padding: 6px 16px 4px; font-size: 12px; font-weight: 700; color: var(--bzh-s-muted); text-transform: none; letter-spacing: 0.02em; border-bottom: 1px solid var(--bzh-s-border); margin: 6px 0 4px; } .bzh-search-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none !important; color: var(--bzh-s-text) !important; border-radius: 10px; transition: background 0.15s var(--bzh-s-ease); cursor: pointer; } .bzh-search-item:hover, .bzh-search-item.is-active { background: rgba(240, 88, 35, 0.08); } /* Category row */ .bzh-search-item--cat { padding-right: 14px; padding-left: 14px; } .bzh-search-item--cat .bzh-search-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bzh-search-item--cat .bzh-search-item-title { font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--bzh-s-border); padding-bottom: 2px; display: inline-block; width: fit-content; } .bzh-search-item--cat .bzh-search-item-title mark { background: #fef08a; color: inherit; font-weight: 800; padding: 0 2px; border-radius: 2px; } .bzh-search-item--cat .bzh-search-item-sub { font-size: 12px; color: var(--bzh-s-muted); } .bzh-search-item--cat .bzh-search-item-sub::before { content: 'در: '; opacity: 0.6; margin-inline-end: 3px; font-style: normal; } /* Product row */ .bzh-search-item--prod .bzh-search-item-media { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--bzh-s-surface-2); border: 1px solid var(--bzh-s-border); } .bzh-search-item--prod .bzh-search-item-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .bzh-search-item--prod .bzh-search-item-body { flex: 1; min-width: 0; } .bzh-search-item--prod .bzh-search-item-title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; line-height: 1.6; white-space: normal; } .bzh-search-item--prod .bzh-search-item-title mark { background: transparent; color: var(--bzh-s-primary); font-weight: 800; padding: 0; } .bzh-search-item--prod .bzh-search-item-price { flex: 0 0 auto; font-weight: 800; font-size: 13.5px; color: var(--bzh-s-text); border-bottom: 1.5px solid var(--bzh-s-text); padding-bottom: 1px; white-space: nowrap; margin-inline-start: 12px; min-width: 110px; text-align: start; direction: rtl; unicode-bidi: plaintext; } /* Status / footer rows */ .bzh-search-status { padding: 18px 16px; text-align: center; color: var(--bzh-s-muted); font-size: 13.5px; font-weight: 500; } .bzh-search-status--loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 120px; padding: 28px 20px; } .bzh-search-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(240, 88, 35, 0.16); border-top-color: var(--bzh-s-primary); animation: bzh-search-spin 0.85s linear infinite; flex-shrink: 0; } .bzh-search-status-text { font-size: 14px; font-weight: 600; color: var(--bzh-s-text); } .bzh-search-progress { display: block; width: min(220px, 72%); height: 4px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); overflow: hidden; position: relative; } .bzh-search-progress::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 42%; border-radius: inherit; background: linear-gradient(90deg, var(--bzh-s-primary), var(--bzh-s-primary-2)); animation: bzh-search-progress 1.1s ease-in-out infinite; } @keyframes bzh-search-spin { to { transform: rotate(360deg); } } @keyframes bzh-search-progress { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } } /* Loading: pill highlight + top bar on results panel */ .bzh-search.is-searching .bzh-search-form { border-color: var(--bzh-s-primary); box-shadow: 0 0 0 3px rgba(240, 88, 35, 0.14); } .bzh-search-panel.is-loading { position: relative; } .bzh-search-panel.is-loading::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--bzh-s-primary), var(--bzh-s-primary-2), var(--bzh-s-primary)); background-size: 200% 100%; animation: bzh-search-bar-top 1s linear infinite; border-radius: var(--bzh-s-radius) var(--bzh-s-radius) 0 0; pointer-events: none; } .bzh-search-panel.is-mobile-overlay.is-loading::before { border-radius: 0; } @keyframes bzh-search-bar-top { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .bzh-search-all { display: block; text-align: center; padding: 14px 16px; margin-top: 6px; border-top: 1px solid var(--bzh-s-border); color: var(--bzh-s-primary) !important; text-decoration: none !important; font-weight: 700; font-size: 13.5px; border-bottom: 1px solid var(--bzh-s-primary); width: fit-content; margin-inline: auto; padding-inline: 6px; padding-block: 6px; transition: color 0.15s var(--bzh-s-ease), border-color 0.15s var(--bzh-s-ease); } .bzh-search-all:hover { color: var(--bzh-s-primary-2) !important; border-bottom-color: var(--bzh-s-primary-2); } /* Mobile */ @media (max-width: 600px) { .bzh-search-form { padding: 4px 6px; } .bzh-search-input { font-size: 14px; padding: 8px 6px; } .bzh-search-submit, .bzh-search-clear { width: 34px; height: 34px; } .bzh-search-item--prod .bzh-search-item-media { width: 44px; height: 44px; } .bzh-search-item--prod .bzh-search-item-title { font-size: 12.5px; } .bzh-search-item--prod .bzh-search-item-price { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .bzh-search-panel { animation: none; } }