Why does the Popup window become transparent and overlap elements on the mobile version of the site?

Question

Layout

Hello!
There is a site that is under development http://excursion.moskva
Expected behavior:
There are excursions on the site. Each tour can be ordered by clicking on the "Order a tour" button under the tour:

After clicking this button, this Popup-window appears:
Problem:
The problem manifests itself on mobile devices.
The bottom line is that a Popup-window appears on tefon, but with zero transparency , although opacity: 1 is strictly specified in css (I made sure of this by displaying debugging information about transparency alert()).
The problem is that after clicking the "order a tour" button in the mobile version of the browser, not a single button on the site works, because a transparent popup window appears on top of the entire site.
As a result of the problem:
When you try to click on the "order a tour" button, the keyboard is activated on the phone. The fact is that a transparent popup-window "hangs" over the entire site. And it turns out that the transparent input is exactly above that button.
Also, I can "blindly" click on the buttons in the same Popup-window. For example, if I poke the screen for a long time, then I can hit the close button of the Popup window and it will close.
What I did:

• I added opacity property with important with all possible prefixes
  
• Set opacity via Js
  

Note:
If we run the following command:
alert(getComputedStyle(popup).opacity)
Then we will get 1 in the output!
How is this possible?! Why opacity 1 and I don't see it
CSS popup selector:
If you want to look at that magic block, you can get it by running the following command:
document.querySelectorAll(".t-popup")[1]
Many thanks in advance to everyone who helps.

Answer 1

What about z-index? Are you sure no one is blocking it?