.language-switcher { position: relative; z-index: 1000; } .language-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 25px; color: #2d2d2d; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .language-toggle:hover { background-color: rgba(255, 255, 255, 0.2); border-color: #4a7c59; } .language-label { min-width: 50px; text-align: left; } .dropdown-arrow { transition: transform 0.3s ease; } .dropdown-arrow.open { transform: rotate(180deg); } .language-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 999; } .language-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: white; border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); overflow: hidden; min-width: 200px; z-index: 1001; } .language-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 18px; background: white; border: none; text-align: left; cursor: pointer; transition: background-color 0.2s ease; font-family: 'DM Sans', sans-serif; } .language-option:hover { background-color: #f5f5f5; } .language-option.active { background-color: #f0f7f3; } .language-option:not(:last-child) { border-bottom: 1px solid #f0f0f0; } .language-native { font-size: 16px; font-weight: 500; color: #2d2d2d; margin-right: 8px; } .language-english { font-size: 13px; color: #7d7d7d; flex: 1; } @media (max-width: 768px) { .language-toggle { padding: 8px 12px; font-size: 13px; } .language-label { min-width: 40px; } .language-dropdown { right: -10px; min-width: 180px; } .language-option { padding: 12px 16px; } .language-native { font-size: 15px; } .language-english { font-size: 12px; } }