/* ---------------------------------------------- */
/* ملف التنسيقات المخصصة (css/style.css)       */
/* ---------------------------------------------- */

/* استيراد خط عربي (اختياري - يمكنك استخدام الخط الافتراضي) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

body {
  /* استخدام الخط العربي إذا تم استيراده */
  font-family: 'Tajawal', sans-serif;
  background-color: #f8f9fa; /* لون خلفية رمادي فاتح مشابه للمثال */
  direction: rtl; /* تفعيل الاتجاه من اليمين لليسار */
  text-align: right; /* محاذاة النصوص لليمين بشكل افتراضي */
}

/* تنسيق رأس الصفحة */
.page-header h1 {
  color: #343a40; /* لون عنوان رئيسي داكن */
}
.page-header .lead {
  color: #6c757d; /* لون النص الفرعي */
}

/* تنسيق صندوق البحث والفرز */
.filter-box {
  background-color: #ffffff; /* خلفية بيضاء للصندوق */
  border-radius: 0.375rem; /* حواف دائرية قليلاً */
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* ظل خفيف */
}

.filter-box .form-select,
.filter-box .form-control {
   font-size: 0.9rem; /* تصغير حجم الخط قليلًا في حقول الإدخال */
}

/* تنسيق بطاقات الأدوات */
.tool-card {
  background-color: #ffffff;
  border: none; /* إزالة الحدود الافتراضية للبطاقة */
  border-radius: 0.375rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* تأثير بسيط عند المرور */
  height: 100%; /* لجعل كل البطاقات بنفس الارتفاع في الصف */
  display: flex; /* لجعل المحتوى يأخذ كامل الارتفاع */
  flex-direction: column; /* ترتيب العناصر بشكل عمودي */
}

.tool-card:hover {
  transform: translateY(-5px); /* رفع البطاقة قليلاً عند المرور */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* ظل أكبر عند المرور */
}

.tool-card .card-img-container {
    height: 150px; /* ارتفاع ثابت لمنطقة الصورة */
    display: flex;
    align-items: center; /* توسيط الصورة عمودياً */
    justify-content: center; /* توسيط الصورة أفقياً */
    padding: 1rem; /* هوامش داخلية حول الصورة */
    background-color: #f8f9fa; /* خلفية فاتحة لمنطقة الصورة */
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}


.tool-card .card-img-top {
  max-height: 100%;  /* أقصى ارتفاع للصورة هو ارتفاع الحاوية */
  max-width: 100%; /* أقصى عرض للصورة */
  object-fit: contain; /* الحفاظ على نسبة أبعاد الصورة بدون قص */
  width: auto; /* السماح للعرض بالتغير */
  height: auto; /* السماح للارتفاع بالتغير */
}

.tool-card .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* جعل جسم البطاقة يملأ المساحة المتبقية */
  padding: 1rem;
}

.tool-card .card-title {
  font-weight: 700; /* خط أثقل لاسم الأداة */
  margin-bottom: 0.5rem;
  color: #212529;
}

.tool-card .badge {
    align-self: flex-start; /* جعل التاج يبدأ من بداية السطر (يمين في RTL) */
    margin-bottom: 0.75rem; /* هامش أسفل التاج */
    font-size: 0.75em; /* حجم خط أصغر للتاج */
    padding: 0.3em 0.6em;
    background-color: #e9ecef !important; /* لون خلفية التاج (مع !important لتجاوز Bootstrap) */
    color: #495057 !important; /* لون نص التاج */
}

.tool-card .card-text {
  font-size: 0.875rem; /* حجم خط أصغر للوصف */
  color: #6c757d; /* لون أغمق قليلاً للوصف */
  margin-bottom: 1rem;
  flex-grow: 1; /* جعل الوصف يملأ المساحة قبل الأزرار */
}

.tool-card .card-text-date {
    font-size: 0.75rem;
    color: #adb5bd; /* لون فاتح لتاريخ التحديث */
    margin-bottom: 1rem; /* مسافة قبل الأزرار */
}

.tool-card .btn {
    font-size: 0.875rem; /* حجم خط أصغر للأزرار */
    padding: 0.5rem 0.75rem; /* هوامش داخلية للأزرار */
    display: flex; /* لتوسيط الأيقونة والنص */
    align-items: center; /* توسيط عمودي */
    justify-content: center; /* توسيط أفقي */
}

.tool-card .btn svg {
    margin-left: 0.3rem; /* مسافة بسيطة بين الأيقونة والنص (تنعكس في RTL) */
}

.tool-card .btn-primary {
    background-color: #6f42c1; /* لون بنفسجي مشابه للمثال */
    border-color: #6f42c1;
}

.tool-card .btn-primary:hover {
    background-color: #5a349a;
    border-color: #5a349a;
}

.tool-card .btn-outline-secondary {
     border-color: #ced4da;
     color: #6c757d;
}
.tool-card .btn-outline-secondary:hover {
     background-color: #e9ecef;
     color: #495057;
}

/* رسالة عدم وجود نتائج */
.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
    background-color: #e9ecef;
    border-radius: 0.375rem;
}

/* الفوتر */
footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6; /* خط فاصل أعلى الفوتر */
  font-size: 0.9rem;
  color: #6c757d;
}

/* أيقونات FontAwesome أو Bootstrap Icons (إذا كنت ستستخدمها بكثرة) */
/* يمكن تحميلها أو استخدام CDN */
.bi { /* لتطبيق بعض التنسيقات الأساسية على أيقونات Bootstrap */
    vertical-align: -0.125em; /* محاذاة أفضل مع النص */
}

/* --- شريط الأخبار المتحرك --- */
.ticker-wrap {
    width: 100%;
    overflow: hidden; /* إخفاء المحتوى الزائد الذي يتحرك */
    background-color: #f8f9fa; /* لون خلفية فاتح (يمكن تغييره) */
    border: 1px solid #dee2e6; /* حدود بسيطة */
    padding: 8px; /* هوامش داخلية علوية وسفلية */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    white-space: nowrap; /* منع التفاف النص لأسطر متعددة */
    font-size: 0.9rem;
}

.ticker-content {
    display: inline-block; /* جعله كتلة واحدة تتحرك */
    padding-right: 100%; /* البدء من خارج الشاشة على اليمين */
    animation: ticker-scroll-rtl 10s linear infinite; /* تطبيق التحريك */
}

/* إيقاف التحريك مؤقتًا عند مرور الماوس (اختياري) */
.ticker-wrap:hover .ticker-content {
    animation-play-state: paused;
}

.ticker-label {
    font-weight: bold;
    color: #6f42c1; 
    margin-right: 15px; /* استخدام الهامش الأيمن لـ RTL */
}

/* تعريف حركة التحريك من اليمين لليسار */
@keyframes ticker-scroll-rtl {
    0%   { transform: translateX(0); }      /* البدء من اليمين */
    100% { transform: translateX(-100%); } /* التحرك لليسار بمقدار عرض المحتوى */
}