/*
   POPUP-UL DE NEWSLETTER
   ---------------------------------------------------------------------------
   Cartela care apare din colț după un minut petrecut pe site și invită la
   /newsletter/.

   DE CE E REFĂCUT. Popup-ul exista din 2 septembrie, dar n-a apărut niciodată:
   markup-ul stătea în două UX Block-uri (`popup-desktop` 125995 și `popup`
   125284), care se randează numai unde sunt inserate — și nu erau inserate
   nicăieri. JS-ul stătea în Flatsome → Advanced → Footer Scripts, iar CSS-ul în
   două locuri deodată, aici și în baza de date. Scriptul căuta
   `#notification-popup-desktop`, nu-l găsea și se oprea la `if (!popup) return`.
   Verificat pe live pe 9 sep 2026: zero elemente cu id-urile alea, pe toate
   paginile încercate.

   UN SINGUR ELEMENT, NU DOUĂ. Înainte erau două cartele identice ca text, una
   pentru desktop și una pentru mobil, iar JS-ul alegea între ele cu
   `matchMedia` O SINGURĂ DATĂ, la încărcare. Cine rotea telefonul sau
   redimensiona fereastra rămânea cu cea greșită, ascunsă de CSS. Aici e un
   singur `.on-popup`, iar poziția o dă `@media`.

   ASCUNS PRIN `hidden`, NU PRIN CSS. Atributul `hidden` e pe element din PHP și
   se ia din JS. Dacă scriptul cade, popup-ul nu apare deloc — pentru un popup
   asta e direcția bună de eșec. (Reguli mai jos nu-l pot dezveli din greșeală:
   `[hidden]` are `display:none` din foaia browserului, iar noi nu punem
   `display` pe `.on-popup` decât după ce JS-ul scoate atributul.)

   CULORILE sunt cele din restul site-ului: coralul #f2694f pe acțiune, textul
   #39364f, chenarul #e6eaee. Fontul Rubik e încărcat doar la 400 și 700, deci
   aici există numai 400 și 700.
*/

.on-popup {
	position: fixed;
	z-index: 100000;
	box-sizing: border-box;
	width: calc(100% - 24px);
	max-width: 380px;
	right: 16px;
	bottom: 16px;
	padding: 18px;
	border: 1px solid #e6eaee;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
	color: #39364f;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .35s ease, transform .35s ease;
}

.on-popup.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Ieșirea e mai scurtă decât intrarea: la plecare nimeni nu se uită. */
.on-popup.is-hiding {
	opacity: 0;
	transform: translateY(10px);
	transition-duration: .2s;
}

.on-popup__inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* ICONUL. `onevent.css`, in `@media (min-width: 1025px)`, pictează TOATE
   iconurile Material cu `color: #f2694f !important` și le pune `padding: 5px`.
   Regulile alea sunt scrise pentru cardurile de pe home, dar n-au niciun
   selector care să le țină acolo. Aici le anulăm — de aceea `!important`, la fel
   ca în cont.css. */
.on-popup__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fdf1ee;
}

.on-popup__icon .material-symbols-rounded {
	padding: 0 !important;
	color: #f2694f !important;
	font-size: 22px;
	line-height: 1;
}

.on-popup__text {
	flex: 1 1 auto;
	min-width: 0;
}

.on-popup__titlu {
	margin: 0 0 4px;
	color: #39364f;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.on-popup__desc {
	margin: 0;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.45;
}

.on-popup__actiuni {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.on-popup .on-popup__mai-tarziu,
.on-popup .on-popup__abonare {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 40px;
	margin: 0;
	padding: 9px 14px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.on-popup .on-popup__mai-tarziu {
	border: 1px solid #d4d2d2;
	background: #fff;
	color: #5a6169;
}

.on-popup .on-popup__mai-tarziu:hover {
	border-color: #b9bec5;
	background: #f4f5f7;
	color: #39364f;
}

.on-popup .on-popup__abonare {
	border: 1px solid #f2694f;
	background: #f2694f;
	color: #fff;
}

.on-popup .on-popup__abonare:hover,
.on-popup .on-popup__abonare:focus {
	border-color: #d2492e;
	background: #d2492e;
	color: #fff;
}

/* X-ul din colț. Face același lucru ca „Mai târziu" — e acolo fiindcă acolo îl
   caută mâna, nu ca a doua opțiune. */
.on-popup .on-popup__inchide {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: -4px -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #9aa1ab;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.on-popup .on-popup__inchide:hover {
	background: #f4f5f7;
	color: #39364f;
}

/* ─── Telefon: bandă jos, pe toată lățimea ───────────────────────────────── */
@media (max-width: 600px) {

	.on-popup {
		right: 12px;
		left: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
		padding: 16px;
	}

	/* Butoanele pe un rând tot pe telefon: sunt scurte, iar unul sub altul ar
	   face cartela cât un sfert de ecran. */
	.on-popup__actiuni {
		margin-top: 12px;
	}
}

/* Cine a cerut mai puțină mișcare o primește: apare, fără să alunece. */
@media (prefers-reduced-motion: reduce) {

	.on-popup {
		transform: none;
		transition: opacity .01s linear;
	}

	.on-popup.is-visible,
	.on-popup.is-hiding {
		transform: none;
	}
}