/* ========================================================================== Email Verification Extended — Lagom template compatibility Maps the module's --whmp_eve-* variables onto Lagom's native CSS variables so the verification popup integrates with the active Lagom theme, including Lagom's .lagom-dark-mode dark theme. Uses only Lagom-defined variables (see templates/lagom_css_variables.txt for reference — not shipped). ========================================================================== */ /* Light / default Lagom */ .whmp_eve-wrapper { --whmp_eve-overlay: rgba(0, 0, 0, 0.7); --whmp_eve-box-bg: var(--ui-block-bg); --whmp_eve-head-bg: var(--ui-block-header-bg, var(--gray-faded)); --whmp_eve-title: var(--text-heading-color); --whmp_eve-text: var(--text-body-color); --whmp_eve-muted: var(--text-lighter-color); --whmp_eve-border: var(--ui-block-divider-color); --whmp_eve-input-bg: var(--input-bg); --whmp_eve-input-text: var(--input-color); --whmp_eve-primary: var(--brand-primary); --whmp_eve-secondary: var(--brand-secondary); --whmp_eve-btn-hover: var(--brand-primary-darker); } /* Dark Lagom (.lagom-dark-mode on /) — Lagom re-defines the native variables in dark mode, so re-mapping is enough for the popup to follow. Overlay is deepened for contrast on dark backgrounds. */ .lagom-dark-mode .whmp_eve-wrapper, .whmp_eve-wrapper.whmp_eve-dark-mode { --whmp_eve-overlay: rgba(0, 0, 0, 0.85); --whmp_eve-box-bg: var(--ui-block-bg); --whmp_eve-head-bg: var(--ui-block-header-bg, var(--body-bg)); --whmp_eve-title: var(--text-heading-color); --whmp_eve-text: var(--text-body-color); --whmp_eve-muted: var(--text-lighter-color); --whmp_eve-border: var(--ui-block-divider-color); --whmp_eve-input-bg: var(--input-bg); --whmp_eve-input-text: var(--input-color); --whmp_eve-primary: var(--brand-primary); --whmp_eve-secondary: var(--brand-secondary); --whmp_eve-btn-hover: var(--brand-primary-lighter); } /* Use Lagom's dropdown background for popup surface where available */ .whmp_eve-wrapper .whmp_eve-popup-box { box-shadow: var(--ui-block-shadow, 0 10px 40px rgba(0, 0, 0, 0.25)); border-radius: var(--ui-block-border-radius, 6px); } /* ========================================================================== Lagom — Popup responsive breakpoints ========================================================================== */ @media (max-width: 576px) { .whmp_eve-wrapper .whmp_eve-popup-box { width: 94%; max-width: 94%; } } @media (min-width: 577px) and (max-width: 768px) { .whmp_eve-wrapper .whmp_eve-popup-box { max-width: 380px; } } @media (min-width: 769px) and (max-width: 1024px) { .whmp_eve-wrapper .whmp_eve-popup-box { max-width: 400px; } } @media (min-width: 1025px) { .whmp_eve-wrapper .whmp_eve-popup-box { max-width: 420px; } }