/**
 * Paylo Hub — WooCommerce notices, in Paylo's voice.
 *
 * WooCommerce prints its own banners on the payment screen: a rejected card,
 * a coupon that worked, a line explaining who is charging. They arrive with
 * WooCommerce's looks — square corners, a hard one-pixel border in full
 * saturation, a 24px filled badge and their own type scale — which on a
 * screen designed to look like nothing else is exactly where the seams show.
 * And it is the worst possible moment for a seam: the customer is reading
 * that banner because something went wrong with their money.
 *
 * So the boxes are rebuilt with the shell's own language — the same radius as
 * its cards, the same tints as its state pills, the same type — and nothing
 * else changes: WooCommerce keeps printing its markup, keeps its roles and
 * its focus handling, and this only dresses it.
 *
 * No icon. WooCommerce ships a filled circular badge with each banner, and it
 * is the loudest thing on a screen whose whole job is to keep one number and
 * one button in view. The state is carried instead by a bar down the left
 * edge — the same device the payment detail uses for its refunds and its
 * payer note — plus the tint. Quieter, and one less shape to look at when
 * someone is already worried about their money. The badge is decorative
 * (WooCommerce marks it aria-hidden), so nothing is lost by hiding it.
 *
 * Scoped to Paylo's three screens on purpose. Nothing here should reach the
 * site's own pages, whose notices belong to whoever designed that theme.
 *
 * Covers both shapes WooCommerce uses: the block banners of the current
 * checkout and the classic list markup that older paths still print.
 */

/* ---------- Tokens per state ---------- */

.paylo-shell-body,
.paylo-public-body,
.paylo-panel-body {
	--paylo-aviso-radio: 12px;

	/* The state is carried by the badge and the tint, and the border stays a
	   hairline barely coloured by it. A saturated outline reads as a warning
	   about the box instead of about the message, and at these lightnesses a
	   red one turns peach and stops looking like an error at all. */
	--paylo-aviso-error-fondo: oklch(0.972 0.022 22);
	--paylo-aviso-error-texto: oklch(0.4 0.15 22);
	--paylo-aviso-error-icono: oklch(0.55 0.2 22);
	--paylo-aviso-error-anillo: oklch(0.55 0.2 22 / 22%);
	--paylo-aviso-ok-fondo: oklch(0.973 0.028 155);
	--paylo-aviso-ok-texto: oklch(0.37 0.1 155);
	--paylo-aviso-ok-icono: oklch(0.52 0.13 155);
	--paylo-aviso-ok-anillo: oklch(0.52 0.13 155 / 22%);
	--paylo-aviso-info-fondo: oklch(0.975 0.018 268);
	--paylo-aviso-info-texto: oklch(0.37 0.07 268);
	--paylo-aviso-info-icono: oklch(0.52 0.17 268);
	--paylo-aviso-info-anillo: oklch(0.52 0.17 268 / 22%);
	--paylo-aviso-aviso-fondo: oklch(0.975 0.032 70);
	--paylo-aviso-aviso-texto: oklch(0.42 0.1 62);
	--paylo-aviso-aviso-icono: oklch(0.62 0.14 62);
	--paylo-aviso-aviso-anillo: oklch(0.62 0.14 62 / 22%);
}

/* An empty wrapper still reserves its margin, which shows up as a gap
   nobody can explain. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---------- Block banners ---------- */

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner {
	display: block;
	margin: 0 0 12px;
	/* WooCommerce marks its own padding !important, so this is the one place
	   the flag is earned rather than reached for: it is the only way to take
	   a third-party rule off our own screen. */
	padding: 12px 15px 12px 16px !important;
	border: 0;
	border-left: 3px solid var(--paylo-aviso-info-icono);
	border-radius: 4px var(--paylo-aviso-radio) var(--paylo-aviso-radio) 4px;
	background: var(--paylo-aviso-info-fondo);
	color: var(--paylo-aviso-info-texto);
	font-size: 13.5px;
	line-height: 1.55;
	text-wrap: pretty;
	animation: paylo-aviso-entra 0.22s ease both;
}

@keyframes paylo-aviso-entra {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner,
	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error,
	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message,
	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info {
		animation: none;
	}
}

/* WooCommerce's badge, out. Decorative and aria-hidden, so hiding it costs
   nothing and gives the message back its own line. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner > svg {
	display: none;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner__content {
	min-width: 0;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner__summary {
	margin: 0 0 4px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	color: inherit;
}

/* A single message needs no heading above it. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner__summary:last-child {
	margin-bottom: 0;
	font-weight: 500;
}

/* The list hangs off the summary, not away from it. WooCommerce indents it
   with a rule of its own, aimed through the content wrapper, so this has to
   name the wrapper too or it loses — and the reader is left with a heading in
   one column and its reasons in another. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner .wc-block-components-notice-banner__content ul,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner .wc-block-components-notice-banner__content ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner li {
	position: relative;
	margin: 0 0 4px;
	padding-left: 15px;
	list-style: none;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner li:last-child {
	margin-bottom: 0;
}

/* A dash, not a disc. The browser's bullet is a blunt round dot that reads
   as debris next to type this size; a short rule in the message's own colour
   reads as punctuation, sits on the first line's cap height rather than
   wherever the font drops it, and starts flush with the heading above so the
   whole block shares one left edge. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner li::before {
	content: '';
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 7px;
	height: 1.5px;
	border-radius: 1px;
	background: currentcolor;
	opacity: 0.45;
}

/* One problem is a sentence, not a list of one. WooCommerce prints the
   summary and a single bullet anyway; this reads it back as prose. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner li:only-child {
	padding-left: 0;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner li:only-child::before {
	display: none;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner a:hover {
	text-decoration-thickness: 2px;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner__dismiss {
	float: right;
	margin: -2px -4px 0 8px;
	padding: 2px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: inherit;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner__dismiss:hover,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner__dismiss:focus-visible {
	opacity: 1;
}

/* WooCommerce focuses the error banner on purpose, so a screen reader
   announces it the moment it appears — and the browser answers that focus
   with its own outline, which on this screen arrives as a thick amber frame
   from nowhere. The focus has to stay visible (it is the whole point), so it
   is not removed but restated: a soft ring in the banner's own colour. */

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner:focus,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--paylo-aviso-info-anillo);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-error:focus,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-error:focus-visible {
	box-shadow: 0 0 0 3px var(--paylo-aviso-error-anillo);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-success:focus,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-success:focus-visible {
	box-shadow: 0 0 0 3px var(--paylo-aviso-ok-anillo);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-warning:focus,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-warning:focus-visible {
	box-shadow: 0 0 0 3px var(--paylo-aviso-aviso-anillo);
}

/* ---------- One rule per state ----------
   Each variant needs saying explicitly, including the neutral one:
   WooCommerce styles .is-info with the same weight as the base rule, so
   leaving it to the defaults above hands it back its own blue. */

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-info {
	background: var(--paylo-aviso-info-fondo);
	color: var(--paylo-aviso-info-texto);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-info {
	border-left-color: var(--paylo-aviso-info-icono);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-error {
	background: var(--paylo-aviso-error-fondo);
	color: var(--paylo-aviso-error-texto);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-error {
	border-left-color: var(--paylo-aviso-error-icono);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-success {
	background: var(--paylo-aviso-ok-fondo);
	color: var(--paylo-aviso-ok-texto);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-success {
	border-left-color: var(--paylo-aviso-ok-icono);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-warning {
	background: var(--paylo-aviso-aviso-fondo);
	color: var(--paylo-aviso-aviso-texto);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner.is-warning {
	border-left-color: var(--paylo-aviso-aviso-icono);
}

/* ---------- Classic list markup ---------- */

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info {
	margin: 0 0 12px;
	padding: 12px 15px 12px 16px;
	border: 0;
	border-left: 3px solid var(--paylo-aviso-info-icono);
	border-radius: 4px var(--paylo-aviso-radio) var(--paylo-aviso-radio) 4px;
	background: var(--paylo-aviso-info-fondo);
	color: var(--paylo-aviso-info-texto);
	font-size: 13.5px;
	line-height: 1.55;
	list-style: none;
	text-wrap: pretty;
	/* Same entrance as the block banners. It matters more here, in fact:
	   this is the shape JavaScript inserts, so it is the only one anybody
	   ever watches arrive. */
	animation: paylo-aviso-entra 0.22s ease both;
}

/* WooCommerce hangs an icon off the box itself, from its own icon font, at
   an absolute position measured against its original 3.5em left padding.
   These boxes are not that wide any more, so the glyph lands on top of the
   first word. It only ever showed up on the notices JavaScript inserts
   without reloading — the ones rendered by the page go through the block
   template, which has no such icon — which is why it survived the restyle:
   nothing on a freshly loaded page looks wrong. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error::before,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message::before,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info::before {
	content: none;
}

/* Same anatomy as the block banners above, so the two shapes WooCommerce
   prints are indistinguishable to whoever is reading them. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error li,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message li,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info li {
	position: relative;
	margin: 0 0 4px;
	/* Earned, like the block padding above: WooCommerce marks this one
	   `padding-left: 0 !important`, so without matching it the dash before
	   each line is drawn underneath the first letter instead of beside it.
	   Only visible with two or more messages at once, which is why it went
	   unnoticed — one message needs no dash and never showed the fault. */
	padding-left: 15px !important;
	list-style: none;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error li:last-child,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message li:last-child,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info li:last-child {
	margin-bottom: 0;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error li::before,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message li::before,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info li::before {
	content: '';
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 7px;
	height: 1.5px;
	border-radius: 1px;
	background: currentcolor;
	opacity: 0.45;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error li:only-child,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message li:only-child,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info li:only-child {
	/* Important too, or the rule above — which had to be — would keep
	   indenting a lone message that has no dash to make room for. */
	padding-left: 0 !important;
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error li:only-child::before,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message li:only-child::before,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info li:only-child::before {
	display: none;
}

/* The bar down the left edge is what carries the state on these screens, so
   it has to change with it. Without this the classic markup kept the neutral
   blue of the base rule, which put a blue bar on a pink error box — and that
   shape only ever appears on a notice inserted without reloading, where
   there is nothing beside it to compare against. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error {
	border-left-color: var(--paylo-aviso-error-icono);
	background: var(--paylo-aviso-error-fondo);
	color: var(--paylo-aviso-error-texto);
}

:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message {
	border-left-color: var(--paylo-aviso-ok-icono);
	background: var(--paylo-aviso-ok-fondo);
	color: var(--paylo-aviso-ok-texto);
}

/* WooCommerce hangs buttons off these ("View cart", "Checkout"); they must
   not keep the theme's button looks inside a Paylo box. */
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error .button,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message .button,
:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info .button {
	float: none;
	margin: 8px 0 0;
	padding: 7px 13px;
	border: 1px solid currentcolor;
	border-radius: 9px;
	background: transparent;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 560px) {
	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner,
	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-error,
	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-message,
	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .woocommerce-info {
		gap: 9px;
		padding: 12px 13px;
		border-radius: 11px;
		font-size: 13px;
	}

	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner > svg {
		width: 17px;
		height: 17px;
	}

	:is(.paylo-shell-body, .paylo-public-body, .paylo-panel-body) .wc-block-components-notice-banner__summary {
		font-size: 13px;
	}
}