/* Language Selector - Custom Dropdown */ .language-selector { position: relative; } .language-selector-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background-color: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: 50px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); transition: all 0.2s ease; user-select: none; } .language-selector-toggle:hover { background-color: var(--color-border); border-color: var(--color-border-medium); } .language-selector-toggle i { font-size: 14px; color: var(--color-text-muted); } .language-selector-toggle .lang-code { font-weight: 600; color: var(--color-text); } .language-selector-toggle .dropdown-arrow { font-size: 10px; color: var(--color-text-muted); transition: transform 0.2s ease; margin-left: 2px; } .language-selector.open .dropdown-arrow { transform: rotate(180deg); } .language-selector-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; max-height: 420px; overflow-y: auto; background-color: var(--color-bg-surface); border-radius: 12px; box-shadow: 0 4px 20px var(--color-shadow-lg); border: 1px solid var(--color-border); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 1000; } .language-selector.open .language-selector-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .language-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-size: 14px; color: var(--color-text-secondary); transition: background-color 0.15s ease; } .language-option:hover { background-color: var(--color-bg-hover); } .language-option.active { background-color: var(--color-accent-bg-sm); color: var(--color-accent); } .language-option .lang-flag { font-size: 18px; line-height: 1; } .language-option .lang-name { flex: 1; } .language-option .lang-check { color: var(--color-accent); font-size: 12px; opacity: 0; } .language-option.active .lang-check { opacity: 1; } /* ── Language selector inside user menu ── */ .user-menu .language-selector { width: 100%; } /* Match user-menu-item appearance exactly */ .user-menu .language-selector-toggle { width: 100%; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; padding: 12px 20px; gap: 12px; color: var(--color-text-dark); font-size: 14px; cursor: pointer; } .user-menu .language-selector-toggle:hover, .user-menu .language-selector-toggle:focus { background: var(--color-bg-hover) !important; border: none !important; outline: none !important; } .user-menu .language-selector-toggle i.fa-globe { width: 20px; text-align: center; font-size: 15px; color: var(--color-text-subtle); } .user-menu .language-selector-toggle .lang-code { font-weight: 500; font-size: 13px; color: var(--color-text-dark); } /* Inline accordion — no floating */ .user-menu .language-selector-dropdown { position: static !important; box-shadow: none !important; border: none !important; border-top: 1px solid var(--color-border-light); border-radius: 0 !important; background: var(--color-bg-muted); max-height: 0; overflow: hidden; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: max-height 0.25s ease; z-index: auto !important; } .user-menu .language-selector.open .language-selector-dropdown { max-height: 260px; overflow-y: auto; } /* Language options inside user menu — compact rows */ .user-menu .language-option { padding: 10px 20px 10px 28px; font-size: 13.5px; }