/* ========================================= */
/* الخط الأساسي وإعدادات الصفحة العامة        */
/* ========================================= */
body {
  font-family: 'Cairo', sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  color: #333;

  /* خلفية أوراق النباتات */
  background-image: url("images/realistic-leaves.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /* تحريك الخلفية ببطء */
  animation: slowBackgroundPan 30s ease-in-out infinite alternate;
}

/* ========================================= */
/* الحاوية الرئيسية لصفحة التفاصيل            */
/* ========================================= */
.details {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 40px;
  justify-content: center;
  align-items: flex-start;
}

/* ========================================= */
/* قسم الصور                                 */
/* ========================================= */
.image-section {
  display: flex;
  flex-direction: column;
  align-items: center;

  /* تأثير الظهور */
  opacity: 0;
  animation: fadeInSlideUp 0.8s ease-out forwards;
  animation-delay: 0.1s;
}

/* الصورة الرئيسية */
.main-photo {
  margin-top: 20px;
  width: 350px;
  height: 350px;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* الصور داخل الإطار الرئيسي */
.photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}


/* إظهار الصورة المختارة */
#img1:checked ~ .main-photo .photo1 { opacity: 1; }
#img2:checked ~ .main-photo .photo2 { opacity: 1; }
#img3:checked ~ .main-photo .photo3 { opacity: 1; }

/* ========================================= */
/* الصور المصغرة                              */
/* ========================================= */
.thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.thumbnails img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.3s, border 0.3s;
}

/* تمييز الصورة النشطة */
#img1:checked ~ .thumbnails label[for="img1"] img,
#img2:checked ~ .thumbnails label[for="img2"] img,
#img3:checked ~ .thumbnails label[for="img3"] img {
  border: 2px solid #66774a;
  transform: scale(1.1);
}

/* تأثير التحويم */
.thumbnails img:hover {
  transform: scale(1.15) translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* ========================================= */
/* قسم معلومات النبات                         */
/* ========================================= */
.info {
  max-width: 600px;
  background-color: rgba(95, 126, 80, 0.71);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* تأثير الظهور */
  opacity: 0;
  animation: fadeInSlideUp 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

/* عنوان النبات */
.info h1 {
  font-size: 32px;
  color: #f0f0f0;
  margin-bottom: 10px;
}

/* فئة النبات */
.category {
  font-size: 18px;
  color: #f0f0f0;
  margin-bottom: 20px;
}

/* ========================================= */
/* التبويبات                                 */
/* ========================================= */
.tabs input {
  display: none;
}

.tabs label {
  padding: 8px 16px;
  background: #f0f0f0;
  color: #66774a;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 5px;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.tabs input:checked + label {
  background-color: #66774a;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* محتوى التبويب */
.tab-content {
  margin: 20px;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
}

.tab-pane {
  opacity: 0;
  max-height: 0; 
  overflow: hidden;
  transform: scaleY(0.8); /* يبدأ منكمشاً قليلاً وليس 0 تماماً ليكون أنعم */
  transform-origin: top;
  /* إضافة transform للـ transition */
  transition: opacity 0.4s ease, max-height 0.4s ease, transform 0.4s ease;
}

/* إظهار محتوى التبويب المختار */
#tab1:checked ~ .tab-content #content1,
#tab2:checked ~ .tab-content #content2,
#tab3:checked ~ .tab-content #content3,
#tab4:checked ~ .tab-content #content4 {
  opacity: 1;
  max-height: 230px; 
  transform: scaleY(1);
}

/* ========================================= */
/* زر الرجوع                                 */
/* ========================================= */
.back {
  display: inline-block;
  padding: 10px 20px;
  background-color: #66774a;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.back:hover {
  background-color: #445533;
}

/* ========================================= */
/* الحركات (Animations)                      */
/* ========================================= */
@keyframes fadeInSlideUp {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes slowBackgroundPan {
  0% {
      background-position: center top;
  }
  100% {
      background-position: center bottom;
  }
}

/* ========================================= */
/* التصميم المتجاوب (Responsive)              */
/* ========================================= */
@media (max-width: 768px) {

  .details {
      flex-direction: column;
      align-items: center;
      padding: 20px;
      gap: 20px;
      margin-top: 20px;
  }

  .image-section {
      width: 100%;
  }

  .main-photo {
      width: 90vw;
      height: 90vw;
      max-width: 350px;
      max-height: 350px;
      margin-top: 10px;
  }

  .thumbnails {
      gap: 8px;
      justify-content: center;
  }

  .thumbnails img {
      width: 60px;
      height: 60px;
  }

  .info {
      width: 95%;
      margin-top: 0;
      padding: 15px;
  }

  .info h1 {
      font-size: 28px;
  }

  .category {
      font-size: 16px;
  }

  .tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

  .tabs label {
      flex-grow: 1;
      text-align: center;
      margin-bottom: 5px;
      margin-right: 10px;
      padding: 10px;
  }

  .tab-content {
      margin: 15px 0;
      text-align: right;
  }

  .back {
      width: 100%;
      text-align: center;
      box-sizing: border-box;
  }
}


@media (max-width: 480px) {
  /* تقليل الهوامش المحيطة بالحاوية الرئيسية */
  .details {
    padding: 10px;
    margin-top: 10px;
  }

  /* تصغير حجم الصورة الرئيسية لتناسب عرض الهاتف الصغير */
  .main-photo {
    width: 280px; 
    height: 280px;
    border-radius: 12px;
  }

  /* تصغير الصور المصغرة (Thumbnails) */
  .thumbnails img {
    width: 50px;
    height: 50px;
    border-radius: 6px;
  }

  /* ضبط قسم المعلومات */
  .info {
    padding: 12px;
    border-radius: 10px;
  }

  .info h1 {
    font-size: 24px; /* تصغير العنوان */
    margin-bottom: 5px;
  }

  .category {
    font-size: 14px;
    margin-bottom: 15px;
  }

  /* تحسين التبويبات (Tabs) للموبايل الصغير */
  .tabs label {
    font-size: 13px; 
    padding: 6px 10px; 
    margin-right: 3px;
    flex-basis: 45%; /* جعل كل تبويبين يظهران في سطر واحد */
  }

  /* ضبط محتوى التبويب */
  .tab-content {
    padding: 10px;
    font-size: 14px; /* تصغير خط النص الوصفي */
  }

  /* التأكد من أن الارتفاع الأقصى للتبويب لا يسبب مشاكل */
  #tab1:checked ~ .tab-content #content1,
  #tab2:checked ~ .tab-content #content2,
  #tab3:checked ~ .tab-content #content3,
  #tab4:checked ~ .tab-content #content4 {
    max-height: 400px; /* زيادة الارتفاع لأن النص سيأخذ أسطر أكثر في الشاشة الضيقة */
  }

  .back {
    padding: 12px;
    font-size: 16px;
  }
}