/* ===========================
   Design Tokens — iOS26 Look
   =========================== */
:root{
  /* Color System (light-only) */
  --bg:              #F6F7FB;
  --surface:         #FFFFFF;
  --surface-2:       #FAFBFF;
  --line:            color-mix(in oklab, #0f172a 12%, #fff 88%);
  --text:            #0F172A;
  --muted:           #475569;

  /* Brand (أخضر الهوية) */
  --brand:           #399775;     /* الأساسي */
  --brand-700:       #246e53;     /* عند المرور/الضغط */
  --brand-50:        #E8F3F2;

  /* Accents */
  --blue:            #2563EB;
  --red:             #EF4444;
  --amber:           #F59E0B;
  --green:           #399775;

  /* Radii — iOS26 pillish */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 24px;

  /* Spacing scale */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem;

  /* Typography */
  --fs-xs: clamp(11px, .76vw, 12px);
  --fs-sm: clamp(12px, .9vw, 13px);
  --fs-md: clamp(14px, 1.1vw, 15px);
  --fs-lg: clamp(16px, 1.5vw, 18px);
  --fs-xl: clamp(20px, 2.2vw, 24px);
  --fs-2xl: clamp(26px, 3.2vw, 32px);

  --fw-regular: 500;
  --fw-bold:    800;

  /* Elevation / glass (خفيف جدًا) */
  --glass-bg:  rgba(255,255,255,.72);
  --hairline:  1px solid color-mix(in oklab, #0f172a 14%, transparent);

  /* Bars & tabs */
  --bar-h:     62px;
  --tab-h:     66px;

  /* Motion */
  --dur-fast:  .14s;
  --dur-med:   .22s;

  /* Safe Areas */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Layout tokens (موحّد لكل الصفحات) */
  --page-max: 1160px;           /* أقصى عرض للمحتوى */
  --page-pad: var(--sp-4);      /* الهوامش الداخلية للحاوية */
  --card-mobile-w: 95%;         /* عرض الكرت على الجوال افتراضيًا */
}

@media (max-width: 380px){
  :root{ --card-mobile-w: 93%; } /* على الشاشات الصغيرة جدًا */
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0s; --dur-med: 0s; }
}

/* ===========================
   Base / Reset (gentle)
   =========================== */
*{ box-sizing: border-box; }
*::before,*::after{ box-sizing: inherit; }

html, body{ margin:0; padding:0; }

html[dir="rtl"] body,
html[dir="ltr"] body{
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}

img{ max-width:100%; height:auto; }

a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }

:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand) 70%, #000 30%);
  outline-offset: 2px;
}

/* ===========================
   Unified Containers — موحّد لكل الصفحات
   =========================== */
.container,
.page-container,
.rb-container{
  max-width: var(--page-max);
  padding-inline: var(--page-pad);
  margin-inline: auto;
  width: 100%;
}

.hidden{ display: none !important; }

/* Utilities */
.text-muted{ color: var(--muted); }
.hairline{ border: var(--hairline); }
.round-lg{ border-radius: var(--r-lg); }
.round-xl{ border-radius: var(--r-xl); }
.p-4{ padding: var(--sp-4); }
.mb-3{ margin-bottom: var(--sp-3); }
.mb-6{ margin-bottom: var(--sp-6); }
.mb-8{ margin-bottom: var(--sp-8); }

/* RTL/LTR images direction-safe */
[dir="rtl"] .flip-rtl{ transform: scaleX(-1); }

/* ===========================
   Cards — جوال 93–95% + توسيط
   =========================== */
.card,
.rb-card,
.card--surface{
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 color-mix(in oklab, #0f172a 8%, transparent);
  width: 100%; /* على الديسكتوب/التابلت ضمن الحاوية */
}

@media (max-width: 768px){
  .card,
  .rb-card,
  .card--surface{
    width: var(--card-mobile-w); /* 95% أو 93% حسب العرض */
    margin-inline: auto;         /* تمركز */
  }
}

.card img{
  display:block;
  width:100%;
  height:auto;
  border-radius: calc(var(--r-lg) - 4px);
}

.card .content{ padding: var(--sp-5); }

/* ===========================
   Cards Grid — مرن حسب المقاس
   =========================== */
.cards-grid{
  display: grid;
  grid-template-columns: 1fr;     /* عمود واحد مبدئيًا */
  gap: var(--sp-4);
}

@media (min-width: 900px){
  .cards-grid{
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-6);
  }
  .cards-grid .card.span-6{ grid-column: span 6; } /* مثال: نصف عرض الصفحة */
}