Responsive Pricing Component with toggle with pure CSS and no JS

Hi there! I attempted to do this challenge without using JS as suggested in the bonus task.

The trick here was to make prices different depending on the state of the toggle button (whether it is checked or not). I struggled to choose the correct CSS selector that would get me all the price containers through the checked toggle button. Since the toggle button and the price containers are children of different parents at different levels, all I could think of is to use :has() pseudo-class which works fine in the modern versions of most browsers but is experimental in Firefox; so unless you enable it from the Firefox flags, the solution doesn’t work in this browser.

If anyone can recommend a better selector/solution that is supported by all browsers I will be very grateful. Thanks in advance 🙂