/* ==========================================================================
   popup.css — A felugró hírlevél-doboz.
   Csak ott töltődik be, ahol a doboz meg is jelenik (inc/newsletter-popup.php).
   NULLA ÜRES SOR.
   .
   A DOBOZ NATIV `<dialog>`, tehát a legfelső rétegben rajzolódik: nincs
   z-index-verseny a süti-sávval, a lebegő "fel" gombbal vagy a mobil
   kosár-sávval. A fókusz-csapda, az Esc és a háttér-inertség a böngészőtől
   jön, nem tőlünk.
   .
   A SZINEK A MEGLEVO TOKENEKBOL jonnek, uj szin nincs: a szines panel a
   lablec zoldje (--c-footer), az akcent a fejlec mentje (--c-mint), a gomb a
   bolt kekje (--c-primary). Igy a doboz az elso pillanatban is a bolthoz
   tartozonak latszik, nem egy ratett marketing-elemnek.
   ========================================================================== */
.np {
	width: min(940px, calc(100vw - 2 * var(--sp-4)));
	max-height: calc(100vh - 2 * var(--sp-4));
	padding: 0;
	border: 0;
	border-radius: var(--r-lg);
	background: transparent;
	overflow: visible;
}
.np::backdrop {
	background: rgba(5, 29, 51, 0.62);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.np__box {
	position: relative;
	display: grid;
	grid-template-columns: 0.86fr 1fr;
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: 0 24px 60px rgba(5, 29, 51, 0.28);
	overflow: hidden;
	/* A doboz sosem lehet magasabb a kepernyonel: kep modban a magassagot a
	   kep aranya hatarozza meg, tehat egy nagyon magas kep kilogna. */
	max-height: calc(100vh - 2 * var(--sp-4));
}
/* A BEZARO X FEHER KORLAP. A doboz ket fele ket kulonbozo hatteru (sotet zold
   es feher), es egy egyszinu ikon az egyiken mindig eltunne. A feher korlap
   mind a ketton lathato, es a fokusz-gyuru is rajta van. */
.np__x {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--r-full);
	background: var(--c-surface);
	color: var(--c-text);
	box-shadow: 0 2px 8px rgba(5, 29, 51, 0.18);
	cursor: pointer;
}
.np__x:hover,
.np__x:focus-visible {
	background: var(--c-text);
	color: var(--c-surface);
}
.np__x svg {
	width: 18px;
	height: 18px;
}
.np__aside {
	position: relative;
	display: flex;
	align-items: center;
	padding: var(--sp-8) var(--sp-6);
	background-color: var(--c-footer);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
}
/* KEPERNYO A KEP FOLE. Kep nelkul is ott van, es akkor a zold folott
   lathatatlan; keppel viszont ez tartja olvashatonak a szoveget barmilyen
   fotoval. Igy a kliens nem tud olyan kepet feltenni, amitol a szoveg
   elveszik. */
.np__aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(45, 88, 62, 0.94) 0%, rgba(45, 88, 62, 0.82) 55%, rgba(45, 88, 62, 0.9) 100%);
}
.np__aside-in {
	position: relative;
	z-index: 2;
}
/* --------------------------------------------------------------------------
   KEP MOD: a bal hasabban CSAK a kep all, vagas es sotetites nelkul.
   .
   MIERT NINCS `object-fit: cover`. A feltoltott kep egy KESZ, megtervezett
   grafika: benne van a logo, a fokim, a szoveg es a felsorolas. Egy `cover`
   kivagas ezekbol vinne el valamit, mindegy, melyik szelrol. Ezert a kep a
   sajat aranyaban, egeszben latszik, es a DOBOZ magassaga koveti a kepet, nem
   forditva.
   .
   A SOTETITO RETEG IS ELTUNIK. Szoveg modban azert van, hogy a szoveg barmilyen
   foton olvashato maradjon; kep modban nincs mit olvashatova tenni, es egy
   sotetito fatyol a megtervezett grafika szineit rontana el.
   .
   A `max-height` VESZFEK egy szelsosegesen magas kepre: ott a `contain` inkabb
   hagy ures savot, mint hogy a doboz kilogjon a kepernyobol. A mostani 721x800
   kepnel ez soha nem sul el.
   -------------------------------------------------------------------------- */
.np__aside--kep {
	display: block;
	padding: 0;
	background-color: var(--c-surface);
	background-image: none;
}
.np__aside--kep::after {
	display: none;
}
.np__pic {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 78vh;
	object-fit: contain;
	object-position: center;
}
.np__eyebrow {
	display: inline-block;
	margin-bottom: var(--sp-4);
	padding: 5px var(--sp-3);
	border-radius: var(--r-full);
	background: var(--c-mint);
	color: var(--c-footer);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
/* A TIPOGRAFIAI SULYPONT. Ha van kedvezmeny, ez a doboz legnagyobb eleme, es
   ettol lesz feltuno, nem a szinektol. A clamp azert kell, hogy egy hosszabb
   szoveg ("Ingyen szallitas") se torjon ket sorra mobilon. */
.np__offer {
	margin: 0 0 var(--sp-2);
	color: var(--c-mint);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.02em;
}
/* A CIM SZINE KIIRVA, ES EZ NEM FELESLEGES. A `.np__aside` fehér szint ad,
   de az OROKLES: a base.css `h1, h2, h3` szabalya KOZVETLEN deklaracio a
   cimsorra, es egy kozvetlen deklaracio mindig eros egy orokolt ertek ellen.
   Merve: a zold panelen a cim sotet navy maradt, tehat gyakorlatilag
   olvashatatlan volt. */
.np__title {
	margin: 0 0 var(--sp-3);
	color: #ffffff;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.np__text {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-base);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}
.np__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.np__list li {
	display: flex;
	gap: var(--sp-2);
	align-items: flex-start;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
}
.np__list li:last-child {
	margin-bottom: 0;
}
.np__list svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--c-mint);
}
.np__main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sp-8) var(--sp-6);
}
.np__form {
	margin: 0;
}
/* A SZELEKTOR SZANDEKOSAN `input.np__input`, NEM `.np__input`.
   .
   A base.css `input[type="email"]` szabalya egy tipus- es egy
   attributum-szelektor, tehat SPECIFIKUSABB egy puszta osztalynal: a betumeret
   ott 14 pixelre allt, es merve a doboz mezoje asztali nezetben tenyleg 14
   pixel volt, a szandekolt 16 helyett. Az `input` hozzatetelevel a ket
   szabaly specifikussaga egyenlo, es a kesobb betoltodo popup.css nyer.
   .
   A 16 PIXEL ALATTI BETUMERET mobilon amugy is tiltott terep: az iOS Safari
   ranagyit a lapra a fokuszalasnal. Mobilon ezt a base.css mar megoldja, itt
   asztali nezetben is 16 pixel marad, mert egy 52 pixel magas mezo 14 pixeles
   szoveggel alulmeretezettnek latszik a mellette allo nagy gomb mellett. */
input.np__input {
	width: 100%;
	height: 52px;
	padding: 0 var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
	font-family: inherit;
	font-size: 16px;
}
input.np__input:focus-visible {
	border-color: var(--c-primary);
	outline: 2px solid var(--c-primary);
	outline-offset: 1px;
}
/* A KET NEV-MEZO EGY SORBAN. Egymas ala tenne oket a doboz keskeny hasabja,
   es harom teljes szelessegu mezo egy felugro dobozban urlapnak latszik, nem
   egy gyors feliratkozasnak. */
.np__row--name {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-2);
	margin-bottom: var(--sp-2);
}
.np__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	height: 52px;
	margin-top: var(--sp-3);
	border-radius: var(--r-sm);
	font-size: var(--fs-md);
	font-weight: 700;
}
.np__spin {
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #ffffff;
	border-radius: var(--r-full);
	animation: np-spin 700ms linear infinite;
}
.np__msg {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: #1f8a4c;
}
.np__msg--err {
	color: var(--c-sale);
}
.np__legal {
	margin: var(--sp-4) 0 0;
	font-size: 0.6875rem;
	line-height: 1.45;
	color: var(--c-text-soft);
}
/* A MEZESBODON REJTESE. Nem display:none, mert azt a robotok felismerik: a
   kepernyon kivul tolt mezo ugyanannyira lathatatlan a latogatonak, de a
   robotnak nem arulja el magat. Ugyanaz a technika, mint a lablecben. */
.np__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* "MOST NEM KEREM". A masodik, szoveges bezaras szandekosan halvany, DE
   olvashato es teljes meretu kattintasi felulet: egy szegyenito feliratu vagy
   elrejtett elutasitas rovid tavon tobb feliratkozot hoz, hosszabb tavon
   bizalmat veszit. */
.np__later {
	align-self: center;
	margin-top: var(--sp-4);
	padding: var(--sp-2) var(--sp-3);
	border: 0;
	background: none;
	color: var(--c-text-soft);
	font: inherit;
	font-size: var(--fs-sm);
	text-decoration: underline;
	cursor: pointer;
}
.np__later:hover,
.np__later:focus-visible {
	color: var(--c-text);
}
@keyframes np-spin {
	to {
		transform: rotate(360deg);
	}
}
/* --------------------------------------------------------------------------
   A MEGJELENES KOREOGRAFIAJA.
   .
   NEGY LEPES, ES A SORREND A LENYEG. Egyszerre indulo elemek "beesnek", egymas
   utan indulok viszont OSSZEALLNAK: a szem koveti a mozgast, es a vegen ott
   marad, ahova a koreografia vitte, vagyis a gombon.
   .
     1. A HATTER halványodik be elsokent (500 ms). Eloszor a lap huzodik
        hatra, es csak utana jon barmi uj: forditva a doboz egy meg eles
        hatteren jelenne meg, es kaotikusnak latszana.
     2. A DOBOZ emelkedik 24 pixelt es 0,965-rol all teljes meretre, egy PICI
        tullendulessel (55 szazaleknal -6 pixel es 1,004). A tullendules az,
        amitol a mozgas elonek erzodik, nem gepiesnek. Tobb ennel mar
        gumiszeru lenne.
     3. A KET HASAB lepcsozetesen, 150 es 290 ezredmasodperc keslessel. Ettol a
        doboz OSSZEALL, nem egy kesz teglalapkent zuhan be.
     4. A GOMB kap EGYETLEN halk gyurut, 1250 ms-nal, amikor mar minden megallt.
        Ez a koreografia zaropontja: a szem addigra vegigfutott a kepen es a
        mezon, es itt all meg. Egyszer szol, nem ismetlodik: egy pulzalo gomb
        ket masodperc utan mar idegesito.
   .
   AZ IDOZITES KETSZER LASSULT, kliens-keresre. Elso kor: a doboz 420-rol
   520 ms-ra. Masodik kor: 520-rol 700-ra, a hatter 300-rol 500-ra, a mobil
   also lap 360-rol 620-ra. Az ARANYOK mindket alkalommal valtozatlanok
   maradtak, tehat a koreografia ugyanaz, csak nyugodtabb.
   .
   A GYURU KESLELTETESE EGYUTT MOZOG A TOBBIVEL, es ez nem kozombos: a
   hasabok most 990 ms-nal allnak meg, a gyuru 1250-nel indul, tehat marad egy
   negyed masodperc csend. Ha a kesleltetes a helyen maradt volna, a gyuru
   belelogna a beuszasba, es az egesz egyszerre mozgo kasanak latszana.
   .
   MINDEN TRANSFORM ES OPACITY, tehat a bongeszo a kompozitoron rajzolja: nincs
   ujratordeles, es a 60 kepkocka egy kozepes gepen is tarthato.
   -------------------------------------------------------------------------- */
@keyframes np-bg {
	from {
		opacity: 0;
	}
}
@keyframes np-in {
	0% {
		opacity: 0;
		transform: translate3d(0, 24px, 0) scale(0.965);
	}
	55% {
		opacity: 1;
		transform: translate3d(0, -6px, 0) scale(1.004);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}
@keyframes np-sheet {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
}
@keyframes np-part {
	from {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
	}
}
@keyframes np-cta {
	40% {
		box-shadow: 0 0 0 9px rgba(27, 146, 255, 0.16);
	}
	100% {
		box-shadow: 0 0 0 18px rgba(27, 146, 255, 0);
	}
}
.np[open] {
	animation: np-in 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.np[open]::backdrop {
	animation: np-bg 500ms ease-out both;
}
.np[open] .np__aside {
	animation: np-part 700ms 150ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.np[open] .np__main {
	animation: np-part 700ms 290ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.np[open] .np__btn {
	animation: np-cta 1200ms 1250ms ease-out 1 both;
}
@media (max-width: 767px) {
	/* MOBILON ALSO LAP, nem kozepre igazitott doboz. A natív dialog margoja
	   auto, tehat a `margin-block-end: 0` a kepernyo aljara huzza. Igy a
	   hüvelykujj eleri a gombot, es a doboz nem takarja a teljes kepet. */
	.np {
		width: 100%;
		max-width: none;
		max-height: 92vh;
		margin-block-end: 0;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
	}
	.np__box {
		grid-template-columns: 1fr;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		max-height: 92vh;
		overflow-y: auto;
	}
	.np__aside {
		padding: var(--sp-6) var(--sp-5) var(--sp-5);
	}
	.np__aside--kep {
		padding: 0;
	}
	/* MOBILON NINCS KULON KORLAT, es ez MERT dontes. Egy 46vh-s korlat mellett a
	   kep 390x388-ra allt volna be, holott az aranya 0.901: ket oldalt 20-20
	   pixel FEHER SAV keletkezett volna. Korlat nelkul a kep 390x433, a doboz
	   709 pixel magas, a 92vh-s keret pedig 776, tehat gorgetes sincs. A
	   globalis 78vh-s veszfek mobilon sem sul el, de egy szelsosegesen magas
	   kepet ott is elkap. */
	.np__main {
		padding: var(--sp-5) var(--sp-5) var(--sp-6);
	}
	.np__offer {
		font-size: clamp(2.25rem, 13vw, 3rem);
	}
	/* MOBILON A FELSOROLAS KIMARAD. Ott a keperno magassaga a szuk eroforras,
	   es a felsorolas az, ami a legkevesebbet teszi hozza a dontéshez: a cim,
	   a kedvezmeny es a mezo a fontos. */
	.np__list {
		display: none;
	}
	.np__x {
		top: var(--sp-2);
		right: var(--sp-2);
	}
	/* MOBILON A DOBOZ ALULROL CSUSZIK FEL, nem kozepen nagyodik.
	   .
	   A doboz ott amugy is also lap (margin-block-end: 0), es a telefonos
	   felulet nyelve ez: a lap a keperno aljabol jon. A kozepre nagyodo modalis
	   ugyanitt "ratett" erzetu lenne, ez viszont ugy hat, mintha a lap alsó
	   szelebol huznank fel. */
	.np[open] {
		animation: np-sheet 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}
}
/* CSOKKENTETT MOZGAS: A MOZGO ANIMACIOKAT OPACITY-RA CSEREJUK.
   .
   Nem `animation: none`, hanem az elmozdulas nelkuli np-bg. Aki ezt a
   beallitast hasznalja, annak a MOZGAS a gond (vestibularis panasz,
   figyelemzavar), nem maga a valtozas.
   .
   AZ IDOZITEST NEM ITT DONTJUK EL: a base.css globalis szabalya minden
   animaciot 0,01 ms-ra rovidit !important-tal, tehat a doboz gyakorlatilag
   azonnal ott van. Ez a bolt kialakult hazirendje, es helyes is. Ennek a
   bloknak igy egyetlen dolga marad: hogy ne MOZGAS legyen az, amit a 0,01 ms
   levag. A gomb gyuruje teljesen elmarad, mert az figyelemterelo mozgas, nem
   allapotvaltas. */
@media (prefers-reduced-motion: reduce) {
	.np[open],
	.np[open] .np__aside,
	.np[open] .np__main {
		animation: np-bg 160ms ease-out both;
	}
	.np[open]::backdrop {
		animation: np-bg 160ms ease-out both;
	}
	.np[open] .np__btn {
		animation: none;
	}
	.np__spin {
		animation-duration: 2s;
	}
}