/* MB MEDIA — Built for MOHAMAD BASSEM MEFTAH — mftahbassem@gmail.com */
/* ============================================================
   components.css — مكتبة المكوّنات الأساسية
   كل الأسماء تبدأ بـ mb- · كل القيم من الطبقة ٣ · كل الاتجاهات منطقية
   ============================================================ */

/* ============================ التخطيط ============================ */

.mb-page {
  inline-size: 100%;
  max-inline-size: var(--mb-width-page);
  margin-inline: auto;
  padding-inline: var(--mb-s-4);
}

/* عمودي بمسافة موحّدة */
.mb-stack { display: flex; flex-direction: column; gap: var(--mb-s-4); }
.mb-stack--sm { gap: var(--mb-s-2); }
.mb-stack--lg { gap: var(--mb-s-6); }
.mb-stack--xl { gap: var(--mb-s-8); }

/* أفقي، ينزل لسطر جديد تلقائياً */
.mb-cluster {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--mb-s-3);
}
.mb-cluster--sm { gap: var(--mb-s-2); }
.mb-cluster--lg { gap: var(--mb-s-5); }
.mb-cluster--between { justify-content: space-between; }
.mb-cluster--center  { justify-content: center; }
.mb-cluster--end     { justify-content: flex-end; }

/* شبكة متجاوبة تلقائياً: عمود → عمودان → ثلاثة/أربعة */
.mb-grid {
  display: grid;
  gap: var(--mb-grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--mb-grid-min), 100%), 1fr));
}
.mb-grid--wide { --mb-grid-min: 320px; }
.mb-grid--tight { --mb-grid-min: 180px; }

.mb-prose { max-inline-size: var(--mb-width-text); }
.mb-section { padding-block: var(--mb-s-8); }

/* ============================ النصوص ============================ */

.mb-title    { font-family: var(--mb-font-heading); font-size: var(--mb-t-4xl); font-weight: var(--mb-w-bold); }
.mb-subtitle { font-family: var(--mb-font-heading); font-size: var(--mb-t-2xl); font-weight: var(--mb-w-semibold); }
.mb-text     { font-size: var(--mb-t-base); color: var(--mb-fg); }
.mb-muted    { color: var(--mb-fg-muted); }
.mb-subtle   { color: var(--mb-fg-subtle); font-size: var(--mb-t-sm); }
.mb-num      { font-family: var(--mb-font-mono); font-variant-numeric: tabular-nums; }

.mb-sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* رابط التخطي للكيبورد */
.mb-skip {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--mb-s-4);
  z-index: var(--mb-z-toast);
  background: var(--mb-accent); color: var(--mb-accent-fg);
  padding: var(--mb-s-3) var(--mb-s-4); border-radius: var(--mb-r-md);
  font-weight: var(--mb-w-semibold); text-decoration: none;
}
.mb-skip:focus-visible { inset-block-start: var(--mb-s-3); }

/* ============================ الأيقونات ============================ */
/* كلها خطية · ترث لون النص · <svg class="mb-icon"><use href="#mb-i-menu"/></svg> */

.mb-icon {
  inline-size: var(--mb-icon-size);
  block-size: var(--mb-icon-size);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--mb-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}
.mb-icon--sm { --mb-icon-size: 16px; }
.mb-icon--lg { --mb-icon-size: 28px; }
.mb-icon--xl { --mb-icon-size: 40px; --mb-icon-stroke: 1.5; }

/* ============================ الأزرار ============================ */

.mb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mb-s-2);
  min-block-size: var(--mb-btn-h);
  min-inline-size: var(--mb-tap);
  padding-inline: var(--mb-btn-pad);
  padding-block: var(--mb-s-2);
  font-family: var(--mb-btn-font);
  font-size: var(--mb-btn-size);
  font-weight: var(--mb-btn-weight);
  line-height: var(--mb-lh-snug);
  border-radius: var(--mb-btn-radius);
  border: var(--mb-btn-border-w) solid transparent;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--mb-dur-fast) var(--mb-ease),
              border-color var(--mb-dur-fast) var(--mb-ease),
              color var(--mb-dur-fast) var(--mb-ease),
              transform var(--mb-dur-fast) var(--mb-ease);
}
.mb-btn:active { transform: translateY(1px); }
.mb-btn:disabled, .mb-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none;
}

/* أساسي — سماوي معبّأ */
.mb-btn--primary {
  background-color: var(--mb-accent);
  color: var(--mb-accent-fg);
  border-color: var(--mb-accent);
}
.mb-btn--primary:hover { background-color: var(--mb-accent-hover); border-color: var(--mb-accent-hover); }

/* ثانوي — إطار سماوي */
.mb-btn--secondary {
  background-color: transparent;
  color: var(--mb-accent);
  border-color: var(--mb-accent);
}
.mb-btn--secondary:hover { background-color: var(--mb-bg-elevated); color: var(--mb-accent-hover); border-color: var(--mb-accent-hover); }

/* شبح — بلا إطار */
.mb-btn--ghost {
  background-color: transparent;
  color: var(--mb-fg-muted);
  border-color: transparent;
}
.mb-btn--ghost:hover { background-color: var(--mb-bg-elevated); color: var(--mb-fg); }

/* ⚠️ CTA — البرتقالي المرجاني. زر واحد فقط بكل صفحة. لا استثناء. */
.mb-btn--cta {
  background-color: var(--mb-cta);
  color: var(--mb-cta-fg);
  border-color: var(--mb-cta);
  font-weight: var(--mb-w-bold);
}
.mb-btn--cta:hover { background-color: var(--mb-cta-hover); border-color: var(--mb-cta-hover); }

.mb-btn--sm    { min-block-size: var(--mb-tap); padding-inline: var(--mb-s-3); font-size: var(--mb-t-sm); }
.mb-btn--block { display: flex; inline-size: 100%; }

/* زر أيقونة مربع — يحترم حد ٤٤ بكسل */
.mb-btn--icon {
  padding-inline: var(--mb-s-2);
  min-inline-size: var(--mb-tap);
  min-block-size: var(--mb-tap);
}

/* ============================ البطاقات ============================ */

.mb-card {
  display: block;
  background-color: var(--mb-card-bg);
  border: 1px solid var(--mb-card-border);
  border-radius: var(--mb-card-radius);
  padding: var(--mb-card-pad);
  color: var(--mb-fg);
  box-shadow: var(--mb-card-shadow);
}
/* بطاقة قابلة للنقر (a أو button) */
a.mb-card, button.mb-card, .mb-card--link {
  text-decoration: none;
  transition: border-color var(--mb-dur-base) var(--mb-ease),
              transform var(--mb-dur-base) var(--mb-ease);
}
a.mb-card:hover, button.mb-card:hover, .mb-card--link:hover {
  border-color: var(--mb-accent);
  transform: translateY(-2px);
}
.mb-card__title {
  font-family: var(--mb-font-heading);
  font-size: var(--mb-t-lg);
  font-weight: var(--mb-w-semibold);
  margin-block-end: var(--mb-s-2);
  color: var(--mb-fg);
}
.mb-card__desc { color: var(--mb-fg-muted); font-size: var(--mb-t-sm); }

/* ============================ الشارات ============================ */

.mb-badge {
  display: inline-flex; align-items: center; gap: var(--mb-s-1);
  padding: var(--mb-badge-pad);
  border-radius: var(--mb-badge-radius);
  font-family: var(--mb-badge-font);
  font-size: var(--mb-badge-size);
  line-height: 1.6;
  background-color: var(--mb-bg-sunken);
  color: var(--mb-fg-muted);
  border: 1px solid var(--mb-border);
  white-space: nowrap;
}
.mb-badge--accent  { color: var(--mb-accent);  border-color: var(--mb-accent); }
.mb-badge--success { color: var(--mb-success); border-color: var(--mb-success); }
.mb-badge--warning { color: var(--mb-warning); border-color: var(--mb-warning); }
.mb-badge--danger  { color: var(--mb-danger);  border-color: var(--mb-danger); }
.mb-badge--info    { color: var(--mb-info);    border-color: var(--mb-info); }

/* ============================ الحقول ============================ */

.mb-field { display: flex; flex-direction: column; gap: var(--mb-s-2); }
.mb-label { font-size: var(--mb-t-sm); font-weight: var(--mb-w-medium); color: var(--mb-fg-muted); }
.mb-hint  { font-size: var(--mb-t-xs); color: var(--mb-fg-subtle); }
.mb-error { font-size: var(--mb-t-xs); color: var(--mb-danger); }

.mb-input, .mb-select, .mb-textarea {
  inline-size: 100%;
  min-block-size: var(--mb-input-h);
  padding-inline: var(--mb-input-pad);
  padding-block: var(--mb-s-2);
  background-color: var(--mb-input-bg);
  color: var(--mb-input-fg);
  border: 1px solid var(--mb-input-border);
  border-radius: var(--mb-input-radius);
  font-family: var(--mb-font-body);
  font-size: var(--mb-t-base);
  transition: border-color var(--mb-dur-fast) var(--mb-ease);
}
.mb-textarea { min-block-size: calc(var(--mb-input-h) * 2.5); resize: vertical; }
.mb-input::placeholder, .mb-textarea::placeholder { color: var(--mb-input-placeholder); }
.mb-input:hover, .mb-select:hover, .mb-textarea:hover { border-color: var(--mb-accent); }
.mb-input:disabled, .mb-select:disabled, .mb-textarea:disabled { opacity: 0.5; cursor: not-allowed; }

.mb-select {
  appearance: none;
  padding-inline-end: var(--mb-s-7);
  /* سهم مرسوم بـ CSS — بلا صورة وبلا طلب خارجي */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
[dir="rtl"] .mb-select {
  background-position: 20px calc(50% + 2px), 14px calc(50% + 2px);
  background-image: linear-gradient(135deg, currentColor 50%, transparent 50%),
                    linear-gradient(45deg, transparent 50%, currentColor 50%);
}

/* مفتاح تبديل — .mb-switch هو الاسم المعتمد، و .mb-toggle اسم قديم مكافئ */
.mb-toggle, .mb-switch {
  display: inline-flex; align-items: center; gap: var(--mb-s-3);
  min-block-size: var(--mb-tap);
  cursor: pointer; user-select: none;
}
.mb-toggle input, .mb-switch input {
  position: absolute; opacity: 0; inline-size: 1px; block-size: 1px;
}
.mb-toggle__track, .mb-switch__track {
  --mb-switch-thumb: calc(var(--mb-switch-h) - 8px);
  position: relative; flex: none;
  inline-size: var(--mb-switch-w); block-size: var(--mb-switch-h);
  border-radius: var(--mb-r-full);
  background-color: var(--mb-bg-sunken);
  border: 1px solid var(--mb-border-strong);
  transition: background-color var(--mb-dur-base) var(--mb-ease);
}
.mb-toggle__track::after, .mb-switch__track::after {
  content: ""; position: absolute;
  inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: var(--mb-switch-thumb); block-size: var(--mb-switch-thumb);
  border-radius: var(--mb-r-full);
  background-color: var(--mb-fg-subtle);
  transition: translate var(--mb-dur-base) var(--mb-ease), background-color var(--mb-dur-base) var(--mb-ease);
}
.mb-toggle input:checked + .mb-toggle__track,
.mb-switch input:checked + .mb-switch__track {
  background-color: var(--mb-accent); border-color: var(--mb-accent);
}
.mb-toggle input:checked + .mb-toggle__track::after,
.mb-switch input:checked + .mb-switch__track::after {
  translate: calc(var(--mb-switch-w) - var(--mb-switch-thumb) - 8px) 0;
  background-color: var(--mb-accent-fg);
}
[dir="rtl"] .mb-toggle input:checked + .mb-toggle__track::after,
[dir="rtl"] .mb-switch input:checked + .mb-switch__track::after {
  translate: calc((var(--mb-switch-w) - var(--mb-switch-thumb) - 8px) * -1) 0;
}
.mb-toggle input:focus-visible + .mb-toggle__track,
.mb-switch input:focus-visible + .mb-switch__track {
  outline: var(--mb-ring-w) solid var(--mb-focus-ring); outline-offset: var(--mb-ring-offset);
}
.mb-switch input:disabled + .mb-switch__track { opacity: 0.5; cursor: not-allowed; }

/* ============================ حالات ============================ */

.mb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--mb-s-3);
  padding: var(--mb-s-8) var(--mb-s-4);
  text-align: center;
  color: var(--mb-fg-subtle);
  border: 1px dashed var(--mb-border-strong);
  border-radius: var(--mb-r-lg);
}

/* شريط فاصل */
.mb-divider { block-size: 1px; background-color: var(--mb-border); border: 0; }

/* ============================ مساعدات ============================ */

.mb-hide { display: none !important; }
.mb-center { text-align: center; }
.mb-flow > * + * { margin-block-start: var(--mb-s-4); }

@media (max-width: 480px) {
  .mb-hide-sm { display: none !important; }
  .mb-page { padding-inline: var(--mb-s-3); }
}