/* * Rules are scoped under #lozee-nl-overlay and key layout / typography * declarations use !important. The modal markup is injected at the end of * , outside any theme/page-builder wrapper, so without this it can * silently lose to more specific theme rules (button resets, heading fonts, * etc.) — that is what caused the earlier "not centered / wrong font" * issues. */ #lozee-nl-overlay { position: fixed !important; inset: 0 !important; margin: 0 !important; /* * The overlay is injected at the end of , but themes (e.g. Phlox Pro * here: #primary has z-index:5, #inner-body z-index:3) create positive * stacking contexts that would otherwise paint the page content ON TOP of * the modal — so it opens but stays hidden behind the page. A very high * z-index keeps it above the header, sticky bars and page content. */ z-index: 999999 !important; background: rgba(12, 14, 34, 0.55) !important; display: none; align-items: center !important; justify-content: center !important; padding: 20px !important; } #lozee-nl-overlay.is-open { display: flex !important; } body.lozee-nl-locked { overflow: hidden !important; } #lozee-nl-overlay, #lozee-nl-overlay * { box-sizing: border-box !important; } #lozee-nl-overlay .lozee-nl-modal { position: relative !important; width: 100% !important; max-width: 620px !important; max-height: 90vh !important; overflow-y: auto !important; margin: 0 auto !important; float: none !important; background: #ffffff !important; border-radius: 14px !important; box-shadow: 0 30px 60px rgba(15, 17, 55, 0.35) !important; padding: 48px 44px 40px !important; direction: rtl !important; text-align: right !important; } #lozee-nl-overlay .lozee-nl-close { position: absolute !important; top: 16px !important; left: 16px !important; right: auto !important; width: 36px !important; height: 36px !important; margin: 0 !important; border: none !important; background: transparent !important; color: #1e2fb0 !important; font-size: 26px !important; line-height: 1 !important; cursor: pointer !important; border-radius: 50% !important; transition: background-color 0.15s ease; } #lozee-nl-overlay .lozee-nl-close:hover { background: rgba(30, 47, 176, 0.08) !important; } #lozee-nl-overlay .lozee-nl-title { margin: 0 0 32px !important; padding: 0 !important; text-align: right !important; } /* * The rules below style ONLY the plain-text fallback title (shown when no * Elementor template is selected in settings). They intentionally do not * target ".lozee-nl-title" directly, so an Elementor-designed title is * never fought by this CSS — style it entirely from within Elementor. */ #lozee-nl-overlay .lozee-nl-title-fallback { font-size: 26px !important; line-height: 1.85 !important; font-weight: 700 !important; color: #1e2fb0 !important; } /* Multi-line-safe highlight: box-decoration-break paints the background on every wrapped line individually instead of only under the last line. */ #lozee-nl-overlay .lozee-nl-title-fallback span { background-image: linear-gradient(#f2472d, #f2472d) !important; background-repeat: no-repeat !important; background-position: 0 92% !important; background-size: 100% 8px !important; -webkit-box-decoration-break: clone !important; box-decoration-break: clone !important; padding: 2px 2px 4px !important; color: inherit !important; } #lozee-nl-overlay .lozee-nl-title-fallback span::before, #lozee-nl-overlay .lozee-nl-title-fallback span::after { content: none !important; display: none !important; } #lozee-nl-overlay .lozee-nl-form { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 20px !important; width: 100% !important; margin: 0 !important; } #lozee-nl-overlay .lozee-nl-field { width: 100% !important; } #lozee-nl-overlay .lozee-nl-input { display: block !important; width: 100% !important; margin: 0 !important; padding: 18px 20px !important; border: 1px solid #dfe3f5 !important; border-radius: 10px !important; font-size: 15px !important; color: #1e2fb0 !important; text-align: right !important; background: #fff !important; transition: border-color 0.15s ease; } #lozee-nl-overlay .lozee-nl-input::placeholder { color: #a7abc4; } #lozee-nl-overlay .lozee-nl-input:focus { outline: none !important; border-color: #1e2fb0 !important; box-shadow: none !important; } #lozee-nl-overlay .lozee-nl-message { margin: 0 !important; min-height: 20px; font-size: 14px; } #lozee-nl-overlay .lozee-nl-message.is-success { color: #1c8a4a !important; } #lozee-nl-overlay .lozee-nl-message.is-error { color: #d1352b !important; } #lozee-nl-overlay .lozee-nl-submit { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important; gap: 12px !important; padding: 16px 26px !important; border: 1px solid #1e2fb0 !important; border-radius: 10px !important; background: transparent !important; color: #1e2fb0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: normal !important; cursor: pointer !important; transition: background-color 0.15s ease, color 0.15s ease; } #lozee-nl-overlay .lozee-nl-submit:hover { background: #1e2fb0 !important; color: #fff !important; } #lozee-nl-overlay .lozee-nl-submit .lozee-nl-arrow { width: 32px; height: 1px; background: currentColor; position: relative; flex: none; } #lozee-nl-overlay .lozee-nl-submit .lozee-nl-arrow::after { content: ""; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(135deg); } #lozee-nl-overlay .lozee-nl-submit:disabled { opacity: 0.6 !important; cursor: default !important; } @media (max-width: 640px) { #lozee-nl-overlay .lozee-nl-modal { padding: 36px 24px 30px !important; } #lozee-nl-overlay .lozee-nl-title-fallback { font-size: 22px !important; } }