/* Language Selector - Dropdown */ .lang-selector { position: relative; display: flex; align-items: center; height: 100%; } .lang-trigger { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; box-shadow: var(--shadow-sm); font-family: inherit; font-weight: 600; font-size: var(--text-sm); color: var(--gray-900); height: fit-content; } .lang-trigger:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .lang-trigger.active { border-color: var(--primary); background: var(--primary-light); } .lang-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .lang-code { font-weight: 700; letter-spacing: 0.5px; } .lang-chevron { width: 16px; height: 16px; transition: transform 0.2s ease; } .lang-trigger.active .lang-chevron { transform: rotate(180deg); } .lang-dropdown { position: absolute; top: 100%; right: 0; margin-top: var(--space-2); background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; backdrop-filter: blur(10px); z-index: 9999; } .lang-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .lang-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--border-light); text-decoration: none; color: var(--gray-900); } .lang-item:last-child { border-bottom: none; } .lang-item:hover { background: var(--primary-light); padding-left: var(--space-5); } .lang-item.active { background: var(--primary-light); } .lang-item.active .lang-item-name { font-weight: 700; color: var(--primary); } .lang-item-flag { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; } .lang-item-name { flex: 1; font-weight: 600; font-size: var(--text-sm); } .lang-item-code { font-size: var(--text-xs); color: var(--gray-500); font-weight: 600; background: var(--bg-hover); padding: 2px 8px; border-radius: var(--radius-sm); } @media (max-width: 767px) { .lang-selector { position: relative; top: auto; right: auto; transform: none; } .lang-trigger { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } .lang-flag { width: 20px; height: 20px; } .lang-code { display: block; } .lang-dropdown { right: 0; left: auto; min-width: 180px; } .lang-item { padding: var(--space-2) var(--space-3); } .lang-item-flag { width: 24px; height: 24px; } }