/*
==============================
تعريف المتغيرات الأساسية (الخصائص المخصصة)
==============================
هذه المتغيرات تساعد على توحيد القيم المستخدمة في التصميم مثل الألوان والأبعاد،
مما يسهل عملية التعديل في المستقبل.
*/
:root{
  --sidebar-width: 280px; /* عرض الشريط الجانبي */
  --header-height: 75px; /* ارتفاع الهيدر */
  --radius: 14px; /* نصف قطر الزوايا المستديرة */
  --shadow: 0 10px 30px rgba(0,0,0,0.08); /* ظل للعناصر */
  --bg: #F5F5F5; /* لون الخلفية الرئيسي */
  --card: #151922; /* لون خلفية البطاقات والعناصر */
  --soft: #1b2030; /* لون ثانوي أغمق قليلاً */
  --text: #0D0D0D; /* لون النص الأساسي */
  --muted: #a7b0c3; /* لون النص الخافت أو الثانوي */
  --accent: #7aa2ff; /* لون التمييز (الأزرق) */
}



/* v0.13 — Fonts (Local) */
@font-face{ font-family:'Cairo'; src:url('/assets/fonts/Cairo-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Cairo'; src:url('/assets/fonts/Cairo-Medium.woff2')  format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Cairo'; src:url('/assets/fonts/Cairo-Bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

@font-face{ font-family:'Poppins'; src:url('/assets/fonts/Poppins-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('/assets/fonts/Poppins-Medium.woff2')  format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('/assets/fonts/Poppins-Bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --font-ar: 'Cairo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-en: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* اجعل الافتراضي عربي */
html, body{ font-family: var(--font-ar); }

/* عندما تتحول الواجهة للإنجليزية */
body.lang-en{ font-family: var(--font-en); }

/* (اختياري) شدّة العناوين */
h1,h2,h3,h4,h5,h6{ font-weight:700; }








/*
==============================
إعادة ضبط وتنسيق العناصر العامة
==============================
* {box-sizing:border-box}
يضمن أن المساحة الإجمالية للعنصر (العرض والارتفاع) تشمل الهوامش والحدود.
*/
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}

/*
==============================
الخطوط
==============================
تحديد الخطوط الافتراضية للنظام لكل من اللغتين العربية والإنجليزية لضمان أفضل عرض.
*/


/*
==============================
اتجاه الصفحة
==============================
يحدد اتجاه النص من اليمين لليسار (RTL) أو من اليسار لليمين (LTR).
*/
html:not(.rtl){direction:ltr}
html.rtl{direction:rtl}

/*
==============================
الرأس (Header)
==============================
تنسيق الشريط العلوي للصفحة.
*/
.site-header{
  position:relative; /* يسمح بوضع العناصر الفرعية بشكل مطلق داخله */
  height: var(--header-height); /* استخدام المتغير لارتفاع ثابت */
  display:flex; align-items:center; justify-content:center; /* توسيط العناصر داخله */
  padding:25px 0;
  background:#F5F5F5;
  border-bottom: 2px solid transparent; /* السماكة */
  border-image: linear-gradient(to right, #ffffff, #000000, #ffffff) 1;
  z-index:40; /* يضمن ظهوره فوق العناصر الأخرى */
}
.site-header .logo-wrap{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color:inherit }
.site-header .site-logo{ max-height:46px; display:block }
.site-header .logo-text{ font-weight:700; font-size:18px; color:#eaeef7 }






/*



==============================
أيقونة الهمبرغر (القائمة الجانبية)
==============================
تنسيق زر فتح القائمة الجانبية.
*/







/*
==============================
الشريط الجانبي (Off-Canvas)
==============================
تنسيق الشريط الجانبي الذي يظهر ويختفي.
*/





/*
==============================
تحديد مكان الشريط الجانبي بحسب اتجاه الصفحة
==============================
*/




/*
==============================
حالة الفتح والإغلاق
==============================
عند إضافة فئة 'sidebar-open' للعنصر <body>، يظهر الشريط الجانبي.
*/


/*
==============================
روابط الشريط الجانبي
==============================
*/


/*
==============================
الخلفية المعتمة (Backdrop)
==============================
تظهر خلف الشريط الجانبي لتغطي باقي الصفحة.
*/







/*
==============================
محتوى الصفحة الرئيسي
==============================
*/
.site-main{
  min-height: calc(100dvh - var(--header-height));
  padding-block: 24px;
  padding-inline: clamp(16px, 3vw, 40px);
  margin-inline-start: 0; /* لا نترك مساحة للشريط الجانبي */
}

/*
==============================
الحاوية (Container)
==============================
تنسيق الحاوية الرئيسية للمحتوى.
*/
.container{
  max-width: 1100px; margin:0 auto;
  background: #F5F5F5; 
  border:1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

/*
==============================
العناوين والنصوص الرئيسية
==============================
*/
.page-title{ margin:0 0 10px 0; font-size: clamp(20px, 3.6vw, 32px) }
.lead{ color: var(--muted); margin:0 }





/*
==============================
القصص (Stories) (v0.4)
==============================
تنسيق شريط القصص القابل للتمرير.
*/

/*
==============================
أبرز القصص (Highlights) (v0.5)
==============================
تنسيق شبكة لأبرز القصص.
*/
.hl-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* شبكة مرنة */
  gap:16px;
}
.hl-item{
  position:relative; background:none; border:none; color:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px;
}
.hl-ring{
  position:absolute; inset-inline:auto; inset-block-start:6px;
  inline-size:88px; block-size:88px; border-radius:50%;
  background: conic-gradient(from 0deg, #7aa2ff, #c17dff, #7aa2ff);
  filter: blur(.2px);
}
.hl-thumb{
  position:relative; inline-size:96px; block-size:96px; border-radius:50%;
  background:#0e1420; background-size:cover; background-position:center;
  border:5px solid #0f1115; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.hl-label{ font-size:13px; color:var(--muted); text-align:center; max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hl-count{
  position:absolute; inset-inline-end:18px; inset-block-start:6px;
  background:#1b2030; border:1px solid rgba(255,255,255,0.12);
  color:#eaeef7; font-size:12px; padding:2px 6px; border-radius:999px;
}

/*
==============================
عارض أبرز القصص (Viewer)
==============================
نافذة منبثقة لعرض الـ Highlights.
*/
.hl-viewer{ position: fixed; inset:0; z-index: 50; }
.hlv-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.65); }
.hlv-frame{
  position: absolute; inset-inline:0; inset-block: 6vh 6vh; margin: auto;
  inline-size: min(820px, 96vw); block-size: min(84vh, 820px);
  background: #111722; border:1px solid rgba(255,255,255,0.06);
  border-radius: 16px; box-shadow: var(--shadow); overflow:hidden;
  display:flex; flex-direction: column;
}
.hlv-top{ padding:10px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.06) }
.hlv-title{ font-size:15px; color:#000000; opacity:.9 }
.hlv-close{ margin-inline-start:auto; background:none; border:1px solid rgba(255,255,255,0.2); color:#fff; border-radius: 8px; padding:4px 8px; cursor:pointer }
.hlv-media{ flex:1; display:flex; align-items:center; justify-content:center; background:#ffffff; padding:12px }
.hlv-media img, .hlv-media video{ max-inline-size:100%; max-block-size:100%; display:block }
.hlv-controls{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-top:1px solid rgba(255,255,255,0.06) }
.hlv-prev,.hlv-next{
  background: var(--soft); color: var(--text); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
.hlv-dots{ display:flex; gap:6px; justify-content:center; align-items:center; flex:1 }
.hlv-dots .dot{
  width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,0.25);
}
.hlv-dots .dot.active{ background:#7aa2ff }

/*
==============================
المشاريع المصغرة (Teasers) (v0.6)
==============================
تنسيق شبكة من البطاقات للمشاريع.
*/
.teasers-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 900px){ .teasers-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px){ .teasers-grid{ grid-template-columns: repeat(2, 1fr) } }

.teaser-card{
  background:none; border:2px solid #000000; border-radius:16px; padding:0; cursor:pointer; display:block;
}
.teaser-thumb {
  aspect-ratio: 1 / 1;        /* يحافظ على مربع */
  border-radius: 12px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  overflow: hidden;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .2s ease;
}

.teaser-thumb img,
.teaser-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* يحافظ على النسبة الأصلية ويمنع التشوه */
  border-radius: 12px;
  display: block;
}


.teaser-card:hover .teaser-thumb{ transform: scale(1.02) } /* تأثير تكبير عند المرور بالمؤشر */

/*
==============================
عارض المشاريع (Viewer)
==============================
نافذة منبثقة لعرض تفاصيل المشاريع.
*/
.teaser-viewer{ position:fixed; inset:0; z-index:55 }
.tv-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.7) }
.tv-frame{
  position:absolute; inset: 15vh 4vw; background:#F5F5F5;
  border:1px solid rgba(255,255,255,0.08); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow: var(--shadow);
  }
  .tv-frame{
    overscroll-behavior-x: contain;/* يمنع تمرير الصفحة الخلفية */
  }

.tv-close{
  align-self:flex-end; margin:8px; background:none; color:#000000;
  border:2px solid #000000; border-radius:10px; padding:6px 10px; cursor:pointer;
}
.tv-body{ padding:12px; display:flex; flex-direction:column; gap:10px; align-items:center }
#tvImg{ max-width: 95vw; max-height: 76vh; display:block; border-radius:12px }
.tv-dots{ display:flex; gap:6px; justify-content:center }
.tv-dots .dot{ width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,0.28); cursor:pointer }
.tv-dots .dot.active{ background: #000000 }

/*
==============================
أيقونات تذييل الصفحة (Footer) (v0.7.2)
==============================
تنسيق أيقونات التواصل الاجتماعي.
*/
.footer-links{
  display:flex; gap:18px; justify-content:center; align-items:center; min-height:48px;
}
.footer-links .muted-hint{ color:#a7b0c3; font-size:13px }
.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:#151922; border:1px solid rgba(255,255,255,0.08);
  text-decoration:none; transition:transform .15s ease, border-color .15s ease;
}
.social-btn:hover{ transform: translateY(-2px); border-color: rgba(122,162,255,0.5) }
.social-btn svg { width:22px; height:22px; }
.social-btn.ig:hover svg{ fill:#e6683c }
.social-btn.fb:hover svg{ fill:#1877f2 }
.social-btn.wa:hover svg{ fill:#25d366 }

/*
==============================
المنتجات (Products) (v0.8)
==============================
تنسيق شبكة من البطاقات للمنتجات.
*/
.products-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:12px;
}
/* تنسيقات الشاشات الأصغر */
@media (max-width: 1100px){ .products-grid{ grid-template-columns: repeat(3,1fr) } }
@media (max-width: 800px){  .products-grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width: 520px){  .products-grid{ grid-template-columns: repeat(2,1fr) } }

.product-card{
  display:block; text-decoration:none; color:#F5F5F5;
  background:#151922; border:1px solid rgba(255,255,255,0.06); border-radius:12px;
  overflow:hidden; box-shadow: var(--shadow);
}
.pc-thumb{
  aspect-ratio:1/1; background:#0e1420; background-size:cover; background-position:center;
}
.pc-thumb.zoomable{
  pointer-events: none;
}
.pc-info{
 display:flex;
  flex-direction:column;   /* فوق بعض */
  align-items:center;      /* توسيط أفقي للنص */
  justify-content:center;  /* توسيط عمودي داخل الصندوق */
  gap:8px;
  padding:20px 12px;
}
.pc-name{ font-size:16px; color:#F5F5F5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70% }
.pc-price{ font-weight:600 }

/*
==============================
صفحة المنتج الفردي
==============================
تنسيق صفحة المنتج الفردي.
*/
.product-page{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px }
@media (max-width: 900px){ .product-page{ grid-template-columns: 1fr } }
.pp-gallery{ display:flex; flex-direction:column; gap:10px }
.pp-main{ background:#0e1420; border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:10px; display:flex; justify-content:center; align-items:center }
.pp-main img{ max-width:100%; max-height:65vh; display:block; border-radius:8px }
.pp-thumbs{ display:flex; gap:8px; flex-wrap:wrap }
.pp-thumb{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:2px solid transparent; cursor:pointer; background:#0e1420 }
.pp-thumb.active{ border-color:#7aa2ff }

.pp-info .pp-title{ margin:0 0 8px 0 }
.pp-price{ font-size:18px; margin-bottom:10px; opacity:.9 }
.pp-desc{ color:#a7b0c3; line-height:1.7; white-space:pre-line }
.pp-actions{ margin-top:16px }
.pp-btn{
  display:inline-block; background:#1b2030; color:#eaeef7; border:1px solid rgba(255,255,255,0.12);
  padding:10px 14px; border-radius:10px; text-decoration:none;
}

/*
==============================
بحث المنتجات والترقيم (v0.10)
==============================
*/
.prod-filters{
  margin-inline-start:auto; display:flex; gap:8px; align-items:center;
 width:100%;
}
.pf-search{
  background:#ffffff; color:#000000; border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:8px 12px; min-width:220px;
  border: 1px solid #000;
}

.pf-btn{
  background:#ffffff; color:#000000; border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; padding:8px 12px; cursor:pointer;
border: 1px solid #000;
}
.pf-reset{
  color:#212224;
  text-decoration:none;
  font-size:18px;      /* يكبر رمز الـ X */
  line-height:1;
}
.pf-reset:hover{
  color:#7aa2ff;
}


.prod-head {
  display: flex;
  flex-direction: column;   /* 👈 يخلي العناصر فوق بعض */
  align-items: flex-start;  /* يبدأ من اليمين/اليسار حسب الـ dir */
  gap: 12px;                /* مسافة بينهم */
  margin-bottom: 8px;
}

.prod-cats{ display:flex; gap:18px; flex-wrap:wrap;  margin-block-end: 20px; }
.pf-chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#151922; border:1px solid rgba(255,255,255,0.08); color:#eaeef7; text-decoration:none; font-size:13px;
}
.pf-chip.active{ outline:2px solid #7aa2ff }

.pagination{
  margin-top:14px; display:flex; gap:6px; justify-content:center; align-items:center;
}
.pg-btn, .pg-num{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  padding:0 10px; border-radius:10px; text-decoration:none; color:#eaeef7;
  background:#151922; border:1px solid rgba(255,255,255,0.08);
}
.pg-num.active{ background:#1b2030; border-color: rgba(122,162,255,0.4) }
.pg-ellipsis{ color:#a7b0c3; padding:0 6px }

/*
==============================
ترتيب طبقات العناصر (Z-index)
==============================
يضمن ظهور العناصر فوق بعضها بالترتيب الصحيح.
*/
.hamburger{ z-index: 50; }
.sidebar{ z-index: 45; }
.backdrop{ z-index: 40; pointer-events: auto; }







/* ===== v0.3.3 — Sidebar side + Toggle button aligned with language ===== */

/* زر القائمة: في LTR يسار، في RTL يمين */
.hamburger{
  position:absolute; inset-block-start:50%; transform:translateY(-50%);
  font-size:22px; line-height:1;
  background:#000000; color:#eaeef7; border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; padding:6px 10px; cursor:pointer; z-index:50;
}
/* LTR: زر يسار */
html:not(.rtl) .hamburger{ inset-inline-start:12px; inset-inline-end:auto; }
/* RTL: زر يمين */
html.rtl .hamburger{ inset-inline-end:12px; inset-inline-start:auto; }

/* الخلفية المعتمة */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.45);
  z-index:40; display:none;
}
body.sidebar-open .backdrop{ display:block; }

/* السايدبار: محاذاة واتجاه الحركة حسب اللغة */
/* LTR: يخرج من اليسار */
html:not(.rtl) .sidebar{
  position:fixed; top:var(--header-height); bottom:0; left:0; right:auto;
  width:var(--sidebar-width); background:#ffffff;
  border-inline-end:1px solid rgba(255,255,255,0.06);
  padding:14px; overflow:auto; z-index:45;
  transform:translateX(-100%); transition:transform .25s ease;
}
/* RTL: يخرج من اليمين */
html.rtl .sidebar{
  position:fixed; top:var(--header-height); bottom:0; right:0; left:auto;
  width:var(--sidebar-width); background:#ffffff;
  border-inline-start:1px solid rgba(255,255,255,0.06);
  padding:14px; overflow:auto; z-index:45;
  transform:translateX(100%); transition:transform .25s ease;
}

/* حالة الفتح (مشتركة) */
body.sidebar-open .sidebar{ transform:translateX(0); }

/* الروابط داخل السايدبار */
.sidebar-nav{ display:flex; flex-direction:column; gap:8px }
.sidebar-link{
  display:block; padding:12px 14px; border-radius:10px; text-decoration:none; color:#000000;
  background:linear-gradient(270deg,rgb(255, 255, 255),rgb(255, 255, 255));
  border:1px solid rgb(0, 0, 0)
}
.sidebar-link:hover{ background:rgba(255,255,255,.06) }

/* تأكيد أن المحتوى لا يحجز مساحة جانبية */
.site-main{ margin-inline-start:0 !important; margin-inline-end:0 !important; }























/* ===== v0.3.3 — Force sidebar & button to same side by language (FINAL OVERRIDES) ===== */

/* الزر: RTL → يمين، LTR → يسار */
.hamburger{
  position:absolute !important;
  top:50% !important; transform:translateY(-50%) !important;
  z-index:50 !important;
}
html.rtl .hamburger{
  right:12px !important; left:auto !important;
}
html:not(.rtl) .hamburger{
  left:12px !important; right:auto !important;
}

/* الخلفية المعتمة مرتبطة بحالة الفتح */
.backdrop{
  position:fixed !important; inset:0 !important; background:rgba(0,0,0,.45) !important;
  z-index:40 !important; display:none !important; pointer-events:auto !important;
}
body.sidebar-open .backdrop{ display:block !important; }

/* السايدبار: إفتراضًا مغلق خارج الشاشة، ومكانه حسب اللغة */
.sidebar{
  position:fixed !important;
  top:var(--header-height, 64px) !important; bottom:0 !important;
  width:var(--sidebar-width, 280px) !important;
  z-index:45 !important; overflow:auto !important;
  transition:transform .25s ease !important;
  /* نلغي أي تموضع قديم */
  left:auto !important; right:auto !important;
}
html.rtl .sidebar{
  right:0 !important; left:auto !important;
  transform:translateX(100%) !important; /* يخرج من اليمين */
}
html:not(.rtl) .sidebar{
  left:0 !important; right:auto !important;
  transform:translateX(-100%) !important; /* يخرج من اليسار */
}
/* حالة الفتح */
body.sidebar-open .sidebar{ transform:translateX(0) !important; }

/* لا تحجز مساحة للمحتوى */
.site-main{
  margin-inline-start:0 !important;
  margin-inline-end:0 !important;
}



















/* ===== v0.3.4 — Language buttons in sidebar ===== */
.sidebar-lang{
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display:flex; gap:8px; justify-content:center;
}
.lang-btn{
  flex:1;
  background:#1b2030;
  color:#eaeef7;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  font-size:14px;
}
.lang-btn.active{
  border-color:#7aa2ff;
  background:#2a3145;
}















/* ===== v0.4.1 — Story circles ===== */
.stories-grid{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.story-circle{
  width:86px;
  height:95px;
  border-radius:50%;
  border:none;
  padding:0;
  cursor:pointer;
  background:none;
  position:relative;
}

.story-thumb{
  width:100%;
  height:100%;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  border:3px solid #7aa2ff;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
  transition: transform .2s ease;
}

.story-circle:hover .story-thumb{
  transform:scale(1.05);
}


















/* ===== v0.4.2 — IG-like Stories ===== */
/* ---------- Stories strip (شريط فقاعات الستوري أعلى الصفحة) ---------- */
.stories-strip{
  padding: 12px 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.stories-scroll{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 12px 10px;
  scrollbar-width: thin;
}

/* ---------- Story bubble: صورة دائرية + حلقة متدرجة + تسمية ---------- */
.story-bubble{
  inline-size: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.story-bubble .ring{
  position: absolute; top: 0; left: 50%; transform: translate(-50%, 8%);
  inline-size: 74px; block-size: 74px; border-radius: 50%;
  background: conic-gradient(#f58529, #dd2a7b, #8134af, #515bd4, #f58529); /* حلقة إنستغرام */
  filter: none !important;
}
.story-bubble .thumb{
  position: relative; inline-size: 74px; block-size: 74px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 3px solid #fff;                 /* حد أبيض داخل الحلقة مثل IG */
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.story-bubble .thumb > img,
.story-bubble .thumb > video{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* يملأ الدائرة دون تشويه */
  border-radius: 50%;
  display: block;
  pointer-events: none;      /* لا يأخذ التفاعل بالماوس */
}
.story-bubble .label{
  display:block; inline-size: 100%;
  text-align: center; font-size: 12px; line-height: 1.2;
  color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.rtl .story-bubble .label{ direction: rtl; }
html:not(.rtl) .story-bubble .label{ direction: ltr; }

/* عدّاد العناصر (يظهر فقط لو > 1) */
.story-bubble .count{
  position: absolute; top: 4px; inset-inline-end: 0;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: #111; color: #fff; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 11px; line-height: 18px; text-align: center;
}

/* Hover/Large devices تأثير خفيف */
@media (hover:hover){
  .story-bubble:hover .thumb{ transform: scale(1.04); transition: transform .18s ease; }
}


/* ---------- Story viewer (عارض الستوري بملء الشاشة) ---------- */
.story-viewer{ position: fixed; inset: 0; z-index: 1000; }
.sv-backdrop{ background: rgba(0,0,0,0.9) !important; }
.sv-frame{
  position: absolute; inset-inline: 0; inset-block: 5vh 5vh; margin: auto;
  inline-size: min(420px, 92vw); block-size: min(86vh, 820px);
  background: #000; border: 0; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); overflow: hidden;
  display: flex; flex-direction: column;
}
.sv-top{ display:flex; align-items:center; gap: 8px; padding: 10px 12px; }
.sv-bars{ display: flex; gap: 6px; flex: 1; }
.sv-bars .bar{ flex: 1; height: 3px; background: rgba(255,255,255,0.25); border-radius: 3px; overflow: hidden; }
.sv-bars .bar > span{ display: block; height: 100%; width: 0%; background: #fff; } /* شريط تقدم أبيض مثل IG */
.sv-close{
  background: transparent; color: #fff; border: 0; font-size: 20px;
  width: 36px; height: 28px; border-radius: 8px; cursor: pointer;
}

.sv-stage{
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
#svMedia img, #svMedia video{
  max-inline-size: 100%;
  max-block-size: 100%;
  display: block; border-radius: 8px; object-fit: contain;
}

/* 1) اجعل صندوق الوسائط يملأ المسرح ويتوسّط المحتوى */
#svStage{
  display: flex;                 /* لديك هذا فعليًا، نؤكده هنا */
  align-items: center;
  justify-content: center;
  min-width: 0;                  /* مهم جداً مع flex لمنع قصّ المحتوى */
  min-height: 0;                 /* مهم جداً مع flex لمنع قصّ المحتوى */
}
#svMedia{
  width: 100%;
  height: 100%;
  display: flex;                 /* حتى نوسّط الفيديو/الصورة داخله */
  align-items: center;
  justify-content: center;
}

/* 2) صغّر الفيديو/الصورة بنسبة وتناسب لداخل الإطار بدون تمديد */
#svMedia img,
#svMedia video{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;           /* يعرضه كاملاً مع المحافظة على النسبة */
  display: block;
}

/* 3) تأكد أن الإطار لا يقيّد الانكماش داخل flex */
.sv-frame{
  display: flex;
  flex-direction: column;
  min-width: 0;                  /* يسمح للمرحلة بالانكماش داخل الإطار */
  min-height: 0;
}
.sv-stage{
  flex: 1;                       /* لديك هذا ضمنيًا؛ نثبته */
  min-width: 0;                  /* يمنع سلوك min-content على سطح المكتب */
  min-height: 0;
  overflow: hidden;              /* اختياري: أخفِ التمرير */
}






/* مناطق النقر يمين/يسار */
.tap-zone{ position: absolute; top: 0; bottom: 0; width: 40%; cursor: pointer; }
.tap-zone.left{ left: 0; } .tap-zone.right{ right: 0; }

/* شريط العنوان وأزرار التالي/السابق أسفل */
.sv-caption{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-top: 1px solid rgba(255,255,255,0.08);
  color: #fff; background: #000;
}
.sv-title{ font-size: 14px; opacity: .9; color: #fff; }
.sv-prev, .sv-next{
  background: rgba(255,255,255,0.08); color: #fff; border: 0;
  border-radius: 10px; padding: 6px 10px; cursor: pointer;
}

/* حالة الإيقاف المؤقت أثناء الضغط المطوّل */
.sv-stage.paused::after{
  content: 'موقّف مؤقّتاً'; position: absolute; bottom: 10px; right: 12px;
  font-size: 12px; opacity: .9; color: #111; background: #fff;
  border-radius: 8px; padding: 4px 8px;
}






















/* ---------- Highlights (فقاعات ثابتة في صفحة البروفايل/قسم مستقل) ---------- */
#highlights .stories-strip{ padding: 8px 0 !important; }
.hl-bubble{
  inline-size: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; color: inherit; cursor: pointer;
  position: relative;
}
/* في إنستغرام، فقاعات الـ Highlights حافّة هادئة (رمادي فاتح) وليس تدرّج ملون */
.hl-bubble .ring{
  position: absolute; top: 0; left: 50%; transform: translate(-50%, 8%);
  inline-size: 74px; block-size: 74px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 62%, rgba(0,0,0,0) 63%),
              conic-gradient(#d1d5db, #d1d5db); /* إطار رمادي رقيق */
}
.hl-bubble .thumb{
  position: relative; inline-size: 74px; block-size: 74px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid #e5e7eb; /* #ddd */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  background-color: #fff;
}
.hl-bubble .label{
  display:block; inline-size: 100%;
  text-align: center; font-size: 12px; line-height: 1.2;
  color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-bubble .count{
  position: absolute; top: 4px; inset-inline-end: 0;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: #111; color: #fff; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 11px; line-height: 18px; text-align: center;
}

/* ---------- Highlight viewer (عارض الهايلايت) ---------- */
.hl-viewer{ position: fixed; inset: 0; z-index: 1000; }
.hlv-backdrop{ background: rgba(0,0,0,0.9) !important; }
.hlv-frame{
  position: absolute; inset-inline: 0; inset-block: 5vh 5vh; margin: auto;
  inline-size: min(420px, 92vw); block-size: min(86vh, 820px);
  background: #000; border: 0; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); overflow: hidden;
  display: flex; flex-direction: column;
}
.hlv-top{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hlv-bars{ display:flex; gap:6px; flex:1; }
.hlv-bars .bar{ flex:1; height:3px; background: rgba(255,255,255,0.25); border-radius:3px; overflow:hidden; }
.hlv-bars .bar > span{ display:block; height:100%; width:0%; background:#fff; }
.hlv-close{ background: transparent; color: #fff; border: 0; font-size: 20px; width: 36px; height: 28px; border-radius: 8px; cursor: pointer; }

.hlv-stage{
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.hlv-media img, .hlv-media video{
  max-inline-size: 100%; max-block-size: 100%;
  display: block; border-radius: 8px; object-fit: contain;
}

.hlv-tap{ position: absolute; top: 0; bottom: 0; width: 40%; cursor: pointer; }
.hlv-tap.left{ left: 0; } .hlv-tap.right{ right: 0; }

.hlv-caption{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-top: 1px solid rgba(255,255,255,0.08);
  color: #fff; background: #000;
}
.hlv-title{ font-size: 14px; opacity: .9; color: #fff; }
.hlv-prev, .hlv-next{
  background: rgba(255,255,255,0.08); color: #fff; border: 0;
  border-radius: 10px; padding: 6px 10px; cursor: pointer;
}


/* === Highlights viewer: fit media correctly on desktop & mobile === */

/* 1) المسرح يملأ المساحة ويُوسّط المحتوى */
#hlvStage{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;   /* مهم جداً مع flex لمنع قصّ المحتوى */
  min-height: 0;  /* مهم جداً مع flex لمنع قصّ المحتوى */
}

/* 2) صندوق الوسائط يملأ المسرح ويُوسّط العنصر داخله */
#hlvMedia{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3) صغّر الفيديو/الصورة بنسبة وتناسب لداخل الإطار بدون تمديد */
#hlvMedia img,
#hlvMedia video{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;  /* يُظهره كاملًا ويحافظ على النسبة */
  display: block;
}

/* 4) تأكد أن عناصر flex لا تفرض min-content على سطح المكتب */
.hlv-frame{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.hlv-stage{
  flex: 1;
  min-width: 0;     /* يمنع انهيار max-height:100% */
  min-height: 0;
  overflow: hidden;  /* اختياري: أخفِ أشرطة التمرير */
}












/* ——— Product code text (v0.8.2) */
.pc-code{ font-size:12px; color:var(--muted); margin-top:2px }

/* ——— Zoom Viewer 1:1 (1080x1080 تقريبًا) */
.zoom-viewer{ position:fixed; inset:0; z-index:60; }
.zv-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.7); }
.zv-frame{
  position:absolute; inset-inline:0; inset-block:6vh 6vh; margin:auto;
  inline-size:min(92vw, 820px); block-size:min(84vh, 820px);
  background:#ffffff; border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;
 overscroll-behavior-x: contain;/* يمنع تمرير الصفحة الخلفية */
}

.zv-close{
  position:absolute; inset-inline-end:10px; inset-block-start:10px;
  background:transparent; border:1px solid rgb(0, 0, 0); color:#000000;
  border-radius:10px; padding:10px 10px; cursor:pointer; z-index:2;
}
.zv-body{
  flex:1; display:flex; align-items:center; justify-content:center;
  background:#ffffff;

  /* 🔽 إضافات للتحكم في التمرير */
  overflow-x: auto;              /* السماح بالتمرير الأفقي */
  scroll-snap-type: x mandatory; /* توقف سلس عند كل صورة */
  overscroll-behavior-x: contain;/* يمنع تمرير الصفحة الخلفية */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;           /* السحب فقط أفقي */
}

.zv-body img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 90vw;   /* لا تتعدى 90% من عرض الشاشة */
  max-height: 90vh;  /* لا تتعدى 90% من ارتفاع الشاشة */

  /* 🔽 إضافات لمزامنة الصور مع التمرير */
  flex: 0 0 100%;                /* كل صورة بعرض كامل */
  scroll-snap-align: center;     /* توقف عند منتصف كل صورة */
}


.zv-dots{ display:flex; gap:6px; justify-content:center; padding:10px; }
.zv-dots .dot{
  inline-size:8px; block-size:8px; border-radius:50%;
  background:rgb(155, 92, 92); cursor:pointer;
}
.zv-dots .dot.active{ background:#000000; }

/* اجعل صور الشبكة قابلة للتكبير بشكل مربع */
.pc-thumb{ aspect-ratio:1/1; } /* لديك أصلًا، نؤكدها هنا لتطابق 1080x1080 */
.pp-main img.zoomable{ aspect-ratio:1/1; object-fit:cover; }












.story-bubble .thumb, .hl-bubble .thumb {
  display:block; width:72px; height:72px; border-radius:50%; overflow:hidden;
  position:relative;
}
.thumb-video, .thumb-img {
  width:100%; height:100%; display:block; object-fit:cover; border-radius:50%;
}
.thumb-video { pointer-events:none; } /* حتى لا يلتقط النقر – النقر يروح للفقاعة لفتح العارض */



















/* v0.8.3 — Category Icons */
.caticon-grid {
  display: grid;
  gap: 20px;
  padding: 1px;   /* مسافة داخلية من كل الجهات */
  margin: 0 auto;
  
}


/* الموبايل: عمودين */
@media (max-width: 600px) {
  .caticon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* الكمبيوتر: 3 أعمدة */
@media (min-width: 601px) {
  .caticon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.caticon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.caticon-thumb {
  width: 96px;
  height: 96px;
  border-radius: 50%; /* دائري */

  background-size: cover;   /* الصورة تملأ الدائرة */
  background-position: center; /* تتمركز */
  background-repeat: no-repeat; /* ما تتكرر */

  box-shadow:
    inset -4px -4px 8px rgba(255, 255, 255, 0.2),
    inset 4px 4px 8px rgba(0, 0, 0, 0.6),
    0 4px 10px rgba(0, 0, 0, 0.7);
}


.caticon-name {
  margin-top: 8px;
  font-size: 16px;
  color:  #1b1c1d;
  text-align: center;
}

.caticon:hover .caticon-thumb {
  transform: scale(1.04);
}










/* انتقالات عامة على عنصر الأيقونة */
.caticon {
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), 
              opacity 700ms cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}

/* حالة التبعثر عند بداية التحميل */
.caticon-grid.scatter .caticon {
  opacity: 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px))
             rotate(var(--rot, 0deg))
             scale(.85);
  filter: blur(1px);
}

/* الحالة النهائية (مصطفة في الشبكة) */
.caticon-grid.ready .caticon {
  opacity: 1;
  transform: none;
  filter: none;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .caticon { transition: none !important; }
  .caticon-grid.scatter .caticon {
    opacity: 1;
    transform: none;
    filter: none;
  }
}














/* v0.8.4 — Product Sizes */
.sizes-block{margin:12px 0 16px}
.sizes-title{font-weight:700;margin-bottom:8px}
.sizes-list{display:flex;flex-wrap:wrap;gap:8px}
.size-pill{
  border:1px solid rgba(255,255,255,.18);
  background:#0e1420;
  color:#eaeef7;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}
.size-pill.active{
  outline:2px solid #2a5fff;
  border-color:#2a5fff;
}

















/* شريط قانوني ثابت في أسفل الصفحة بدون استخدام وسم footer */
/* Footer v2: يستخدم المصطلح footer2 فقط */
/* Footer v2 (footer2) */
.footer2 {
  background: #0f0f0f;         /* لون داكن أنيق */
  color: #ffffff;              /* نص أبيض */
  border-top: 1px solid #222;  /* خط علوي خفيف */
  font-size: 14px;
}
.footer2[dir="rtl"] { direction: rtl; }
.footer2[dir="ltr"] { direction: ltr; }

.footer2__container {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 56px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;     /* وسط السطر */
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.2px;
  white-space: pre-wrap;
}














/*لمنع تكبير الشاشة اثناء الكتابة*/

/* 1) اجعل مقاس خط حقول الإدخال ≥ 16px على الشاشات الصغيرة (iOS) */
@media (max-width: 767px) {
  input,
  textarea,
  select,
  .input,
  .form-control,
  [type="text"],
  [type="search"],
  [type="email"],
  [type="tel"],
  [type="number"],
  [type="password"] {
    font-size: 16px !important;
    line-height: 1.2;
  }

  /* لو عندك حقل داخل عناصر لها تصغير عام */
  .search input,
  .header input,
  .footer input {
    font-size: 16px !important;
  }
}

/* 2) لا تجبر iOS على تكبير النص تلقائيًا */
html {
  -webkit-text-size-adjust: 100%;
}

/* 3) لو عندك body أو حاويات عليها scale/transform أو zoom — ألغها في الموبايل */
@media (max-width: 767px) {
  body,
  .page,
  .layout {
    transform: none !important;
    zoom: 1 !important; /* احتياط: بعض الثيمات تستخدم zoom */
  }
}
















/* منع التحديد والقائمة في طبقات العارضات كلّها */
.story-viewer, .sv-backdrop, .sv-frame, .sv-stage,
.hl-viewer, .hlv-backdrop, .hlv-frame, .hlv-stage,
.teaser-viewer, .tv-backdrop, .tv-frame,
.zoom-viewer, .zv-backdrop, .zv-frame,
.stories-strip, .stories-scroll,
.hl-grid, .teasers-grid, .products-grid, .site-main, .container {
  -webkit-user-select: none; /* يمنع تحديد النصوص/العناصر في Safari على iOS */
  user-select: none;         /* يمنع التحديد في بقية المتصفحات */
  -webkit-touch-callout: none;          /* يلغي قائمة الضغط المطوّل (Copy/Share) على iOS */
  -webkit-tap-highlight-color: transparent; /* يمنع ظهور وميض رمادي عند لمس العناصر في الموبايل */
}

/* صور وفيديوهات داخل هذه المناطق أصلاً معطلة للسحب والتحديد */
.story-viewer img, .story-viewer video,
.hl-viewer img, .hl-viewer video,
.teaser-viewer img, .teaser-viewer video,
.zoom-viewer img, .zoom-viewer video {
  -webkit-user-drag: none;    /* يمنع سحب الصورة أو الفيديو بالماوس أو اللمس */
  -webkit-user-select: none;  /* يمنع تحديد الصورة/الفيديو في Safari */
  user-select: none;          /* يمنع التحديد في باقي المتصفحات */
  -webkit-touch-callout: none; /* يلغي القائمة عند الضغط المطوّل على الصور والفيديو */
}

/* لو عندك صور داخل روابط */
.story-viewer a img, .hl-viewer a img,
.teaser-viewer a img, .zoom-viewer a img {
  -webkit-touch-callout: none; /* يمنع القائمة عند الضغط المطوّل على الصور داخل روابط */
}

/* مهم: اسمح بالتحديد داخل حقول النماذج فقط */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text !important; /* السماح بتحديد النصوص داخل الحقول على iOS */
  user-select: text !important;         /* السماح بالتحديد في باقي المتصفحات */
  -webkit-touch-callout: default !important; /* إبقاء قائمة الضغط المطوّل طبيعية داخل الحقول (للنسخ/اللصق) */
}








/* قفل عالمي يمنع التحديد والقائمة على كل الصفحة أثناء فتح عارض */
body.no-select,
body.no-select * {
  -webkit-user-select: none !important;  /* Safari iOS */
  user-select: none !important;          /* بقية المتصفحات */
  -webkit-touch-callout: none !important;/* يمنع قائمة الضغط المطوّل */
  -webkit-tap-highlight-color: transparent !important;
}

/* اسمح بالتحديد/النسخ داخل الحقول فقط حتى مع القفل */
body.no-select input,
body.no-select textarea,
body.no-select select,
body.no-select [contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}