/*
 * The express acceptance group — DAY-536, "Daylon — Express payment acceptance (UX spec)" v2.
 *
 * One component on the product page, the cart and the checkout (§2, §5), so it brings its own
 * rules rather than borrowing the blocks' checkbox: the product page loads none of WooCommerce's
 * block styles. It draws the checkout terms box's look (§5 — DAY-13 §10.5): a square with the
 * palette's `border` edge, 3.42:1 against the page (DAY-21, WCAG 1.4.11), the tick in `main`.
 * The message is DAY-13 state 13's treatment: icon, text, `error` colour — never colour alone.
 *
 * The focus ring is the site's (style.css, DAY-28 v2 §7), on every control here.
 *
 * Tokens from the theme's theme.json; each has the palette's value as its fallback, so a theme
 * switch leaves the group legible.
 */

.daylon-express-acceptance {
	margin-block: 0 var(--wp--preset--spacing--30, 0.67rem);
	font-size: var(--wp--preset--font-size--base, 1rem);
	line-height: 1.4;
	color: var(--wp--preset--color--main, #221d17);
	text-align: start;
}

/* The row: the box's label fills it, the busy mark keeps a fixed place at its end so it never
   moves the text (E3, «no layout shift»). */
.daylon-express-acceptance__row {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20, 0.44rem);
}

/* The whole label is the target, at least 44 px tall whatever the sentence's length (§7). The
   sentence wraps at 320 px with the box held to its first line (E11); nothing truncates. */
.daylon-express-acceptance__label {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 0.75em;
	min-width: 0;
	min-height: 44px;
	padding-block: 0.5rem;
	box-sizing: border-box;
	cursor: pointer;
}

.daylon-express-acceptance__input[type="checkbox"] {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	width: 1.5em;
	height: 1.5em;
	margin: 0;
	border: 1px solid var(--wp--preset--color--border, #8a7856);
	border-radius: 2px;
	background: var(--wp--preset--color--base, #fff);
	cursor: pointer;
	/* Focus sent here (E2, E7) is never left under a fixed bar: the checkout's sticky pay bar,
	   the product page's buy bar. */
	scroll-margin-block: 6rem;
}

.daylon-express-acceptance__input[type="checkbox"][aria-invalid="true"] {
	border-color: var(--wp--preset--color--error, #a3211d);
}

.daylon-express-acceptance__mark {
	position: absolute;
	top: calc(0.5rem + 0.1875em);
	left: 0.1875em;
	width: 1.125em;
	height: 1.125em;
	fill: var(--wp--preset--color--main, #221d17);
	pointer-events: none;
	visibility: hidden;
}

.daylon-express-acceptance__input:checked + .daylon-express-acceptance__mark {
	visibility: visible;
}

.daylon-express-acceptance__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The two links: the standard link style, underlined. Each tap area is 44 px tall (§7): the
   padding grows the target, not the line, so the sentence keeps its rhythm. The words between
   them («y el») keep them more than 8 px apart. */
.daylon-express-acceptance__text a {
	padding-block: 0.6875rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Slot C: read, not seen. */
.daylon-express-acceptance__hint {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* E3: a small mark in the row while the server is asked. Its place is kept at rest, so the
   label never reflows when it shows. Static where motion is reduced (§7). */
.daylon-express-acceptance__busy {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	margin-block-start: calc(0.5rem + 0.25em);
	border: 2px solid var(--wp--preset--color--border-light, #ecdfc4);
	border-top-color: var(--wp--preset--color--main, #221d17);
	border-radius: 50%;
	box-sizing: border-box;
	visibility: hidden;
}

.daylon-express-acceptance.is-busy .daylon-express-acceptance__busy {
	visibility: visible;
	animation: daylon-express-acceptance-busy 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.daylon-express-acceptance.is-busy .daylon-express-acceptance__busy {
		animation: none;
	}
}

@keyframes daylon-express-acceptance-busy {
	to {
		transform: rotate(360deg);
	}
}

/* The message line (slots B and E): absent at rest — no height, nothing read. Shown, it is the
   loudest thing in the group (§3). */
.daylon-express-acceptance__message {
	display: flex;
	align-items: flex-start;
	gap: 0.35em;
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	line-height: 1.4;
	color: var(--wp--preset--color--error, #a3211d);
}

.daylon-express-acceptance__message.is-shown {
	margin-block-start: var(--wp--preset--spacing--20, 0.44rem);
}

.daylon-express-acceptance__icon {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
}

.daylon-express-acceptance__message:not(.is-shown) .daylon-express-acceptance__icon {
	display: none;
}

/* Path B (§4): the overlay lies exactly over the wallet buttons while they are blocked —
   placed by the script, which knows where the buttons are. Transparent: the buttons look as
   they always do, never greyed (E1). */
.daylon-express-acceptance-host {
	position: relative;
}

.daylon-express-acceptance__overlay {
	position: absolute;
	z-index: 2;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.daylon-express-acceptance__overlay[hidden] {
	display: none;
}