/* =========================================================
   الأسواق — مبدّل الدولة وشريط الاقتراح.

   المبدّل مبني على `<details>`، فالفتح والإغلاق والكيبورد وقارئ الشاشة
   من المتصفّح لا من جافاسكربت. وكل ما هنا تنسيق لسلوك يعمل أصلاً بدونه.
   ========================================================= */

/* =========================================================
   ١) المبدّل
   ========================================================= */
.mkt-switch{position:relative;flex:0 0 auto}
.mkt-switch summary{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 10px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--ink-2);
  font-size:.82rem;font-weight:600;line-height:1;
  transition:border-color var(--t-fast,.15s) var(--ease,ease),
    color var(--t-fast,.15s) var(--ease,ease),
    background var(--t-fast,.15s) var(--ease,ease);
}
/* مثلّث الكشف الافتراضي يختلف شكله بين المتصفّحات ولا يقبل تلويناً —
   نخفيه في الصيغتين ونرسم السهم بأنفسنا. */
.mkt-switch summary::-webkit-details-marker{display:none}
.mkt-switch summary::marker{content:''}

.mkt-switch summary:hover{border-color:var(--blue);color:var(--blue)}
.mkt-switch summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/**
 * فوق الترويسة الداكنة يأخذ المبدّل معاملة جارِه: أرضية شفّافة وحدّ خافت.
 * الحبّة البيضاء الصلبة كانت تسحب العين إليها أكثر من زرّ الدعوة الأزرق
 * الذي يُفترض أنه أبرز ما في الترويسة.
 */
.site-head .mkt-switch summary{
  background:rgba(255,255,255,.08);border-color:var(--line-dark);color:rgba(255,255,255,.82);
}
.site-head .mkt-switch summary:hover,
.site-head .mkt-switch[open] summary{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.site-head.is-light .mkt-switch summary{background:var(--tint);border-color:var(--line);color:var(--ink-2)}
.site-head.is-light .mkt-switch summary:hover,
.site-head.is-light .mkt-switch[open] summary{background:var(--paper);border-color:var(--blue);color:var(--blue)}

/**
 * رمز الدولة: وسم مطبعي صغير لا أيقونة.
 *
 * حرفان لاتينيان داخل نصّ عربي — `dir=ltr` تمنع ترتيبهما من الانقلاب،
 * و`tabular-nums` تجعل عرض EG وSA وAE واحداً فلا ترقص القائمة عند فتحها.
 */
.mkt-code{
  direction:ltr;unicode-bidi:isolate;
  flex:0 0 auto;min-width:27px;padding:2px 5px;
  /* حدّ ونصّ باللون الموروث — لا حشو ملوَّن.
     الحشو بـ`currentColor` مع نصّ بلون الورق كان أبيض على أبيض فوق
     الترويسة الداكنة: الرمز موجود في الصفحة وغير مرئي إطلاقاً. الحدّ
     الموروث يعمل على أي أرضية بلا قاعدة لكل حالة. */
  border:1px solid;border-radius:5px;background:none;color:inherit;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;line-height:1.45;
  text-align:center;font-variant-numeric:tabular-nums;
  /* الشفافية محسوبة لا مُقدَّرة: عند ٠٫٦ ينزل تباين الرمز الداكن على
     الورق إلى ٤٫٢:١ — تحت معيار AA. عند ٠٫٧٢ يصير ٥٫٤:١. */
  opacity:.72;
}
.mkt-menu a .mkt-code{opacity:.7}
.mkt-switch summary:hover .mkt-code,.mkt-switch[open] .mkt-code{opacity:.95}
.mkt-menu a:hover .mkt-code,.mkt-menu a[aria-current] .mkt-code{opacity:1}
.mkt-name{white-space:nowrap}
.mkt-caret{width:13px;height:13px;opacity:.6;transition:transform var(--t-fast,.15s) var(--ease,ease)}
.mkt-switch[open] summary{border-color:var(--blue);color:var(--blue)}
.mkt-switch[open] .mkt-caret{transform:rotate(180deg)}

/* ---------------- القائمة ---------------- */
/**
 * الانسدال من حافة البداية — `inset-inline-start` لا `inset-inline-end`.
 *
 * قيس فعلاً بعد الخطأ: الزرّ يشغل ٢٦٠→٣٤٩ والقائمة خرجت ٢٦٠→٤٧٢، أي
 * متدلّية من الحافة اليسرى في صفحة عربية تُقرأ من اليمين. السبب أن
 * `inset-inline-end` في RTL يساوي `left` لا `right` — فتعلّقت القائمة
 * بالحافة المقابلة لبدايتها.
 *
 * والصيغة المنطقية هي الصحيحة هنا رغم الخطأ — لأن القياس نسبةً إلى الزرّ
 * الأب لا إلى نافذة المتصفّح — لكن بالطرف الصحيح منها.
 */
.mkt-menu{
  position:absolute;inset-block-start:calc(100% + 8px);inset-inline-start:0;z-index:60;
  min-width:212px;padding:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m,14px);
  box-shadow:0 22px 50px -20px rgba(4,11,34,.4);
}
.mkt-head{
  margin:0;padding:7px 10px 8px;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink-3);text-transform:uppercase;
}
.mkt-menu a{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:10px;
  color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:600;
  transition:background var(--t-fast,.15s) var(--ease,ease),color var(--t-fast,.15s) var(--ease,ease);
}
.mkt-menu a small{
  margin-inline-start:auto;
  font-size:.74rem;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.mkt-menu a:hover{background:var(--tint);color:var(--blue)}
.mkt-menu a:hover small{color:var(--blue)}
.mkt-menu a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* السوق الحالي يُعلَّم بعلامة لا بلون وحده: اللون وحده لا يصل لمن لا
   يميّزه، ولا يظهر إطلاقاً في الطباعة أو الوضع عالي التباين. */
.mkt-menu a[aria-current]{background:var(--blue-50,var(--tint));color:var(--blue)}
.mkt-menu a[aria-current]::after{
  content:'✓';margin-inline-start:6px;font-weight:800;
}
/*
 * لا تغيير في ترتيب عناصر الصف المحدَّد.
 *
 * كان هنا `order:-1` يقفز بالعملة إلى أول السطر في الصف الحالي وحده،
 * فيظهر «ج.م … مصر» بينما بقية الصفوف «مصر … ر.س». اختلاف ترتيب في صف
 * واحد يُقرأ كخلل لا كتمييز.
 */

/* ---------------- داخل الدرج على الموبايل ---------------- */
/**
 * القائمة المطلقة داخل درج بعرض محدود كانت تخرج من حافته وتُقصّ. داخل
 * الدرج تصير القائمة جزءاً من التدفّق العادي فتتمدّد بعرضه.
 */
.mkt-switch--drawer{width:100%}
.mkt-switch--drawer summary{width:100%;height:40px;justify-content:space-between;border-radius:12px}
.mkt-switch--drawer .mkt-caret{margin-inline-start:auto}
.mkt-switch--drawer .mkt-menu{
  position:static;inset:auto;min-width:0;width:100%;
  margin-block-start:6px;box-shadow:none;
}
/* الدرج داكن الأرضية على الجوال — والحدود الفاتحة تختفي فوقه تماماً. */
.mkt-switch--drawer summary{background:rgba(255,255,255,.06);border-color:var(--line-dark,rgba(255,255,255,.16));color:#fff}
.mkt-switch--drawer .mkt-menu{background:rgba(255,255,255,.05);border-color:var(--line-dark,rgba(255,255,255,.16))}
.mkt-switch--drawer .mkt-menu a{color:rgba(255,255,255,.86)}
.mkt-switch--drawer .mkt-menu a:hover{background:rgba(255,255,255,.1);color:#fff}
.mkt-switch--drawer .mkt-head{color:rgba(255,255,255,.55)}
.site-head.is-light .mkt-switch--drawer summary{background:var(--paper);border-color:var(--line);color:var(--ink-2)}
.site-head.is-light .mkt-switch--drawer .mkt-menu{background:var(--paper);border-color:var(--line)}
.site-head.is-light .mkt-switch--drawer .mkt-menu a{color:var(--ink)}
.site-head.is-light .mkt-switch--drawer .mkt-head{color:var(--ink-3)}

@media (max-width:900px){
  /* الاسم يختفي ويبقى الرمز — الترويسة ضيّقة والرمز وحده مفهوم.
     ويُستثنى الدرج: هناك مساحة كاملة والاسم هو ما يُقرأ. */
  .mkt-switch:not(.mkt-switch--drawer) .mkt-name{display:none}
  .mkt-switch:not(.mkt-switch--drawer) summary{padding:0 8px}
}

/**
 * على الشاشة الضيّقة تنسدل القائمة إلى الداخل لا إلى الحافة.
 *
 * قيس عند ٣٧٥px: الزرّ يجلس عند ٩٦ بعرض ٦٥، وقائمة بعرض ٢١٢ متدلّية من
 * حافة البداية تمتدّ إلى ‑٥١ — أي ربعها خارج الشاشة ولا يُقرأ ولا يُضغط.
 * وعكس الطرف هنا يجعلها تتّجه نحو وسط الشاشة في اللغتين معاً: الأدوات
 * تجلس عند حافة البداية في العربية وحافة النهاية في الإنجليزية، فالاتجاه
 * «إلى الداخل» واحد في الحالتين.
 */
@media (max-width:700px){
  /*
   * بلا قيد `.site-head`.
   *
   * قيس على لوحة العميل: المبدّل هناك داخل `.app-head` لا `.site-head`،
   * فلم تنطبق القاعدة وخرجت القائمة إلى ‑٣٧. أي قاعدة تصحيح موضع يجب أن
   * تتبع المكوّن نفسه لا المكان الذي وُضع فيه أول مرّة.
   */
  .mkt-menu:not(.mkt-switch--drawer .mkt-menu){
    inset-inline-start:auto;inset-inline-end:0;
    min-width:0;width:max-content;max-width:calc(100vw - 24px);
  }
}

/* =========================================================
   ٢) شريط الاقتراح
   ========================================================= */
/**
 * أعلى الصفحة لا أسفلها: الأسفل مزدحم بزرّ واتساب وزرّ زكي وزرّ العودة
 * لأعلى وشريط الإشعارات — وخامسٌ هناك يعني تراكباً مضموناً.
 *
 * ولا يزيح المحتوى: `position:fixed` تُبقي التخطيط ثابتاً، فلا يقفز ما
 * يقرؤه الزائر تحت عينه بعد ثانية من فتح الصفحة.
 */
.mkt-hint{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:9700;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2vw,18px);flex-wrap:wrap;
  padding:11px clamp(14px,4vw,28px);
  /* `--navy-900` لا `--navy`: الثيم لا يعرّف الثاني إطلاقاً (المتغيّرات
     المعرَّفة هي 950 و900 و800 و700). ومتغيّر غير معرَّف يجعل الإعلان
     كله غير صالح، فيخرج الشريط بأرضية شفّافة ونصّ أبيض فوق الصفحة —
     موجود في الصفحة ولا يُقرأ منه حرف. قيس فعلاً: rgba(0,0,0,0). */
  background:var(--navy-900,#071231);color:#fff;
  box-shadow:0 10px 30px -14px rgba(4,11,34,.6);
  transform:translateY(-100%);
  transition:transform .32s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.mkt-hint.is-on{transform:none}
.mkt-hint[hidden]{display:none}

.mkt-hint p{margin:0;font-size:.88rem;line-height:1.6}
.mkt-hint b{font-weight:800}
.mkt-hint .mkt-sub{display:block;font-size:.8rem;opacity:.78;margin-block-start:2px}

.mkt-hint-act{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mkt-hint-act a,
.mkt-hint-act button{
  font:inherit;font-size:.83rem;font-weight:700;line-height:1;
  padding:9px 15px;border-radius:999px;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background var(--t-fast,.15s) var(--ease,ease),
    color var(--t-fast,.15s) var(--ease,ease),
    border-color var(--t-fast,.15s) var(--ease,ease);
}
.mkt-hint-act a{background:#fff;color:var(--navy-900,#071231);border:1px solid #fff}
.mkt-hint-act a:hover{background:var(--blue-light,#7FB0FF);border-color:var(--blue-light,#7FB0FF)}
.mkt-hint-act button{background:none;color:#fff;border:1px solid rgba(255,255,255,.34)}
.mkt-hint-act button:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.mkt-hint-act a:focus-visible,
.mkt-hint-act button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/**
 * الترويسة اللاصقة تنزل بمقدار ارتفاع الشريط بدل أن يختفي أحدهما خلف
 * الآخر. الارتفاع يُقاس في markets.js ويُكتب هنا — لأنه يتغيّر بالتفاف
 * النصّ على الشاشات الضيّقة ولا يمكن تثبيته برقم.
 */
html.mkt-hint-on .site-head{
  transform:translateY(var(--mkt-hint-h,0px));
  transition:transform .32s var(--ease-out,cubic-bezier(.16,1,.3,1));
}

@media (max-width:640px){
  .mkt-hint{justify-content:flex-start;padding-block:10px}
  .mkt-hint-act{width:100%}
  .mkt-hint-act a{flex:1;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .mkt-hint,html.mkt-hint-on .site-head{transition:none}
  .mkt-caret{transition:none}
}

@media print{
  .mkt-hint,.mkt-switch{display:none!important}
}