/**
 * Printigly Notices — inline banners + floating toasts.
 *
 * Replaces WooCommerce's default .woocommerce-error / -message / -info boxes.
 *
 * FILENAME IS TIMESTAMPED ON PURPOSE. LiteSpeed on this host runs optm-qs_rm
 * (query strings stripped) with a 1-year browser TTL, so ?ver= cache-busting is
 * invisible — a changed file is only picked up when the FILENAME changes.
 * To ship an update: copy to a new pg-notice.<newtimestamp>.css and bump the
 * PRINTIGLY_NOTICE_ASSET_VER constant in inc/enqueue.php.
 */

/* ==========================================================================
   Shared tokens
   ========================================================================== */

:root {
	--pg-notice-error-bg: #FEF2F2;
	--pg-notice-error-fg: #991B1B;
	--pg-notice-error-accent: #DC2626;

	--pg-notice-success-bg: #F0FDF4;
	--pg-notice-success-fg: #166534;
	--pg-notice-success-accent: #16A34A;

	--pg-notice-info-bg: #EFF6FF;
	--pg-notice-info-fg: #1E40AF;
	--pg-notice-info-accent: #2563EB;
}

/* ==========================================================================
   Inline banner — errors and actionable info. Never auto-dismisses.
   ========================================================================== */

.pg-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	margin: 0 0 16px;
	border-radius: var(--radius-md, 10px);
	border: 1px solid transparent;
	/* Accent rail reads as severity at a glance without shouting */
	border-left-width: 4px;
	font-size: 14px;
	line-height: 1.55;
	position: relative;
	animation: pg-notice-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.pg-notice__icon {
	flex-shrink: 0;
	font-size: 15px;
	/* Optical alignment with the first line of text rather than the box */
	margin-top: 2px;
}

.pg-notice__body {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pg-notice__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

/* WooCommerce sometimes puts a button inside a notice ("View cart"). Keep it on
   brand instead of inheriting the old float-right treatment. */
.pg-notice__body .button {
	display: inline-block;
	margin-left: 10px;
	padding: 7px 16px;
	background: var(--printigly-primary, #FF6B35);
	color: #fff;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.pg-notice__close {
	flex-shrink: 0;
	background: none;
	border: 0;
	padding: 0;
	width: 24px;
	height: 24px;
	line-height: 1;
	font-size: 19px;
	color: currentColor;
	opacity: 0.4;
	cursor: pointer;
	border-radius: 50%;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.pg-notice__close:hover,
.pg-notice__close:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.06);
}

.pg-notice--error {
	background: var(--pg-notice-error-bg);
	color: var(--pg-notice-error-fg);
	border-color: rgba(220, 38, 38, 0.18);
	border-left-color: var(--pg-notice-error-accent);
}

.pg-notice--success {
	background: var(--pg-notice-success-bg);
	color: var(--pg-notice-success-fg);
	border-color: rgba(22, 163, 74, 0.18);
	border-left-color: var(--pg-notice-success-accent);
}

.pg-notice--notice {
	background: var(--pg-notice-info-bg);
	color: var(--pg-notice-info-fg);
	border-color: rgba(37, 99, 235, 0.18);
	border-left-color: var(--pg-notice-info-accent);
}

.pg-notice--error .pg-notice__icon { color: var(--pg-notice-error-accent); }
.pg-notice--success .pg-notice__icon { color: var(--pg-notice-success-accent); }
.pg-notice--notice .pg-notice__icon { color: var(--pg-notice-info-accent); }

@keyframes pg-notice-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Toast — confirmations. Auto-dismisses.
   ========================================================================== */

.pg-toast-region {
	position: fixed;
	/* Clears the sticky header; z-index sits above the announcement bar (1001) */
	top: 84px;
	right: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(360px, calc(100vw - 40px));
	pointer-events: none; /* clicks pass through the empty region */
}

.pg-toast {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 15px;
	border-radius: var(--radius-md, 10px);
	background: #fff;
	color: #1a1a2e;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
	border-left: 4px solid var(--pg-notice-info-accent);
	font-size: 13.5px;
	line-height: 1.5;
	pointer-events: auto; /* but the toasts themselves are interactive */
	animation: pg-toast-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.pg-toast--leaving {
	animation: pg-toast-out 0.24s ease forwards;
}

.pg-toast__icon {
	flex-shrink: 0;
	font-size: 15px;
	margin-top: 1px;
}

.pg-toast__body {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pg-toast__close {
	flex-shrink: 0;
	background: none;
	border: 0;
	padding: 0;
	width: 22px;
	height: 22px;
	font-size: 17px;
	line-height: 1;
	color: #64748B;
	opacity: 0.55;
	cursor: pointer;
	border-radius: 50%;
	transition: opacity 0.15s ease;
}

.pg-toast__close:hover,
.pg-toast__close:focus-visible { opacity: 1; }

.pg-toast--success { border-left-color: var(--pg-notice-success-accent); }
.pg-toast--success .pg-toast__icon { color: var(--pg-notice-success-accent); }
.pg-toast--error   { border-left-color: var(--pg-notice-error-accent); }
.pg-toast--error .pg-toast__icon { color: var(--pg-notice-error-accent); }
.pg-toast--notice  { border-left-color: var(--pg-notice-info-accent); }
.pg-toast--notice .pg-toast__icon { color: var(--pg-notice-info-accent); }

/* Countdown rail — shows the toast is on a timer, and visibly pauses on hover
   so the pause is discoverable rather than a hidden behaviour. */
.pg-toast__timer {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	transform-origin: left center;
	background: currentColor;
	opacity: 0.25;
	animation: pg-toast-timer linear forwards;
}

.pg-toast:hover .pg-toast__timer,
.pg-toast:focus-within .pg-toast__timer {
	animation-play-state: paused;
}

@keyframes pg-toast-timer {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

@keyframes pg-toast-in {
	from { opacity: 0; transform: translateX(24px) scale(0.98); }
	to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes pg-toast-out {
	from { opacity: 1; transform: translateX(0) scale(1); max-height: 200px; }
	to   { opacity: 0; transform: translateX(24px) scale(0.98); max-height: 0; margin-bottom: -10px; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {
	.pg-toast-region {
		/* Full-width strip under the header. Deliberately NOT bottom-anchored —
		   the site has a sticky bottom nav that a bottom toast would sit on. */
		top: 70px;
		right: 10px;
		left: 10px;
		width: auto;
	}

	.pg-toast {
		font-size: 13px;
		padding: 12px 13px;
	}

	.pg-notice {
		font-size: 13.5px;
		padding: 12px 13px;
		gap: 10px;
	}

	.pg-notice__body .button {
		display: block;
		margin: 8px 0 0;
		text-align: center;
	}
}

/* ==========================================================================
   Reduced motion — keep the state change, drop the travel.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.pg-notice,
	.pg-toast,
	.pg-toast--leaving {
		animation: none;
	}

	/* The timer rail is the only cue that a toast is transient, so keep it
	   running — it conveys information, it is not decoration. */
	.pg-toast__timer {
		animation: pg-toast-timer linear forwards;
	}
}

/* ==========================================================================
   Suppress WooCommerce's own notice markup.
   Ours replaces it, but plugins (and WC blocks) can still emit the originals.
   ========================================================================== */

.woocommerce-notices-wrapper:empty {
	display: none;
}

/* ==========================================================================
   Template-rendered notices we can't intercept.

   Some WooCommerce strings are printed directly by templates rather than raised
   through wc_add_notice(), so the notice hooks never see them — cart-empty.php
   hardcodes <div class="cart-empty woocommerce-info">. Restyling is the only way
   to reach these; otherwise the site shows two different notice languages.
   ========================================================================== */

.woocommerce .cart-empty.woocommerce-info,
.woocommerce-page .cart-empty.woocommerce-info,
.woocommerce .woocommerce-info:not(.pg-notice),
.woocommerce .woocommerce-message:not(.pg-notice),
.woocommerce .woocommerce-error:not(.pg-notice) {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	margin: 0 0 16px;
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--radius-md, 10px);
	font-size: 14px;
	line-height: 1.55;
	list-style: none;
}

.woocommerce .woocommerce-info:not(.pg-notice),
.woocommerce .cart-empty.woocommerce-info {
	background: var(--pg-notice-info-bg);
	color: var(--pg-notice-info-fg);
	border-color: rgba(37, 99, 235, 0.18);
	border-left-color: var(--pg-notice-info-accent);
}

.woocommerce .woocommerce-message:not(.pg-notice) {
	background: var(--pg-notice-success-bg);
	color: var(--pg-notice-success-fg);
	border-color: rgba(22, 163, 74, 0.18);
	border-left-color: var(--pg-notice-success-accent);
}

.woocommerce .woocommerce-error:not(.pg-notice) {
	background: var(--pg-notice-error-bg);
	color: var(--pg-notice-error-fg);
	border-color: rgba(220, 38, 38, 0.18);
	border-left-color: var(--pg-notice-error-accent);
}

/* WooCommerce's stock ::before glyph clashes with our icon treatment. */
.woocommerce .woocommerce-info:not(.pg-notice)::before,
.woocommerce .woocommerce-message:not(.pg-notice)::before,
.woocommerce .woocommerce-error:not(.pg-notice)::before,
.woocommerce .cart-empty.woocommerce-info::before {
	content: none;
}