/* Language Selector Styles */
.lang-selector {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 100;
}

.lang-selected {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    color: #fff;
    background-image: url(../img/icons/dropdown1.svg);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
    transition: color 0.3s, transform 0.3s, background-image 0.3s;
    user-select: none;
}

.lang-selected:hover {
    color: #4AA8FE;
    transform: translateY(1px);
}

/* Выпадающий список */
.lang-options {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 80px;
    background: #1F1F1F;
    border: 1px solid #359EFD;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(34, 105, 242, 0.3);
    padding: 4px 0;
    animation: langFadeIn 0.2s ease-out;
}

@keyframes langFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.lang-options::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #359EFD;
}

.lang-option {
    padding: 8px 20px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.lang-option:hover {
    background: linear-gradient(90deg, transparent, rgba(53, 158, 253, 0.2), transparent);
    color: #4AA8FE;
}

.lang-option[data-value="ru"]:hover::before,
.lang-option[data-value="en"]:hover::before,
.lang-option[data-value="tr"]:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: linear-gradient(180deg, #4AA8FE 0%, #2269F2 100%);
    border-radius: 0 2px 2px 0;
}

/* Активная опция */
.lang-option.active {
    color: #4AA8FE;
    background: rgba(53, 158, 253, 0.1);
}

/* Состояние открытости */
.lang-selector.open .lang-selected {
    color: #4AA8FE;
    background-image: url(../img/icons/dropdown1_.svg);
}

.lang-selector.open .lang-options {
    display: block;
}