/* ==========================================================================
   modal-shell.css — هيكل النافذة المنبثقة (Modal shell — base)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   نمط opacity + visibility (لا display toggle).
   حبس التركيز وقفل التمرير في modal.js (Batch 7).
   يستخدم .btn--icon (Batch 1) لزر الإغلاق.
   ========================================================================== */

/* الغلاف/الطبقة المعتمة (Scrim) */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background-color: var(--overlay-scrim);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-modal), visibility var(--transition-modal);
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* قفل تمرير الصفحة عند الفتح — تضيف JS الفئة على body (Batch 7) */
body.modal-open {
  overflow: hidden;
}

/* صندوق الحوار (Dialog) */
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  max-height: 90vh;
  overflow: hidden;
  overflow-y: auto;
  padding: var(--space-32);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
}

/* زر الإغلاق (Close) — الزاوية العلوية اليمنى فيزيائيًا (في RTL: inline-start = يمين) */
.modal__close {
  position: absolute;
  inset-block-start: var(--space-16);
  inset-inline-start: var(--space-16);
}

/* فتحات تخطيطية عامة */
.modal__header {
  margin-bottom: var(--space-16);
}
.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.modal__footer {
  margin-top: var(--space-24);
}

/* مُعدِّل صغير (Small) — منبثقات مدمجة */
.modal--sm .modal__dialog {
  max-width: var(--bp-xs);
  text-align: center;
}

/* مُعدِّل متوسط (Medium) — نافذة حجز الخدمة (480px من فيجما) */
.modal--md .modal__dialog {
  max-width: var(--bp-sm);
}