/* IWM Interactive World Map v5.0 */

.iwm-wrapper { width:100%; font-family:inherit; box-sizing:border-box; }

/* ── Map container (position:relative for controls overlay) ─── */
.iwm-map-container { position:relative; width:100%; }

/* ── Map canvas ─────────────────────────────────────────────── */
#iwm-map {
    width:100%; background:#1a6ea8;
    border-radius:14px; overflow:hidden; box-sizing:border-box;
    box-shadow:0 4px 28px rgba(26,110,168,0.28);
    user-select:none; -webkit-user-select:none;
    /* pan-y: vertical scroll passes through on HTML elements around map */
    touch-action: pan-y;
}
#iwm-map svg {
    display:block; width:100%; height:100%;
    /* SVG itself also marked — belt-and-suspenders */
    touch-action: pan-y;
}

/* ── Zoom controls ───────────────────────────────────────────── */
.iwm-zoom-controls {
    position:absolute;
    top:12px; right:12px;
    display:flex; flex-direction:column; gap:5px;
    z-index:10;
}
.iwm-zoom-btn {
    width:34px; height:34px;
    background:#fff; border:none; border-radius:6px;
    box-shadow:0 1px 5px rgba(0,0,0,0.28);
    font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color:#333; transition:background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color:transparent;
    padding:0;
}
.iwm-zoom-btn:hover  { background:#f0f4ff; }
.iwm-zoom-btn:active { transform:scale(0.92); background:#e0e8ff; }

/* ── Gesture hint ────────────────────────────────────────────── */
.iwm-gesture-hint {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.62);
    color:#fff; border-radius:8px;
    padding:10px 18px; font-size:14px;
    pointer-events:none; white-space:nowrap;
    opacity:0; transition:opacity 0.25s;
    z-index:20;
}
.iwm-hint-visible { opacity:1 !important; }

/* ── Pulse ring on Egypt ─────────────────────────────────────── */
.iwm-pulse-ring {
    animation:iwm-pulse 2.2s ease-out infinite;
    transform-box:fill-box; transform-origin:center;
}
@keyframes iwm-pulse {
    0%  { transform:scale(0.9); opacity:0.6; }
    70% { transform:scale(1.7); opacity:0;   }
    100%{ transform:scale(0.9); opacity:0;   }
}

/* ── Legend ──────────────────────────────────────────────────── */
.iwm-legend {
    display:flex; align-items:center; gap:20px;
    margin-top:12px; flex-wrap:wrap; padding:0 2px;
}
.iwm-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; color:#444; }
.iwm-legend-icon  { width:14px; height:14px; flex-shrink:0; overflow:visible; }
.iwm-legend-emoji { font-size:18px; line-height:1; flex-shrink:0; }

/* ── Tooltip ─────────────────────────────────────────────────── */
#iwm-tooltip {
    position:fixed; z-index:999999; pointer-events:none;
    opacity:0; transition:opacity 0.12s;
    background:#fff; border:1px solid #dde3ed;
    border-left:3px solid #1a6ea8; border-radius:0 8px 8px 0;
    padding:9px 14px 9px 12px; box-shadow:0 4px 16px rgba(0,0,0,0.12);
    display:flex; flex-direction:column; gap:4px;
    min-width:150px; max-width:210px;
}
.iwm-tip-name      { font-size:14px; font-weight:600; color:#1a1a2e; white-space:nowrap; }
.iwm-tip-badge     { font-size:12px; color:#1a6ea8; font-weight:500; }
.iwm-tip-badge--hq { font-size:12px; color:#b8000e; font-weight:600; }
.iwm-error { padding:1rem; color:#c00; font-size:13px; font-family:sans-serif; margin:0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:768px){
    #iwm-map { border-radius:10px; }
    .iwm-zoom-btn { width:38px; height:38px; font-size:22px; } /* bigger tap target */
    .iwm-legend { gap:16px; margin-top:10px; }
    .iwm-legend-item { font-size:12px; }
    #iwm-tooltip { min-width:130px; max-width:175px; padding:7px 12px 7px 10px; }
    .iwm-tip-name { font-size:13px; }
    .iwm-tip-badge,.iwm-tip-badge--hq { font-size:11px; }
    .iwm-gesture-hint { font-size:13px; padding:9px 16px; }
}
@media (max-width:480px){
    #iwm-map { border-radius:8px; }
    .iwm-zoom-controls { top:8px; right:8px; gap:4px; }
    .iwm-zoom-btn { width:40px; height:40px; font-size:22px; border-radius:8px; }
    .iwm-legend { gap:12px; margin-top:8px; }
    .iwm-legend-item { font-size:11px; }
    #iwm-tooltip { min-width:120px; max-width:155px; padding:7px 10px; border-left-width:2px; }
    .iwm-tip-name { font-size:12px; white-space:normal; }
}

/* Dark mode */
@media (prefers-color-scheme:dark){
    #iwm-tooltip { background:#1e2535; border-color:#2d3a52; border-left-color:#4a9fe8; }
    .iwm-tip-name { color:#e8edf5; }
    .iwm-tip-badge { color:#6ab0f5; }
    .iwm-tip-badge--hq { color:#f08080; }
    .iwm-legend-item { color:#9aa3b0; }
    .iwm-zoom-btn { background:#1e2535; color:#e8edf5; box-shadow:0 1px 5px rgba(0,0,0,0.5); }
    .iwm-zoom-btn:hover { background:#2d3a52; }
}