:root{
  --كحلي:#23305a;
  --فيروزي:#229799;
  --فيروزي-فاتح:#e6f3f3;
  --كريمي:#f7f5f1;
  --كريمي-غامق:#e4e1da;
  --أبيض:#ffffff;
  --نص:#1c2440;
  --نص-خفيف:#6a7288;
  --حد:#e4e1da;
}
body{background:#ffffff;color:#1c2440}
.قسم.كريمي{background:#f7f5f1}
.فوتر{background:#f7f5f1}

/* ————— هيرو الخيار ————— */

/* ===================================================================
   الرياض من فوق — نمط الرحلة
   الخريطة طبقةٌ ثابتة خلف كل شيء، والمحتوى صحيفةٌ بيضاء تنزلق فوقها،
   وللرحلة والتصفّح نافذتان شفافتان تكشفانها.
   =================================================================== */

/* ————— طبقة الخريطة ————— */
#طبقة-الخريطة{
  position:fixed;inset:0;z-index:0;
  background:#dfd9cf;
  transition:opacity .7s var(--انتقال);
  --ظهور-النقاط:0;
}
#طبقة-الخريطة.مغطّاة{opacity:0;pointer-events:none}
#طبقة-الخريطة canvas{outline:none}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-bottom-left{display:none}

/* بديلٌ ثابت إن أخفقت الخريطة — الصفحة لا تنكسر */
.الخريطة-أخفقت #طبقة-الخريطة{
  background:
    radial-gradient(120% 80% at 70% 10%, #cfe0ec 0%, rgba(207,224,236,0) 60%),
    linear-gradient(178deg, #e8eef2 0%, #ded6c9 46%, #cdc2b0 100%);
}
.الخريطة-أخفقت .نقطة{display:none}
.الخريطة-أخفقت #سلّم-الرحلة{display:none}
.الخريطة-أخفقت #الرحلة{height:auto!important;min-height:100svh}
.الخريطة-أخفقت #لوح-الرحلة{position:static;transform:none;margin:22vh auto}

/* ————— نقاط المشاريع ————— */
.غلاف-نقطة{width:20px;height:20px}
.نقطة{
  position:relative;display:block;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;
  opacity:var(--ظهور-النقاط);transition:opacity .5s linear;
}
.نقطة i{
  position:absolute;inset:5px;border-radius:50%;
  background:#2fd0cd;box-shadow:0 0 0 2.5px #fff, 0 3px 12px rgba(10,40,60,.5);
  display:block;transition:inset .28s var(--انتقال), background .28s;
}
.نقطة::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(47,208,205,.85);
  animation:نبض 2.8s ease-out infinite;
}
.نقطة.مباعة i{background:#f2efe9}
.نقطة.مباعة::before{border-color:rgba(255,255,255,.6);animation:none}
.نقطة:hover i,.نقطة.بارزة i{inset:2px;background:#fff;box-shadow:0 0 0 3px #14807f, 0 4px 16px rgba(10,40,60,.55)}
.نقطة .اسم{
  position:absolute;inset-block-end:26px;inset-inline-start:50%;transform:translateX(50%) translateY(5px);
  white-space:nowrap;padding:5px 12px;border-radius:99px;
  background:rgba(255,255,255,.95);color:#141c33;
  font-family:'ساعي عناوين',sans-serif;font-size:12.5px;font-weight:500;
  box-shadow:0 3px 14px rgba(10,30,50,.24);
  opacity:0;pointer-events:none;transition:opacity .26s, transform .26s var(--انتقال);
}
.نقطة:hover .اسم,.نقطة.بارزة .اسم{opacity:1;transform:translateX(50%) translateY(0)}
@keyframes نبض{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}

/* ————— قسم الرحلة ————— */
#الرحلة{position:relative;height:520svh;z-index:1}
.مشهد{position:sticky;inset-block-start:0;height:100svh;overflow:hidden;pointer-events:none}
.مشهد > *{pointer-events:auto}

/* تعتيمٌ خفيف أسفل الشاشة ليُقرأ اللوح فوق الصور الجوّية */
.مشهد::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%),
             linear-gradient(0deg, rgba(20,28,51,.34) 0%, rgba(20,28,51,0) 42%);
}

#لوح-الرحلة{
  position:absolute;inset-block-end:clamp(64px,11vh,120px);inset-inline-start:var(--حافة);
  width:min(560px,84vw);z-index:3;
  opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--انتقال), transform .75s var(--انتقال);
}
#لوح-الرحلة.داخل{opacity:1;transform:none}
#لوح-الرحلة .شارة{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:8px 16px;border-radius:99px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  font-size:12.5px;color:var(--نص);
}
#لوح-الرحلة .شارة svg{width:15px;height:15px;color:var(--فيروزي);flex:none}
#عنوان-الرحلة{
  font-size:clamp(40px,6.4vw,80px);line-height:1.03;color:#fff;letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(12,24,44,.5);
}
#عنوان-الرحلة em{font-style:normal;color:#4fe0dd}
#شرح-الرحلة{
  margin-top:18px;max-width:46ch;color:rgba(255,255,255,.94);
  font-size:clamp(15.5px,1.6vw,18px);text-shadow:0 1px 18px rgba(12,24,44,.55);
}
#أزرار-الرحلة{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
#أزرار-الرحلة .زر.زجاج{
  background:rgba(255,255,255,.94);color:var(--كحلي);backdrop-filter:blur(10px);
}
#أزرار-الرحلة .زر.زجاج:hover{background:#fff;color:var(--فيروزي)}
#أزرار-الرحلة .زر.شفاف{
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
#أزرار-الرحلة .زر.شفاف:hover{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px #fff}

/* سلّم الفصول */
#سلّم-الرحلة{
  position:absolute;inset-block-start:50%;inset-inline-end:calc(var(--شريط) + 22px);
  transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:2px;
}
#سلّم-الرحلة{
  padding:12px 14px;border-radius:16px;
  background:rgba(18,26,46,.34);backdrop-filter:blur(9px);
}
#سلّم-الرحلة button{
  display:flex;align-items:center;gap:11px;padding:7px 0;
  color:rgba(255,255,255,.78);font-size:12.5px;font-weight:500;font-family:'ساعي عناوين',sans-serif;
  transition:color .35s;
}
#سلّم-الرحلة button i{
  width:20px;height:1.5px;background:rgba(255,255,255,.5);display:block;flex:none;
  transition:width .45s var(--انتقال), background .45s;
}
#سلّم-الرحلة button.حي{color:#fff}
#سلّم-الرحلة button.حي i{width:40px;background:#4fe0dd}
#سلّم-الرحلة button:hover{color:#fff}

/* إشارة التمرير */
.إشارة-تمرير{
  position:absolute;inset-block-end:26px;inset-inline-start:50%;transform:translateX(50%);
  z-index:3;color:rgba(255,255,255,.8);display:grid;place-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.16em;text-shadow:0 1px 10px rgba(12,24,44,.6);
}
.إشارة-تمرير svg{width:15px;height:15px;animation:نزول 2.2s var(--انتقال) infinite}

/* ————— الصحيفة البيضاء ————— */
.صحيفة{position:relative;z-index:2;background:var(--أبيض)}
.صحيفة::before{
  content:'';position:absolute;inset-block-start:-58px;inset-inline:0;height:58px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--أبيض) 100%);
  pointer-events:none;
}

/* ————— نافذة التصفّح ————— */
#تصفّح-الخريطة{position:relative;z-index:1;height:104svh}
#تصفّح-الخريطة .داخلي{
  position:sticky;inset-block-start:0;height:100svh;
  display:grid;grid-template-columns:392px 1fr;align-items:stretch;
  pointer-events:none;
}
#تصفّح-الخريطة .لوحة{
  pointer-events:auto;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  border-inline-end:1px solid var(--حد);
  display:flex;flex-direction:column;overflow:hidden;
}
#تصفّح-الخريطة .رأس{padding:86px var(--حافة) 18px;border-bottom:1px solid var(--حد)}
#تصفّح-الخريطة .رأس h2{font-size:clamp(22px,2.4vw,28px);color:var(--كحلي)}
#تصفّح-الخريطة .رأس p{margin-top:8px;font-size:14px;color:var(--نص-خفيف)}
#قائمة-الخريطة{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 14px 20px}
.صف-خريطة{
  width:100%;display:grid;grid-template-columns:62px 1fr auto;gap:13px;align-items:center;
  padding:11px 12px;border-radius:14px;text-align:start;
  transition:background .25s;
}
.صف-خريطة:hover{background:var(--كريمي)}
.صف-خريطة.محدّد{background:var(--فيروزي-فاتح)}
.صف-خريطة img{width:62px;height:48px;object-fit:cover;border-radius:9px;background:var(--كريمي-غامق)}
.صف-خريطة .ن{min-width:0}
.صف-خريطة b{display:block;font-family:'ساعي عناوين',sans-serif;font-size:15px;font-weight:500;color:var(--كحلي);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.صف-خريطة small{display:block;font-size:12.5px;color:var(--نص-خفيف);margin-top:2px}
.صف-خريطة .ح{
  font-size:11.5px;color:var(--فيروزي);background:var(--فيروزي-فاتح);
  padding:4px 10px;border-radius:99px;white-space:nowrap;
}

/* ————— الاستجابة ————— */
@media (max-width:900px){
  #تصفّح-الخريطة{height:auto}
  #تصفّح-الخريطة .داخلي{
    position:relative;height:auto;grid-template-columns:1fr;
    grid-template-rows:58svh auto;
  }
  #تصفّح-الخريطة .لوحة{
    grid-row:2;border-inline-end:0;border-top:1px solid var(--حد);
    max-height:56svh;background:rgba(255,255,255,.97);
  }
}
@media (max-width:860px){
  #سلّم-الرحلة{inset-inline-end:14px;background:none;backdrop-filter:none;padding:0;gap:6px}
  #سلّم-الرحلة button span{display:none}
  #سلّم-الرحلة button{padding:3px 0}
  #سلّم-الرحلة button i{
    width:16px;background:rgba(255,255,255,.75);height:2px;border-radius:2px;
    box-shadow:0 1px 4px rgba(12,24,44,.5);
  }
  #سلّم-الرحلة button.حي i{width:28px;background:#4fe0dd}
  #الرحلة{height:420svh}
  #لوح-الرحلة{inset-inline-start:var(--حافة);inset-inline-end:var(--حافة);width:auto}
}
@media (prefers-reduced-motion:reduce){
  .نقطة::before{animation:none}
  .إشارة-تمرير svg{animation:none}
  #الرحلة{height:100svh}
  .مشهد{position:relative}
}

/* شارة الخيار — للتنقّل بين الثمانية أثناء المقارنة */
.شارة-خيار{
  position:fixed;z-index:90;inset-block-end:18px;inset-inline-end:18px;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:99px;
  background:rgba(20,26,44,.9);color:#fff;backdrop-filter:blur(10px);
  font-family:'ساعي عناوين',sans-serif;font-size:13px;
  box-shadow:0 6px 24px rgba(10,20,40,.3);transition:transform .3s var(--انتقال)
}
.شارة-خيار span{opacity:.6;font-size:11.5px;padding-inline-start:10px;
  border-inline-start:1px solid rgba(255,255,255,.25)}
.شارة-خيار:hover{transform:translateY(-3px)}
@media print{.شارة-خيار{display:none}}