@charset "UTF-8";

/* ============================================================
   بريق كلين — ملف الأنماط الوحيد.

   الدرس الذي دفعنا ثمنه ست مرات: قاعدة أعلى تخصيصاً تُبطل ما بعدها
   صامتةً، فتبدو القاعدة مكتوبة وهي ميتة. `.page-body a` أخفت أسماء
   المدن، و`header.header .header__actions` أبقت زراً كان يجب أن يختفي.

   العلاج معماري لا تصحيحي: طبقات التتالي.

     @layer tokens, base, layout, components, utilities;

   الطبقة اللاحقة تعلو على السابقة **بغضّ النظر عن التخصيص**. فقاعدة
   `.btn` في components تعلو على `nav.main ul li a` في base مهما بلغ
   تخصيص الأخيرة. لا حاجة إلى !important ولا إلى تكديس المحدِّدات.

   قاعدة ملزمة: لا يُكتب أي شيء خارج طبقة. ما يُكتب خارجها يعلو على
   الطبقات كلها ويعيد المشكلة.
   ============================================================ */

@layer tokens, base, layout, components, utilities;

/* ============================================================
   TOKENS — كل قيمة تُكتب هنا مرة واحدة
   ============================================================ */

@layer tokens {
  :root {
    /* الألوان الأساسية — نهارية زاهية، مستقلة عن ألوان الشعار */
    --aqua:        #0EA5B7;
    --aqua-2:      #22C7D6;
    --aqua-deep:   #067A8C;
    --ocean:       #0A6E8A;
    --teal:        #14B8A6;
    --sky:         #0EA5E9;
    --lime:        #22C55E;
    --green:       #16A34A;
    --gold:        #FBBF24;
    --amber:       #F59E0B;
    --plum:        #7C6BD8;
    --coral:       #FF6B35;
    --coral-2:     #FF8355;

    /* الفعل — كل زر رئيسي في الموقع */
    --cta:         var(--coral);
    --cta-2:       var(--coral-2);
    --cta-ink:     #FFFFFF;

    /* الأسطح */
    --bg:          #FFFFFF;
    --mist:        #F0FAFC;
    --mist-2:      #E4F4F8;
    --surface:     #FFFFFF;
    --line:        #D6E8EE;
    --line-soft:   #E8F3F6;

    /* النصوص — داكنة مقروءة لا رمادية شاحبة */
    --ink:         #0B2B3A;
    --body:        #1F4451;
    --muted:       #55747F;
    --on-dark:     #EAF7FA;
    --on-dark-mut: #B4D6E0;

    /* الفوتر */
    --foot:        #08303D;
    --foot-2:      #0B4051;

    /* نغمات شفافة — تُستخدم لخلفيات البطاقات الملوّنة */
    --aqua-soft:   rgba(14,165,183,.11);
    --ocean-soft:  rgba(10,110,138,.11);
    --teal-soft:   rgba(20,184,166,.12);
    --sky-soft:    rgba(14,165,233,.11);
    --lime-soft:   rgba(34,197,94,.12);
    --green-soft:  rgba(22,163,74,.11);
    --gold-soft:   rgba(251,191,36,.16);
    --amber-soft:  rgba(245,158,11,.14);
    --plum-soft:   rgba(124,107,216,.12);
    --coral-soft:  rgba(255,107,53,.12);

    /* الحالات */
    --ok:          #16A34A;
    --warn:        #F59E0B;
    --danger:      #E5484D;
    --wa:          #25D366;
    --wa-2:        #1EBE5A;
    --call:        #0EA5B7;

    /* الخطوط */
    --font: "Tajawal", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --fs-xs:   13px;
    --fs-sm:   14.5px;
    --fs-base: 16px;
    --fs-lg:   clamp(17px, 1.7vw, 19px);
    --fs-h3:   clamp(18px, 2vw, 22px);
    --fs-h2:   clamp(21px, 2.6vw, 30px);
    --fs-h1:   clamp(26px, 3.8vw, 44px);
    --lh:      1.95;
    --lh-tight: 1.4;

    /* المسافات */
    --sp-1: 6px;   --sp-2: 10px;  --sp-3: 14px;  --sp-4: 18px;
    --sp-5: 24px;  --sp-6: 32px;  --sp-7: 44px;  --sp-8: 64px;
    --sec: clamp(48px, 6vw, 88px);

    /* الأشكال */
    --r-xs: 10px;  --r-sm: 14px;  --r: 18px;  --r-lg: 24px;  --r-pill: 999px;
    --wrap: 1240px;
    --wrap-pad: clamp(16px, 4vw, 28px);

    /* الظلال — خفيفة، فالهوية نهارية */
    --sh-1: 0 2px 8px rgba(11,43,58,.06);
    --sh-2: 0 8px 24px rgba(11,43,58,.09);
    --sh-3: 0 18px 44px rgba(11,43,58,.13);
    --sh-cta: 0 8px 22px rgba(255,107,53,.32);

    --ease: cubic-bezier(.22,.61,.36,1);
    --dur: .2s;
  }

  /* النغمات — تُستدعى كصنف على أي عنصر فيرث أبناؤه اللون.
     في رابيد برو فيكس كانت القوالب تستدعي tone-blue وملف الأنماط
     يعرّف tone-a فقط. هنا الاسم واحد في الموضعين. */
  .tone-aqua  { --tone: var(--aqua);      --tone-soft: var(--aqua-soft);  --tone-ink: #FFFFFF; }
  .tone-ocean { --tone: var(--ocean);     --tone-soft: var(--ocean-soft); --tone-ink: #FFFFFF; }
  .tone-teal  { --tone: var(--teal);      --tone-soft: var(--teal-soft);  --tone-ink: #FFFFFF; }
  .tone-sky   { --tone: var(--sky);       --tone-soft: var(--sky-soft);   --tone-ink: #FFFFFF; }
  .tone-lime  { --tone: var(--lime);      --tone-soft: var(--lime-soft);  --tone-ink: #FFFFFF; }
  .tone-green { --tone: var(--green);     --tone-soft: var(--green-soft); --tone-ink: #FFFFFF; }
  .tone-gold  { --tone: var(--amber);     --tone-soft: var(--gold-soft);  --tone-ink: #3A2A00; }
  .tone-amber { --tone: var(--amber);     --tone-soft: var(--amber-soft); --tone-ink: #FFFFFF; }
  .tone-plum  { --tone: var(--plum);      --tone-soft: var(--plum-soft);  --tone-ink: #FFFFFF; }
  .tone-coral { --tone: var(--coral);     --tone-soft: var(--coral-soft); --tone-ink: #FFFFFF; }
}

/* ============================================================
   BASE — العناصر العارية
   ============================================================ */

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  /* الإخفاء الأفقي على html وحده.
     وضعه على body أيضاً يجعل المتصفح يحتسب overflow-y بـ auto،
     فيصير body حاوية تمرير مستقلة ويتخلّف الرصيف الثابت. */
  html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--body);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: var(--lh);
    direction: rtl;
    text-align: right;
    overflow-x: visible;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    color: var(--ink);
    font-weight: 800;
    line-height: var(--lh-tight);
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }

  p { margin: 0 0 var(--sp-4); }

  a { color: var(--aqua-deep); text-decoration: none; transition: color var(--dur) var(--ease); }
  a:hover { color: var(--coral); }

  img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }

  ul, ol { margin: 0 0 var(--sp-4); padding-inline-start: 1.4em; }
  li { margin-bottom: var(--sp-1); }

  table { width: 100%; border-collapse: collapse; }

  button { font-family: inherit; cursor: pointer; }

  input, select, textarea {
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--ink);
  }

  /* الإخفاء البصري — بـ clip-path لا بإزاحة سالبة.
     في RTL تساوي inset-inline-start قيمة right، فإزاحة -9999px
     تدفع العنصر 9999 بكسل داخل المستند لا خارجه، وتسحب معها عرض
     الصفحة كلها. هذه كانت علّة الانحراف في الموقع السابق بأكمله. */
  .sr-only,
  .skip-link,
  .honey {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link:focus {
    position: fixed;
    inset-inline-start: 12px;
    top: 12px;
    z-index: 2000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 22px;
    overflow: visible;
    clip-path: none;
    background: var(--cta);
    color: var(--cta-ink);
    border-radius: var(--r-xs);
    font-weight: 800;
  }

  :focus-visible {
    outline: 3px solid var(--aqua);
    outline-offset: 2px;
    border-radius: 4px;
  }

  ::selection { background: var(--aqua); color: #fff; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* ============================================================
   LAYOUT — الهيكل
   ============================================================ */

@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
  }
  .wrap--narrow { max-width: 880px; }

  .sec { padding-block: var(--sec); }
  .sec--mist { background: var(--mist); }
  .sec--tint { background: linear-gradient(180deg, var(--mist), var(--bg)); }
  .sec--edge { border-block: 1px solid var(--line-soft); }

  /* رأس القسم */
  .sechead { max-width: 760px; margin-bottom: var(--sp-6); }
  .sechead--center { margin-inline: auto; text-align: center; }
  .sechead__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--tone-soft, var(--aqua-soft));
    border: 1px solid var(--tone, var(--aqua));
    color: var(--tone, var(--aqua-deep));
    font-size: var(--fs-xs);
    font-weight: 800;
  }
  .sechead h2 { margin-bottom: var(--sp-2); }
  .sechead p { margin: 0; color: var(--muted); font-size: var(--fs-lg); }

  /* الشبكات — min-width:0 يمنع الأبناء من تمديد الشبكة خارج الشاشة */
  .grid { display: grid; gap: var(--sp-4); min-width: 0; }
  .grid > * { min-width: 0; }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  /* عمودان: محتوى + شريط جانبي */
  .split { display: grid; gap: var(--sp-6); align-items: center; min-width: 0; }
  .split > * { min-width: 0; }
  @media (min-width: 900px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--wide { grid-template-columns: 1.15fr .85fr; }
    .split--flip > :first-child { order: 2; }
  }

  .withside { display: grid; gap: var(--sp-6); min-width: 0; }
  @media (min-width: 1040px) { .withside { grid-template-columns: minmax(0,1fr) 330px; align-items: start; } }

  .stack > * + * { margin-top: var(--sp-3); }
  .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
}

/* ============================================================
   COMPONENTS — القطع القابلة لإعادة الاستخدام
   ============================================================ */

@layer components {

  /* ---------- الأزرار ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 13px 24px;
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
                border-color var(--dur) var(--ease), color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.98); }
  .btn--sm { padding: 9px 16px; font-size: var(--fs-xs); }
  .btn--lg { padding: 16px 32px; font-size: var(--fs-base); }
  .btn--full { width: 100%; }
  .btn .ico { flex: none; }

  .btn--cta { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); box-shadow: var(--sh-cta); }
  .btn--cta:hover { background: var(--cta-2); border-color: var(--cta-2); color: var(--cta-ink); }

  .btn--aqua { background: var(--aqua); border-color: var(--aqua); color: #fff; }
  .btn--aqua:hover { background: var(--aqua-deep); border-color: var(--aqua-deep); color: #fff; }

  .btn--outline { background: transparent; border-color: var(--line); color: var(--ink); }
  .btn--outline:hover { background: var(--mist); border-color: var(--aqua); color: var(--aqua-deep); }

  .btn--ghost { background: var(--mist); border-color: transparent; color: var(--ink); }
  .btn--ghost:hover { background: var(--mist-2); color: var(--aqua-deep); }

  .btn--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
  .btn--wa:hover { background: var(--wa-2); border-color: var(--wa-2); color: #fff; }

  .btn--call { background: var(--call); border-color: var(--call); color: #fff; }
  .btn--call:hover { background: var(--aqua-deep); border-color: var(--aqua-deep); color: #fff; }

  /* على خلفية داكنة */
  .on-dark .btn--outline { border-color: rgba(255,255,255,.34); color: var(--on-dark); }
  .on-dark .btn--outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

  /* ---------- الرقائق ---------- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--tone-soft, var(--mist));
    border: 1px solid var(--tone, var(--line));
    color: var(--tone, var(--body));
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
  }
  .chip--solid { background: var(--tone, var(--aqua)); border-color: var(--tone, var(--aqua)); color: var(--tone-ink, #fff); }
  .chip--link:hover { background: var(--tone, var(--aqua)); border-color: var(--tone, var(--aqua)); color: var(--tone-ink, #fff); }
  .on-dark .chip { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); color: var(--on-dark); }
  .on-dark .chip--link:hover { background: var(--cta); border-color: var(--cta); color: #fff; }

  /* ---------- البطاقات ---------- */
  .card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--tone, var(--aqua)); }
  .card--tone { border-top: 4px solid var(--tone, var(--aqua)); }
  .card__media { position: relative; aspect-ratio: 3/2; background: var(--mist); }
  .card__media img { width: 100%; height: 100%; object-fit: cover; }
  .card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
  .card__title { margin: 0; font-size: var(--fs-h3); }
  .card__text { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
  .card__foot { margin-top: auto; padding-top: var(--sp-2); }

  /* أيقونة داخل مربع ملوّن */
  .icobox {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: var(--r-xs);
    background: var(--tone-soft, var(--aqua-soft));
    border: 1px solid var(--tone, var(--aqua));
    color: var(--tone, var(--aqua-deep));
  }
  .icobox--solid { background: var(--tone, var(--aqua)); border-color: var(--tone, var(--aqua)); color: var(--tone-ink, #fff); }
  .icobox--sm { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
  .icobox--lg { width: 58px; height: 58px; flex-basis: 58px; border-radius: var(--r-sm); }

  /* ---------- قائمة تأشير ---------- */
  .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .checks li {
    position: relative;
    margin: 0;
    padding-inline-start: 34px;
    color: var(--body);
    font-size: var(--fs-sm);
    line-height: 1.8;
  }
  .checks li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--tone, var(--lime));
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat,
             linear-gradient(#000,#000);
    -webkit-mask-composite: xor;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat,
                 linear-gradient(#000,#000);
            mask-composite: exclude;
  }
  .checks li b { color: var(--ink); }

  /* ---------- التنبيهات ---------- */
  .note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 14px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--tone, var(--aqua));
    background: var(--tone-soft, var(--aqua-soft));
    color: var(--body);
    font-size: var(--fs-sm);
    line-height: 1.85;
  }
  .note .ico { flex: none; margin-top: 3px; color: var(--tone, var(--aqua-deep)); }
  .note--warn  { --tone: var(--amber);  --tone-soft: var(--amber-soft); }
  .note--ok    { --tone: var(--green);  --tone-soft: var(--green-soft); }
  .note--info  { --tone: var(--sky);    --tone-soft: var(--sky-soft); }
  .note--alert { --tone: var(--danger); --tone-soft: rgba(229,72,77,.1); }

  /* ---------- الجداول ---------- */
  .tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
  }
  .ptable { min-width: 420px; }
  .ptable th {
    padding: 14px 16px;
    background: var(--mist);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 800;
    text-align: start;
    white-space: nowrap;
  }
  .ptable td {
    padding: 13px 16px;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-sm);
  }
  .ptable tbody tr:nth-child(even) td { background: rgba(14,165,183,.035); }
  .ptable .num { color: var(--aqua-deep); font-weight: 800; white-space: nowrap; }

  /* ---------- الأسئلة ---------- */
  .faq { display: grid; gap: var(--sp-2); }
  .faq__i {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .faq__i[open] { border-color: var(--aqua); }
  .faq__i summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 15px 18px;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
  }
  .faq__i summary::-webkit-details-marker { display: none; }
  .faq__i summary::after {
    content: "+";
    flex: none;
    color: var(--aqua);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
  }
  .faq__i[open] summary::after { content: "−"; }
  .faq__i[open] summary { border-bottom: 1px solid var(--line-soft); }
  .faq__i p { margin: 0; padding: 15px 18px 18px; color: var(--body); font-size: var(--fs-sm); }

  /* ---------- الخطوات ---------- */
  .steps { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .step {
    position: relative;
    padding: 26px 18px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }
  .step__n {
    position: absolute;
    top: -14px;
    inset-inline-start: 18px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--cta);
    color: var(--cta-ink);
    font-size: var(--fs-sm);
    font-weight: 900;
  }
  .step b { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-1); color: var(--ink); font-size: var(--fs-base); }
  .step p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.85; }

  /* ---------- النماذج ---------- */
  .field { display: grid; gap: 6px; }
  .field > label { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
  .field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r-xs);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--aqua);
    box-shadow: 0 0 0 4px var(--aqua-soft);
  }
  .field textarea { min-height: 120px; resize: vertical; }
  .field__hint { color: var(--muted); font-size: var(--fs-xs); }
  .formrow { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .formrow--wide { grid-column: 1 / -1; }

  /* ---------- الفراغ ---------- */
  .empty {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    background: var(--mist);
    border: 1px dashed var(--line);
    border-radius: var(--r);
  }
  .empty h3 { margin-bottom: var(--sp-2); }
  .empty p { color: var(--muted); }
}

/* ============================================================
   UTILITIES — آخر طبقة، فتعلو على كل ما سبق
   ============================================================ */

@layer utilities {
  .on-dark { color: var(--on-dark); }
  .on-dark h1, .on-dark h2, .on-dark h3, .on-dark b { color: #fff; }
  .on-dark p { color: var(--on-dark-mut); }
  .on-dark a { color: var(--on-dark); }
  .on-dark a:hover { color: #fff; }

  .t-ink   { color: var(--ink); }
  .t-muted { color: var(--muted); }
  .t-cta   { color: var(--cta); }
  .t-tone  { color: var(--tone, var(--aqua)); }

  .center { text-align: center; }
  .ltr    { direction: ltr; unicode-bidi: isolate; }
  .nowrap { white-space: nowrap; }
  .anywhere { overflow-wrap: anywhere; }

  .mt-0 { margin-top: 0; }
  .mb-0 { margin-bottom: 0; }
  .mt-4 { margin-top: var(--sp-4); }
  .mt-5 { margin-top: var(--sp-5); }
  .mt-6 { margin-top: var(--sp-6); }

  .hide { display: none; }
  @media (max-width: 767px)  { .hide-sm { display: none; } }
  @media (min-width: 768px)  { .only-sm { display: none; } }
  @media (max-width: 1039px) { .hide-md { display: none; } }
}

/* ============================================================
   FOOTER — يُكتب داخل طبقة components كبقية المكوّنات
   ============================================================ */

@layer components {

  .ftr {
    position: relative;
    margin-top: var(--sec);
    background: linear-gradient(170deg, var(--foot-2), var(--foot));
    color: var(--on-dark);
  }
  .ftr::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--aqua), var(--teal), var(--lime), var(--gold), var(--coral));
  }

  /* ---------- شريط التواصل ---------- */
  .ftr__top { background: rgba(255,255,255,.045); border-bottom: 1px solid rgba(255,255,255,.1); }
  .ftr__contact {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    padding-block: var(--sp-4);
  }
  .fcontact {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--on-dark);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .fcontact:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); transform: translateY(-2px); color: #fff; }
  .fcontact__ic {
    display: grid;
    place-items: center;
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 12px;
    color: #fff;
  }
  .fcontact--call .fcontact__ic { background: var(--aqua); }
  .fcontact--wa   .fcontact__ic { background: var(--wa); }
  .fcontact--mail .fcontact__ic { background: var(--sky); }
  .fcontact--book .fcontact__ic { background: var(--cta); }
  .fcontact__t { display: grid; gap: 2px; min-width: 0; }
  .fcontact__t b { color: #fff; font-size: var(--fs-sm); }
  .fcontact__t span { color: var(--on-dark-mut); font-size: var(--fs-xs); overflow-wrap: anywhere; }

  /* ---------- الشبكة الرئيسية ---------- */
  .ftr__grid {
    display: grid;
    gap: var(--sp-6);
    padding-top: var(--sp-7);
    grid-template-columns: 1.5fr 1fr 1.1fr;
  }
  @media (max-width: 980px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { .ftr__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

  .fcol--about { max-width: 460px; }
  .ftr__logo { max-width: 230px; margin-bottom: var(--sp-3); }
  .ftr p { color: #CBE3EC; font-size: var(--fs-sm); line-height: 1.9; }
  .ftr p b { color: #fff; }

  .fcol h3 {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    color: #fff; font-size: var(--fs-base);
  }
  .fh {
    display: grid; place-items: center;
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 10px;
    background: var(--tone-soft, rgba(255,255,255,.1));
    border: 1px solid var(--tone, rgba(255,255,255,.24));
    color: var(--tone, #fff);
  }

  .flist { list-style: none; margin: 0; padding: 0; }
  .flist li { margin: 0; }
  .flist li a {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 7px 0;
    color: #E4F2F7; font-size: var(--fs-sm); font-weight: 600;
  }
  .fe {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .flist li a:hover { color: #fff; }
  .flist li a:hover .fe { background: var(--cta); border-color: var(--cta); color: #fff; }
  /* ألوان دوّارة تمنع العمود من أن يبدو رمادياً واحداً */
  .flist li:nth-child(6n+1) .fe { color: #4ED8E8; border-color: rgba(14,165,183,.5);  background: rgba(14,165,183,.16); }
  .flist li:nth-child(6n+2) .fe { color: #7BE0A6; border-color: rgba(34,197,94,.5);   background: rgba(34,197,94,.16); }
  .flist li:nth-child(6n+3) .fe { color: #FFB07A; border-color: rgba(255,107,53,.5);  background: rgba(255,107,53,.16); }
  .flist li:nth-child(6n+4) .fe { color: #7EC8F5; border-color: rgba(14,165,233,.5);  background: rgba(14,165,233,.16); }
  .flist li:nth-child(6n+5) .fe { color: #FFD983; border-color: rgba(251,191,36,.5);  background: rgba(251,191,36,.18); }
  .flist li:nth-child(6n+6) .fe { color: #B6ACF0; border-color: rgba(124,107,216,.55);background: rgba(124,107,216,.2); }

  .ftr__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--sp-3); }
  .ftr .chip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #DDEEF4; }
  .ftr .chip .ico { color: var(--lime); }

  .ftime {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 11px 14px;
    border-radius: var(--r-xs);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.13);
    color: #DDEEF4; font-size: var(--fs-sm);
  }
  .ftime .ico { color: var(--gold); flex: none; }

  .fbox {
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--tone-soft, rgba(255,255,255,.05));
    border: 1px solid var(--tone, rgba(255,255,255,.18));
    border-inline-start: 3px solid var(--tone, var(--cta));
  }
  .fbox b { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: 6px; color: #fff; font-size: var(--fs-sm); }
  .fbox b .ico { color: var(--tone, var(--cta)); }
  .fbox p { margin-bottom: var(--sp-2); font-size: var(--fs-xs); line-height: 1.8; }

  .fnotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .fnotes li { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #C4DFE9; font-size: var(--fs-xs); line-height: 1.7; }
  .fnotes .ico { flex: none; margin-top: 2px; color: var(--aqua-2); }

  /* ---------- النطاقات ---------- */
  .ftr__band { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.1); }
  .ftr__band h3 {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    color: #fff; font-size: var(--fs-base);
  }
  .ftr__band--two { display: grid; gap: var(--sp-6); grid-template-columns: 1fr 1fr; }
  @media (max-width: 860px) { .ftr__band--two { grid-template-columns: 1fr; } }

  /* الخدمات كبطاقات */
  .ffam { margin-bottom: var(--sp-4); }
  .ffam__t {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: var(--sp-2);
    padding: 5px 13px;
    border-radius: var(--r-pill);
    background: var(--tone-soft, rgba(255,255,255,.08));
    border: 1px solid var(--tone, rgba(255,255,255,.2));
    color: var(--tone, #fff);
    font-size: var(--fs-xs); font-weight: 800;
  }
  .fsvc { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
  .fsvc__i {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px;
    border-radius: var(--r-xs);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.13);
    border-inline-start: 3px solid var(--tone, var(--aqua));
    color: #EEF7FA;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .fsvc__ic {
    display: grid; place-items: center;
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 9px;
    background: var(--tone, var(--aqua));
    color: #fff;
  }
  .fsvc__n { font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; }
  .fsvc__i:hover { background: rgba(255,255,255,.1); border-color: var(--tone, var(--aqua)); transform: translateY(-2px); color: #fff; }
  @media (max-width: 560px) { .fsvc { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 400px) { .fsvc { grid-template-columns: 1fr; } }

  /* الأدوات والأدلة */
  .ftools { display: flex; flex-wrap: wrap; gap: 8px; }
  .ftool {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.15);
    color: #E4F2F7; font-size: var(--fs-xs); font-weight: 700;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .ftool .ico { color: var(--aqua-2); transition: color var(--dur) var(--ease); }
  .ftool:hover { background: var(--cta); border-color: var(--cta); color: #fff; }
  .ftool:hover .ico { color: #fff; }

  /* المدن */
  .fcity { margin-bottom: var(--sp-3); }
  .fcity__t {
    display: inline-block; margin-bottom: 8px;
    padding: 5px 13px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    color: var(--gold); font-size: var(--fs-xs); font-weight: 800;
  }
  .fcity__g { display: flex; flex-wrap: wrap; gap: 7px; }
  .fcity__g .chip { font-size: 12.5px; padding: 6px 11px; }
  .fcity__g .chip .ico { color: var(--aqua-2); }

  /* الشريط القانوني */
  .ftr__legal {
    margin-top: var(--sp-6);
    padding-block: var(--sp-4);
    background: rgba(0,0,0,.22);
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .ftr__legal .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }
  .ftr__legal p { margin: 0; color: #B7D6E1; font-size: var(--fs-xs); }
  .flegal { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .flegal a { color: #B7D6E1; font-size: var(--fs-xs); }
  .flegal a:hover { color: var(--gold); }
}

/* ============================================================
   HEADER · DRAWER · DOCK
   ============================================================ */

@layer components {

  /* ---------- الشريط العلوي ---------- */
  .hdr__top {
    background: linear-gradient(90deg, var(--aqua-deep), var(--aqua));
    color: #fff;
    font-size: var(--fs-xs);
  }
  .hdr__top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 40px; }
  .hdr__fact { display: flex; align-items: center; gap: 7px; margin: 0; color: #EAFCFF; font-weight: 600; }
  .hdr__fact .ico { color: var(--gold); flex: none; }
  .hdr__top-links { display: flex; align-items: center; gap: var(--sp-4); }
  .hdr__top-links a, .hdr__hours { display: inline-flex; align-items: center; gap: 6px; color: #E6FBFF; font-weight: 600; }
  .hdr__top-links a:hover { color: var(--gold); }
  .hdr__hours .ico, .hdr__top-links .ico { color: rgba(255,255,255,.72); }

  /* ---------- الشريط الرئيسي ---------- */
  .hdr { position: sticky; top: 0; z-index: 500; }
  .hdr__main { background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--sh-1); }
  .hdr__in { display: flex; align-items: center; gap: var(--sp-4); min-height: 74px; }

  .logo { flex: none; }
  .logo__img { max-height: 52px; width: auto; }

  .hdr__actions { flex: none; margin-inline-start: auto; }

  /* ---------- التنقّل ---------- */
  .nav { flex: 1; min-width: 0; }
  .nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .nav__list > li { margin: 0; position: relative; }
  .nav__list > li > a, .nav__btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 13px;
    border: 0; background: transparent;
    border-radius: var(--r-xs);
    color: var(--ink); font-size: var(--fs-sm); font-weight: 700;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav__list > li > a:hover, .nav__btn:hover,
  .nav__has:hover .nav__btn { background: var(--mist); color: var(--aqua-deep); }
  .nav__btn .ico { transition: transform var(--dur) var(--ease); }
  .nav__has:hover .nav__btn .ico { transform: rotate(180deg); }

  .nav__panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 10;
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    min-width: 620px;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav__panel--wide { grid-template-columns: repeat(4, minmax(180px, 1fr)); min-width: 780px; }
  .nav__has:hover .nav__panel,
  .nav__has:focus-within .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__col { display: grid; gap: 3px; align-content: start; }
  .nav__ct {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 5px; padding: 4px 11px;
    border-radius: var(--r-pill);
    background: var(--tone-soft, var(--mist));
    color: var(--tone, var(--aqua-deep));
    font-size: 12px; font-weight: 800;
    justify-self: start;
  }
  .nav__item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px;
    border-radius: var(--r-xs);
    color: var(--body); font-size: var(--fs-sm); font-weight: 600;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav__ic {
    display: grid; place-items: center;
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 8px;
    background: var(--tone-soft, var(--mist));
    color: var(--tone, var(--aqua-deep));
  }
  .nav__item:hover { background: var(--mist); color: var(--ink); }
  .nav__item:hover .nav__ic { background: var(--tone, var(--aqua)); color: #fff; }
  .nav__foot { grid-column: 1 / -1; padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); }
  .nav__foot a { display: inline-flex; align-items: center; gap: 7px; color: var(--cta); font-size: var(--fs-sm); font-weight: 800; }

  /* ---------- زر القائمة ---------- */
  .burger {
    display: none;
    align-items: center; gap: 7px;
    padding: 10px 15px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink); font-size: var(--fs-xs); font-weight: 800;
  }
  .burger:hover { background: var(--mist); border-color: var(--aqua); color: var(--aqua-deep); }

  /* الرأس على الجوال: الشعار وزر القائمة فقط.
     المحدِّدات هنا بنفس شكل ما قد يعلوها، والطبقة تحسم الباقي. */
  @media (max-width: 1100px) {
    .nav { display: none; }
    .burger { display: inline-flex; margin-inline-start: auto; }
    .hdr__actions { margin-inline-start: 0; }
  }
  @media (max-width: 860px) {
    .hdr__fact { display: none; }
    .hdr__top-in { justify-content: flex-end; }
    .hdr__hours { display: none; }
  }
  @media (max-width: 720px) {
    .hdr__actions { display: none; }
    .hdr__in { min-height: 64px; gap: var(--sp-2); }
    .logo__img { max-height: 42px; }
  }
  @media (max-width: 520px) {
    .hdr__top-links a span:not(.ico) { display: none; }
    .burger__t { display: none; }
    .burger { padding: 10px; }
  }

  /* ---------- الدرج ---------- */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 900;
    /* الاقتطاع ضروري: اللوح المغلق مزاح بـ translateX(100%) فيبرز
       خارج النافذة ويصنع تمريراً أفقياً في الصفحة كلها. */
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }
  .drawer.is-open { visibility: visible; pointer-events: auto; }

  .drawer__veil {
    position: absolute; inset: 0;
    background: rgba(6,30,40,.62);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .drawer.is-open .drawer__veil { opacity: 1; }

  .drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, var(--foot-2), var(--foot));
    transform: translateX(-100%); /* RTL: اللوح يخرج من اليمين */
    transition: transform .26s var(--ease);
  }
  [dir="rtl"] .drawer__panel { transform: translateX(100%); }
  .drawer.is-open .drawer__panel { transform: translateX(0); }

  .drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .drawer__logo { max-width: 165px; }
  .drawer__x {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 11px;
    background: rgba(255,255,255,.07);
    color: #fff;
  }
  .drawer__x:hover { background: var(--cta); border-color: var(--cta); }

  .drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: grid; gap: var(--sp-3); }
  .drawer__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  .drawer__grp {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .drawer__grp summary {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    color: #fff; font-size: var(--fs-sm); font-weight: 800;
    cursor: pointer; list-style: none;
  }
  .drawer__grp summary::-webkit-details-marker { display: none; }
  .drawer__gi {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 9px;
    background: var(--tone, var(--aqua));
    color: #fff;
  }
  .drawer__grp a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px 9px 44px;
    color: #DCEEF4; font-size: var(--fs-sm);
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .drawer__grp a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .drawer__grp a .ico { color: var(--aqua-2); flex: none; }

  .drawer__flat { display: grid; }
  .drawer__flat a {
    padding: 11px 4px;
    color: #DCEEF4; font-size: var(--fs-sm); font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .drawer__flat a:hover { color: var(--gold); }

  /* ---------- رصيف الإجراءات ---------- */
  .dock {
    position: fixed;
    z-index: 400;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 6px;
    padding: 8px;
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    box-shadow: var(--sh-3);
    backdrop-filter: blur(10px);
  }
  .dock__k {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 66px; padding: 8px 7px 6px;
    border-radius: 15px;
    border: 1px solid var(--line-soft);
    background: var(--mist);
    color: var(--ink);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .dock__ic {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 12px;
    background: var(--tone, var(--aqua));
    color: #fff;
  }
  .dock__t { font-size: 11.5px; font-weight: 800; line-height: 1.25; text-align: center; }
  .dock__t .num { direction: ltr; unicode-bidi: isolate; letter-spacing: .2px; }
  .dock__k:hover { transform: translateY(-3px); background: #fff; border-color: var(--tone, var(--aqua)); }

  .dock__k--call { --tone: var(--call); }
  .dock__k--wa   { --tone: var(--wa); }
  .dock__k--book { --tone: var(--cta); background: var(--coral-soft); border-color: rgba(255,107,53,.3); }
  .dock__k--book .dock__t { color: var(--cta); }
  .dock__k--svc  { --tone: var(--sky); }
  .dock__k--top  { --tone: var(--muted); }

  @media (max-width: 1100px) {
    .dock { inset-inline: 8px; justify-content: space-between; }
    .dock__k { flex: 1 1 0; min-width: 0; }
    .dock__t { font-size: 10.5px; }
    body { padding-bottom: 104px; }
  }
  @media (min-width: 1101px) {
    .dock { inset-inline-end: 16px; flex-direction: column; }
    .dock__k { min-width: 0; width: 60px; }
  }
  @media (max-width: 380px) {
    .dock__ic { width: 34px; height: 34px; flex-basis: 34px; }
    .dock__t { font-size: 10px; }
  }
}

/* ============================================================
   FRONT PAGE
   ============================================================ */

@layer components {

  /* ---------- الهيرو ---------- */
  .hero { padding-block: clamp(36px, 5vw, 72px); background: linear-gradient(160deg, var(--mist), var(--bg) 62%); }
  .hero__text { min-width: 0; }
  .hero h1 { margin-block: var(--sp-3); }
  .hero__lead { max-width: 60ch; color: var(--muted); font-size: var(--fs-lg); }

  .hero__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
  .hquick {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px 8px 8px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink); font-size: var(--fs-xs); font-weight: 800;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .hquick__ic {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: var(--r-pill);
    background: var(--tone, var(--aqua));
    color: #fff;
  }
  .hquick:hover { transform: translateY(-2px); border-color: var(--tone, var(--aqua)); box-shadow: var(--sh-1); color: var(--ink); }

  .hero__btns { gap: var(--sp-2); }

  .hero__visual {
    position: relative;
    aspect-ratio: 7/5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--mist-2);
    box-shadow: var(--sh-3);
  }
  .hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
  @media (max-width: 899px) {
    .hero__visual { order: -1; aspect-ratio: 1/1; margin-bottom: var(--sp-4); }
    .hero .split { gap: var(--sp-4); }
  }

  /* ---------- شريط الثقة ---------- */
  .trust { padding-block: var(--sp-5); border-block: 1px solid var(--line-soft); background: var(--surface); }
  .trust__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .trust__i { display: flex; align-items: flex-start; gap: var(--sp-3); }
  .trust__i b { display: block; margin-bottom: 3px; color: var(--ink); font-size: var(--fs-sm); }
  .trust__i p { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.75; }

  /* ---------- عائلات الخدمات ---------- */
  .fam { margin-bottom: var(--sp-7); }
  .fam:last-child { margin-bottom: 0; }
  .fam__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .fam__head h3 { margin: 0; font-size: var(--fs-h3); white-space: nowrap; }
  .fam__line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tone, var(--aqua)), transparent); }

  .svc {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--tone, var(--aqua));
    border-radius: var(--r);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .svc__ic {
    display: grid; place-items: center;
    width: 50px; height: 50px;
    border-radius: var(--r-sm);
    background: var(--tone-soft, var(--aqua-soft));
    color: var(--tone, var(--aqua));
  }
  .svc b { color: var(--ink); font-size: var(--fs-h3); }
  .svc__d { color: var(--muted); font-size: var(--fs-sm); line-height: 1.85; flex: 1; }
  .svc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--tone, var(--aqua)); }
  .svc:hover .svc__ic { background: var(--tone, var(--aqua)); color: #fff; }

  .morelink {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cta); font-size: var(--fs-sm); font-weight: 800;
  }
  .morelink .ico { transition: transform var(--dur) var(--ease); }
  .svc:hover .morelink .ico, a:hover > .morelink .ico { transform: translateX(-4px); }

  /* ---------- صندوق الصورة ---------- */
  .mediabox {
    position: relative;
    aspect-ratio: 3/2;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--mist);
    box-shadow: var(--sh-2);
    border: 1px solid var(--line);
  }
  .mediabox::after {
    content: "";
    position: absolute;
    inset-inline-start: 0; bottom: 0;
    width: 100%; height: 5px;
    background: var(--tone, var(--aqua));
  }
  .mediabox img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- لماذا نحن ---------- */
  .whygrid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: var(--sp-4); }
  .whyi { display: flex; align-items: flex-start; gap: 10px; }
  .whyi b { display: block; color: var(--ink); font-size: var(--fs-sm); }
  .whyi p { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.7; }

  /* ---------- الدول ---------- */
  .countries { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
  .ccard { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
  .ccard__h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .ccard__flag { font-size: 24px; line-height: 1; }
  .ccard__h b { color: var(--ink); font-size: var(--fs-base); }
  .ccard__h .chip { margin-inline-start: auto; }
  .ccard__g { display: flex; flex-wrap: wrap; gap: 7px; }

  /* ---------- النداء الختامي ---------- */
  .finalcta { padding-block: var(--sec); }
  .finalcta__in {
    display: grid; gap: var(--sp-5); align-items: center;
    padding: clamp(24px, 4vw, 48px);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--aqua-deep), var(--foot));
    overflow: hidden;
  }
  @media (min-width: 900px) { .finalcta__in { grid-template-columns: 1.05fr .95fr; } }
  .finalcta__in h2 { color: #fff; }
  .finalcta__in p { max-width: 52ch; }
  .finalcta__img { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-3); }
  .finalcta__img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

  /* ---------- مسار التنقّل ---------- */
  .crumbs { padding-block: var(--sp-3); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .crumbs li { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: var(--fs-xs); }
  .crumbs li + li::before { content: "/"; color: var(--line); }
  .crumbs a { color: var(--aqua-deep); font-weight: 600; }
  .crumbs a:hover { color: var(--cta); }
}

/* ============================================================
   ARCHIVES — صفحة الخدمة وصفحة المدينة
   ============================================================ */

@layer components {

  .page { padding-block: var(--sp-4) var(--sec); }

  .ahead {
    position: relative;
    margin-bottom: var(--sp-5);
    padding: clamp(20px, 3vw, 36px);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--tone-soft, var(--aqua-soft)), var(--mist) 70%);
    border: 1px solid var(--line);
  }
  .ahead::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 20px; bottom: 20px;
    width: 5px;
    border-radius: 5px;
    background: var(--tone, var(--aqua));
  }
  .ahead__body { padding-inline-start: var(--sp-4); }
  .ahead h1 { margin-block: var(--sp-3) var(--sp-2); }
  .ahead__lead { max-width: 76ch; color: var(--body); font-size: var(--fs-lg); }
  .ahead .chip { background: var(--surface); }

  .mediabox--wide { aspect-ratio: 21/9; margin-bottom: var(--sp-5); }
  @media (max-width: 720px) { .mediabox--wide { aspect-ratio: 16/9; } }

  .ablock { margin-bottom: var(--sp-7); }
  .ablock__h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .ablock__lead { max-width: 80ch; color: var(--muted); margin-bottom: var(--sp-4); }
  .ablock .steps, .ablock .faq, .ablock .grid, .ablock .checks { margin-top: var(--sp-3); }

  /* مجموعات المدن */
  .cgroup { margin-bottom: var(--sp-4); }
  .cgroup__t {
    display: inline-block;
    margin-bottom: var(--sp-2);
    padding: 5px 14px;
    border-radius: var(--r-pill);
    background: var(--ocean-soft);
    border: 1px solid var(--ocean);
    color: var(--ocean);
    font-size: var(--fs-xs); font-weight: 800;
  }
  .cgroup__g { display: flex; flex-wrap: wrap; gap: 7px; }

  /* النداء داخل الأرشيف */
  .acta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    padding: clamp(20px, 3vw, 34px);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--aqua-deep), var(--foot));
  }
  .acta b { display: block; margin-bottom: 6px; color: #fff; font-size: var(--fs-h2); }
  .acta p { margin: 0; max-width: 56ch; }
  @media (max-width: 640px) { .acta .row { width: 100%; } .acta .btn { flex: 1 1 100%; } }

  /* الترقيم */
  .pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--sp-5); }
  .pager .page-numbers {
    display: grid; place-items: center;
    min-width: 40px; height: 40px; padding-inline: 12px;
    border-radius: var(--r-xs);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink); font-weight: 700; font-size: var(--fs-sm);
  }
  .pager .page-numbers:hover { background: var(--mist); border-color: var(--aqua); color: var(--aqua-deep); }
  .pager .page-numbers.current { background: var(--cta); border-color: var(--cta); color: #fff; }
}

/* ============================================================
   ARTICLE · SIDEBAR · SEARCH
   ============================================================ */

@layer components {

  .article { min-width: 0; }
  .artmeta { margin-top: var(--sp-3); }
  .arttags { margin-block: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
  .arttags .ico { color: var(--muted); }

  /* شريط الاتصال داخل المقال */
  .callbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    border-radius: var(--r);
    background: var(--tone-soft, var(--aqua-soft));
    border: 1px solid var(--tone, var(--aqua));
  }
  .callbar__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--tone, var(--aqua-deep)); font-size: var(--fs-xs); font-weight: 800; }
  .callbar__t b { display: block; margin-block: 4px; color: var(--ink); font-size: clamp(24px, 3.4vw, 34px); letter-spacing: .5px; }
  .callbar__t p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
  @media (max-width: 620px) { .callbar .row { width: 100%; } .callbar .btn { flex: 1 1 100%; } }

  /* متن المقال */
  .entry { color: var(--body); font-size: var(--fs-lg); line-height: 2.05; }
  .entry > * { max-width: 100%; }
  .entry h2 { margin-top: var(--sp-7); padding-inline-start: var(--sp-3); border-inline-start: 5px solid var(--tone, var(--aqua)); }
  .entry h3 { margin-top: var(--sp-6); color: var(--aqua-deep); }
  .entry h4 { margin-top: var(--sp-5); }
  .entry a { color: var(--aqua-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(14,165,183,.42); }
  .entry a:hover { color: var(--cta); text-decoration-color: var(--cta); }
  .entry a.btn, .entry a.chip { text-decoration: none; font-weight: 800; }
  .entry img { border-radius: var(--r-sm); margin-block: var(--sp-4); }
  .entry ul, .entry ol { padding-inline-start: 1.5em; }
  .entry li { margin-bottom: var(--sp-2); }
  .entry li::marker { color: var(--aqua); font-weight: 800; }
  .entry blockquote {
    margin: var(--sp-5) 0; padding: var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--mist);
    border-inline-start: 5px solid var(--gold);
    color: var(--ink); font-size: var(--fs-base);
  }
  .entry blockquote p:last-child { margin-bottom: 0; }
  .entry code { padding: 2px 7px; border-radius: 6px; background: var(--mist-2); font-size: .92em; }
  .entry pre { padding: var(--sp-3); border-radius: var(--r-sm); background: var(--mist); overflow-x: auto; }
  .entry table { margin-block: var(--sp-4); }
  .entry th { padding: 12px 14px; background: var(--mist); color: var(--ink); text-align: start; font-weight: 800; }
  .entry td { padding: 11px 14px; border-top: 1px solid var(--line-soft); }
  .entry hr { margin-block: var(--sp-6); border: 0; border-top: 1px solid var(--line); }
  .entry--page { font-size: var(--fs-base); }

  /* الشريط الجانبي */
  .side { display: grid; gap: var(--sp-3); align-content: start; position: sticky; top: 96px; }
  @media (max-width: 1039px) { .side { position: static; } }

  .sidecard {
    padding: var(--sp-4);
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--tone, var(--aqua));
  }
  .sidecard h3 {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: var(--sp-3);
    color: var(--ink); font-size: var(--fs-base);
  }
  .sidecard h3 .ico { color: var(--tone, var(--aqua)); }
  .sidecard p { color: var(--muted); font-size: var(--fs-sm); }
  .sidecard--cta { background: linear-gradient(160deg, var(--coral-soft), var(--surface)); }

  .sidelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .sidelist li { margin: 0; }
  .sidelist a {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px;
    border-radius: var(--r-xs);
    color: var(--body); font-size: var(--fs-sm); font-weight: 600;
  }
  .sidelist__ic {
    display: grid; place-items: center;
    width: 27px; height: 27px; flex: 0 0 27px;
    border-radius: 8px;
    background: var(--tone-soft, var(--mist));
    color: var(--tone, var(--aqua-deep));
  }
  .sidelist a:hover { background: var(--mist); color: var(--ink); }
  .sidelist a:hover .sidelist__ic { background: var(--tone, var(--aqua)); color: #fff; }

  /* نموذج البحث */
  .sform { display: flex; gap: 8px; }
  .sform input {
    flex: 1; min-width: 0;
    padding: 12px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
  }
  .sform input:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 4px var(--aqua-soft); }
}

/* ============================================================
   BOOKING FORM
   ============================================================ */

@layer components {

  .bform { display: grid; gap: var(--sp-4); }
  .bform .req { color: var(--cta); }
  .bform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
  .bform__foot .btn { flex: none; }
  .bform__note {
    display: flex; align-items: center; gap: 7px;
    margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.7;
  }
  .bform__note .ico { color: var(--ok); flex: none; }

  .bform__msg { display: none; padding: 14px 16px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; }
  .bform__msg.is-ok   { display: block; background: var(--green-soft); border: 1px solid var(--ok);     color: #0B5C2E; }
  .bform__msg.is-bad  { display: block; background: rgba(229,72,77,.1); border: 1px solid var(--danger); color: #8B1E22; }
  .bform__msg.is-wait { display: block; background: var(--aqua-soft);   border: 1px solid var(--aqua);   color: var(--aqua-deep); }

  .bform button[disabled] { opacity: .62; cursor: not-allowed; transform: none; }

  /* صندوق الطلب في الصفحات */
  .bookbox {
    padding: clamp(20px, 3vw, 34px);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-2);
  }
  .bookbox__h { margin-bottom: var(--sp-4); }
  .bookbox__h h2 { margin-bottom: var(--sp-2); }
  .bookbox__h p { margin: 0; color: var(--muted); }

  @media (max-width: 640px) {
    .bform__foot { flex-direction: column; align-items: stretch; }
    .bform__foot .btn { width: 100%; }
  }
}

@layer components {
  /* بعد نجاح الإرسال: تُطوى الحقول ويبقى التأكيد وحده مرئياً.
     النموذج الممتلئ بعد الإرسال يوهم الزائر أن الطلب لم يصل فيعيده. */
  .bform[data-brq-done] .formrow,
  .bform[data-brq-done] > .field,
  .bform[data-brq-done] .bform__foot { display: none; }
  .bform[data-brq-done] .bform__msg { font-size: var(--fs-base); text-align: center; padding: var(--sp-5); }
}

@layer components {
  /* محتوى الصفحات المبنيّ داخل .entry */
  .entry .page-lead {
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--mist);
    border-inline-start: 5px solid var(--aqua);
    color: var(--body);
    font-size: var(--fs-lg);
    line-height: 2.05;
  }
  .entry .ablock { margin-bottom: var(--sp-7); }
  .entry .ablock__h { margin-top: 0; padding-inline-start: 0; border-inline-start: 0; }
  .entry .card__title { font-size: var(--fs-base); }
  .entry .checks li { padding-inline-start: 34px; }
  .entry .checks li::marker { content: none; }
  .entry .note { margin-block: var(--sp-4); }
  .entry .acta { margin-top: var(--sp-6); }
  .entry .acta p { margin-bottom: 0; }
  .entry .tablewrap table { margin: 0; }
  .entry .tablewrap th { background: var(--mist); }
  .entry .steps li { margin: 0; }
}

/* ============================================================
   TOOLS — الأدوات التفاعلية
   ============================================================ */

@layer components {

  .toolbox {
    padding: clamp(18px, 3vw, 32px);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-2);
  }

  .tool { display: grid; gap: var(--sp-4); }
  .tool__form { display: grid; gap: var(--sp-3); }

  .tool__out {
    display: grid;
    gap: 4px;
    padding: var(--sp-4);
    border-radius: var(--r);
    background: linear-gradient(150deg, var(--aqua-deep), var(--foot));
    color: #fff;
    text-align: center;
  }
  .tool__label { color: #A9DCE6; font-size: var(--fs-xs); font-weight: 800; }
  .tool__value { color: #fff; font-size: clamp(24px, 4vw, 38px); line-height: 1.25; }
  .tool__note { margin: 0; color: #CDE9EF; font-size: var(--fs-sm); }

  .tool__checks {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 0;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--mist);
  }
  .tool__checks legend { padding-inline: 8px; color: var(--ink); font-size: var(--fs-sm); font-weight: 800; }
  .tool__checks label { display: flex; align-items: center; gap: 8px; color: var(--body); font-size: var(--fs-sm); cursor: pointer; }
  .tool__checks input { width: 18px; height: 18px; accent-color: var(--aqua); }

  .tool__plan { min-height: 60px; }

  .tool__verdict {
    padding: var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--tone, var(--ok));
    background: var(--tone-soft, var(--green-soft));
  }
  .tool__verdict.is-ok   { --tone: var(--ok);    --tone-soft: var(--green-soft); }
  .tool__verdict.is-warn { --tone: var(--amber); --tone-soft: var(--amber-soft); }
  .tool__verdict b { display: block; margin-bottom: 6px; color: var(--ink); font-size: var(--fs-h3); }
  .tool__verdict p { margin: 0; color: var(--body); font-size: var(--fs-sm); }

  .tool__bar {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--mist);
    border: 1px solid var(--line);
    position: sticky; top: 90px; z-index: 5;
  }
  .tool__bar > span { color: var(--ink); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
  .tool__bar-track { flex: 1; height: 9px; border-radius: 99px; background: var(--mist-2); overflow: hidden; }
  .tool__bar-track > span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--aqua), var(--lime)); transition: width .25s var(--ease); }

  .tool__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .tool__list li {
    margin: 0;
    border-radius: var(--r-xs);
    border: 1px solid var(--line);
    background: var(--surface);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .tool__list label { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; cursor: pointer; }
  .tool__list input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--lime); }
  .tool__list li.is-done { background: var(--green-soft); border-color: var(--ok); }
  .tool__list li.is-done span { color: var(--muted); text-decoration: line-through; }

  @media print {
    .hdr, .ftr, .dock, .side, .btn, .tool__bar, .crumbs, .note { display: none !important; }
    .toolbox { border: 0; box-shadow: none; padding: 0; }
    .tool__list li { break-inside: avoid; }
  }
}