/* ================================================================
   NITRAA R5.1H-A3.3 — DIGITAL DOTTED WORLD GLOBE
   ================================================================ */

.nn-universe-visual{
    position:relative !important;
    overflow:hidden !important;

    background:
        radial-gradient(
            circle at 72% 50%,
            rgba(43,128,213,.34) 0%,
            rgba(14,75,153,.23) 30%,
            rgba(6,47,109,.08) 53%,
            transparent 70%
        ),
        linear-gradient(
            145deg,
            #07275f 0%,
            #0a3b80 50%,
            #07295f 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -30px 56px rgba(0,16,50,.24),
        0 16px 38px rgba(7,30,69,.16) !important;
}


/* Hide the old explanatory sentence even if any old markup survives. */
.nn-universe-visual-copy{
    display:none !important;
}


.nn-premium-globe-wrap{
    width:310px !important;
    height:310px !important;

    right:-8px !important;
    bottom:1px !important;

    opacity:1 !important;

    filter:
        drop-shadow(
            0 0 26px
            rgba(79,169,242,.24)
        )
        drop-shadow(
            0 20px 38px
            rgba(0,12,39,.34)
        ) !important;
}


.nn-premium-globe-canvas{
    width:100% !important;
    height:100% !important;

    display:block !important;

    opacity:1 !important;

    image-rendering:auto;
}


.nn-premium-globe-atmosphere{
    inset:-16px !important;

    background:
        radial-gradient(
            circle,
            transparent 48%,
            rgba(89,175,243,.08) 59%,
            rgba(111,196,255,.16) 67%,
            rgba(81,166,236,.05) 75%,
            transparent 81%
        ) !important;

    box-shadow:
        0 0 52px rgba(77,168,239,.19) !important;
}


.nn-premium-globe-sheen{
    inset:7% !important;

    background:
        radial-gradient(
            circle at 27% 20%,
            rgba(255,255,255,.18),
            rgba(190,227,255,.05) 21%,
            transparent 39%
        ) !important;

    opacity:.88 !important;
}


.nn-universe-city-strip{
    position:relative !important;
    z-index:9 !important;
}


@media(max-width:900px){

    .nn-premium-globe-wrap{
        width:282px !important;
        height:282px !important;

        right:0 !important;
        bottom:8px !important;
    }
}


@media(max-width:620px){

    .nn-universe-visual{
        min-height:480px !important;
    }


    .nn-premium-globe-wrap{
        width:292px !important;
        height:292px !important;

        right:50% !important;
        bottom:72px !important;

        transform:
            translateX(50%) !important;
    }


    .nn-universe-city-strip{
        left:12px !important;
        right:12px !important;
        bottom:14px !important;

        max-width:none !important;

        justify-content:center !important;
    }
}


@media(max-width:390px){

    .nn-premium-globe-wrap{
        width:266px !important;
        height:266px !important;
    }
}


/* ================================================================
   R5.1H-A3.5B COUNTRY FOOTPRINT
   ================================================================ */

.nn-universe-country-strip{
    position:absolute;
    left:18px;
    right:18px;
    bottom:14px;
    z-index:20;
}

.nn-country-strip-kicker{
    margin:0 0 7px;
    color:#eeb06d;
    font-size:8px;
    line-height:1;
    font-weight:700;
    letter-spacing:.18em;
}

.nn-country-strip-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
}

.nn-country-footprint{
    position:relative;
    min-width:0;
    padding:8px 7px 9px;

    border:1px solid rgba(210,230,247,.20);
    border-radius:11px;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.045)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 7px 18px rgba(0,16,48,.15);

    backdrop-filter:blur(7px);
}

.nn-country-footprint::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:32px;
    height:2px;
    background:
        linear-gradient(
            90deg,
            #db9148,
            transparent
        );
}

.nn-country-footprint-name{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    margin-bottom:4px;

    color:rgba(229,242,252,.87);

    font-size:7px;
    line-height:1;
    font-weight:700;
    letter-spacing:.08em;
}

.nn-country-footprint-total{
    color:#fff;

    font-size:18px;
    line-height:1;

    font-weight:650;
    letter-spacing:-.025em;
}

.nn-country-footprint:first-child{
    border-color:rgba(225,151,77,.48);

    background:
        linear-gradient(
            145deg,
            rgba(209,118,34,.27),
            rgba(255,255,255,.05)
        );
}

.nn-country-footprint:first-child
.nn-country-footprint-total{
    color:#ffd09b;
}

.nn-country-footprint-empty{
    grid-column:1/-1;
    color:#fff;
}

.nn-premium-globe-wrap{
    bottom:56px !important;
}


@media(max-width:620px){

    .nn-universe-visual{
        min-height:520px !important;
    }

    .nn-premium-globe-wrap{
        bottom:112px !important;
    }

    .nn-universe-country-strip{
        left:13px;
        right:13px;
        bottom:14px;
    }

    .nn-country-strip-kicker{
        text-align:center;
        margin-bottom:8px;
    }

    .nn-country-strip-grid{
        gap:4px;
    }

    .nn-country-footprint{
        padding:8px 4px 9px;
        text-align:center;
        border-radius:10px;
    }

    .nn-country-footprint-name{
        font-size:6.2px;
        letter-spacing:.04em;
    }

    .nn-country-footprint-total{
        font-size:15px;
    }
}

/* R5.1H-A3.6 CONNECTED GLOBAL FOOTPRINT START */

.nn-globe-panel-title{

    position:relative !important;

    z-index:35 !important;

    display:inline-block !important;

    max-width:150px !important;

    padding:
        4px
        14px
        7px
        0 !important;

    font-size:
        21px !important;

    line-height:
        1.06 !important;

    letter-spacing:
        -.025em !important;

    color:
        #ffffff !important;

    text-shadow:
        0
        3px
        14px
        rgba(0,17,48,.30) !important;

    background:
        linear-gradient(
            90deg,
            rgba(7,39,95,.98) 0%,
            rgba(7,39,95,.94) 72%,
            rgba(7,39,95,0) 100%
        ) !important;
}


.nn-universe-visual
.nn-premium-globe-wrap{

    width:
        275px !important;

    height:
        275px !important;

    right:
        -28px !important;

    bottom:
        66px !important;

    z-index:
        8 !important;

    opacity:
        1 !important;
}


.nn-universe-visual
.nn-premium-globe-canvas{

    filter:
        drop-shadow(
            0
            0
            9px
            rgba(170,222,255,.16)
        )
        contrast(1.08)
        brightness(1.05) !important;
}


.nn-universe-country-strip{

    z-index:
        40 !important;
}


@media(
    max-width:
    620px
){

    .nn-globe-panel-title{

        max-width:
            100% !important;

        font-size:
            19px !important;

        line-height:
            1.08 !important;

        padding-right:
            8px !important;
    }


    .nn-universe-visual
    .nn-premium-globe-wrap{

        width:
            252px !important;

        height:
            252px !important;

        right:
            50% !important;

        bottom:
            118px !important;

        transform:
            translateX(
                50%
            ) !important;
    }
}

/* R5.1H-A3.6 CONNECTED GLOBAL FOOTPRINT END */

/* R5.1H-A3.7 DESKTOP GLOBE FRAMING START */

/*
 * Desktop / Laptop:
 * keep the complete rotating sphere and atmospheric glow
 * inside the blue visual card.
 */

@media (min-width: 901px){

    .nn-universe-visual
    .nn-premium-globe-wrap{

        width:
            260px !important;

        height:
            260px !important;

        right:
            18px !important;

        bottom:
            66px !important;

        transform:
            none !important;

        z-index:
            8 !important;
    }


    .nn-universe-visual
    .nn-premium-globe-atmosphere{

        inset:
            -12px !important;
    }


    .nn-universe-visual
    .nn-globe-panel-title{

        position:
            relative !important;

        z-index:
            35 !important;

        max-width:
            160px !important;
    }

}


/*
 * Slightly tighter treatment for ordinary laptops.
 */

@media (min-width: 901px) and (max-width: 1250px){

    .nn-universe-visual
    .nn-premium-globe-wrap{

        width:
            246px !important;

        height:
            246px !important;

        right:
            12px !important;
    }

}


/*
 * IMPORTANT:
 * no mobile override here.
 * Existing centred mobile globe remains unchanged.
 */

/* R5.1H-A3.7 DESKTOP GLOBE FRAMING END */