/**
 * checkout-guard.css — the retry notice shown when checkout-guard.js detects a
 * wallet-sheet page freeze (Google Pay CALLBACK_TIMED_OUT and equivalents).
 *
 * See inc/stripe/checkout-guard-telemetry.php and assets/js/checkout-guard.js.
 * Depends on gerbs-tokens.css (enqueued as a dependency).
 */

.gerbs-cg-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--gerbs-warn-tint);
	color: var(--gerbs-warn-ink);
	border: 1px solid var(--gerbs-warn);
	border-radius: var(--radius-md);
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	line-height: var(--lh-snug);
	/* checkout-guard.js scrolls this into view when it appears. Keep breathing
	   room at both edges so the notice never ends up flush against a sticky
	   header or the viewport bottom on the short-page case, where
	   `block: 'center'` has no room to centre anything. */
	scroll-margin-block: 96px;
}

/* The notice is focused programmatically when it appears (tabindex="-1"), which
   is what carries a screen reader and the tab order to it. Give that a visible
   ring so a sighted keyboard user sees where focus went, and match the ring the
   retry button already uses rather than inventing a second style. */
.gerbs-cg-notice:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.gerbs-cg-notice__text {
	margin: 0;
	font-weight: var(--fw-medium);
}

.gerbs-cg-notice__retry {
	flex: 0 0 auto;
	appearance: none;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--gerbs-blue);
	color: var(--gerbs-white);
	font-family: var(--ff-body);
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
	padding: var(--space-2) var(--space-4);
	cursor: pointer;
}

.gerbs-cg-notice__retry:hover,
.gerbs-cg-notice__retry:focus-visible {
	background: var(--gerbs-blue-hover);
}

.gerbs-cg-notice__retry:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}