/* ============================================================
   Interactive Libya map
   Design & development: IP Libya - https://iplibya.com/webdesign/ar/
   ============================================================ */

.mapwrap{padding-block:0;background:#0e1f1a}
.map-shell{
  display:grid;grid-template-columns:1fr 372px;
  height:clamp(560px, calc(100vh - var(--header-h) - 40px), 860px);
  width:100%;
}

/* ---------------- stage ---------------- */
.map-stage{
  position:relative;overflow:hidden;background:
    radial-gradient(1100px 700px at 50% 8%, #14322a 0%, #0c1c17 55%, #081411 100%);
  touch-action:none;cursor:grab;
}
.map-stage.dragging{cursor:grabbing}
.map-stage::before{
  /* faint graticule so the sea reads as a map, not a void */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(233,195,122,.055) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(233,195,122,.055) 0 1px, transparent 1px 64px);
}
#libya{position:absolute;inset:0;width:100%;height:100%;display:block}
#camera{transform-origin:0 0;transition:transform .45s cubic-bezier(.22,.7,.28,1)}
#camera.nofx{transition:none}

/* route lines */
.route-line{stroke:url(#routeg);stroke-width:5;filter:url(#glow);opacity:0}
.route-line.on{opacity:1;animation:draw 1.5s cubic-bezier(.3,.8,.3,1) forwards}
.route-line.flow{stroke-dasharray:14 12;animation:flow 1.1s linear infinite}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes flow{to{stroke-dashoffset:-26}}

/* pins */
.pin{cursor:pointer}
.pin .halo{fill:#e9c37a;opacity:0;transform-box:fill-box;transform-origin:center}
.pin:hover .halo,.pin.sel .halo{opacity:.28;animation:pulse 1.9s ease-out infinite}
@keyframes pulse{0%{opacity:.36;r:12}70%{opacity:0;r:30}100%{opacity:0;r:30}}
.pin .dot{fill:#fff;stroke:#1c3d33;stroke-width:2.5;transition:.18s}
.pin:hover .dot{fill:#e9c37a}
.pin.sel .dot{fill:#e9c37a;stroke:#fff;stroke-width:3}
.pin.dim{opacity:.22}
.pin .lbl{
  fill:#eef4f1;font-size:17px;font-weight:600;paint-order:stroke;
  stroke:#0b1d18;stroke-width:5;stroke-linejoin:round;pointer-events:none;
}
.pin .num{fill:#12241e;font-size:15px;font-weight:800;text-anchor:middle;pointer-events:none}
.pin .numbg{fill:#e9c37a;stroke:#fff;stroke-width:2.5}

/* ---------------- tools ---------------- */
.map-tools{
  position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:6;
  display:flex;flex-direction:column;gap:7px;
}
.map-tools button{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(233,195,122,.28);
  background:rgba(10,26,21,.82);backdrop-filter:blur(8px);color:#e9c37a;
  font-size:21px;font-weight:600;display:grid;place-items:center;transition:.16s;
}
.map-tools button:hover{background:rgba(233,195,122,.2);border-color:#e9c37a}
.map-tools button:active{transform:scale(.94)}

.map-hint{
  position:absolute;inset-block-end:16px;inset-inline-start:16px;z-index:6;
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#b7c9c2;
  background:rgba(10,26,21,.8);backdrop-filter:blur(8px);border:1px solid rgba(233,195,122,.18);
  padding:8px 14px;border-radius:999px;transition:opacity .3s;
}
.map-hint.gone{opacity:0;pointer-events:none}

/* ---------------- detail card ---------------- */
.map-card{
  position:absolute;inset-block-end:16px;inset-inline-start:16px;z-index:8;width:min(310px, calc(100% - 32px));
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -18px rgba(0,0,0,.7);
  animation:cardin .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes cardin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.map-card img{width:100%;height:132px;object-fit:cover;background:var(--sand-2)}
.card-in{padding:15px 17px 17px}
.card-tag{
  display:inline-block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-block-end:5px;
}
html[dir="rtl"] .card-tag{letter-spacing:0;text-transform:none;font-size:13px}
.map-card h3{font-size:18px;color:var(--green);margin:0 0 6px}
.map-card p{font-size:14px;color:var(--muted);margin:0 0 14px;line-height:1.6}
.card-x{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  width:32px;height:32px;border-radius:50%;border:0;background:rgba(10,26,21,.6);
  color:#fff;font-size:20px;line-height:1;backdrop-filter:blur(6px);
}
.card-x:hover{background:rgba(10,26,21,.85)}

/* ---------------- panel ---------------- */
.map-panel{
  background:#12241e;border-inline-start:1px solid rgba(233,195,122,.16);
  display:flex;flex-direction:column;min-height:0;color:#b7c9c2;
}
.panel-grip{display:none}
.panel-tabs{display:flex;padding:14px 14px 0;gap:6px;flex-shrink:0}
.panel-tabs button{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:none;border:0;border-block-end:2px solid transparent;color:#8fa39c;
  padding:11px 8px;font:inherit;font-size:14.5px;font-weight:600;transition:.16s;
}
.panel-tabs button.on{color:#e9c37a;border-block-end-color:#e9c37a}
.panel-body{flex:1;overflow-y:auto;padding:12px 14px 18px;min-height:0;overscroll-behavior:contain}
.panel-pane{display:none}
.panel-pane.on{display:block}
.panel-empty{color:#8fa39c;font-size:14px;text-align:center;padding:26px 10px}

.rt-item,.pl-item{
  width:100%;display:flex;align-items:center;gap:12px;text-align:start;
  background:rgba(255,255,255,.035);border:1px solid transparent;border-radius:13px;
  padding:12px 14px;margin-block-end:8px;color:inherit;font:inherit;transition:.16s;
}
.rt-item:hover,.pl-item:hover{background:rgba(255,255,255,.08);border-color:rgba(233,195,122,.3)}
.rt-item.on{background:rgba(233,195,122,.15);border-color:#e9c37a}
.rt-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;background:#e9c37a}
.rt-txt,.pl-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rt-txt b,.pl-txt b{color:#fff;font-size:14.5px;font-weight:600}
.rt-txt small,.pl-txt small{color:#8fa39c;font-size:12.5px;margin-block-start:3px}
.rt-item svg,.pl-item svg{color:#6f8279;flex-shrink:0}
html[dir="rtl"] .rt-item svg,html[dir="rtl"] .pl-item svg{transform:rotate(90deg)}
html[dir="ltr"] .rt-item svg,html[dir="ltr"] .pl-item svg{transform:rotate(-90deg)}
.pl-item img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex-shrink:0}

.panel-foot{
  border-block-start:1px solid rgba(233,195,122,.16);padding:14px;flex-shrink:0;
  background:#0f1f1a;max-height:47%;overflow-y:auto;
}
.rf-head{display:flex;flex-direction:column;margin-block-end:12px}
.rf-head b{color:#fff;font-size:15px}
.rf-head span{color:#8fa39c;font-size:12.5px;margin-block-start:2px}
.rf-stops{list-style:none;margin:0 0 14px;padding:0;counter-reset:s}
.rf-stops li{
  display:flex;align-items:center;gap:11px;padding:7px 0;font-size:14px;color:#cfdcd7;cursor:pointer;
}
.rf-stops li:hover{color:#e9c37a}
.rf-stops li i{
  width:24px;height:24px;border-radius:50%;background:rgba(233,195,122,.18);color:#e9c37a;
  font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0;
}

/* ---------------- phone: app-style bottom sheet ---------------- */
@media (max-width:900px){
  .mapwrap{padding:0}
  .map-shell{
    grid-template-columns:1fr;grid-template-rows:1fr;
    /* tall enough to feel like an app, short enough that the letterbox
       margin above and below the country stays small on a phone */
    height:min(calc(100dvh - var(--header-h)), 128vw);
    min-height:430px;position:relative;
  }
  .map-stage{grid-row:1;height:100%}
  .map-panel{
    position:absolute;inset-inline:0;inset-block-end:0;z-index:20;
    height:76dvh;border-inline-start:0;border-radius:22px 22px 0 0;
    box-shadow:0 -14px 40px -12px rgba(0,0,0,.6);
    transform:translateY(calc(100% - 132px));
    transition:transform .34s cubic-bezier(.22,.7,.28,1);
    border-block-start:1px solid rgba(233,195,122,.22);
  }
  .map-panel.open{transform:translateY(0)}
  .panel-grip{
    display:flex;justify-content:center;padding:11px 0 4px;flex-shrink:0;cursor:grab;
    touch-action:none;
  }
  .panel-grip span{width:44px;height:4px;border-radius:3px;background:rgba(233,195,122,.5)}
  .panel-body{padding-block-end:26px}
  .panel-foot{max-height:40dvh}
  .map-card{inset-block-end:auto;inset-block-start:14px;inset-inline:14px;width:auto}
  .map-card img{height:112px}
  .map-hint{inset-block-end:14px;inset-inline-start:12px;font-size:12px;padding:7px 12px}
  .map-tools{inset-block-start:12px;inset-block-end:auto;inset-inline-end:12px}
  .pin .lbl{font-size:21px;stroke-width:6}
}
@media (max-width:420px){
  .map-tools button{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  #camera,.map-panel{transition:none}
  .route-line.on{animation:none;stroke-dashoffset:0}
  .route-line.flow{animation:none}
  .pin:hover .halo,.pin.sel .halo{animation:none;opacity:.28}
}