/**
 * TOAST "Đã thêm vào giỏ hàng" — component toàn cục.
 *
 * ROOT CAUSE của lỗi Owner báo (icon đè chữ): thông báo này là notice GỐC
 * của WooCommerce (`.woocommerce-message`, in ra bởi
 * `woocommerce_output_all_notices`) và nó xuất hiện ở PDP/Shop — nhưng
 * `notices.css` của theme lại CHỈ được nạp ở trang Giỏ hàng/Thanh toán. Ở
 * mọi trang khác chỉ còn CSS core:
 *
 *   .woocommerce-message      { padding: 1em 2em 1em 3.5em; position: relative }
 *   .woocommerce-message::before { position: absolute; top: 1em; left: 1.5em }
 *
 * — icon neo tuyệt đối, chữ chừa chỗ bằng padding-left, nên chỉ cần chữ dài
 * xuống dòng hoặc padding bị đè là icon nằm chồng lên chữ. Ngoài ra khối này
 * là một dải xám full-bleed, không phải toast.
 *
 * Cách sửa: quan hệ icon ↔ chữ ↔ nút đóng chuyển sang FLEX (icon là một flex
 * item thật, không còn absolute), và khối trở thành toast gọn neo trên đầu
 * màn hình theo mockup. File này nạp TOÀN SITE vì thông báo có thể xuất hiện
 * ở bất kỳ trang nào có nút thêm vào giỏ.
 *
 * CHỈ áp dụng cho notice THÀNH CÔNG. `.woocommerce-error`/`.woocommerce-info`
 * giữ nguyên trong luồng trang (chúng thuộc về form Checkout/mã giảm giá,
 * hoá thành toast sẽ mất ngữ cảnh) — xem components/notices.css.
 *
 * Specificity: core dùng `.woocommerce-message` (0,1,0) và nạp SAU CSS theme,
 * nên bản 1 class sẽ thua ở thế hoà. Bọc thêm wrapper thật của WooCommerce
 * (`.woocommerce-notices-wrapper`) để thắng bằng (0,2,0).
 */

.woocommerce-notices-wrapper .woocommerce-message {
	position: fixed;
	z-index: var(--alo-z-toast); /* dưới cart drawer, trên bottom nav */
	/**
	 * UX review 08/09/2026 — CHUYỂN TỪ TRÊN XUỐNG ĐÁY.
	 *
	 * Site đang có HAI phản hồi khác nhau cho cùng một hành động: quick add ở
	 * lưới hiện pill đen ở ĐÁY (`.alo-cart-toast`, cart-drawer.css), còn thêm
	 * từ trang sản phẩm lại hiện thẻ trắng ở TRÊN ĐẦU. Đo thật trên
	 * production: thẻ trên đầu đè lên ảnh sản phẩm sau khi trang tải lại.
	 *
	 * Nay cả hai cùng neo ở đáy, cùng khoảng hở, cùng nằm trên bottom nav —
	 * "một hành động, một phản hồi". Dùng lại đúng con số offset của
	 * `.alo-cart-toast` để hai toast không bao giờ lệch nhau.
	 */
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: min(560px, calc(100vw - 24px));
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--alo-color-border);
	border-top: 1px solid var(--alo-color-border); /* trung hoà border-top 3px của core */
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
	box-shadow: 0 12px 34px rgba(24, 34, 28, .14);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
}

/* Icon: từ absolute → flex item. Glyph "\e015" vẫn là của font WooCommerce,
   không thay nội dung notice. */
.woocommerce-notices-wrapper .woocommerce-message::before {
	position: static;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--alo-color-primary);
	color: #fff;
	font-size: 13px;
	line-height: 1;
}
/* Clearfix `::after {content:" ";display:table}` của core trở thành flex item
   thừa, tạo khoảng trống lệch bên phải. */
.woocommerce-notices-wrapper .woocommerce-message::after { content: none; }

/* Nút "Xem giỏ hàng" của core `float: right` — trong flex thì float vô nghĩa
   nhưng vẫn phải gỡ để không lệch dòng. */
.woocommerce-notices-wrapper .woocommerce-message .button {
	float: none;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 12px;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--alo-color-primary);
	border-radius: var(--alo-radius-sm);
	background: var(--alo-color-surface);
	color: var(--alo-color-primary);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}
.woocommerce-notices-wrapper .woocommerce-message .button:hover {
	background: var(--alo-color-primary-soft);
}

/* Nút đóng — thêm bằng assets/js/notice-toast.js. Là flex item cuối, không
   chồng lên chữ. */
/* Hình dạng/hover do `.alo-icon-btn--ghost.--sm` lo; ở đây chỉ còn căn lề
   trong toast và bo tròn cho hợp khối thông báo. */
.woocommerce-notices-wrapper .woocommerce-message .alo-toast__close {
	margin-right: -4px;
	border-radius: var(--alo-radius-pill);
}
.woocommerce-notices-wrapper .woocommerce-message .alo-toast__close svg { width: 18px; height: 18px; }

/**
 * Bottom nav hiện ở MỌI bề rộng < 1024px (mobile-nav.css), nên toast phải
 * nhường chỗ từ đúng breakpoint đó — không phải 768px. Cùng công thức với
 * `.alo-cart-toast`.
 */
@media (max-width: 1023px) {
	.woocommerce-notices-wrapper .woocommerce-message {
		bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
		width: auto;
		left: 12px;
		right: 12px;
		max-width: none;
		transform: none;
		font-size: 13.5px;
	}
}