/* ===============[ 1) المتغيرات العامة + لكل جزء ]================ */
:root{
  /* نَفَس شازار الأساسي */
  --shz-radius: 14px;
  --shz-border: #084F5D;
  --shz-text: #084F5D;
  --shz-bg: #FFFFFF;
  --shz-muted: #F2DBAD;
  --shz-btn: #084F5D;        /* سكون */
  --shz-btn-active: #B2905F; /* هوفر/نشط */
  --shz-ok: #2e7d32;
  --shz-bad: #c62828;
  --shz-shadow: 0 6px 24px rgba(0,0,0,.06);
  --shz-glow: rgba(8,79,93,.28);

  /* تخطيط عام */
  --shz-pad: 1rem;
  --shz-card-gap: .5rem;

  /* أزرار عامة (سلة/شراء/…): تلتزم باختياراتك الحالية */
  --btn-bg: transparent;
  --btn-color: var(--shz-text);
  --btn-bw: 2px;
  --btn-br: 8px;                 /* لاحظ: اخترته 8px حسب تعديلاتك */
  --btn-py: .6rem;
  --btn-px: 1rem;
  --btn-fw: 600;
  --btn-minw: 180px;

  /* زرّي السلة + الرغبات (في المنتج المفرد — الترتيب العمودي) */
  --spair-w: 140px;
  --spair-h: 35px;
  --spair-br: 8px;
  --spair-gap: 2px;
  --spair-idle: #084F5D;
  --spair-hover: #B2905F;
  --spair-active: #B2905F;
  --spair-fz: 10px;

  /* مدخلات الكمية/التباينات */
  --fld-bw: 1.5px;
  --fld-br: 8px;
  --qty-w: 70px;
  --fld-py: .45rem;
  --fld-px: .6rem;
  --fld-fw: 600;

  /* تبويبات المنتج */
  --tabs-bw: 1.5px;
  --tabs-pad: .5rem;
  --tabs-gap: 6px;
  --tab-fz: 20px;
  --tab-fw: 700;
  --tab-color: #B2905F;

  /* بطاقات المنتجات (الأرشيف/ذات صلة/…) */
  --card-pad: .5rem;
  --card-fz: 10px;
  --card-fw: 600;

  /* breadcrumb أعلى الصورة (مصغّر وفق تعديلك) */
  --bc-fz:  clamp(10px, 1.9vw, 18px);
  --bc-lh: 1.6;
  --bc-py: .35rem;
  --bc-px: .6rem;
  --bc-mb: .6rem;

  /* عدسة المعرض (الزر الدائري) */
  --zoom-d: 44px;      /* القطر */
  --zoom-ic: 18px;     /* حجم الأيقونة */
  --zoom-idle: var(--shz-btn);
  --zoom-active: var(--shz-btn-active);
  --zoom-bg: transparent;
  --zoom-bw: 0;        /* اخترت 0 لأنك ألغيت الإطار نهائيًا */
  --zoom-top: .75rem;
  --zoom-end: .75rem;
  --zoom-start: auto;
  --zoom-mt: .5rem;
  --zoom-mb: .5rem;
  --zoom-mx: 0;

  /* ضبط صورة المعرض داخل الإطار */
  --gallery-radius: var(--shz-radius);
  --gallery-fit: cover;
  --gallery-pos: center;

  /* أوفرلاي الأزرار فوق الصور */
  --ovl-icon-size: 18px;
  --ovl-tip-fz: 10px;

  /* سواتش الخيارات (CFVSW) */
  --swatch-h: clamp(34px, 5vw, 44px);
  --swatch-gap: clamp(3px, 1.2vw, 10px);
  --swatch-fz: clamp(9px, 1.2vw, 13px);
  --swatch-fw: 600;
  --swatch-px: clamp(.1rem, 1.6vw, 1rem);

  /* التنبيهات (رسالة أُضيف للسلة) */
  --notice-link-blue: #084F5D;
  --notice-link-gold: #B2905F;

    /* أسعار ومسافات إضافية */
  --price-fz: clamp(12px, 2.0vw, 22px);
  --price-fw: 800;
  --qty-mt: .1rem;   /* مسافة أعلى الكمية */
  --wl-mb: 2rem;    /* مسافة أسفل زر الرغبات */
  --addinfo-mt: 0.4rem; /* مسافة أعلى جدول المعلومات الإضافية */
  --price-mt: 0.02rem;
  
    /* عناوين المنتج */
  --title-fz: clamp(15px, 2.2vw, 25px);
  --title-fw: 800;
  --title-color: var(--shz-title, #B2905F);

  --shz-font: Arial, Helvetica, sans-serif;
}









/* تنسيقات الشريط العائم */
#shazar-floating-bar {
     position: fixed;
    bottom: -80px; /* مخفي مبدئياً */
    left: 0;
    width: 100%;
    background-color: rgba(242, 219, 173, 0.7); /* 50% شفافية */
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    z-index: 9999;
    transition: bottom 0.4s ease, background-color 0.3s ease;
}

/* عند الظهور */
#shazar-floating-bar.show {
    bottom: 0; /* يظهر للأعلى */
}
/* عند المرور أو اللمس */
#shazar-floating-bar:hover,
#shazar-floating-bar:focus-within {
    background-color: rgba(242, 219, 173, 1); /* بدون شفافية */
}

.end-of-page #shazar-floating-bar {
    display: none;
    bottom: -180px;    /* يختفي للأسفل*/
}

#shazar-floating-bar a {
    text-decoration: none;
    color: #084f5d;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* عند تمرير الماوس على الأيقونة */
#shazar-floating-bar a:hover i,
#shazar-floating-bar a:hover span {
    color: #b2905f;
}

#shazar-floating-bar i {
    font-size: 28px;
    margin-bottom: 2px;
}
#shazar-floating-bar i {
    display: block;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}    
/* قائمة الأقسام المنسدلة */
#floating-categories-menu,
#floating-search-box {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    background: white;
    border-top: 2px solid #B2905F;
    padding: 8px;
    z-index: 9998;
}

/* أيقونة الأمنيات بإطار */
#shazar-floating-bar .fa-heart {
    font-weight: 400;
}

.shazar-popup {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

.shazar-popup .popup-content {
    background: #fff;
    margin: 10% auto;
    padding: 20px;
    max-width: 400px;
    position: relative;
    border-radius: 10px;
}

.shazar-popup .popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}
/* الصفحة الرئيسية  + الصفحات المدرجة - كحلي شفاف */
body.home #shazar-floating-bar,
body.page-id-43 #shazar-floating-bar,
body.page-id-414 #shazar-floating-bar
{
    background-color: rgba(8, 79, 93, 0.5) ; /* كحلي شفاف */
    backdrop-filter: blur(6px);
}


/* عند التمرير أو اللمس في الصفحة الرئيسية */
body.home #shazar-floating-bar:hover,
body.home #shazar-floating-bar:focus-within,
body.page-id-43 #shazar-floating-bar:hover,
body.page-id-414 #shazar-floating-bar:hover,
body.page-id-43 #shazar-floating-bar:focus-within,
body.page-id-414 #shazar-floating-bar:focus-within
{
    background-color: rgba(8, 79, 93, 1) ; /* كحلي بدون شفافية */
}

/* النص والأيقونات في الصفحة الرئيسية */
body.home #shazar-floating-bar a,
body.home #shazar-floating-bar a i ,
body.page-id-43 #shazar-floating-bar a,
body.page-id-414 #shazar-floating-bar a,
body.page-id-43 #shazar-floating-bar a i ,
body.page-id-414 #shazar-floating-bar a i
{
    color: #ffffff ; /* أبيض */
}

/* تأثير التمرير على الأيقونات والنص */
body.home #shazar-floating-bar a:hover i,
body.home #shazar-floating-bar a:hover span ,
body.page-id-43 #shazar-floating-bar a:hover i,
body.page-id-414 #shazar-floating-bar a:hover i,
body.page-id-43 #shazar-floating-bar  a:hover span ,
body.page-id-414 #shazar-floating-bar  a:hover span 
{
    color: #b2905f ; /* نفس لون التمرير الحالي */
}








/* ===== Shazar Search Box (Override) ===== */
#floating-search-box[hidden] { display: none !important; }

#floating-search-box {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.45);
  display: block; /* سنُظهر/نُخفي عبر [hidden] و/أو .show */
bottom: calc(var(--shz-bottom-bar-h, 5px) + var(--shz-bottom-gap, 2px)) !important;

}

#floating-search-box .shz-search-surface {
  position: relative;
  margin: 6vh auto;
  max-width: 720px;
  background: var(--shz-bg, #FFFFFF);
  color: var(--shz-text, #084F5D);
  border: 1.5px solid var(--shz-border, #084F5D);
  border-radius: var(--shz-radius, 14px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  padding: 6px;

}

.shz-search-form {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.shz-search-form .shz-input {
  flex: 1;
  height: 50px;
  padding: 20px 12px 12px 12px !important;
  background: #fff;
  color: var(--shz-text, #084F5D);
  border: 1.5px solid var(--shz-border, #084F5D) !important;
  border-radius:8px !important;
  transition: box-shadow .2s ease, border-color .2s ease;
  width: 60px !important;
}

.shz-search-form .shz-input:focus {
  outline: none;
  border-color: var(--shz-border, #084F5D);
  box-shadow: 0 0 0 3px rgba(8,79,93,.18);
}

.shz-search-form .shz-btn {
  height: 30px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  background: transparent;
  color: var(--shz-btn, #084F5D);
  border: 2px solid var(--shz-btn, #084F5D);
  border-radius: 6px !important;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
  font-size: 10px !important;
}

.shz-search-form .shz-btn:hover,
.shz-search-form .shz-btn:focus {
  color: var(--shz-btn-active, #B2905F);
  border-color: var(--shz-btn-active, #B2905F);
}

#floating-search-box .shz-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px; /* يدعم RTL */
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--shz-bg, #FFFFFF);
  color: var(--shz-text, #084F5D);
  border: 2px solid var(--shz-border, #084F5D);
  cursor: pointer;
}
#floating-search-box .shz-close:hover,
#floating-search-box .shz-close:focus {
  color: var(--shz-btn-active, #B2905F);
  border-color: var(--shz-btn-active, #B2905F);
}



/* استجابة */
@media (max-width: 600px) {
  #floating-search-box .shz-search-surface { margin: 15vh 10px; }
  .shz-search-form { gap: .35rem; }
}

/* ===== وضع داكن (OS Dark) ===== */
body.os-dark #floating-search-box .shz-search-surface {
  background: var(--os-dark-card);
  color: var(--os-dark-text);
  border-color: var(--os-dark-border);
}
body.os-dark .shz-search-form .shz-input {
  background: var(--os-dark-elev1);
  color: var(--os-dark-text);
  border-color: var(--os-dark-border-soft);
}
body.os-dark .shz-search-form .shz-btn {
  color: var(--os-btn-text, var(--os-accent));
  border-color: var(--os-btn-border, var(--os-accent));
}
body.os-dark .shz-search-form .shz-btn:hover,
body.os-dark .shz-search-form .shz-btn:focus {
  color: var(--os-link-focus-text, var(--os-accent));
  border-color: var(--os-link-focus-border, var(--os-accent));
  box-shadow: 0 0 0 3px var(--os-focus-ring, rgba(var(--os-accent-rgb,178,144,95),.32));
}
body.os-dark #floating-search-box .shz-close {
  background: var(--os-dark-card);
  color: var(--os-dark-text);
  border-color: var(--os-dark-border);
}















/* ===== Shazar Categories Menu (Override) ===== */
#floating-categories-menu {
  /* بطاقة شازار */
  background: var(--shz-bg, #FFFFFF);
  color: var(--shz-text, #084F5D);
  border: 1.5px solid var(--shz-border, #084F5D);
  border-radius: var(--shz-radius, 14px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 12px;

  /* تمركز فوق البار مع عرض مناسب لكل الأجهزة */
  width: min(720px, calc(100% - 24px));
  margin: 0 auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);

  z-index: 10000; /* أعلى من #shazar-floating-bar (9999) */
  max-height: clamp(220px, 48vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  direction: rtl;
}

/* شبكة عناصر مرنة */
#floating-categories-menu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
@media (min-width: 640px) {
  #floating-categories-menu .menu { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  #floating-categories-menu .menu { grid-template-columns: repeat(3, 1fr); }
}
#floating-categories-menu .menu-item { margin: 0; }

/* روابط كـ “chips” بأسلوب outline شازار */
#floating-categories-menu .menu a,
#floating-categories-menu .menu .menu-link {
  display: block;
  text-decoration: none;
  font-weight: 700;
  padding: .65rem .9rem;
  border: 2px solid var(--shz-btn, #084F5D);
  border-radius: var(--shz-radius, 14px);
  color: var(--shz-btn, #084F5D);
  background: transparent;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
#floating-categories-menu .menu a:hover,
#floating-categories-menu .menu a:focus {
  color: var(--shz-btn-active, #B2905F);
  border-color: var(--shz-btn-active, #B2905F);
  outline: none;
}












/* وضع داكن (OS Dark) */
body.os-dark #floating-categories-menu {
  background: var(--os-dark-card);
  color: var(--os-dark-text);
  border-color: var(--os-dark-border);
}
body.os-dark #floating-categories-menu .menu a,
body.os-dark #floating-categories-menu .menu .menu-link {
  color: var(--os-btn-text, var(--os-accent));
  border-color: var(--os-btn-border, var(--os-accent));
}
body.os-dark #floating-categories-menu .menu a:hover,
body.os-dark #floating-categories-menu .menu a:focus {
  color: var(--os-link-focus-text, var(--os-accent));
  border-color: var(--os-link-focus-border, var(--os-accent));
  box-shadow: 0 0 0 3px var(--os-focus-ring, rgba(var(--os-accent-rgb,178,144,95),.32));
}