/* === Navbar Search (Dark theme + mobile) === */
.nb__bar.container{ display:flex; align-items:center; gap:.75rem; }
.nb__search{ flex: 1 1 520px; max-width: 760px; display:flex; align-items:center; }
.nb__search form{ position:relative; width:100%; }
.nb__search input[type="search"]{
  width:100%; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:#0f1629; color:#e7ebf3; padding:0 46px 0 14px; outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nb__search input[type="search"]::placeholder{ color:#9aa3b2; }
.nb__search input[type="search"]::placeholder{ color:#9aa3b2; }
:root.light .nb__search input[type="search"]{
  width:100%; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:#0f1629; color:#e7ebf3; padding:0 46px 0 14px; outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nb__search input[type="search"]::placeholder{ color:#9aa3b2; }
.nb__search .s-icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  opacity:.75; pointer-events:none;
}
/* Results dropdown */
.nb__s-results{
  position:absolute; top:48px; left:0; right:0; z-index:60;
  background:#0f1629; color:#e7ebf3; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  max-height:60vh; overflow-y:auto;
}
:root.light .nb__s-results{
  position:absolute; top:48px; left:0; right:0; z-index:60;
  background:#0f1629; color:#e7ebf3; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  max-height:60vh; overflow-y:auto;
}
.nb__s-results[hidden]{ display:none; }
.nb__s-results a{ display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; color:inherit; text-decoration:none; }
.nb__s-results a:hover{ background:rgba(255,255,255,.06); }
:root.light .nb__s-results a:hover{ background:rgba(255,255,255,.06); }
.nb__s-results img{ width:28px; height:28px; object-fit:cover; border-radius:6px; }
.nb__s-empty{ padding:.6rem .75rem; color:#9aa3b2; }

/* Filters row inside dropdown */
.nb__s-filters{ display:flex; gap:.5rem; align-items:center; padding:.5rem .75rem; border-bottom:1px solid rgba(255,255,255,.08); }
:root.light .nb__s-filters{ border-color: rgba(0,0,0,.08); }
.nb__chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .55rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); cursor:pointer; user-select:none; font-size:.9rem;
}
.nb__chip input{ display:none; }
.nb__chip.active{ background:rgba(98,214,255,.14); border-color: rgba(98,214,255,.45); }
.nb__s-more{ padding:.55rem .75rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:flex-end; }
.nb__s-more a{ color:#62d6ff; text-decoration:none; }

/* Currency switcher flags */
.nb__currency{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid rgba(255,255,255,.14); padding:.35rem .5rem; border-radius:10px; }
.nb__flag{ font-size:1rem; }
.nb__currency select{ background:transparent; color:inherit; border:none; outline:none; }
:root.light .nb__currency{ border-color: rgba(0,0,0,.14); }

/* Mobile */
@media (max-width: 900px){
  .nb__search{ order: 3; flex-basis: 100%; max-width: none; }
  .nb__s-results{
  position:absolute; top:48px; left:0; right:0; z-index:60;
  background:#0f1629; color:#e7ebf3; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  max-height:60vh; overflow-y:auto;
}
}

/* Spacing fixes to avoid crowding */
.nb__bar.container{ display:flex; align-items:center; gap: 1rem; }
.nb__brand{ margin-inline-end:.25rem; }
.nb__search{ flex:1 1 540px; max-width: 700px; }
.nb__nav{ margin-inline-start:.5rem; gap:.35rem; }
@media (max-width: 900px){
  .nb__bar.container{ gap:.6rem; }
  .nb__nav{ margin:0; }
  .nb__search{ order:3; flex-basis:100%; max-width:none; }
}


/* ===== Spacing fixes (prevent crowding) ===== */
.nb__bar.container{ display:flex; align-items:center; gap:1rem; }
.nb__nav{ margin-inline-start:.75rem; gap:.5rem; }
@media (max-width: 1100px){ .nb__nav{ gap:.35rem; } }
@media (max-width: 900px){
  .nb__nav{ margin:0; }
  .nb__search{ order:3; flex-basis:100%; max-width:none; }
}

/* ===== Expandable Search ===== */
/* collapsed state shows only a circular lens button */
.nb__search{ position:relative; transition: width .25s ease, flex-basis .25s ease; }
.nb__search.collapsed{ flex:0 0 44px; width:44px; }
.nb__search.collapsed form{ width:44px; }
.nb__search.collapsed input[type="search"]{ width:44px; padding:0; border-radius:999px; text-indent:-9999px; }
.nb__search.collapsed .s-icon{ right:11px; }
.nb__search:not(.collapsed){ flex:1 1 560px; max-width:720px; }

/* input and dropdown sizing */
.nb__search form{ position:relative; width:100%; }
.nb__search input[type="search"]{
  width:100%; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:#0f1629; color:#e7ebf3; padding:0 46px 0 14px; outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nb__search input[type="search"]::placeholder{ color:#9aa3b2; }
.nb__search input[type="search"]::placeholder{ color:#6b7280; }
.nb__search .s-icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.75; pointer-events:none; }

/* results dropdown matches input width */
.nb__s-results{
  position:absolute; top:48px; left:0; right:0; z-index:60;
  background:#0f1629; color:#e7ebf3; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  max-height:60vh; overflow-y:auto;
}

/* results item layout: full text visible, wrap allowed */
.nb__s-results a{
  display:grid; grid-template-columns: 32px 1fr; align-items:center; gap:.6rem;
  padding:.6rem .75rem; color:inherit; text-decoration:none; line-height:1.2;
  white-space: normal; word-break: break-word;
}
.nb__s-results a:hover{ background:rgba(255,255,255,.06); }
.nb__s-results img{ width:28px; height:28px; object-fit:cover; border-radius:6px; }
.nb__s-empty{ padding:.6rem .75rem; color:#6b7280; }

/* Filters row at top of dropdown */
.nb__s-filters{ display:flex; gap:.5rem; align-items:center; padding:.5rem .75rem; border-bottom:1px solid rgba(0,0,0,.08); background:#fff; position:sticky; top:0; z-index:1; }
.nb__chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .55rem; border-radius:999px; background:#f3f6fb; border:1px solid rgba(0,0,0,.08); cursor:pointer; user-select:none; font-size:.9rem; }
.nb__chip.active{ background:#e6f3ff; border-color:#b6e0ff; }

.nb__s-more{ padding:.55rem .75rem; border-top:1px solid rgba(0,0,0,.08); display:flex; justify-content:flex-end; background:#fff; }

/* Mobile considerations */
@media (max-width: 900px){
  .nb__search.collapsed{ flex-basis:44px; }
  .nb__search:not(.collapsed){ flex-basis:100%; max-width:none; }
}


/* --- Keep nav labels on one line --- */
.nb__nav .nb__link,
.nb__dd-btn { white-space: nowrap; }
.nb__dd-btn br { display: none !important; }


/* === Expanded search sizing & colors (dark) === */
.nb__search{ position:relative; transition: flex-basis .25s ease, width .25s ease; }
.nb__search.active{ flex: 1 1 760px; max-width: 820px; }
.nb__search input[type="search"]{
  background:#0f1629; color:#ffffff; border:1px solid rgba(255,255,255,.22);
}
.nb__search input[type="search"]::placeholder{ color:#c9d2e6; }

.nb__s-results{
  background:#0f1629; color:#ffffff; border:1px solid rgba(255,255,255,.18);
  max-height: 72vh;
}
.nb__s-results .group-title{
  padding:.5rem .75rem; font-weight:700; opacity:.9; position:sticky; top:0; background:#0f1629;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Larger rows so the product appears clearly */
.nb__s-results a{
  grid-template-columns: 56px 1fr; gap:.8rem; padding:.7rem .9rem; line-height:1.25;
  color:#ffffff;
}
.nb__s-results img{ width:48px; height:48px; border-radius:10px; }
.nb__s-results .subtitle{ font-size:.9rem; opacity:.75; }

/* On hover, slightly lift background */
.nb__s-results a:hover{ background: rgba(255,255,255,.07); }

/* Mobile full width behavior */
@media (max-width: 900px){
  .nb__search.active{ flex-basis: 100%; max-width: none; }
}


/* ===== Two-row navbar like screenshot ===== */
.nb.navbar-pro{ position:sticky; top:0; z-index:50; }
.nb__bar.container{ display:flex; align-items:center; gap:1rem; padding:.6rem 1rem; border-bottom:1px solid rgba(255,255,255,.12); }
:root.light .nb__bar.container{ border-bottom:1px solid rgba(0,0,0,.12); }
.nb__bottom.container{ display:flex; align-items:center; padding:.45rem 1rem; gap:1rem; }
.nb__bottom .nb__nav{ flex:1; display:flex; align-items:center; gap:1.2rem; font-weight:700; letter-spacing:.02em; }
.nb__bottom .nb__nav .nb__link{ text-transform: uppercase; font-size:.95rem; color:#e7ebf3; }
:root.light .nb__bottom .nb__nav .nb__link{ color:#0f172a; }

/* make right-side CTAs can sit after nav if any */
.nb__right{ margin-inline-start:auto; display:flex; align-items:center; gap:.8rem; }

/* Search white capsule */
.nb__search{ flex: 1 1 680px; max-width: 820px; }
.nb__search form{ position:relative; width:100%; }
.nb__search input[type="search"]{
  width:100%; height:44px; border-radius:999px; padding:0 46px 0 14px;
  background:#ffffff; color:#0f172a; border:1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.06);
}
.nb__search input[type="search"]::placeholder{ color:#6b7280; }
.nb__search .s-icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.6; }

/* Results dropdown (light, full width of input) */
.nb__s-results{
  position:absolute; top:48px; left:0; right:0; z-index:60;
  background:#ffffff; color:#0f172a; border-radius:12px; overflow:hidden;
  border:1px solid rgba(0,0,0,.12); box-shadow:0 10px 28px rgba(0,0,0,.15);
  max-height:60vh; overflow-y:auto;
}
.nb__s-results a{ display:grid; grid-template-columns:36px 1fr; gap:.7rem; padding:.65rem .8rem; color:inherit; text-decoration:none; line-height:1.25; }
.nb__s-results a:hover{ background:#dd4b1a; }
.nb__s-results img{ width:32px; height:32px; border-radius:8px; }
.nb__s-empty{ padding:.6rem .75rem; color:#6b7280; }

/* Keep nav labels on one line */
.nb__nav .nb__link, .nb__dd-btn{ white-space: nowrap; }
.nb__dd-btn br{ display:none!important; }

/* Responsive */
@media (max-width: 1080px){
  .nb__search{ flex-basis: 520px; }
  .nb__bottom .nb__nav{ gap:.9rem; font-size:.92rem; }
}
@media (max-width: 900px){
  .nb__bar.container{ flex-wrap: wrap; }
  .nb__search{ order: 2; flex-basis:100%; max-width:none; }
  .nb__bottom.container{ overflow-x:auto; scrollbar-width:none; }
  .nb__bottom.container::-webkit-scrollbar{ display:none; }
}


/* Ensure dropdown not clipped */
header.nb, header.navbar-pro, .nb__bar.container, .nb__search, .nb__bottom.container{ overflow: visible; }
.nb__s-results{ z-index: 1000; }


/* ===== Mobile-only search icon & collapsible search ===== */
#navSearchToggle{ display:none; }
@media (max-width: 900px){
  #navSearchToggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; }
  .nb__search{ order: 3; flex-basis:100%; max-width:none; }
  .nb__search.collapsed form{ display:none; }
  .nb__search.collapsed{ height:0; overflow:hidden; padding:0; margin:0; }
  .nb__s-results{ top:48px; } /* keep under input when expanded */
}


/* --- Mobile behavior: hide search in navbar by default, open from hamburger --- */
@media (max-width: 900px){
  .nb__search{ display:none; }
  .nb__search.show{ display:block; order:3; flex-basis:100%; max-width:none; }
  .nb__s-results{ top:48px; }
}


/* ===== Top strip above navbar (Loaded-style) ===== */
.nb__top{ background:#1b1f4a; color:#cfe3ff; font-size:.92rem; }
.nb__top .nb__top-inner{
  max-width:1100px; margin:0 auto; padding:.45rem 1rem;
  display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:1rem; align-items:center;
}
.nb__top .nb__top-item{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity:.95; }
@media (max-width: 1080px){
  .nb__top .nb__top-inner{ grid-template-columns: 1fr; gap:.25rem; }
  .nb__top .nb__top-item{ white-space: normal; }
}

/* Account icon button */
.nb__icon-btn.nb__account{ width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; }
.nb__auth-text{ display:none !important; } /* hide Login/Sign up texts */

/* optional: divider style like screenshot */
.nb__bar.container{ border-bottom:1px solid rgba(255,255,255,.12); }
:root.light .nb__bar.container{ border-bottom:1px solid rgba(0,0,0,.12); }


/* ===== Top strip (SVG icons + Trustpilot) ===== */
.nb__top{ background:#12142e4f; color:#cfe3ff; font-size:.92rem; }
.nb__top .nb__top-inner{
  max-width:1100px; margin:0 auto; padding:.45rem 1rem;
  display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:1rem; align-items:center;
}
.nb__top .nb__top-item{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.nb__top .nb__top-item.flex svg{ color:#62d6ff; }
.nb__top .nb__top-title{ font-weight:700; letter-spacing:.02em; }
.nb__top .nb__top-sub{ opacity:.85; }
.nb__top .center{ justify-content:center; }
.nb__stars{ display:inline-flex; gap:.2rem; margin:0 .4rem; }
.nb__trust{ color:#00b67a; font-weight:700; margin-inline-start:.4rem; }
@media (max-width: 1080px){
  .nb__top .nb__top-inner{ grid-template-columns: 1fr; gap:.25rem; text-align:center; }
  .nb__top .nb__top-item{ justify-content:center; }
}

/* Account icon button */
.nb__icon-btn.nb__account{
  width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14); background: color-mix(in oklch, #ffffff 4%, transparent);
}
:root.light .nb__icon-btn.nb__account{ border-color: rgba(0,0,0,.14); background: color-mix(in oklch, #000 3%, transparent); }
.nb__icon-btn.nb__account svg{ display:block; }

/* Remove any leftover auth text if exists */
.nb__auth-text{ display:none !important; }


/* Account icon - white outline style */
.nb__icon-btn.nb__account{
  width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25); background: transparent; color:#ffffff;
}
.nb__icon-btn.nb__account svg{ stroke:#ffffff; }
.nb__icon-btn.nb__account:hover{ background: rgba(255,255,255,.06); }
:root.light .nb__icon-btn.nb__account{ color:#0f172a; border-color: rgba(0,0,0,.18); }
:root.light .nb__icon-btn.nb__account svg{ stroke:#0f172a; }

.nb__auth .sep{ display:none !important; }
/* 🔍 الصندوق العام */
.nb__search {
  position: relative;
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}

/* ⚙️ تنسيق النموذج */
.nb__search form {
  display: flex;
  align-items: center;
  background: #0c131f;
  border-radius: 6px; /* 👈 خفيفة مش بيضاوية */
  overflow: hidden;
  border: 1px solid #ddd; /* خط بسيط أنيق */
}

/* ✏️ خانة الإدخال */
.nb__search input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  outline: none;
  font-size: 15px;
  color: #222;
  background: #fff;
}

.nb__search input::placeholder {
  color: #888;
}

/* 🧡 زر البحث */
.search-btn {
  background: #dd4b1a; /* اللون البرتقالي */
  border: none;
  color: #fff;
  width: 50px;
  height: 45px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.2s ease;
}

.search-btn:hover {
  background: #e85c2e;
  transform: scale(1.05);
}

.search-btn i {
  font-size: 16px;
}
/* يخفي زر X والعناصر التلقائية داخل input[type="search"] */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
/* خلي شريط الناف بار يسمح بظهور القائمة */
.nb,
.nb__bar,
.nb__search {
  position: relative;
  overflow: visible;
  z-index: 50;
}

/* صندوق البحث نفسه */
.nb__search form {
  position: relative;
}

/* قائمة النتائج */
.nb__s-results {
  position: absolute;
  top: calc(100% + 8px);     /* تحت البوكس مباشرة */
  left: 0;
  right: 56px;               /* سيب مساحة زر العدسة لو موجود */
  background: #0b1724;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  z-index: 9999;             /* فوق كل حاجة */
  display: none;             /* بنظهرها بالـ class */
}

/* لو الـ JS شال/حط hidden */
.nb__s-results[hidden] { display: none !important; }

/* لما نفتحه بالـ JS */
.nb__search.open .nb__s-results {
  display: block;
}

/* في الشاشات الصغيرة خلّيها تاخد العرض كله */
@media (max-width: 768px) {
  .nb__s-results { right: 0; border-radius: 10px; }
}
/* تأكد إن النتائج تظهر فوق كل شيء ومش بتتقص */
.nb__search form {
  overflow: visible !important;
  position: relative;
}

.nb__s-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,.45);
  padding: 8px;
  max-height: 400px;
  overflow-y: auto;
  display: none; /* الوضع الافتراضي */
}

/* لما الكود يشيل hidden أو يضيف class open */
.nb__s-results:not([hidden]) {
  display: block !important;
}

.nb__s-results {
  position: absolute;
  background: #fff;
  border-radius: 8px;
  top: 110%;
  left: 0;
  width: 100%;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  z-index: 20;
  padding: 10px;
}

.nb__s-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #222;
  transition: background 0.2s ease;
}

.nb__s-item img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
}

.nb__s-item:hover {
  background: #f3f3f3;
}

.nb__s-empty {
  text-align: center;
  padding: 12px;
  color: #666;
  font-size: 0.9rem;
}

.nb__s-suggest {
  text-align: center;
  color: #444;
}

.nb__s-item.suggest {
  display: inline-flex;
  justify-content: center;
  background: #fff6f0;
  border: 1px solid #ff7a00;
}
/* 🟣 شريط البحث */
.nb__search input[type="search"] {
  background: #0c131f; /* نفس لون القائمة */
  color: #fff; /* النص باللون الأبيض */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px 0 0 8px;
  padding: 10px 14px;
  width: 100%;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.3s ease;
}

.nb__search input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* 🔍 زر العدسة */
.s-icon {
  background: #dd4b1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  width: 42px;
  height: 42px;
  border-radius: 0 8px 8px 0;
  transition: all 0.3s ease;
}
.s-icon:hover {
  background: #ff6a33;
  box-shadow: 0 0 10px rgba(221, 75, 26, 0.5);
}

/* 🎯 قائمة النتائج */
.nb__s-results {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: #0c131f; /* نفس اللون */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
  padding: 6px 0;
  max-height: 420px;
  overflow-y: auto;
  z-index: 9999;
  transition: all 0.2s ease;
}

/* ✅ كل عنصر داخل القائمة */
.nb__s-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  color: #f5f5f5;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
}
.nb__s-item:last-child {
  border-bottom: none;
}

/* 🖼️ الصورة */
.nb__s-item img {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  background: #1a1f2b;
  border: 1px solid rgba(255,255,255,0.08);
}

/* 🟧 عند المرور Hover */
.nb__s-item:hover {
  background: #dd4b1a;
  color: #fff;
  transform: translateX(2px);
}

/* ⚡ الاقتراح (Did you mean) */
.nb__s-suggest {
  padding: 12px;
  text-align: left;
  color: #bbb;
}
.nb__s-suggest .nb__s-item.suggest {
  background: rgba(221,75,26,0.1);
  border-radius: 8px;
  margin-top: 8px;
  border: 1px solid rgba(221,75,26,0.3);
}

/* 🚫 لو مفيش نتائج */
.nb__s-empty {
  padding: 14px;
  text-align: center;
  font-size: 0.95rem;
  color: #ccc;
}

/* 📱 الموبايل */
@media (max-width: 768px) {
  .nb__s-results {
    position: relative;
    width: 100%;
    max-height: 300px;
  }
}


.nb__search form {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important; 
}
.nb__s-item.active {
  background-color: #dd4b1a;
  color: #fff;
  border-radius: 6px;
}
.nb__s-item.active span {
  color: #fff;
}

/* إصلاح عرض قائمة البحث في الموبايل */
.nb__s-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #111827; /* نفس لون الخلفية */
  color: #fff;
  border-radius: 6px;
  z-index: 9999;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* عناصر النتيجة */
.nb__s-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nb__s-item img {
  width: 45px;
  height: 45px;
  border-radius: 4px;
  object-fit: cover;
}

.nb__s-item:hover {
  background: #f97316; /* برتقالي */
  color: #fff;
}

/* عشان الموبايل */
@media (max-width: 768px) {
  .nb__s-results {
    position: fixed;
    top: 80px; /* حسب ارتفاع النافبار عندك */
    left: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
    z-index: 10000;
  }
}
/* قائمة نتائج البحث - وضع الموبايل */
@media (max-width: 768px) {
  .nb__search {
    position: relative;
    width: 100%;
  }

  .nb__s-results {
    position: absolute;
    top: calc(100% + 8px); /* تبقى تحت البوكس بشوية صغيرة */
    left: 0;
    width: 100%;
    background: #111827;
    color: #fff;
    border-radius: 8px;
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }

  .nb__s-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
  }

  .nb__s-item img {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    object-fit: cover;
  }

  .nb__s-item:hover {
    background: #f97316;
  }
}