/*
.my-options {
    display: none; 
    z-index: 1000; 
    position: absolute;
    max-height: var(--select-max-height, 300px); 
    min-height: var(--select-max-height, 300px); 
    overflow-y: auto;
    background: white; 
    border: 1px solid #ccc;
    width: 100%; 
    box-sizing: border-box;
}

.my-oneoption {
    display: flex; 
    padding: 10px; 
    align-items: center; 
    gap: 8px; 
    cursor: pointer;
    color: #333; 
}

.my-oneoption:hover {
    background: var(--select-hover-bg, #0089dd); 
    color: var(--select-hover-color, #FFFFFF);
*/
.my-options {
    display: none; 
    z-index: 1000; 
    position: absolute;
    max-height: var(--select-max-height, 300px); 
    min-height: var(--select-max-height, 300px); 
    overflow-y: auto;
    background: white; 
    border: 1px solid #ccc;
    width: 100%; /* зазвичай корисно для випадаючих списків */
    box-sizing: border-box;
}

.my-oneoption {
    display: flex; 
    padding: 10px; 
    align-items: center; 
    gap: 8px; 
    cursor: pointer;
    color: #333; /* колір тексту за замовчуванням */
}

/* Ховер тепер бере колір зі змінної, яку ми задамо в JS */
.my-oneoption:hover {
    /* Тепер тут три змінні, які ми задаємо через об'єкт у JS */
    background: var(--select-hover-bg, #0089dd); 
    color: var(--select-hover-color, #FFFFFF);

}