/* Presentation for the switcher lang-switcher.js builds. The button reuses the .language-select / .lang-select skins, so only the flag, the row layout and the list are defined here. */ /* The wrapper must not disturb layout: sign-in and register position the switcher absolutely against the card, and a wrapper box of its own became the containing block instead. The list is fixed, so nothing here needs a positioned ancestor. */ .lang-dd { display: contents; } /* Kept in the DOM so its value and its onchange stay the source of truth. */ .lang-dd > select { display: none !important; } .lang-dd-btn { display: inline-flex !important; align-items: center; gap: 7px; padding-left: 10px !important; text-align: left; line-height: 1; } .lang-dd-flag { flex: 0 0 auto; width: 18px; height: 13.5px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(11, 31, 58, .12); } .lang-dd-label { white-space: nowrap; } /* Parented to by the script, so it no longer inherits the switcher's font. */ .lang-dd-list { position: fixed; z-index: 2000; font-family: Inter, "Open Sans", -apple-system, "Segoe UI", Arial, sans-serif; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #DDE6F3; border-radius: 10px; box-shadow: 0 12px 28px rgba(11, 31, 58, .18); } .lang-dd-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; outline: none; color: #0B1F3A; font-size: 13px; font-weight: 700; white-space: nowrap; } .lang-dd-option.is-active { background: #F1F5FC; } .lang-dd-option[aria-selected="true"] { color: #1E5BFF; } .lang-dd-option:focus-visible { box-shadow: 0 0 0 2px rgba(30, 91, 255, .35); } /* The landing page's switcher is taller and sits on a dark bar; match its larger flag. */ .lang-select.lang-dd-btn { padding-left: 12px !important; } .lang-select.lang-dd-btn .lang-dd-flag { width: 20px; height: 15px; }