/* Kontejner musí být relativní, aby 'absolute' uvnitř fungovalo správně */
.autocomplete-container {
    position: relative;
    width: 70%;
    height: 50px;
    float: left;
    margin: 0px 0px 0px 0px;
}

/* Samotný input */
.autocomplete-input {
    width: 100%;
    height: 50px;
    padding: 10px;
    box-sizing: border-box; /* Důležité: padding nerozšíří input přes 100% */
    border: 1px solid #e6e6e6;
    border-radius: 0;
}

/* Seznam výsledků - bude přesně pod inputem a stejně široký */
.autocomplete-results {
    position: absolute;
    top: 100%; /* Hned pod inputem */
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border-top: none; /* Aby to nepůsobilo zdvojeně u hrany inputu */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    border-radius: 0 0 4px 4px;
}

/* Jeden řádek výsledku */
.result-item {
    padding: 12px 15px;
    cursor: pointer;
    display: block; /* Každý výsledek na novém řádku */
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap; /* Text se nezalomí, pokud je dlouhý */
    overflow: hidden;
    text-overflow: ellipsis; /* Přidá "..." pokud je text moc dlouhý */
    color: #333;
    text-align: left;
}

.result-item:last-child {
    border-bottom: none;
}

/* Aktivní stav (šipky nebo hover) */
.result-item.active,
.result-item:hover {
    background-color: #f1f1f1;
    color: #000;
}

.result-item.active {
    background-color: #e9ecef; /* Mírně odlišná barva pro navigaci klávesnicí */
    border-left: 3px solid #42b04f; /* Modrý proužek na boku pro lepší vizuál */
}