/* الخدعة السحرية: إذا تم إضافة الكلاس الفوري، يختفي السبلاش كلياً بدون انتظار الجافاسكربت */
.no-splash #lion-splash {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
   
/* 🚀 تم تحديث حجم أيقونة البحث إلى 30px */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Tajawal',Arial,sans-serif}
html,body{height:100%}
body{background:#f5f5f5;color:#111}

/* Top Bar */
.top-bar{
  position:fixed;top:0;left:0;width:100%;
  background:#FFA500;color:#fff;display:flex;justify-content:space-between;align-items:center;
  padding:12px 15px;z-index:1000;
  border-bottom:1px solid rgba(0,0,0,0.2);
}

/* 🌟 أيقونة القائمة (الهامبرغر) - عادت لتصبح SVG بالكامل */
.menu-btn{
  width:34px;
  height:34px;
  cursor:pointer;
  user-select:none;
  color:#000;
  
  /* يتم توسيط محتوى الـ SVG داخل الحاوية */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 🌟 إستايلات SVG لضبط الأبعاد داخل الحاوية */
.menu-btn svg {
  width: 100%; 
  height: 100%; 
  fill: #000; /* تعبئة المستطيلات باللون الأسود */
  display: block;
}

.bell-btn{width:34px;height:34px;cursor:pointer;user-select:none}
.bell-btn svg{width:100%;height:100%;fill:#000}
.search-box{
  flex:1;margin:0 12px;background:#fff;border-radius:25px;
  /* ✅ تعيين البطانة اليمنى (لأن الاتجاه RTL) إلى 7px */
  padding:10px 7px 10px 14px; 
  display:flex;align-items:center;
}
.search-box .search-icon{
  /* ⭐️ تم الحفاظ على 2px كمسافة داخلية بين الأيقونة والـ padding الذي أصبح 7px */
  margin-left: 2px;
  display: flex; 
  align-items: center;
  flex-shrink: 0; 
}
.search-box .search-icon svg{
  fill: #555; 
  /* ✅ تم التحديث هنا لفرض الحجم 30px */
  width: 30px !important; 
  height: 30px !important;
  display: block;
}
.search-box .search-text{
  flex:1;margin-left:5px;
  /* ⚙️ تم تعديل الحجم إلى 20px */
  font-size:20px; 
  font-weight:700;color:#666;text-align:right;
  /* ⚙️ تم إضافة وضع نسبي لتمكين الإزاحة لأسفل */
  position: relative;
  /* ⚙️ تم إنزال العنصر 3 بكسل لأسفل */
  top: 3px; 
}
.search-box .search-text input{
  width:100%;border:none;outline:none;background:transparent;
  /* ⚙️ تم تعديل الحجم إلى 20px */
  font-size:20px;
  font-weight:700;
  /* 🎯 التعديل الجديد: لجعل النص المكتوب أسود تمامًا */
  color:#000; 
  text-align:right;
  direction: rtl;
}
/* 🎯 تعديل إضافي: لجعل لون الـ placeholder رمادي فاتح (لتمييزه عن النص المكتوب) */
.search-box .search-text input::placeholder {
    color: #666;
    opacity: 1; /* للتأكد من ظهور اللون */
}


/* 🟢 تخصيص نمط علم ليبيا الدائري SVG */
.search-box .flag-svg {
  /* لضمان حجم وشكل دائري متناسق */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 8px; 
  overflow: hidden; 
  flex-shrink: 0;
}
/* 🟢 نمط SVG للتأكد من تغطية المساحة المخصصة له */
.search-box .flag-svg svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* Feature Categories */
.feature-card-wrapper{
  position:fixed;top:75px;left:0;width:100%;
  height:65px; 
  background:#f0f0f0;
  box-shadow:0 4px 8px rgba(0,0,0,0.15);
  z-index:999;display:flex;align-items:flex-end;
  /* ✅ التعديل المطلوب: إعادة تفعيل التمرير الأفقي */
  overflow-x:auto;
  padding:0 6px;
}
.feature-card-wrapper::-webkit-scrollbar{display:none}
.feature-card{display:flex;align-items:flex-end;gap:12px;white-space:nowrap}
.feature-item{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  /* اللون الافتراضي للكلمة */
  color:#000; 
  font-size:16px;font-weight:700;cursor:pointer;user-select:none;
  flex-shrink:0;margin-bottom:0;position: relative;padding:0 6px;
  background-color: transparent; 
  -webkit-appearance: none;
  appearance: none;
  padding-bottom: 2px;
}
.feature-item input[type="radio"]{display:none;}

/* التعديل الجديد: تطبيق اللون الأزرق على النص عند التحديد */
.feature-item input:checked ~ .text {
  color: #0056b3; /* نفس لون الخط المتحرك تماماً */
}

.feature-item .line{
  height:3px;width:100%;background:#0056b3;
  position:absolute;bottom:0;left:0;opacity:0;
}
.feature-item input:checked ~ .line{opacity:1;}

/* تم إصلاح التوافقية مع نظام iOS */
.feature-item,
.feature-item .text,
.feature-card-wrapper,
.feature-card {
  -webkit-tap-highlight-color: transparent; 
  -webkit-touch-callout: none;               
  -webkit-user-select: none;
  user-select: none;
  /* أزلنا touch-action لمنع تجمد نقرات أجهزة Apple */
}

/* نضمن بقاء الـ input الخاص بالبحث نشطاً وقابلاً للكتابة في كل الأجهزة */
.search-box input {
  -webkit-user-select: text !important;
  user-select: text !important;
}

}
::selection { background: transparent; color: inherit; }
.feature-item:focus,
.feature-item:active,
.feature-item input:focus,
.feature-item input:active,
.feature-item *:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Content */
/* 🏆 التعديل هنا: زيادة المسافة العلوية إلى 145 بكسل */
.content-wrapper{padding-top:145px}
.listings{display:flex;flex-direction:column;gap:5px;padding:0 10px 90px 10px}
.card{
  width:100%;background:#fff;border-radius:8px;overflow:hidden;
  display:flex;flex-direction:row-reverse;align-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  /* 🌟🌟 طول البطاقة 120 بكسل 🌟🌟 */
  height:120px; 
}
.card .emoji{
  width:120px;height:100%;display:flex;justify-content:center;align-items:center;font-size:50px;
  border-radius:0 8px 8px 0;background:#fff;flex:0 0 120px;
}
.card .info{
  
  /* 🏆 التعديل الأساسي 1: إلغاء محاولة التوسيط العمودي والاعتماد على ترتيب العناصر */
  display:flex;
  flex-direction:column; 
  justify-content: flex-start; /* تثبيت العناصر في الأعلى */
  align-items: flex-start; 
  gap: 0; 
  min-width:0;overflow:hidden;
  
  /* 🏆 التعديل الأساسي 2: لتكون نقطة مرجعية للـ position: absolute; */
  position: relative; 
  height: 100%;
  width:100%;text-align:right;
  
  /* بطانة العنصر الداخلي: علوي 0 | أيمن 7 | سفلي 0 | أيسر 2 */
  padding: 0px 7px 0px 2px; 
}

/* ⭐️ الصف الذي يحتوي على معلومات الناشر والمتابعة */
.publisher-row{
  display:flex;align-items:center;justify-content:flex-start;
  width:100%;
  position: relative;
  margin: 0; 
  
  /* 🏆 التعديل الأساسي 3: تثبيت صف الناشر في الأعلى */
  margin-top: 0px; 
  padding-top: 7px; /* لضمان وجود مسافة بينه وبين الحافة العلوية لـ .card */
  
  /* ⭐⭐ الهامش السفلي 6 بكسل (من طلب سابق) ⭐⭐ */
  padding-bottom: 6px; 
}
.publisher {
  display:flex;
  flex-direction: row; 
  align-items:center;
  gap:10px; 
  flex-shrink: 1; 
  max-width: calc(100% - 70px);
  overflow: hidden; 
}

/* 🏆 حاوية جديدة: لوضع الاسم والتوقيت عمودياً بجانب الأفاتار */
.publisher-details {
    display: flex;
    flex-direction: column-reverse; 
    align-items: flex-start; 
    gap: 0; 
    line-height: 1;
    overflow: hidden; 
    white-space: nowrap; 

    position: relative;
    top: 3px;
}


.avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#e6e6e6;
  display:flex;align-items:center;justify-content:center;
  color:#333;font-weight:800;
  font-size:13px; 
  flex-shrink:0;
}
.publisher-name {
  display:flex;
  flex-direction:row-reverse; 
  align-items: center;
  line-height:1;
  font-size:13px; 
  font-weight: 700;
  gap: 4px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
.publisher-name span {
  font-weight:900;
  color:#000; 
  font-size:13px; 
}

/* 🏆🏆 التعديلات المطلوبة على التوقيت 🏆🏆 */
.time-ago {
    font-size: 12px; 
    color: #555;
    font-weight: 700;
    margin-top: 1px; 
    
    display: flex; 
    flex-direction: row; 
    align-items: center;
    gap: 3px; 
    
    position: relative;
    top: 0px; 
}

/* ✅ أنماط حاوية الـ SVG الجديدة */
.time-ago svg {
    width: 13px;
    height: 13px;
    
    flex-shrink: 0;
    position: relative;
    top: -1.5px; 
}

.follow-btn{
  background:#FFA500;color:#000;border:none;border-radius:6px;
  
  /* ✅ حجم الزر مصغر */
  width: 40px; 
  height: 18px;
  padding: 0; 
  
  display:flex;
  align-items:center;
  justify-content:center;
  
  font-weight:700;
  user-select:none;white-space:nowrap;
  position:absolute;
  
  /* 🏆🏆 التعديل النهائي: تم رفع الزر إلى 2 بكسل 🏆🏆 */
  top: 9px; 
  
  /* ⭐⭐ تم الحفاظ على 20px ⭐⭐ */
  left: 20px; 
}

.follow-btn .follow-text {
    /* 🎯 حجم الخط الجديد 10px */
    font-size: 10px; 
    font-weight: 700;
    
    /* 🎯 إزاحة النص 2px للأسفل */
    transform: translateY(2px); 
    display: block;
}

/* 🏆 نمط العنوان الموحد (يمتد على سطرين) - جديد */
.unified-title-row {
  display: block; 
  
  /* 🏆 التعديل الأساسي 4: إزالة الهوامش العمودية وجعلها تعتمد على الهوامش حولها */
  margin-top: 0;
  margin-bottom: 0;
  
  /* ⭐ اللون الأزرق ⭐ */
  color: #0056b3; 
  
  /* ⭐ حجم الخط 17 بكسل ⭐ */
  font-size: 17px; 
  font-weight: 800;
  line-height: 1.3;
  
  /* تنسيق الامتداد على سطرين مع النقاط في النهاية */
  overflow: hidden;
  text-align: right; 
  
  /* 🏆 التعديل الأساسي 5: تحديد المساحة المتاحة للعنوان. 
     الإجمالي (120) - صف الناشر (~37) - صف الإيموجي (~33) = ~50 بكسل مساحة متاحة (سطرين)
  */
  max-height: 50px; 
  width: 100%;
  
  /* الخصائص الأساسية لتقييد النص على سطرين مع نقاط التجاوز */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* اقتصار على سطرين */
  -webkit-box-orient: vertical;

  /* 🎯 التعديل الجديد: إزاحة العنوان 3 بكسل للأسفل */
  position: relative; 
  top: 3px; 
}

/* ⭐⭐ الأنماط الجديدة لصف الإيموجي تحت العنوان ⭐⭐ */
.reaction-row {
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    
    /* 🏆🏆 التعديل الأساسي 6: التثبيت المطلق للحافة السفلية تماماً (تم التحديث إلى -3px) */
    position: absolute;
    bottom: -3px; 
    right: 7px; 
    left: 2px; 
    
    /* 🏆🏆 التعديل الجديد 2: المسافة بين العناصر 4 بكسل 🏆🏆 */
    gap: 4px;
}

/* 🏆🏆 النمط المضاف لأي إيموجي/نص داخل صف التفاعل لضمان الحجم 22 بكسل 🏆🏆 */
.reaction-row span {
    /* 🏆🏆 حجم الخط الموحد 22 بكسل 🏆🏆 */
    font-size: 22px; 
    flex-shrink: 0;
    line-height: 1;
    /* إزاحة طفيفة لضبط المحاذاة العمودية مع الأيقونة */
    position: relative;
    top: 1px; 
}

/* 🏆🏆 النمط المضاف لأيقونة المشاركة الجديدة SVG 🏆🏆 */
.reaction-row .share-icon {
    /* 🏆🏆 تم التحديث هنا: الحجم 33 بكسل 🏆🏆 */
    width: 33px; 
    height: 33px;
    
    /* تلوين الأيقونة باللون الأزرق */
    fill: #007bff; /* تم استخدام الأزرق #007bff بدلاً من الأسود ليتناسب مع النمط السابق */
    
    /* لضمان محاذاة أفضل مع الإيموجي */
    position: relative;
    top: -2px; /* تم تعديل الإزاحة العلوية لتوسيط الأيقونة الجديدة مع الإيموجي */
    flex-shrink: 0;
}

/* 🏆🏆 النمط الجديد لحاوية أيقونة المشاركة ورقم التفاعل 🏆🏆 */
.reaction-row .share-info {
    display: flex;
    /* 🎯 التعديل: تغيير الترتيب ليظهر الرقم أولاً ثم الأيقونة */
    flex-direction: row-reverse; 
    align-items: center;
    gap: 3px; /* المسافة بين الأيقونة والرقم */
    flex-shrink: 0;
}

/* 🏆🏆 نمط رقم التفاعل 🏆🏆 */
.reaction-row .share-info .share-count {
    font-size: 14px; /* حجم معقول لرقم التفاعل */
    font-weight: 700;
    color: #555; /* لون رمادي فاتح ليتناسب مع النمط */
    line-height: 1;
    position: relative;
    top: 2px; /* لتوسيط الرقم مع الأيقونة */
}


/* ========================================================== */
/* 🌟 أنماط شريط التفاعلات الجديد (محاكاة فيسبوك) 🌟            */
/* ========================================================== */

/* 1. جعل القلب نقطة مرجعية للشريط */
.like-button-wrapper {
    position: relative;
    cursor: pointer;
    /* لمنع ظهور قائمة السياق في الهواتف عند الضغط الطويل */
    user-select: none;
    -webkit-user-select: none;
}

/* 2. تنسيق وإخفاء شريط التفاعلات */
.reaction-bar {
    /* وضعه في الأعلى فوق القلب */
    position: absolute;
    bottom: 100%; /* يبدأ من فوق عنصر القلب تماماً */
    
    /* تنسيق الحاوية */
    background: #fff;
    border-radius: 50px;
    padding: 5px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    
    /* عرض التفاعلات أفقياً */
    display: flex;
    gap: 10px; /* مسافة بين الإيموجي الجديد */
    
    /* إخفاء الشريط افتراضياً */
    opacity: 0;
    pointer-events: none; /* لتجنب التفاعل عندما يكون مخفياً */
    transform: translateY(20px) scale(0.5); /* يبدأ صغيراً وأسفل قليلاً */
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    /* لضمان ظهوره فوق كل شيء */
    z-index: 100; 
    
    /* 🏆🏆 التعديل المطلوب: ليتمركز فوق القلب بدلاً من اليمين 🏆🏆 */
    /* يتم حساب القيمة يدوياً لتناسب حجم الشريط (~120px) وحجم الإيموجي (~22px) */
    right: -100px; /* هذه القيمة تجعل الشريط يظهر يسار القلب قليلاً ليظهر بالكامل */
}

/* 3. تنسيق إيموجي التفاعل داخل الشريط */
.reaction-bar .reaction-emoji {
    font-size: 24px; /* حجم الإيموجي داخل الشريط */
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
    
    /* عند التحويم على إيموجي معين، يتم تكبيره قليلاً */
    &:hover {
        transform: translateY(-5px) scale(1.3);
    }
}

/* 4. إظهار الشريط عند التحويم على حاوية القلب */
.like-button-wrapper:hover .reaction-bar {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-5px) scale(1); /* إظهار مع حركة للأعلى وتكبير */
}


/* ⚠️ إخفاء العناصر التي لم تعد مستخدمة */
.description-row, .meta-row, .footer-row, .comments {
  display: none !important; 
}


/* Bottom Nav */
.bottom-nav{
  position:fixed;bottom:0;width:100%;
  background:#FFA500;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  color:#000;font-weight:bold;z-index:1000;
  height:55px;
  padding: 0 30px 3px 30px;
  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.20);
}
.bottom-nav div{
  text-align:center;
  cursor:pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: bold;
}
.bottom-nav svg{ 
  width: 35px;
  height: 35px;
  fill: currentColor;
  position: relative;
  top: 4px; 
}
/* أيقونة النشر */
.publish-btn {
    background: #000;
    width: 50px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    top: -9.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.publish-btn svg {
    fill: #fff;
    width: 24px;
    height: 24px;
    position: static;
}