/* GRZ Gaming — canonical notification rail.
 * WooCommerce notices and programmatic GRZ actions share this component. */

/* --------------------------------------------------------------------------
 * Rail
 * ----------------------------------------------------------------------- */
.grz-toast-stack {
	position: fixed;
	top: max(var(--grz-toast-top, 76px), env(safe-area-inset-top));
	left: 50%;
	right: auto;
	z-index: 100000;
	display: grid;
	gap: 8px;
	width: min(400px, calc(100vw - 32px));
	max-height: calc(100dvh - var(--grz-toast-top, 76px) - 12px);
	padding: 1px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	pointer-events: none;
	scrollbar-width: thin;
	transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
 * Variant tokens
 * ----------------------------------------------------------------------- */
.grz-store-notice {
	--grz-nt-accent: #0868f2;
	--grz-nt-accent-dark: #0759cf;
	--grz-nt-soft: #e4f0ff;
	--grz-nt-soft-border: #b9d5fb;
	--grz-nt-surface: #f0f6ff;
	--grz-nt-border: #d9e8fb;
	--grz-nt-title: #174b7b;
	--grz-nt-copy: #365f82;
}
.grz-store-notice--success {
	--grz-nt-accent: #168341;
	--grz-nt-accent-dark: #116b34;
	--grz-nt-soft: #e3f4e9;
	--grz-nt-soft-border: #bce0c9;
	--grz-nt-surface: #edf8f0;
	--grz-nt-border: #d7eddf;
	--grz-nt-title: #145b34;
	--grz-nt-copy: #2c6947;
}
.grz-store-notice--info {
	--grz-nt-accent: #0868f2;
	--grz-nt-accent-dark: #0759cf;
	--grz-nt-soft: #e4f0ff;
	--grz-nt-soft-border: #b9d5fb;
	--grz-nt-surface: #f0f6ff;
	--grz-nt-border: #d9e8fb;
	--grz-nt-title: #174b7b;
	--grz-nt-copy: #365f82;
}
.grz-store-notice--warning {
	--grz-nt-accent: #c46a07;
	--grz-nt-accent-dark: #9c5304;
	--grz-nt-soft: #ffefd0;
	--grz-nt-soft-border: #efd19a;
	--grz-nt-surface: #fff7e8;
	--grz-nt-border: #f1dfbb;
	--grz-nt-title: #75400c;
	--grz-nt-copy: #86551e;
}
.grz-store-notice--error {
	--grz-nt-accent: #d92d20;
	--grz-nt-accent-dark: #b42318;
	--grz-nt-soft: #ffe4e1;
	--grz-nt-soft-border: #efbbb6;
	--grz-nt-surface: #fff1f0;
	--grz-nt-border: #f1d2cf;
	--grz-nt-title: #852d25;
	--grz-nt-copy: #91443c;
}

/* --------------------------------------------------------------------------
 * Shared card contract
 * ----------------------------------------------------------------------- */
.grz-store-notice {
	position: relative !important;
	box-sizing: border-box !important;
	display: grid !important;
	grid-template-columns: 32px minmax(0, 1fr) max-content 32px;
	grid-template-areas: "icon body actions close";
	align-items: center;
	column-gap: 10px;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 62px !important;
	margin: 0 0 12px !important;
	padding: 11px 9px 11px 11px !important;
	border: 1px solid var(--grz-nt-border) !important;
	border-radius: 11px !important;
	background: var(--grz-nt-surface) !important;
	box-shadow: none !important;
	color: var(--grz-nt-copy) !important;
	font-family: "Inter", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	list-style: none !important;
	transition: opacity 180ms ease, transform 180ms ease, height 180ms ease, margin 180ms ease, padding 180ms ease;
}

/* Remove WooCommerce's native pseudo icons; the real badge is in the grid. */
.grz-store-notice::before,
.grz-store-notice::after {
	display: none !important;
	content: none !important;
}

.grz-store-toast {
	margin: 0 !important;
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 8px 22px rgba(24, 52, 84, 0.10) !important;
	pointer-events: auto;
	animation: grz-toast-enter 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.grz-store-notice--inline {
	margin-bottom: 14px !important;
	border-radius: 10px !important;
}

/* --------------------------------------------------------------------------
 * Icon, copy and lists
 * ----------------------------------------------------------------------- */
.grz-store-notice__icon {
	grid-area: icon;
	display: inline-grid;
	width: 32px;
	height: 32px;
	margin: 0;
	place-items: center;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.84);
	color: var(--grz-nt-accent);
}
.grz-store-notice__icon .dashicons {
	display: block;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
}

.grz-store-notice__body {
	grid-area: body;
	display: flex;
	min-width: 0;
	min-height: 36px;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding-block: 0;
}
.grz-store-notice__title {
	margin: 0;
	color: var(--grz-nt-title);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.4;
}
.grz-store-notice__text,
.grz-store-notice__list,
.grz-store-notice__list li {
	color: var(--grz-nt-copy);
	font: 500 13.5px/1.45 "Inter", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
.grz-store-notice__body:not(:has(.grz-store-notice__title)) .grz-store-notice__text {
	align-content: center;
	min-height: 36px;
	color: var(--grz-nt-title);
	font-weight: 600;
}
.grz-store-notice__text {
	overflow-wrap: anywhere;
}
.grz-store-notice__text :where(a:not(.button)) {
	color: var(--grz-nt-accent-dark);
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.grz-store-notice__list {
	display: grid;
	gap: 5px;
	margin: 3px 0 0;
	padding: 0;
	list-style: none;
}
.grz-store-notice__list li {
	position: relative;
	margin: 0;
	padding-inline-start: 13px;
	border: 0;
	background: none;
	box-shadow: none;
	list-style: none;
}
.grz-store-notice__list li::before {
	position: absolute;
	top: 0.68em;
	inset-inline-start: 1px;
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--grz-nt-accent);
	content: "";
}

/* --------------------------------------------------------------------------
 * Actions
 * ----------------------------------------------------------------------- */
.grz-store-notice__actions {
	grid-area: actions;
	align-self: center;
	display: flex;
	max-width: 100%;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}
.grz-store-notice :where(.button, .wc-forward, .restore-item, .grz-store-notice__action) {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 0 !important;
	min-height: 34px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid var(--grz-nt-soft-border) !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.74) !important;
	box-shadow: none !important;
	color: var(--grz-nt-accent-dark) !important;
	cursor: pointer;
	font: 700 12px/1 "Inter", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif !important;
	text-decoration: none !important;
	white-space: nowrap;
	float: none !important;
	transform: none !important;
	transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease !important;
}
.grz-store-notice :where(.button, .wc-forward, .restore-item, .grz-store-notice__action):is(:hover, :focus-visible) {
	border-color: var(--grz-nt-accent) !important;
	background: var(--grz-nt-soft) !important;
	color: var(--grz-nt-accent-dark) !important;
	transform: none !important;
}

/* --------------------------------------------------------------------------
 * Close control
 * ----------------------------------------------------------------------- */
.grz-store-notice__dismiss {
	grid-area: close;
	place-self: start end;
	display: inline-grid;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	margin: 0;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 9px;
	background: transparent;
	box-shadow: none;
	color: #475467;
	cursor: pointer;
	opacity: 1;
	transform: none;
	transition: background-color 140ms ease, color 140ms ease;
}
.grz-store-notice__dismiss:is(:hover, :focus-visible) {
	background: #f2f4f7;
	color: #172033;
}
.grz-store-notice__dismiss .dashicons {
	display: block;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
 * Progress and motion
 * ----------------------------------------------------------------------- */
.grz-store-notice__progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: block;
	height: 2px;
	background: transparent;
	overflow: hidden;
}
.grz-store-notice__progress-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--grz-nt-accent);
	opacity: 0.38;
	transform-origin: left center;
}
[dir="rtl"] .grz-store-notice__progress-fill {
	transform-origin: right center;
}

@keyframes grz-toast-enter {
	from { opacity: 0; transform: translateY(-8px) scale(0.985); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.grz-store-notice.is-dismissing {
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	padding-block: 0 !important;
	opacity: 0;
	transform: translateY(-6px);
}

/* CSS Grid follows the document direction, so the shared logical order mirrors
 * cleanly in RTL without a second set of physical column assignments. */

/* --------------------------------------------------------------------------
 * Server-rendered fallback before JavaScript enhancement
 * ----------------------------------------------------------------------- */
:where(body.woocommerce, .woocommerce-page, .grz-woocommerce-active, .grz-commerce-flow)
:where(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(.grz-store-notice) {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 14px;
	padding: 13px 15px;
	border: 1px solid #d9e8fb !important;
	border-radius: 10px;
	background: #f0f6ff;
	box-shadow: none;
	color: #174b7b;
	font: 600 14px/1.45 "Inter", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
	list-style: none;
}
:where(body.woocommerce, .woocommerce-page, .grz-woocommerce-active, .grz-commerce-flow)
.woocommerce-message:not(.grz-store-notice) {
	border-color: #d7eddf !important;
	background: #edf8f0;
	color: #145b34;
}
:where(body.woocommerce, .woocommerce-page, .grz-woocommerce-active, .grz-commerce-flow)
.woocommerce-error:not(.grz-store-notice) {
	border-color: #f1d2cf !important;
	background: #fff1f0;
	color: #852d25;
}

.grz-checkout-page .woocommerce-NoticeGroup {
	max-width: var(--grz-container-inner, var(--grz-shell-max, 1440px));
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * Mobile: a stable three-column first row; actions occupy a dedicated second
 * row only when they exist. The real header offset remains in force.
 * ----------------------------------------------------------------------- */
@media (max-width: 760px) {
	.grz-toast-stack {
		left: 12px;
		right: 12px;
		width: auto;
		max-height: calc(100dvh - var(--grz-toast-top, 68px) - 10px);
		transform: none;
	}

	.grz-store-notice {
		grid-template-columns: 32px minmax(0, 1fr) 40px;
		grid-template-areas: none;
		column-gap: 10px;
		row-gap: 8px;
		min-height: 64px !important;
		padding: 11px 8px 11px 11px !important;
		border-radius: 11px !important;
	}
	.grz-store-notice__icon {
		grid-column: 1;
		grid-row: 1;
	}
	.grz-store-notice__body {
		grid-column: 2;
		grid-row: 1;
	}
	.grz-store-notice__dismiss {
		grid-column: 3;
		grid-row: 1;
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
	}
	.grz-store-notice__actions {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
	}
	.grz-store-notice :where(.button, .wc-forward, .restore-item, .grz-store-notice__action) {
		min-height: 40px !important;
		padding-inline: 13px !important;
	}

}

@media (prefers-color-scheme: dark) {
	.grz-store-notice {
		--grz-nt-surface: #111827;
		--grz-nt-border: #344054;
		--grz-nt-title: #f8fafc;
		--grz-nt-copy: #d0d5dd;
	}
	.grz-store-notice__dismiss { color: #d0d5dd; }
	.grz-store-notice__icon {
		background: rgba(255, 255, 255, 0.08);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	}
	.grz-store-notice__dismiss:is(:hover, :focus-visible) { background: #273244; color: #fff; }
	.grz-store-notice :where(.button, .wc-forward, .restore-item, .grz-store-notice__action) {
		background: #111827 !important;
		color: #f8fafc !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grz-store-toast { animation: none; }
	.grz-store-notice { transition: none; }
	.grz-store-notice__progress-fill { transition: none !important; transform: none !important; }
}

@media (forced-colors: active) {
	.grz-store-notice { border: 2px solid CanvasText !important; }
	.grz-store-notice__icon,
	.grz-store-notice__dismiss,
	.grz-store-notice__action { forced-color-adjust: auto; }
}