/*=====================================================
  GLOBAL.CSS
  FINTECHOISIS | GPIR
  Global Coverage & Payment Ecosystems
======================================================*/


/*=====================================================
  GLOBAL SECTION
======================================================*/

#global{

    position:relative;

    padding:110px 0;

    background:linear-gradient(
        180deg,
        var(--color-surface) 0%,
        #ffffff 100%
    );

    overflow:hidden;
}

#global::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at left top,
        rgba(184,134,59,.08),
        transparent 42%
    );

    pointer-events:none;
}

/*=====================================================
  CONTAINER
======================================================*/

.global-container{

    width:min(92%,1400px);

    margin:auto;

    position:relative;

    z-index:2;
}

/*=====================================================
  SECTION HEADER
======================================================*/

.global-header{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;
}

.global-header span{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(184,134,59,.12);

    color:var(--color-primary);

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.12em;
}

.global-header h2{

    margin:22px 0 18px;

    font-size:var(--fs-section-heading);

    line-height:1.15;

    color:var(--text-heading);
}

.global-header p{

    max-width:760px;

    margin:auto;

    color:var(--text-body);

    line-height:1.8;

    font-size:1.05rem;
}

/*=====================================================
  MAP PANEL
======================================================*/

.map-panel{

    display:flex;

    flex-direction:column;

    gap:50px;
}

/*=====================================================
  GLOBAL COVERAGE MAP
======================================================*/

.world-map{

    position:relative;

    border-radius:24px;
    padding:40px;
    margin-bottom:50px;
    transition:.35s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:34px;
    background:
        linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)),
        linear-gradient(135deg, var(--bg-page), var(--color-dark-2));
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:var(--shadow-lg);
}

/*=====================================================
  INTERACTIVE WORLD MAP CANVAS
======================================================*/

.world-map-canvas{

    position:relative;

    z-index:2;

    width:100%;

    border-radius:18px;

    overflow:hidden;

    background:linear-gradient(160deg,#1e2432,#191d27);

    /* The map rebuilds ~1,600 SVG nodes on lazy init and repositions
       markers/tooltips on every hover — contain scopes that work to the
       canvas itself instead of forcing the rest of the page to
       re-check layout. Safe alongside overflow:hidden above, which
       already clips anything that would be affected by paint
       containment. */
    contain:layout paint style;
}

.world-map-stage{

    position:relative;

    width:100%;

    aspect-ratio:2/1;
}

.world-map-canvas svg{

    position:absolute;

    inset:0;

    display:block;

    width:100%;

    height:100%;
}

.world-map-markers{

    position:absolute;

    inset:0;
}

.wm-marker{

    position:absolute;

    display:block;

    width:16px;

    height:16px;

    margin:-8px 0 0 -8px;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;
}

.wm-marker::before{

    content:"";

    position:absolute;

    inset:-7px;
}

.wm-marker-dot{

    position:absolute;

    inset:5px;

    border-radius:50%;

    background:rgba(246,243,238,.55);

    transition:transform .2s ease, background .2s ease;
}

.wm-marker--active .wm-marker-dot{

    inset:3px;
}

.wm-marker:hover .wm-marker-dot,
.wm-marker:focus-visible .wm-marker-dot{

    transform:scale(1.6);

    background:#f6d9a8;
}

.wm-marker-pulse{

    position:absolute;

    inset:3px;

    border-radius:50%;

    opacity:.5;

    animation:wmPulse 2.6s ease-out infinite;
}

/* Corridor-flow dots and marker pulses are paused via JS (viewport +
   tab-visibility aware, see assets/js/world-map.js) rather than left
   running as wasted compositor work while off-screen or backgrounded.
   !important is required here because both animations are set via
   inline style from JS (offset-path circles) or a base rule with equal
   specificity (marker pulses); this is the standard, narrow way to
   override an animation shorthand's play-state from an external
   stylesheet. */
.world-map-canvas.wm-paused .wm-flow-dot,
.world-map-canvas.wm-paused .wm-marker-pulse{

    animation-play-state:paused !important;
}

.wm-marker:focus-visible{

    outline:2px solid #e0a458;

    outline-offset:3px;

    border-radius:50%;
}

@keyframes wmPulse{

    0%,100%{ transform:scale(1); opacity:.55; }
    50%{ transform:scale(2.4); opacity:0; }
}

@keyframes wmFlow{

    0%{ offset-distance:0%; opacity:0; }
    6%{ opacity:1; }
    92%{ opacity:1; }
    100%{ offset-distance:100%; opacity:0; }
}

.world-map-tooltip{

    position:absolute;

    z-index:5;

    min-width:180px;

    max-width:min(240px, calc(100vw - 60px));

    transform:translate(14px, -50%);

    padding:14px 16px;

    border-radius:12px;

    background:#242833;

    border:1px solid rgba(255,255,255,.14);

    box-shadow:0 12px 30px rgba(0,0,0,.35);

    pointer-events:none;
}

.world-map-tooltip.wm-tooltip--flip{

    transform:translate(calc(-100% - 14px), -50%);
}

.world-map-tooltip strong{

    display:block;

    color:#f6f3ee;

    font-size:.92rem;

    margin-bottom:6px;
}

.wm-tooltip-status{

    display:inline-block;

    padding:3px 9px;

    border-radius:var(--radius-pill);

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    margin-bottom:8px;
}

.wm-tooltip-status--active{

    background:rgba(224,164,88,.18);

    color:#e0a458;
}

.wm-tooltip-status--soon{

    background:rgba(255,255,255,.10);

    color:rgba(255,255,255,.65);
}

.world-map-tooltip p{

    margin:0 0 8px;

    color:rgba(255,255,255,.72);

    font-size:.78rem;

    line-height:1.5;
}

.wm-tooltip-link{

    display:inline-block;

    pointer-events:auto;

    color:#e0a458;

    font-size:.78rem;

    font-weight:600;

    text-decoration:none;
}

.wm-tooltip-link:hover{

    text-decoration:underline;
}

.world-map-legend{

    position:relative;

    z-index:3;

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:space-between;

    gap:10px 18px;

    padding:12px 20px;

    border-top:1px solid rgba(255,255,255,.08);
}

.world-map-legend-caption{

    font-size:.64rem;

    letter-spacing:.08em;

    color:rgba(255,255,255,.35);

    font-weight:600;

    text-transform:uppercase;
}

.world-map-legend-items{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:6px 16px;
}

.wm-legend-item{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:.68rem;

    color:rgba(255,255,255,.6);

    font-weight:600;

    white-space:nowrap;

    text-decoration:none;

    cursor:pointer;
}

.wm-legend-item--active{

    color:rgba(255,255,255,.85);
}

.wm-legend-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    display:inline-block;

    flex-shrink:0;
}

.wm-legend-dot--ring{

    background:#e0a458;

    box-shadow:0 0 0 2px rgba(255,255,255,.85);
}

@media (max-width:640px){

    .world-map-legend{

        flex-direction:column;

        align-items:flex-start;

        padding:12px 16px;
    }

    .world-map-legend-items{

        justify-content:flex-start;
    }
}

.world-map-canvas--error::after{

    content:"Map data unavailable — please refresh.";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    color:rgba(255,255,255,.5);

    font-size:.85rem;
}

/*=====================================================
  WORLD MAP CONTENT
======================================================*/

.world-map-content{

    position:relative;

    z-index:2;

    max-width:720px;

    margin:0 auto;

    text-align:center;

}

.map-kicker{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:var(--radius-pill);

    background:rgba(255,255,255,.10);

    color:var(--color-primary);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.10em;

    text-transform:uppercase;

}

.world-map-content h3{

    margin-bottom:18px;

    color:var(--color-white);

    font-size:clamp(1.8rem,3vw,2.6rem);

}

.world-map-content p{

    max-width:650px;

    margin:0 auto 28px;

    color:rgba(255,255,255,.82);

    line-height:1.8;

}

.map-status{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

}

.map-status span{

    padding:8px 14px;

    border:1px solid rgba(255,255,255,.16);

    border-radius:var(--radius-pill);

    color:rgba(255,255,255,.9);

    font-size:.78rem;

    font-weight:600;

}

.world-map::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top right,
        rgba(184,134,59,.14),
        transparent 45%
    );
}

.world-map h3{

    position:relative;

    z-index:2;

    color:#ffffff;

    font-size:2rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    text-align:center;
}

.world-map:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.map-header{
    margin-bottom:28px;
}

.map-header h3{
    margin-top:8px;
    font-size:2rem;
    font-weight:700;
}

.coverage-map{
    width:100%;
    display:block;
    max-width:1100px;
    margin:auto;
}
/*=====================================================
  REGION STATUS
======================================================*/

.region-status{

    display:inline-flex;

    margin-top:20px;

    padding:6px 12px;

    border-radius:var(--radius-pill);

    background:rgba(212,175,55,.10);

    color:var(--color-primary);

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.region-card-future{

    opacity:.82;

}

.region-card-future:hover{

    opacity:1;

}

/*=====================================================
  REGION GRID
======================================================*/

.region-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;
}

/*=====================================================
  REGION CARD
======================================================*/

.region-card{

    position:relative;

    padding:30px;

    background:#fff;

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border-radius:var(--radius-md);

    border:1px solid rgba(0,0,0,.05);

    box-shadow:var(--shadow-sm);

    transition:.35s ease;
}

.region-card:hover{

    transform:translateY(-6px);

    border-color:rgba(184,134,59,.35);

    box-shadow:var(--shadow-md);
}

/*=====================================================
  REGION HEADER
======================================================*/

.region-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;
}

.region-icon{

    font-size:22px;

    line-height:1;

    flex-shrink:0;
}

.region-header h4{

    margin:0;

    font-size:1.35rem;

    color:var(--text-heading);

    line-height:1.3;
}
/*=====================================================
  REGION TITLE
======================================================*/

.region-card h4{

    color:var(--text-heading);
}

/*=====================================================
  REGION DESCRIPTION
======================================================*/

.region-card p{

    color:var(--hero-light-body);

    line-height:1.8;

    font-size:var(--fs-body-sm);

    text-align:justify;

    text-align-last:left;

    margin-bottom:24px;
}

/*=====================================================
  REGION LIST
======================================================*/

.region-card ul{

    list-style:none;

    padding:0;

    margin:0;
}

.region-card li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px 0;

    color:var(--text-body);

    font-size:.96rem;
}

.region-card li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--color-primary);

    flex-shrink:0;
}

/*=====================================================
  HOVER ACCENT
======================================================*/

.region-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    border-radius:10px;

    background:linear-gradient(
        to bottom,
        var(--color-primary),
        #E8D98A
    );

    transition:height .35s ease;
}

.region-card:hover::before{

    height:100%;
}

/*=====================================================
  ENTRANCE ANIMATION
======================================================*/

.region-card{

    animation:fadeRegion .7s ease both;
}

.region-card:nth-child(2){

    animation-delay:.12s;
}

.region-card:nth-child(3){

    animation-delay:.24s;
}

@keyframes fadeRegion{

    from{

        opacity:0;

        transform:translateY(28px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/*=====================================================
  GLOBAL METRICS
======================================================*/

.global-metrics{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-top:20px;
}

.global-box{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(184,134,59,.15);

    border-radius:999px;
    font-weight:600;
    text-decoration:none;

    padding:14px 28px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:.3s ease;
}

.global-box:hover{

    transform:translateY(-3px);

    border-color:rgba(184,134,59,.35);

    box-shadow:var(--shadow-md);
}

.global-box h3{

    margin:0 0 12px;

    font-size:2rem;

    font-weight:700;

    color:var(--color-primary);

    line-height:1.1;
}

.global-box p{

    margin:0;

    color:var(--hero-light-body);

    line-height:1.7;

    font-size:var(--fs-body-sm);

    text-align:justify;

    text-align-last:left;
}

/*=====================================================
  CALL TO ACTION
======================================================*/

.global-action{

    display:flex;

    justify-content:center;

    margin-top:60px;
}

.global-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        var(--color-primary),
        #d4a64f
    );

    box-shadow:
        0 14px 30px
        rgba(184,134,59,.28);

    transition:
        transform .30s ease,
        box-shadow .30s ease;
}

.global-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 42px
        rgba(184,134,59,.34);
}

/*=====================================================
  ACCESSIBILITY
======================================================*/

.global-btn:focus-visible{

    outline:3px solid var(--color-primary);

    outline-offset:5px;
}

@media (prefers-reduced-motion:reduce){

    .region-card,
    .global-box,
    .global-btn{

        animation:none;

        transition:none;

        transform:none;
    }

    .wm-marker-pulse{

        animation:none;

        display:none;
    }

}

/*=====================================================
  RESPONSIVE
======================================================*/

@media (max-width:1200px){

    .global-container{

        width:min(94%,1200px);
    }

    .world-map{

        min-height:380px;
    }

}

@media (max-width:992px){

    #global{

        padding:90px 0;
    }

    .global-header{

        margin-bottom:60px;
    }

    .world-map{

        min-height:340px;
    }

    .world-map h3{

        font-size:1.7rem;
    }

    .region-grid{

        gap:24px;
    }

    .region-card{

        padding:30px;
    }

    .global-metrics{

        gap:20px;
    }

}

@media (max-width:768px){

    #global{

        padding:80px 0;
    }

    .global-header h2{

        font-size:2rem;
    }

    .world-map{

        min-height:280px;

        border-radius:22px;
    }

    .world-map h3{

        font-size:1.4rem;
    }

    .region-grid{

        grid-template-columns:1fr;
    }

    .global-metrics{

        grid-template-columns:1fr;
    }

}

@media (max-width:576px){

    #global{

        padding:70px 0;
    }

    .global-header span{

        font-size:.72rem;

        padding:8px 18px;
    }

    .global-header h2{

        font-size:1.7rem;
    }

    .region-card{

        padding:24px;

        border-radius:20px;
    }

    .global-box{

        padding:28px 22px;
    }

    .global-box h3{

        font-size:1.7rem;
    }

    .global-btn{

        width:100%;

        justify-content:center;

        padding:15px 24px;
    }

}

/*=====================================================
  END OF GLOBAL.CSS
======================================================*/