/* ============================================================
   Morocco Investor Hub — v6.1 (Leaflet, floating overlay)
   ============================================================ */
.mm-app{
    --mm-green:#006B5B;
    --mm-green-dk:#004F44;
    --mm-green-soft:rgba(0,107,91,.08);
    --mm-green-ring:rgba(0,107,91,.18);
    --mm-gold:#C9A24F;
    --mm-text:#1A1F2E;
    --mm-muted:#6B7280;
    --mm-border:#E5DDD0;
    --mm-bg:#F8F7F3;
    --mm-radius:18px;
    --mm-shadow:0 10px 40px rgba(15,30,45,.12);
    --mm-shadow-sm:0 4px 16px rgba(15,30,45,.08);
    --mm-h:680px;

    font-family:inherit;
    color:var(--mm-text);
    background:var(--mm-bg);
    padding:18px;
    border-radius:var(--mm-radius);
    box-sizing:border-box;
}
.mm-app *,.mm-app *::before,.mm-app *::after{box-sizing:inherit}

/* ── STAGE ────────────────────────────────────────────── */
.mm-stage{
    position:relative;
    width:100%;
    height:var(--mm-h);
    border-radius:var(--mm-radius);
    overflow:hidden;
    box-shadow:var(--mm-shadow);
    background:#D7E5E1;
}
.mm-map{position:absolute;inset:0;width:100%;height:100%;z-index:1;}

/* ── TOP BADGE ────────────────────────────────────────── */
.mm-badge{
    position:absolute;top:18px;left:50%;
    transform:translateX(-50%);
    z-index:600;
    display:inline-flex;align-items:center;gap:.55rem;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(10px);
    border:1px solid var(--mm-border);
    border-radius:999px;
    padding:.55rem 1.2rem .55rem .9rem;
    box-shadow:var(--mm-shadow-sm);
    font-weight:700;font-size:.82rem;letter-spacing:.04em;
    color:var(--mm-green);
    animation:mm-badge-in .5s cubic-bezier(.2,.7,.2,1) both;
}
.mm-badge-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--mm-green);
    box-shadow:0 0 0 0 var(--mm-green-ring);
    animation:mm-badge-pulse 2s infinite;
}
@keyframes mm-badge-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes mm-badge-pulse{
    0%{box-shadow:0 0 0 0 rgba(0,107,91,.5)}
    70%{box-shadow:0 0 0 12px rgba(0,107,91,0)}
    100%{box-shadow:0 0 0 0 rgba(0,107,91,0)}
}

/* ── OVERLAY PANELS ───────────────────────────────────── */
.mm-overlay-panel{
    position:absolute;
    top:18px;bottom:89px;
    width:300px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border:1px solid rgba(229,221,208,.7);
    border-radius:14px;
    box-shadow:var(--mm-shadow);
    padding:1.2rem 1.1rem;
    overflow-y:auto;
    scrollbar-width:thin;
    z-index:500;
    animation:mm-panel-in .45s cubic-bezier(.2,.7,.2,1) both;
}
.mm-overlay-panel::-webkit-scrollbar{width:6px}
.mm-overlay-panel::-webkit-scrollbar-thumb{background:#cfd6d3;border-radius:6px}

.mm-left{left:18px;animation-delay:.05s}
.mm-right{right:18px;width:270px;animation-delay:.1s}

@keyframes mm-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── LEFT panel content ───────────────────────────────── */
.mm-left-head{margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--mm-border)}
.mm-left-title{
    font-size:1.05rem;font-weight:800;
    color:var(--mm-green);margin:0 0 .3rem;
}
.mm-left-sub{font-size:.78rem;color:var(--mm-muted);margin:0;line-height:1.45}

.mm-reason-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.mm-reason{
    display:flex;gap:.65rem;align-items:flex-start;
    padding:.65rem .75rem;border-radius:10px;
    background:var(--mm-green-soft);
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mm-reason:hover{
    background:#fff;
    transform:translateX(2px);
    box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.mm-reason-icon{
    flex-shrink:0;width:24px;height:24px;border-radius:50%;
    background:var(--mm-green);color:#fff;
    display:flex;align-items:center;justify-content:center;
}
.mm-reason-icon svg{width:13px;height:13px}
.mm-reason-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.mm-reason-text strong{font-size:.82rem;font-weight:700;line-height:1.3;color:var(--mm-text)}
.mm-reason-text span{font-size:.75rem;color:var(--mm-muted);line-height:1.45}

/* ── RIGHT panel content ──────────────────────────────── */
.mm-right-head{margin-bottom:.85rem;padding-bottom:.75rem;border-bottom:1px solid var(--mm-border)}
.mm-right-title{font-size:.85rem;font-weight:800;margin:0;color:var(--mm-text);letter-spacing:.05em;text-transform:uppercase}
.mm-right-sub{font-size:.72rem;color:var(--mm-muted);margin:.25rem 0 0}
.mm-right-foot{margin-top:.9rem;font-size:.7rem;color:var(--mm-muted);text-align:center;font-style:italic}

.mm-toggle-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.mm-toggle-row{
    display:flex;align-items:center;gap:.65rem;
    padding:.6rem .7rem;
    background:#fafafa;border:1px solid var(--mm-border);
    border-radius:10px;
    transition:background .2s, border-color .2s, transform .2s;
}
.mm-toggle-row:hover{background:#fff;border-color:var(--mm-green);transform:translateX(-1px)}
.mm-toggle-icon{flex-shrink:0;display:flex}
.mm-toggle-icon svg{width:17px;height:17px}
.mm-toggle-label{flex:1;font-size:.81rem;font-weight:600;color:var(--mm-text)}

/* iOS-style switch */
.mm-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.mm-switch input{opacity:0;width:0;height:0}
.mm-slider{
    position:absolute;cursor:pointer;
    top:0;left:0;right:0;bottom:0;
    background:#d1d5db;border-radius:20px;
    transition:background .25s;
}
.mm-slider::before{
    content:'';position:absolute;
    height:14px;width:14px;left:3px;bottom:3px;
    background:#fff;border-radius:50%;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.mm-switch input:checked + .mm-slider{background:var(--mm-green)}
.mm-switch input:checked + .mm-slider::before{transform:translateX(16px)}
.mm-switch input:focus-visible + .mm-slider{box-shadow:0 0 0 3px var(--mm-green-ring)}

/* ── LEAFLET tweaks ───────────────────────────────────── */
.leaflet-container{
    font-family:inherit !important;
    background:#D7E5E1 !important;
}
.leaflet-control-zoom{margin:18px !important;margin-right:306px !important;border:0 !important;border-radius:10px !important;overflow:hidden;box-shadow:var(--mm-shadow-sm);z-index:501 !important}
.leaflet-control-zoom a{
    width:34px !important;height:34px !important;line-height:34px !important;
    color:var(--mm-green) !important;
    background:#fff !important;
    border:0 !important;
    font-size:18px !important;font-weight:700 !important;
}
.leaflet-control-zoom a:hover{background:var(--mm-green) !important;color:#fff !important}
.leaflet-control-zoom a:first-child{border-bottom:1px solid var(--mm-border) !important}
.leaflet-control-attribution{font-size:9px !important;background:rgba(255,255,255,.7) !important;border-radius:6px 0 0 0;padding:2px 6px !important}

.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.leaflet-popup-content{margin:.85rem 1.1rem;font-size:.85rem;line-height:1.55}
.leaflet-popup-content strong{color:var(--mm-green);font-size:.92rem;display:block;margin-bottom:.15rem}
.leaflet-popup-content em{color:var(--mm-muted);font-style:normal;font-size:.78rem}
.leaflet-popup-tip{box-shadow:0 4px 8px rgba(0,0,0,.1)}

/* Cluster */
.mm-cluster-wrap{background:transparent !important;border:0 !important}
.mm-cluster{
    background:var(--mm-green);color:#fff;
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.85rem;
    box-shadow:0 0 0 6px rgba(0,107,91,.22), 0 4px 12px rgba(0,0,0,.2);
}

/* DivIcon markers */
.mm-divicon{background:transparent !important;border:0 !important}
.mm-marker{
    width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border:2px solid currentColor;
    box-shadow:0 4px 10px rgba(0,0,0,.18);
    transition:transform .2s ease, box-shadow .2s ease;
    animation:mm-marker-in .35s cubic-bezier(.2,.7,.2,1) both;
}
.mm-marker:hover{transform:scale(1.18);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.mm-marker svg{width:14px;height:14px}
@keyframes mm-marker-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* Animated dashed connection route */
@keyframes mm-dash{ to { stroke-dashoffset:-120; } }
.mm-anim-route{
    stroke-dasharray:6 9;
    animation:mm-dash 5s linear infinite;
}

/* Pulse dot at destinations */
.mm-pulse-wrap{background:transparent !important;border:0 !important}
.mm-pulse{
    width:14px;height:14px;border-radius:50%;
    background:#DC2626;border:2px solid #fff;
    box-shadow:0 0 0 0 rgba(220,38,38,.6);
    animation:mm-pulse 1.8s infinite;
}
@keyframes mm-pulse{
    0%   { box-shadow:0 0 0 0   rgba(220,38,38,.6); }
    70%  { box-shadow:0 0 0 16px rgba(220,38,38,0); }
    100% { box-shadow:0 0 0 0   rgba(220,38,38,0); }
}

/* ── KPI STRIP (floating bottom of map) ──────────────── */
.mm-kpis{
    position:absolute;
    bottom:18px;
    left:18px;
    right:18px;
    z-index:500;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    animation:mm-panel-in .5s cubic-bezier(.2,.7,.2,1) .15s both;
}
.mm-kpi{
    display:flex;align-items:center;gap:.75rem;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border:1px solid rgba(229,221,208,.7);
    border-radius:12px;
    padding:.75rem .9rem;
    box-shadow:0 6px 20px rgba(0,0,0,.14);
    transition:transform .2s ease, box-shadow .2s ease;
}
.mm-kpi:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.mm-kpi-icon{
    flex-shrink:0;width:36px;height:36px;border-radius:10px;
    background:var(--mm-green-soft);
    color:var(--mm-green);
    display:flex;align-items:center;justify-content:center;
}
.mm-kpi-icon svg{width:19px;height:19px}
.mm-kpi-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.mm-kpi-text strong{font-size:.82rem;font-weight:800;line-height:1.15;color:var(--mm-text);letter-spacing:.02em;white-space:nowrap}
.mm-kpi-text strong sup{font-size:.55em;vertical-align:super}
.mm-kpi-text span{font-size:.69rem;color:var(--mm-muted);line-height:1.3}

.mm-kpi--accent .mm-kpi-icon{background:var(--mm-green);color:#fff}
.mm-kpi--accent strong{color:var(--mm-green)}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width:1100px){
    .mm-overlay-panel{width:250px}
    .mm-right{width:225px}
    /* KPI labels may wrap — keep 4 cols but compact */
    .mm-kpis{gap:8px}
    .mm-kpi{padding:.65rem .75rem;gap:.55rem}
    .mm-kpi-text strong{font-size:.76rem}
    /* right panel 225px + 18px gap */
    .leaflet-control-zoom{margin-right:261px !important}
}
@media (max-width:860px){
    .mm-app{padding:10px}
    /* Reduce map height to fit panels + kpi bar */
    .mm-stage{height:560px}
    .mm-overlay-panel{
        top:14px;
        bottom:130px; /* leave room for 2-col KPI bar */
    }
    .mm-kpis{
        grid-template-columns:repeat(2,1fr);
        bottom:14px;left:12px;right:12px;gap:8px;
    }
}
@media (max-width:640px){
    .mm-stage{height:520px}
    /* Hide side panels on mobile to avoid crowding */
    .mm-overlay-panel{display:none}
    /* No right panel: reset zoom margin to default */
    .leaflet-control-zoom{margin-right:18px !important}
    .mm-kpis{
        grid-template-columns:repeat(2,1fr);
        bottom:12px;left:10px;right:10px;gap:7px;
    }
    .mm-kpi{padding:.55rem .65rem;gap:.45rem}
    .mm-kpi-icon{width:28px;height:28px;border-radius:8px}
    .mm-kpi-icon svg{width:14px;height:14px}
    .mm-kpi-text strong{font-size:.72rem}
    .mm-kpi-text span{font-size:.64rem}
}
@media (max-width:400px){
    .mm-stage{height:480px}
    .mm-kpis{grid-template-columns:1fr 1fr}
    .mm-reason-list{gap:.4rem}
}
@media (prefers-reduced-motion:reduce){
    .mm-app *,.mm-app *::before,.mm-app *::after{animation:none !important;transition:none !important}
}