/* ============================================================
 * dlhh-nav.css — الترس ونافذته والشريط السفليّ
 * ============================================================
 * على مستوى الموقع كلّه. بلا جافاسكربت: النافذة تُفتح بخانة اختيار
 * مخفيّة، والشريط ثابتٌ في أسفل الشاشة والفوتر يمرّ تحته.
 * ============================================================ */

:root{
  --dlhh-nav-h:55px;
  --dlhh-nav-bg:#1b1e26;
  --dlhh-nav-fg:#c3c7d4;
  --dlhh-nav-on:#c9a84b;
  --dlhh-nav-bd:#2a2f3b;

  --dlhh-md-bg:#171a22;
  --dlhh-md-fg:#e7e9f2;
  --dlhh-md-mute:#8b90a3;
  --dlhh-md-bd:#262b37;
}

/* ============ زرّ الترس في الهيدر ============ */

/* بشكل زرَّي الوضع واللغة اللذين حلّ محلّهما */
.hp-gear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid #c9a84b;
  border-radius:8px;
  color:#c9a84b;
  background:transparent;
  cursor:pointer;
  transition:background .2s, color .2s;
}

.hp-gear:hover,
.hp-gear:focus-visible{background:#c9a84b;color:#161616;outline:0;}

.hp-gear svg{width:20px;height:20px;}

/* ============ النافذة ============ */

/* ————— الخانة التي تتحكّم في النافذة —————
   النقر على label يُركّز الخانة المرتبطة به، ومتصفّحات الجوّال
   والتابلت تمرّر الصفحة إلى العنصر المُركَّز. وكانت الخانة تُطبع في
   آخر الصفحة بلا إحداثيات، فتنزل الصفحة إلى نهايتها.

   فثُبّتت في أعلى الشاشة: تبقى داخل ما يُرى دائمًا، فلا تمرير. */
.dlhh-gear-t{
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.dlhh-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.dlhh-gear-t:checked ~ .dlhh-modal{display:flex;}

/* لا تمرير للصفحة خلف النافذة المفتوحة */
body:has(.dlhh-gear-t:checked){overflow:hidden;}

.dlhh-modal-bg{
  position:absolute;
  inset:0;
  background:rgba(8,10,14,.62);
  backdrop-filter:blur(2px);
  cursor:pointer;
}

.dlhh-modal-box{
  position:relative;
  width:100%;
  max-width:400px;
  background:var(--dlhh-md-bg);
  color:var(--dlhh-md-fg);
  border:1px solid var(--dlhh-md-bd);
  border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.65);
  overflow:hidden;
  animation:dlhh-in .18s ease-out;
}

@keyframes dlhh-in{
  from{opacity:0;transform:translateY(8px) scale(.98);}
  to{opacity:1;transform:none;}
}

@media (prefers-reduced-motion:reduce){
  .dlhh-modal-box{animation:none;}
}

.dlhh-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--dlhh-md-bd);
}

.dlhh-modal-h{
  font-size:15.5px;
  font-weight:800;
}

.dlhh-modal-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:8px;
  color:var(--dlhh-md-mute);
  cursor:pointer;
  transition:background .15s, color .15s;
}

.dlhh-modal-x:hover,
.dlhh-modal-x:focus-visible{background:rgba(255,255,255,.06);color:var(--dlhh-md-fg);outline:0;}

.dlhh-modal-x svg{width:18px;height:18px;}

/* ============ السطور ============ */

/* ————— قابلة للزيادة —————
   كل سطر مستقلّ بفاصل خفيف، فإضافة سطر لا تمسّ ما سواه. */
.dlhh-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:58px;
  padding:10px 18px;
  border-bottom:1px solid var(--dlhh-md-bd);
}

.dlhh-row:last-child{border-bottom:0;}

.dlhh-row-l{
  font-size:14.5px;
  font-weight:600;
}

.dlhh-row-a{display:inline-flex;}

/* الزرّان داخل النافذة: بلا الهامش الذي في الهيدر */
.dlhh-row-a .hp-theme{margin-inline-end:0;}

/* ————— البحث ————— */
.dlhh-row-search{padding-block:14px;}

.dlhh-search{
  display:flex;
  width:100%;
  border:1px solid var(--dlhh-md-bd);
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  transition:border-color .15s;
}

.dlhh-search[hidden]{display:none;}

.dlhh-search:focus-within{border-color:#c9a84b;}

.dlhh-search input{
  flex:1 1 auto;
  min-width:0;
  height:42px;
  padding:0 14px;
  border:0;
  background:transparent;
  color:var(--dlhh-md-fg);
  font:inherit;
  font-size:14.5px;
  outline:0;
}

.dlhh-search input::placeholder{color:var(--dlhh-md-mute);}

.dlhh-search button{
  flex:0 0 auto;
  width:46px;
  border:0;
  background:transparent;
  color:#c9a84b;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.dlhh-search button svg{width:18px;height:18px;}

/* ————— التنبيه ————— */
.dlhh-row-note{
  justify-content:flex-start;
  gap:9px;
  min-height:0;
  padding-block:12px 14px;
  color:var(--dlhh-md-mute);
  font-size:12.5px;
  line-height:1.7;
}

.dlhh-row-note svg{width:15px;height:15px;flex:0 0 auto;}

/* ============ الشريط السفليّ ============ */

/* ————— ثابتٌ دائمًا —————
   ملتصق بأسفل الشاشة، والفوتر يمرّ تحته. ومسافته محجوزة أسفل
   الصفحة فلا يُحجب آخرها. */
.dlhh-has-bar{padding-bottom:var(--dlhh-nav-h);}

.dlhh-bar{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:9990;
  display:flex;
  height:var(--dlhh-nav-h);
  background:var(--dlhh-nav-bg);
  border-top:1px solid var(--dlhh-nav-bd);
  box-shadow:0 -6px 18px -12px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* العناصر مقسّمة بالتساوي بعرض الشاشة */
.dlhh-bar-i{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:var(--dlhh-nav-fg);
  text-decoration:none;
  cursor:pointer;
  transition:color .15s, background .15s;
}

.dlhh-bar-i svg{width:21px;height:21px;flex:0 0 auto;}

.dlhh-bar-t{
  max-width:100%;
  padding:0 4px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dlhh-bar-i:hover,
.dlhh-bar-i:focus-visible{color:#fff;outline:0;}

/* الصفحة الحالية */
.dlhh-bar-i.is-on{color:var(--dlhh-nav-on);}

.dlhh-bar-i.is-on::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  width:28px;
  height:2px;
  border-radius:0 0 2px 2px;
  background:var(--dlhh-nav-on);
}

.dlhh-bar-i{position:relative;}

/* الجوّال: ما لم يُعلَّم للجوّال يُخفى */
@media (max-width:600px){
  .dlhh-bar-i.dlhh-no-mob{display:none;}
}

/* ============ الوضع الفاتح ============ */

html.dlh-light{
  --dlhh-nav-bg:#ffffff;
  --dlhh-nav-fg:#475467;
  --dlhh-nav-on:#b8912d;
  --dlhh-nav-bd:#e6eaf0;

  --dlhh-md-bg:#ffffff;
  --dlhh-md-fg:#101828;
  --dlhh-md-mute:#667085;
  --dlhh-md-bd:#eaecf0;
}

html.dlh-light .dlhh-bar{box-shadow:0 -6px 18px -12px rgba(16,24,40,.18);}
html.dlh-light .dlhh-bar-i:hover,
html.dlh-light .dlhh-bar-i:focus-visible{color:#101828;}

html.dlh-light .dlhh-modal-x:hover{background:#f2f4f7;}
html.dlh-light .dlhh-search{background:#f9fafb;}