/*
 * WA Quick Checkout - Buy now button.
 * Colours come from Settings (--wa-qc-accent / --wa-qc-on-accent).
 * Selectors are deliberately specific (three contexts: anywhere, inside .woocommerce, and the product
 * page form) so theme and WooCommerce button styles do not win over the chosen look.
 */
html body .wa-qc-buy-now.button,
html body .woocommerce .wa-qc-buy-now.button,
html body.woocommerce div.product form.cart .wa-qc-buy-now.button {
	display: inline-block;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0 0 0 8px;
	text-align: center;
	text-decoration: none;
	color: var(--wa-qc-on-accent, #fff);
	background: var(--wa-qc-accent, #1d4ed8);
	border: 2px solid var(--wa-qc-accent, #1d4ed8);
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s, background-color 0.15s, color 0.15s;
}
/* Size, type and corners. Block themes skip these (see --theme below) and use their own button style instead. */
html body .wa-qc-buy-now.button:not(.wa-qc-buy-now--theme),
html body .woocommerce .wa-qc-buy-now.button:not(.wa-qc-buy-now--theme),
html body.woocommerce div.product form.cart .wa-qc-buy-now.button:not(.wa-qc-buy-now--theme) {
	padding: 0.7em 1.4em;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 8px;
}
html body .wa-qc-buy-now.button:hover,
html body .woocommerce .wa-qc-buy-now.button:hover,
html body.woocommerce div.product form.cart .wa-qc-buy-now.button:hover,
html body .wa-qc-buy-now.button:focus-visible,
html body .woocommerce .wa-qc-buy-now.button:focus-visible,
html body.woocommerce div.product form.cart .wa-qc-buy-now.button:focus-visible {
	color: var(--wa-qc-on-accent, #fff);
	background: var(--wa-qc-accent, #1d4ed8);
	border-color: var(--wa-qc-accent, #1d4ed8);
	filter: brightness(0.92);
}
html body .wa-qc-buy-now.button:focus-visible,
html body .woocommerce .wa-qc-buy-now.button:focus-visible,
html body.woocommerce div.product form.cart .wa-qc-buy-now.button:focus-visible {
	outline: 3px solid var(--wa-qc-accent, #1d4ed8);
	outline-offset: 2px;
}

/* Outline style: dark text on a clear background, filled with the accent on hover. */
html body .wa-qc-buy-now.wa-qc-buy-now--outline.button,
html body .woocommerce .wa-qc-buy-now.wa-qc-buy-now--outline.button,
html body.woocommerce div.product form.cart .wa-qc-buy-now.wa-qc-buy-now--outline.button {
	color: #111827;
	background: transparent;
}
html body .wa-qc-buy-now.wa-qc-buy-now--outline.button:hover,
html body .woocommerce .wa-qc-buy-now.wa-qc-buy-now--outline.button:hover,
html body.woocommerce div.product form.cart .wa-qc-buy-now.wa-qc-buy-now--outline.button:hover,
html body .wa-qc-buy-now.wa-qc-buy-now--outline.button:focus-visible,
html body .woocommerce .wa-qc-buy-now.wa-qc-buy-now--outline.button:focus-visible,
html body.woocommerce div.product form.cart .wa-qc-buy-now.wa-qc-buy-now--outline.button:focus-visible {
	color: var(--wa-qc-on-accent, #fff);
	background: var(--wa-qc-accent, #1d4ed8);
	filter: none;
}

html body .wa-qc-buy-now.button.disabled,
html body .woocommerce .wa-qc-buy-now.button.disabled,
html body.woocommerce div.product form.cart .wa-qc-buy-now.button.disabled,
html body .wa-qc-buy-now.button[aria-disabled="true"],
html body .woocommerce .wa-qc-buy-now.button[aria-disabled="true"],
html body.woocommerce div.product form.cart .wa-qc-buy-now.button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}
html body .wa-qc-buy-now.button.is-loading,
html body .woocommerce .wa-qc-buy-now.button.is-loading,
html body.woocommerce div.product form.cart .wa-qc-buy-now.button.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Shop grids: sit under the Add to cart link, full width of the card. */
html body .wa-qc-buy-now.button.wa-qc-buy-now--link,
html body .woocommerce .wa-qc-buy-now.button.wa-qc-buy-now--link,
html body.woocommerce div.product form.cart .wa-qc-buy-now.button.wa-qc-buy-now--link {
	display: block;
	min-height: 40px;
	margin: 8px 0 0;
	padding: 0.6em 1em;
	font-size: 0.9375rem;
}

/*
 * Block themes: the button carries the theme's own button class (wp-element-button), so its size, type and
 * corners match Add to cart. Only the colours are ours. WooCommerce lays the form out as a grid there, so the
 * button goes under Add to cart, in the same column, instead of stretching across the row.
 */
html body.woocommerce div.product form.cart .wa-qc-buy-now.wa-qc-buy-now--theme.button:not(.wa-qc-buy-now--outline) {
	border-width: 0;
}
html body.woocommerce div.product form.cart > .wa-qc-buy-now.wa-qc-buy-now--theme.button {
	grid-column: 2;
	justify-self: start;
	width: auto;
	min-width: 9rem;
	margin: 8px 0 0;
}

@media (max-width: 480px) {
	html body.woocommerce div.product form.cart .wa-qc-buy-now.button {
		display: block;
		width: 100%;
		margin: 8px 0 0;
	}
}