.language-toggle{
position:fixed!important;
top:auto!important;
right:max(18px,env(safe-area-inset-right))!important;
bottom:max(18px,env(safe-area-inset-bottom))!important;
left:auto!important;
z-index:11000!important;
display:inline-flex;
align-items:center;
gap:2px;
padding:5px;
border-radius:999px;
background:rgba(5,5,7,.16);
border:1px solid rgba(125,0,242,.2);
box-shadow:0 16px 34px rgba(0,0,0,.24),0 0 24px rgba(123,45,255,.12),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
pointer-events:auto!important;
touch-action:manipulation;
transform:translate3d(0,0,0);
will-change:transform;
contain:layout paint;
}
.language-toggle a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-width:44px;
height:34px;
padding:0 12px;
border-radius:999px;
color:#d9c9ef;
font-size:12px;
font-weight:900;
letter-spacing:.12em;
text-decoration:none;
transition:color .24s ease,background .24s ease,transform .24s ease,box-shadow .24s ease;
pointer-events:auto;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.language-toggle a:hover,
.language-toggle a:focus-visible{
color:#fff;
background:rgba(255,255,255,.08);
outline:0;
transform:translateY(-1px);
}
.language-toggle a[aria-current="true"]{
color:#fff;
background:rgba(123,45,255,.62);
box-shadow:0 0 22px rgba(123,45,255,.34);
}
.language-toggle a[lang="en"]::before{
content:"🇨🇦";
font-size:14px;
line-height:1;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.32));
}
.language-toggle .flag-stack{
display:inline-flex;
align-items:center;
gap:4px;
line-height:1;
}
.language-toggle .quebec-flag{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
width:18px;
height:12px;
overflow:hidden;
border-radius:2px;
background:#fff;
box-shadow:0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.32);
}
.language-toggle .quebec-flag::before,
.language-toggle .quebec-flag::after{
content:"";
position:absolute;
background:#fff;
z-index:2;
}
.language-toggle .quebec-flag::before{
left:7px;
top:0;
width:4px;
height:100%;
}
.language-toggle .quebec-flag::after{
left:0;
top:4px;
width:100%;
height:4px;
}
.language-toggle .quebec-flag span{
display:flex;
align-items:center;
justify-content:center;
background:#003DA5;
color:#fff;
font-size:4px;
line-height:1;
}
.language-toggle .canada-flag{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:14px;
line-height:1;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.32));
}
.language-toggle .language-fr{
padding-left:10px;
}
.language-toggle .language-fr .canada-flag{
display:none;
}
.language-toggle .language-divider{
width:1px;
height:18px;
background:linear-gradient(180deg,transparent,rgba(125,0,242,.46),transparent);
}
@media(max-width:760px){
.language-toggle{
top:auto!important;
right:max(14px,env(safe-area-inset-right))!important;
bottom:max(14px,calc(env(safe-area-inset-bottom) + 14px))!important;
left:auto!important;
}
.language-toggle a{
min-width:42px;
height:32px;
font-size:11px;
}
}
@media(prefers-reduced-motion:reduce){
.language-toggle a{transition:none;}
}