/* Evolt Tax Toggle — toggle switch + price suffix styles. Cache-safe, Bricks-aware, accessible. */ /* ── Design tokens ─────────────────────────────────────────────────── */ :root { --evolt-primary: #f89e1d; --evolt-white: #ffffff; --evolt-grey-light: #d5d5d5; --evolt-text-dark: #1a1a1a; --evolt-text-dark-muted: #6b6b6b; } /* ── Toggle container ──────────────────────────────────────────────── */ .evolt-tax-toggle { display: inline-flex; align-items: center; font-family: inherit; font-size: 0.6em; line-height: 1; -webkit-user-select: none; user-select: none; } .evolt-tax-toggle[data-align] { display: flex; width: 100%; } .evolt-tax-toggle[data-align="left"] { justify-content: flex-start; } .evolt-tax-toggle[data-align="center"] { justify-content: center; } .evolt-tax-toggle[data-align="right"] { justify-content: flex-end; } /* ── Track ─────────────────────────────────────────────────────────── */ .evolt-tax-toggle__switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; min-width: 6em; height: 2em; padding: 0; margin: 0; border: none; border-radius: 50vw; background: var(--evolt-grey-light); cursor: pointer; transition: background-color 0.2s ease; outline: none; overflow: hidden; -webkit-appearance: none; appearance: none; } .evolt-tax-toggle__switch[aria-checked="true"] { background: var(--evolt-primary); } .evolt-tax-toggle__switch:focus-visible { box-shadow: 0 0 0 3px rgba(248, 158, 29, 0.45); } /* ── Thumb — sliding white pill, labels live inside ────────────────── */ .evolt-tax-toggle__thumb { position: absolute; top: 0.15em; bottom: 0.15em; left: 0.18em; width: calc(88% - 0.24em); border-radius: 50vw; background: var(--evolt-white); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); display: flex; align-items: center; justify-content: center; transition: left 0.2s ease; pointer-events: none; } .evolt-tax-toggle__switch[aria-checked="true"] .evolt-tax-toggle__thumb { left: calc(11% + 0.12em); } /* ── Labels — inside thumb, only active one visible ────────────────── */ .evolt-tax-toggle__label { font-size: 1em; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--evolt-text-dark); display: none; } /* Checked (Com IVA active) */ .evolt-tax-toggle__switch[aria-checked="true"] .evolt-tax-toggle__label--com { display: inline; } /* Unchecked (Sem IVA active) */ .evolt-tax-toggle__switch[aria-checked="false"] .evolt-tax-toggle__label--sem { display: inline; } /* ── "+IVA" suffix on converted prices ─────────────────────────────── */ .evolt-tax-toggle-suffix { font-size: 0.6em; font-weight: 400; line-height: 1; color: var(--evolt-text-dark-muted); white-space: nowrap; } /* ── Flash prevention ────────────────────────────────────────────── * The inline script adds --sem-pending when localStorage * says "sem". Pending rules have 0,3,0 specificity (matching the * aria-checked rules) and win by source order since they come after. */ @keyframes evolt-tax-toggle-reveal { to { opacity: 1; } } .evolt-tax-toggle--sem-pending .woocommerce-Price-amount, .evolt-tax-toggle--sem-pending .amount, .evolt-tax-toggle--sem-pending .price, .evolt-tax-toggle--sem-pending .brxe-woocommerce-product-price, .evolt-tax-toggle--sem-pending .brxe-product-price { opacity: 0; animation: evolt-tax-toggle-reveal 0s 0.4s forwards; } .evolt-tax-toggle--sem-pending .includes_tax { display: none; } .evolt-tax-toggle--sem-pending .evolt-tax-toggle__switch { background: var(--evolt-grey-light); transition: none; } .evolt-tax-toggle--sem-pending .evolt-tax-toggle__switch .evolt-tax-toggle__thumb { left: 0.12em; transition: none; } .evolt-tax-toggle--sem-pending .evolt-tax-toggle__switch .evolt-tax-toggle__label--sem { display: inline; } .evolt-tax-toggle--sem-pending .evolt-tax-toggle__switch .evolt-tax-toggle__label--com { display: none; } /* ── Accessibility: reduced motion ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .evolt-tax-toggle__switch, .evolt-tax-toggle__thumb { transition-duration: 0s; } .evolt-tax-toggle--sem-pending .woocommerce-Price-amount, .evolt-tax-toggle--sem-pending .amount, .evolt-tax-toggle--sem-pending .price, .evolt-tax-toggle--sem-pending .brxe-woocommerce-product-price, .evolt-tax-toggle--sem-pending .brxe-product-price { animation: none; opacity: 1; } }