/* إصلاح قوي للمسافة بين علامة الصح والنص في اللغات غير العربية */

/* للغات غير العربية (LTR) */
html[dir="ltr"] .service-features li,
[dir="ltr"] .service-features li {
  padding-left: 50px !important;
  padding-right: 0 !important;
  text-align: left !important;
  margin-left: 0 !important;
  position: relative !important;
}

html[dir="ltr"] .service-features li::before,
[dir="ltr"] .service-features li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 5px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4), 0 2px 6px rgba(16, 185, 129, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* تأثير hover للعلامة */
html[dir="ltr"] .service-features li:hover::before,
[dir="ltr"] .service-features li:hover::before {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5), 0 3px 8px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-50%) scale(1.15) !important;
}

/* للغة العربية (RTL) - علامة الصح قبل النص (على اليمين) */
html[dir="rtl"] .service-features li,
[dir="rtl"] .service-features li {
  padding-left: 0 !important;
  padding-right: 60px !important;
  text-align: right !important;
  margin-right: 0 !important;
  position: relative !important;
}

html[dir="rtl"] .service-features li::before,
[dir="rtl"] .service-features li::before {
  content: '✓' !important;
  position: absolute !important;
  left: auto !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4), 0 2px 6px rgba(16, 185, 129, 0.3) !important;
  transition: all 0.3s ease !important;
  margin-left: 15px !important;
}

/* تأثير hover للعلامة في العربية */
html[dir="rtl"] .service-features li:hover::before,
[dir="rtl"] .service-features li:hover::before {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5), 0 3px 8px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-50%) scale(1.15) !important;
}
