/* MAIL POPUPS (2026-11-04): the popups of the newsletter forms (home letter and The idazery Practice landing), shared by both pages (core/mail-popup.js draws them).
   They replace, for these forms only, the blue/green/red boxes of idazery.css: a white card with an envelope. Variants: waiting (letter comes out),
   done (check) and error (closed envelope, red badge). Everything is scoped to #overlayMessage.idz-mail-popup, so no other popup of the app changes. */
#overlayMessage.idz-mail-popup {
    background: #ffffff;
    color: #31434f;
    border: 1px solid #dfe6ec;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(30, 50, 70, 0.18);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 28px 24px 26px;
}
#overlayMessage.idz-mail-popup::before,
#overlayMessage.idz-mail-popup::after,
#overlayMessage.idz-mail-popup .overlayText::before,
#overlayMessage.idz-mail-popup .overlayText::after {
    content: none;
    animation: none;
}
#overlayMessage.idz-mail-popup .overlayText { padding-top: 6px; font-size: 1.05rem; line-height: 1.45; }
#overlayMessage.idz-mail-popup .idz-mail-anim { position: relative; z-index: 2; line-height: 0; }
#overlayMessage.idz-mail-popup .idz-mail-anim svg { overflow: visible; }
#overlayMessage.idz-mail-popup .m-back { fill: #d6e3ec; }
#overlayMessage.idz-mail-popup .m-front { fill: #eef4f8; stroke: #c3d3de; stroke-width: 1.2; stroke-linejoin: round; }
#overlayMessage.idz-mail-popup .m-flap-closed { fill: #e3edf3; stroke: #c3d3de; stroke-width: 1.2; stroke-linejoin: round; animation: idzMailFlapClosed 3.8s ease-in-out infinite; }
#overlayMessage.idz-mail-popup .m-flap-open { fill: #c4d6e2; opacity: 0; animation: idzMailFlapOpen 3.8s ease-in-out infinite; }
#overlayMessage.idz-mail-popup .m-letter { animation: idzMailLetter 3.8s ease-in-out infinite; }
#overlayMessage.idz-mail-popup .m-letter rect { fill: #ffffff; stroke: #c3d3de; stroke-width: 1.2; }
#overlayMessage.idz-mail-popup .m-letter path { fill: none; stroke: #2e8fb8; stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
@keyframes idzMailFlapClosed {
    0%, 12%   { opacity: 1; }
    20%, 88%  { opacity: 0; }
    96%, 100% { opacity: 1; }
}
@keyframes idzMailFlapOpen {
    0%, 12%   { opacity: 0; }
    20%, 88%  { opacity: 1; }
    96%, 100% { opacity: 0; }
}
@keyframes idzMailLetter {
    0%, 20%   { transform: translateY(24px); }
    50%, 68%  { transform: translateY(-14px); }
    86%, 100% { transform: translateY(24px); }
}
body.dark-mode #overlayMessage.idz-mail-popup { background: #1f272d; color: #dbe5ec; border-color: #33414b; }
@media (prefers-reduced-motion: reduce) {
    #overlayMessage.idz-mail-popup .m-flap-closed,
    #overlayMessage.idz-mail-popup .m-flap-open,
    #overlayMessage.idz-mail-popup .m-letter { animation: none; }
    #overlayMessage.idz-mail-popup .m-letter { transform: translateY(-8px); }
    #overlayMessage.idz-mail-popup .m-flap-closed { opacity: 0; }
    #overlayMessage.idz-mail-popup .m-flap-open { opacity: 1; }
}

/* the "one click left" version of the popup (after the form was sent): static envelope with a check, the address in bold, a quiet note and the OK button */
#overlayMessage.idz-mail-done .idz-mail-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 4px 0 14px; color: #1f3140; }
#overlayMessage.idz-mail-done .overlayText p { margin: 0 0 10px; }
#overlayMessage.idz-mail-done .idz-mail-email { font-weight: 700; color: #0e6f8e; word-break: break-all; }
#overlayMessage.idz-mail-done .idz-mail-small { font-size: 0.9rem; color: #61757f; line-height: 1.45; }
#overlayMessage.idz-mail-done .idz-mail-small a { color: #61757f; text-decoration: underline; }
#overlayMessage.idz-mail-done .idz-mail-small a:hover { color: #2e8fb8; }
#overlayMessage.idz-mail-done .m-letter { animation: none; transform: translateY(-10px); }
#overlayMessage.idz-mail-done .m-flap-closed { animation: none; opacity: 0; }
#overlayMessage.idz-mail-done .m-flap-open { animation: none; opacity: 1; }
#overlayMessage.idz-mail-done .m-check circle { fill: #19a974; stroke: #ffffff; stroke-width: 3; }
#overlayMessage.idz-mail-done .m-check path { fill: none; stroke: #ffffff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
#overlayMessage.idz-mail-done .m-check { transform-origin: 104px 22px; animation: idzMailCheck 0.45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes idzMailCheck { from { transform: scale(0); } to { transform: scale(1); } }
body.dark-mode #overlayMessage.idz-mail-done .idz-mail-title { color: #eef4f8; }
body.dark-mode #overlayMessage.idz-mail-done .idz-mail-email { color: #5cc3e6; }
body.dark-mode #overlayMessage.idz-mail-done .idz-mail-small,
body.dark-mode #overlayMessage.idz-mail-done .idz-mail-small a { color: #9db0bb; }

/* the info version (e.g. "you already have an account"): the "done" envelope with an "i" badge, and the teal button of the app instead of the amber one */
#overlayMessage.idz-mail-info .m-info circle { fill: #2e8fb8; stroke: #ffffff; stroke-width: 3; }
#overlayMessage.idz-mail-info .m-info path { fill: none; stroke: #ffffff; stroke-width: 3.5; stroke-linecap: round; }
#overlayMessage.idz-mail-info .m-info { transform-origin: 104px 22px; animation: idzMailCheck 0.45s cubic-bezier(.2,1.4,.4,1) both; }
#overlayMessage.idz-mail-info .m-check { display: none; }
#overlayMessage.idz-mail-info .action-button.info { background: linear-gradient(135deg, #19b2cb 0%, #0891b2 100%); }
#overlayMessage.idz-mail-info .action-button.info:hover { background: linear-gradient(135deg, #2cc3da 0%, #0a9fc0 100%); }

/* the error version (empty or wrong email): a small, light card: a closed envelope with a thin red badge, one line of text in regular weight and a slim red OK */
#overlayMessage.idz-mail-error { max-width: 360px; padding: 22px 24px 22px; border-top: 3px solid #e5484d; }
#overlayMessage.idz-mail-error .idz-mail-anim svg { width: 76px; height: 61px; }
#overlayMessage.idz-mail-error .overlayText { padding-top: 2px; }
#overlayMessage.idz-mail-error .idz-mail-title { font-size: 1rem; font-weight: 500; line-height: 1.45; letter-spacing: 0.005em; margin: 6px 0 0; color: #8f2a30; }
#overlayMessage.idz-mail-error .action-button.error { padding: 9px 26px; min-width: 104px; margin-top: 1.1rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 10px; box-shadow: 0 3px 10px rgba(220, 38, 38, 0.18); }
#overlayMessage.idz-mail-error .m-letter { animation: none; opacity: 0; }
#overlayMessage.idz-mail-error .m-flap-closed { animation: none; opacity: 1; }
#overlayMessage.idz-mail-error .m-flap-open { animation: none; opacity: 0; }
#overlayMessage.idz-mail-error .m-x circle { fill: #e5484d; stroke: #ffffff; stroke-width: 3; }
#overlayMessage.idz-mail-error .m-x path { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; }
#overlayMessage.idz-mail-error .m-x { transform-origin: 104px 22px; animation: idzMailCheck 0.45s cubic-bezier(.2,1.4,.4,1) both; }
#overlayMessage.idz-mail-error .idz-mail-anim svg { animation: idzMailShake 0.5s ease-in-out 0.35s both; }
@keyframes idzMailShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
body.dark-mode #overlayMessage.idz-mail-error .idz-mail-title { color: #ff9ea2; }
@media (prefers-reduced-motion: reduce) {
    #overlayMessage.idz-mail-error .idz-mail-anim svg { animation: none; }
}