/* Ula Group — Regional Presence (Figma artboard height 688px) */

.regional {
    position: relative;
    isolation: isolate;
    background: #ffffff;
    overflow: hidden;
}

.regional__stage {
    position: relative;
    width: 100%;
    height: 688px;
    container-type: inline-size;
    container-name: regional;
    overflow: hidden;
}

.regional__map-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.regional__world-map,
.regional__connectors,
.regional__markers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.regional__world-map {
    z-index: 0;
}

.regional__connectors {
    z-index: 4;
    pointer-events: none;
}

.regional__markers {
    z-index: 4;
    pointer-events: none;
}

/* ---------- Country shapes ---------- */
.regional__world-map path {
    fill: #e7e9ee;
    stroke: #ffffff;
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    cursor: default;
}

.regional__world-map path.is-presence {
    /* Same look as other countries — no fill highlight on selected regions */
    fill: #e7e9ee;
    stroke: #ffffff;
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
    pointer-events: auto;
    cursor: default;
}

.regional__world-map path.is-presence.is-clickable {
    cursor: pointer;
}

.regional__world-map path.is-presence:hover,
.regional__world-map path.is-active {
    fill: #e7e9ee;
}

/* ---------- Connector layer (Figma 4:4845 / 4:4848 / 4:4862) ---------- */
.regional__connector-line {
    fill: none;
    stroke: #6ac0ec;
    stroke-width: 3;
    stroke-dasharray: 4 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 1;
    transition: opacity 0.15s ease, stroke-width 0.15s ease;
}

.regional__connector-dot {
    fill: #6ac0ec;
    transition: opacity 0.15s ease;
}

.regional__connector-line.is-active {
    stroke-width: 3.5;
    opacity: 1;
}

/* ---------- Marker pills (Figma chat bubbles) ---------- */
.regional__marker {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 24px 8px 12px;
    border-radius: 96px;
    background: #ffffff;
    box-shadow: 0 14px 17px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    pointer-events: auto;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Line joins the bottom center of the pill (Jordan) */
.regional__marker--attach-bottom {
    transform: translate(-50%, -100%);
}

/* Line joins the left center of the pill (Iraq) */
.regional__marker--attach-left {
    transform: translate(0, -50%);
}

/* Line joins the right center of the pill (Saudi Arabia) */
.regional__marker--attach-right {
    transform: translate(-100%, -50%);
}

.regional__marker.is-clickable {
    cursor: pointer;
}

.regional__marker--attach-bottom.is-clickable:hover,
.regional__marker--attach-bottom.is-clickable.is-active {
    transform: translate(-50%, -100%) scale(1.04);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.14);
}

.regional__marker--attach-left.is-clickable:hover,
.regional__marker--attach-left.is-clickable.is-active {
    transform: translate(0, -50%) scale(1.04);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.14);
}

.regional__marker--attach-right.is-clickable:hover,
.regional__marker--attach-right.is-clickable.is-active {
    transform: translate(-100%, -50%) scale(1.04);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.14);
}

.regional__marker-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
    background: #eee;
}

.regional__marker-flag-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.regional__marker-name {
    font-family: "Granadia-Bold", "Granadia-Book", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(0.875rem, calc(100cqw * 20 / 1010), 1.25rem);
    line-height: 1.55;
    letter-spacing: -0.4px;
    color: #4f4f4f;
}

/* ---------- Header overlay ---------- */
.regional__header {
    position: absolute;
    left: 50%;
    top: calc(82 / 666 * 100%);
    width: min(76%, 768px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
}

.regional__heading {
    margin: 0;
    font-family: "Granadia-Bold", "Granadia-Book", Helvetica, Arial, sans-serif;
    font-size: clamp(2rem, calc(100cqw * 64 / 1010), 4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #293579;
}

.regional__intro {
    margin: 0;
    width: 100%;
    font-family: "Granadia-Book", Helvetica, Arial, sans-serif;
    font-size: clamp(0.875rem, calc(100cqw * 18 / 1010), 1.125rem);
    line-height: 1.61;
    letter-spacing: -0.02em;
    color: #4f4f4f;
    text-align: justify;
}

html[dir="rtl"] .regional__header,
html[dir="rtl"] .regional__intro {
    text-align: center;
}

@media (max-width: 991.98px) {
    .regional__stage {
        height: 688px;
    }

    .regional__header {
        top: 5%;
        width: min(92%, 640px);
    }

    .regional__marker {
        min-height: 40px;
        padding: 6px 12px 6px 6px;
    }

    .regional__marker-flag {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .regional__heading {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .regional__intro {
        font-size: 0.875rem;
    }

    .regional__marker-name {
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .regional__world-map path,
    .regional__connector-line,
    .regional__connector-dot,
    .regional__marker {
        transition: none;
    }
}