.region-flag {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.region-flag-medium {
    display: inline-block;
    width: 42px;
    height: 32px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.flag-unknown {
    background-image: url("../images/flags/unknown.svg");
}

.flag-europe {
    background-image: url("../images/flags/europe.svg");
}

.flag-ukraine {
    background-image: url("../images/flags/ukraine.svg");
}

.flag-america {
    background-image: url("../images/flags/america.svg");
}

.flag-asia {
    background-image: url("../images/flags/asia.svg");
}

.flag-israel {
    background-image: url("../images/flags/israel.svg");
}

.flag-online {
    background-image: url("../images/flags/online.svg");
}

/* Hover effect for flags */
.region-toggle .mud-button-root:hover .region-flag {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Active flag style */
.custom-gradient .region-flag {
    transform: scale(1.1);
}