.map-container {

    position: relative;

}



.region-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    /* height: 100%; */

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 1000;

}


.region-selector-btn{
    display: flex;
    align-items: center;
    cursor:pointer;
}


.region-modal-content {

    position: relative;

    background-color: #fff;

    /* margin: 5% auto; */

    padding: 20px;

    width: 100%;

    height: 100vw;

    /* max-width: 1000px; */

    /* border-radius: 8px; */

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.change-language-modal-title{

    display: flex;

    justify-content: center;

}



.close-modal {

    position: absolute;

    right: 20px;

    top: 10px;

    font-size: 48px;

    cursor: pointer;

}



#country-tooltip {

    z-index: 9999; /* Ensure the tooltip appears above other elements */

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}



.map-container {

    width: 100%;

    margin: 20px 0;

}







.world-map {

    width: 100%;

    height: auto;

}



.land {

    fill: #e0e0e0;

    stroke: #ffffff;

    stroke-width: 0.5;

    transition: all 0.3s ease;

}



/* .land:hover {

    fill: #c8e6ff;

} */



/* Default style for WPML countries */

.land.wpml-available, .wpml-available .land {

    fill: rgb(60, 107, 227); /* Default blue */

    cursor: pointer;

}



/* Hover style for WPML countries */

.land.wpml-available:hover, .wpml-available .land:hover {

    fill: rgb(22, 66, 177); /* Darker blue on hover */

    cursor: pointer;

}



/* Continent-specific styles */

.wpml-available.europe-country, .wpml-available.europe-country .land {

    fill: #00ABE6; /*  Europe */

    cursor: pointer;

}

.wpml-available.asea-country, .wpml-available.asea-country .land {

    fill: #06889D ; /*  Asia-Africa-Australia  */

}

.wpml-available.southamerica-country, .wpml-available.southamerica-country .land {

    fill: #AFCC46; /*  South America */

}

.wpml-available.northamerica-country, .wpml-available.northamerica-country .land {

    fill: #55A932  ; /*  North America */

}



/* Hover styles for continent-specific classes */

.wpml-available.europe-country:hover, .wpml-available.europe-country .land:hover {

    fill: #009ACF; /* Hover Europe */

}

.wpml-available.asea-country:hover, .wpml-available.asea-country .land:hover {

    fill: #057A8D; /* Hover for Asia-Africa-Australia */

}

.wpml-available.southamerica-country:hover, .wpml-available.southamerica-country .land:hover {

    fill: #9EB83F; /* Hover South America */

}

.wpml-available.northamerica-country:hover, .wpml-available.northamerica-country .land:hover {

    fill: #4C982D; /* Hover for North America */

}



.country-list {

    margin-top: 20px;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 10px;

    padding: 15px;

    background: #f5f5f5;

    border-radius: 4px;

}



.country-item {

    display: flex;

    align-items: center;

    padding: 8px;

    background: white;

    border-radius: 4px;

    cursor: pointer;

    transition: background-color 0.2s;

}



.country-item:hover {

    background-color: #f0f0f0;

}



.country-flag {

    width: 24px;

    height: 16px;

    margin-right: 10px;

}