.shz-ntf-wrap{ --shz-us-radius: var(--shz-radius,14px); --b: var(--shz-border,#084F5D); --t: var(--shz-text,#084F5D); --bg: var(--shz-bg,#fff); font-family: Tajawal, Arial, sans-serif; position: relative; display:inline-block; }
.shz-ntf-btn{width :200px; border:2px solid var(--b); background:transparent; border-radius:var(--shz-us-radius); padding:.5rem .8rem; color:var(--t); font-weight:800; display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; }
.shz-ntf-btn:hover{ border-color:var(--shz-btn-active,#B2905F); color:var(--shz-btn-active,#B2905F); }

.shz-ntf-panel{
  position:absolute; inset-inline-end:0; margin-top:.5rem;
  width:clamp(320px, var(--shz-ntf-width, 420px), 92vw);
 background:var(--bg); border:1.5px solid var(--b); border-radius:var(--shz-us-radius); box-shadow:0 8px 24px rgba(0,0,0,.08); padding:.6rem; z-index:9999; max-height:70vh; overflow:auto; }
.shz-ntf-header{ display:flex; justify-content:flex-start; align-items:center; padding:.2rem .3rem .6rem; border-bottom:1px dashed var(--b); }
.shz-ntf-bell-toggle{ display:inline-flex; align-items:center; gap:.4rem; border:2px solid var(--b); background:transparent; color:var(--t); border-radius:var(--shz-us-radius); padding:.3rem .6rem; font-weight:800; cursor:pointer; }
.shz-ntf-bell-toggle[aria-pressed="true"]{ border-color:var(--shz-btn-active,#B2905F); color:var(--shz-btn-active,#B2905F); }
.shz-ntf-bell-toggle.blink{ box-shadow:0 0 0 6px rgba(178,144,95,.25); }



/* تلوين أيقونة الجرس SVG بنفس لون نص الزر */
.shz-ntf-bell-toggle .ic svg{
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  color: inherit;           /* حتى currentColor يرث من لون الزر */
  stroke: currentColor;     /* لون حدود الأيقونة = لون نص الزر */
  fill: none;               /* إلغاء التعبئة السوداء الافتراضية */
  stroke-width: 2;
}
/* ضمان تطبيق القيم على المسارات داخل الـ SVG */
.shz-ntf-bell-toggle .ic svg path{
stroke: currentColor !important;
fill: none !important;

}



.shz-ntf-list{ display:flex; flex-direction:column; gap:.5rem; padding:.6rem .2rem; }
.shz-ntf-item{ border:1px solid var(--b); border-radius:var(--shz-us-radius); padding:.5rem .6rem; background:#fff; }
.shz-ntf-item .t{ display:flex; gap:.4rem; align-items:center; margin-bottom:.2rem; color:var(--t); }
.shz-ntf-item .t .type{ font-size:.8rem; opacity:.8; }
.shz-ntf-item .m{ color:var(--t); }
.shz-ntf-item .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:.3rem; }
.shz-ntf-item .mark{ border:1.5px solid var(--b); background:transparent; border-radius:var(--shz-us-radius); padding:.2rem .5rem; font-weight:700; color:var(--t); }
.shz-ntf-item.is-read{ opacity:.6; }

.shz-ntf-more{ display:flex; justify-content:center; padding:.3rem; }
.shz-ntf-load-more{ border:2px solid var(--b); background:transparent; color:var(--t); border-radius:var(--shz-us-radius); padding:.45rem .9rem; font-weight:800; }
.shz-ntf-load-more[disabled]{ opacity:.5; cursor:not-allowed; }

@media (max-width:600px){
  .shz-ntf-panel{ inset-inline:0; width:auto; }
}

/* Dark mode */
body.os-dark .shz-ntf-panel{ background:var(--os-dark-card,#122327); border-color:var(--os-dark-border,#F5F1E7); }
body.os-dark .shz-ntf-item{ background:var(--os-dark-elev1,#0e1a1c); border-color:var(--os-dark-border,#F5F1E7); color:var(--os-dark-text,#fff); }
body.os-dark .shz-ntf-btn, 
body.os-dark .shz-ntf-bell-toggle,
body.os-dark .shz-ntf-item .mark,
body.os-dark .shz-ntf-load-more{
  color:var(--os-dark-text,#fff); border-color:var(--os-dark-border,#F5F1E7);
}
body.os-dark .shz-ntf-bell-toggle[aria-pressed="true"]{ border-color:var(--os-accent,#B2905F); color:var(--os-accent,#B2905F); }



/* إضافة - وميض بسيط عند وصول جديد */
.shz-ntf-btn.shz-ntf-blink{ box-shadow:0 0 0 6px rgba(178,144,95,.25); }






/* عند فتح اللوحة: ادفع الحاوية للأسفل بمقدار ارتفاع اللوحة */
.shz-ntf-wrap.is-open{ margin-bottom: var(--shz-ntf-open-space, 16px); }

/* Banner إذن التنبيهات */
.shz-ntf-perm-hint{ 
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; background:var(--shz-muted,#F2DBAD); color:var(--shz-text,#084F5D);
  border:1px dashed var(--shz-border,#084F5D); border-radius:var(--shz-us-radius,14px);
  padding:.35rem .6rem; margin:.4rem 0 .2rem;
}
/* استبدال السطور 62–65 */
.shz-ntf-perm-ask{
  border:2px solid var(--shz-border,#084F5D);
  background:transparent;
  color:var(--shz-text,#084F5D);
  border-radius:6px;               /* كان 14px */
  font-weight:800;
  font-size:9px;                  /* تصغير خط النص */
  padding:.3rem .6rem;
  cursor:pointer;
}

.shz-ntf-perm-ask:hover{ border-color:var(--shz-btn-active,#B2905F); color:var(--shz-btn-active,#B2905F); }

/* وميض بسيط عند قدوم جديد */
.shz-ntf-btn.shz-ntf-blink{ box-shadow:0 0 0 6px rgba(178,144,95,.25); }

/* وضع داكن */
body.os-dark .shz-ntf-perm-hint{
  background:var(--os-dark-elev2,#0e1a1c); color:var(--os-dark-text,#fff); border-color:var(--os-dark-border,#F5F1E7);
}
body.os-dark .shz-ntf-perm-ask{
  color:var(--os-dark-text,#fff); border-color:var(--os-dark-border,#F5F1E7);
}








/* لوحة الإشعارات عند تضمينها داخل Accordion صفحة الحساب */
.shz-us-accordion .content .shz-ntf-wrap { display:block; }
.shz-us-accordion .content .shz-ntf-panel {
  position: static;
  margin-top: 0;
  width: 100%;
  max-height: 60vh; /* مماثلة لكروت المحتوى */
}












/* === شازار — تحسين قائمة التنبيهات (Dropdown) === */

/* رأس اللوحة: عمودي + مسنتر */
.shz-ntf-panel .shz-ntf-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  padding:.6rem .4rem .8rem;
  border-bottom:1px dashed var(--shz-border, #084F5D);
}

/* زر التفعيل/التعطيل: Outline + مسنتر + مساحة نص ثابتة */
.shz-ntf-bell-toggle{
display: inline-block;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:2px solid var(--shz-btn, #084F5D);
  color:var(--shz-btn, #084F5D);
  background:transparent;
  padding:.50rem .90rem;
  border-radius:var(--shz-us-radius, 14px);
  font-weight:600;

  min-width: 6.2em;        /* يحجز مساحة تكفي للنصّين عربياً */
  text-align: center;
  white-space: nowrap;    
    
}
.shz-ntf-bell-toggle[aria-pressed="true"]{
  border-color:var(--shz-btn-active, #B2905F);
  color:var(--shz-btn-active, #B2905F);
}
.shz-ntf-bell-toggle:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(8,79,93,.18); /* فوكس شازار */
}
/* منع التداخل: نظهر/نخفي نص الحالة داخل مساحة ثابتة */
.shz-ntf-bell-toggle .state{
  position:relative;
  display:inline-block;
  min-width:4.6em;
  text-align:center;
}
.shz-ntf-bell-toggle .state .on{ display:none; }
.shz-ntf-bell-toggle .state .off{ display:inline; }
.shz-ntf-bell-toggle[aria-pressed="true"] .state .on{ display:inline; }
.shz-ntf-bell-toggle[aria-pressed="true"] .state .off{ display:none; }

/* الكرت أسفل الزر: بلا خلفية ومسنتر والزر داخله بالأعلى */
.shz-ntf-push-card{
  background:transparent;     /* إزالة الخلفية */
  border:1px solid var(--shz-border, #084F5D);
  border-radius:var(--shz-us-radius, 14px);
  padding:.6rem .8rem;
  width:100%;
  max-width: 480px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* استبدال السطور 168–180 */
.shz-ntf-push-card .shz-ntf-perm-ask{
  align-self:center;
  margin-top:-.2rem;      /* يظهر أعلى الكرت */
  margin-bottom:.2rem;
  position:relative;      /* لتراكب نصَّي ask/done */
  border:2px solid var(--shz-btn,#084F5D);
  color:var(--shz-btn,#084F5D);
  background:transparent;
  padding:.45rem 1rem;
  border-radius:8px;     
  font-weight:600;
  font-size:10px;         /* تصغير الخط داخل الكرت */
  min-width:140px;        /* تقليل العرض */
  width:fit-content;      /* يمنع التمدد ويجعل العرض على قدر المحتوى */
}
/* إضافة بعد 182: عند اكتمال التفعيل غيّر اللون وأوقف المؤثرات */
.shz-ntf-push-card .shz-ntf-perm-ask.is-done{
  border-color:var(--shz-btn-active,#B2905F);
  color:var(--shz-btn-active,#B2905F);
  cursor:default;
}

.shz-ntf-push-card .shz-ntf-perm-ask:hover,
.shz-ntf-push-card .shz-ntf-perm-ask:focus-visible{
  color:var(--shz-btn-active, #B2905F);
  outline:0;
  box-shadow:0 0 0 3px rgba(8,79,93,.18);
  border-radius:8px !important;  
   border:2px solid var(--shz-btn-active,#B2905F);
  
}
/* تبديل نص الزر داخل نفس المساحة بسلاسة (بدون قفزات) */
.shz-ntf-push-card .shz-ntf-perm-ask .txt{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .25s ease;
}
.shz-ntf-push-card .shz-ntf-perm-ask .txt.ask{ opacity:1; }
.shz-ntf-push-card .shz-ntf-perm-ask .txt.done{ opacity:0; }
.shz-ntf-push-card .shz-ntf-perm-ask.is-done .txt.ask{ opacity:0; }
.shz-ntf-push-card .shz-ntf-perm-ask.is-done .txt.done{ opacity:1; }

/* سطر التلميح: أصغر + مسنتر + بلا خلفية */
.shz-ntf-push-card .hint-text{
  font-size:9px;
  text-align:center;
  margin-top:.2rem;
  opacity:.9;
}





/* === زر الجرس حسب مواصفات شازار المطلوبة === */
.shz-ntf-bell-toggle{
  border-radius: 8px !important;
  border: 2px solid #084F5D !important;   /* لون السكون */
  color: #084F5D !important;               /* يلوّن النص + الإيقونة */
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
}


/* حالة hover + focus + pressed = اللون الذهبي */
.shz-ntf-bell-toggle:hover,
.shz-ntf-bell-toggle:focus-visible,
.shz-ntf-bell-toggle[aria-pressed="true"]{
  border-color: #B2905F !important;
  color: #B2905F !important;               /* وقت الأكتف والفوكس */
  outline: none;
  box-shadow: 0 0 0 3px rgba(178,144,95,.28);
}

/* تنبيه حالة الجرس أسفل الزر */
.shz-ntf-bell-hint{
  margin-top: .15rem !important;
  font-size: 9px !important;
  line-height: 1.5;
  color: var(--shz-text, #084F5D);
}