/* AUN — i18n.css v2
   Compact dropdown language switcher.
   Replaces the flat pill row with a globe + current lang + chevron trigger.
   ===================================================== */

/* ── DESKTOP: dropdown wrapper ── */
.lang-switcher {
     position: relative;
     margin-right: 12px;
     flex-shrink: 0;
}

/* Trigger button */
.lang-trigger {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 5px 10px 5px 8px;
     border: none;
     border-radius: 20px;
     background: rgba(0,0,0,0.07);
     color: rgba(0,0,0,0.65);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     cursor: pointer;
     transition: background 0.15s, color 0.15s;
     white-space: nowrap;
     font-family: inherit;
     line-height: 1;
}
.lang-trigger:hover {
     background: rgba(0,0,0,0.12);
     color: rgba(0,0,0,0.85);
}
.lang-switcher.open .lang-trigger {
     background: rgba(0,0,0,0.12);
     color: rgba(0,0,0,0.9);
}

.lang-globe {
     width: 14px;
     height: 14px;
     flex-shrink: 0;
}
.lang-current {
     min-width: 18px;
}
.lang-chevron {
     width: 8px;
     height: 5px;
     flex-shrink: 0;
     transition: transform 0.2s;
}
.lang-switcher.open .lang-chevron {
     transform: rotate(180deg);
}

/* Dropdown panel */
.lang-panel {
     display: none;
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0,0,0,0.14);
     padding: 6px;
     min-width: 80px;
     z-index: 1000;
     flex-direction: column;
     gap: 2px;
}
.lang-switcher.open .lang-panel {
     display: flex;
}

/* Language options inside the dropdown panel */
.lang-panel .lang-option {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 7px 14px;
     border-radius: 8px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: rgba(0,0,0,0.6);
     text-decoration: none;
     transition: background 0.12s, color 0.12s;
     white-space: nowrap;
}
.lang-panel .lang-option:hover {
     background: rgba(0,0,0,0.06);
     color: rgba(0,0,0,0.9);
}
.lang-panel .lang-option.active {
     background: #f97060;
     color: #fff;
     pointer-events: none;
     cursor: default;
}

/* ── MOBILE DRAWER LANG SWITCHER ── */
.drawer-lang {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     padding: 16px 20px 8px;
     border-top: 1px solid rgba(0,0,0,0.1);
     margin-top: 8px;
}
.drawer-lang .lang-option {
     font-size: 13px;
     font-weight: 700;
     padding: 7px 14px;
     border-radius: 20px;
     background: rgba(0,0,0,0.06);
     color: rgba(0,0,0,0.6);
     text-decoration: none;
     transition: background 0.12s, color 0.12s;
}
.drawer-lang .lang-option:hover {
     background: rgba(0,0,0,0.1);
     color: rgba(0,0,0,0.9);
}
.drawer-lang .lang-option.active {
     background: #f97060;
     color: #fff;
}

/* ── RESPONSIVE ── */
@media (max-width: 799px) {
     .lang-switcher { display: none; }
}
@media (min-width: 800px) {
     .drawer-lang { display: none !important; }
}