/* ==========================================================
 * VERA_LANGUAGE_UI_V2
 * VERA_LANGUAGE_DROPDOWN_V1
 * ========================================================== */

.vera-language-header {
    position: relative;
    z-index: 30;

    margin-left: auto;

    flex: 0 0 auto;
    overflow: visible;
}


.vera-language-header
+ .landing-profile {
    margin-left: 8px;
}


/* ----------------------------------------------------------
 * Dropdown shell
 * ---------------------------------------------------------- */

.vera-language-switch {
    position: relative;

    display: inline-block;

    font: inherit;
}


.vera-language-trigger {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 11px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 999px;

    background:
        rgba(15,10,16,.34);

    color: #fff;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;

    cursor: pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


.vera-language-trigger:hover {
    background:
        rgba(255,255,255,.075);

    border-color:
        rgba(255,255,255,.19);
}


.vera-language-trigger[aria-expanded="true"] {
    background:
        rgba(229,166,187,.13);

    border-color:
        rgba(229,166,187,.28);

    box-shadow:
        0 8px 28px
        rgba(0,0,0,.18);
}


.vera-language-trigger:focus-visible,
.vera-language-option:focus-visible {
    outline:
        2px solid
        rgba(229,166,187,.76);

    outline-offset: 2px;
}


.vera-language-trigger-flag,
.vera-language-option-flag {
    width: 20px;

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

    flex: 0 0 20px;

    font-size: 16px;
    line-height: 1;
}


.vera-language-trigger-label {
    min-width: 17px;

    text-align: center;
}


.vera-language-chevron {
    margin-left: 1px;

    color:
        rgba(245,240,246,.68);

    font-size: 10px;

    transition:
        transform .16s ease;
}


.vera-language-trigger[aria-expanded="true"]
.vera-language-chevron {
    transform:
        rotate(180deg);
}


/* ----------------------------------------------------------
 * Vertical menu
 * ---------------------------------------------------------- */

.vera-language-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;

    z-index: 1000;

    min-width: 166px;

    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 6px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 14px;

    background:
        rgba(20,14,21,.97);

    box-shadow:
        0 16px 42px
        rgba(0,0,0,.36);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/* VERA_DROPDOWN_VIEWPORT_FIT_V1: 10 languages, short screens. */
.vera-language-menu {
    max-height: min(65dvh, 408px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.vera-language-menu[hidden] {
    display: none !important;
}


.vera-language-option {
    width: 100%;
    min-height: 38px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 10px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color:
        rgba(245,240,246,.78);

    font: inherit;
    font-size: 12px;
    font-weight: 650;

    text-align: left;

    cursor: pointer;

    transition:
        background .14s ease,
        color .14s ease;
}


.vera-language-option:hover {
    color: #fff;

    background:
        rgba(255,255,255,.065);
}


.vera-language-option.active {
    color: #fff;

    background:
        rgba(229,166,187,.14);
}


.vera-language-option-label {
    flex: 1 1 auto;
}


.vera-language-option-check {
    margin-left: auto;

    color:
        rgba(241,184,204,.98);

    font-size: 13px;
    font-weight: 900;
}


.vera-language-option-check[hidden] {
    visibility: hidden;
}


/* ----------------------------------------------------------
 * Account settings language block
 * ---------------------------------------------------------- */

.vera-language-setting {
    margin: 0 0 16px;
    padding: 0 0 16px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.vera-language-setting-title {
    margin-bottom: 5px;

    color: #fff;

    font-size: .84rem;
    font-weight: 800;
}


.vera-language-setting-help {
    max-width: 540px;

    margin-bottom: 11px;

    color:
        rgba(220,211,222,.68);

    font-size: .71rem;
    line-height: 1.5;
}


.vera-language-setting-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    overflow: visible;
}


.vera-language-setting
.vera-language-menu {
    right: auto;
    left: 0;
}


.vera-language-status {
    color:
        rgba(205,194,208,.62);

    font-size: .67rem;
    line-height: 1.4;
}


/* ----------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------- */

@media (max-width: 640px) {

    .vera-language-header {
        margin-left: auto;
    }


    .vera-language-header
    + .landing-profile {
        margin-left: 5px;
    }


    .vera-language-trigger {
        min-height: 34px;

        gap: 5px;

        padding:
            0 9px;

        font-size: 10px;
    }


    .vera-language-trigger-flag {
        font-size: 15px;
    }


    .vera-language-menu {
        top:
            calc(100% + 7px);

        min-width: 156px;
    }


    .vera-language-option {
        min-height: 37px;
    }


    .vera-language-setting-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================
 * VERA_LANGUAGE_REAL_FLAGS_V1
 * Real local SVG flags instead of Unicode regional indicators.
 * ========================================================== */

.vera-language-trigger {
    min-width: 54px;

    padding-left: 10px;
    padding-right: 9px;

    gap: 7px;
}


.vera-language-trigger-label {
    display: none;
}


.vera-language-trigger-flag {
    width: 23px;
    height: 16px;

    display: block;

    flex: 0 0 23px;

    object-fit: cover;

    border-radius: 3px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.13),
        0 2px 5px rgba(0,0,0,.28);
}


.vera-language-option-flag {
    width: 23px;
    height: 16px;

    display: block;

    flex: 0 0 23px;

    object-fit: cover;

    border-radius: 3px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.12),
        0 2px 5px rgba(0,0,0,.24);
}


.vera-language-option {
    gap: 10px;
}


@media (max-width: 640px) {

    .vera-language-trigger {
        min-width: 51px;

        padding-left: 9px;
        padding-right: 8px;
    }


    .vera-language-trigger-flag,
    .vera-language-option-flag {
        width: 22px;
        height: 15px;

        flex-basis: 22px;
    }
}