/* =========================================================
   Language Switcher
   ========================================================= */

.language-switcher {
    position: relative;

    height: 100%;
}


/* =========================================================
   Current Language Button
   ========================================================= */

.language-switcher__toggle {
    position: relative;

    height: 100%;
    min-width: 110px;

    margin: 0;
    padding: 0 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;
    outline: none;

    background: transparent;

    color: #222;

    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    appearance: none;
}


/* =========================================================
   Current Language
   ========================================================= */

.language-switcher__current {
    display: inline-block;

    min-width: 56px;

    color: #222;

    white-space: nowrap;

    visibility: visible;
    opacity: 1;
}


/* =========================================================
   Bottom Hover Line
   ========================================================= */

.language-switcher__toggle::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 0;

    height: 2px;

    background: #111;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.2s ease;
}


/* Hover */

.language-switcher:hover .language-switcher__toggle::after {
    transform: scaleX(1);
}


/* =========================================================
   Arrow
   ========================================================= */

.language-switcher__arrow {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: -3px;
}


.language-switcher__arrow span {
    width: 6px;
    height: 6px;

    display: block;

    border-right: 1px solid #555;
    border-bottom: 1px solid #555;

    transform: rotate(45deg);

    transition: transform 0.2s ease;
}


/* Hover → Arrow Up */

.language-switcher:hover .language-switcher__arrow span {
    transform: rotate(225deg);
}


/* =========================================================
   Dropdown
   ========================================================= */

.language-switcher__dropdown {
    position: absolute;

    top: 100%;
    right: 0;

    min-width: 150px;

    margin: 0;
    padding: 8px 0;

    background: #fff;

    border: 1px solid #eee;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    z-index: 1100;
}


/* Hover → Show Dropdown */

.language-switcher:hover .language-switcher__dropdown {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   Language List
   ========================================================= */

.language-switcher__list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.language-switcher__item {
    margin: 0;
    padding: 0;
}


/* =========================================================
   Language Links
   ========================================================= */

.language-switcher__dropdown a {
    display: block;

    margin: 0;
    padding: 10px 16px;

    color: #333;

    text-decoration: none;

    font-size: 14px;
    font-weight: 400;

    line-height: 20px;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* Hover */

.language-switcher__dropdown a:hover {
    color: #111;

    background: #f7f7f7;
}


/* =========================================================
   Active Language
   ========================================================= */

.language-switcher__dropdown .is-active a,
.language-switcher__dropdown a.is-active {
    color: #111;

    font-weight: 500;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .language-switcher__toggle {
        min-width: auto;

        padding: 0 8px;

        font-size: 13px;
    }

    .language-switcher__toggle::after {
        left: 8px;
        right: 8px;
    }

    .language-switcher__dropdown {
        min-width: 140px;
    }

}