:root {
    --selector-width: 200px;
    --border-color: #ddd;
    --hover-color: #f0f0f0;
}

.country-selector {
    width: var(--selector-width);
    font-family: sans-serif;
    position: relative;
    user-select: none;
}

/* 1. Se till att behållaren klipper allt innehåll utanför cirkeln */
.selected-country {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Ta bort padding för att låta flaggan nå kanten */
    /*width: 44px;*/ /* Matchar knappens storlek i din bild */
    /*height: 44px;*/ /* Matchar knappens storlek i din bild */
    /*height: 2.75rem;*/
    /*border-radius: 50%;*/ /* Gör den rund */
    overflow: hidden; /* DETTA döljer allt som sticker ut */
    position: relative; /* Säkerställer korrekt rendering */
}

.selected-country.rounded {
    border-radius: 50% !important; /* Gör den rund */
}

.selected-country.w-20 {
    width: 20px;
}

#select-country-list.margin-left {
    margin-left: 2rem;
}

/* 2. Se till att flaggan täcker hela ytan inuti cirkeln */
.rounded-btn-flag {
    /*width: 100%;*/
    /*height: 100%;*/
    height: 2.75rem;
    object-fit: cover; /* Fyller ut cirkeln utan att sträcka ut flaggan skevt */
    display: block;
}

/* Gör flaggan rund inuti knappen */
/*.rounded-btn-flag {
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;*/
    /* Valfritt: lägg till en tunn kant om flaggan är vit (t.ex. Finland) */
    /*box-shadow: 0 0 0 1px rgba(0,0,0,0.1);*/
/*}*/

.country-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-top: none;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}


/* Centrera radio-knappen och labeln vertikalt */
.country-list-item {
    padding-top: 1rem;
    display: flex !important;
    align-items: center; /* Centrerar allt i höjdled */
    gap: 10px; /* Skapar ett litet mellanrum mellan prick och label */
    padding: 5px 0; /* Ger lite luft mellan raderna */
}

/* Ta bort Bootstraps standard-marginal på radio-knappen som ofta trycker ner den */
.country-list-item .form-check-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    float: none !important; /* Förhindrar att pricken hoppar ur raden */
}

/* Se till att labeln också beter sig som en flex-container för flagga/text */
.country-list-item label {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0; /* Tar bort marginal som kan förskjuta höjden */
}


.country-list-item input[type="radio"] {
    display: block !important;
}

.country-list.show {
    display: block;
    
}

.country-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    gap: 10px;
}

.country-item:hover {
    background-color: var(--hover-color);
}


.selected-country img, .country-item img {
    object-fit: contain;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}




/* Ta bort eventuell padding som stör centrerat läge */
.selected-country {
    display: flex;
    align-items: center;
    justify-content: center;
}