/* ──────────────────────────────────────────────────────────
   FictionX Language Switcher
   Inherits the active template skin (.main-bg, .main-color, …)
   so the brand color updates automatically when the skin changes.
   ────────────────────────────────────────────────────────── */

.lang-switcher{position:relative;display:inline-block;vertical-align:middle;margin:0 6px;line-height:1;}
.lang-switcher--left {float:left;}
.lang-switcher--right{float:right;}

/* Trigger reuses .btn .btn-md .btn-round visual but widens for label + caret */
.lang-switcher .btn.lang-trigger{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:35px;min-width:auto;padding:0 11px;
    border-radius:4px;
    font-family:inherit;font-size:12px;font-weight:600;line-height:24px;
    text-shadow:unset;letter-spacing:.2px;
    cursor:pointer;
    box-shadow:none;
    transition:background .18s ease,color .18s ease;
}
.lang-switcher .lang-trigger > i.fa-globe{font-size:11px;opacity:.95;}
.lang-switcher .lang-trigger > .lang-current{
    max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:12px;
}
.lang-switcher .lang-trigger > i.lang-caret{
    font-size:9px;transition:transform .22s ease;opacity:.85;margin-inline-start:2px;
}
.lang-switcher[data-open="true"] .lang-trigger > i.lang-caret{transform:rotate(180deg);}

/* Dropdown panel – reuses .dropdown-menu visual hooks from the template */
.lang-switcher .dropdown-menu.lang-menu{
    display:block;
    position:absolute;top:calc(100% + 8px);inset-inline-end:0;
    min-width:220px;max-width:280px;max-height:380px;overflow-y:auto;
    padding:6px;margin:0;list-style:none;
    background:#fff;border:1px solid rgba(0,0,0,.10) !important;
    border-radius:4px;
    box-shadow:0 2px 6px rgba(0,0,0,.06),0 12px 28px rgba(0,0,0,.10);
    opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
    transform-origin:top center;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
    z-index:9999;
}
.lang-switcher[data-open="true"] .dropdown-menu.lang-menu{
    opacity:1;visibility:visible;transform:translateY(0) scale(1);
}
.lang-switcher .dropdown-menu.lang-menu::-webkit-scrollbar{width:6px;}
.lang-switcher .dropdown-menu.lang-menu::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;}

.lang-switcher .dropdown-menu.lang-menu > li{
    list-style:none;padding:0;margin:0;float:none;line-height:normal;
}
.lang-switcher .dropdown-menu.lang-menu > li > a{
    display:flex !important;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 14px !important;
    margin:0 !important;
    border:0 !important;border-radius:4px !important;
    color:#1a1f24;text-decoration:none;
    font-size:14px;font-weight:500;line-height:1.4;
    background:transparent;
    text-transform:none;
    transition:background .15s ease,color .15s ease,padding .15s ease;
}
.lang-switcher .dropdown-menu.lang-menu > li > a:hover,
.lang-switcher .dropdown-menu.lang-menu > li > a:focus-visible{
    background:rgba(0,0,0,.04);
    outline:none;text-decoration:none;
    padding-inline-start:18px !important;
}
.lang-switcher .dropdown-menu.lang-menu > li.active > a{
    background:rgba(0,0,0,.05);
    cursor:default;font-weight:700;
}
.lang-switcher .dropdown-menu.lang-menu > li.active > a .lang-code{
    background:transparent;
    border:1px solid currentColor;
}

.lang-switcher .lang-native{font-size:14px;}
.lang-switcher .lang-code{
    font-family:'Segoe UI',Inter,Arial,sans-serif;
    font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    color:#7a8590;
    background:rgba(0,0,0,.05);
    padding:3px 8px;border-radius:4px;
    flex-shrink:0;
}

/* The active item inherits .main-color from the skin */
.lang-switcher .dropdown-menu.lang-menu > li.active > a{color:inherit;}
.lang-switcher .dropdown-menu.lang-menu > li.active > a.main-color{font-weight:700;}

/* Mobile */
@media (max-width:600px){
    .lang-switcher .btn.lang-trigger{height:22px;padding:0 9px;font-size:11px;line-height:22px;}
    .lang-switcher .lang-current{max-width:80px;font-size:11px;}
    .lang-switcher .dropdown-menu.lang-menu{min-width:200px;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    .lang-switcher .btn.lang-trigger,
    .lang-switcher .dropdown-menu.lang-menu,
    .lang-switcher .lang-caret,
    .lang-switcher .dropdown-menu > li > a{transition:none;}
}