/* البحث في كل الدروس — assets/search.js */

/* زر العدسة في القائمة العلوية */
.nav-search{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text-mute); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all 300ms ease; font:inherit; font-size:13px; font-weight:600;
}
.nav-search:hover{border-color:var(--glass-border-strong); color:var(--text)}
.nav-search .lbl{display:none}
.nav-search kbd{display:none}
@media (min-width:1100px){
  .nav-search{width:auto; padding:0 12px}
  .nav-search .lbl{display:inline}
  .nav-search kbd{display:inline-block}
}
/* مسافة بين الأزرار على الجوال */
@media (max-width:880px){
  .nav-search{width:42px; height:42px; margin-inline-start:auto; margin-inline-end:8px}
  .nav .theme-toggle{margin-inline-end:8px}
}

/* مربع البحث الكبير (زر يشبه حقل الإدخال) */
.search-trigger{
  display:flex; align-items:center; gap:12px; width:100%; max-width:560px;
  margin-top:26px; padding:14px 18px; border-radius:16px;
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text-dim); font:inherit; font-size:15px; text-align:start; cursor:text;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:border-color 250ms ease, box-shadow 250ms ease;
}
.search-trigger:hover,.search-trigger:focus-visible{border-color:var(--glass-border-strong); box-shadow:0 10px 30px -14px rgba(59,130,246,.6); outline:none}
.search-trigger span{flex:1}
.search-trigger kbd,.nav-search kbd,.ss-hint kbd{
  font-family:"JetBrains Mono",monospace; font-size:11px; padding:2px 7px; border-radius:6px;
  border:1px solid var(--glass-border); background:rgba(255,255,255,.06); color:var(--text-dim)
}
@media (max-width:640px){ .search-trigger kbd{display:none} }

/* رسالة «لا نتائج في هذا المسار» */
.search-all{margin-top:14px}

/* ── النافذة ── */
html.ss-lock,html.ss-lock body{overflow:hidden}
.ss{position:fixed; inset:0; z-index:1000; display:flex; justify-content:center; align-items:flex-start; padding:9vh 16px 16px}
.ss[hidden]{display:none}
.ss-back{position:absolute; inset:0; background:rgba(3,7,18,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.ss-panel{
  position:relative; width:100%; max-width:680px; max-height:78vh;
  display:flex; flex-direction:column;
  background:#0b1730; border:1px solid var(--glass-border-strong); border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7); overflow:hidden;
  animation:ssIn 180ms ease-out;
}
@keyframes ssIn{from{opacity:0; transform:translateY(-10px) scale(.98)}to{opacity:1; transform:none}}
.ss-bar{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--glass-border); color:var(--text-dim)}
.ss-input{flex:1; min-width:0; background:none; border:0; outline:0; color:var(--text); font:inherit; font-size:18px; padding:4px 0}
.ss-input::placeholder{color:var(--text-dim)}
.ss-input::-webkit-search-cancel-button{display:none}
.ss-clear{width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:var(--text-mute); font-size:18px; line-height:1; cursor:pointer}
.ss-clear[hidden]{display:none}
.ss-x{border:1px solid var(--glass-border); background:none; color:var(--text-mute); border-radius:10px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer}
.ss-status{padding:10px 18px; font-size:13px; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:8px; align-items:center; line-height:1.6}
.ss-status:empty{display:none}
.ss-sug-t{font-weight:600}
.ss-sug{border:1px solid var(--glass-border); background:rgba(255,255,255,.05); color:var(--text-mute); border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer}
.ss-sug:hover{border-color:var(--glass-border-strong); color:var(--text)}
.ss-list{list-style:none; margin:0; padding:4px 8px 10px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.ss-list:empty{display:none}
.ss-item{display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px; cursor:pointer; border:1px solid transparent}
.ss-item.on,.ss-item:hover{background:rgba(59,130,246,.12); border-color:rgba(96,165,250,.3)}
.ss-thumb{width:112px; aspect-ratio:16/9; object-fit:cover; border-radius:8px; flex-shrink:0; background:rgba(255,255,255,.06)}
.ss-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.ss-title{color:var(--text); font-weight:600; font-size:15px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ss-title mark{background:rgba(250,204,21,.28); color:inherit; border-radius:3px; padding:0 1px}
.ss-meta{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--text-dim)}
.ss-ico{width:20px !important; height:20px !important; border-radius:6px !important; font-size:9px !important; flex-shrink:0}
.ss-ex{color:#4ade80; font-weight:600}
.ss-go{color:var(--blue-400); font-size:12px; flex-shrink:0; opacity:.6}
.ss-item.on .ss-go{opacity:1}
.ss-hint{padding:10px 18px; border-top:1px solid var(--glass-border); font-size:12px; color:var(--text-dim); display:flex; gap:6px; align-items:center; flex-wrap:wrap}

/* الجوال: النافذة تملأ الشاشة */
@media (max-width:640px){
  .ss{padding:0; align-items:stretch}
  .ss-panel{max-width:none; max-height:none; height:100%; height:100dvh; border-radius:0; border:0}
  .ss-bar{padding:12px; padding-top:max(12px, env(safe-area-inset-top))}
  .ss-input{font-size:17px}   /* 16px أو أكثر يمنع التكبير التلقائي في iPhone */
  .ss-thumb{width:96px}
  .ss-title{font-size:14px}
  .ss-hint{display:none}
  .ss-list{padding-bottom:max(12px, env(safe-area-inset-bottom))}
}

/* ── المشغّل ── */
.ssp{position:fixed; inset:0; z-index:1010; display:flex; align-items:center; justify-content:center; padding:20px}
.ssp[hidden]{display:none}
.ssp-back{position:absolute; inset:0; background:rgba(3,7,18,.85); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.ssp-box{position:relative; width:100%; max-width:960px; background:#0a1628; border:1px solid var(--glass-border); border-radius:20px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.ssp-head{display:flex; align-items:center; gap:12px; padding:14px 18px}
.ssp-head h3{margin:0; flex:1; font-size:16px; color:#fff; line-height:1.5}
.ssp-close{width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; font-size:22px; cursor:pointer; flex-shrink:0}
.ssp-frame{position:relative; aspect-ratio:16/9; background:#000}
.ssp-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ssp-foot{padding:14px 18px; display:flex; flex-wrap:wrap; gap:10px}
.ssp-foot .btn{text-decoration:none; font-size:14px}
.ssp-ex{background:linear-gradient(135deg,#16a34a,#15803d); color:#fff; border:1px solid rgba(255,255,255,.15)}
.ssp-ex[hidden],.ssp-track[hidden]{display:none}
@media (max-width:640px){
  .ssp{padding:0; align-items:flex-start}
  .ssp-box{border-radius:0; border:0; min-height:100%; min-height:100dvh}
  .ssp-head{padding-top:max(14px, env(safe-area-inset-top))}
  .ssp-foot{flex-direction:column}
  .ssp-foot .btn{justify-content:center}
}

/* الوضع الفاتح */
html[data-theme="light"] .ss-panel{background:#fff}
html[data-theme="light"] .ss-back{background:rgba(15,23,42,.45)}
html[data-theme="light"] .ss-clear,html[data-theme="light"] .ss-sug{background:rgba(15,23,42,.05)}
html[data-theme="light"] .ss-item.on,html[data-theme="light"] .ss-item:hover{background:rgba(59,130,246,.08)}
html[data-theme="light"] .ss-title mark{background:rgba(250,204,21,.45)}
html[data-theme="light"] .ss-ex{color:#15803d}
html[data-theme="light"] .ssp-box{background:#fff}
html[data-theme="light"] .ssp-head h3{color:#0f172a}
html[data-theme="light"] .ssp-close{color:#0f172a; border-color:rgba(0,0,0,.12)}
html[data-theme="light"] .search-trigger kbd,html[data-theme="light"] .nav-search kbd{background:rgba(15,23,42,.04)}

@media (prefers-reduced-motion: reduce){ .ss-panel{animation:none} }