@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');


/* استيراد خط IBM Plex Sans (الإنجليزية والعربية) */
/* ============ إصلاح خط الأيقونات HGI ============ */
/* يجب أن يكون في البداية لضمان الأولوية */
i[class*="hgi"],
.hgi,
[class*="hgi-"],
.icon-circle i,
.service-card-content i {
  font-family: "hgi" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  speak: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
/* ============ خط IBM Plex Sans ============ */
/* 
  خط IBM Plex Sans هو الخط الرسمي المستخدم في كود المنصات DGA
  تم تطويره بواسطة IBM بالتعاون مع Bold Monday
  يوفر موثوقية ممتازة مع تصميم معاصر عبر جميع المنصات
*/
/* تعريف الخط كمتغير CSS للاستخدام السهل */
:root {
  --font-ibm-plex-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ibm-plex: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* ============ تطبيق الخط على جميع العناصر ============ */
/* اتجاه عربي وخط افتراضي */
html {
  direction: rtl;
  font-family: var(--font-ibm-plex-arabic) !important;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ibm-plex-arabic) !important;
  background: var(--mpda-color-background, #f5f7f8);
  color: var(--mpda-color-text-primary, #0f172a);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}
/* تطبيق الخط على جميع العناصر - مع أولوية عالية */
*,
*::before,
*::after {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* ============ تطبيق الخط على مكونات كود المنصات DGA ============ */
/* تطبيق الخط على جميع مكونات DGA - مع أولوية عالية جداً */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-nav-header-logos,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
mpda-button,
mpda-button-v2 {
  font-family: var(--font-ibm-plex-arabic) !important;
  --font-family: var(--font-ibm-plex-arabic) !important;
}
/* تطبيق الخط على جميع مكونات DGA - مع أولوية عالية جداً */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-nav-header-logos,
mpda-icon,
mpda-icon-v2,
mpda-button,
mpda-button-v2,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
.mpda-root,
.mpda-app,
.mpda-wrapper,
[class*="mpda-"],
[class*="nds-"],
mpda-nav-header *,
mpda-button *,
mpda-second-nav-header *,
[class*="mpda-"] *,
[class*="nds-"] *,
mpda-nav-header::before,
mpda-nav-header::after,
mpda-button::before,
mpda-button::after {
  font-family: var(--font-ibm-plex-arabic) !important;
  font-feature-settings: "kern" 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
/* تطبيق الخط على العناصر الأساسية */
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, textarea, select, label,
li, ul, ol, table, th, td,
article, section, header, footer, nav, main, aside {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* ============ أحجام الخطوط حسب DGA Typography ============ */
/* العناوين */
h1 {
  font-size: 2.5rem; /* 40px - display-lg-bold */
  font-weight: 700;
  line-height: 1.2;
}
h2 {
  font-size: 1.875rem; /* 30px - display-sm-bold */
  font-weight: 700;
  line-height: 1.2;
}
h3 {
  font-size: 1.5rem; /* 24px - display-xs-bold */
  font-weight: 700;
  line-height: 1.3;
}
h4 {
  font-size: 1.25rem; /* 20px - text-lg-bold */
  font-weight: 700;
  line-height: 1.3;
}
h5 {
  font-size: 1.125rem; /* 18px - text-lg-regular */
  font-weight: 600;
  line-height: 1.4;
}
h6 {
  font-size: 1rem; /* 16px - text-md-bold */
  font-weight: 700;
  line-height: 1.4;
}
/* النصوص */
p {
  font-size: 1rem; /* 16px - text-md-regular */
  font-weight: 400;
  line-height: 1.5;
}
/* النصوص الصغيرة */
small,
.text-sm {
  font-size: 0.875rem; /* 14px - text-sm-regular */
  font-weight: 400;
  line-height: 1.5;
}
/* النصوص الكبيرة */
.text-lg {
  font-size: 1.125rem; /* 18px - text-lg-regular */
  font-weight: 400;
  line-height: 1.5;
}
.text-xl {
  font-size: 1.25rem; /* 20px - text-xl-regular */
  font-weight: 400;
  line-height: 1.5;
}
/* للنصوص الإنجليزية - استخدام IBM Plex Sans */
[lang="en"],
[dir="ltr"],
.english-text {
  font-family: var(--font-ibm-plex) !important;
}
* {
  box-sizing: border-box;
}
/* حاوية عامة */
.portal-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.portal-main {
  flex: 1;
}
/* حاوية ثابتة للعرض */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
/* ============ HERO ============ */
.hero-section {
  position: relative;
  background: var(--mpda-gradient-primary, linear-gradient(135deg, #1B8354 0%, #22c55e 100%));
  background-size: cover;
  background-position: center;
  color: var(--mpda-color-white, #ffffff);
  padding: 3rem 0 4rem;
  min-height: 350px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Hero Section DGA Style */
.hero-section-dga {
  position: relative;
  color: var(--mpda-color-white, #ffffff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* Responsive Height */
@media (min-width: 1024px) {
  .lg\:max-h-\[491px\] {
    max-height: 491px;
  }
  
  .lg\:h-\[491px\] {
    height: 491px;
  }
}
@media (max-width: 1023px) {
  .max-lg\:pb-\[20px\] {
    padding-bottom: 20px;
  }
}
.hero-content-dga {
  position: relative;
  z-index: 2;
}
/* Padding Classes */
@media (min-width: 1024px) {
  .lg\:px-\[196px\] {
    padding-left: 196px;
    padding-right: 196px;
  }
}
.px-\[15px\] {
  padding-left: 15px;
  padding-right: 15px;
}
.pt-\[130px\] {
  padding-top: 130px;
}
/* Display XL Semibold - للعناوين الكبيرة */
.display-xl-semibold {
  font-size: 2.5rem; /* 40px */
  font-weight: 600; /* Semibold */
  line-height: 1.2;
  margin: 0;
}
/* Text XL Regular - للنصوص الكبيرة */
.text-xl-regular {
  font-size: 1.25rem; /* 20px */
  font-weight: 400; /* Regular */
  line-height: 1.5;
}
/* Margin Classes */
.mt-\[24px\] {
  margin-top: 24px;
}
.mb-\[32px\] {
  margin-bottom: 32px;
}
/* Dots Navigation */
.dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.dots span {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s;
}
.dots span:hover {
  opacity: 0.8;
}
.size-\[16px\] {
  width: 16px;
  height: 16px;
}
/* Responsive */
@media (max-width: 1024px) {
  .display-xl-semibold {
    font-size: 2rem; /* 32px */
  }
  
  .text-xl-regular {
    font-size: 1.125rem; /* 18px */
  }
  
  .hero-content-dga {
    padding-top: 3rem !important;
  }
  
  .pt-\[130px\] {
    padding-top: 3rem;
  }
}
@media (max-width: 768px) {
  .display-xl-semibold {
    font-size: 1.375rem !important; /* 22px */
    line-height: 1.3 !important;
  }
  
  .text-xl-regular {
    font-size: 0.875rem !important; /* 14px */
  }
  
  .text-2xl-semibold {
    font-size: 1rem !important;
    margin-top: 8px !important;
  }
  
  .hero-section-dga {
    min-height: auto !important;
  }
  
  .hero-content-dga {
    padding: 24px 16px !important;
  }
  
  .hero-content-dga .home_template_page {
    margin-top: 16px;
  }
}
@media (max-width: 480px) {
  .display-xl-semibold {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.4 !important;
  }
  
  .text-xl-regular {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  .text-2xl-semibold {
    font-size: 0.875rem !important;
  }
  
  .hero-content-dga {
    padding: 20px 12px !important;
  }
  
  .hero-section-dga {
    min-height: auto !important;
  }
}
/* نمط هندسي معقد للخلفية - شبكة متصلة */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    /* نقاط الشبكة */
    radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 60px 60px, rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px),
    /* خطوط أفقية */
    linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    /* خطوط عمودية */
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 
    80px 80px,
    120px 120px,
    100% 40px,
    40px 100%;
  background-position: 0 0, 40px 40px, 0 0, 0 0;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
/* نمط إضافي للشبكة */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    /* خطوط قطرية */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.05) 2px,
      rgba(255, 255, 255, 0.05) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.05) 2px,
      rgba(255, 255, 255, 0.05) 4px
    );
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-text {
  position: relative;
  z-index: 3;
}
/* تحسينات للشاشات الكبيرة */
@media (min-width: 1024px) {
  .hero-section {
    padding: 4rem 0 5rem;
    min-height: 400px;
  }
  
  .hero-title {
    font-size: 4rem; /* 64px - أكبر للشاشات الكبيرة */
  }
  
  .hero-subtitle {
    font-size: 1.375rem; /* 22px - أكبر للشاشات الكبيرة */
  }
}
/* تحسينات للشاشات الصغيرة */
@media (max-width: 768px) {
  .hero-section {
    padding: 3rem 0 4rem;
    min-height: 400px;
  }
  
  .hero-title {
    font-size: 2.5rem; /* 40px - أكبر للشاشات الصغيرة */
  }
  
  .hero-subtitle {
    font-size: 1.125rem; /* 18px - أكبر للشاشات الصغيرة */
  }
  
  .hero-actions {
    flex-direction: column;
  }
  
  .hero-actions .btn {
    width: 100%;
  }
  
  .section-title {
    font-size: 1.875rem; /* 30px - أصغر قليلاً للشاشات الصغيرة */
  }
  
  .section-subtitle {
    font-size: 1rem; /* 16px - أصغر قليلاً للشاشات الصغيرة */
  }
}
/* تم نقل .hero-text إلى الأعلى */
.hero-kicker {
  margin-bottom: 1rem;
  opacity: 0.95;
  letter-spacing: 0.5px;
}
.hero-title {
  margin: 0 0 1.5rem;
  letter-spacing: -0.5px;
}
.hero-subtitle {
  margin: 0 0 2rem;
  opacity: 0.95;
  max-width: 550px;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.hero-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hero-highlights li {
  font-size: 1rem;
  opacity: 0.95;
  position: relative;
  padding-inline-start: 1.5rem;
}
.hero-highlights li::before {
  content: '✓';
  position: absolute;
  right: 0;
  font-weight: bold;
  color: var(--mpda-color-white, #ffffff);
}
/* ============ أزرار ============ */
.btn {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.5rem 1.4rem;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--mpda-color-primary, #1B8354);
  color: var(--mpda-color-white, #ffffff);
  transition: all 0.2s ease;
  font-weight: 500;
}
.btn-primary:hover {
  background: var(--mpda-color-primary-hover, #15803d);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27, 131, 84, 0.3);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--mpda-color-white, #ffffff);
  border-color: rgba(255, 255, 255, 0.9);
  border-width: 2px;
  transition: all 0.2s ease;
  font-weight: 500;
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}
.btn-sm {
  padding: 0.35rem 1rem;
  font-size: 0.9rem;
}
.btn-ghost {
  background: transparent;
  border-color: var(--mpda-color-border-dark, #cbd5e1);
  color: var(--mpda-color-text-primary, #0f172a);
}
.btn-ghost:hover {
  background: var(--mpda-color-gray-200, #e2e8f0);
}
.btn-link {
  background: none;
  border: none;
  color: var(--mpda-color-primary, #1B8354);
  padding: 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn-link:hover {
  text-decoration: underline;
}
/* ============ الأقسام العامة ============ */
.section {
  padding: 3rem 0;
}
.section-alt {
  background: var(--mpda-color-background-secondary, #ffffff);
}
.section-header {
  text-align: right;
  margin-bottom: 1.75rem;
}
.section-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 1rem;
}
.section-title {
  margin: 0;
  color: var(--mpda-color-text-primary, #161616);
}
.section-subtitle {
  color: var(--mpda-color-text-secondary, #374151);
  max-width: 640px;
  margin-top: 0.5rem;
}
.btn-view-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: 1px solid var(--mpda-color-border, #e5e7eb);
  border-radius: 0.5rem;
  color: var(--mpda-color-text-primary, #161616);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-view-all:hover {
  background: var(--mpda-color-background-secondary, #f9fafb);
  border-color: var(--mpda-color-primary, #1B8354);
  color: var(--mpda-color-primary, #1B8354);
}
.btn-view-all svg {
  transform: rotate(180deg); /* لأننا في RTL */
}
/* ============ الإحصائيات ============ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.stat-card {
  background: var(--mpda-color-background-secondary, #ffffff);
  border-radius: 0.75rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--mpda-color-border, #e2e8f0);
  text-align: center;
}
.stat-value {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--mpda-color-primary, #1B8354);
  margin-bottom: 0.4rem;
}
.stat-label {
  font-size: 0.9rem;
  color: var(--mpda-color-text-tertiary, #64748b);
}
/* ============ الشبكات ============ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.cards-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Grid System for News Section */
.grid {
  display: grid;
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gap-6 {
  gap: 1.5rem;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
@media (min-width: 640px) {
  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }
}
@media (min-width: 1280px) {
  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }
}
/* جعل جميع البطاقات نفس الحجم - قواعد قوية جداً */
.grid.grid-cols-12 {
  align-items: stretch !important;
}
.custom_article_card {
  display: flex !important;
  height: 100% !important;
  min-height: 400px !important; /* ارتفاع ثابت */
}
/* ============ بطاقات الخدمات ============ */
.service-card {
  background: var(--mpda-color-background-secondary, #ffffff);
  border-radius: 0.75rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--mpda-color-border, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.service-status {
  font-size: 0.8rem;
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: var(--mpda-color-success-50, #f0fdf4);
  color: var(--mpda-color-success-700, #15803d);
}
.service-title {
  font-size: 1.05rem;
  font-weight: 600;
}
.service-description {
  font-size: 0.9rem;
  color: var(--mpda-color-text-tertiary, #64748b);
}
.service-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}
/* ============ بطاقات الأخبار ============ */
.news-card {
  background: var(--mpda-color-background-secondary, #ffffff);
  border-radius: 0.75rem;
  border: 1px solid var(--mpda-color-border, #e2e8f0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.news-image {
  height: 140px;
  background: var(--mpda-gradient-primary, linear-gradient(135deg, #1B8354 0%, #22c55e 100%));
}
.news-body {
  padding: 1rem 1.2rem;
}
.news-title {
  margin-bottom: 0.5rem;
  color: var(--mpda-color-text-primary, #161616);
}
.news-meta {
  color: var(--mpda-color-text-tertiary, #64748b);
  margin-bottom: 0.5rem;
}
.news-excerpt {
  color: var(--mpda-color-text-secondary, #374151);
  margin-bottom: 0.75rem;
}
.news-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--mpda-color-background-tertiary, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ============ الشركاء ============ */
.partners-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.partner-logo {
  flex: 1 1 140px;
  min-height: 60px;
  border-radius: 0.75rem;
  border: 1px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #64748b;
  background: #f8fafc;
}
/* ============ استجابة ============ */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .hero-section {
    padding: 3rem 0 3.5rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid,
  .cards-grid,
  .cards-grid-3 {
    grid-template-columns: 1fr;
  }
}
/* ============ ضمان تطبيق خط IBM Plex Sans على جميع العناصر الديناميكية ============ */
/* تطبيق الخط على Shadow DOM والعناصر المضافة ديناميكياً */
::shadow *,
.shadow-root *,
[data-mpda-component],
[data-mpda-component] *,
[data-nds-component],
[data-nds-component] * {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* تطبيق الخط على العناصر المضافة عبر JavaScript */
[id^="mpda-"],
[id^="nds-"],
[class^="mpda-"],
[class^="nds-"],
[id^="mpda-"] *,
[id^="nds-"] *,
[class^="mpda-"] *,
[class^="nds-"] * {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* تطبيق الخط على النماذج والعناصر التفاعلية */
form,
form *,
fieldset,
legend,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
option,
label {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* تطبيق الخط على العناصر المخصصة (Custom Elements) */
:host,
:host * {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* تحسين جودة عرض الخط */
body,
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* إصلاح مشكلة الأيقونات - التأكد من عدم استخدام خطوط غير صحيحة */
/* ملاحظة: الأيقونات في DGA تستخدم SVG، لا يجب تطبيق font-family عليها */
/* تم نقل القواعد إلى icon-fix.css */
mpda-icon,
mpda-icon-v2 {
  font-family: initial !important;
  font-style: normal !important;
  font-weight: normal !important;
  speak: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* الأيقونات الأخرى (غير DGA) */
[class*="icon"]:not(mpda-icon):not(mpda-icon-v2):not([class*="mpda-"]):not([class*="nds-"]),
[class*="Icon"]:not(mpda-icon):not(mpda-icon-v2):not([class*="mpda-"]):not([class*="nds-"]) {
  font-family: var(--font-ibm-plex-arabic) !important;
  font-style: normal !important;
  font-weight: normal !important;
}
/* التأكد من ظهور خط الأيقونات HGI بشكل صحيح */
.hgi {
  font-family: "hgi" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
/* التأكد من أن جميع النصوص العربية تستخدم الخط الصحيح */
[dir="rtl"],
[lang="ar"],
.rtl,
.arabic {
  font-family: var(--font-ibm-plex-arabic) !important;
  unicode-bidi: embed !important;
}
/* ============ قواعد إضافية قوية لتطبيق الخط ============ */
/* تطبيق الخط على جميع العناصر داخل #root */
#root,
#root *,
#root *::before,
#root *::after {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* تطبيق الخط على جميع العناصر داخل portal-root */
.portal-root,
.portal-root *,
.portal-root *::before,
.portal-root *::after {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* تطبيق الخط على جميع العناصر داخل مكونات React */
[data-reactroot],
[data-reactroot] * {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* إصلاح مشكلة الأيقونات - التأكد من عدم استخدام خطوط غير صحيحة للأيقونات */
mpda-icon::before,
mpda-icon::after,
mpda-icon-v2::before,
mpda-icon-v2::after,
[class*="icon"]::before,
[class*="icon"]::after {
  font-family: inherit !important;
}
/* تطبيق الخط على جميع العناصر النصية */
span, p, div, a, button, label, input, textarea, select, option,
h1, h2, h3, h4, h5, h6, li, td, th, caption, strong, em, b, i, u, small, sub, sup {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* ضمان ظهور خط الأيقونات HGI بشكل صحيح */
.hgi,
i[class*="hgi"],
.icon-circle i {
  font-family: "HGI" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
.hgi::before,
i[class*="hgi"]::before,
.icon-circle i::before {
  font-family: "HGI" !important;
}
/* تطبيق الخط على جميع العناصر داخل Shadow DOM */
::part(*) {
  font-family: var(--font-ibm-plex-arabic) !important;
}
/* ============================================
   Page Loader - شاشة التحميل (DGA Loading)
   ============================================ */
.page-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 16px;
  background: #f9fafb;
}
/* ============================================
   قسم الأخبار في الصفحة الرئيسية - تصميم DGA
   ============================================ */
.news-section-home {
  margin-top: 24px;
  padding: 40px 80px;
  background-color: #F9FAFB;
}
@media (max-width: 768px) {
  .news-section-home {
    padding: 32px 20px;
  }
}
.news-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.news-section-title {
  font-size: 28px;
  font-weight: 700;
  color: #1B6B44;
  margin: 0 0 8px 0;
  font-family: var(--font-ibm-plex-arabic);
}
.news-section-subtitle {
  font-size: 16px;
  color: #6B7280;
  margin: 0;
  font-family: var(--font-ibm-plex-arabic);
}
.news-loading,
.news-empty {
  text-align: center;
  padding: 40px;
  color: #6B7280;
  font-size: 16px;
}
/* شبكة البطاقات */
.news-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 992px) {
  .news-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .news-cards-grid {
    grid-template-columns: 1fr;
  }
}
/* بطاقة الخبر - تصميم DGA */
.news-card-home {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.news-card-home:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
/* صورة البطاقة */
.news-card-image-wrapper {
  position: relative;
  width: calc(100% - 32px);
  height: 200px;
  margin: 16px;
  margin-bottom: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f9fa;
}
.news-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.news-card-home:hover .news-card-image {
  transform: scale(1.05);
}
/* Placeholder للصورة */
.news-card-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1B6B44 0%, #2d8f5e 100%);
  color: rgba(255, 255, 255, 0.3);
}
.news-card-placeholder.show {
  display: flex;
}
/* محتوى البطاقة */
.news-card-content-home {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.news-card-title-home {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.6;
  margin: 0 0 12px 0;
  text-align: right;
  font-family: var(--font-ibm-plex-arabic);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-date-home {
  font-size: 14px;
  color: #6B7280;
  text-align: right;
  font-family: var(--font-ibm-plex-arabic);
  margin-top: auto;
}
/* زر عرض الكل */
.btn-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: 2px solid #1B6B44;
  border-radius: 8px;
  background: transparent;
  color: #1B6B44;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-ibm-plex-arabic);
}
.btn-view-all:hover {
  background: #1B6B44;
  color: #ffffff;
}
/* Responsive للعناوين */
@media (max-width: 768px) {
  .news-section-title {
    font-size: 22px;
  }

  .news-card-image-wrapper {
    height: 160px;
    margin: 12px;
    width: calc(100% - 24px);
  }

  .news-card-content-home {
    padding: 16px;
  }

  .news-card-title-home {
    font-size: 15px;
  }
}/* ============ نظام Typography موحد حسب DGA ============ */
/* هذا الملف يحدد أحجام الخطوط الموحدة لضمان التناسق في كامل المشروع */

:root {
  /* أحجام الخطوط الأساسية - DGA Typography Scale */
  --font-size-xs: 0.75rem;      /* 12px - text-xs-regular */
  --font-size-sm: 0.875rem;     /* 14px - text-sm-regular */
  --font-size-md: 1rem;         /* 16px - text-md-regular */
  --font-size-lg: 1.125rem;     /* 18px - text-lg-regular */
  --font-size-xl: 1.25rem;      /* 20px - text-xl-regular */
  --font-size-2xl: 1.5rem;      /* 24px - display-xs-bold */
  --font-size-3xl: 1.875rem;    /* 30px - display-sm-bold */
  --font-size-4xl: 2.25rem;     /* 36px - display-md-bold */
  --font-size-5xl: 2.5rem;      /* 40px - display-lg-bold */
  --font-size-6xl: 3.5rem;      /* 56px - display-xl-bold */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* ============ Hero Section ============ */
.hero-kicker {
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.hero-title {
  font-size: var(--font-size-6xl); /* 56px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.hero-subtitle {
  font-size: var(--font-size-xl); /* 20px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

/* ============ Sections ============ */
.section-title {
  font-size: var(--font-size-4xl); /* 36px - أكبر */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.section-subtitle {
  font-size: var(--font-size-lg); /* 18px - أكبر */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* ============ News Cards ============ */
.news-title {
  font-size: var(--font-size-xl); /* 20px - أكبر */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.news-meta {
  font-size: var(--font-size-md); /* 16px - أكبر */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.news-excerpt {
  font-size: var(--font-size-lg); /* 18px - أكبر */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

/* ============ Footer ============ */
.footer-col h4 {
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.footer-col p,
.footer-col li {
  font-size: var(--font-size-md); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

.footer-bottom {
  font-size: var(--font-size-sm); /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* ============ Buttons ============ */
.btn {
  font-size: var(--font-size-md); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.btn-sm {
  font-size: var(--font-size-sm); /* 14px */
}

.btn-lg {
  font-size: var(--font-size-lg); /* 18px */
}

/* ============ Responsive Typography ============ */
@media (min-width: 1024px) {
  .hero-title {
    font-size: 4rem; /* 64px - أكبر للشاشات الكبيرة */
  }
  
  .hero-subtitle {
    font-size: 1.375rem; /* 22px */
  }
  
  .section-title {
    font-size: var(--font-size-4xl); /* 36px */
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: var(--font-size-5xl); /* 40px */
  }
  
  .hero-subtitle {
    font-size: var(--font-size-lg); /* 18px */
  }
  
  .section-title {
    font-size: var(--font-size-3xl); /* 30px */
  }
  
  .section-subtitle {
    font-size: var(--font-size-md); /* 16px */
  }
  
  .footer-col h4 {
    font-size: var(--font-size-md); /* 16px */
  }
  
  .footer-col p,
  .footer-col li {
    font-size: var(--font-size-sm); /* 14px */
  }
  
  .footer-bottom {
    font-size: var(--font-size-xs); /* 12px */
  }
}

/* ============ ألوان كود المنصات DGA ============ */
/* 
  هذا الملف يحتوي على لوحة الألوان الرسمية لكود المنصات DGA
  وفقاً للمواصفات: https://design.dga.gov.sa/guidelines/foundations/colors
*/

:root {
  /* ============ الألوان الأساسية (Primary - الأخضر) ============ */
  /* اللون الأخضر يرمز إلى قيم النمو والازدهار والوحدة والتعاون */
  --mpda-color-brand-50: #f0fdf4;
  --mpda-color-brand-100: #dcfce7;
  --mpda-color-brand-200: #bbf7d0;
  --mpda-color-brand-300: #86efac;
  --mpda-color-brand-400: #4ade80;
  --mpda-color-brand-500: #22c55e;  /* اللون الأساسي */
  --mpda-color-brand-600: #16a34a;
  --mpda-color-brand-700: #15803d;
  --mpda-color-brand-800: #166534;
  --mpda-color-brand-900: #14532d;
  --mpda-color-brand-950: #052e16;

  /* اللون الأخضر الأساسي (Primary Green) */
  --mpda-color-primary: #1B8354;  /* اللون الأساسي الرئيسي */
  --mpda-color-primary-light: #22c55e;
  --mpda-color-primary-dark: #14532d;
  --mpda-color-primary-hover: #15803d;
  --mpda-color-primary-active: #166534;

  /* ============ الألوان المحايدة (Neutral) ============ */
  /* الأسود والأبيض وظلال الرمادي */
  --mpda-color-neutral-0: #ffffff;
  --mpda-color-neutral-50: #f9fafb;
  --mpda-color-neutral-100: #f3f4f6;
  --mpda-color-neutral-200: #e5e7eb;
  --mpda-color-neutral-300: #d1d5db;
  --mpda-color-neutral-400: #9ca3af;
  --mpda-color-neutral-500: #6b7280;
  --mpda-color-neutral-600: #4b5563;
  --mpda-color-neutral-700: #374151;
  --mpda-color-neutral-800: #1f2937;
  --mpda-color-neutral-900: #111827;
  --mpda-color-neutral-950: #030712;

  /* الألوان المحايدة الأساسية */
  --mpda-color-white: #ffffff;
  --mpda-color-black: #000000;
  --mpda-color-gray-50: #f9fafb;
  --mpda-color-gray-100: #f3f4f6;
  --mpda-color-gray-200: #e5e7eb;
  --mpda-color-gray-300: #d1d5db;
  --mpda-color-gray-400: #9ca3af;
  --mpda-color-gray-500: #6b7280;
  --mpda-color-gray-600: #4b5563;
  --mpda-color-gray-700: #374151;
  --mpda-color-gray-800: #1f2937;
  --mpda-color-gray-900: #111827;

  /* ============ الألوان الثانوية (Secondary) ============ */
  
  /* لوحة ألوان الذهبي (Gold) */
  --mpda-color-gold-50: #fffbeb;
  --mpda-color-gold-100: #fef3c7;
  --mpda-color-gold-200: #fde68a;
  --mpda-color-gold-300: #fcd34d;
  --mpda-color-gold-400: #fbbf24;
  --mpda-color-gold-500: #f59e0b;  /* اللون الذهبي الأساسي */
  --mpda-color-gold-600: #d97706;
  --mpda-color-gold-700: #b45309;
  --mpda-color-gold-800: #92400e;
  --mpda-color-gold-900: #78350f;
  --mpda-color-gold-950: #451a03;

  /* لوحة ألوان الخزامى (Lavender) */
  --mpda-color-lavender-50: #faf5ff;
  --mpda-color-lavender-100: #f3e8ff;
  --mpda-color-lavender-200: #e9d5ff;
  --mpda-color-lavender-300: #d8b4fe;
  --mpda-color-lavender-400: #c084fc;
  --mpda-color-lavender-500: #a855f7;  /* اللون الخزامي الأساسي */
  --mpda-color-lavender-600: #9333ea;
  --mpda-color-lavender-700: #7e22ce;
  --mpda-color-lavender-800: #6b21a8;
  --mpda-color-lavender-900: #581c87;
  --mpda-color-lavender-950: #3b0764;

  /* ============ الألوان الدلالية (Semantic Colors) ============ */
  
  /* لوحة ألوان الخطأ (Error - Red) */
  --mpda-color-error-50: #fef2f2;
  --mpda-color-error-100: #fee2e2;
  --mpda-color-error-200: #fecaca;
  --mpda-color-error-300: #fca5a5;
  --mpda-color-error-400: #f87171;
  --mpda-color-error-500: #ef4444;  /* اللون الأحمر الأساسي */
  --mpda-color-error-600: #dc2626;
  --mpda-color-error-700: #b91c1c;
  --mpda-color-error-800: #991b1b;
  --mpda-color-error-900: #7f1d1d;
  --mpda-color-error-950: #450a0a;

  /* لوحة ألوان التحذير (Warning - Yellow) */
  --mpda-color-warning-50: #fffbeb;
  --mpda-color-warning-100: #fef3c7;
  --mpda-color-warning-200: #fde68a;
  --mpda-color-warning-300: #fcd34d;
  --mpda-color-warning-400: #fbbf24;
  --mpda-color-warning-500: #f59e0b;  /* اللون الأصفر الأساسي */
  --mpda-color-warning-600: #d97706;
  --mpda-color-warning-700: #b45309;
  --mpda-color-warning-800: #92400e;
  --mpda-color-warning-900: #78350f;
  --mpda-color-warning-950: #451a03;

  /* لوحة ألوان المعلومات (Info - Blue) */
  --mpda-color-info-50: #eff6ff;
  --mpda-color-info-100: #dbeafe;
  --mpda-color-info-200: #bfdbfe;
  --mpda-color-info-300: #93c5fd;
  --mpda-color-info-400: #60a5fa;
  --mpda-color-info-500: #3b82f6;  /* اللون الأزرق الأساسي */
  --mpda-color-info-600: #2563eb;
  --mpda-color-info-700: #1d4ed8;
  --mpda-color-info-800: #1e40af;
  --mpda-color-info-900: #1e3a8a;
  --mpda-color-info-950: #172554;

  /* لوحة ألوان النجاح (Success - Green) */
  --mpda-color-success-50: #f0fdf4;
  --mpda-color-success-100: #dcfce7;
  --mpda-color-success-200: #bbf7d0;
  --mpda-color-success-300: #86efac;
  --mpda-color-success-400: #4ade80;
  --mpda-color-success-500: #22c55e;  /* اللون الأخضر الأساسي */
  --mpda-color-success-600: #16a34a;
  --mpda-color-success-700: #15803d;
  --mpda-color-success-800: #166534;
  --mpda-color-success-900: #14532d;
  --mpda-color-success-950: #052e16;

  /* ============ ألوان النص ============ */
  
  /* ألوان النص الداكنة على الخلفيات الفاتحة */
  --mpda-color-text-primary: #0f172a;      /* النص الأساسي */
  --mpda-color-text-secondary: #475569;     /* النص الثانوي */
  --mpda-color-text-tertiary: #64748b;     /* النص الثالثي */
  --mpda-color-text-disabled: #94a3b8;     /* النص المعطل */

  /* ألوان النص الفاتحة على الخلفيات الداكنة */
  --mpda-color-text-on-dark: #ffffff;      /* النص على الخلفيات الداكنة */
  --mpda-color-text-on-dark-secondary: #e2e8f0;  /* النص الثانوي على الخلفيات الداكنة */

  /* ألوان النص الدلالية */
  --mpda-color-text-error: #dc2626;
  --mpda-color-text-warning: #d97706;
  --mpda-color-text-info: #2563eb;
  --mpda-color-text-success: #16a34a;

  /* ============ ألوان الخلفية ============ */
  --mpda-color-background: #f5f7f8;         /* الخلفية الأساسية */
  --mpda-color-background-secondary: #ffffff;  /* الخلفية الثانوية */
  --mpda-color-background-tertiary: #f9fafb;   /* الخلفية الثالثية */

  /* ============ ألوان الحدود ============ */
  --mpda-color-border: #e2e8f0;
  --mpda-color-border-light: #f1f5f9;
  --mpda-color-border-dark: #cbd5e1;

  /* ============ ألوان الظلال ============ */
  --mpda-color-shadow-sm: rgba(0, 0, 0, 0.05);
  --mpda-color-shadow-md: rgba(0, 0, 0, 0.1);
  --mpda-color-shadow-lg: rgba(0, 0, 0, 0.15);
  --mpda-color-shadow-xl: rgba(0, 0, 0, 0.2);

  /* ============ ألوان التدرجات ============ */
  --mpda-gradient-primary: linear-gradient(135deg, #1B8354 0%, #22c55e 100%);
  --mpda-gradient-primary-dark: linear-gradient(135deg, #14532d 0%, #1B8354 100%);
  --mpda-gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --mpda-gradient-lavender: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
}

/* ============ تطبيق الألوان على العناصر ============ */

/* تطبيق الألوان الأساسية */
body {
  background-color: var(--mpda-color-background);
  color: var(--mpda-color-text-primary);
}

/* تطبيق الألوان على الأزرار */
.btn-primary {
  background-color: var(--mpda-color-primary);
  color: var(--mpda-color-white);
}

.btn-primary:hover {
  background-color: var(--mpda-color-primary-hover);
}

.btn-primary:active {
  background-color: var(--mpda-color-primary-active);
}

/* تطبيق الألوان على النصوص */
.text-primary {
  color: var(--mpda-color-text-primary);
}

.text-secondary {
  color: var(--mpda-color-text-secondary);
}

.text-tertiary {
  color: var(--mpda-color-text-tertiary);
}

/* تطبيق الألوان الدلالية */
.text-error {
  color: var(--mpda-color-text-error);
}

.text-warning {
  color: var(--mpda-color-text-warning);
}

.text-info {
  color: var(--mpda-color-text-info);
}

.text-success {
  color: var(--mpda-color-text-success);
}

/* تطبيق الألوان على الخلفيات */
.bg-primary {
  background-color: var(--mpda-color-primary);
  color: var(--mpda-color-white);
}

.bg-secondary {
  background-color: var(--mpda-color-background-secondary);
}

.bg-tertiary {
  background-color: var(--mpda-color-background-tertiary);
}

/* تطبيق الألوان على الحدود */
.border {
  border-color: var(--mpda-color-border);
}

.border-light {
  border-color: var(--mpda-color-border-light);
}

.border-dark {
  border-color: var(--mpda-color-border-dark);
}

/* ============ قسم الخدمات ============ */

/* تطبيق الخط على قسم الخدمات */
.mt-\[24px\].bg-\[\#F9FAFB\],
.mt-\[24px\].bg-\[\#F9FAFB\] *:not(svg):not(i):not([class*="hgi"]):not(.icon-circle):not(.icon-circle *),
.mt-\[24px\].bg-\[\#F9FAFB\] h1,
.mt-\[24px\].bg-\[\#F9FAFB\] h2,
.mt-\[24px\].bg-\[\#F9FAFB\] h3,
.mt-\[24px\].bg-\[\#F9FAFB\] h4,
.mt-\[24px\].bg-\[\#F9FAFB\] p,
.mt-\[24px\].bg-\[\#F9FAFB\] span:not(.hgi):not(.icon-circle span),
.mt-\[24px\].bg-\[\#F9FAFB\] div:not(.icon-circle),
.mt-\[24px\].bg-\[\#F9FAFB\] a,
.mt-\[24px\].bg-\[\#F9FAFB\] button {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* تطبيق الخط على العناوين والأزرار في قسم الخدمات */
.display-sm-bold {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: #161616;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

.text-md-regular {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #161616;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* Service Cards Grid */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gap-\[24px\] {
  gap: 24px;
}

/* Service Card Styles */
.service-card {
  position: relative;
}

.service-card-content {
  background: white;
  border: none;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.service-card-content:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Icon Circle */
.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle i,
.icon-circle i::before,
.icon-circle [class*="hgi"] {
  font-family: "hgi" !important;
  font-size: 24px !important;
  color: #1b8354 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Card Typography */
.service-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1F2A37;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif !important;
}

.service-card-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #1F2A37;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif !important;
  flex-grow: 1;
}

/* Service Tags */
.service-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-self: flex-start;
}

.service-tags span {
  padding: 0 6px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  border-radius: 4px;
  white-space: nowrap;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif !important;
}

.tag-success {
  color: #085D3A;
  background-color: #ECFDF3;
  border: 1px solid #ABEFC6;
}

.tag-info {
  color: #1849A9;
  background-color: #EFF8FF;
  border: 1px solid #B2DDFF;
}

.tag-neutral {
  color: #1F2A37;
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
}

/* Tag الفئة المستهدفة */
.service-target-audience-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  height: 24px;
  border-radius: 4px;
  background-color: #ECFDF3;
  color: #1B6B44;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  white-space: nowrap;
  align-self: flex-start;
}

/* Card Actions */
.service-card-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: auto;
}

.btn-secondary,
.btn-primary {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif !important;
  white-space: nowrap;
}

.btn-secondary {
  background: white;
  color: #1F2A37;
  border: 1px solid #D2D6DB;
}

.btn-secondary:hover {
  background: #F9FAFB;
  border-color: #1B8354;
  color: #1B8354;
}

.btn-primary {
  background: #1B8354;
  color: white;
  border: 1px solid #1B8354;
}

.btn-primary:hover {
  background: #157347;
  border-color: #157347;
}

/* Dots Container */
.dots-container {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #E5E7EB;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot:hover {
  transform: scale(1.1);
  background-color: #D1D5DB;
}

.dot-active {
  background-color: #1B8354 !important;
  box-shadow: 0 0 0 2px rgba(27, 131, 84, 0.2);
  transform: scale(1.1);
}

/* Navigation Buttons */
.navigation-buttons {
  display: flex;
  gap: 24px;
  align-items: center;
}

.nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1B8354;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background-color: #157347;
  transform: scale(1.05);
}

.nav-btn:active {
  transform: scale(0.95);
}

/* ============ Utilities ============ */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.mb-\[27px\] {
  margin-bottom: 27px;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-\[40px\] {
  margin-top: 40px;
}

.mt-\[36px\] {
  margin-top: 36px;
}

.py-\[40px\] {
  padding-top: 40px;
  padding-bottom: 40px;
}

.p-\[24px\] {
  padding: 18px;
}

.rounded-\[16px\] {
  border-radius: 16px;
}

.h-full {
  height: 100%;
}

.flex-col {
  flex-direction: column;
}

.items-start {
  align-items: flex-start;
}

.mb-\[24px\] {
  margin-bottom: 18px;
}

.mb-\[8px\] {
  margin-bottom: 6px;
}

.border {
  border-width: 1px;
}

.border-\[#D2D6DB\] {
  border-color: #D2D6DB;
}

.bg-white {
  background-color: white;
}

.bg-\[\#F9FAFB\] {
  background-color: #F9FAFB;
}

@media (min-width: 768px) {
  .md\:px-\[80px\] {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* ============ زر عرض الكل ============ */
.btn-view-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid #D2D6DB;
  border-radius: 0.5rem;
  color: #161616;
  font-size: 1rem;
  font-weight: 500;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-view-all:hover {
  background: #F9FAFB;
  border-color: #1B8354;
  color: #1B8354;
}

/* ============ تنسيق العنوان والوصف في قسم الخدمات (مشابه لقسم الأخبار) ============ */
.services-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.services-section-title {
  font-size: 28px;
  font-weight: 700;
  color: #1B6B44;
  margin: 0 0 8px 0;
  font-family: var(--font-ibm-plex-arabic, "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

.services-section-subtitle {
  font-size: 16px;
  color: #6B7280;
  margin: 0;
  font-family: var(--font-ibm-plex-arabic, "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

/* Responsive للعناوين */
@media (max-width: 768px) {
  .services-section-title {
    font-size: 22px;
  }
  
  .services-section-header {
    margin-bottom: 24px;
  }
}/* ============ Carousel Styles ============ */

.embla {
  width: 100%;
  overflow: hidden;
}

.embla__viewport {
  overflow: hidden;
  width: 100%;
}

.embla__container {
  display: flex;
  gap: 24px;
  touch-action: pan-y pinch-zoom;
  margin-left: auto;
  margin-right: auto;
}

.embla__slide {
  flex: 0 0 calc(25% - 18px);
  min-width: 0;
  padding: 0;
}

/* Responsive breakpoints */
@media (max-width: 1280px) {
  .embla__slide {
    flex: 0 0 calc(33.333% - 16px);
  }
}

@media (max-width: 768px) {
  .embla__slide {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 480px) {
  .embla__slide {
    flex: 0 0 100%;
  }
}

/* CustomCard Styles */
.CustomCard {
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.CustomCard:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* DGA Featured Icon */
mpda-featured-icon {
  display: block;
}

.mpda-featured-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpda-featured-icon--xl {
  width: 64px;
  height: 64px;
}

.mpda-featured-icon--circle {
  border-radius: 50%;
}

.mpda-featured-icon--light-brand {
  background-color: #f0fdf4;
  color: #1b8354;
}

/* Icon Style */
mpda-icon {
  display: block;
}

.hgi {
  font-family: "HGI" !important;
  font-style: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tags Styling */
.tag span {
  white-space: nowrap;
  user-select: none;
}

/* Dots/Pagination */
.dots span {
  transition: all 0.3s ease;
  cursor: pointer;
}

.dots span:hover {
  transform: scale(1.1);
}

.dots span.active,
.dots span[style*="background: #1B8354"],
.dots span[style*="bg-[#1B8354]"] {
  background-color: #1B8354 !important;
  box-shadow: 0 0 0 2px rgba(27, 131, 84, 0.2);
}

/* Navigation Buttons */
.embla button {
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

.embla button:hover {
  background-color: #157347 !important;
  transform: scale(1.05);
}

.embla button:active {
  transform: scale(0.95);
}

/* Font Fixes for Arabic Text in Cards */
.embla__slide h3,
.embla__slide p,
.embla__slide span {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .embla__container {
    gap: 16px;
  }

  .embla__slide {
    padding: 0;
  }

  .CustomCard {
    padding: 12px !important;
  }

  .CustomCard h3 {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .CustomCard p {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}
/* ============ تطبيق خط IBM Plex Sans على مكونات DGA ============ */
/* 
  هذا الملف يضمن تطبيق خط IBM Plex Sans على جميع مكونات كود المنصات DGA
  يتم تحميله بعد أنماط المكتبة لضمان تجاوز الأنماط الافتراضية
*/

/* تعريف متغيرات الخط */
:root {
  --font-ibm-plex-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ibm-plex: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* تطبيق الخط على جميع مكونات DGA مع أولوية عالية جداً */
/* تطبيق الخط على جميع مكونات DGA الأساسية */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-nav-header-logos,
mpda-icon,
mpda-icon-v2,
mpda-button,
mpda-button-v2,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
mpda-footer,
mpda-modal,
mpda-card,
mpda-input,
mpda-textarea,
mpda-select,
mpda-checkbox,
mpda-radio,
mpda-tabs,
mpda-tab,
mpda-accordion,
mpda-accordion-item,
mpda-breadcrumb,
mpda-breadcrumb-item,
mpda-pagination,
mpda-pagination-item,
mpda-dropdown,
mpda-dropdown-item,
mpda-tooltip,
mpda-popover,
mpda-alert,
mpda-notification,
mpda-toast,
mpda-progress,
mpda-spinner,
mpda-skeleton,
mpda-avatar,
mpda-badge,
mpda-chip,
mpda-tag,
mpda-link,
mpda-list,
mpda-list-item,
mpda-table,
mpda-table-header,
mpda-table-body,
mpda-table-row,
mpda-table-cell,
mpda-form,
mpda-form-group,
mpda-form-label,
mpda-form-control,
mpda-form-error,
mpda-form-help,
mpda-search-box,
mpda-floating-button,
mpda-slider,
mpda-switch,
mpda-rating,
mpda-menu,
mpda-menu-item,
mpda-menu-group,
mpda-sidebar,
mpda-sidebar-item,
mpda-drawer,
mpda-drawer-header,
mpda-drawer-body,
mpda-drawer-footer,
mpda-header,
mpda-header-logo,
mpda-header-nav,
mpda-header-action,
mpda-header-search,
mpda-header-user,
mpda-footer,
mpda-footer-section,
mpda-footer-link,
mpda-footer-title,
mpda-footer-description,
mpda-footer-social,
mpda-footer-copyright,
mpda-featured-icon,
mpda-divider,
[class*="mpda-"],
[class*="nds-"],
[id*="mpda-"],
[id*="nds-"] {
  font-family: var(--font-ibm-plex-arabic) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* تطبيق الخط على جميع العناصر داخل مكونات DGA */
mpda-nav-header *,
mpda-button *,
mpda-second-nav-header *,
mpda-footer *,
mpda-modal *,
mpda-card *,
mpda-form *,
mpda-featured-icon *,
mpda-divider *,
[class*="mpda-"] *,
[class*="nds-"] * {
  font-family: var(--font-ibm-plex-arabic) !important;
}

/* إصلاح مشكلة الأيقونات - التأكد من عدم استخدام خطوط غير صحيحة */
/* ملاحظة: الأيقونات في DGA تستخدم SVG أو icon fonts، لا يجب تطبيق font-family عليها */
/* تم نقل القواعد إلى icon-fix.css */
mpda-icon,
mpda-icon-v2,
mpda-featured-icon {
  /* لا نطبق font-family على الأيقونات لأنها SVG */
  font-family: initial !important;
  font-style: normal !important;
  font-weight: normal !important;
  speak: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  /* التأكد من عرض الأيقونات */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* منع عرض النص */
  overflow: hidden !important;
  text-indent: -9999px !important;
}

/* الأيقونات داخل الأزرار */
mpda-button mpda-icon,
mpda-button-v2 mpda-icon,
mpda-button mpda-icon-v2,
mpda-button-v2 mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* الأيقونات داخل العناصر الأخرى */
[class*="icon"]:not([class*="mpda-"]):not([class*="nds-"]),
[class*="Icon"]:not([class*="mpda-"]):not([class*="nds-"]) {
  font-family: var(--font-ibm-plex-arabic) !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* التأكد من أن النصوص العربية تستخدم الخط الصحيح */
[dir="rtl"],
[lang="ar"],
.rtl,
.arabic {
  font-family: var(--font-ibm-plex-arabic) !important;
  unicode-bidi: embed !important;
}

/* تطبيق الخط على النصوص الإنجليزية */
[dir="ltr"],
[lang="en"],
.ltr,
.english {
  font-family: var(--font-ibm-plex) !important;
}

/* تطبيق الخط على Shadow DOM */
::part(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر النصية داخل مكونات DGA */
/* تطبيق الخط على جميع العناصر النصية داخل مكونات DGA */
mpda-nav-header span,
mpda-nav-header p,
mpda-nav-header div,
mpda-nav-header a,
mpda-nav-header button,
mpda-nav-header label,
mpda-button span,
mpda-button p,
mpda-button div,
mpda-button a,
mpda-button label,
mpda-second-nav-header span,
mpda-second-nav-header p,
mpda-second-nav-header div,
mpda-second-nav-header a,
mpda-second-nav-header button,
mpda-second-nav-header label,
mpda-card span,
mpda-card p,
mpda-card div,
mpda-card a,
mpda-card button,
mpda-card label,
mpda-card h1,
mpda-card h2,
mpda-card h3,
mpda-card h4,
mpda-card h5,
mpda-card h6,
mpda-footer span,
mpda-footer p,
mpda-footer div,
mpda-footer a,
mpda-footer button,
mpda-footer label,
mpda-footer h1,
mpda-footer h2,
mpda-footer h3,
mpda-footer h4,
mpda-footer h5,
mpda-footer h6,
[class*="mpda-"] span,
[class*="mpda-"] p,
[class*="mpda-"] div,
[class*="mpda-"] a,
[class*="mpda-"] button,
[class*="mpda-"] label,
[class*="mpda-"] input,
[class*="mpda-"] textarea,
[class*="mpda-"] select,
[class*="mpda-"] h1,
[class*="mpda-"] h2,
[class*="mpda-"] h3,
[class*="mpda-"] h4,
[class*="mpda-"] h5,
[class*="mpda-"] h6,
[class*="nds-"] span,
[class*="nds-"] p,
[class*="nds-"] div,
[class*="nds-"] a,
[class*="nds-"] button,
[class*="nds-"] label,
[class*="nds-"] input,
[class*="nds-"] textarea,
[class*="nds-"] select,
[class*="nds-"] h1,
[class*="nds-"] h2,
[class*="nds-"] h3,
[class*="nds-"] h4,
[class*="nds-"] h5,
[class*="nds-"] h6 {
  font-family: var(--font-ibm-plex-arabic) !important;
}

/* تطبيق الخط على جميع العناصر داخل Shadow DOM */
::part(*) {
  font-family: var(--font-ibm-plex-arabic) !important;
}

/* تطبيق الخط على جميع العناصر داخل React Components */
[data-reactroot] *,
[data-reactroot] *::before,
[data-reactroot] *::after {
  font-family: var(--font-ibm-plex-arabic) !important;
}

/* ============ قواعد خاصة لـ Navbar ============ */
/* تم نقل القواعد إلى navbar-font-fix.css لضمان تطبيقها بشكل أقوى */

/* ============ إصلاح خط IBM Plex Sans على Navbar ============ */
/* 
  هذا الملف يضمن تطبيق خط IBM Plex Sans بشكل قوي على Navbar
  وإصلاح مشكلة الأيقونات باستخدام Hueicons
  وفقاً لمواصفات DGA: 
  - https://design.dga.gov.sa/guidelines/foundations/iconography
  - https://design.dga.gov.sa/guidelines/foundations/typography
*/

/* تطبيق الخط بقوة على جميع عناصر Navbar */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-nav-header-logos,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
mpda-second-nav-header-actions,
mpda-second-nav-header-actions mpda-button,
mpda-second-nav-header-actions mpda-button-v2 {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* ============ تعديل حجم اللوجو ============ */
/* تم نقل جميع قواعد حجم اللوجو إلى logo-size-fix.css */

/* تحسين عرض اللوجو على الشاشات الصغيرة */
@media (max-width: 768px) {
  mpda-nav-header-logos img[src*="makkah-logo"],
  mpda-nav-header-logos img[src*="logo"],
  mpda-nav-header-logos img[src*="makkah"],
  mpda-nav-header-logos img[src="/makkah-logo.png"] {
    max-height: 28px !important;
    height: 28px !important;
    max-width: 95px !important;
  }
  
  mpda-nav-header-logos img[src*="gov"],
  mpda-nav-header-logos img[alt*="gov"] {
    max-height: 22px !important;
    height: 22px !important;
    max-width: 70px !important;
  }
}

/* تطبيق الخط على جميع النصوص داخل Navbar - قواعد شاملة */
mpda-nav-header *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-nav-header-main *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-nav-header-menu *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-nav-header-link *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-nav-header-actions *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-header-action-btn *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-second-nav-header *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-second-nav-header-content *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-second-nav-header-item *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-second-nav-header-actions *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على النصوص داخل العناصر */
mpda-nav-header span,
mpda-nav-header p,
mpda-nav-header div,
mpda-nav-header a,
mpda-nav-header button,
mpda-nav-header label,
mpda-nav-header-main span,
mpda-nav-header-main p,
mpda-nav-header-main div,
mpda-nav-header-main a,
mpda-nav-header-main button,
mpda-nav-header-main label,
mpda-nav-header-link span,
mpda-nav-header-link p,
mpda-nav-header-link div,
mpda-nav-header-link a,
mpda-nav-header-link button,
mpda-nav-header-link label,
mpda-header-action-btn span,
mpda-header-action-btn p,
mpda-header-action-btn div,
mpda-header-action-btn a,
mpda-header-action-btn button,
mpda-header-action-btn label,
mpda-second-nav-header span,
mpda-second-nav-header p,
mpda-second-nav-header div,
mpda-second-nav-header a,
mpda-second-nav-header button,
mpda-second-nav-header label,
mpda-second-nav-header-item span,
mpda-second-nav-header-item p,
mpda-second-nav-header-item div,
mpda-second-nav-header-item a,
mpda-second-nav-header-item button,
mpda-second-nav-header-item label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على النصوص داخل الأزرار */
mpda-button,
mpda-button-v2,
mpda-button *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2),
mpda-button-v2 *:not(svg):not(path):not(use):not(mpda-icon):not(mpda-icon-v2) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على النصوص داخل الأزرار بشكل محدد */
mpda-button span,
mpda-button p,
mpda-button div,
mpda-button a,
mpda-button label,
mpda-button-v2 span,
mpda-button-v2 p,
mpda-button-v2 div,
mpda-button-v2 a,
mpda-button-v2 label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على التسميات والنصوص */
mpda-nav-header-link::part(label),
mpda-header-action-btn::part(label),
mpda-second-nav-header-item::part(label),
mpda-button::part(label),
mpda-button-v2::part(label) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ============ إصلاح مشكلة الأيقونات ============ */

/* التأكد من عرض الأيقونات */
mpda-icon,
mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 1em !important;
  min-height: 1em !important;
}

/* التأكد من عرض SVG داخل الأيقونات */
mpda-icon svg,
mpda-icon-v2 svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* الأيقونات داخل الأزرار */
mpda-button mpda-icon,
mpda-button-v2 mpda-icon,
mpda-button mpda-icon-v2,
mpda-button-v2 mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

mpda-button mpda-icon svg,
mpda-button-v2 mpda-icon svg,
mpda-button mpda-icon-v2 svg,
mpda-button-v2 mpda-icon-v2 svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* الأيقونات داخل Navbar */
mpda-nav-header mpda-icon,
mpda-nav-header mpda-icon-v2,
mpda-second-nav-header mpda-icon,
mpda-second-nav-header mpda-icon-v2,
mpda-second-nav-header-item mpda-icon,
mpda-second-nav-header-item mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

mpda-nav-header mpda-icon svg,
mpda-nav-header mpda-icon-v2 svg,
mpda-second-nav-header mpda-icon svg,
mpda-second-nav-header mpda-icon-v2 svg,
mpda-second-nav-header-item mpda-icon svg,
mpda-second-nav-header-item mpda-icon-v2 svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* إصلاح الأيقونات في DgaHeaderActionBtn */
mpda-header-action-btn mpda-icon,
mpda-header-action-btn mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

mpda-header-action-btn mpda-icon svg,
mpda-header-action-btn mpda-icon-v2 svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* إصلاح الأيقونات في DgaNavHeaderLink */
mpda-nav-header-link mpda-icon,
mpda-nav-header-link mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

mpda-nav-header-link mpda-icon svg,
mpda-nav-header-link mpda-icon-v2 svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* منع إخفاء الأيقونات */
mpda-icon[hidden],
mpda-icon-v2[hidden],
mpda-icon[style*="display: none"],
mpda-icon-v2[style*="display: none"] {
  display: inline-flex !important;
}

/* التأكد من أن الأيقونات مرئية */
mpda-icon,
mpda-icon-v2 {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============ قواعد إضافية قوية لتطبيق الخط ============ */

/* تطبيق الخط على Shadow DOM داخل Navbar */
mpda-nav-header::part(*),
mpda-nav-header-main::part(*),
mpda-nav-header-menu::part(*),
mpda-nav-header-link::part(*),
mpda-nav-header-actions::part(*),
mpda-header-action-btn::part(*),
mpda-second-nav-header::part(*),
mpda-second-nav-header-content::part(*),
mpda-second-nav-header-item::part(*),
mpda-second-nav-header-actions::part(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر داخل Navbar باستخدام selectors أقوى */
mpda-nav-header slot *,
mpda-nav-header-main slot *,
mpda-nav-header-menu slot *,
mpda-nav-header-link slot *,
mpda-nav-header-actions slot *,
mpda-header-action-btn slot *,
mpda-second-nav-header slot *,
mpda-second-nav-header-content slot *,
mpda-second-nav-header-item slot *,
mpda-second-nav-header-actions slot * {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على العناصر المضافة ديناميكياً */
mpda-nav-header::slotted(*),
mpda-nav-header-main::slotted(*),
mpda-nav-header-menu::slotted(*),
mpda-nav-header-link::slotted(*),
mpda-nav-header-actions::slotted(*),
mpda-header-action-btn::slotted(*),
mpda-second-nav-header::slotted(*),
mpda-second-nav-header-content::slotted(*),
mpda-second-nav-header-item::slotted(*),
mpda-second-nav-header-actions::slotted(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* إصلاح الأيقونات - التأكد من تحميلها وعرضها */
mpda-icon::before,
mpda-icon::after,
mpda-icon-v2::before,
mpda-icon-v2::after {
  font-family: inherit !important;
  display: none !important;
}

/* التأكد من أن SVG داخل الأيقونات يظهر */
mpda-icon svg,
mpda-icon-v2 svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 1em !important;
  height: 1em !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

/* إصلاح الأيقونات في الأزرار */
mpda-button[icononly] mpda-icon,
mpda-button[icononly] mpda-icon-v2,
mpda-button-v2[icononly] mpda-icon,
mpda-button-v2[icononly] mpda-icon-v2 {
  display: inline-flex !important;
  width: 1em !important;
  height: 1em !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

mpda-button[icononly] mpda-icon svg,
mpda-button[icononly] mpda-icon-v2 svg,
mpda-button-v2[icononly] mpda-icon svg,
mpda-button-v2[icononly] mpda-icon-v2 svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* ============ إصلاحات إضافية للأيقونات ============ */

/* إزالة أي قواعد قد تمنع عرض الأيقونات */
mpda-icon *,
mpda-icon-v2 * {
  pointer-events: auto !important;
}

/* التأكد من أن الأيقونات لا يتم إخفاؤها */
mpda-icon[aria-hidden="true"],
mpda-icon-v2[aria-hidden="true"] {
  display: inline-flex !important;
  visibility: visible !important;
}

/* إصلاح الأيقونات في DgaSecondNavHeaderItem */
mpda-second-nav-header-item mpda-icon,
mpda-second-nav-header-item mpda-icon-v2 {
  margin-inline-end: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* إصلاح الأيقونات في DgaNavHeaderLink */
mpda-nav-header-link mpda-icon,
mpda-nav-header-link mpda-icon-v2 {
  margin-inline-start: 0.25rem !important;
  flex-shrink: 0 !important;
}

/* إصلاح الأيقونات في DgaHeaderActionBtn */
mpda-header-action-btn mpda-icon,
mpda-header-action-btn mpda-icon-v2 {
  margin-inline-end: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* التأكد من أن الأيقونات تستخدم الألوان الصحيحة */
mpda-icon,
mpda-icon-v2 {
  color: inherit !important;
}

mpda-icon svg,
mpda-icon-v2 svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ============ قواعد قوية جداً لتطبيق الخط على Navbar ============ */

/* تطبيق الخط على جميع العناصر داخل Navbar باستخدام selectors أقوى */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
mpda-second-nav-header-actions {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر النصية داخل Navbar */
mpda-nav-header button,
mpda-nav-header a,
mpda-nav-header span,
mpda-nav-header div,
mpda-nav-header p,
mpda-nav-header label,
mpda-nav-header-main button,
mpda-nav-header-main a,
mpda-nav-header-main span,
mpda-nav-header-main div,
mpda-nav-header-main p,
mpda-nav-header-main label,
mpda-nav-header-menu button,
mpda-nav-header-menu a,
mpda-nav-header-menu span,
mpda-nav-header-menu div,
mpda-nav-header-menu p,
mpda-nav-header-menu label,
mpda-nav-header-link button,
mpda-nav-header-link a,
mpda-nav-header-link span,
mpda-nav-header-link div,
mpda-nav-header-link p,
mpda-nav-header-link label,
mpda-nav-header-actions button,
mpda-nav-header-actions a,
mpda-nav-header-actions span,
mpda-nav-header-actions div,
mpda-nav-header-actions p,
mpda-nav-header-actions label,
mpda-header-action-btn button,
mpda-header-action-btn a,
mpda-header-action-btn span,
mpda-header-action-btn div,
mpda-header-action-btn p,
mpda-header-action-btn label,
mpda-second-nav-header button,
mpda-second-nav-header a,
mpda-second-nav-header span,
mpda-second-nav-header div,
mpda-second-nav-header p,
mpda-second-nav-header label,
mpda-second-nav-header-content button,
mpda-second-nav-header-content a,
mpda-second-nav-header-content span,
mpda-second-nav-header-content div,
mpda-second-nav-header-content p,
mpda-second-nav-header-content label,
mpda-second-nav-header-item button,
mpda-second-nav-header-item a,
mpda-second-nav-header-item span,
mpda-second-nav-header-item div,
mpda-second-nav-header-item p,
mpda-second-nav-header-item label,
mpda-second-nav-header-actions button,
mpda-second-nav-header-actions a,
mpda-second-nav-header-actions span,
mpda-second-nav-header-actions div,
mpda-second-nav-header-actions p,
mpda-second-nav-header-actions label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر داخل Navbar باستخدام universal selector */
mpda-nav-header *,
mpda-nav-header-main *,
mpda-nav-header-menu *,
mpda-nav-header-link *,
mpda-nav-header-actions *,
mpda-header-action-btn *,
mpda-second-nav-header *,
mpda-second-nav-header-content *,
mpda-second-nav-header-item *,
mpda-second-nav-header-actions * {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* استثناء SVG والأيقونات من تطبيق الخط */
mpda-nav-header svg,
mpda-nav-header path,
mpda-nav-header use,
mpda-nav-header mpda-icon,
mpda-nav-header mpda-icon-v2,
mpda-second-nav-header svg,
mpda-second-nav-header path,
mpda-second-nav-header use,
mpda-second-nav-header mpda-icon,
mpda-second-nav-header mpda-icon-v2 {
  font-family: inherit !important;
}

/* ============ إصلاحات إضافية قوية جداً ============ */

/* تطبيق الخط على جميع العناصر النصية داخل Navbar - قواعد شاملة جداً */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
mpda-second-nav-header-actions {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر داخل Navbar - باستخدام selector شامل */
mpda-nav-header *,
mpda-nav-header-main *,
mpda-nav-header-menu *,
mpda-nav-header-link *,
mpda-nav-header-actions *,
mpda-header-action-btn *,
mpda-second-nav-header *,
mpda-second-nav-header-content *,
mpda-second-nav-header-item *,
mpda-second-nav-header-actions * {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* استثناء SVG والأيقونات مرة أخرى - منع تطبيق الخط */
mpda-nav-header svg,
mpda-nav-header path,
mpda-nav-header use,
mpda-nav-header mpda-icon,
mpda-nav-header mpda-icon-v2,
mpda-second-nav-header svg,
mpda-second-nav-header path,
mpda-second-nav-header use,
mpda-second-nav-header mpda-icon,
mpda-second-nav-header mpda-icon-v2,
mpda-button svg,
mpda-button path,
mpda-button use,
mpda-button mpda-icon,
mpda-button mpda-icon-v2 {
  font-family: initial !important;
}

/* ============ إصلاح الأيقونات من Hugeicons ============ */

/* الأيقونات من Hugeicons تستخدم SVG */
mpda-icon svg,
mpda-icon-v2 svg,
mpda-icon svg *,
mpda-icon-v2 svg * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  pointer-events: none !important;
}

/* التأكد من أن الأيقونات من Hugeicons تظهر */
mpda-icon,
mpda-icon-v2 {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* إصلاح الأيقونات في الأزرار - Hugeicons */
mpda-button[icononly] mpda-icon svg,
mpda-button[icononly] mpda-icon-v2 svg,
mpda-button-v2[icononly] mpda-icon svg,
mpda-button-v2[icononly] mpda-icon-v2 svg {
  width: 1em !important;
  height: 1em !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

/* إصلاح الأيقونات في DgaSecondNavHeaderItem - Hugeicons */
mpda-second-nav-header-item mpda-icon svg,
mpda-second-nav-header-item mpda-icon-v2 svg {
  width: 1em !important;
  height: 1em !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

/* إصلاح الأيقونات في DgaNavHeaderLink - Hugeicons */
mpda-nav-header-link mpda-icon svg,
mpda-nav-header-link mpda-icon-v2 svg {
  width: 1em !important;
  height: 1em !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

/* إصلاح الأيقونات في DgaHeaderActionBtn - Hugeicons */
mpda-header-action-btn mpda-icon svg,
mpda-header-action-btn mpda-icon-v2 svg {
  width: 1em !important;
  height: 1em !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

/* ============ قواعد قوية جداً لتطبيق الخط على Navbar ============ */

/* تطبيق الخط على جميع النصوص داخل Navbar - باستخدام selectors محددة جداً */
mpda-nav-header-link::part(label),
mpda-header-action-btn::part(label),
mpda-second-nav-header-item::part(label),
mpda-button::part(label),
mpda-button-v2::part(label) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر النصية - قواعد شاملة */
mpda-nav-header ::slotted(*),
mpda-nav-header-main ::slotted(*),
mpda-nav-header-menu ::slotted(*),
mpda-nav-header-link ::slotted(*),
mpda-nav-header-actions ::slotted(*),
mpda-header-action-btn ::slotted(*),
mpda-second-nav-header ::slotted(*),
mpda-second-nav-header-content ::slotted(*),
mpda-second-nav-header-item ::slotted(*),
mpda-second-nav-header-actions ::slotted(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع النصوص - قواعد شاملة جداً */
mpda-nav-header text,
mpda-nav-header tspan,
mpda-nav-header-main text,
mpda-nav-header-main tspan,
mpda-nav-header-menu text,
mpda-nav-header-menu tspan,
mpda-nav-header-link text,
mpda-nav-header-link tspan,
mpda-nav-header-actions text,
mpda-nav-header-actions tspan,
mpda-header-action-btn text,
mpda-header-action-btn tspan,
mpda-second-nav-header text,
mpda-second-nav-header tspan,
mpda-second-nav-header-content text,
mpda-second-nav-header-content tspan,
mpda-second-nav-header-item text,
mpda-second-nav-header-item tspan,
mpda-second-nav-header-actions text,
mpda-second-nav-header-actions tspan {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر داخل Shadow DOM */
mpda-nav-header::part(*),
mpda-nav-header-main::part(*),
mpda-nav-header-menu::part(*),
mpda-nav-header-link::part(*),
mpda-nav-header-actions::part(*),
mpda-header-action-btn::part(*),
mpda-second-nav-header::part(*),
mpda-second-nav-header-content::part(*),
mpda-second-nav-header-item::part(*),
mpda-second-nav-header-actions::part(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر داخل slot */
mpda-nav-header slot::slotted(*),
mpda-nav-header-main slot::slotted(*),
mpda-nav-header-menu slot::slotted(*),
mpda-nav-header-link slot::slotted(*),
mpda-nav-header-actions slot::slotted(*),
mpda-header-action-btn slot::slotted(*),
mpda-second-nav-header slot::slotted(*),
mpda-second-nav-header-content slot::slotted(*),
mpda-second-nav-header-item slot::slotted(*),
mpda-second-nav-header-actions slot::slotted(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ============ قواعد نهائية قوية جداً ============ */

/* تطبيق الخط على جميع النصوص - قواعد شاملة جداً */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
mpda-second-nav-header-actions {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر النصية داخل Navbar */
mpda-nav-header *,
mpda-nav-header-main *,
mpda-nav-header-menu *,
mpda-nav-header-link *,
mpda-nav-header-actions *,
mpda-header-action-btn *,
mpda-second-nav-header *,
mpda-second-nav-header-content *,
mpda-second-nav-header-item *,
mpda-second-nav-header-actions * {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* استثناء SVG والأيقونات - منع تطبيق الخط عليها */
mpda-nav-header svg,
mpda-nav-header path,
mpda-nav-header use,
mpda-nav-header mpda-icon,
mpda-nav-header mpda-icon-v2,
mpda-second-nav-header svg,
mpda-second-nav-header path,
mpda-second-nav-header use,
mpda-second-nav-header mpda-icon,
mpda-second-nav-header mpda-icon-v2,
mpda-button svg,
mpda-button path,
mpda-button use,
mpda-button mpda-icon,
mpda-button mpda-icon-v2 {
  font-family: initial !important;
}

/* ============ إصلاحات نهائية للأيقونات من Hugeicons ============ */

/* التأكد من أن الأيقونات من Hugeicons تظهر بشكل صحيح */
mpda-icon,
mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 1em !important;
  min-height: 1em !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  position: relative !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* التأكد من أن SVG داخل الأيقونات يظهر */
mpda-icon svg,
mpda-icon-v2 svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 1em !important;
  min-height: 1em !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* إصلاح الأيقونات في جميع المواضع */
mpda-button mpda-icon,
mpda-button-v2 mpda-icon,
mpda-button mpda-icon-v2,
mpda-button-v2 mpda-icon-v2,
mpda-nav-header mpda-icon,
mpda-nav-header mpda-icon-v2,
mpda-second-nav-header mpda-icon,
mpda-second-nav-header mpda-icon-v2,
mpda-second-nav-header-item mpda-icon,
mpda-second-nav-header-item mpda-icon-v2,
mpda-nav-header-link mpda-icon,
mpda-nav-header-link mpda-icon-v2,
mpda-header-action-btn mpda-icon,
mpda-header-action-btn mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

mpda-button mpda-icon svg,
mpda-button-v2 mpda-icon svg,
mpda-button mpda-icon-v2 svg,
mpda-button-v2 mpda-icon-v2 svg,
mpda-nav-header mpda-icon svg,
mpda-nav-header mpda-icon-v2 svg,
mpda-second-nav-header mpda-icon svg,
mpda-second-nav-header mpda-icon-v2 svg,
mpda-second-nav-header-item mpda-icon svg,
mpda-second-nav-header-item mpda-icon-v2 svg,
mpda-nav-header-link mpda-icon svg,
mpda-nav-header-link mpda-icon-v2 svg,
mpda-header-action-btn mpda-icon svg,
mpda-header-action-btn mpda-icon-v2 svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  font-family: initial !important;
}

/* ============ قواعد نهائية قوية جداً لتطبيق الخط ============ */

/* تطبيق الخط على جميع النصوص في Navbar - قواعد شاملة جداً */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
mpda-second-nav-header-actions {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* تطبيق الخط على جميع النصوص داخل Navbar */
mpda-nav-header *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-nav-header-main *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-nav-header-menu *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-nav-header-link *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-nav-header-actions *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-header-action-btn *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-second-nav-header *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-second-nav-header-content *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-second-nav-header-item *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2),
mpda-second-nav-header-actions *:not(svg):not(path):not(use):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse):not(g):not(mpda-icon):not(mpda-icon-v2) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ============ إصلاح قوي للـ Header ============ */
/* هذا الملف يضمن تطبيق الخط والأيقونات بشكل صحيح على Header */

/* ============ تطبيق الخط بقوة على جميع عناصر Header ============ */

/* تطبيق الخط على Shadow DOM */
mpda-nav-header::part(*),
mpda-second-nav-header::part(*),
mpda-header-action-btn::part(*),
mpda-nav-header-link::part(*),
mpda-second-nav-header-item::part(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع العناصر داخل Header - قواعد قوية جداً */
mpda-nav-header,
mpda-nav-header *,
mpda-nav-header-main,
mpda-nav-header-main *,
mpda-nav-header-menu,
mpda-nav-header-menu *,
mpda-nav-header-link,
mpda-nav-header-link *,
mpda-nav-header-actions,
mpda-nav-header-actions *,
mpda-header-action-btn,
mpda-header-action-btn *,
mpda-second-nav-header,
mpda-second-nav-header *,
mpda-second-nav-header-content,
mpda-second-nav-header-content *,
mpda-second-nav-header-item,
mpda-second-nav-header-item *,
mpda-second-nav-header-actions,
mpda-second-nav-header-actions * {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* استثناء SVG والأيقونات من تطبيق الخط */
mpda-nav-header svg,
mpda-nav-header path,
mpda-nav-header use,
mpda-nav-header mpda-icon,
mpda-nav-header mpda-icon-v2,
mpda-second-nav-header svg,
mpda-second-nav-header path,
mpda-second-nav-header use,
mpda-second-nav-header mpda-icon,
mpda-second-nav-header mpda-icon-v2,
mpda-header-action-btn svg,
mpda-header-action-btn path,
mpda-header-action-btn use,
mpda-header-action-btn mpda-icon,
mpda-header-action-btn mpda-icon-v2 {
  font-family: initial !important;
}

/* ============ إصلاح الأيقونات في Header ============ */

/* التأكد من أن الأيقونات مرئية */
mpda-nav-header mpda-icon,
mpda-nav-header mpda-icon-v2,
mpda-second-nav-header mpda-icon,
mpda-second-nav-header mpda-icon-v2,
mpda-header-action-btn mpda-icon,
mpda-header-action-btn mpda-icon-v2,
mpda-second-nav-header-item mpda-icon,
mpda-second-nav-header-item mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: initial !important;
  min-width: 1em !important;
  min-height: 1em !important;
}

/* التأكد من أن SVG داخل الأيقونات مرئي */
mpda-nav-header mpda-icon svg,
mpda-nav-header mpda-icon-v2 svg,
mpda-second-nav-header mpda-icon svg,
mpda-second-nav-header mpda-icon-v2 svg,
mpda-header-action-btn mpda-icon svg,
mpda-header-action-btn mpda-icon-v2 svg,
mpda-second-nav-header-item mpda-icon svg,
mpda-second-nav-header-item mpda-icon-v2 svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  font-family: initial !important;
}

/* ============ إصلاح النصوص في Header ============ */

/* تطبيق الخط على جميع النصوص */
mpda-nav-header span,
mpda-nav-header p,
mpda-nav-header div,
mpda-nav-header a,
mpda-nav-header button,
mpda-nav-header label,
mpda-second-nav-header span,
mpda-second-nav-header p,
mpda-second-nav-header div,
mpda-second-nav-header a,
mpda-second-nav-header button,
mpda-second-nav-header label,
mpda-header-action-btn span,
mpda-header-action-btn p,
mpda-header-action-btn div,
mpda-header-action-btn a,
mpda-header-action-btn button,
mpda-header-action-btn label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ============ إصلاح Shadow DOM ============ */

/* استخدام ::slotted لتطبيق الخط على العناصر المخصصة */
mpda-nav-header::slotted(*),
mpda-second-nav-header::slotted(*),
mpda-header-action-btn::slotted(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, 
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ============ ستايل قسم الأخبار والمقالات ============ */
/* هذا الملف يحتوي على ستايلات قسم الأخبار لتطابق DGA كود المنصات */

/* ============ Typography Classes من DGA ============ */

.display-sm-bold {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  font-family: var(--font-ibm-plex-arabic) !important;
  color: #161616;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

.text-md-regular {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  font-family: var(--font-ibm-plex-arabic) !important;
  color: #161616;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* ============ Grid System ============ */

.grid {
  display: grid;
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gap-6 {
  gap: 1.5rem;
}

/* ============ Column Spans ============ */

.col-span-12 {
  grid-column: span 12 / span 12;
}

@media (min-width: 640px) {
  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }
}

/* ============ Flexbox Utilities ============ */

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1 1 0%;
}

/* ============ Spacing ============ */

.mt-\[24px\] {
  margin-top: 24px;
}

.mb-\[27px\] {
  margin-bottom: 27px;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .md\:px-\[80px\] {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* ============ قسم الأخبار ============ */

/* تطبيق الخط على قسم الأخبار - قواعد قوية جداً */
section[class*="mt-"],
section[class*="mt-"] *:not(svg):not(i),
section[class*="mt-"] h1,
section[class*="mt-"] h2,
section[class*="mt-"] h3,
section[class*="mt-"] h4,
section[class*="mt-"] p,
section[class*="mt-"] span:not(.hgi),
section[class*="mt-"] div,
section[class*="mt-"] a,
section[class*="mt-"] button {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* تطبيق الخط على DgaCard - قواعد قوية جداً */
mpda-card,
mpda-card *:not(svg):not(i),
mpda-card h1,
mpda-card h2,
mpda-card h3,
mpda-card h4,
mpda-card h5,
mpda-card h6,
mpda-card p,
mpda-card span:not(.hgi),
mpda-card div,
mpda-card a,
mpda-card button,
mpda-card label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* تطبيق الخط على Shadow DOM في DgaCard */
mpda-card::part(*),
mpda-card::slotted(*) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* إخفاء الأيقونات - قواعد قوية جداً */
mpda-card mpda-icon,
mpda-card mpda-icon-v2,
mpda-card mpda-featured-icon,
mpda-card .card__icon,
mpda-card .icon,
mpda-card [class*="icon"],
mpda-card [class*="Icon"],
.custom_article_card mpda-icon,
.custom_article_card mpda-icon-v2,
.custom_article_card mpda-featured-icon,
.custom_article_card .card__icon,
.custom_article_card .icon,
.custom_article_card [class*="icon"],
.custom_article_card [class*="Icon"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* ضمان ظهور الصور في البطاقات */
.custom_article_card mpda-card img,
.custom_article_card mpda-card img,
mpda-card img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
}

/* إخفاء الأيقونات في Shadow DOM */
.custom_article_card mpda-card::part(icon),
.custom_article_card mpda-card::part(featured-icon),
.custom_article_card mpda-card::part(icon-container) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* استثناء SVG للصور فقط */
.custom_article_card mpda-card img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* تطبيق الخط على DgaButton في قسم الأخبار */
section[class*="mt-"] mpda-button,
section[class*="mt-"] mpda-button *,
section[class*="mt-"] mpda-button-v2,
section[class*="mt-"] mpda-button-v2 * {
  font-family: var(--font-ibm-plex-arabic) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* تطبيق الخط على Shadow DOM في DgaButton */
section[class*="mt-"] mpda-button::part(*),
section[class*="mt-"] mpda-button::slotted(*),
section[class*="mt-"] mpda-button-v2::part(*),
section[class*="mt-"] mpda-button-v2::slotted(*) {
  font-family: var(--font-ibm-plex-arabic) !important;
}

/* ============ Custom Article Card ============ */

.custom_article_card {
  width: 100%;
  height: 100%;
}

/* جعل جميع البطاقات نفس الحجم - قواعد قوية جداً */
.custom_article_card {
  display: flex !important;
  height: 100% !important;
  min-height: 240px !important; /* تصغير حجم الكارد */
}

.custom_article_card mpda-card {
  height: 100% !important;
  min-height: 240px !important; /* تصغير حجم الكارد */
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.custom_article_card mpda-card::part(card) {
  height: 100% !important;
  min-height: 240px !important; /* تصغير حجم الكارد */
  display: flex !important;
  flex-direction: column !important;
}

/* إظهار الصورة - قواعد قوية جداً */
.custom_article_card mpda-card::part(image-container),
.custom_article_card mpda-card .card__image-container {
  height: 180px !important; /* ارتفاع مناسب للصورة */
  min-height: 180px !important;
  max-height: 180px !important;
  overflow: hidden !important;
  display: block !important;
}

.custom_article_card mpda-card img,
.custom_article_card mpda-card .card__image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* تصغير padding المحتوى - قواعد قوية جداً */
.custom_article_card mpda-card::part(content-text),
.custom_article_card mpda-card .card__content-text {
  padding: 1rem 1.25rem !important; /* padding مناسب */
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* تكبير حجم العنوان - قواعد قوية جداً */
.custom_article_card mpda-card::part(card-title),
.custom_article_card mpda-card h4,
.custom_article_card mpda-card .text-lg-bold,
.custom_article_card mpda-card .card__content-text h4,
.custom_article_card mpda-card h4.text-lg-bold {
  font-size: 1.5rem !important; /* 24px - أكبر */
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.75rem !important;
  color: var(--mpda-color-text-primary, #161616) !important;
  font-family: var(--font-ibm-plex-arabic) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* تكبير حجم الوصف - قواعد قوية جداً */
.custom_article_card mpda-card::part(description),
.custom_article_card mpda-card p,
.custom_article_card mpda-card .text-md-regular,
.custom_article_card mpda-card .card__content-text p,
.custom_article_card mpda-card p.text-md-regular {
  font-size: 1.125rem !important; /* 18px - أكبر */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--mpda-color-text-secondary, #374151) !important;
  flex-grow: 1 !important;
  font-family: var(--font-ibm-plex-arabic) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* جعل الزر في نفس المستوى مع المحتوى - قواعد قوية جداً */
.custom_article_card mpda-card::part(action),
.custom_article_card mpda-card .card__action {
  padding: 1rem 1.25rem !important; /* نفس padding المحتوى */
  border-top: none !important; /* إزالة الحد */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: block !important;
}

/* تكبير خط الأزرار - قواعد قوية جداً */
.custom_article_card mpda-card mpda-button,
.custom_article_card mpda-card mpda-button-v2,
.custom_article_card mpda-card .card__action mpda-button,
.custom_article_card mpda-card .card__action mpda-button-v2,
.custom_article_card mpda-card .card__action button,
.custom_article_card mpda-card .card__action .mpda-btn {
  font-size: 1.125rem !important; /* 18px - أكبر */
  font-weight: 500 !important;
  font-family: var(--font-ibm-plex-arabic) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.custom_article_card mpda-card .card__action button span,
.custom_article_card mpda-card .card__action .mpda-btn-label,
.custom_article_card mpda-card .card__action .mpda-btn span,
.custom_article_card mpda-card .card__action button .mpda-btn-label {
  font-size: 1.125rem !important; /* 18px - أكبر */
  font-weight: 500 !important;
  font-family: var(--font-ibm-plex-arabic) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* تطبيق الخط على جميع العناصر */
.custom_article_card mpda-card,
.custom_article_card mpda-card *,
.custom_article_card mpda-card::part(*) {
  font-family: var(--font-ibm-plex-arabic) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1 !important;
  text-rendering: optimizeLegibility !important;
}

/* ============ Responsive ============ */

@media (max-width: 1279px) {
  .xl\:col-span-4 {
    grid-column: span 12 / span 12;
  }
}

@media (max-width: 639px) {
  .sm\:col-span-6 {
    grid-column: span 12 / span 12;
  }
  
  .md\:px-\[80px\] {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============ إصلاح حجم اللوجو ============ */
/* 
  هذا الملف يضمن تعديل حجم اللوجو بشكل مناسب
  يتم تحميله بعد جميع ملفات CSS الأخرى
*/

/* قواعد لتصغير اللوجو */
mpda-nav-header-logos,
mpda-nav-header-logos *,
mpda-nav-header-logos * *,
mpda-nav-header-logos * * * {
  max-height: 70px !important;
}

/* تصغير جميع الصور داخل اللوجو */
mpda-nav-header-logos img,
mpda-nav-header-logos svg,
mpda-nav-header-logos a img,
mpda-nav-header-logos a svg,
mpda-nav-header-logos div img,
mpda-nav-header-logos div svg,
mpda-nav-header-logos span img,
mpda-nav-header-logos span svg,
mpda-nav-header-logos picture img,
mpda-nav-header-logos picture source {
  max-height: 60px !important;
  height: 60px !important;
  width: auto !important;
  max-width: 220px !important;
  min-width: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* تصغير اللوجو الرئيسي */
mpda-nav-header-logos img[src*="makkah"],
mpda-nav-header-logos img[src*="logo"],
mpda-nav-header-logos img[src="/makkah-logo.png"],
mpda-nav-header-logos img[src="/makkah-logo.jpg"],
mpda-nav-header-logos img[src="/makkah-logo.svg"],
mpda-nav-header-logos a[href] img[src*="makkah"],
mpda-nav-header-logos a[href] img[src*="logo"],
mpda-nav-header-logos a[href="/"] img,
mpda-nav-header-logos a img {
  max-height: 60px !important;
  height: 60px !important;
  width: auto !important;
  max-width: 220px !important;
  min-width: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* تصغير لوجو الحكومة */
mpda-nav-header-logos img[src*="gov"],
mpda-nav-header-logos img[alt*="gov"],
mpda-nav-header-logos a[href*="gov"] img,
mpda-nav-header-logos a[href*="www.gov.sa"] img {
  max-height: 50px !important;
  height: 50px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* قواعد للعناصر داخل Shadow DOM */
mpda-nav-header-logos::part(*),
mpda-nav-header-logos::part(logo),
mpda-nav-header-logos::part(image),
mpda-nav-header-logos::part(container) {
  max-height: 70px !important;
  height: auto !important;
}

mpda-nav-header-logos::part(*) img,
mpda-nav-header-logos::part(logo) img,
mpda-nav-header-logos::part(image) img,
mpda-nav-header-logos::part(container) img {
  max-height: 60px !important;
  height: 60px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* قواعد للعناصر المضافة ديناميكياً */
mpda-nav-header-logos::slotted(*),
mpda-nav-header-logos slot::slotted(*) {
  max-height: 70px !important;
}

mpda-nav-header-logos::slotted(*) img,
mpda-nav-header-logos slot::slotted(*) img {
  max-height: 60px !important;
  height: 60px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* قواعد شاملة - تطبيق على جميع العناصر */
mpda-nav-header-logos,
mpda-nav-header-logos *,
mpda-nav-header-logos * *,
mpda-nav-header-logos * * *,
mpda-nav-header-logos * * * * {
  box-sizing: border-box !important;
}

/* منع أي قواعد قد تكبر اللوجو */
mpda-nav-header-logos img[style*="height"],
mpda-nav-header-logos img[style*="width"],
mpda-nav-header-logos img[style*="max-height"],
mpda-nav-header-logos img[style*="max-width"] {
  max-height: 60px !important;
  height: 60px !important;
  max-width: 220px !important;
  width: auto !important;
}

/* قواعد للشاشات الصغيرة */
@media (max-width: 768px) {
  mpda-nav-header-logos img,
  mpda-nav-header-logos svg,
  mpda-nav-header-logos a img,
  mpda-nav-header-logos a svg {
    max-height: 50px !important;
    height: 50px !important;
    max-width: 180px !important;
  }
  
  mpda-nav-header-logos img[src*="makkah"],
  mpda-nav-header-logos img[src*="logo"],
  mpda-nav-header-logos img[src="/makkah-logo.png"] {
    max-height: 50px !important;
    height: 50px !important;
    max-width: 180px !important;
  }
  
  mpda-nav-header-logos img[src*="gov"],
  mpda-nav-header-logos img[alt*="gov"] {
    max-height: 42px !important;
    height: 42px !important;
    max-width: 150px !important;
  }
}

/* قواعد إضافية - استخدام attribute selectors */
mpda-nav-header-logos [src],
mpda-nav-header-logos [src*="makkah"],
mpda-nav-header-logos [src*="logo"],
mpda-nav-header-logos [src*="gov"] {
  max-height: 60px !important;
  height: 60px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* قواعد للعناصر داخل mpda-nav-header-main */
mpda-nav-header-main mpda-nav-header-logos img,
mpda-nav-header-main mpda-nav-header-logos svg,
mpda-nav-header-main mpda-nav-header-logos a img {
  max-height: 60px !important;
  height: 60px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* قواعد نهائية - تطبيق مباشر على جميع الصور */
img[src*="makkah-logo"],
img[src="/makkah-logo.png"],
img[src="/makkah-logo.jpg"],
img[src="/makkah-logo.svg"] {
  max-height: 60px !important;
  height: 60px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* قواعد للعناصر داخل Navbar */
mpda-nav-header img,
mpda-nav-header-main img,
mpda-nav-header-main mpda-nav-header-logos img {
  max-height: 60px !important;
  height: 60px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ============ أنماط Header ============ */

/* تطبيق الخط على جميع عناصر Header */
mpda-nav-header,
mpda-nav-header-main,
mpda-nav-header-menu,
mpda-nav-header-link,
mpda-nav-header-actions,
mpda-header-action-btn,
mpda-nav-header-logos,
mpda-second-nav-header,
mpda-second-nav-header-content,
mpda-second-nav-header-item,
mpda-second-nav-header-actions {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على جميع النصوص داخل DGA components */
mpda-nav-header *:not(svg):not(mpda-icon):not(mpda-icon-v2):not(i),
mpda-second-nav-header *:not(svg):not(mpda-icon):not(mpda-icon-v2):not(i) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* تطبيق الخط على الأزرار */
mpda-button,
mpda-button-v2 {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

mpda-button *:not(svg):not(mpda-icon):not(mpda-icon-v2):not(i),
mpda-button-v2 *:not(svg):not(mpda-icon):not(mpda-icon-v2):not(i) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ضمان ظهور الأيقونات بشكل صحيح */
mpda-icon,
mpda-icon-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* منع تطبيق الخط على عناصر الأيقونات */
mpda-icon i,
mpda-icon-v2 i,
.hgi {
  font-family: "hgi" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* تطبيق الخط على الرسائل والنصوص */
.header-menu__item-label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ضمان ظهور النصوص بشكل صحيح */
span:not(.hgi) {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ============ أنماط القائمة المنسدلة المخصصة للمركز الإعلامي ============ */

/* الحاوية الرئيسية */
.media-center-dropdown {
  position: relative;
  display: inline-block;
}

/* ============ أنماط القائمة المنسدلة المخصصة للخدمات ============ */

/* الحاوية الرئيسية */
.services-dropdown {
  position: relative;
  display: inline-block;
}

/* القائمة المنسدلة - مخفية افتراضياً */
.media-center-menu {
  position: absolute;
  top: 100%;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  min-width: 600px;
  background-color: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  border-top: 3px solid #1a8754;
  border-radius: 0 0 12px 12px;
}

/* إظهار القائمة عند التحويم */
.media-center-dropdown:hover .media-center-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* حاوية المحتوى - عمودين متجاورين */
.media-center-menu-container {
  display: flex;
  flex-direction: row-reverse;
  gap: 60px;
  padding: 32px 40px;
  direction: rtl;
}

/* تنسيق العمود */
.menu-column {
  min-width: 200px;
  text-align: right;
}

/* عنوان العمود - أخضر */
.column-title {
  color: #1a8754;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* قائمة الروابط */
.column-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.column-links li {
  margin-bottom: 12px;
}

.column-links a {
  color: #374151;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: color 0.2s ease;
  display: block;
  padding: 4px 0;
}

.column-links a:hover {
  color: #1a8754;
}

/* تأكد من أن الـ dropdown يعمل بشكل صحيح مع عناصر DGA */
.media-center-dropdown dga-nav-header-link,
.media-center-dropdown mpda-nav-header-link {
  cursor: pointer;
}

/* ============ تنسيق العنصر النشط في القائمة ============ */

/* wrapper للعناصر */
.nav-item-wrapper {
  display: inline-flex;
  align-items: center;
  height: 100%;
  border-radius: 8px;
  margin: 4px 2px;
  transition: all 0.2s ease;
}

/* العنصر النشط في القائمة - خلفية خضراء مع حواف ناعمة */
.nav-item-wrapper.active {
  background-color: #1b8354 !important;
  border-radius: 8px !important;
  position: relative;
}

.nav-item-wrapper.active mpda-nav-header-link,
.nav-item-wrapper.active dga-nav-header-link {
  background-color: transparent !important;
  border-radius: 8px !important;
}

/* تطبيق على العناصر الداخلية - النص أبيض */
.nav-item-wrapper.active,
.nav-item-wrapper.active *,
.nav-item-wrapper.active a,
.nav-item-wrapper.active span,
.nav-item-wrapper.active label {
  color: #fff !important;
  --nav-header-link-color: #fff !important;
  --link-color: #fff !important;
}

.nav-item-wrapper.active mpda-nav-header-link,
.nav-item-wrapper.active mpda-nav-header-link *,
.nav-item-wrapper.active mpda-nav-header-link a,
.nav-item-wrapper.active dga-nav-header-link,
.nav-item-wrapper.active dga-nav-header-link *,
.nav-item-wrapper.active dga-nav-header-link a {
  color: #fff !important;
  --nav-header-link-color: #fff !important;
  --link-color: #fff !important;
}

/* إجبار اللون الأبيض على العنصر النشط */
.nav-item-wrapper.active mpda-nav-header-link,
.nav-item-wrapper.active dga-nav-header-link {
  --text-color: #fff !important;
  --nav-link-color: #fff !important;
  --mpda-nav-link-color: #fff !important;
  color: #fff !important;
}

/* استخدام filter لتحويل اللون - استثناء القائمة المنسدلة */
.nav-item-wrapper.active:not(.media-center-dropdown) mpda-nav-header-link .nav-header-link__label,
.nav-item-wrapper.active:not(.media-center-dropdown) mpda-nav-header-link span,
.nav-item-wrapper.active:not(.media-center-dropdown) dga-nav-header-link .nav-header-link__label,
.nav-item-wrapper.active:not(.media-center-dropdown) dga-nav-header-link span {
  color: #fff !important;
  filter: brightness(0) invert(1) !important;
}

/* filter فقط على عنصر الرابط في المركز الإعلامي وليس القائمة */
.media-center-dropdown.active > mpda-nav-header-link,
.media-center-dropdown.active > dga-nav-header-link {
  filter: brightness(0) invert(1) !important;
}

/* إلغاء filter من القائمة المنسدلة */
.media-center-dropdown .media-center-menu,
.media-center-dropdown .media-center-menu * {
  filter: none !important;
  color: inherit;
}

/* القائمة المنسدلة للخدمات - مخفية افتراضياً */
.services-menu {
  position: absolute;
  top: 100%;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  min-width: 700px;
  background-color: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  border-top: 3px solid #1a8754;
  border-radius: 0 0 12px 12px;
}

/* إظهار القائمة عند التحويم */
.services-dropdown:hover .services-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* حاوية المحتوى للخدمات */
.services-menu-container {
  padding: 24px 40px;
  direction: rtl;
}

.services-menu-container .menu-column {
  min-width: 100%;
}

.services-menu-container .column-links {
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  flex-wrap: wrap;
}

.services-menu-container .column-links li {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.services-menu-container .column-links a {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  text-align: center;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.services-menu-container .column-links a:hover {
  background-color: #f3f4f6;
}

/* إلغاء filter من قائمة الخدمات */
.services-dropdown .services-menu,
.services-dropdown .services-menu * {
  filter: none !important;
  color: inherit;
}

/* إعادة تعيين ألوان قائمة الخدمات */
.services-menu .column-links a {
  color: #374151 !important;
}

.services-menu .column-links a:hover {
  color: #1a8754 !important;
}

/* filter فقط على عنصر الرابط في الخدمات وليس القائمة */
.services-dropdown.active > mpda-nav-header-link,
.services-dropdown.active > dga-nav-header-link {
  filter: brightness(0) invert(1) !important;
}

/* إعادة تعيين ألوان القائمة المنسدلة */
.media-center-menu .column-title {
  color: #1a8754 !important;
}

.media-center-menu .column-links a {
  color: #374151 !important;
}

.media-center-menu .column-links a:hover {
  color: #1a8754 !important;
}

/* محاولة الوصول للـ Shadow DOM عبر ::part */
.nav-item-wrapper.active mpda-nav-header-link::part(label),
.nav-item-wrapper.active mpda-nav-header-link::part(link),
.nav-item-wrapper.active mpda-nav-header-link::part(text),
.nav-item-wrapper.active dga-nav-header-link::part(label),
.nav-item-wrapper.active dga-nav-header-link::part(link),
.nav-item-wrapper.active dga-nav-header-link::part(text) {
  color: #fff !important;
}

/* Shadow DOM parts عند hover على العنصر النشط - نص أخضر */
.nav-item-wrapper.active:hover mpda-nav-header-link::part(label),
.nav-item-wrapper.active:hover mpda-nav-header-link::part(link),
.nav-item-wrapper.active:hover mpda-nav-header-link::part(text),
.nav-item-wrapper.active:hover dga-nav-header-link::part(label),
.nav-item-wrapper.active:hover dga-nav-header-link::part(link),
.nav-item-wrapper.active:hover dga-nav-header-link::part(text) {
  color: #1b8354 !important;
}

/* تنسيق hover للعناصر غير النشطة */
.nav-item-wrapper:not(.active):hover {
  background-color: rgba(27, 131, 84, 0.1) !important;
  border-radius: 8px !important;
}

/* ============ العنصر النشط عند hover - نص أخضر على خلفية بيضاء ============ */
/* يجب أن تكون هذه القواعد بعد قواعد .active العادية لضمان الأولوية */

.nav-item-wrapper.active:hover {
  background-color: #ffffff !important;
}

/* إجبار اللون الأخضر على جميع العناصر عند hover - قواعد قوية جداً */
.nav-item-wrapper.active:hover,
.nav-item-wrapper.active:hover *,
.nav-item-wrapper.active:hover a,
.nav-item-wrapper.active:hover span,
.nav-item-wrapper.active:hover label,
.nav-item-wrapper.active:hover div {
  color: #1b8354 !important;
  --nav-header-link-color: #1b8354 !important;
  --link-color: #1b8354 !important;
  --text-color: #1b8354 !important;
  --mpda-nav-link-color: #1b8354 !important;
}

/* إجبار اللون الأخضر على عناصر DGA عند hover - قواعد قوية جداً */
.nav-item-wrapper.active:hover mpda-nav-header-link,
.nav-item-wrapper.active:hover mpda-nav-header-link *,
.nav-item-wrapper.active:hover mpda-nav-header-link a,
.nav-item-wrapper.active:hover mpda-nav-header-link span,
.nav-item-wrapper.active:hover mpda-nav-header-link label,
.nav-item-wrapper.active:hover mpda-nav-header-link div,
.nav-item-wrapper.active:hover dga-nav-header-link,
.nav-item-wrapper.active:hover dga-nav-header-link *,
.nav-item-wrapper.active:hover dga-nav-header-link a,
.nav-item-wrapper.active:hover dga-nav-header-link span,
.nav-item-wrapper.active:hover dga-nav-header-link label,
.nav-item-wrapper.active:hover dga-nav-header-link div {
  color: #1b8354 !important;
  --nav-header-link-color: #1b8354 !important;
  --link-color: #1b8354 !important;
  --text-color: #1b8354 !important;
  --nav-link-color: #1b8354 !important;
  --mpda-nav-link-color: #1b8354 !important;
  filter: none !important;
}

/* إزالة filter وإجبار اللون الأخضر - قواعد قوية جداً */
.nav-item-wrapper.active:hover mpda-nav-header-link,
.nav-item-wrapper.active:hover dga-nav-header-link {
  --text-color: #1b8354 !important;
  --nav-link-color: #1b8354 !important;
  --mpda-nav-link-color: #1b8354 !important;
  --nav-header-link-color: #1b8354 !important;
  --link-color: #1b8354 !important;
  color: #1b8354 !important;
  filter: none !important;
}

/* إزالة filter من العناصر الداخلية - قواعد قوية جداً */
.nav-item-wrapper.active:hover mpda-nav-header-link .nav-header-link__label,
.nav-item-wrapper.active:hover mpda-nav-header-link span,
.nav-item-wrapper.active:hover dga-nav-header-link .nav-header-link__label,
.nav-item-wrapper.active:hover dga-nav-header-link span {
  color: #1b8354 !important;
  filter: none !important;
}

/* تجاوز قواعد filter الموجودة للعنصر النشط عند hover */
.nav-item-wrapper.active:hover:not(.media-center-dropdown) mpda-nav-header-link .nav-header-link__label,
.nav-item-wrapper.active:hover:not(.media-center-dropdown) mpda-nav-header-link span,
.nav-item-wrapper.active:hover:not(.media-center-dropdown) dga-nav-header-link .nav-header-link__label,
.nav-item-wrapper.active:hover:not(.media-center-dropdown) dga-nav-header-link span {
  color: #1b8354 !important;
  filter: none !important;
}

/* خط سفلي للعنصر النشط */
.nav-item-wrapper.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
}

/* ============ Responsive للشاشات الصغيرة ============ */

@media (max-width: 1024px) {
  .media-center-menu {
    min-width: 500px;
  }
  
  .media-center-menu-container {
    gap: 40px;
    padding: 24px 30px;
  }
}

@media (max-width: 768px) {
  .media-center-menu {
    min-width: calc(100vw - 40px);
    left: 20px;
    right: 20px;
  }
  
  .media-center-menu-container {
    flex-direction: column;
    gap: 24px;
    padding: 20px;
  }
  
  .menu-column {
    min-width: 100%;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 20px;
  }
  
  .menu-column:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .column-title {
    font-size: 16px;
    margin-bottom: 14px;
  }
  
  .column-links a {
    font-size: 14px;
  }
  
  /* Responsive لقائمة الخدمات */
  .services-menu {
    min-width: calc(100vw - 40px);
    left: 20px;
    right: 20px;
  }
  
  .services-menu-container {
    flex-direction: column;
    gap: 24px;
    padding: 20px;
  }
  
  .services-menu-container .menu-column {
    flex: none;
    min-width: 100%;
  }
}

/* ============ القائمة المتنقلة المخصصة ============ */

/* زر القائمة داخل الهيدر */
.mobile-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: #1B6B44;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-right: auto;
  margin-left: 12px;
}

.mobile-menu-btn:hover {
  background: #155936;
}

.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
}

/* الخلفية الشفافة */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1002;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* القائمة نفسها */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100vh;
  background: #ffffff;
  z-index: 1003;
  transition: right 0.3s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  direction: rtl;
  visibility: hidden;
}

.mobile-menu.open {
  right: 0;
  visibility: visible;
}

/* رأس القائمة */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.mobile-menu-logo {
  height: 40px;
  width: auto;
}

.mobile-menu-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #374151;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mobile-menu-close:hover {
  background: #f3f4f6;
  color: #1B6B44;
}

/* قائمة العناصر */
.mobile-menu-list {
  list-style: none;
  padding: 16px 0;
  margin: 0;
}

.mobile-menu-list li {
  border-bottom: 1px solid #f3f4f6;
}

.mobile-menu-list li:last-child {
  border-bottom: none;
}

.mobile-menu-list li a {
  display: block;
  padding: 16px 24px;
  color: #374151;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

.mobile-menu-list li a:hover {
  background: #f3f4f6;
  color: #1B6B44;
}

.mobile-menu-list li.active a {
  background: #1B6B44;
  color: white;
}

/* إظهار القائمة على الموبايل */
@media (max-width: 991px) {
  .mobile-menu-btn {
    display: flex;
  }
  
  /* إخفاء أيقونة gov.sa على الموبايل */
  dga-nav-header-logos .gov-logo,
  mpda-nav-header-logos .gov-logo,
  dga-nav-header-logos [href*="gov.sa"],
  mpda-nav-header-logos [href*="gov.sa"] {
    display: none !important;
  }
}/* DGA Footer Styles */

.mpda-footer {
  background-color: #074d31;
  color: white;
  direction: rtl;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

.ds-footer-container {
  width: 100%;
}

.mpda-footer-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 60px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Footer Section */
.mpda-footer-section {
  display: flex;
  flex-direction: column;
}

.mpda-footer-section-bnt {
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 600;
  text-align: right;
  padding: 0 0 20px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 20px;
}

.mpda-footer-section-bnt svg {
  margin-left: 10px;
  transition: transform 0.3s;
}

.mpda-footer-section-bnt:hover svg {
  transform: rotate(180deg);
}

.social-media-title {
  font-size: 18px;
  font-weight: 600;
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 20px;
}

.mpda-footer-section-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mpda-footer-section-body a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.6;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.mpda-footer-section-body a:hover {
  color: #1B6B44;
}

/* Social Media */
.mpda-social-media-container {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.mpda-accessibility-bnt {
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  text-decoration: none;
  color: white;
}

.mpda-accessibility-bnt:hover {
  background-color: #1B6B44;
  transform: translateY(-2px);
}

.mpda-accessibility-bnt svg {
  width: 20px;
  height: 20px;
}

/* Accessibility Tools */
.accessibility-tools-title {
  font-size: 16px;
  font-weight: 600;
  display: block;
  margin-bottom: 16px;
}

.mpda-accessibility-tools-container {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mpda-accessibility-tools-container .mpda-accessibility-bnt {
  width: auto;
  padding: 10px 16px;
  font-size: 14px;
  gap: 8px;
}

/* Footer Policy */
.mpda-footer-policy {
  background-color: #074d31;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.bottom-footer-right {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.bottom-footer-copy-right p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.bottom-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.bottom-footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.bottom-footer-links a:hover {
  color: #1B6B44;
}

.bottom-footer-links a:not(:last-child)::after {
  content: "|";
  margin-right: 20px;
  color: rgba(255, 255, 255, 0.3);
}

.bottom-footer-left {
  display: flex;
  align-items: center;
}

.lift-image img {
  display: block;
}

/* Responsive */
@media (max-width: 1024px) {
  .mpda-footer-body {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 40px 20px;
  }
}

@media (max-width: 768px) {
  .mpda-footer-body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 20px;
  }

  .mpda-footer-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .mpda-footer-section-body.open {
    max-height: 500px;
  }

  .bottom-footer-container {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .bottom-footer-right {
    flex-direction: column;
    gap: 15px;
  }

  .bottom-footer-links {
    flex-direction: column;
    gap: 10px;
  }

  .bottom-footer-links a:not(:last-child)::after {
    display: none;
  }
}

/* Desktop - Always show sections */
@media (min-width: 769px) {
  .mpda-footer-section-body {
    display: flex !important;
  }

  .mpda-footer-section-bnt svg {
    display: none;
  }
}
/* ============ الختم الرقمي ============ */

.digital-stamp-card {
  background-color: #f9fafb;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  width: 100%;
}

.digital-stamp-header {
  background-color: #f9fafb;
  padding: 0;
  width: 100%;
}

.digital-stamp-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}

.flag-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.digital-stamp-header h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  text-align: center;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.btn-digital-stamp-card {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1b8354;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: color 0.2s ease;
}

.btn-digital-stamp-card:hover {
  color: #14532d;
}

.arrow-icon {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.3s ease;
  display: inline-block;
}

.arrow-icon.rotated {
  transform: rotate(180deg);
}

.digital-stamp-body {
  background-color: #f9fafb;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}

.digital-stamp-container {
  display: flex;
  flex-direction: row-reverse;
  gap: 24px;
  margin-bottom: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.stamp-box {
  flex: 1;
  max-width: 50%;
}

.stamp-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: right;
}

.stamp-icon-circle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background-color: #1b8354;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stamp-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.stamp-content {
  text-align: right;
  flex: 1;
}

.stamp-content h6 {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.stamp-content p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.green-text {
  color: #1b8354;
  font-weight: 700;
}

.stamp-link-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  border: none;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}

.organization-logo {
  width: 28px;
  height: auto;
  max-height: 24px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  margin-right: auto;
}

.dga-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

.stamp-link-box p {
  margin: 0;
  font-size: 14px;
  color: #374151;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.stamp-number-link {
  font-size: 14px;
  font-weight: 600;
  color: #1b8354;
  text-decoration: underline;
  text-decoration-color: #1b8354;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: color 0.2s ease;
}

.stamp-number-link:hover {
  color: #14532d;
  text-decoration-color: #14532d;
}

/* Responsive */
@media (max-width: 768px) {
  .digital-stamp-header-content {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 8px;
  }
  
  .digital-stamp-header h6 {
    font-size: 13px;
    width: 100%;
    order: 2;
    text-align: center;
  }
  
  .flag-icon {
    order: 1;
  }
  
  .btn-digital-stamp-card {
    order: 3;
    margin: 0 auto;
  }
  
  .digital-stamp-body {
    padding: 16px 12px;
  }
  
  .digital-stamp-container {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  
  .stamp-box {
    max-width: 100%;
    width: 100%;
  }
  
  .stamp-content-wrapper {
    gap: 10px;
  }
  
  .stamp-icon-circle {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  
  .stamp-icon {
    width: 18px;
    height: 18px;
  }
  
  .stamp-content h6 {
    font-size: 13px;
  }
  
  .stamp-content p {
    font-size: 12px;
  }
  
  .stamp-link-box {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 16px;
    width: 100%;
  }
  
  .stamp-link-box p {
    font-size: 13px;
  }
  
  .stamp-number-link {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .digital-stamp-header-content {
    padding: 10px 12px;
  }
  
  .digital-stamp-header h6 {
    font-size: 12px;
  }
  
  .btn-digital-stamp-card {
    font-size: 12px;
  }
  
  .digital-stamp-body {
    padding: 16px 12px;
  }
  
  .stamp-content h6 {
    font-size: 14px;
  }
  
  .stamp-content p {
    font-size: 13px;
  }
}