/* ============================================================
   search.css — صفحة البحث الموحّد + زر البحث فى الرئيسية
   موبايل-أول · RTL · متوافق مع design tokens
   ============================================================ */

/* ── أيقونة البحث فى البار العلوى — تظهر فى الصفحة الرئيسية فقط ──
   بتورّث ستايل .iconbtn بالكامل (grid + place-items:center) فتبقى
   مطابقة لباقى أيقونات البار (تحديث/لغة/وضع). */
.top-search-btn{ display:none !important; }
html[data-active-page="home"] .top-search-btn{ display:grid !important; }

/* ── زر فتح البحث فى الصفحة الرئيسية ── */
.gs-openbtn{
  display:flex; align-items:center; gap:11px; inline-size:100%;
  background:var(--surface); border:1.5px solid var(--card-line,var(--line));
  border-radius:14px; padding:15px 16px; margin-block-end:20px;
  color:var(--txt-3); font-family:inherit; font-size:14.5px; font-weight:600;
  cursor:pointer; text-align:start; min-block-size:54px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.gs-openbtn:hover{ border-color:var(--accent); color:var(--txt-2); }
.gs-openbtn .ic{ inline-size:20px; block-size:20px; color:var(--accent); flex:0 0 auto; }
.gs-openbtn span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── صفحة البحث ── */
.srch-bar{ display:flex; gap:10px; margin-block-end:14px; flex-wrap:wrap; }
.srch-inputwrap{
  flex:1; min-inline-size:180px; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1.5px solid var(--card-line,var(--line));
  border-radius:13px; padding:0 14px; transition:border-color .15s ease, box-shadow .15s ease;
}
.srch-inputwrap:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.srch-searchic{ inline-size:20px; block-size:20px; color:var(--txt-3); flex:0 0 auto; }
.srch-input{
  flex:1; min-inline-size:0; border:0; background:transparent; outline:none;
  color:var(--txt); font-family:inherit; font-size:16px; font-weight:600; padding:14px 0; min-block-size:52px;
}
.srch-input::placeholder{ color:var(--txt-3); font-weight:500; }
.srch-btn{ flex:0 0 auto; min-block-size:52px; padding-inline:22px; gap:7px; font-weight:800; }

/* فلتر النوع (سيجمنت مشتركين | كروت) — يظهر فقط لو الحساب mixed */
.srch-filter{ display:flex; gap:4px; margin-block-end:16px; background:var(--surface); border:1px solid var(--card-line,var(--line)); border-radius:12px; padding:4px; }
.srch-filter[hidden]{ display:none; }
.srch-seg{
  flex:1; background:transparent; border:0; color:var(--txt-2); border-radius:9px;
  padding:10px 14px; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
  min-block-size:42px; transition:background .12s ease, color .12s ease;
}
.srch-seg.active{ background:var(--accent-soft); color:var(--accent); }

/* النتائج */
#srchResults{ display:flex; flex-direction:column; gap:4px; }
.srch-cat{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--txt-3);
  padding:14px 4px 6px;
}
.srch-cat .ic{ inline-size:15px; block-size:15px; color:var(--txt-3); }
.srch-cat span{ margin-inline-start:auto; background:var(--surface-3); color:var(--txt-2); font-size:11px; padding:1px 8px; border-radius:999px; }

.srch-row{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--card-line,var(--line));
  border-radius:12px; padding:12px; cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.srch-row:hover, .srch-row:focus{ border-color:var(--accent); background:var(--surface-2); outline:none; }
.srch-ic{ flex:0 0 auto; inline-size:38px; block-size:38px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.srch-ic .ic{ inline-size:18px; block-size:18px; }
.srch-txt{ flex:1; min-inline-size:0; display:flex; flex-direction:column; gap:2px; }
.srch-rtitle{ font-weight:800; font-size:14.5px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,monospace; direction:ltr; text-align:start; }
.srch-meta{ font-size:12.5px; color:var(--txt-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srch-go{ flex:0 0 auto; inline-size:16px; block-size:16px; color:var(--txt-3); }

.srch-empty, .srch-state{ text-align:center; color:var(--txt-2); padding:40px 20px; font-size:14px; }
.srch-spin{
  display:inline-block; inline-size:16px; block-size:16px; vertical-align:-3px;
  border:2px solid var(--surface-3); border-block-start-color:var(--accent);
  border-radius:50%; animation:srchSpin .8s linear infinite; margin-inline-end:6px;
}
@keyframes srchSpin{ to{ transform:rotate(360deg); } }

@media(max-width:560px){
  .srch-btn span{ display:none; }        /* على الموبايل: أيقونة بحث فقط */
  .srch-btn{ padding-inline:16px; }
}