.lang-btn {
  background: transparent;
  border: 1px solid white;
  color: white;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
}

.lang-switch {
  display: flex; 
  width: 110px; 
  height: 15px; 
  padding: 20px; /* المسافة الداخلية حول النص والسهم. زدها لتصبح المسافة أكبر */
  align-items: center; /* محاذاة النص والسهم رأسياً في وسط الزر */
  gap: 20px; /* المسافة بين النص والسهم. زدها لتباعد أكبر */
  border-radius: 10px; /* حواف مستديرة. زد الرقم لتصبح أكثر استدارة */
  background: rgba(255, 255, 255, 0.10); /* لون الخلفية مع شفافية */
  cursor: pointer; /* يغير شكل المؤشر عند المرور فوق الزر */
  user-select: none; /* يمنع تحديد النص عند النقر */
}

/* النص داخل الزر */
.lang-text {
  width: 37px; /* عرض النص. زدها أو قلها حسب طول الكلمة */
  text-align: center; /* محاذاة النص للوسط */
  color: white; /* لون النص */
  font-size: 20px; /* حجم الخط */
  font-family: 'Teko', sans-serif; /* نوع الخط */
  font-weight: 500; /* سمك الخط. استخدم 600/700 لجعل النص أكثر سمكاً */
  letter-spacing: 0.6px; /* تباعد الحروف. زد الرقم لتباعد أكبر */
}

/* السهم داخل الزر */
/* السهم داخل زر اللغة */
.lang-arrow {
  width: 20px;         /* عرض السهم كما في الفيجما */
  height: 20px;        /* ارتفاع السهم */
  flex-shrink: 0;      /* يمنع السهم من التصغير عند ضغط الزر */
  aspect-ratio: 1/1;   /* يحافظ على نسبة العرض/الارتفاع 1:1 */
}

