/* Magical Big Button — structural styles. Per-instance colors/size/font are set as inline CSS custom properties by the [magical_big_button] shortcode, so these var() fallbacks only apply if something goes unset. */ /* Page builders and themes (Elementor especially) ship global CSS for every `a`/`button` on the site — forced uppercase text, underlines, inherited line-height, a theme "link color", sometimes a background reset. Below, every property that's never touched by our own :hover/animation rules is marked !important so it can't be clobbered by that global CSS regardless of load order. box-shadow/transform/opacity are deliberately left WITHOUT !important — they're actively animated by the idle/entrance features, and an !important here would freeze those animations (author !important outranks CSS Animations in the cascade, so it would win over the keyframes and the button would stop moving). The element+class selector (instead of a bare class) adds a little extra specificity for those two properties, since !important isn't available as a safety net for them. */ a.magical-big-button-btn, button.magical-big-button-btn { box-sizing: border-box !important; position: relative; display: inline-flex !important; align-items: center !important; gap: var(--magical-big-button-gap, 10px) !important; overflow: hidden; text-decoration: none !important; text-transform: none !important; white-space: nowrap; line-height: normal !important; cursor: pointer; /* Reset