.evo-popinsticky { position: fixed; bottom: 20px; right: 20px; z-index: 1029; width: 320px; max-width: calc(100vw - 40px); background: var(--evops-bg, #AC8868); color: var(--evops-fg, #ffffff); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); border: var(--evops-border-width, 0px) solid var(--evops-border-color, transparent); font-size: 0.9rem; line-height: 1.35; overflow: hidden; } .evo-popinsticky__close { position: absolute; top: 4px; right: 6px; appearance: none; background: transparent; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer; opacity: 0.85; z-index: 1; } .evo-popinsticky__close:hover, .evo-popinsticky__close:focus { opacity: 1; outline: none; } .evo-popinsticky__inner { display: flex; align-items: stretch; gap: 0.85rem; padding: 0.85rem 0.85rem 0.85rem 0.85rem; } .evo-popinsticky__image { flex: 0 0 80px; display: flex; align-items: center; justify-content: center; } .evo-popinsticky__image img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; display: block; } .evo-popinsticky__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem; padding-right: 1.2rem; } .evo-popinsticky__text { font-size: 0.88rem; text-align: var(--evops-text-align, left); } /* Defend against RTE-injected wrappers (

, ) overriding the pop-in color */ .evo-popinsticky__text, .evo-popinsticky__text * { color: inherit; } .evo-popinsticky__text p { /* was display:inline — text-align has no effect on an inline box's own position, it needs a block box to align within (EL-680) */ display: block; margin: 0; } .evo-popinsticky__text strong, .evo-popinsticky__text b { font-weight: 700; } .evo-popinsticky__cta { display: inline-block; align-self: var(--evops-cta-align, flex-start); background: var(--evops-cta-bg, #AC8868); color: var(--evops-fg, #ffffff); text-decoration: none; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5rem 0.9rem; border-radius: 3px; border: var(--evops-cta-border-width, 1px) solid var(--evops-cta-border-color, rgba(255, 255, 255, 0.4)); transition: filter 0.15s ease; } .evo-popinsticky__cta:hover, .evo-popinsticky__cta:focus { filter: brightness(1.08); color: var(--evops-fg, #ffffff); text-decoration: none; } .evo-popinsticky[hidden] { display: none !important; } @media (max-width: 768px) { .evo-popinsticky { /* EL-682: on mobile this pop-in and evo_bottombanner both become full-width bars anchored to * the bottom, and the banner (z-index 1030) painted over this one (1029) - measured on a * 390px viewport, only 16 of the pop-in's 91px stayed visible. Stacking above the banner is * the one arrangement that survives a configuration mistake. * * --evobb-height is published on by evo_bottombanner. The fallback is deliberately * 0px, NOT the banner's own 60px default: the variable is undefined on pages where the * banner does not render, and the banner resets it to 0 when it is dismissed or expires. A * non-zero fallback would leave the pop-in floating above empty space in both cases. * The dependency stays soft on purpose - if evo_bottombanner is absent or not installed the * fallback applies and this pop-in sits flush at the bottom exactly as before, so neither * module needs the other to be installable. */ bottom: var(--evobb-height, 0px); transition: bottom 0.15s ease; right: 0; left: 0; width: auto; max-width: none; border-radius: 0; } .evo-popinsticky__inner { padding: 0.7rem 0.7rem 0.7rem 0.7rem; gap: 0.7rem; } .evo-popinsticky__image { flex: 0 0 64px; } .evo-popinsticky__image img { width: 64px; height: 64px; } .evo-popinsticky__text { font-size: 0.82rem; } }