/* styles.css */

/* === تعيينات أساسية للصفحة === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === تنسيقات الجسم العام للصفحة === */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* نوع الخط */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* خلفية متدرجة */
  color: #333; /* لون النص الأساسي */
  line-height: 1.6; /* المسافة بين السطور */
  min-height: 100vh; /* ارتفاع الجسم ليغطي كامل الشاشة */
}

/* === حاوية المحتوى الرئيسية === */
.container {
  max-width: 1200px; /* أقصى عرض */
  margin: 0 auto; /* توسيط الحاوية */
  padding: 20px; /* مسافة داخلية */
}

/* === تنسيقات رأس الصفحة === */
header {
  text-align: center; /* محاذاة النص في الوسط */
  padding: 40px 20px; /* مسافة داخلية */
  color: white; /* لون النص */
}

/* === عنوان رأس الصفحة === */
header h1 {
  font-size: 3em; /* حجم الخط */
  margin-bottom: 15px; /* مسافة من الأسفل */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* ظل النص */
  background: linear-gradient(45deg, #fff, #f0f0f0); /* خلفية متدرجة للنص */
  -webkit-background-clip: text; /* قص الخلفية على شكل النص */
  -webkit-text-fill-color: transparent; /* جعل لون النص شفاف */
  background-clip: text; /* قص الخلفية على شكل النص */
}

/* === عنوان ثانوي (مخفي حاليًا) === */
header h2 {
  font-size: 1.8em; /* حجم الخط */
  margin-bottom: 20px; /* مسافة من الأسفل */
  color: #ffd700; /* لون النص الذهبي */
  display: none; /* إخفاء العنصر */
}

/* === فقرة وصفية في الرأس === */
header p {
  font-size: 1.3em; /* حجم الخط */
  max-width: 800px; /* أقصى عرض */
  margin: 0 auto; /* توسيط الفقرة */
  opacity: 0.9; /* شفافية النص */
}

/* === حاوية البحث === */
.search-container {
  background: white; /* لون الخلفية */
  border-radius: 30px; /* انحناء الزوايا */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); /* ظل الحاوية */
  padding: 15px; /* مسافة داخلية */
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  margin: 0 auto 40px; /* توسيط أفقي ومسافة من الأسفل */
  max-width: 900px; /* أقصى عرض */
  position: relative; /* موضع نسبي */
}

/* === حاوية حقل إدخال النطاق === */
.domain-input-container {
  display: flex; /* عرض العناصر بجانب بعض */
  flex: 1; /* تمديد العنصر لملء المساحة المتاحة */
  align-items: center; /* محاذاة عمودية في الوسط */
}

/* === حقل إدخال النطاق === */
#search-box {
  flex: 1; /* تمديد العنصر لملء المساحة المتاحة */
  padding: 22px 25px; /* مسافة داخلية */
  font-size: 1.4em; /* حجم الخط */
  border: none; /* إزالة الحدود */
  outline: none; /* إزالة خط التركيز */
  background: transparent; /* خلفية شفافة */
  text-align: center; /* محاذاة النص في الوسط */
  font-weight: bold; /* خط سميك */
}

/* === حاوية زر اختيار الامتداد === */
.extension-selector {
  position: relative; /* موضع نسبي */
  margin: 0 15px; /* مسافة من اليمين واليسار */
}

/* === زر اختيار الامتداد === */
.extension-button {
  background: linear-gradient(45deg, #3498db, #2980b9); /* خلفية متدرجة */
  color: white; /* لون النص */
  border: none; /* إزالة الحدود */
  padding: 20px 25px; /* مسافة داخلية */
  border-radius: 22px; /* انحناء الزوايا */
  cursor: pointer; /* مؤشر الماوس على شكل يد */
  font-size: 1.2em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  gap: 10px; /* مسافة بين العناصر */
  transition: all 0.3s ease; /* تأثير انتقال */
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4); /* ظل الزر */
}

/* === تأثير التمرير على زر اختيار الامتداد === */
.extension-button:hover {
  transform: translateY(-2px); /* رفع الزر قليلاً */
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.5); /* ظل أقوى */
}

/* === قائمة الامتدادات المنسدلة === */
.extensions-dropdown {
  position: absolute; /* موضع مطلق */
  top: 100%; /* وضعها تحت الزر */
  left: 0; /* محاذاة لليسار */
  background: white; /* لون الخلفية */
  border-radius: 20px; /* انحناء الزوايا */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); /* ظل القائمة */
  width: 250px; /* عرض القائمة */
  z-index: 1000; /* طبقة أمامية */
  display: none; /* إخفاء القائمة */
  margin-top: 15px; /* مسافة من الأعلى */
  overflow: hidden; /* إخفاء المحتوى الزائد */
  max-height: 300px; /* أقصى ارتفاع */
  overflow-y: auto; /* شريط تمرير عمودي */
}

/* === عرض القائمة المنسدلة === */
.extensions-dropdown.show {
  display: block; /* إظهار القائمة */
  animation: slideDown 0.3s ease; /* تأثير الانزلاق */
}

/* === تأثير انزلاق القائمة === */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); } /* بداية التأثير */
  to { opacity: 1; transform: translateY(0); } /* نهاية التأثير */
}

/* === خيار امتداد في القائمة === */
.extension-option {
  padding: 18px 25px; /* مسافة داخلية */
  cursor: pointer; /* مؤشر الماوس على شكل يد */
  transition: all 0.2s ease; /* تأثير انتقال */
  font-weight: bold; /* خط سميك */
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  gap: 12px; /* مسافة بين العناصر */
  font-size: 1.1em; /* حجم الخط */
}

/* === تأثير التمرير على خيار الامتداد === */
.extension-option:hover {
  background: linear-gradient(45deg, #3498db, #2980b9); /* خلفية متدرجة */
  color: white; /* لون النص */
}

/* === ألوان مختلفة لكل امتداد === */
.extension-option.com { color: #3498db; }
.extension-option.net { color: #9b59b6; }
.extension-option.org { color: #e67e22; }
.extension-option.fr { color: #e74c3c; }
.extension-option.io { color: #1abc9c; }
.extension-option.co { color: #f39c12; }
.extension-option.info { color: #9b59b6; }
.extension-option.biz { color: #27ae60; }
.extension-option.me { color: #e74c3c; }
.extension-option.tv { color: #3498db; }
.extension-option.us { color: #27ae60; }
.extension-option.online { color: #3498db; }
.extension-option.site { color: #9b59b6; }
.extension-option.xyz { color: #e67e22; }
.extension-option.pro { color: #1abc9c; }
.extension-option.fun { color: #f39c12; }
.extension-option.tech { color: #27ae60; }
.extension-option.store { color: #e74c3c; }
.extension-option.app { color: #3498db; }
.extension-option.shop { color: #9b59b6; }
.extension-option.buzz { color: #e67e22; }
.extension-option.website { color: #1abc9c; }

/* === زر البحث === */
.search-button {
  background: linear-gradient(45deg, #27ae60, #2ecc71); /* خلفية متدرجة */
  color: white; /* لون النص */
  border: none; /* إزالة الحدود */
  padding: 22px 30px; /* مسافة داخلية */
  border-radius: 22px; /* انحناء الزوايا */
  cursor: pointer; /* مؤشر الماوس على شكل يد */
  font-size: 1.2em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  transition: all 0.3s ease; /* تأثير انتقال */
  box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4); /* ظل الزر */
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  gap: 10px; /* مسافة بين العناصر */
}

/* === تأثير التمرير على زر البحث === */
.search-button:hover {
  transform: translateY(-2px); /* رفع الزر قليلاً */
  box-shadow: 0 8px 25px rgba(39, 174, 96, 0.5); /* ظل أقوى */
}

/* === حاوية النتائج === */
#results {
  display: none; /* إخفاء الحاوية */
  background: white; /* لون الخلفية */
  border-radius: 30px; /* انحناء الزوايا */
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3); /* ظل الحاوية */
  padding: 40px; /* مسافة داخلية */
  margin-top: 30px; /* مسافة من الأعلى */
  animation: slideUp 0.5s ease; /* تأثير الانزلاق */
  backdrop-filter: blur(10px); /* تأثير الضبابية */
}

/* === تأثير انزلاق النتائج === */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); } /* بداية التأثير */
  to { opacity: 1; transform: translateY(0); } /* نهاية التأثير */
}

/* === رأس قسم النتائج === */
.results-header {
  text-align: center; /* محاذاة النص في الوسط */
  margin-bottom: 35px; /* مسافة من الأسفل */
  color: #555; /* لون النص */
}

/* === عنوان قسم النتائج === */
.results-header h2 {
  font-size: 2.2em; /* حجم الخط */
  margin-bottom: 15px; /* مسافة من الأسفل */
  color: #2c3e50; /* لون النص */
}

/* === عنوان فرعي لقسم النتائج === */
.results-header h3 {
  font-size: 1.5em; /* حجم الخط */
  color: #3498db; /* لون النص */
  margin-bottom: 10px; /* مسافة من الأسفل */
}

/* === حالة النطاق (مخفي حاليًا) === */
.domain-status {
  display: none; /* إخفاء العنصر */
}

/* === شبكة المسجلات === */
.registrars-grid {
  display: grid; /* عرض الشبكة */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* أعمدة مرنة */
  gap: 25px; /* مسافة بين العناصر */
  margin-top: 30px; /* مسافة من الأعلى */
}

/* === بطاقة مسجل === */
.registrar-card {
  background: linear-gradient(145deg, #f8f9fa, #e9ecef); /* خلفية متدرجة */
  border-radius: 20px; /* انحناء الزوايا */
  padding: 25px; /* مسافة داخلية */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* ظل البطاقة */
  transition: all 0.3s ease; /* تأثير انتقال */
  border: 1px solid #eee; /* حدود رفيعة */
  position: relative; /* موضع نسبي */
  overflow: hidden; /* إخفاء المحتوى الزائد */
}

/* === تأثير التمرير على بطاقة المسجل === */
.registrar-card:hover {
  transform: translateY(-10px); /* رفع البطاقة قليلاً */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); /* ظل أقوى */
}

/* === بطاقة أفضل سعر === */
.registrar-card.best-price {
  border: 3px solid #FFD700; /* حدود ذهبية */
  background: linear-gradient(145deg, #fff9db, #fff3bf); /* خلفية ذهبية */
}

/* === شارة أفضل سعر === */
.best-price-badge {
  position: absolute; /* موضع مطلق */
  top: 15px; /* مسافة من الأعلى */
  right: 15px; /* مسافة من اليمين */
  background: linear-gradient(45deg, #FFD700, #FFA500); /* خلفية متدرجة */
  color: #333; /* لون النص */
  padding: 8px 15px; /* مسافة داخلية */
  border-radius: 20px; /* انحناء الزوايا */
  font-size: 0.9em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3); /* ظل الشارة */
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  gap: 5px; /* مسافة بين العناصر */
}

/* === معلومات المسجل === */
.registrar-info {
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  gap: 15px; /* مسافة بين العناصر */
  margin-bottom: 20px; /* مسافة من الأسفل */
}

/* === شعار المسجل === */
.registrar-logo {
  width: 60px; /* عرض الشعار */
  height: 60px; /* ارتفاع الشعار */
  border-radius: 50%; /* جعل الشعار دائري */
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  justify-content: center; /* محاذاة أفقية في الوسط */
  color: white; /* لون النص */
  font-size: 1.5em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل الشعار */
}

/* === اسم المسجل === */
.registrar-name {
  font-size: 1.3em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  color: #2c3e50; /* لون النص */
}

/* === اسم النطاق في البطاقة === */
.registrar-domain {
  font-size: 1.2em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  color: #3498db; /* لون النص */
  margin: 15px 0; /* مسافة من الأعلى والأسفل */
  word-break: break-all; /* كسر الكلمات الطويلة */
}

/* === سعر المسجل === */
.registrar-price {
  font-size: 2em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  margin: 15px 0; /* مسافة من الأعلى والأسفل */
}

/* === لون السعر المتاح === */
.price-available {
  color: #27ae60; /* لون أخضر */
}

/* === السعر الأصلي (مشطوب) === */
.original-price {
  text-decoration: line-through; /* خط مشطوب */
  color: #999; /* لون رمادي */
  font-size: 1.2em; /* حجم الخط */
  margin-right: 15px; /* مسافة من اليمين */
}

/* === شارة الخصم === */
.discount-badge {
  background: linear-gradient(45deg, #e74c3c, #c0392b); /* خلفية متدرجة */
  color: white; /* لون النص */
  padding: 6px 12px; /* مسافة داخلية */
  border-radius: 20px; /* انحناء الزوايا */
  font-size: 0.9em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  margin-bottom: 15px; /* مسافة من الأسفل */
  display: inline-block; /* عرض كعنصر سطر */
  box-shadow: 0 3px 8px rgba(231, 76, 60, 0.3); /* ظل الشارة */
}

/* === زر الشراء === */
.buy-button {
  background: linear-gradient(45deg, #3498db, #2980b9); /* خلفية متدرجة */
  color: white; /* لون النص */
  padding: 16px 25px; /* مسافة داخلية */
  border: none; /* إزالة الحدود */
  border-radius: 50px; /* انحناء الزوايا */
  font-size: 1.1em; /* حجم الخط */
  font-weight: bold; /* خط سميك */
  cursor: pointer; /* مؤشر الماوس على شكل يد */
  text-decoration: none; /* إزالة التسطير */
  display: inline-block; /* عرض كعنصر سطر */
  transition: all 0.3s ease; /* تأثير انتقال */
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); /* ظل الزر */
  width: 100%; /* عرض كامل */
  margin-top: 15px; /* مسافة من الأعلى */
  /* === تعديلات لتصغير الأيقونة === */
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  justify-content: center; /* محاذاة أفقية في الوسط */
  gap: 5px; /* مسافة بين الأيقونة والنص (مُقلّص) */
}

/* === تأثير التمرير على زر الشراء === */
.buy-button:hover {
  transform: translateY(-2px); /* رفع الزر قليلاً */
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4); /* ظل أقوى */
}

/* === تعديل حجم الأيقونة داخل زر الشراء === */
.buy-button .fa-shopping-cart {
  font-size: 0.9em; /* تصغير حجم الأيقونة */
}

/* === شاشة التحميل === */
.loading {
  text-align: center; /* محاذاة النص في الوسط */
  padding: 70px; /* مسافة داخلية */
}

/* === مؤشر التحميل === */
.loading-spinner {
  border: 8px solid #f3f3f3; /* حدود رفيعة */
  border-top: 8px solid #3498db; /* حد علوي ملون */
  border-radius: 50%; /* جعل الشكل دائري */
  width: 70px; /* عرض المؤشر */
  height: 70px; /* ارتفاع المؤشر */
  animation: spin 1s linear infinite; /* تأثير دوران */
  margin: 0 auto 30px; /* توسيط أفقي ومسافة من الأسفل */
}

/* === تأثير دوران المؤشر === */
@keyframes spin {
  0% { transform: rotate(0deg); } /* بداية التأثير */
  100% { transform: rotate(360deg); } /* نهاية التأثير */
}

/* === قسم الميزات === */
.features {
  margin: 20px 0; /* مسافة من الأعلى والأسفل */
  padding: 0 15px; /* مسافة داخلية من اليمين واليسار */
}

/* === عنوان قسم الميزات === */
.features h4 {
  color: #2c3e50; /* لون النص */
  margin-bottom: 10px; /* مسافة من الأسفل */
  font-size: 1.1em; /* حجم الخط */
}

/* === قائمة الميزات === */
.features ul {
  list-style: none; /* إزالة النقاط الافتراضية */
}

/* === عنصر قائمة الميزات === */
.features li {
  margin: 8px 0; /* مسافة من الأعلى والأسفل */
  padding: 8px; /* مسافة داخلية */
  background: rgba(255, 255, 255, 0.7); /* خلفية شفافة */
  border-radius: 8px; /* انحناء الزوايا */
  display: flex; /* عرض العناصر بجانب بعض */
  align-items: center; /* محاذاة عمودية في الوسط */
  gap: 8px; /* مسافة بين العناصر */
  font-size: 0.9em; /* حجم الخط */
}

/* === رمز العلامة الصح قبل كل ميزة === */
.features li:before {
  content: "✓"; /* محتوى العنصر */
  color: #27ae60; /* لون النص الأخضر */
  font-weight: bold; /* خط سميك */
}

/* === تذييل الصفحة === */
footer {
  text-align: center; /* محاذاة النص في الوسط */
  padding: 40px; /* مسافة داخلية */
  color: white; /* لون النص */
  margin-top: 60px; /* مسافة من الأعلى */
  opacity: 0.8; /* شفافية النص */
  font-size: 1.1em; /* حجم الخط */
}

/* === تحسينات التصميم المتجاوب للهواتف === */

/* === للشاشات المتوسطة === */
@media (max-width: 992px) {
  .registrars-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* تعديل الأعمدة */
  }
  header h1 {
    font-size: 2.5em; /* تقليل حجم العنوان */
  }
}

/* === للهواتف المحمولة === */
@media (max-width: 768px) {
  /* تعديل تخطيط حاوية البحث */
  .search-container {
    flex-direction: column; /* عرض العناصر عموديًا */
    gap: 15px; /* مسافة بين العناصر */
    padding: 20px; /* مسافة داخلية */
    border-radius: 20px; /* زوايا أكثر انحناءً */
  }

  /* تعديل حاوية إدخال النطاق */
  .domain-input-container {
    width: 100%; /* عرض كامل */
    order: 1; /* وضع حقل النطاق في الأعلى */
  }

  /* تعديل حقل إدخال النطاق */
  #search-box {
    text-align: center; /* محاذاة النص في الوسط */
    padding: 18px 15px; /* تقليل التباعد الجانبي */
    font-size: 1.2em; /* تقليل حجم الخط قليلاً */
    font-weight: normal; /* وزن عادي بدلاً من السميك */
  }

  /* تعديل زر اختيار الامتداد */
  .extension-selector {
    width: 100%; /* عرض كامل */
    margin: 0; /* إزالة المسافة */
    order: 2; /* وضع زر الامتداد في المنتصف */
  }

  .extension-button {
    padding: 16px 20px; /* تقليل التباعد */
    width: 100%; /* عرض كامل */
    justify-content: center; /* محاذاة أفقية في الوسط */
    font-size: 1.1em; /* تقليل حجم الخط */
  }

  /* تعديل زر البحث */
  .search-button {
    padding: 16px 20px; /* تقليل التباعد */
    width: 100%; /* عرض كامل */
    justify-content: center; /* محاذاة أفقية في الوسط */
    font-size: 1.1em; /* تقليل حجم الخط */
    order: 3; /* وضع زر البحث في الأسفل */
  }

  /* تعديل قائمة الامتدادات المنسدلة */
  .extensions-dropdown {
    width: 100%; /* عرض كامل */
    left: 0; /* محاذاة لليسار */
    border-radius: 15px; /* زوايا أقل انحناءً */
    max-height: 250px; /* تقليل الارتفاع الأقصى قليلاً */
  }

  .extension-option {
    padding: 16px 20px; /* تقليل التباعد */
    font-size: 1.05em; /* تقليل حجم الخط قليلاً */
    gap: 10px; /* تقليل المسافة بين الأيقونة والنص */
    border-bottom: 1px solid #f0f0f0; /* إضافة فاصل بين الخيارات */
  }

  .extension-option:last-child {
    border-bottom: none; /* إزالة الحدود من آخر خيار */
  }

  .extension-option:hover {
    background: linear-gradient(45deg, #3498db, #2980b9); /* خلفية متدرجة */
    color: white; /* لون النص */
    transform: translateX(3px); /* تحريك بسيط لليمين عند التمرير */
  }

  /* تعديل شبكة النتائج */
  .registrars-grid {
    grid-template-columns: 1fr; /* عمود واحد فقط على الهاتف */
    gap: 20px; /* تقليل المسافة بين البطاقات */
  }

  /* === تعديل بطاقات النتائج - جعلها أكثر بروزًا === */
  .registrar-card {
    padding: 20px; /* تقليل التباعد الداخلي قليلاً */
    border-radius: 15px; /* زوايا أقل انحناءً */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* زيادة ظل البطاقة */
    border: 2px solid #f0f0f0; /* إضافة حدود واضحة */
    position: relative; /* موضع نسبي */
    overflow: visible; /* السماح للعناصر المطلقة بالبرز */
  }

  .registrar-card:hover {
    transform: translateY(-5px); /* رفع أصغر قليلاً */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* زيادة ظل التمرير */
  }

  .registrar-card.best-price {
    border: 3px solid #FFD700; /* حدود ذهبية */
    background: linear-gradient(145deg, #fff9db, #fff3bf); /* خلفية ذهبية */
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.2); /* ظل ذهبي */
  }

  /* === تعديل شارة أفضل سعر - تصغيرها على الهاتف === */
  .best-price-badge {
    position: absolute; /* موضع مطلق */
    top: -8px; /* وضعها أعلى قليلاً */
    right: 10px; /* مسافة من اليمين */
    background: linear-gradient(45deg, #FFD700, #FFA500); /* خلفية متدرجة */
    color: #333; /* لون النص */
    padding: 4px 10px; /* تقليل التباعد */
    border-radius: 15px; /* زوايا أقل */
    font-size: 0.7em; /* تقليل حجم الخط بشكل كبير */
    font-weight: bold; /* خط سميك */
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4); /* ظل أقوى نسبيًا */
    display: flex; /* عرض العناصر بجانب بعض */
    align-items: center; /* محاذاة عمودية في الوسط */
    gap: 3px; /* مسافة أقل بين الأيقونة والنص */
    z-index: 10; /* ضمان ظهورها فوق المحتوى */
    white-space: nowrap; /* منع التفاف النص */
  }

  .best-price-badge .fa-crown {
    font-size: 0.8em; /* تقليل حجم الأيقونة */
  }

  /* تعديل معلومات المسجل */
  .registrar-info {
    gap: 12px; /* تقليل المسافة */
    margin-bottom: 15px; /* تقليل المسافة السفلى */
  }

  .registrar-logo {
    width: 50px; /* تقليل حجم الشعار */
    height: 50px; /* تقليل حجم الشعار */
    font-size: 1.2em; /* تقليل حجم الخط في الشعار */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* ظل أصغر */
  }

  .registrar-name {
    font-size: 1.1em; /* تقليل حجم اسم المسجل */
    font-weight: bold; /* خط سميك */
  }

  .registrar-domain {
    font-size: 1em; /* تقليل حجم اسم النطاق */
    margin: 12px 0; /* تقليل المسافة */
    color: #3498db; /* لون النص */
    word-break: break-all; /* كسر الكلمات الطويلة */
  }

  .registrar-price {
    font-size: 1.5em; /* تقليل حجم السعر */
    margin: 12px 0; /* تقليل المسافة */
    font-weight: bold; /* خط سميك */
  }

  .original-price {
    font-size: 1em; /* تقليل حجم السعر الأصلي */
    margin-right: 10px; /* تقليل المسافة */
  }

  .discount-badge {
    padding: 4px 10px; /* تقليل التباعد */
    border-radius: 15px; /* زوايا أقل */
    font-size: 0.8em; /* تقليل حجم الخط */
    margin-bottom: 12px; /* تقليل المسافة */
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3); /* ظل أصغر */
  }

  .buy-button {
    padding: 14px 20px; /* تقليل التباعد */
    font-size: 1em; /* تقليل حجم الخط */
    border-radius: 40px; /* زوايا أقل */
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); /* ظل أصغر */
  }

  .buy-button:hover {
    transform: translateY(-2px); /* رفع أصغر */
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4); /* ظل أقوى */
  }

  /* تعديل العناوين */
  header {
    padding: 30px 15px; /* تقليل التباعد */
  }

  header h1 {
    font-size: 2em; /* تقليل حجم العنوان الرئيسي */
    margin-bottom: 10px; /* تقليل المسافة */
  }

  header p {
    font-size: 1.1em; /* تقليل حجم النص */
    padding: 0 10px; /* إضافة تباعد جانبي */
  }

  .results-header h2 {
    font-size: 1.8em; /* تقليل حجم العنوان */
  }

  .results-header h3 {
    font-size: 1.3em; /* تقليل حجم العنوان */
  }

  /* تعديل تذييل الصفحة */
  footer {
    padding: 30px 15px; /* تقليل التباعد */
    font-size: 1em; /* تقليل حجم الخط */
  }

  /* تعديل شاشة التحميل */
  .loading {
    padding: 50px 20px; /* تقليل التباعد */
  }

  .loading-spinner {
    width: 50px; /* تقليل حجم المؤشر */
    height: 50px; /* تقليل حجم المؤشر */
    margin: 0 auto 20px; /* توسيط أفقي ومسافة من الأسفل */
  }

  /* تعديل قسم الميزات */
  .features {
    margin: 15px 0; /* تقليل المسافة */
    padding: 0 10px; /* تقليل التباعد الجانبي */
  }

  .features h4 {
    font-size: 1em; /* تقليل حجم العنوان */
    margin-bottom: 8px; /* تقليل المسافة */
  }

  .features ul {
    list-style: none; /* إزالة النقاط الافتراضية */
  }

  .features li {
    margin: 6px 0; /* تقليل المسافة بين العناصر */
    padding: 6px; /* تقليل التباعد الداخلي */
    font-size: 0.85em; /* تقليل حجم الخط */
    border-radius: 6px; /* زوايا أقل */
    gap: 6px; /* مسافة أقل */
  }
}

/* === للشاشات الصغيرة جداً (مثل الهواتف القديمة) === */
@media (max-width: 480px) {
  .container {
    padding: 10px; /* تقليل التباعد العام */
  }

  .search-container {
    padding: 15px 10px; /* تقليل التباعد */
  }

  #search-box {
    font-size: 1em; /* تقليل حجم الخط أكثر */
    padding: 15px 10px; /* تقليل التباعد */
  }

  .extension-button, .search-button {
    padding: 14px 16px; /* تقليل التباعد */
    font-size: 1em; /* تقليل حجم الخط */
  }

  .extension-option {
    padding: 12px 15px; /* تقليل التباعد */
    font-size: 0.9em; /* تقليل حجم الخط */
  }

  .registrar-card {
    padding: 15px; /* تقليل التباعد الداخلي */
  }

  .registrar-logo {
    width: 45px; /* تقليل حجم الشعار */
    height: 45px; /* تقليل حجم الشعار */
    font-size: 1em; /* تقليل حجم الخط */
  }

  .registrar-name {
    font-size: 1em; /* تقليل حجم النص */
  }

  .registrar-price {
    font-size: 1.3em; /* تقليل حجم السعر */
  }

  .best-price-badge {
    font-size: 0.65em; /* تصغير أكثر على الشاشات الصغيرة جداً */
    padding: 3px 8px; /* تقليل التباعد */
  }

  header h1 {
    font-size: 1.8em; /* تقليل حجم العنوان */
  }

  header p {
    font-size: 1em; /* تقليل حجم النص */
  }
}