@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

.analytics-card{
    display: flex;
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0px 8px rgba(0,0,0,0.4);
}

/* LEFT */
.analytics-info{
    display: flex;
    flex-direction: column;
     width: auto;
    padding: 40px;
    gap: 20px;
}

.label{
    color:#8a8a8a;
    font-size:16px;

}

.stat .number {
    margin: 5px 0 0;
    font-size: 24px;
    font-weight: bold;
    color: #1f2937;

}

.refresh{
    display:  inline-flex;
    background-color:#1B03A3;
    margin-top:auto;
    padding: 10px 20px;
    color:#ffffff;
    font-size:16px;
    font-weight: bold;
    border-radius: 10px;

}

/* MAP */
.map-container{
    flex:1;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.world-map{
    width: 100%;
    min-width: 600px;
    max-width: 800px;
    opacity :0.9;
}

/* MARKERS */
.marker{
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    background:#283142;
    color:white;
    padding:5px 15px;
    border-radius:10px;
    box-shadow:0 0px 8px rgba(0,0,0,0.4);
    transition: 0.3s;
}

.marker:hover{
    transform:translateY(-6px) scale(1.05);
}


.details{
    display:flex;
    flex-direction:column;
}

.details small{
    opacity:0.75;
    font-size:12px;
}

.details strong{
    font-size:16px;
    margin: 0px;
    padding: 0px;
}

.marker::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: inherit;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 50%, transparent);
}


/* Malaysia */
.malaysia{
    top:55%;
    left:68%;
}

/* East & Southeast Asia */
.eastasia{
    top:25%;
    left:70%;
}

/* South Asia */
.southasia{
    top:42%;
    left:61%;
}

/* Middle East */
.middleeast{
    top:40%;
    left:48%;
}

/* Africa */
.africa{
    top:58%;
    left:48%;
}

/* Europe */
.europe{
    top:22%;
    left:46%;
}

/* North & South America */
.americas{
    top:34%;
    left:18%;
}

/* Oceania */
.oceania{
    top:68%;
    left:78%;
}

/* Malaysia */
.marker.malaysia{
    background:#4FC3F7;
}

/* East & Southeast Asia */
.marker.eastasia{
    background:#52bb55;
}

/* South Asia */
.marker.southasia{
    background:#9ad952;
}

/* Middle East */
.marker.middleeast{
    background:#ff9b05;
}

/* Africa */
.marker.africa{
    background:#f82068;
}

/* Europe */
.marker.europe{
    background:#4558c6;
}

/* Americas */
.marker.americas{
    background:#bc2fd5;
}

/* Oceania */
.marker.oceania{
    background:#00a695;
}

.region-list{
    display:none;
}


/*____________________________________________________________________________________________________________________________________*/

/* Mobile Styles */
@media only screen and (max-width: 873px) {

    .analytics-card{
        flex-direction: column;
    }

    .analytics-info{
        padding: 20px;
        gap: 10px;
    }

        .label{
        color:#8a8a8a;
        font-size:16px;
        }

        .stat .number {
            margin: 5px 0 0;
            font-size: 20px;
        }

        .refresh{
            margin: 20px 0px;
        }

    .map-container{
        padding: 20px;
    }

        .world-map{
            width: 100%;
            min-width: 0px;
            max-width: 100%;
            opacity :0.9;
        }
            
            .marker{
                display:none;
            }

        .region-list{
            display:flex;
            flex-direction:column;
            padding: 20px;
            gap:10px;
            margin-top: 0px;
        }

            .region{
                display:flex;
                justify-content:space-between;
                align-items:center;
                gap:10px;
            }

            .continent{
                display:inline-flex;
                align-items:center;
                justify-content:center;
                padding:5px 10px;
                border-radius:10px;
                color:#fff;
                font-size:12px;
                font-weight:bold;
                white-space:nowrap;
            }

            .region strong{
                font-size: 16px;
                color:#1f2937;
            }

                .continent.malaysia{
                    background:#4FC3F7;
                }

                .continent.eastasia{
                    background:#4CAF50;
                }

                .continent.southasia{
                    background:#8BC34A;
                }

                .continent.middleeast{
                    background:#FF9800;
                }

                .continent.africa{
                    background:#E91E63;
                }

                .continent.europe{
                    background:#3F51B5;
                }

                .continent.americas{
                    background:#9C27B0;
                }

                .continent.oceania{
                    background:#009688;
                }

}



/*____________________________________________________________________________________________________________________________________*/
/* Tablet Styles */
@media only screen and (min-width: 874px) and (max-width: 1280px) {

    .analytics-card{
            overflow-x: scroll;
    }

    .world-map{
    width: 100%;
    min-width: 600px;
    max-width: 800px;
    opacity :0.9;
}
}