/* ===== Universal search (owner 2026-11-03) — top-bar suggestions (partials/front_top.ejs, public/js/search.js) + results page
   (views/search/index.ejs). Loaded by views/layouts/front.ejs. Logical properties only (LTR + RTL). ===== */
.dx-hue-teal  { --h: #0b7a6e; --h-soft: #dcf3ef; --h-band: #effaf8; --h-line: rgba(11,122,110,.30); }
.dx-hue-green { --h: #2b7a1f; --h-soft: #e5f4df; --h-band: #f3faf0; --h-line: rgba(43,122,31,.30); }

/* the visitor's «Sign in» icon shows on small phones only */
.fx-in-ic .bi { display: none; }

/* the top-bar box: never clip the typed text on small phones (360–390 px) */
.fx-search input { min-width: 0; text-overflow: ellipsis; }
.fx-search input::placeholder { color: #7b879b; opacity: 1; text-overflow: ellipsis; }
.fx-search input::-webkit-search-cancel-button { margin-inline-start: .2rem; }
@media (max-width: 420px) {
  .fx-top-in { gap: .4rem; padding: 0 .55rem; }
  .fx-logo img { height: 24px; }
  /* visitor: «Sign in» becomes an icon button so the search box keeps room for its placeholder */
  .fx-in.fx-in-ic { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
  .fx-in.fx-in-ic .fx-in-l { display: none; }
  .fx-in.fx-in-ic .bi { display: inline-block; }
  .fx-search { min-width: 0; }
  .fx-search i { inset-inline-start: 11px; font-size: .9rem; }
  .fx-search input { padding-inline: 32px 10px; font-size: 16px; }   /* 16 px: iOS does not zoom the page on focus */
  .fx-search input::placeholder { font-size: 14px; }
}
@media (max-width: 380px) {
  /* member bar on a 360 px phone: ☰ · logo · search · bell · avatar — slimmer round buttons leave the placeholder whole */
  .fx-top-in { gap: .3rem; padding: 0 .45rem; }
  .fx-top-in .fx-ic { width: 34px; height: 34px; font-size: 1rem; }
  .fx-top-in .fx-me-btn .avatar-circle { width: 32px; height: 32px; }
  .fx-logo img { height: 22px; }
}

/* suggestions dropdown (front.css positions every `.fx-search i` as the magnifier — undo that inside the list) */
.gs-sugg i { position: static; transform: none; inset: auto; color: inherit; pointer-events: none; }
.gs-sugg .gs-pic > i { position: relative; z-index: 0; }
.gs-sugg { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 1060; background: #fff; border: 1px solid #dfe6f0; border-radius: 14px;
  box-shadow: 0 .75rem 1.75rem rgba(15,23,40,.16); overflow: auto; max-height: min(70vh, 560px); padding: .3rem 0; }
.gs-h { padding: .5rem .9rem .2rem; font-size: .72rem; font-weight: 800; color: #6b7890; text-transform: uppercase; letter-spacing: .03em; }
html[lang=ar] .gs-h { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.gs-i { display: flex; align-items: center; gap: .65rem; padding: .5rem .9rem; color: var(--dx-text); min-height: 48px; }
.gs-i:hover, .gs-i.is-on { background: #f1f5fb; }
.gs-pic { position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px; background: #eef2f8; color: #4a5a72; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1rem; }
.gs-pic.is-round { border-radius: 50%; }
.gs-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.gs-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gs-tx b { font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-tx small { color: #6b7890; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-price { flex: 0 0 auto; color: #15803d; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.gs-none { padding: .7rem .9rem; color: #6b7890; font-size: .88rem; }
.gs-all { border-top: 1px solid #eef2f7; margin-top: .25rem; color: var(--dx-accent); }
.gs-all .gs-pic { background: var(--dx-accent-soft, #e7f0fd); color: var(--dx-accent); }
.gs-hue-blue { background: #e7f0fd; color: #0b5fc7; } .gs-hue-teal { background: #dcf3ef; color: #0b7a6e; } .gs-hue-rose { background: #fce8ea; color: #b3202f; }
.gs-hue-indigo { background: #eaecfb; color: #3a44b0; } .gs-hue-violet { background: #f0eafb; color: #6a3fb5; } .gs-hue-amber { background: #fdefd9; color: #8a4a00; }
.gs-hue-sky { background: #dff3fb; color: #04709b; } .gs-hue-green { background: #e5f4df; color: #2b7a1f; } .gs-hue-slate { background: #e9edf3; color: #3c4a60; }
@media (max-width: 575.98px) {
  /* phones: the list spans the whole bar width under the top bar */
  .dx-gs .gs-sugg { position: fixed; inset-inline: .5rem; top: calc(58px + var(--dx-sat, env(safe-area-inset-top, 0px)) + 2px); max-height: calc(100vh - 150px); }
  .dx-gs .gs-sugg .gs-i { min-height: 52px; }
}

/* results page */
.sr-head { margin: .2rem 0 .7rem; }
.sr-head .dx-sec-t { font-size: 1.2rem; overflow-wrap: anywhere; }
.sr-tabs .sr-n { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 999px; background: rgba(15,23,40,.07); font-size: .76rem; text-align: center; }
.sr-tabs .is-on .sr-n { background: rgba(255,255,255,.25); }
.sr-list { display: flex; flex-direction: column; gap: 1rem; }
.sr-sec { background: #fff; border: 1px solid #e3e9f2; border-radius: 18px; overflow: hidden; }
.sr-sec-h { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem .6rem; border-bottom: 1px solid #eef2f7; background: var(--h-band, #f6f8fb); }
.sr-sec-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--h-soft); color: var(--h); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.sr-sec-h h2 { flex: 1 1 auto; margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--dx-text); }
.sr-sec-h .sr-n { color: var(--h); background: var(--h-soft); border-radius: 999px; padding: 0 .5em; font-size: .8rem; margin-inline-start: .25rem; }
.sr-more { font-weight: 700; font-size: .86rem; color: var(--h); white-space: nowrap; }
.sr-rows { display: flex; flex-direction: column; }
.sr-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; color: var(--dx-text); border-bottom: 1px solid #f1f4f8; min-height: 64px; }
.sr-row:last-child { border-bottom: 0; }
.sr-row:hover { background: #f7f9fc; }
.sr-pic { position: relative; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px; background: var(--h-soft); color: var(--h); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; overflow: hidden; }
.sr-pic.is-round { border-radius: 50%; }
.sr-pic.is-blur { background: linear-gradient(135deg, #3c5a64, #1d2f38); color: #fff; }
.sr-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.sr-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; line-height: 1.3; }
.sr-t b { font-weight: 750; font-size: .97rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-t { display: flex; align-items: flex-start; gap: .25rem; }
.sr-s { color: #5b6a82; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-m { color: #7b879b; font-size: .76rem; display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.sr-k { color: var(--h); font-weight: 700; }
.sr-price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: .88rem; white-space: nowrap; }
.sr-price b { color: #15803d; font-weight: 800; }
.sr-price s { color: #8a96a8; font-size: .76rem; }
.sr-go { color: #b4bfcf; flex: 0 0 auto; }
.sr-none { padding: 1rem; margin: 0; color: #6b7890; }
.sr-note { margin: 0; padding: .55rem 1rem; font-size: .82rem; color: #5b6a82; background: #fff8ec; border-top: 1px solid #f6e7c8; }
.sr-sec-f { padding: .55rem 1rem; border-top: 1px solid #eef2f7; font-size: .85rem; }
.sr-sec-f a { color: var(--h); font-weight: 700; }
.sr-empty .sr-try { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1rem; }
.sr-browse { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .5rem; align-items: center; }
.sr-browse small { width: 100%; color: #7b879b; font-weight: 700; }
.sr-bx { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 10px; background: #f1f5fb; color: var(--dx-text-2); font-weight: 650; font-size: .86rem; }
.sr-bx:hover { background: #e6edf8; color: var(--dx-accent); }
@media (max-width: 575.98px) {
  .sr-row { padding: .65rem .8rem; gap: .65rem; }
  .sr-pic { flex-basis: 46px; width: 46px; height: 46px; }
  .sr-go { display: none; }
  .sr-sec-h { flex-wrap: wrap; }
}