/* * CAD/USD Currency Switcher — Frontend Styles v2 * All selectors are scoped under .cucs-* to prevent theme conflicts. * Body classes .cucs-is-usd / .cucs-is-cad drive dual-price toggling. */ /* ══════════════════════════════════════════════════════ 1. DUAL-PRICE VISIBILITY (cache-compatible toggling) ══════════════════════════════════════════════════════ */ /* * Default: show CAD, hide USD. * JS adds .cucs-is-usd to when visitor is in USD mode. */ .cucs-usd-price { display: none !important; } .cucs-is-usd .cucs-cad-price { display: none !important; } .cucs-is-usd .cucs-usd-price { display: inline !important; } /* Wrapper is transparent — zero layout impact */ .cucs-price-wrap { display: inline; } /* ══════════════════════════════════════════════════════ 2. SWITCHER CONTAINER ══════════════════════════════════════════════════════ */ .cucs-switcher { display: inline-flex; align-items: center; gap: 0; font-size: 14px; font-family: inherit; position: relative; vertical-align: middle; /* Isolate from theme resets */ line-height: 1.4; box-sizing: border-box; } .cucs-switcher *, .cucs-switcher *::before, .cucs-switcher *::after { box-sizing: border-box; } /* ══════════════════════════════════════════════════════ 3. DROPDOWN STYLE (default) ══════════════════════════════════════════════════════ */ .cucs-select-wrap { position: relative; display: inline-flex; align-items: center; } .cucs-select { /* Override all theme styles */ all: unset; display: block; appearance: none; -webkit-appearance: none; background: #ffffff; border: 1.5px solid #d0d5dd; border-radius: 8px; padding: 7px 34px 7px 12px; font-size: 13.5px; font-weight: 500; color: #1d2939; cursor: pointer; min-width: 112px; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; line-height: 1.4; font-family: inherit; } .cucs-select:hover { border-color: #2271b1; } .cucs-select:focus-visible { border-color: #2271b1; box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.18); } .cucs-chevron { position: absolute; right: 10px; pointer-events: none; display: flex; align-items: center; color: #667085; transition: transform 0.2s ease; } .cucs-select:focus-visible ~ .cucs-chevron { transform: rotate(180deg); } /* ══════════════════════════════════════════════════════ 4. BUTTON STYLE ══════════════════════════════════════════════════════ */ .cucs-btn-group { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1.5px solid #d0d5dd; gap: 0; } .cucs-btn { /* Override all theme button styles */ all: unset; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 14px; background: #ffffff; cursor: pointer; font-size: 13px; font-weight: 600; color: #344054; line-height: 1; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; border-right: 1.5px solid #d0d5dd; white-space: nowrap; } .cucs-btn:last-child { border-right: none; } .cucs-btn:hover:not(.is-active) { background: #f5f8ff; color: #2271b1; } .cucs-btn.is-active { background: #2271b1; color: #ffffff; } .cucs-btn:focus-visible { outline: 2px solid #2271b1; outline-offset: -2px; } /* ══════════════════════════════════════════════════════ 5. MINIMAL STYLE ══════════════════════════════════════════════════════ */ .cucs-style-minimal .cucs-select { background: transparent; border-color: transparent; padding-left: 4px; font-weight: 700; color: #2271b1; min-width: 80px; } .cucs-style-minimal .cucs-select:hover, .cucs-style-minimal .cucs-select:focus-visible { border-color: #2271b1; background: #ffffff; } .cucs-style-minimal .cucs-chevron { color: #2271b1; } /* ══════════════════════════════════════════════════════ 6. LOADING INDICATOR ══════════════════════════════════════════════════════ */ .cucs-loading-indicator { display: none; align-items: center; margin-left: 8px; } .cucs-loading-indicator.is-visible { display: inline-flex; } .cucs-spinner { width: 15px; height: 15px; border: 2px solid #d0d5dd; border-top-color: #2271b1; border-radius: 50%; animation: cucs-spin 0.65s linear infinite; display: block; } @keyframes cucs-spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════ 7. THEME INTEGRATION HELPERS These classes make it easy to place the switcher in navbars, headers, and widget areas. ══════════════════════════════════════════════════════ */ /* In a dark header / nav bar */ .cucs-theme-dark .cucs-select { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #ffffff; } .cucs-theme-dark .cucs-chevron { color: rgba(255,255,255,0.7); } .cucs-theme-dark .cucs-btn-group { border-color: rgba(255,255,255,0.25); } .cucs-theme-dark .cucs-btn { background: transparent; color: rgba(255,255,255,0.85); border-right-color: rgba(255,255,255,0.2); } .cucs-theme-dark .cucs-btn.is-active { background: rgba(255,255,255,0.2); color: #ffffff; } /* ══════════════════════════════════════════════════════ 8. RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width: 480px) { .cucs-select { min-width: 90px; font-size: 13px; } .cucs-btn { padding: 6px 10px; font-size: 12px; } } /* Screen-reader only utility (used by shortcode label) */ .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }