@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap");

:root {
  --nu8th-primary:   #276ef1;  /* لون العلامة الأساسي */
  --nu8th-dark:      #121212;
  --nu8th-light:     #f5f5f5;
  --nu8th-radius:    0.5rem;
}

html, body {
  font-family: "Tajawal", sans-serif;
  background-color: var(--nu8th-light);
  color: var(--nu8th-dark);
  line-height: 1.6;
}

input, button, select, textarea {
  font-family: inherit;
}

/* 4-- غلاف النموذج */
.form-wrapper {
  /* يضبطها الـHTML أيضًا، لكن هنا للاحتياط */
  max-width: 480px;
  margin-inline: auto;
}

.box {
  border-radius: var(--nu8th-radius);
}

/* 6-- عناوين وأيقونات */
.title {
  font-weight: 700;
}

.icon {
  line-height: 1;
}

/* 7-- حقل الإدخال عند التركيز */
.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--nu8th-primary);
  box-shadow: 0 0 0 0.125em rgba(39, 110, 241, 0.25);
}

/* 8-- زر الإرسال */
button[type="submit"] {
  transition: background-color 0.25s ease-in-out, opacity 0.3s;
}

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 9-- Checkbox agreement */
input[type="checkbox"] {
  accent-color: var(--nu8th-primary);
}

/* 10-- رسالة نجاح/خطأ مخصّصة */
#formMessage .box {
  border: 2px dashed var(--nu8th-primary);
}

/* 11-- تصغير حجم قائمة الرسالة (Bulma message) داخل المقال */
article.message {
  font-size: 0.9rem;
}

/* 12-- عناصر RTL إضافية */
body[dir="rtl"] .has-icons-left .input,
body[dir="rtl"] .has-icons-left .textarea {
  padding-right: 2.5em;
  padding-left: 0.75em;
}

body[dir="rtl"] .icon.is-left {
  right: 0.75em;
  left: auto;
}

/* 13-- استجابة شاشة صغيرة */
@media (max-width: 350px) {
  .title { font-size: 1.25rem; }
  .subtitle { font-size: 0.8rem; }
  article.message { font-size: 0.8rem; }
}