.elementor-887 .elementor-element.elementor-element-6750af1 > .elementor-container{min-height:100vh;}.elementor-887 .elementor-element.elementor-element-a9f04a0 > .elementor-element-populated >  .elementor-background-overlay{background-image:url("https://violationssweida-doc.com/wp-content/uploads/2025/07/violationssweida.jpg");background-position:center center;background-repeat:no-repeat;opacity:0.5;}.elementor-bc-flex-widget .elementor-887 .elementor-element.elementor-element-a9f04a0.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-887 .elementor-element.elementor-element-a9f04a0.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-887 .elementor-element.elementor-element-a9f04a0 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;text-align:center;margin:6% 6% 6% 6%;--e-column-margin-right:6%;--e-column-margin-left:6%;padding:0% 3% 0% 3%;}.elementor-887 .elementor-element.elementor-element-a9f04a0 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-887 .elementor-element.elementor-element-ee85483 .elementor-heading-title{font-family:"Cairo", Sans-serif;font-size:27px;font-weight:bold;line-height:41px;}@media(min-width:1025px){.elementor-887 .elementor-element.elementor-element-a9f04a0 > .elementor-element-populated >  .elementor-background-overlay{background-attachment:fixed;}}@media(max-width:1024px){.elementor-887 .elementor-element.elementor-element-6750af1 > .elementor-container{min-height:60vh;}.elementor-887 .elementor-element.elementor-element-a9f04a0 > .elementor-element-populated >  .elementor-background-overlay{background-size:50% auto;}.elementor-887 .elementor-element.elementor-element-a9f04a0 > .elementor-element-populated{margin:24% 6% 12% 6%;--e-column-margin-right:6%;--e-column-margin-left:6%;padding:0% 0% 0% 0%;}}@media(max-width:767px){.elementor-887 .elementor-element.elementor-element-6750af1 > .elementor-container{min-height:54vh;}.elementor-887 .elementor-element.elementor-element-a9f04a0 > .elementor-element-populated >  .elementor-background-overlay{background-size:60% auto;opacity:0.25;}.elementor-887 .elementor-element.elementor-element-a9f04a0 > .elementor-element-populated{margin:16% 6% 0% 6%;--e-column-margin-right:6%;--e-column-margin-left:6%;}.elementor-887 .elementor-element.elementor-element-ee85483 .elementor-heading-title{font-size:16px;}}/* Start custom CSS for html, class: .elementor-element-d5af10b *//* --- الفلتر فقط مع اتجاه من اليمين لليسار --- */
.violation-type-filter-wrapper {
  max-width: 600px;
  margin: 20px auto;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  direction: rtl; /* فقط الفلتر */
  color: #222;
  padding: 0 15px;
  box-sizing: border-box;
  text-align: right;
}

.filter-instruction {
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: 700;
  text-align: right;
}

/* إخفاء الحقول الفعلية */
.violation-type-filter input[type="radio"] {
  display: none;
}

/* تصميم الحاوية مع تمرير أفقي */
.violation-type-filter {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap; /* منع الالتفاف */
  overflow-x: auto;  /* تفعيل التمرير الأفقي */
  -webkit-overflow-scrolling: touch; /* سلاسة التمرير في iOS */
  direction: rtl; /* اتجاه من اليمين لليسار داخل الفلتر */
}

/* تصميم الليبل ليشبه زر */
.violation-type-filter label {
  display: inline-block;
  padding: 8px 14px;
  min-width: 80px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff; /* نص أبيض */
  background-color: #000; /* خلفية سوداء */
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  user-select: none;
  border: 2px solid transparent;
  text-align: center;
  white-space: nowrap;
}

/* تأثير عند المرور */
.violation-type-filter label:hover {
  background-color: #222;
}

/* عند التحديد */
.violation-type-filter input[type="radio"]:checked + label {
  background-color: #444; /* لون أفتح قليلًا عند التحديد */
  border-color: #444;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* استجابة الموبايل للفلتر */
@media (max-width: 480px) {
  .violation-type-filter {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .violation-type-filter label {
    min-width: auto;
    width: 48%;
    margin-bottom: 10px;
    font-size: 0.9rem;
    padding: 8px 10px;
  }
}

/* --- تنسيق الجدول فقط --- */
.table-container {
  width: 100%;
  overflow-x: auto; /* السماح بالتمرير الأفقي إذا لزم */
  margin-top: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  direction: rtl; /* فقط الجدول */
  font-family: 'Cairo', sans-serif;
}

.cases-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* السماح للجدول بالتكيف */
  min-width: auto; /* إزالة الحد الأدنى للعرض */
}

.cases-table thead {
  background-color: #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 2;
}

.cases-table th,
.cases-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  text-align: right;
  color: #2d3748;
  background-color: #fff;

  white-space: nowrap;       /* عدم كسر النص */
  overflow: hidden;          /* إخفاء الفائض */
  text-overflow: ellipsis;   /* عرض نقاط ... للنص الطويل */
  font-size: 14px;
  font-family: 'Cairo', sans-serif;
}

.cases-table th {
  background-color: #e2e8f0;
  color: #1a202c;
  font-weight: bold;
  border-bottom: 2px solid #cbd5e0;
}

.cases-table tbody tr:hover {
  background-color: #f0f9ff;
}

/* زر عرض الحالة داخل الجدول */
.view-case-btn {
  display: inline-block;
  padding: 6px 12px;
  background-color: #000;
  color: white;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  border: 1px solid #000;
}

.view-case-btn:hover,
.view-case-btn:focus {
  background-color: #222;
  border-color: #222;
  color: #e0e7ff;
  outline: none;
}

/* --- استجابة الموبايل --- */
@media (max-width: 768px) {
  table thead {
    display: none;
  }

  table tbody tr {
    display: block;
    background-color: #fff;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    direction: rtl;
    text-align: right;
  }

  table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  table tbody td:last-child {
    border-bottom: none;
  }

  table tbody td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    flex-basis: 50%;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  table td, table th {
    padding: 8px;
  }

  /* إخفاء الجدول وإظهار الكروت */
  .desktop-view {
    display: none;
  }
  .mobile-view {
    display: block;
  }
}

/* إظهار الجدول فقط في الديسكتوب */
.desktop-view {
  display: block;
}

/* إخفاء الكروت في الديسكتوب */
.mobile-view {
  display: none;
}

/* كروت الحالات للموبايل */
/* --- الكارد --- */
.case-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-family: 'Cairo', sans-serif;
  text-align: right; /* محاذاة النص يمين */
  direction: rtl; /* تأكد RTL داخل الكارد */
}

.case-card div {
  margin-bottom: 8px;
  font-size: 14px;
  word-break: break-word; /* السماح بكسر النص */
}

/* زر عرض الحالة بعرض كامل الكارد */
.case-card .view-case-btn {
  display: block; /* ليملأ العرض */
  width: 100%;
  background: #000; /* أسود */
  color: #fff;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: 0.3s ease;
  border: 1px solid #000;
  box-sizing: border-box;
  margin-top: 10px;
}

.case-card .view-case-btn:hover {
  background: #222;
}/* End custom CSS */