/* ================================================================ DRIVEX MODAL SYSTEM — dx-modal-system.css Single source of truth. Overrides ALL other CSS for modals. ================================================================ */ body.dx-modal-open { overflow: hidden !important; } /* ── OVERLAY: hidden by default ───────────────────────────────── Uses display:none (not opacity) for the closed state. We also explicitly override style.css opacity/visibility/transition to prevent any animation from making the card briefly invisible. */ .al-modal-overlay, .al-pay-modal-overlay { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 100000 !important; background: rgba(0, 0, 0, 0.82) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; padding: 20px !important; box-sizing: border-box !important; /* Show/hide via display (not opacity) */ display: none !important; /* Override style.css opacity:0 / visibility:hidden / transition:all so there is NO fade animation that could hide the card. */ opacity: 1 !important; visibility: visible !important; transition: none !important; } /* ── OVERLAY: visible when JS adds .open ────────────────────── */ .al-modal-overlay.open, .al-pay-modal-overlay.open { display: flex !important; align-items: center !important; justify-content: center !important; overflow-y: auto !important; } /* ── MODAL CARD ─────────────────────────────────────────────── */ .al-modal, .al-pay-modal { position: relative !important; z-index: 100001 !important; max-width: 460px !important; width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; margin: auto !important; /* Override style.css transform:translateY(20px) */ transform: none !important; transition: none !important; } /* ── Validation modal (post-vehicle page, controlled by inline style) */ #alValidationModal { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 100000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; box-sizing: border-box !important; } #alValidationModal[style*="display:none"], #alValidationModal[style*="display: none"] { display: none !important; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 480px) { .al-modal-overlay.open, .al-pay-modal-overlay.open { padding: 12px !important; align-items: flex-start !important; padding-top: 40px !important; } .al-modal, .al-pay-modal { max-width: 100% !important; border-radius: 16px !important; padding: 20px 16px !important; max-height: calc(100vh - 60px) !important; } } /* ── CRITICAL: body must never have transform/filter/perspective ── Any of these makes the containing block for position:fixed children, which breaks every modal (overlay sizes to the full page height instead of the viewport). dx-premium.css dxPageIn animation previously left transform:translateY(0) on body permanently. !important declarations also beat CSS animation keyframes. */ body { transform: none !important; filter: none !important; perspective: none !important; }