/* Contenitore CT */
.ct-select {
    position: relative;     /* riferimento per il dropdown position absolute */
    cursor: pointer;
    user-select: none;
    display: inline-flex;   /* meglio di inline-block per allineamento */
    align-items: center;    /* centra verticalmente */
    vertical-align: middle;
}

/* Selezione attuale */
.ct-select .ct-selected {
    display: inline-flex;      /* mantiene testo e immagine in linea */
    align-items: center;       /* centra verticalmente */
    gap: 5px;
    line-height: 1.5;          /* evita eccessivo spazio sopra/sotto */
    font-family: monospace;
}

/* Lista opzioni */
.ct-select .ct-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 10;
    min-width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

/* Singola opzione */
.ct-select .ct-options li {
    display: flex;
    align-items: center;  /* centra verticalmente anche le opzioni */
    gap: 5px;
    padding: 4px 6px;
}

/* Hover opzione */
.ct-select .ct-options li:hover {
    background: #eee;
}

/* Opzione attualmente selezionata */
.ct-select .ct-options li.ct-active {
    background: #cce5ff;
    font-weight: bold;
}

/* Immagini bandiere */
.ct-select .ct-selected img,
.ct-select .ct-options img {
    height: 20px;
    width: auto;
    display: inline-block;
    vertical-align: middle;  /* meglio con flex, ma rimane compatibile */
}

/* Responsive */
@media (max-width: 600px) {
    .ct-select .ct-selected {
        gap: 3px;
        padding: 3px 4px;
        font-size: 0.9em;
        line-height: 1.5;   /* aggiunto per mantenere allineamento verticale */
    }
    .ct-select .ct-options li {
        gap: 3px;
        padding: 2px 4px;
        font-size: 0.9em;
    }
}