.zp-lang-switch { position: relative; display: flex; align-items: center; margin-right: var(--space-2); } .zp-lang-btn { appearance: none; background: transparent; border: 1px solid var(--zp-stroke); border-radius: var(--radius-sm); color: var(--zp-bone); font-family: inherit; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; padding: 0.35rem 0.65rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .zp-lang-btn:hover, .zp-lang-btn[aria-expanded="true"] { border-color: var(--zp-accent); color: var(--zp-accent); background: rgba(255,255,255,0.03); box-shadow: 0 0 12px var(--zp-stroke-2); } .zp-lang-arrow { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: 0.7; transform: translateY(1px); } .zp-lang-menu { position: absolute; top: 100%; right: 0; margin-top: var(--space-2); background: var(--zp-panel); border: 1px solid var(--zp-stroke-2); border-radius: var(--radius-sm); padding: var(--space-1); min-width: 120px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100; box-shadow: var(--shadow-soft), var(--shadow-neon); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .zp-lang-switch:hover .zp-lang-menu, .zp-lang-btn[aria-expanded="true"] + .zp-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .zp-lang-link { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; color: var(--zp-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; border-radius: 6px; transition: all 0.15s ease; } .zp-lang-link:hover { background: rgba(255,255,255,0.05); color: var(--zp-bone); } .zp-lang-link.is-active { color: var(--zp-accent); background: rgba(199,255,0,0.08); font-weight: 700; } .zp-lang-link.is-active::after { content: "✓"; font-weight: bold; margin-left: 8px; } @media (max-width: 768px) { .zp-lang-switch { margin-right: 0; } .zp-lang-menu { right: -10px; } }