/* LANGUAGE SWITCHER */ .lang-wrap{position:relative;flex-shrink:0} .lang-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;padding:7px 12px;border-radius:7px;font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap} .lang-btn:hover{background:rgba(255,255,255,.22)} .lang-btn svg{transition:transform .2s;flex-shrink:0} .lang-btn.open svg{transform:rotate(180deg)} .lang-label{font-size:.82rem} .lang-code{font-size:.74rem;opacity:.72} .lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #dadce0;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16);min-width:220px;z-index:9998;overflow:hidden} .lang-dropdown.show{display:block;animation:ddFade .18s ease} @keyframes ddFade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} .lang-dd-head{padding:11px 16px 9px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9aa0a6;border-bottom:1px solid #f1f3f4} .lang-list{max-height:300px;overflow-y:auto;padding:5px 0} .lang-list::-webkit-scrollbar{width:4px} .lang-list::-webkit-scrollbar-thumb{background:#dadce0;border-radius:2px} .lang-item{display:flex;align-items:center;gap:10px;padding:9px 16px;text-decoration:none;color:#202124;font-size:.87rem;font-weight:600;transition:background .14s} .lang-item:hover{background:#f1f5ff;text-decoration:none} .lang-item.active{background:#e8f0fe;color:#1a73e8} .lang-item .lf{font-size:1.15rem;flex-shrink:0} .lang-item .ln{flex:1;line-height:1.2} .lang-item .lna{font-size:.73rem;color:#9aa0a6;margin-top:2px;display:block} .lang-item.active .lna{color:#1a73e8;opacity:.7} /* MOBILE BOTTOM SHEET */ @media (max-width:640px){ /* THE KEY FIX: dropdown and backdrop live on , not inside the header */ .lang-dropdown{ position:fixed !important; top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; min-width:100% !important; max-height:72vh; border-radius:18px 18px 0 0 !important; display:flex !important; flex-direction:column; visibility:hidden; opacity:0; transform:translateY(100%); pointer-events:none; /* Must be higher than site-header z-index:100 AND its stacking context */ z-index:999999 !important; overflow:hidden; transition:transform .25s ease, opacity .2s ease, visibility 0s linear .25s; } .lang-dropdown.show{ visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; transition:transform .25s ease, opacity .2s ease, visibility 0s linear 0s; } .lang-dd-head{ flex-shrink:0; background:#fff; border-radius:18px 18px 0 0; } .lang-list{ flex:1; overflow-y:auto; background:#fff; -webkit-overflow-scrolling:touch; } .lang-item{ min-height:48px; } /* Backdrop is a separate div appended to body by JS — NOT a child of header */ .lang-mob-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999998; touch-action:none; } .lang-btn{ min-height:44px; } } @media (min-width: 900px){ .site-header .header-inner{ display: flex; align-items: center; width: 100%; } .logo{ flex-shrink: 0; } .lang-wrap{ margin-left: auto; margin-right: 0; flex-shrink: 0; } .header-nav{ margin-left: 24px; } }