/* پیش‌نمایش جستجوی هدر (assets/js/search-preview.js) */
.cf-sp { box-sizing: border-box; position: fixed; z-index: 100000; top: 72px; left: 8px; width: 420px; max-height: min(70vh, 560px); overflow-y: auto; direction: rtl; text-align: right;
  padding: 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(18,18,24,.98); box-shadow: 0 20px 50px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-family: inherit; }
.cf-sp[hidden] { display: none; }
.cf-sp.is-loading { opacity: .75; }
.cf-sp__group { padding: 8px 10px 4px; font-size: 12px; color: #a1a1aa; }
.cf-sp__item { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 10px; color: #f4f4f5; text-decoration: none; }
.cf-sp__item:hover, .cf-sp__item.is-active { background: rgba(255,255,255,.07); }
.cf-sp__poster { flex-shrink: 0; width: 40px; height: 60px; border-radius: 6px; background: #27272a center / cover no-repeat; }
.cf-sp__avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #27272a center / cover no-repeat; }
.cf-sp__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-sp__text strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-sp__text small { font-size: 12px; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.cf-sp__text em { font-style: normal; font-size: 12px; color: #a1a1aa; }
.cf-sp__imdb { margin-inline-start: 8px; padding: 0 5px; border-radius: 4px; background: #f5c518; color: #000; font-size: 11px; font-weight: 700; }
.cf-sp__all { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 0; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 10px 10px;
  background: transparent; color: #a5b4fc; font: inherit; font-size: 13px; cursor: pointer; }
.cf-sp__all:hover { background: rgba(255,255,255,.05); }
.cf-sp__empty { padding: 18px 12px; color: #a1a1aa; font-size: 13px; text-align: center; }
@media (max-width: 768px) {
  .cf-sp { top: 64px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 80px); }
}
