/* =========================================================================
   Notificarea de adăugare în coș
   Valorile vin 1:1 din Figma, componenta `Notification`:
   `Type=Added-in-cart, Size=Desktop` #18024:2427 · `Size=Mobile` #18024:1454

   ⚠️ Blindajul de specificitate din base.css se aplică și aici: butoanele
   folosesc `.inco-btn`, deja dublat acolo. Ce se adaugă în fișierul acesta și
   atinge un `<button>` sau un `<a>` trebuie dublat la fel.
   ========================================================================= */

.inco-notify {
	position: fixed;

	/*
	 * Peste pagină.
	 *
	 * 🔴 Aici scria „sub coșul lateral (9990 + panoul lui)". Nu e adevărat:
	 * 9992 e PESTE 9990. Măsurat cu „deschide coșul la adăugare" pornit,
	 * cardul cădea 396px peste panoul de 420 și îl acoperea pe înălțime de la
	 * 448 la 796 — adică aproape toată jumătatea lui de jos. Se rezolvă
	 * retrăgând cardul cât e panoul deschis, nu dintr-o cifră; vezi mai jos.
	 */
	z-index: 9992;
	display: flex;
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity .22s ease, transform .22s ease;
}

.inco-notify.is-open {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
}

/*
 * 🔴 Cât e coșul lateral deschis, cardul nu se arată.
 *
 * Amândouă stau dreapta jos, iar panoul e o fereastră modală. Cu „deschide
 * coșul la adăugare" pornit, cele două apar ODATĂ, din același click — deci nu
 * e un caz rar, e configurația.
 *
 * 🔵 Nu se pierde nimic: panoul arată chiar coșul, adică tot ce spunea cardul
 * și mai mult. Cardul e pentru când panoul NU se deschide.
 *
 * Regula stă lângă stiva de notificări din `inco-plus`, care se retrage la fel.
 * → `assets/css/notificari.css`
 */
html.inco-cart-open .inco-notify {
	visibility: hidden;
	opacity: 0;
	transition: opacity .12s ease, visibility 0s linear .12s;
}

/*
 * Poziția implicită: dreapta jos.
 *
 * ⚠️ NU e poziția din machetă (acolo cardul e centrat pe verticală, la dreapta).
 * Schimbată la cererea clientului: dreapta jos e locul convențional pentru o
 * notificare trecătoare și nu acoperă mijlocul ecranului, unde se uită omul.
 * Varianta din Figma rămâne mai jos, ca opțiune.
 */
.inco-notify--bottom-right {
	bottom: 24px;
	inset-inline-end: 24px;
	transform: translateY(12px);
}

.inco-notify--bottom-right.is-open {
	transform: none;
}

/* Poziția din machetă. */
.inco-notify--center-right {
	top: 50%;
	inset-inline-end: 48px;
	transform: translateY(-50%) translateX(12px);
}

.inco-notify--center-right.is-open {
	transform: translateY(-50%);
}

/* Varianta clasică de toast, pentru cine o preferă din setări. */
.inco-notify--top-right {
	top: 24px;
	inset-inline-end: 24px;
	transform: translateY(-12px);
}

.inco-notify--top-right.is-open {
	transform: none;
}

/* ------------------------------------------------------------------ cardul */

.inco-notify__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	/*
	 * 510px de conținut + 2×32 padding = 574. Lățimea e limitată și de viewport,
	 * ca pe ecrane mici între praguri cardul să nu iasă din pagină.
	 */
	width: min(574px, calc(100vw - 32px));
	padding: 32px;
	overflow: hidden;
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-lg);
	background: rgba(250, 252, 255, 0.9);
	box-shadow: 0 0 12px rgba(10, 67, 92, 0.5);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	font-family: var(--inco-co-font);
	color: var(--inco-co-ink);
}

.inco-notify__card * {
	box-sizing: border-box;
}

.inco-notify__slot {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.inco-notify__slot:empty {
	display: none;
}

/* --------------------------------------------------------------- capul */

.inco-notify__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}

.inco-notify__title {
	margin: 0;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: var(--inco-co-primary);
}

/* Clasa dublată: `[type=button]` din tema Hello cântărește (0,1,0). */
.inco-notify__close.inco-notify__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--inco-co-r-pill);
	background: none;
	color: var(--inco-co-muted);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.inco-notify__close.inco-notify__close:hover,
.inco-notify__close.inco-notify__close:focus {
	background: var(--inco-co-tint);
	color: var(--inco-co-ink);
}

.inco-notify__close.inco-notify__close:focus-visible {
	outline: none;
	box-shadow: var(--inco-co-shadow-focus);
}

/* -------------------------------------------------------------- corpul */

.inco-notify__body {
	display: flex;
	align-items: center;
	gap: var(--inco-co-gap);
}

/*
 * Miniatura: 144×120, padding 8, rază 12.
 * Imaginea vine ca `background-image` prin `--inco-co-thumb`, la fel ca în restul
 * pluginului — vezi comentariul din `CartContext::thumb_style()`.
 */
.inco-notify__thumb {
	flex: 0 0 auto;
	width: 144px;
	height: 120px;
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-md);
}

.inco-notify__text {
	margin: 0;
	min-width: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	color: var(--inco-co-primary);
}

/*
 * Numele produsului e link, subliniat, #0A5CCE — exact ca în machetă.
 * Clasa dublată: `.page-content a { text-decoration: underline }` al temei
 * cântărește (0,1,1); aici sublinierea o vrem, dar culoarea trebuie să fie a
 * noastră, nu #c36 din reset-ul temei.
 */
.inco-notify__name.inco-notify__name {
	color: #0A5CCE;
	text-decoration: underline;
}

.inco-notify__name.inco-notify__name:hover {
	color: #073F92;
}

.inco-notify__qty {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	font-size: 14px;
	color: var(--inco-co-muted);
}

/* ------------------------------------------------------------- acțiuni */

.inco-notify__actions {
	display: flex;
	gap: 24px;
}

/*
 * Ambele butoane cresc egal: în machetă au amândouă `sizing: fill` într-un rând
 * de 510px, deci 243px fiecare.
 */
.inco-notify__action.inco-notify__action {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------------------------------------------------------- progresul */

.inco-notify__progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: rgba(5, 110, 155, .12);
}

.inco-notify__progress > span {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	background: var(--inco-co-primary);
}

.inco-notify__progress.is-running > span {
	animation: inco-notify-progress var(--inco-notify-time, 6s) linear forwards;
}

/* Numărătoarea se oprește vizual cât timp cardul e „ținut". */
.inco-notify.is-paused .inco-notify__progress > span {
	animation-play-state: paused;
}

@keyframes inco-notify-progress {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* ============================================================ Responsive */

/*
 * Sub 768px macheta schimbă mai mult decât dimensiunile: cardul urcă în partea
 * de sus, ocupă lățimea ecranului minus 16px de fiecare parte, iar butoanele trec
 * una sub alta.
 */
@media (max-width: 767px) {
	/* Pe telefon cardul ocupă lățimea ecranului minus 16px de fiecare parte. */
	.inco-notify {
		inset-inline: 16px;
	}

	/*
	 * Verticala urmează varianta: „sus" rămâne sus, celelalte două coboară.
	 * Centrarea pe verticală n-are sens pe un ecran înalt și îngust — cardul ar
	 * acoperi exact produsul pe care omul se uită.
	 */
	.inco-notify--top-right {
		top: 16px;
		bottom: auto;
		transform: translateY(-12px);
	}

	.inco-notify--bottom-right,
	.inco-notify--center-right {
		top: auto;
		bottom: 16px;
		transform: translateY(12px);
	}

	.inco-notify.is-open {
		transform: none;
	}

	.inco-notify__card {
		width: 100%;
		gap: var(--inco-co-gap);
		padding: var(--inco-co-gap);
		border-radius: var(--inco-co-r-md);
	}

	.inco-notify__slot {
		gap: var(--inco-co-gap);
	}

	.inco-notify__head {
		gap: 32px;
	}

	.inco-notify__title {
		font-size: 16px;
	}

	.inco-notify__body {
		gap: 8px;
	}

	.inco-notify__thumb {
		width: 112px;
		height: 93px;
		border-radius: var(--inco-co-r);
	}

	.inco-notify__text {
		font-size: 14px;
		letter-spacing: 0.01em;
	}

	.inco-notify__actions {
		flex-direction: column;
		gap: var(--inco-co-gap);
	}
}

@media (prefers-reduced-motion: reduce) {
	.inco-notify {
		transition: none;
	}

	/*
	 * Bara de progres NU se ascunde, doar nu se animă: e singurul indiciu că
	 * cardul dispare singur. Ascunsă, dispariția ar părea aleatorie.
	 */
	.inco-notify__progress.is-running > span {
		animation: none;
		transform: scaleX(1);
	}
}