/* ==========================================================================
   contact.css — صفحة "تواصل معنا" (Contact page) — Figma node 42:871
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   قسمان: شريط بيانات التواصل (بريد/هاتف/عنوان) ثم نموذج التواصل بجانب صورة.
   ========================================================================== */

/* ---------- شريط بيانات التواصل (Contact details bar) ---------- */
.contact-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

/* عنصر تواصل واحد: أيقونة (يمين) + نص (يسار) */
.contact-details__item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
/* في RTL: العنصر الأول = يمين → الأيقونة أولًا لتظهر على اليمين */
.contact-details__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.contact-details__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  text-align: start;
}
.contact-details__label {
  font-size: var(--fs-xs);
  color: var(--color-gradient-end);
}
.contact-details__value {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* الفاصل الرأسي بين العناصر — يظهر على سطح المكتب فقط */
.contact-details__divider {
  display: none;
  align-self: stretch;
  width: var(--border-width);
  background-color: var(--color-border);
}

/* الفاصل الأفقي العريض تحت الشريط */
.contact-hr {
  height: var(--border-width);
  background-color: var(--color-border);
  border: 0;
  margin-block: var(--space-40);
}

/* ---------- تخطيط النموذج + الصورة (Form + visual) ---------- */
.contact-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* الصورة الجانبية مع تدرّج الهوية فوقها */
.contact-visual {
  min-height: 260px;
  border-radius: var(--radius-sm);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(74, 14, 20, 0.7) 100%),
    url("../../images/contact-form-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- سطح المكتب ---------- */
@media (min-width: 768px) {
  .contact-details {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-40);
  }
  .contact-details__divider {
    display: block;
    height: 48px;
    align-self: center;
  }
  .contact-layout {
    flex-direction: row;
    align-items: stretch;
  }
  /* في RTL: النموذج أولًا = يمين، الصورة = يسار */
  .contact-layout .contact-form {
    flex: 1 1 55%;
  }
  .contact-visual {
    flex: 1 1 45%;
    min-height: 0;
  }
}