/* ==========================================================================
   form.css — خاصّ بصفحتَي التواصل (EN + AR) وحدهما
   لا يُحمَّل في غيرهما. ممنوع نقل أي شيء منه إلى base.css المشترك.
   يعتمد كليًّا على رموز :root في base.css — لا لون ولا قياس مكتوب بالقيمة.
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}

/* مصيدة السبام — تُخفى بصريًّا دون إخفائها عن الروبوت الذي يقرأ الـ DOM */
.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: flex;
  align-items: baseline;
  gap: 0.8em;
}

.req {
  font-size: 0.85em;
  letter-spacing: 0.12em;
  color: var(--gold-dim);
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--bone);
  background-color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  inline-size: 100%;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

/* خصائص منطقية إلزامًا — النسخة العربية RTL تعتمد عليها */
.field textarea {
  resize: vertical;
  min-block-size: 6em;
  line-height: 1.7;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--bone-dim);
  opacity: 0.55;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  background-color: var(--ink-deep);
}

.field select {
  appearance: none;
  /* السهم مرسوم بخصائص منطقية كي ينقلب مع الاتجاه */
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%),
                    linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  background-position: right 1.2em top 1.4em, right calc(1.2em + 5px) top 1.4em;
}

[dir="rtl"] .field select {
  background-position: left 1.2em top 1.4em, left calc(1.2em + 5px) top 1.4em;
}

.hint {
  font-size: var(--step--1);
  color: var(--bone-dim);
  margin: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
}

.form-privacy {
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--line-soft, var(--line));
  max-inline-size: 60ch;
}

/* رسالة الخطأ — تظهر فوق الفورمة بعد إعادة التوجيه */
.form-note {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  background-color: var(--ink-soft);
  color: var(--bone);
  font-size: var(--step-0);
}

.direct {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}

.direct__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}