/* * Full-screen checkout surface. Deliberately reads as a page, not a modal: * no card, no margins, no rounded corners, no shadow, no dark backdrop * around a smaller window - the real checkout occupies the entire viewport. */ .msai-checkout-fullscreen { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; z-index: 999999 !important; background: #fff; margin: 0; padding: 0; border: 0; box-shadow: none; } body.msai-checkout-fullscreen-open { overflow: hidden; } /* * body{overflow:hidden} alone does not stop - the real scrolling box * in most browsers - from still scrolling when the underlying page already * has latent horizontal/vertical overflow (theme wrapper, Elementor * section, etc). Same root cause and fix already proven for the frontend * app shell (see frontend-app.css, body.msai-frontend-app-active), just * never ported to this overlay. :has() keeps this a pure CSS fix. */ html:has(body.msai-checkout-fullscreen-open) { overflow: hidden; } .msai-checkout-fullscreen__frame { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0; display: block !important; background: #fff; z-index: 0 !important; opacity: 1 !important; transition: opacity 0.15s ease !important; } /* * Two full-bleed absolutely-positioned siblings (loader, iframe) stacking * correctly by z-index alone is fragile across the three different host * documents this surface is injected into (Funnel Quiz page, My AI Coach, * diagnostic embed), each with their own theme/plugin CSS that can win on * specificity or source order - this file already has one documented case * of exactly that happening to the close button. Making the iframe itself * transparent while loading removes the ambiguity entirely: there is no * stacking order left to get wrong, the root's own white background shows * through, and the loader (still centered via its own is-loading rule) is * the only thing that can possibly be visible. */ .msai-checkout-fullscreen.is-loading .msai-checkout-fullscreen__frame { opacity: 0 !important; } /* * Lightweight branded loading state, layered under the iframe so it never * blocks the iframe's own progressive rendering and needs no cross-origin * access to know when to hide - it is removed via a class toggle on the * root the moment the iframe's load event fires (see checkout-fullscreen.js). */ .msai-checkout-fullscreen__loader { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: none; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 12px !important; background: #fff; pointer-events: none !important; } .msai-checkout-fullscreen.is-loading .msai-checkout-fullscreen__loader { display: flex !important; } .msai-checkout-fullscreen__spinner { width: 34px; height: 34px; border: 3px solid rgba(0, 51, 102, 0.14); border-top-color: #4A90E2; border-radius: 50%; animation: msai-checkout-fullscreen-spin 0.8s linear infinite; } .msai-checkout-fullscreen__loader-text { margin: 0; font: 500 0.9rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #003366; } @keyframes msai-checkout-fullscreen-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .msai-checkout-fullscreen__spinner { animation-duration: 1.6s; } } /* * This surface is injected into three different WordPress-rendered documents * (the Funnel Quiz page, the My AI Coach app, and the isolated diagnostic * embed iframe), each free to load its own active theme/plugin CSS. A theme * reset stylesheet targeting a bare `button`/`[type="button"]` selector can * tie or beat this class on specificity and win on source order alone (seen * in production: Hello Elementor's reset.css repaints this exact button * red). The !important declarations below are a deliberate, narrow * exception to keep this floating chrome control visually correct * regardless of host page styling, not a general pattern to reuse elsewhere. */ .msai-checkout-fullscreen__close { position: fixed !important; top: max(10px, env(safe-area-inset-top)) !important; right: max(10px, env(safe-area-inset-right)) !important; z-index: 1000000 !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(16, 42, 67, 0.14) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.92) !important; color: #102a43 !important; font-size: 1.15rem !important; line-height: 1 !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(16, 42, 67, 0.14) !important; backdrop-filter: blur(6px) !important; text-transform: none !important; } .msai-checkout-fullscreen__close:hover, .msai-checkout-fullscreen__close:focus-visible { background: #fff !important; color: #102a43 !important; outline: 2px solid #4A90E2 !important; outline-offset: 2px !important; } .msai-checkout-fullscreen--prepared { position: fixed !important; left: -10000px !important; top: 0 !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } @media (max-width: 600px) { .msai-checkout-fullscreen__close { width: 32px !important; height: 32px !important; font-size: 1.05rem !important; } }