/* ✅ غلاف استمارة التواصل */
.travia-contact-wrapper {
  background-color: #ffffff;                    /* خلفية بيضاء للنموذج */
  padding: 30px;                                /* حشوة داخلية */
  border-radius: 10px;                          /* حواف مستديرة */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);       /* ظل خفيف حول النموذج */
  width: 100%;                                   /* يأخذ كامل العرض */
  max-width: 500px;                              /* أقصى عرض للنموذج */
  margin: 0 auto;                                /* توسيط النموذج */
}

/* ✅ تسميات الحقول */
.travia-contact-wrapper label {
  font-family: 'Tajawal', sans-serif;           /* الخط المستخدم */
  color: #003385;                               /* لون العلامة بلون البراند */
  font-weight: bold;                            /* سماكة الخط */
  display: block;                               /* عرض كامل للسطر */
  margin-bottom: 5px;                           /* مسافة أسفل التسمية */
}

/* ✅ حقول الإدخال (النص والهاتف والبريد) */
.travia-contact-wrapper input[type="text"],
.travia-contact-wrapper input[type="email"] {
  width: 100%;                                  /* عرض كامل */
  padding: 10px;                                /* حشوة داخلية */
  margin-bottom: 15px;                          /* مسافة بين الحقول */
  border: 1px solid #ccc;                       /* إطار رمادي ناعم */
  border-radius: 5px;                           /* زوايا ناعمة */
  font-family: 'Tajawal', sans-serif;           /* خط موحد */
  color: #000;                                  /* لون النص أسود */
  background-color: #fff;                       /* خلفية بيضاء */
  box-sizing: border-box;                       /* احتساب الحشوة ضمن العرض */
}

/* ✅ حقل textarea (الرسالة) */
.travia-contact-wrapper textarea {
  width: 100%;                                  /* عرض كامل */
  padding: 10px;                                /* حشوة داخلية */
  margin-bottom: 15px;                          /* مسافة أسفل الحقل */
  border: 1px solid #ccc;                       /* نفس إطار الحقول */
  border-radius: 5px;                           /* زوايا ناعمة */
  font-family: 'Tajawal', sans-serif;           /* نفس الخط */
  color: #000;                                  /* نص أسود */
  background-color: #fff;                       /* خلفية بيضاء */
  box-sizing: border-box;                       /* احتساب الحشوة ضمن العرض */
  resize: vertical;                             /* تغيير حجم عمودي فقط */
  min-height: 120px;                            /* ارتفاع افتراضي مناسب */
}

/* ✅ زر الإرسال */
.travia-contact-wrapper button {
  background-color: #0177E3;                    /* لون أزرق رئيسي */
  color: white;                                 /* لون النص أبيض */
  border: none;                                 /* لا حدود */
  padding: 10px 20px;                           /* حشوة داخلية للزر */
  border-radius: 5px;                           /* زوايا ناعمة */
  font-family: 'Tajawal', sans-serif;           /* الخط */
  font-weight: bold;                            /* سماكة الخط */
  cursor: pointer;                              /* شكل اليد عند المرور */
  transition: background-color 0.3s ease;       /* حركة ناعمة عند الهوفر */
  width: 100%;                                  /* الزر يعرض بعرض كامل */
}

/* ✅ تأثير hover على الزر */
.travia-contact-wrapper button:hover {
  background-color: #FFB700;                    /* لون أصفر عند التمرير */
}

/* ✅ إشعار النجاح */
.travia-contact-wrapper .travia-success {
  margin-top: 15px;                             /* مسافة علوية */
  color: green;                                 /* لون أخضر للنجاح */
  font-weight: bold;                            /* خط عريض */
  display: none;                                /* مخفي حتى يتم التفعيل */
}

/* ✅ إشعار الخطأ */
.travia-contact-wrapper .travia-error {
  margin-top: 10px;                             /* مسافة علوية */
  color: red;                                   /* لون أحمر للخطأ */
  font-weight: bold;                            /* خط عريض */
  display: none;                                /* مخفي حتى يظهر برسالة */
}