:root{
  --zg-brand:#1b4c6e; --zg-accent:#FFD700; --zg-ink:#101418;
  --zg-bg:#f7f8fb; --zg-panel:#fff; --zg-wm:rgba(27,76,110,.10);
}
.zg-nav{position:fixed; inset:0; z-index:1050; display:none}
.zg-nav.is-open{display:block}
.zg-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.82); opacity:0; transition:opacity .25s}
.zg-nav.is-open .zg-backdrop{opacity:1}
.zg-panel{position:absolute; top:0; right:0; height:100%; width:min(420px,92vw);
  background:var(--zg-panel); transform:translateX(100%); transition:.28s ease; overflow:hidden;
  border-left:1px solid rgba(0,0,0,.06)}
.zg-nav.is-open .zg-panel{transform:translateX(0)}
.zg-topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 18px}
.zg-close{background:none; border:0; font-size:28px; cursor:pointer; line-height:1}
.zg-lang{display:flex; gap:8px}
.zg-lang .lang-btn{background:var(--zg-brand); color:#fff; border:0; border-radius:4px; padding:6px 10px; font-weight:700; font-size:12px; cursor:pointer}
.zg-lang .lang-btn.active,.zg-lang .lang-btn:hover{background:var(--zg-accent); color:#000}
.zg-menu{display:flex; flex-direction:column; gap:18px; padding:20px 22px}
.zg-item{display:flex; align-items:center; justify-content:space-between; color:var(--zg-ink); font-weight:800; font-size:20px; text-decoration:none}
.zg-item:hover{opacity:.8}
.zg-sep{height:1px; background:rgba(0,0,0,.08); margin:8px 0 10px}
.zg-social{display:flex; gap:18px; padding:14px 22px 22px}
.zg-social a{color:var(--zg-brand); font-size:18px}
.zg-social a:hover{color:var(--zg-accent)}
.zg-watermark{position:absolute; top:50%; right:150px; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed; font-weight:900; letter-spacing:.2em;
  color:var(--zg-wm); font-size:clamp(28px,12vh,96px); user-select:none; pointer-events:none}
.zg-hamburger{position:fixed; top:20px; right:20px; z-index:1040; background:none; border:0; font-size:24px; cursor:pointer; color:var(--zg-brand)}
html[dir="rtl"] .zg-panel{right:auto; left:0; transform:translateX(-100%)}
html[dir="rtl"] .zg-nav.is-open .zg-panel{transform:translateX(0)}
html[dir="rtl"] .zg-watermark{right:auto; left:12px}
html[dir="rtl"] .zg-hamburger{left:20px; right:auto}


/* ===== Always-visible side rails ===== */
.zg-rail{
  position:absolute; /* يجب أن يبقى مطلقاً */
  top:50%; 
  transform:translateY(-50%); /* ضروري للتمركز العمودي */
  writing-mode:vertical-rl; 
  text-orientation:mixed;
  font-family:'NRT', Arial, sans-serif; 
  font-weight:700; 
  letter-spacing:2px;
  color:var(--zg-brand); 
  text-decoration:none; 
  font-size: clamp(16px, 1.2vw, 18px); 
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:6px 8px;
  border-radius:10px; 
  transition:opacity .2s ease, transform .2s ease, color .2s ease; 
  pointer-events:auto; 
}

.zg-rail:hover{ 
  opacity:.9; 
  /* عند التحويم، يجب أن نستخدم transform: translateY(-50%) مع التحويل الإضافي */
  transform: translateY(-50%) scale(1.02); 
  color: var(--zg-accent); 
}

/* 1. جعل النص (span) هو الحاوية التفاعلية */
.zg-rail span {
  position: relative; /* مهم: ليتموضع ::after بالنسبة له */
  z-index: 1; 
  display: block; /* لضمان أن الـ span يأخذ العرض والارتفاع الكاملين */
}

/* 2. الخط السفلي (::after) يوضع أسفل النص */
.zg-rail span::after {
  content: "";
  position: absolute;
  /* التموضع: يجب أن يكون في الأسفل (end) بالنسبة لـ writing-mode: vertical-rl */
  /* نستخدم left/right بناءً على الـ span العادي، لكن الوضع العمودي يعكسها */
  bottom: -4px; /* مسافة بسيطة من أسفل النص العمودي */
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* يجب أن يكون العرض 100% ليظهر الخط بالكامل عمودياً */
  height: 3px; 
  background: var(--zg-accent); 
  border-radius: 2px;
  /* التحكم في الظهور عبر ScaleX */
  transform: scaleY(0); 
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  z-index: 0;
}

.zg-rail:hover span::after {
  /* التفاعل: ينمو الخط عمودياً (ScaleY) عند التحويم */
  transform: scaleY(1); 
}

/* ========================================= */

.zg-left{ left:28px; }
.zg-right{ right:28px; }

html[dir="rtl"] .zg-left{ right:28px; left:auto; }
html[dir="rtl"] .zg-right{ left:28px; right:auto; }

/* أخفها على الشاشات الصغيرة */
@media (max-width: 768px){
  .zg-rails{ display:none; }
}

/* ===== Arrows for side rails ===== */
.zg-rail::before,
.zg-rail::after{
  content:"";
  width:0; height:0;
  border:6px solid transparent;
  opacity:.95;
  transition:transform .2s ease;
}

/* السهم للعنصر الأيسر (يشير لليمين) */
.zg-left::before{
  border-right-color: var(--zg-accent);
  margin-inline-end: 6px;
}

/* السهم للعنصر الأيمن (يشير لليسار) */
.zg-right::after{
  border-left-color: var(--zg-accent);
  margin-inline-start: 6px;
}

/* حركة خفيفة عند التحويم */
.zg-rail:hover::before{ transform: translateX(-2px); }
.zg-rail:hover::after{  transform: translateX( 2px); }

/* RTL: اقلب اتجاه الأسهم تلقائياً */
html[dir="rtl"] .zg-left::before{
  border-right-color: transparent;
  border-left-color: var(--zg-accent);
}
html[dir="rtl"] .zg-right::after{
  border-left-color: transparent;
  border-right-color: var(--zg-accent);
}