/* * Nias toast styling. * * The gooey-toast library ships its own styles in assets/css/vendor/gooey-toast.css; * this file holds only what is specific to this plugin - right-to-left, the theme * font, a layer above every modal, and the hardening against theme button styles. * * It lives apart from style.css because the toast is shared: the login modal, the * Elementor widget, quick buy, the product survey and the user panel all show * messages through it, and style.css is not loaded on all of those pages. * nias_login_enqueue_toast() loads this file everywhere the toast is used. */ /* ── Toast (gooey-toast) ────────────────────────────────────────────────────── The library ships its own styles in assets/css/vendor/gooey-toast.css; only what is specific to this plugin is set here: right-to-left, the theme font, and a layer above the modal. #nias-toast-wrap no longer lays the toasts out itself and is purely the mount anchor: the library builds its viewports inside it. */ /* The toast layer must sit above every modal, so the container itself creates a stacking context at the highest possible z-index (position + z-index). Anything rendered inside it then lands above .nias-modal-box (999,999,999) and .nias-success (2,147,483,646), regardless of the library's internal z-index. The container has zero size and covers nothing; the library's viewports are position: fixed and place themselves against the viewport. transform is deliberately none: an element with a transform becomes the containing block for fixed descendants, which puts the toasts in the wrong place. */ #nias-toast-wrap { position: fixed; top: 0; right: 0; width: 0; height: 0; z-index: 2147483647; transform: none; display: block; max-width: none; padding: 0; margin: 0; border: 0; background: none !important; /* The container must not swallow clicks; the toasts themselves set pointer-events: auto */ pointer-events: none; } /* Fallback: if a theme overrides the container's position and the stacking context above is lost, the viewport carries the highest z-index directly */ #nias-toast-wrap [data-gooey-viewport] { z-index: 2147483647; } /* Keyboard-aware anchoring. ------------------------------------------------------------------ position: fixed resolves against the *layout* viewport. When a mobile keyboard opens, the browser keeps that layout viewport the same size and instead shrinks and shifts the *visual* viewport - the part the user can actually see - and scrolls the focused field into it. A toast pinned to top: 0 then sits above the visible region: it is on the page, but off the screen. That is why a wrong OTP produced no visible error while the keyboard was up. --nias-toast-offset is written by nias-toast.js from visualViewport.offsetTop, so the layer follows the visible region instead of the layout viewport. It defaults to 0px, which is exactly the old behaviour, so desktop and any browser without the API are untouched. The center rule has to repeat the library's translateX(-50%): transform is one property and restating it would otherwise drop the centring. */ #nias-toast-wrap [data-gooey-viewport] { transform: translateY(var(--nias-toast-offset, 0px)); } #nias-toast-wrap [data-gooey-viewport][data-position$="center"] { transform: translateX(-50%) translateY(var(--nias-toast-offset, 0px)); } #nias-toast-wrap [data-gooey-toast] { direction: rtl; text-align: right; font-family: inherit; } /* The library's default text-transform: capitalize is meaningless for Persian */ #nias-toast-wrap [data-gooey-title] { font-family: inherit; text-transform: none; line-height: 1.6; } #nias-toast-wrap [data-gooey-description] { font-family: inherit; direction: rtl; text-align: right; line-height: 1.9; color: #1f2937; } /* ── Neutralizing the theme's default button styles on the toast ────────────── A toast's root and its action button are both real