/* mobile-fix.css */

/* قاعدة أساسية للتحكم في العرض على الشاشات الصغيرة */
@media (max-width: 768px) {

  body {
    font-size: 16px;
    padding: 10px;
  }

  /* اجعل الصور والفيديوهات تتناسب مع عرض الشاشة */
  img, video {
    max-width: 100%;
    height: auto;
  }

  /* إخفاء الأعمدة الجانبية إن وجدت */
  .sidebar, .left-sidebar, .right-sidebar {
    display: none !important;
  }

  /* تأخذ العناصر كامل عرض الشاشة */
  .container, .content, .main {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* تحويل القوائم الأفقية إلى عمودية */
  nav ul,
  .navbar ul,
  .menu ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }

  nav ul li,
  .navbar ul li,
  .menu ul li {
    width: 100% !important;
  }

  /* تصغير حجم العناوين إن كانت كبيرة جدًا */
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  /* مثال: جعل الأزرار تأخذ العرض الكامل */
  button,
  .btn {
    width: 100% !important;
    padding: 12px;
    font-size: 16px;
  }
}
/* إخفاء زر القائمة في الشاشات الكبيرة */
.mobile-toggle {
  display: none;
  background-color: #007bff;
  color: white;
  padding: 10px;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin: 10px 0;
}

/* تصميم القائمة في الجوال */
@media (max-width: 768px) {
  .mobile-toggle {
    display: block;
  }

  #mainNav {
    display: none; /* نخفي القائمة بشكل افتراضي */
    background-color: #007bff;
    padding: 10px;
  }

  #mainNav.active {
    display: block; /* تظهر عند الضغط على الزر */
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
  }

  .nav-links li a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    background-color: #eee;
    border-radius: 4px;
  }
}
/* استعلام وسائط لتحديد الشاشات التي عرضها 768 بكسل أو أقل */
@media screen and (max-width: 768px) {
    
    /* عند استيفاء الشرط (شاشة صغيرة)، نقوم بعرض الزر مرة أخرى */
    .whatsapp-float {
        display: block; /* أو display: flex; حسب التنسيق الأصلي */
    }
}