/* Svarga switchers (language + currency) — aligned with theme header nav */ .svarga-switchers { gap: 12px; flex-shrink: 0; align-items: center; } /* Above typical floating chat/help widgets (~99999 … 2147483647) while open */ .svarga-switchers:has(.switcher-dropdown.is-open) { position: relative; z-index: 2147483645; } .switcher-dropdown.is-open { position: relative; z-index: 2147483646; } .svarga-switchers__gap { display: inline-block; width: 1px; height: 1.4rem; background: rgba(0, 0, 0, 0.12); margin: 0 2px; flex-shrink: 0; } .switcher-dropdown { position: relative; display: inline-flex; align-items: center; vertical-align: middle; } .switcher-dropdown__trigger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 1.5rem 1rem; background: none; border: none; border-radius: 0; color: #464646 !important; font-size: 1.4rem !important; font-weight: 500; text-transform: uppercase; line-height: 1.25; letter-spacing: normal; cursor: pointer; font-family: inherit; } .switcher-dropdown__trigger:hover, .switcher-dropdown__trigger:focus { color: #734866 !important; outline: none; } .switcher-dropdown.is-open .switcher-dropdown__trigger { color: #734866 !important; } .switcher-dropdown__arrow { transition: transform 0.2s ease; flex-shrink: 0; } .switcher-dropdown.is-open .switcher-dropdown__arrow { transform: rotate(180deg); } .switcher-dropdown__panel { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 100%; white-space: nowrap; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; border-top: 2px solid #734866; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); z-index: 2147483647; } .switcher-dropdown__panel[hidden] { display: none !important; } .switcher-dropdown__panel a { display: block; padding: 1rem 1.2rem; color: #464646 !important; font-size: 1.4rem !important; font-weight: 400; text-transform: uppercase; text-decoration: none !important; } .switcher-dropdown__panel a:hover, .switcher-dropdown__panel a:focus { background: rgba(115, 72, 102, 0.06); color: #734866 !important; } @media (max-width: 991.98px) { .switcher-dropdown__trigger { padding: 0.85rem 0.6rem; } } /* On touch viewports the options panel is portaled to (class added by JS) and shown as a bottom-sheet popup, full-width and centred on the viewport so a transformed ancestor — e.g. the mmenu drawer — can't trap or offset it. */ .switcher-sheet-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 2147483646; animation: svarga-sheet-fade 0.2s ease; } .switcher-dropdown__panel--sheet { position: fixed; top: auto; left: 0; right: 0; bottom: 0; margin: 0; min-width: 0; width: 100%; max-width: 100%; border: none; border-radius: 1.2rem 1.2rem 0 0; box-shadow: 0 -0.6rem 2.4rem rgba(0, 0, 0, 0.18); padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 2147483647; animation: svarga-sheet-up 0.25s ease; } /* Drag-handle bar */ .switcher-dropdown__panel--sheet::before { content: ''; display: block; width: 3.6rem; height: 0.4rem; margin: 0.8rem auto 0.4rem; border-radius: 0.2rem; background: rgba(0, 0, 0, 0.2); } .switcher-dropdown__panel--sheet a { padding: 1.4rem 2rem; text-align: center; } @keyframes svarga-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes svarga-sheet-fade { from { opacity: 0; } to { opacity: 1; } } /* Inline language + currency switcher (mobile menu) — plain text links. Languages on one row, currency (if shown) on the row below. */ .svarga-inline-switchers { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .svarga-inline-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2rem; } .svarga-inline-option { display: inline-flex; align-items: center; padding: 0; background: none; border: none; color: #464646 !important; font-size: 1.5rem !important; font-weight: 500; line-height: 1.3; text-transform: uppercase; text-decoration: none !important; cursor: pointer; } .svarga-inline-option:hover, .svarga-inline-option:focus { color: #734866 !important; } .svarga-inline-option.is-active { color: #734866 !important; font-weight: 700; cursor: default; } /* ─── Zero-flash currency switch ───────────────────────────────────────────── The currency switcher renders every currency at once; which one is "current" is chosen purely by the html.cur-usd class (set from the cookie before first paint), so switching is an instant class flip with no reload and no flash. Default = EUR. */ /* Trigger label: show the active currency. */ .currency-switcher .switcher-dropdown__current .svarga-cc--usd { display: none; } html.cur-usd .currency-switcher .switcher-dropdown__current .svarga-cc--usd { display: inline; } html.cur-usd .currency-switcher .switcher-dropdown__current .svarga-cc--eur { display: none; } /* Panel options: hide the active currency, offer the other(s). Panel links are display:block. */ .currency-switcher .switcher-dropdown__panel .svarga-cc-opt--eur { display: none; } html.cur-usd .currency-switcher .switcher-dropdown__panel .svarga-cc-opt--eur { display: block; } html.cur-usd .currency-switcher .switcher-dropdown__panel .svarga-cc-opt--usd { display: none; } /* Inline (mobile-menu) currency: both shown side by side; the active one is highlighted. */ .svarga-inline-currency .svarga-inline-option.svarga-cc--eur { color: #734866 !important; font-weight: 700; cursor: default; } html.cur-usd .svarga-inline-currency .svarga-inline-option.svarga-cc--eur { color: #464646 !important; font-weight: 500; cursor: pointer; } html.cur-usd .svarga-inline-currency .svarga-inline-option.svarga-cc--usd { color: #734866 !important; font-weight: 700; cursor: default; }