/*
 * Savonia_Newsletter 2026-11-05: popup (dialog / bottom sheet) + band above the footer.
 * Tokens: savonia-rail.css (:root --sv-*), with fallbacks. Prefix .sv-nl (no clash with .sv-lo, .sv-ft, .sv-top).
 */
.sv-nl-band, .sv-nl-pop { --nl-g: var(--sv-green, #a9cf45); --nl-gd: var(--sv-green-dark, #7fa12a); --nl-gs: var(--sv-green-soft, #f3f8e6);
    --nl-t: var(--sv-text, #2f2f2f); --nl-m: var(--sv-muted, #6b6b6b); --nl-err: #c0392b; color: var(--nl-t); }
.sv-nl-band *, .sv-nl-pop * { box-sizing: border-box; }

/* ---------- shared form ---------- */
.sv-nl-form { margin: 0; }
/* DOM order = e-mail, consent, button (tab order = reading order); the band puts the button beside the field with a grid */
.sv-nl-band .sv-nl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
.sv-nl-band .sv-nl-field { grid-column: 1; grid-row: 1; }
.sv-nl-band .sv-nl-btn { grid-column: 2; grid-row: 1; }
.sv-nl-band .sv-nl-consent, .sv-nl-band .sv-nl-msg { grid-column: 1 / -1; }
.sv-nl-field { position: relative; flex: 1 1 auto; min-width: 0; }
.sv-nl-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sv-nl-input { display: block; width: 100%; height: 50px; margin: 0; padding: 0 16px; border: 1.5px solid #cfd8bd; border-radius: 25px;
    background: #fff; box-shadow: none; color: var(--nl-t); font: inherit; font-size: 16px; line-height: 1.2; transition: border-color .2s, box-shadow .2s; }
.sv-nl-input::placeholder { color: #9a9a9a; opacity: 1; }
.sv-nl-input:focus { border-color: var(--nl-gd); outline: 0; box-shadow: 0 0 0 3px rgba(169, 207, 69, .3); }
.sv-nl-input[aria-invalid="true"] { border-color: var(--nl-err); }
.sv-nl-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-width: 150px; height: 50px; margin: 0;
    padding: 0 26px; border: 0; border-radius: 25px; background: var(--nl-g); box-shadow: 0 4px 12px rgba(127, 161, 42, .28); color: #fff; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; transition: background-color .2s, transform .1s; }
.sv-nl-btn:hover, .sv-nl-btn:focus { background: var(--nl-gd); color: #fff; }
.sv-nl-btn:active { transform: scale(.98); }
.sv-nl-btn[disabled] { cursor: progress; opacity: .75; }
.sv-nl-btn__spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; }
.sv-nl-form.is-busy .sv-nl-btn__spin { display: inline-block; animation: sv-nl-spin .8s linear infinite; }
.sv-nl-consent { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; color: var(--nl-m); font-size: 13px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.sv-nl-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--nl-gd); cursor: pointer; }
/* 44 px hit area around the 20 px box */
.sv-nl-consent__box { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; }
.sv-nl-consent__box::before { content: ""; position: absolute; inset: -12px; }
.sv-nl-consent a { color: var(--nl-gd); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sv-nl-consent a:hover { color: var(--nl-t); }
.sv-nl-consent.is-invalid { color: var(--nl-err); }
.sv-nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sv-nl-msg { min-height: 0; margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.sv-nl-msg:empty { display: none; }
.sv-nl-msg.is-error { color: var(--nl-err); }
.sv-nl-band a:focus-visible, .sv-nl-pop a:focus-visible, .sv-nl-pop button:focus-visible, .sv-nl-band button:focus-visible,
.sv-nl-consent input:focus-visible { outline: 2px solid var(--nl-t); outline-offset: 3px; }
.sv-nl-done { display: none; align-items: center; gap: 14px; }
.sv-nl-done svg { flex: 0 0 auto; }
.sv-nl-done__t { margin: 0 0 2px; color: var(--nl-t); font-size: 18px; font-weight: 700; line-height: 1.3; }
.sv-nl-done__p { margin: 0; color: var(--nl-m); font-size: 14px; line-height: 1.5; }
.is-done .sv-nl-form, .sv-nl-pop .is-done .sv-nl-form, .sv-nl-band .is-done .sv-nl-form { display: none; }
.sv-nl-pop .is-done .sv-nl-done { margin: 4px 0 6px; text-align: left; }
.is-done .sv-nl-done { display: flex; }

/* ---------- band above the footer ---------- */
/* brand green, so it stands apart from the white page and the soft-green footer (#f3f8e6); dark text = AA contrast */
.sv-nl-band { --nl-ink: #1f2a0c; --nl-ink2: #2d3b12; position: relative; overflow: hidden; margin: 48px 0 0; padding: 40px 0;
    background: var(--nl-g) linear-gradient(100deg, #b3d652 0%, #a9cf45 45%, #9ec43b 100%); color: var(--nl-ink); text-align: left; }
/* Szabolcs 2026-11-05: the footer wave sits straight on the band: the footer's 16 px (white) top margin goes only when the
   band is right before it, so the gaps between the light-green bumps (savonia-footer.css .sv-ft .footer::before, 12 px,
   drawn upwards over the band) show the band green, not white. Straight band top. Footer CSS untouched. */
.sv-nl-band { padding-bottom: 52px; }
.sv-nl-band + .sv-ft { margin-top: 0; }
.sv-nl-band::before, .sv-nl-band::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .16); pointer-events: none; }
.sv-nl-band::before { right: -80px; bottom: -150px; width: 340px; height: 340px; }
.sv-nl-band::after { left: -60px; top: -90px; width: 200px; height: 200px; background: rgba(255, 255, 255, .12); }
.sv-nl-band__in { position: relative; z-index: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 500px); align-items: center; gap: 40px;
    max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sv-nl-band .sv-nl-band__eyebrow { color: var(--nl-ink2); }
.sv-nl-band .sv-nl-band__title { color: var(--nl-ink); }
.sv-nl-band .sv-nl-band__text { color: var(--nl-ink2); }
.sv-nl-band .sv-nl-band__perks li { color: var(--nl-ink); }
.sv-nl-band .sv-nl-band__perks svg { color: #fff; }
.sv-nl-band .sv-nl-input { border-color: #fff; }
.sv-nl-band .sv-nl-input:focus { border-color: var(--nl-ink); box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.sv-nl-band .sv-nl-btn { background: #2f3d12; box-shadow: 0 4px 12px rgba(31, 42, 12, .25); }
.sv-nl-band .sv-nl-btn:hover, .sv-nl-band .sv-nl-btn:focus { background: var(--nl-ink); }
.sv-nl-band .sv-nl-consent { color: var(--nl-ink2); }
.sv-nl-band .sv-nl-consent a { color: var(--nl-ink); }
.sv-nl-band .sv-nl-consent a:hover { color: #fff; }
.sv-nl-band .sv-nl-consent input { accent-color: #2f3d12; }
.sv-nl-band .sv-nl-consent.is-invalid { color: var(--nl-ink); }
.sv-nl-band .sv-nl-consent.is-invalid .sv-nl-consent__box { border-radius: 4px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nl-err); }
.sv-nl-band .sv-nl-msg.is-error { display: inline-block; padding: 6px 12px; border-radius: 8px; background: #fff; }
.sv-nl-band .sv-nl-done__t { color: var(--nl-ink); }
.sv-nl-band .sv-nl-done__p { color: var(--nl-ink2); }
.sv-nl-band .sv-nl-done circle { fill: #2f3d12; }
.sv-nl-band a:focus-visible, .sv-nl-band button:focus-visible, .sv-nl-band .sv-nl-consent input:focus-visible { outline-color: #fff; }
.sv-nl-band__art svg { display: block; width: 100%; height: auto; }
.sv-nl-band__eyebrow, .sv-nl-pop__eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--nl-gd); font-size: 12px; font-weight: 700;
    letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.sv-nl-band__title { margin: 0 0 8px; padding: 0; border: 0; color: var(--nl-t); font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: 0;
    text-transform: none; text-wrap: balance; }
.sv-nl-band__text { margin: 0; color: var(--nl-m); font-size: 15px; line-height: 1.6; }
.sv-nl-band__perks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.sv-nl-band__perks li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; color: var(--nl-t); font-size: 13px; font-weight: 600; line-height: 1.4; }
.sv-nl-band__perks svg { flex: 0 0 auto; color: var(--nl-gd); }

@media (max-width: 1100px) {
    .sv-nl-band__in { grid-template-columns: 160px minmax(0, 1fr); gap: 20px 28px; }
    .sv-nl-band__box { grid-column: 2; max-width: 560px; }
}
@media (max-width: 767px) {
    .sv-nl-band { margin-top: 32px; padding: 28px 0 44px; }
    .sv-nl-band__in { grid-template-columns: 1fr; gap: 14px; padding: 0 16px; text-align: center; }
    .sv-nl-band__art { width: 168px; margin: 0 auto; }
    .sv-nl-band__title { font-size: 22px; }
    .sv-nl-band__text { font-size: 14px; }
    .sv-nl-band__perks { justify-content: center; }
    .sv-nl-band__box { grid-column: 1; max-width: none; text-align: left; }
    .sv-nl-band .sv-nl-form { grid-template-columns: 1fr; row-gap: 10px; }
    .sv-nl-band .sv-nl-field, .sv-nl-band .sv-nl-btn { grid-column: 1; grid-row: auto; }
    .sv-nl-band .sv-nl-consent { margin-top: 2px; }
    .sv-nl-band .sv-nl-btn { width: 100%; }
}

/* ---------- popup ---------- */
body.sv-nl-open .sv-lo { visibility: hidden !important; }
.sv-nl-pop { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sv-nl-pop__bg { position: absolute; inset: 0; background: rgba(32, 38, 20, .5); opacity: 0; transition: opacity .25s ease; }
.sv-nl-pop__card { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); width: 100%; max-width: 760px; max-height: calc(100vh - 40px);
    overflow: auto; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(32, 38, 20, .28); opacity: 0; transform: translateY(16px) scale(.98);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; }
.sv-nl-pop.is-in .sv-nl-pop__bg { opacity: 1; }
.sv-nl-pop.is-in .sv-nl-pop__card { opacity: 1; transform: none; }
.sv-nl-pop__art { display: flex; align-items: center; justify-content: center; padding: 28px 20px; background: var(--nl-gs); }
.sv-nl-pop__art svg { display: block; width: 100%; max-width: 250px; height: auto; }
.sv-nl-pop__body { padding: 40px 36px 30px; }
.sv-nl-pop__title { margin: 0 0 10px; padding: 0; border: 0; color: var(--nl-t); font-size: 26px; font-weight: 700; line-height: 1.22; letter-spacing: 0;
    text-transform: none; text-wrap: balance; }
.sv-nl-pop__text { margin: 0 0 20px; color: var(--nl-m); font-size: 15px; line-height: 1.6; }
.sv-nl-pop .sv-nl-form { display: flex; flex-direction: column; }
.sv-nl-pop .sv-nl-consent { margin: 12px 0 14px; }
.sv-nl-pop .sv-nl-btn { width: 100%; }
.sv-nl-pop__body { text-align: left; }
.sv-nl-pop__x { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--nl-t); cursor: pointer; transition: background-color .2s; }
.sv-nl-pop__x:hover { background: var(--nl-gs); }
.sv-nl-pop__x svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sv-nl-pop__later { display: block; min-height: 44px; margin: 6px auto 0; padding: 0 12px; border: 0; background: none; color: var(--nl-m); cursor: pointer;
    font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.sv-nl-pop__later:hover { color: var(--nl-t); }
.sv-nl-pop__grip { display: none; }
html.sv-nl-lock, html.sv-nl-lock body { overflow: hidden; }

@media (max-width: 767px) {
    .sv-nl-pop { align-items: flex-end; padding: 0; }
    .sv-nl-pop__card { grid-template-columns: 1fr; max-width: none; max-height: 88vh; max-height: 88dvh; border-radius: 20px 20px 0 0; transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 0); }
    .sv-nl-pop.is-in .sv-nl-pop__card { transform: none; }
    .sv-nl-pop__grip { display: block; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: #d6dccb; }
    .sv-nl-pop__art { padding: 2px 0 0; background: none; }
    .sv-nl-pop__art svg { width: 92px; }
    .sv-nl-pop__body { padding: 4px 20px 16px; text-align: center; }
    .sv-nl-pop__title { margin-bottom: 6px; font-size: 20px; }
    .sv-nl-pop__text { margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
    .sv-nl-pop__eyebrow { margin-bottom: 4px; }
    .sv-nl-pop .sv-nl-consent { margin: 10px 0 12px; }
    .sv-nl-pop__later { margin-top: 2px; }
    .sv-nl-pop .sv-nl-consent, .sv-nl-pop .sv-nl-msg, .sv-nl-pop .sv-nl-done { text-align: left; }
}
@media (max-width: 767px) and (max-height: 560px) {
    .sv-nl-pop__art { display: none; }
}

/* ---------- motion (only when the visitor allows it) ---------- */
@keyframes sv-nl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
    .sv-nl-anim .sv-nl-bub { animation: sv-nl-float 4s ease-in-out infinite; }
    .sv-nl-anim .sv-nl-bub--2 { animation-delay: -1.3s; }
    .sv-nl-anim .sv-nl-bub--3 { animation-delay: -2.6s; }
    .sv-nl-anim .sv-nl-letter { animation: sv-nl-rise 5s ease-in-out infinite; }
    .sv-nl-anim .sv-nl-leaf { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-nl-sway 6s ease-in-out infinite; }
    .sv-nl-anim .sv-nl-leaf--2 { animation-delay: -3s; animation-duration: 7s; }
    .sv-nl-anim .sv-nl-plane { animation: sv-nl-fly 6s ease-in-out infinite; }
    .sv-nl-anim .sv-nl-trail { animation: sv-nl-dash 6s linear infinite; }
    .sv-nl-anim .sv-nl-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: sv-nl-draw .6s .15s ease-out forwards; }
    @keyframes sv-nl-float { 50% { transform: translateY(-6px); } }
    @keyframes sv-nl-rise { 0%, 100% { transform: translateY(6px); } 45%, 60% { transform: translateY(-10px); } }
    @keyframes sv-nl-sway { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-5px); } }
    @keyframes sv-nl-fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(10px, -8px) rotate(-4deg); } }
    @keyframes sv-nl-dash { to { stroke-dashoffset: -48; } }
    @keyframes sv-nl-draw { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
    .sv-nl-pop__bg, .sv-nl-pop__card { transition: none; }
}