/* ==========================================================================
   TattooClub — Global Toast Notification System (styles)
   One component, sitewide. Tokens follow the existing TattooClub design
   system (ink #111111, ivory #F9F5EF, line #DAD4C8, electric green #B7E41C,
   red #E24C4C, info #2D6CDF) and the Desktop / Mobile toast mockup.
   ========================================================================== */

.tc-toast-region {
	--tc-toast-ink: #111111;
	--tc-toast-muted: #68645E;
	--tc-toast-line: #E7E2D8;
	--tc-toast-card: #FFFFFF;
	--tc-toast-green: #B7E41C;
	--tc-toast-green-strong: #A6D40F;
	--tc-toast-green-tint: #F1F9D6;
	--tc-toast-red: #E24C4C;
	--tc-toast-red-tint: #FDECEC;
	--tc-toast-red-card: #FFF7F7;
	--tc-toast-blue: #2D6CDF;
	--tc-toast-blue-tint: #E8F0FE;
	--tc-toast-orange: #E8890C;
	--tc-toast-orange-tint: #FDF0DD;
	--tc-toast-orange-card: #FFFBF4;
	--tc-toast-grey-tint: #F2EFE9;
	--tc-toast-accent: var(--tc-toast-green);
	--tc-toast-bottom-offset: 0px;

	position: fixed;
	/* Topmost layer: above cart drawer (99999), search overlay (999999),
	   Quick View (2147482000), promo popup and header. */
	z-index: 2147483000;
	top: calc(20px + var(--wp-admin--admin-bar--height, 0px));
	right: 24px;
	width: 380px;
	max-width: calc(100vw - 48px);
	pointer-events: none;
	transition: right .3s ease;
	font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Desktop: while the cart drawer panel (400px, right side) is open, sit
   just to its left so the toast never covers the drawer's own controls. */
@media (min-width: 900px) {
	.tc-toast-region.is-drawer-open { right: 424px; }
}

/* Screen-reader live regions (always in the DOM). */
.tc-toast-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Card */
.tc-toast {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 48px 20px 16px;
	background: var(--tc-toast-card);
	color: var(--tc-toast-ink);
	border: 1px solid var(--tc-toast-line);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(17, 17, 17, .14), 0 2px 6px rgba(17, 17, 17, .06);
	overflow: hidden;
	pointer-events: auto;
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
	box-sizing: border-box;
}
.tc-toast *, .tc-toast *::before, .tc-toast *::after { box-sizing: border-box; }
.tc-toast.is-visible { opacity: 1; transform: none; }
.tc-toast.is-leaving { opacity: 0; transform: translateX(24px); }

/* Icon disc */
.tc-toast__icon {
	flex: 0 0 44px;
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--tc-toast-green-tint);
	color: var(--tc-toast-ink);
}
.tc-toast__icon svg { width: 22px; height: 22px; }

/* Product thumbnail */
.tc-toast__thumb {
	flex: 0 0 56px;
	width: 56px; height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tc-toast-grey-tint);
}
.tc-toast__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tc-toast__body { flex: 1 1 auto; min-width: 0; }
.tc-toast .tc-toast__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--tc-toast-ink);
}
.tc-toast .tc-toast__line {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--tc-toast-muted);
	overflow-wrap: anywhere;
}
.tc-toast .tc-toast__line--price { font-weight: 600; color: var(--tc-toast-ink); margin-top: 2px; }
.tc-toast .tc-toast__line[hidden] { display: none; }

/* Close (44px touch target, visible focus) */
.tc-toast__close {
	position: absolute;
	top: 6px; right: 6px;
	width: 36px; height: 36px;
	padding: 0;
	margin: 0;
	display: flex; align-items: center; justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--tc-toast-ink);
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
	line-height: 1;
}
.tc-toast__close svg { width: 18px; height: 18px; }
.tc-toast__close:hover { background: var(--tc-toast-grey-tint); color: var(--tc-toast-ink); }
.tc-toast__close:focus { outline: none; }
.tc-toast__close:focus-visible {
	outline: 2px solid var(--tc-toast-ink);
	outline-offset: 2px;
	background: var(--tc-toast-grey-tint);
}

/* Progress = remaining display time */
.tc-toast__progress {
	position: absolute;
	left: 16px; right: 16px; bottom: 8px;
	height: 3px;
	border-radius: 3px;
	background: rgba(17, 17, 17, .06);
	overflow: hidden;
}
.tc-toast__progress span {
	display: block;
	width: 100%; height: 100%;
	border-radius: inherit;
	background: var(--tc-toast-accent);
	transform-origin: left center;
	transform: scaleX(1);
}

/* ------------------------------------------------------------ Variants */
/* success / cart / wishlist / coupon — electric green */
.tc-toast--success .tc-toast__icon { background: var(--tc-toast-green-tint); color: #2F3D05; }
.tc-toast--type-success .tc-toast__icon { background: var(--tc-toast-green); color: var(--tc-toast-ink); }
.tc-toast--type-cart .tc-toast__icon,
.tc-toast--type-coupon .tc-toast__icon { background: var(--tc-toast-green-tint); color: #3E5206; }
.tc-toast--type-wishlist .tc-toast__icon { background: var(--tc-toast-green); color: var(--tc-toast-ink); }
.tc-toast--success { border-left: 0; }

/* neutral actions (wishlist removed, quantity) — grey disc, green progress */
.tc-toast--neutral .tc-toast__icon { background: var(--tc-toast-grey-tint); color: var(--tc-toast-ink); }

/* product removed — red trash disc, green progress (action succeeded) */
.tc-toast--neutral-red .tc-toast__icon { background: var(--tc-toast-red-tint); color: #B42323; }

/* copy — blue link disc, green progress (action succeeded) */
.tc-toast--copy .tc-toast__icon { background: var(--tc-toast-blue-tint); color: var(--tc-toast-blue); }

/* error — red */
.tc-toast--error {
	--tc-toast-accent: var(--tc-toast-red);
	background: linear-gradient(90deg, var(--tc-toast-red-card), var(--tc-toast-card) 70%);
	border-color: #F3D2D2;
}
.tc-toast--error .tc-toast__icon { background: var(--tc-toast-red); color: #FFFFFF; }
.tc-toast--type-coupon-error .tc-toast__icon { background: var(--tc-toast-red); color: #FFFFFF; }

/* info — blue */
.tc-toast--info { --tc-toast-accent: var(--tc-toast-blue); }
.tc-toast--info .tc-toast__icon { background: var(--tc-toast-blue); color: #FFFFFF; }

/* warning — amber (not an error) */
.tc-toast--warning {
	--tc-toast-accent: var(--tc-toast-orange);
	background: linear-gradient(90deg, var(--tc-toast-orange-card), var(--tc-toast-card) 70%);
	border-color: #F2DEC0;
}
.tc-toast--warning .tc-toast__icon { background: var(--tc-toast-orange-tint); color: #9A5500; }

/* offline / service unavailable — neutral grey treatment */
.tc-toast--offline { --tc-toast-accent: #68645E; background: linear-gradient(90deg, #F4F2EE, var(--tc-toast-card) 70%); }
.tc-toast--offline .tc-toast__icon { background: #E9E6DF; color: var(--tc-toast-ink); }
/* timeout uses the warning (orange) variant */
.tc-toast--type-timeout .tc-toast__icon { background: var(--tc-toast-orange-tint); color: #9A5500; }

/* Visually hide WooCommerce success notices already shown as a toast. */
.tc-toast-mirrored { display: none !important; }

/* --------------------------------------------------------------- Mobile */
@media (max-width: 767px) {
	.tc-toast-region {
		top: auto;
		right: 12px;
		left: 12px;
		width: auto;
		max-width: none;
		/* Above any fixed bottom UI (bottom nav / sticky CTA) + iPhone home bar */
		bottom: calc(var(--tc-toast-bottom-offset, 0px) + 12px + env(safe-area-inset-bottom, 0px));
		transition: bottom .25s ease;
	}
	.tc-toast-region.is-drawer-open { right: 12px; }

	.tc-toast {
		gap: 10px;
		min-height: 60px;
		padding: 10px 48px 14px 10px;
		border-radius: 14px;
		transform: translateY(16px);
	}
	.tc-toast.is-leaving { transform: translateY(16px); }

	.tc-toast__icon { flex-basis: 36px; width: 36px; height: 36px; }
	.tc-toast__icon svg { width: 18px; height: 18px; }
	.tc-toast__thumb { flex-basis: 40px; width: 40px; height: 40px; border-radius: 6px; }
	.tc-toast .tc-toast__title { font-size: 14px; }

	/* Compact: title + ONE essential line, no price row. */
	.tc-toast .tc-toast__line {
		font-size: 12px;
		margin-top: 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		overflow-wrap: normal;
	}
	.tc-toast .tc-toast__line--price { display: none; }
	/* Errors / warnings / info keep their full message (it is the point). */
	.tc-toast--error .tc-toast__line:not([hidden]),
	.tc-toast--warning .tc-toast__line:not([hidden]),
	.tc-toast--info .tc-toast__line:not([hidden]) {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.tc-toast__close { top: 50%; right: 4px; width: 44px; height: 44px; transform: translateY(-50%); }
	.tc-toast__progress { left: 10px; right: 10px; bottom: 6px; height: 2px; }
}

@media (max-width: 359px) {
	.tc-toast__thumb { display: none; }
}

/* ------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.tc-toast, .tc-toast.is-leaving, .tc-toast-region { transition: none; }
	.tc-toast { transform: none; }
	.tc-toast__progress { display: none; }
}

@media print { .tc-toast-region { display: none !important; } }