/** * A365 Forms - popup modal styles. * * Deliberately neutral: a plain panel and close button so the embedded * form keeps whatever styling the third party provides. */ .a365form-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; /* * Hidden with visibility rather than display:none so the embedded form * still has real dimensions on page load. Many third party embeds measure * their container to size an iframe and end up 0px tall inside display:none. */ visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .a365form-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.2s ease, visibility 0s; } .a365form-modal__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); } .a365form-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: calc(100vh - 48px); margin: auto; padding: 6px 8px 8px; background: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); } /* * Kept in the normal flow as the dialog's first (non-shrinking) row rather * than absolutely positioned, so the scrollbar on the body below can never * run underneath it. */ .a365form-modal__close { flex: 0 0 auto; align-self: flex-end; width: 36px; height: 36px; /* !important: Elementor's button styles override these otherwise. */ padding: 0 !important; margin: 0 !important; line-height: 1; font-size: 26px; color: #333; background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .a365form-modal__close:hover, .a365form-modal__close:focus { background: rgba(0, 0, 0, 0.07); color: #000; } .a365form-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Breathing room between the form and the scrollbar / dialog edge. */ padding: 0 16px 16px; overscroll-behavior: contain; } .a365form-modal__body > *:last-child { margin-bottom: 0; } /* Applied to while a modal is open to stop the page scrolling behind it. */ .a365form-modal-open, .a365form-modal-open body { overflow: hidden; } /* Default trigger button from [a365form_popup]. Inherits theme button styles where a class is passed in, otherwise stays plain. */ .a365form-trigger { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .a365form-modal { transition: none; } }