.icon-en { background-image: url(/assets/images/flags/en.svg); }
.icon-es { background-image: url(/assets/images/flags/es.svg); }
.icon-de { background-image: url(/assets/images/flags/de.svg); }
.icon-ua { background-image: url(/assets/images/flags/ua.svg); }
.icon-ru { background-image: url(/assets/images/flags/ru.svg); }

.custom-dropdown {
    position: relative;
    width: fit-content;
    max-width: 100%;
    padding: .35rem 1rem;
    align-self: center;
}

.custom-dropdown .dropdown-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    justify-content: space-between;
}

.custom-dropdown .dropdown-header:hover {
    background-color: #f9f9f9;
}

.custom-dropdown .dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: white;
    border-top: none;
    border-radius: 0 0 4px 4px;
    transition: all 0.3s ease;
    z-index: 10;
}

.custom-dropdown .dropdown-options.open {
    max-height: 300px;
    border: 1px solid #ccc;
}

.dropdown-option {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-option:hover {
    background-color: #f1f1f1;
}

.custom-dropdown .icon {
    width: 21px;
    height: 15px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
}

.dropdown-arrow {
    border: solid #666;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.3s;
    margin-left: 8px;
}

.dropdown-header.active .dropdown-arrow {
    transform: rotate(-135deg);
}