/* ===========================================
   🔹 تنسيقات عامة للنموذج والصفحة
   =========================================== */
body,
body * {
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
  box-sizing: border-box;
}

/* الحقول العامة */
input,
textarea,
select,
button {
  direction: rtl;
  text-align: right;
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Placeholder */
::placeholder {
  color: #888;
  font-size: 14px;
}

/* ===========================================
      🔹 عنوان النموذج (نموذج الطلب)
      =========================================== */
.form-title-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* ✅ بدل 475px */
  max-width: 475px;
  height: 50px;
  background-color: #000000;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 20px;
  font-weight: 500;
  color: #f1e25a;
  margin: 0 auto 20px auto;
}

/* ===========================================
      🔹 معلومات المنتج (الاسم + السعر)
      =========================================== */
.product-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%; /* ✅ بدل max ثابت */
  max-width: 475px;
  margin-bottom: 15px;
}

.product-info .product-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-info .product-price {
  font-size: 22px;
  font-weight: 400;
  color: #555;
  margin: 0;
  text-align: right;
}

.product-info .product-price #product-price {
  font-weight: 700;
  color: #000;
  font-size: 24px;
}

/* ===========================================
      🔹 الحاوية الرئيسية (الفورم + الصور)
      =========================================== */
.order-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* يجعل الفورم والصور بنفس المستوى */
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
}

/* الفورم */
.order-form {
  width: 100%; /* ✅ بدل 475px */
  max-width: 475px;
  min-height: 528px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 0px;
}

/* الصور */
.order-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%; /* ✅ بدل 475px */
  max-width: 475px;
  min-height: 500px;
  box-sizing: border-box;
  padding: 0px;
  background-color: #fffffffd;
  border-radius: 0px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ===========================================
      🔹 الصور الرئيسية والفرعية
      =========================================== */
.main-image-wrapper {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.thumbnail-images {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  height: 120px;
  overflow-y: auto;
}

.thumbnail-images .thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

.thumbnail-images .thumb:hover {
  transform: scale(1.1);
}

/* ===========================================
      🔹 صفوف الإدخال الكبيرة
      =========================================== */
.field-row1,
.field-row2,
.field-row3,
.line-row {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 475px;
  margin: 0 auto 15px;
  box-sizing: border-box;
}

/* ارتفاع ثابت للحقول */
.field-row1 input,
.field-row1 select,
.field-row2 input,
.field-row2 select,
.line-row .field-item input,
.line-row .field-item select {
  height: 40px;
}

/* الحقول */
.field-row1 input,
.field-row1 select,
.field-row2 input,
.field-row2 select {
  width: calc(50% - 7.5px);
  max-width: 230px;
  padding: 0 10px;
  font-size: 15px;
  border: 1.5px solid #000000;
  transition: border-color 0.3s ease;
}

/* ===========================================
      🔹 تصميم select (الولاية + البلدية)
      =========================================== */
select {
  background-color: #fff;
  color: #000;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  appearance: none;
}

select:hover {
  border-color: #e4dc97;
}

select:focus {
  outline: none;
  border-color: #e4dc97;
  box-shadow: 0 0 2px rgba(205, 227, 97, 0.4);
}

/* ================================
      تأثير hover و العنوان على الاسم والهاتف + الولاية والبلدية
      ================================ */
.field-row1 input:hover,
.field-row1 select:hover,
.field-row2 input:hover,
.field-row2 select:hover,
.field-row3 textarea:hover {
  border-color: #e4dc97 !important;
  box-shadow: 0 0 4px rgba(205, 227, 97, 0.6) !important;
}

/* ===========================================
   🔹 الصفوف الصغيرة (كمية + توصيل + كوبون + مجموع)
   =========================================== */
.line-row {
  display: flex;
  gap: 9px;
  margin-bottom: 15px;
  justify-content: center;
}

.line-row .field-item {
  display: flex;
  align-items: center;
  gap: 0;
}

.field-item input,
.field-item select {
  width: 118px;
  height: 40px;
  padding: 5px;
  font-size: 16px;
  border: 1.5px solid #000;
  border-radius: 0;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.field-item input:hover,
.field-item select:hover {
  border-color: #e4dc97 !important;
  box-shadow: 0 0 4px rgba(205, 227, 97, 0.6) !important;
}

.field-item label {
  display: inline-block;
  width: 100px;
  text-align: right;
  font-weight: 500;
  font-size: 15px;
  margin-right: 5px;
}

#delivery_fee {
  font-size: 18px; /* غيّر الرقم حسب الحجم المطلوب */
  font-weight: bold; /* لتكبير الخط */
  color: #333; /* يمكنك تغييره إذا أحببت */
  text-align: center; /* لمحاذاة الرقم لليمين */
}

/* ===========================================
     🔹 تخصيص مربع الكمية فقط
     =========================================== */
#qty {
  width: 120px; /* يمكن تعديل العرض بحرية */
  height: 40px;
  border-radius: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

/* الفراغ العمودي بين مربع الكمية والكلمة */
#qty + label {
  margin-top: 8px;
  display: block;
}

/* ===========================================
     🔹 صف الكمية + المجموع
     =========================================== */
.line-row.qty-total {
  display: flex;
  justify-content: space-between; /* توزيع العنصرين بالتساوي */
  align-items: center;
  width: 100%; /* متوافق مع الفورم */
  max-width: 475px; /* الحد الأقصى للعرض */
  gap: 10px; /* الفراغ بين الكمية والمجموع */
  margin-bottom: 15px;
  box-sizing: border-box;
}

.line-row.qty-total .field-item {
  display: flex;
  flex-direction: column; /* label تحت input */
  gap: 5px; /* الفراغ داخل كل مجموعة */
  flex: 1; /* كل عنصر يأخذ نصف المساحة */
  min-width: 0; /* لتجنب كسر النصوص الطويلة */
}

.line-row.qty-total .field-item input {
  width: 100%; /* يملأ المساحة بالكامل */
  box-sizing: border-box;
  text-align: center; /* توسيط الرقم */
}

/* ===========================================
     🔹 إذا أردت جعل الفراغ أفقياً بدل عمودي
     =========================================== */
#qty-container {
  display: flex;
  flex-direction: row; /* بدل العمودي */
  align-items: center;
  gap: 5px; /* الفراغ بين الكلمة والمستطيل */
}

/* ===========================================
   🔹 تعديل حقل المجموع لجعله بارزًا مثل السعر
   =========================================== */
#total {
  font-size: 20px; /* حجم الرقم */
  font-weight: 700; /* عريض */
  color: #000; /* نفس لون السعر */
  text-align: center; /* لتوسيط الرقم */
}

/* ===========================================
      🔹 زر الإرسال
      =========================================== */
.submit-row .btn-submit {
  width: 100%;
  max-width: 475px;
  height: 40px;
  background-color: #ece6ad;
  color: #040404;
  border: none;
  border-radius: 0px;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
}

.submit-row .btn-submit:hover {
  background-color: #efd80b;
}

/* ===========================================
      🔹 زر الواتساب + العودة الى المتجر 
      بنفس ستايل الحقول (الاسم والهاتف)
      =========================================== */
.extra-buttons {
  display: flex;
  flex-direction: row; /* 🔹 الأزرار جنب بعض */
  gap: 15px; /* مسافة بين الأزرار */
  margin-top: 15px;
}

.extra-buttons a {
  flex: 1; /* 🔹 كل زر يأخذ نصف المساحة */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid #e7e7e7; /* مثل الحقول */
  border-radius: 0px;
  transition: 0.3s ease;
}

/* زر واتساب */
.btn-whatsapp {
  background-color: #25d366;
  color: #fff;
}
.btn-whatsapp:hover {
  background-color: #1ebc57;
  color: #f3f2f2;
}

/* زر العودة */
.btn-back {
  background-color: #000000;
  color: #f1e25a;
}
.btn-back:hover {
  background-color: #3f3e3e;
  color: #fff;
}

/* ===========================================
      🔹 تجاوب الشاشات (Responsive)
      =========================================== */
@media (max-width: 576px) {
  /* صفوف الحقول حسب طلبك */
  .field-row1,       /* الاسم + الهاتف */
  .field-row2,       /* الولاية + البلدية */
  .line-row.coupon-qty,  /* الكوبون + الكمية */
  .line-row.delivery-total {
    /* التوصيل + المجموع */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  /* كل حقل يأخذ نصف المساحة تقريبًا */
  .field-row1 input,
  .field-row2 select,
  .line-row.coupon-qty .field-item input,
  .line-row.coupon-qty .field-item select,
  .line-row.delivery-total .field-item input,
  .line-row.delivery-total .field-item select {
    flex: 1 1 calc(50% - 5px);
    max-width: 48%;
  }

  /* العنوان يبقى في صف منفصل */
  .field-row3 {
    flex-direction: column;
    width: 100%;
  }
  .field-row3 textarea {
    width: 100% !important;
  }

  /* الأزرار 50% لكل زر */
  .extra-buttons {
    flex-direction: row;
    gap: 10px;
  }
  .extra-buttons a {
    flex: 0 0 50%;
    max-width: 50%;
    height: 50px;
    font-size: 16px;
  }
}

/* تعديل حجم الرقم */
#line-total {
  font-size: 20px; /* حجم الرقم داخل الحقل */
  font-weight: 700;
}

@media (max-width: 992px) {
  .order-container {
    display: flex;
    flex-direction: column-reverse; /* 👈 يجعل الفورم تحت الصور */
    align-items: center;
    gap: 10px;
  }

  .order-form,
  .order-images {
    width: 100%;
    max-width: 475px;
  }
}