.shz-lp-header{position:sticky;top:0;z-index:1000;background:#1e73be;color:#fff;padding:6px 12px;text-align:center;font:600 14px/1.6 Tajawal,Arial,sans-serif}
.shz-lp-box{border:1px solid #eee;border-radius:12px;padding:12px;margin:6px 0;font-family:Tajawal,Arial,sans-serif}
.shz-lp-table{width:100%;border-collapse:collapse}
.shz-lp-table th,.shz-lp-table td{border:1px solid #eee;padding:6px 8px;text-align:center}
.shz-lp-actions{margin-top:8px;text-align:center}


/* ===== Referral widget: share icons ===== */
.shz-lp-share-list {
  display: none;
  margin-top: 8px;
  gap: 10px;
  align-items: center;
}
.shz-lp-share-list.is-open { display: flex; }
.shz-lp-share-item {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  text-decoration: none;
}

/* ===== Toast ===== */
.shz-lp-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0,0,0,.84);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 99999;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.shz-lp-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== قائمة قسائم النقاط ===== */
.shz-lp-coupons-wrap { margin-top: 8px; }
.shz-lp-coupons-list { display: flex; flex-direction: column; gap: 6px; }
.shz-lp-coupon { display: block; }
.shz-lp-coupon .shz-lp-coupon-code {
  flex: 1; padding: 6px 8px; font-size: .95em; direction: ltr;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 6px;
}
.shz-lp-coupon .shz-lp-coupon-copy {
  padding: 6px 10px; font-size: .85em; border: 0;
  background: #1e73be; color: #fff; border-radius: 6px; cursor: pointer;
}
.shz-lp-coupon .shz-lp-coupon-copy:hover { opacity: .9; }
/* ملاحظة القسيمة + سطر الحقول */
.shz-lp-coupon { margin-bottom: 8px; }
.shz-lp-coupon-note{
  margin: 2px 2px 4px;
  font-size: .8em;
  opacity: .85;
  color: var(--shz-text, #084F5D);
}
.shz-lp-coupon-line{
  display: flex;
  align-items: center;
  gap: 6px;
}




/* ========= Shazar Loyalty Buttons Styling ========= */
/* ألوان عامة قابلة للتعديل لاحقًا */
:root{
  --shz-navy: #084F5D;    /* كحلي */
  --shz-gold: #B2905F;    /* ذهبي */
}

/* قاعدة مشتركة: زر بإطار فقط + خلفية شفافة */
.shz-lp-actions .shz-lp-redeem-btn,
.shz-lp-actions .shz-lp-coupons-toggle,
.shz-lp-coupon .shz-lp-coupon-copy
{
  background: transparent;
  border: 1px solid var(--shz-navy);
  color: var(--shz-navy);
  border-radius: 14px;
  padding: 3px 7px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
  text-align: center;
}

/* حالات الضغط/التركيز: ذهبي */
.shz-lp-redeem-btn:active,
.shz-lp-redeem-btn:focus-visible,
.shz-lp-coupons-toggle:active,
.shz-lp-coupons-toggle:focus-visible,
.shazar-pay-by-points:active,
.shazar-pay-by-points:focus-visible{
  border-color: var(--shz-gold);
  color: var(--shz-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(212,175,55,.15);
}

/* عند فتح قائمة القسائم يبقى اللون ذهبي (ARIA من الـJS) */
.shz-lp-coupons-toggle[aria-expanded="true"]{
  border-color: var(--shz-gold);
  color: var(--shz-gold);
}


/* تحسين صغير للمسافات حول قائمة القسائم */
.shz-lp-coupons-wrap{
  margin-top: 6px;
}


/* === SHZ Loyalty — Skin aligned with Checkout — 2025-10-10 === */
/* يعتمد على متغيرات :root التي يحقنها checkout؛ مع سقطات آمنة هنا */
:root{
  --shz-border: var(--shazar-border, #084F5D);
  --shz-btn:    var(--shazar-primary, #084F5D);
  --shz-gold:   var(--shazar-accent,  #B2905F);
  --shz-muted:  var(--shazar-muted,   #F2DBAD);
  --shz-bg:     var(--shazar-bg,      #FFFFFF);
  --shz-text:   var(--shazar-text,    #084F5D);
}

/* صناديق عامة (الحاويات) */
.shz-lp-box,
.shz-lp-ref{
  background: var(--shz-bg);
  color: var(--shz-text);
  border: 1.5px solid var(--shz-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* عنوان الهيدر العلوي إن كان مفعّل */
.shz-lp-header{
  background: linear-gradient(180deg, rgba(178,144,95,.08), transparent);
  color: var(--shz-gold);
  border-bottom: 1.5px solid var(--shz-border);
  border-radius: 14px;
  padding: 8px 10px;
  font-weight: 700;
}

/* أزرار موحّدة (نفس روح checkout) */
.shz-lp-btn,
.shz-lp-redeem-btn,
.shz-lp-coupons-toggle,
.shz-lp-share-btn,
.shz-lp-copy-btn{
  background: transparent !important;
  color: var(--shz-btn) !important;
  border: 2px solid var(--shz-btn) !important;
  border-radius: 14px !important;
  padding: .55rem 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: all .15s ease-in-out !important;
  cursor: pointer;
}
.shz-lp-btn:hover,
.shz-lp-redeem-btn:hover,
.shz-lp-coupons-toggle:hover,
.shz-lp-share-btn:hover,
.shz-lp-copy-btn:hover{
  color: var(--shz-gold) !important;
  border-color: var(--shz-gold) !important;
}

/* زر بنمط outline (لو مستخدم) */
.shz-lp-btn.outline{
  background: transparent !important;
  color: var(--shz-btn) !important;
  border-color: var(--shz-btn) !important;
}

/* صفّ أزرار موحّد وتوسيط */
.shz-lp-actions,
.shz-lp-ref-actions{
  display:flex; gap:8px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:10px;
}

/* حقول الإدخال داخل صناديق الولاء */
.shz-lp-box input[type="text"],
.shz-lp-box input[type="email"],
.shz-lp-box input[type="tel"],
.shz-lp-box select,
.shz-lp-box textarea,
.shz-lp-ref-input{
  border:1.5px solid var(--shz-border);
  border-radius:14px; padding:.55rem .75rem; outline:none;
  background:#fff; color:var(--shz-text);
  transition: box-shadow .15s ease, border-color .15s ease;
  width:100%;
}
.shz-lp-box input:focus,
.shz-lp-box select:focus,
.shz-lp-box textarea:focus,
.shz-lp-ref-input:focus{
  border-color: var(--shz-btn);
  box-shadow: 0 0 0 3px rgba(8,79,93,.12);
}

/* الجداول — نفس روح checkout */
.shz-lp-table,
table.shz-lp-table{
  width:100%;
  border:1.5px solid var(--shz-border);
  border-radius:14px; border-collapse:separate; overflow:hidden;
  background:#fff;
}
.shz-lp-table thead th{
  background: var(--shz-muted);
  color: var(--shz-text);
  text-align:center; padding:.6rem .5rem; font-weight:700;
}
.shz-lp-table tbody td{
  text-align:center; padding:.55rem .5rem; border-bottom:1px solid rgba(0,0,0,.06);
}
.shz-lp-table tbody tr:last-child td{ border-bottom:none; }

/* تلوين قيم النقاط حسب الإشارة */
.shz-lp-points.pos{ color:#2ecc71; font-weight:700; }
.shz-lp-points.neg{ color:#e74c3c; font-weight:700; }

/* ويدجت الإحالة: الأزرار/الأيقونات */
.shz-lp-share-list{
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.shz-lp-share-item{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1.5px solid var(--shz-border);
  border-radius:50%; background:#fff; transition:transform .12s ease, border-color .12s ease;
}
.shz-lp-share-item:hover{ transform:translateY(-2px); border-color:var(--shz-gold); }

/* استجابة الجوال — تحويل صفوف الجدول إلى كروت */
@media (max-width:560px){
  .shz-lp-table,
  .shz-lp-table thead,
  .shz-lp-table tbody,
  .shz-lp-table th,
  .shz-lp-table td,
  .shz-lp-table tr{
    display:block; width:100%;
  }
  .shz-lp-table thead{ display:none; }
  .shz-lp-table tr{
    background:#fff; border:1px solid var(--shz-border);
    border-radius:14px; padding:8px 10px; margin:8px 0;
  }
  .shz-lp-table td{
    border:none; border-bottom:1px dashed rgba(0,0,0,.08);
    display:flex; justify-content:space-between; gap:8px; padding:6px 0;
  }
  .shz-lp-table td:last-child{ border-bottom:none; }
  .shz-lp-table td::before{
    content: attr(data-label);
    font-weight:700; color: var(--shz-text);
  }

  /* رصّ الأزرار عموديًا وتوسيطها */
  .shz-lp-actions,
  .shz-lp-ref-actions{ flex-direction:column; }
}



/* ==== بطاقات سجل النقاط (بديل الجدول) ==== */
.shz-lp-card-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.shz-lp-card{
  background: var(--shz-bg, #fff);
  color: var(--shz-text, #222);
  border: 1.5px solid var(--shz-border, #e5e5e5);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.shz-lp-card-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 700;
}
.shz-lp-card-date{ opacity: .8; font-size: .9em; }
.shz-lp-card-points .shz-lp-points{ font-size: 1.05em; }

.shz-lp-card-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-top: 1px dashed rgba(0,0,0,.08);
}
.shz-lp-card-row:first-of-type{ border-top: 0; }
.shz-lp-card-row .lbl{ font-weight:700; }
.shz-lp-card-row .val{ font-weight:600; }

.shz-lp-readmore-wrap .shz-lp-read-more{
  min-width: 160px;
}

/* عمودين على الشاشات الواسعة */
@media (min-width: 780px){
  .shz-lp-card-list{ grid-template-columns: 1fr 1fr; }
}



/* وميض بسيط عند التحديث الحي */
@keyframes shz-lp-flash-kf {
  0% { box-shadow: 0 0 0 rgba(8,79,93,0); }
  40% { box-shadow: 0 0 0 6px rgba(8,79,93,.12); }
  100% { box-shadow: 0 0 0 rgba(8,79,93,0); }
}
#shz-lp-balance-box.shz-lp-flash,
.shz-lp-card.shz-lp-flash{
  animation: shz-lp-flash-kf .7s ease-in-out;
}


/* توست سفلي خفيف بدون خلفية سوداء كاملة */
.shz-lp-toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  padding: 10px 14px;
  background: #fff;
  color: var(--shz-primary, #084F5D);
  border: 1px solid var(--shz-primary, #084F5D);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  z-index: 99999;
  font-size: 14px;
  line-height: 1.4;
}




/* ===== Shazar Tier Widget ===== */
.shz-tier-widget{border:1.5px solid var(--shz-border,#084F5D);border-radius:var(--shz-radius,14px);background:var(--shz-bg,#fff);color:var(--shz-text,#084F5D);padding:10px 12px;margin:8px 0;font-family:Tajawal,Arial,sans-serif}
.shz-tier-toggle{all:unset;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:800}
.shz-tier-icon{font-size:20px;line-height:1}
.shz-tier-dropdown{margin-top:8px;border-top:1px dashed var(--shz-border,#084F5D);padding-top:8px}
.shz-tier-row{display:flex;gap:6px;align-items:center;margin:4px 0}
.shz-tier-label strong{font-weight:800}






/* ===== Tier Help + Panel ===== */
.shz-tier-dropdown{position:relative}
.shz-tier-help{position:absolute;top:6px;left:8px;border:1.5px solid var(--shz-border,#084F5D);background:var(--shz-bg,#fff);color:var(--shz-text,#084F5D);width:26px;height:26px;border-radius:var(--shz-radius,14px);font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer}
.shz-tier-help-panel{margin-top:8px;border:1px solid var(--shz-border,#084F5D);border-radius:var(--shz-radius,14px);background:var(--shz-bg,#fff);padding:8px}
.shz-levels-table{display:grid;grid-template-columns:1.5fr .8fr 1fr 1fr;gap:6px;align-items:center}
.shz-levels-head{font-weight:800;display:contents}
.shz-levels-row{display:contents}
.shz-levels-row .ml,.shz-levels-row .pt{text-align:center}
.shz-tier-row .js-tier-bonus{opacity:.8;font-weight:700}








/* === Shazar Tier Widget — FINAL PATCH === */

/* الأيقونة يسار اسم المستوى بشكل ثابت حتى مع RTL */
.shz-tier-namebox{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  direction: ltr;              /* يعزل RTL داخل الصندوق */
    font-size: 15px !important;

    
}
.shz-tier-namebox .js-tier-icon{
  order: -1;                   /* تظهر الأيقونة يسار الاسم */
}

/* زر العنوان "مضاعفة اكتساب النقاط" بدون خط */
.shz-linklike{
  all: unset;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;       /* لا خط تحته */

}

/* ملاحظة المضاعفة بخط صغير وتبقى مخفية عند [hidden] */
.js-mult-tip{
  margin-inline-start: 14px;
  opacity: .9;
  font-size: .75em;
}
.js-mult-tip[hidden]{ display: none !important; }

/* تكبير/إزاحة زر التعجب على الجوال فقط */
@media (max-width:600px){
  .shz-tier-help{
    top: 4px !important;                 /* أعلى قليلاً */
    left: -15px !important;                 /* أقرب لليسار */
    width: 30px;
    height: 30px;
    font-size: 25px !important;
    line-height: 1;
    background: transparent;
  }
}





/* === Mobile tweaks: period text & level icon === */
@media (max-width:600px){
  /* تصغير حجم نص "الفترة" بالكامل (يشمل "الفترة:" و"من/إلى" والتاريخ) */
  .shz-tier-dropdown .shz-tier-row:first-of-type{
    font-size: .85em;     /* أصغر على الجوال */
    line-height: 1.25;    /* تماسك بصري أفضل */
  }
  

  /* تصغير أيقونة المستوى يسار الاسم في الجوال */
  .shz-tier-namebox .js-tier-icon{
    font-size: 16px;      /* كانت ~20px؛ نخفضها للجوال */
    transform: translateY(-1px); /* محاذاة طفيفة مع النص */
    margin-inline-start: 2px;     /* تضييق المسافة بجانب الاسم */
  }
}



/* اضمن أن لوحة المساعدة قابلة للعرض افتراضياً، ويخفيها [hidden] فقط */
.shz-tier-help-panel{ display:block; }
.shz-tier-help-panel[hidden]{ display:none !important; }

/* الملاحظة الصغيرة لمضاعفة الاكتساب: يخفيها [hidden] فقط */
.js-mult-tip[hidden]{ display:none !important; }

/* تأكيد أن زر النص قابل للنقر حتى مع all:unset */
.shz-linklike{ pointer-events:auto; user-select:auto; }







/* === Desktop only: remove frames around "!" & multiplier text === */
@media (hover:hover) and (pointer:fine){
  /* زر أيقونة التعجب */
  .shz-tier-help{
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .shz-tier-help:focus,
  .shz-tier-help:active{
    outline: none !important;
    box-shadow: none !important;
  }

  /* نص "مضاعفة اكتساب النقاط" (زر بدون إطار) */
  .shz-linklike{
    border: none !important;           /* لو أي ستايل عام يضيف إطار */
    text-decoration: none !important;  /* تأكيد بدون خط */
    box-shadow: none !important;
  }
  .shz-linklike:focus,
  .shz-linklike:active{
    outline: none !important;
    box-shadow: none !important;
  }
}