.saudi-dashboard-377f0f28-wrap {
    --saudi-green: #00e676;
    --saudi-blue: #00b4ff;
    --saudi-bg: #050c1a;
    --saudi-glass: rgba(255,255,255,0.05);
    --saudi-map-fill: rgba(255,255,255,0.05);
    --saudi-map-stroke: rgba(255,255,255,0.3);
    
    position: relative;
    width: 100%;
    min-height: 800px;
    background-color: var(--saudi-bg);
    overflow: hidden;
    font-family: sans-serif;
    color: #fff;
    display: flex;
}

.npm-bg-layer-377f0f28 {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.npm-bg-layer-377f0f28.active {
    opacity: 1;
}

.npm-overlay-377f0f28 {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
/*     background: linear-gradient(to right, rgba(5,12,26,0.95) 0%, rgba(5,12,26,0.85) 50%, rgba(5,12,26,0.95) 100%); */
	background:#00000080;
    z-index: 2;
}

.npm-inner-377f0f28 {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Header */
.npm-header-377f0f28 {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.npm-label-row-377f0f28 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.npm-label-line-377f0f28 {
    width: 40px;
    height: 2px;
    background: var(--saudi-blue);
}

.npm-label-377f0f28 {
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--saudi-blue);
    font-weight: 600;
}

.npm-heading-377f0f28 {
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 15px;
    font-weight: 700;
}

.npm-heading-white-377f0f28 { color: #fff; }
.npm-heading-green-377f0f28 { color: var(--saudi-green); }

.npm-subtitle-377f0f28 {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin: 0;
}

/* Grid */
.npm-grid-377f0f28 {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 50px;
    align-items: center;
}

@media (max-width: 991px) {
    .npm-grid-377f0f28 {
        grid-template-columns: 1fr;
    }
}

/* Map Area */
.npm-map-col-377f0f28 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.npm-map-controls-377f0f28 {
    display: flex;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    padding: 5px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    margin-bottom: 20px;
}

.npm-view-btn-377f0f28 {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.npm-view-btn-377f0f28:hover {
    color: #fff;
}

.npm-view-btn-377f0f28.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.npm-map-container-377f0f28 {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 4/3;
}

.saudi-svg-377f0f28 {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.5));
    transition: all 0.5s ease;
}

/* The outline/border paths (the "outlines" group in the SVG) sit on top
   of the province fill paths in stacking order, purely for the visual
   border linework. They are not meant to be interactive and have no JS
   handlers -- but some of them use fill="transparent" rather than
   fill="none", and browsers still treat a specified fill of
   "transparent" (alpha 0) as hit-testable, unlike "none". Left as-is,
   this silently steals hover from the province path underneath the
   moment the cursor crosses onto an outline path's fill area, firing a
   spurious mouseleave on the real province path even though the cursor
   never actually left the region -- which is what was making the popup
   flicker closed and reopen. Forcing pointer-events: none here makes the
   outline layer purely decorative, exactly as intended, so hover always
   reaches the actual province path.
*/
.saudi-svg-377f0f28 #outlines,
.saudi-svg-377f0f28 #outlines * {
    pointer-events: none;
}

.npm-custom-overlay-377f0f28 {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Map Path Styles */
.prov-path-377f0f28 {
    fill: var(--saudi-map-fill);
    stroke: var(--saudi-map-stroke);
    stroke-width: 0;
    cursor: pointer;
    transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease,
                filter .16s ease, opacity .3s ease;
}

/* Active Region/Province Styling — specificity 0-4-0 */
.saudi-svg-377f0f28[data-active-region="northern"] .prov-path-377f0f28[data-region="northern"] { fill: rgba(0, 230, 118, 0.2); stroke: var(--saudi-green); stroke-width: 1.5px; filter: drop-shadow(0 0 8px rgba(0, 230, 118, 0.5)); }
.saudi-svg-377f0f28[data-active-region="western"] .prov-path-377f0f28[data-region="western"] { fill: rgba(0, 230, 118, 0.2); stroke: var(--saudi-green); stroke-width: 1.5px; filter: drop-shadow(0 0 8px rgba(0, 230, 118, 0.5)); }
.saudi-svg-377f0f28[data-active-region="central"] .prov-path-377f0f28[data-region="central"] { fill: rgba(0, 180, 255, 0.2); stroke: var(--saudi-blue); stroke-width: 1.5px; filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.5)); }

/* Hover — written at 0-5-0 so it beats the active-region rules above.
   Only provinces inside the active region react. */
.saudi-svg-377f0f28[data-active-region="northern"] .prov-path-377f0f28[data-region="northern"]:hover,
.saudi-svg-377f0f28[data-active-region="northern"] .prov-path-377f0f28[data-region="northern"].npm-hover-377f0f28,
.saudi-svg-377f0f28[data-active-region="western"] .prov-path-377f0f28[data-region="western"]:hover,
.saudi-svg-377f0f28[data-active-region="western"] .prov-path-377f0f28[data-region="western"].npm-hover-377f0f28,
.saudi-svg-377f0f28[data-active-region="central"] .prov-path-377f0f28[data-region="central"]:hover,
.saudi-svg-377f0f28[data-active-region="central"] .prov-path-377f0f28[data-region="central"].npm-hover-377f0f28 {
    fill: rgba(255, 255, 255, 0.3);
    stroke: #fff;
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.75));
}

/* Labels and pins must never intercept the pointer */
.npm-map-labels-377f0f28,
.npm-prov-label-377f0f28,
.npm-map-pins-377f0f28,
.npm-prov-pin-377f0f28 {
    pointer-events: none;
}

.npm-prov-label-377f0f28 { transition: opacity .3s ease; }

/* Map View Modes */
.npm-map-container-377f0f28[data-current-view="outlines"] .prov-path-377f0f28 { fill: transparent !important; }
.npm-map-container-377f0f28[data-current-view="custom"] .saudi-svg-377f0f28 { opacity: 0.3; }
.npm-map-container-377f0f28[data-current-view="custom"] .npm-custom-overlay-377f0f28 { opacity: 1; pointer-events: auto; }


/* Right Panel */
.npm-right-col-377f0f28 {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.npm-region-buttons-377f0f28 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.npm-region-btn-377f0f28 {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 20px;
    background: var(--saudi-glass);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    text-align: left;
}

.npm-region-btn-377f0f28:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    transform: translateX(5px);
}

.npm-region-btn-377f0f28.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.npm-btn-dot-377f0f28 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.npm-region-btn-377f0f28.active .npm-btn-dot-377f0f28 {
    opacity: 1;
}

/* Info Card */
.npm-info-card-377f0f28 {
    background: var(--saudi-glass);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 30px;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.npm-info-title-377f0f28 {
    font-size: 24px;
    margin: 0 0 15px;
    font-weight: 600;
}

.npm-info-desc-377f0f28 {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin: 0 0 25px;
}

.npm-info-metrics-377f0f28 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px;
}

.npm-metric-377f0f28 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.npm-metric-val-377f0f28 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.npm-metric-key-377f0f28 {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1px;
}

/* Impact Section */
.npm-impact-section-377f0f28 {
    margin-top: 10px;
}

.npm-impact-header-377f0f28 {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.npm-impact-header-377f0f28::before {
    content: '';
    height: 1px;
    flex-grow: 1;
    background: rgba(255,255,255,0.1);
}

.npm-impact-grid-377f0f28 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.npm-impact-card-377f0f28 {
    background: var(--saudi-glass);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 20px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(5px);
}

.npm-impact-icon-377f0f28 {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.npm-impact-val-377f0f28 {
    font-size: 20px;
    font-weight: 700;
}

.npm-impact-lbl-377f0f28 {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

/* Popup Tooltip */
.npm-popup-377f0f28 {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    color: #fff;
    background: rgba(10, 15, 30, 0.95);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(255,255,255,0.05);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: none;
    transition: opacity 0.15s ease;
    overflow: hidden;
}

.npm-popup-377f0f28.visible {
    opacity: 1;
}

.npm-popup-close-377f0f28 {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: background 0.2s ease;
}

.npm-popup-close-377f0f28:hover,
.npm-popup-close-377f0f28:active {
    background: rgba(255,255,255,0.25);
}

.npm-popup-imgarea-377f0f28 {
    width: 100%;
    height: 120px;
    background: rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}

.npm-popup-img-377f0f28 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.npm-popup-img-placeholder-377f0f28 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    opacity: 0.2;
}

.npm-popup-body-377f0f28 {
    padding: 20px;
}

.npm-popup-region-tag-377f0f28 {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--saudi-green);
    margin-bottom: 5px;
}

.npm-popup-name-377f0f28 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.npm-popup-desc-377f0f28 {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    margin-bottom: 15px;
}

.npm-popup-stats-377f0f28 {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

.npm-popup-stat-377f0f28 {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.npm-popup-stat-val-377f0f28 {
    font-size: 16px;
    font-weight: 700;
}

.npm-popup-stat-key-377f0f28 {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

/* Popup Tooltip - Mobile Responsiveness */
@media (max-width: 768px) {
    .npm-popup-close-377f0f28 {
        display: flex;
    }

    .npm-popup-377f0f28 {
        width: calc(100% - 40px);
        max-width: 320px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .npm-popup-imgarea-377f0f28 {
        height: 90px;
    }

    .npm-popup-body-377f0f28 {
        padding: 16px;
        padding-top: 20px;
    }

    .npm-popup-name-377f0f28 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .npm-popup-desc-377f0f28 {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .npm-popup-stats-377f0f28 {
        padding-top: 12px;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .npm-popup-stat-val-377f0f28 {
        font-size: 14px;
    }

    .npm-popup-stat-key-377f0f28 {
        font-size: 9px;
    }
}

/* =======================================================================
   HOVERED PROVINCE HIGHLIGHT — v2
   Replaces the previous "hover highlight" block at the end of style.css.
   Delete that block entirely and paste this in its place.

   No fill override: the province keeps its own region colour and is simply
   lifted with brightness + saturation, so Central reads blue and Western /
   Northern read green without any per-region rules.
   ======================================================================= */

.saudi-dashboard-377f0f28-wrap {
    /* Tune the whole effect from here */
    --saudi-hover-brightness: 1.15;
    --saudi-hover-saturate: 1.15;
    --saudi-hover-ring: rgba(255, 255, 255, 0.5);   /* stroke on the hovered province */
    --saudi-hover-ring-width: 1.5px;
    --saudi-hover-dim: 0.7;                          /* the region's other provinces */
}

/* Smooth every property the hover touches */
.prov-path-377f0f28 {
    transition: opacity .3s ease, filter .3s ease, stroke .2s ease, stroke-width .2s ease;
}

.saudi-svg-377f0f28[data-active-region="central"] .prov-path-377f0f28[data-region="central"].npm-hover-377f0f28,
.saudi-svg-377f0f28[data-active-region="central"] .prov-path-377f0f28[data-region="central"]:hover,
.saudi-svg-377f0f28[data-active-region="western"] .prov-path-377f0f28[data-region="western"].npm-hover-377f0f28,
.saudi-svg-377f0f28[data-active-region="western"] .prov-path-377f0f28[data-region="western"]:hover,
.saudi-svg-377f0f28[data-active-region="northern"] .prov-path-377f0f28[data-region="northern"].npm-hover-377f0f28,
.saudi-svg-377f0f28[data-active-region="northern"] .prov-path-377f0f28[data-region="northern"]:hover {
    filter: brightness(var(--saudi-hover-brightness)) saturate(var(--saudi-hover-saturate)) !important;
    stroke: var(--saudi-hover-ring) !important;
    stroke-width: var(--saudi-hover-ring-width) !important;
    stroke-linejoin: round !important;
}


/* ── OPTIONAL: settle the rest of the region back while one is hovered ──
   The script writes opacity inline on every path, so this needs
   !important. Delete if you'd rather nothing else moves. */

.saudi-svg-377f0f28[data-active-region="central"]:has(.npm-hover-377f0f28) .prov-path-377f0f28[data-region="central"]:not(.npm-hover-377f0f28),
.saudi-svg-377f0f28[data-active-region="western"]:has(.npm-hover-377f0f28) .prov-path-377f0f28[data-region="western"]:not(.npm-hover-377f0f28),
.saudi-svg-377f0f28[data-active-region="northern"]:has(.npm-hover-377f0f28) .prov-path-377f0f28[data-region="northern"]:not(.npm-hover-377f0f28) {
    opacity: var(--saudi-hover-dim) !important;
}