/* ═══════════════════════════════════════════════════════════
   GM Kit · خريطة المنشأ
   كل لون قابل للتغيير من سمات الشورت كود أو من CSS الثيم عبر
   المتغيّرات أدناه. القيم الافتراضية هي ألوان Golden Meat.
   ═══════════════════════════════════════════════════════════ */

.gmk-map{
  --gmk-map-accent:#8B1E1E;                 /* الأقواس والنقاط والتمييز */
  --gmk-map-land:rgba(20,18,16,.22);        /* نقاط اليابسة */
  --gmk-map-dest:#141210;                   /* نقطة الوجهة */
  --gmk-map-ink:#141210;                    /* النصوص */
  --gmk-map-muted:rgba(20,18,16,.7);
  --gmk-map-surface:#F5F1EA;                /* خلفية القسم */
  --gmk-map-card:#FFFFFF;                   /* خلفية البطاقة */
  --gmk-map-hair:rgba(20,18,16,.14);
  --gmk-map-gut:clamp(20px,5vw,48px);
  --gmk-map-pad:clamp(72px,8vw,132px);
  --gmk-map-radius:5px;
  --gmk-map-ease:cubic-bezier(.16,1,.3,1);
  --gmk-map-label:17px;

  position:relative;
  background:var(--gmk-map-surface);
  padding-block:var(--gmk-map-pad);
  overflow:hidden;
  color:var(--gmk-map-ink);
}

/* وهج خفيف خلف الرسم يفصله عن الأرضية */
.gmk-map::before{
  content:"";position:absolute;z-index:0;
  inset-block-start:38%;inset-inline-start:50%;
  width:min(900px,90vw);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(circle,rgb(from var(--gmk-map-accent) r g b / .07),transparent 62%);
  pointer-events:none;
}
@supports not (color:rgb(from #000 r g b / .5)){
  .gmk-map::before{background:radial-gradient(circle,rgba(126,27,27,.07),transparent 62%)}
}

/* ── الترويسة ───────────────────────────────────────────── */
.gmk-map__head{
  position:relative;z-index:1;
  width:100%;max-width:1320px;margin:0 auto clamp(38px,5vw,68px);
  padding-inline:var(--gmk-map-gut);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(24px,4vw,60px);flex-wrap:wrap;
}
.gmk-map__eyebrow{
  margin:0 0 10px;font-size:.75rem;font-weight:500;letter-spacing:.06em;
  color:var(--gmk-map-accent);
}
.gmk-map__title{margin:0;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.3;color:inherit}
.gmk-map__sub{margin:0;max-width:44ch;font-size:.9375rem;font-weight:300;color:var(--gmk-map-muted)}

/* ── المسرح ─────────────────────────────────────────────── */
.gmk-map__stage{position:relative;z-index:1;width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gmk-map-gut)}
.gmk-map__wrap{position:relative}
.gmk-map__svg{width:100%;height:auto;display:block;overflow:visible}

/* ── طبقات الرسم ────────────────────────────────────────── */
.gmk-map__land{fill:none;stroke:var(--gmk-map-land);stroke-width:3.1;stroke-linecap:round}
.gmk-map__hi{
  fill:none;stroke:var(--gmk-map-accent);stroke-width:3.6;stroke-linecap:round;
  opacity:.55;transition:opacity .45s var(--gmk-map-ease);
}
.gmk-map__hi.is-active{opacity:1}
.gmk-map__hi--dest{stroke:var(--gmk-map-dest);opacity:.45}

.gmk-map__arc{
  fill:none;stroke:var(--gmk-map-accent);stroke-width:1.3;opacity:.8;
  stroke-linecap:round;
}

.gmk-map__node{cursor:pointer}
.gmk-map__node:focus{outline:none}
.gmk-map__node:focus-visible .gmk-map__dot{stroke:var(--gmk-map-ink);stroke-width:2}
.gmk-map__dot{
  fill:var(--gmk-map-accent);
  transform-box:fill-box;transform-origin:center;
  transition:transform .35s var(--gmk-map-ease);
}
.gmk-map__halo{
  fill:none;stroke:var(--gmk-map-accent);stroke-width:1;opacity:.5;
  transform-box:fill-box;transform-origin:center;
  animation:gmk-map-pulse 3s var(--gmk-map-ease) infinite;
}
.gmk-map__node:hover .gmk-map__dot,
.gmk-map__node.is-active .gmk-map__dot{transform:scale(1.4)}
.gmk-map__node text{
  fill:var(--gmk-map-ink);opacity:.85;
  font-size:var(--gmk-map-label);font-weight:500;
  pointer-events:none;
  /* حدّ بلون الأرضية خلف الحروف ليبقى الاسم مقروءاً فوق النقاط */
  paint-order:stroke;stroke:var(--gmk-map-surface);stroke-width:5px;stroke-linejoin:round;
}
.gmk-map__node:hover text,
.gmk-map__node.is-active text{opacity:1}

.gmk-map__node--dest{cursor:default}
.gmk-map__node--dest .gmk-map__dot{fill:var(--gmk-map-dest)}
.gmk-map__node--dest .gmk-map__halo{stroke:var(--gmk-map-dest)}
.gmk-map__node--dest text{opacity:1;font-weight:600}

@keyframes gmk-map-pulse{
  0%{transform:scale(.6);opacity:.6}
  70%,100%{transform:scale(2.1);opacity:0}
}

/* ── بطاقة الدولة ───────────────────────────────────────── */
.gmk-map__panel{
  position:absolute;z-index:3;
  inset-block-start:6%;
  width:min(320px,80vw);
  background:var(--gmk-map-card);
  border:1px solid var(--gmk-map-hair);
  border-radius:var(--gmk-map-radius);
  padding:26px 26px 22px;
  box-shadow:0 18px 44px rgba(20,18,16,.10);
}
.gmk-map__panel--start{inset-inline-start:1%}
.gmk-map__panel--end{inset-inline-end:1%}
.gmk-map__panel[hidden]{display:none}
.gmk-map__card[hidden]{display:none}
.gmk-map__card{animation:gmk-map-lift .5s var(--gmk-map-ease)}
@keyframes gmk-map-lift{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* زر الإغلاق في حافة النهاية — أعلى اليسار في RTL. وضعه في حافة
   البداية يسقطه فوق السطر التمهيدي للبطاقة. */
.gmk-map__close{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;
  width:28px;height:28px;display:grid;place-items:center;
  padding:0;background:none;border:0;cursor:pointer;
  color:var(--gmk-map-muted);
}
.gmk-map__close:hover{color:var(--gmk-map-ink)}
.gmk-map__close svg{width:15px;height:15px}

.gmk-map__kicker{margin:0 0 6px;font-size:.6875rem;font-weight:500;color:var(--gmk-map-accent)}
.gmk-map__name{margin:0 0 12px;font-size:1.05rem;font-weight:700;color:var(--gmk-map-ink)}
.gmk-map__desc{
  margin:0;padding-block-end:18px;
  font-size:.875rem;font-weight:300;line-height:1.85;color:var(--gmk-map-muted);
  border-block-end:1px solid var(--gmk-map-hair);
}
.gmk-map__label{margin:16px 0 10px;font-size:.6875rem;font-weight:500;color:var(--gmk-map-muted)}
.gmk-map__cats{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.gmk-map__cats li{
  font-size:.75rem;color:var(--gmk-map-ink);
  border:1px solid var(--gmk-map-hair);border-radius:4px;padding:4px 11px;
}
.gmk-map__meta{
  display:flex;align-items:center;justify-content:space-between;
  margin:20px 0 0;padding-block-start:16px;
  border-block-start:1px solid var(--gmk-map-hair);
  font-size:.75rem;color:var(--gmk-map-muted);
}
.gmk-map__meta b{font-size:1.05rem;font-weight:700;color:var(--gmk-map-accent)}

/* ── قائمة الدول ────────────────────────────────────────── */
.gmk-map__legend{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:clamp(22px,3vw,40px) 0 0;padding:0;list-style:none;
}
.gmk-map__chip{
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:.8125rem;font-weight:400;
  color:var(--gmk-map-muted);cursor:pointer;
  background:none;border:1px solid var(--gmk-map-hair);border-radius:4px;
  padding:8px 16px;
  transition:color .35s var(--gmk-map-ease),border-color .35s var(--gmk-map-ease),background .35s var(--gmk-map-ease);
}
.gmk-map__chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gmk-map-accent);flex:none}
.gmk-map__chip:hover,
.gmk-map__chip.is-active{color:var(--gmk-map-ink);border-color:var(--gmk-map-accent);background:rgba(0,0,0,.03)}

/* ── تلميح السحب: للهاتف فقط ────────────────────────────── */
.gmk-map__hint{display:none}

/* ═══════════════════════════════════════════════════════════
   الهاتف — الرسم 1440×540. لو ضُغط في 390px صار ارتفاعه 146px
   وأسماء الدول أصغر من النقاط. نعطيه مقاساً حقيقياً داخل
   ماسح أفقي خاص به، مفتوحاً على الوجهة.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .gmk-map__scroll{
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    /* الرسم ليس نصاً — إبقاؤه LTR يجعل scrollLeft يعني الشيء
       نفسه في كل المتصفحات */
    direction:ltr;
  }
  .gmk-map__scroll::-webkit-scrollbar{display:none}
  .gmk-map__svg{width:940px;max-width:none;flex:none}
  .gmk-map{--gmk-map-label:22px}
  .gmk-map__node text{stroke-width:6px}

  .gmk-map__hint{
    display:flex;align-items:center;gap:8px;justify-content:center;
    margin:14px 0 0;font-size:.75rem;color:var(--gmk-map-muted);
  }
  .gmk-map__hint svg{width:15px;height:15px;color:var(--gmk-map-accent);animation:gmk-map-nudge 2.4s var(--gmk-map-ease) infinite}

  /* البطاقة تنتمي تحت الخريطة، لا طافية فوقها */
  .gmk-map__panel{position:static;width:100%;margin-block-start:18px;box-shadow:none}
}

@keyframes gmk-map-nudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-4px)}
}

@media (max-width:640px){
  .gmk-map__head{flex-direction:column;align-items:flex-start}
  .gmk-map__legend{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .gmk-map__halo{animation:none;opacity:.35}
  .gmk-map__card{animation:none}
  .gmk-map__hint svg{animation:none}
  .gmk-map__arc{stroke-dashoffset:0 !important}
}