/*
 * ABDigitizing Tips: Option A (pills), ported from docs/mockups/tips-mockup-v1.html.
 *
 * Specificity. FunnelKit's pay template prints
 *   body.woocommerce-order-pay #wfacp-e-form .woocommerce button {...}   (1,2,2)
 *   .wfacp-checkout-form-block.wfacp-baa6f5a9 #wfacp-e-form fieldset legend {...}   (1,2,2)
 * and the block sits inside both. Every rule on a button, the input or the
 * legend therefore starts from "#abdig-tips.abdig-tips" (1,1,0) and names the
 * element with its class, so the base rule is at least (1,3,1) and each state
 * (hover, checked, loading, disabled, busy, focus) is above that, never a tie.
 * The legend uses its own id (2,1,1). No !important except the [hidden] guards.
 * No images, no fonts: the check glyph and the spinner are CSS.
 */

.abdig-tips-wrap {
	display: block;
	margin: 24px 0 20px;
	padding: 0;
}
.abdig-tips-wrap--pay {
	margin: 0 0 20px;
}
.abdig-tips-wrap[hidden] {
	display: none !important;
}

/*
 * Order-pay placeholder. The section is printed hidden at the top of the pay
 * form and moved before the payment section by tips.js; until then the body
 * carries `abdig-tips-pay` (PHP) and not `abdig-tips-placed` (JS), and the
 * payment section reserves roughly the block's height so the page does not
 * jump when the block lands there. The residual shift is the difference
 * between this estimate and the real height (a thank-you line, a lock notice).
 */
body.abdig-tips-pay:not(.abdig-tips-placed) .wfacp-section.wfacp_payment,
body.abdig-tips-pay:not(.abdig-tips-placed) #payment {
	margin-top: 120px;
}

#abdig-tips.abdig-tips {
	--abdig-tip-accent: #2B5E73;      /* petrol, 7.1:1 on white; overridden inline from the settings */
	--abdig-tip-accent-ink: #ffffff;
	--abdig-tip-ink: #192a3d;
	--abdig-tip-muted: #5a6b7c;
	--abdig-tip-line: #d9d9d9;
	--abdig-tip-bg: #f6f6f6;
	--abdig-tip-bg-hover: #eaeaea;
	--abdig-tip-radius: 20px;
	--abdig-tip-font: Arial, Helvetica, sans-serif;
	--abdig-tip-ok: #3c7f5e;
	--abdig-tip-ok-bg: #f2fbf5;
	--abdig-tip-ok-line: #b6ddc3;
	--abdig-tip-err: #c0392b;
	--abdig-tip-err-bg: #fdf3f2;
	--abdig-tip-err-line: #f0c2bd;

	display: block;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	font-family: var(--abdig-tip-font);
	font-size: 15px;
	line-height: 1.45;
	color: var(--abdig-tip-ink);
	box-sizing: border-box;
}
#abdig-tips.abdig-tips *,
#abdig-tips.abdig-tips *::before,
#abdig-tips.abdig-tips *::after {
	box-sizing: border-box;
}
#abdig-tips.abdig-tips [data-abdig-msg][hidden] {
	display: none !important;
}

/* Heading and description (legend 2px + description 12px, or 12px straight to the pills) */
/* Same face as FunnelKit's section headings ("Order Summary", "Payment Information": h2.wfacp_section_heading,
   Lucida Sans Unicode 25px/500, black); the heart follows the text, centred on its x-height (owner, 2026-09-13). */
#abdig-tips.abdig-tips legend#abdig-tips-legend {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0 0 2px;
	padding: 0;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.5;
	color: #000;
	float: none;
}
#abdig-tips.abdig-tips legend#abdig-tips-legend svg {
	width: 22px;
	height: 22px;
	flex: none;
	position: relative;
	top: -2px; /* optical centre of the capitals, not of the line box */
	color: var(--abdig-tip-accent);
}
#abdig-tips.abdig-tips p.abdig-tips__desc {
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--abdig-tip-muted);
}
#abdig-tips.abdig-tips legend#abdig-tips-legend + .abdig-tips__choices,
#abdig-tips.abdig-tips legend#abdig-tips-legend + .abdig-tips__locked {
	margin-top: 10px;
}

/* Pills */
#abdig-tips.abdig-tips .abdig-tips__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto;
	height: auto;
	min-height: 44px;
	min-width: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--abdig-tip-line);
	border-radius: var(--abdig-tip-radius);
	background: var(--abdig-tip-bg);
	color: var(--abdig-tip-ink);
	font: 600 15px/1 var(--abdig-tip-font);
	text-transform: none;
	text-decoration: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	opacity: 1;
	transition: background .12s, border-color .12s, color .12s;
	-webkit-appearance: none;
	appearance: none;
}
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill:hover {
	background: var(--abdig-tip-bg-hover);
	border: 1.5px solid var(--abdig-tip-line);
	color: var(--abdig-tip-ink);
	transform: none;
}
/* Old browsers without :focus-visible drop this rule and keep their own ring */
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill:focus:not(:focus-visible) {
	outline: none;
}
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill:focus-visible {
	outline: 2px solid var(--abdig-tip-accent);
	outline-offset: 2px;
}
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill[aria-checked="true"],
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill[aria-checked="true"]:hover {
	background: var(--abdig-tip-accent);
	border: 1.5px solid var(--abdig-tip-accent); /* same width as unchecked: nothing shifts */
	color: var(--abdig-tip-accent-ink);
}
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill[aria-checked="true"]::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat;
}
/* Loading: a 14px ring replaces the glyph, the label stays */
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill.is-loading::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: none;
	-webkit-mask: none;
	mask: none;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: abdig-tips-spin .8s linear infinite;
}
#abdig-tips.abdig-tips[aria-busy="true"] .abdig-tips__choices button.abdig-tips__pill {
	opacity: .55;
	cursor: progress;
}
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill[disabled],
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
}
@keyframes abdig-tips-spin {
	to { transform: rotate(360deg); }
}

/* Custom row */
#abdig-tips.abdig-tips .abdig-tips__custom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
}
#abdig-tips.abdig-tips .abdig-tips__custom[hidden] {
	display: none !important;
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field label.abdig-tips__label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--abdig-tip-muted);
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money {
	position: relative;
	margin: 0;
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money span {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--abdig-tip-muted);
	font-weight: 600;
	pointer-events: none;
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money input.abdig-tips__input {
	display: block;
	height: 44px;
	min-height: 44px;
	width: 140px;
	margin: 0;
	padding: 0 12px 0 26px;
	border: 1.5px solid var(--abdig-tip-line);
	border-radius: 10px;
	background: #fff;
	font: 600 16px var(--abdig-tip-font);
	color: var(--abdig-tip-ink);
	box-shadow: none;
	-moz-appearance: textfield;
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money input.abdig-tips__input::-webkit-outer-spin-button,
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money input.abdig-tips__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money input.abdig-tips__input:focus {
	outline: 2px solid var(--abdig-tip-accent);
	outline-offset: 1px;
	border-color: var(--abdig-tip-accent);
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money.is-error input.abdig-tips__input {
	border-color: var(--abdig-tip-err);
}
#abdig-tips.abdig-tips .abdig-tips__custom button.abdig-tips__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 44px;
	min-height: 44px;
	min-width: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--abdig-tip-accent);
	border-radius: var(--abdig-tip-radius);
	background: #fff;
	color: var(--abdig-tip-accent);
	font: 600 15px/1 var(--abdig-tip-font);
	text-transform: none;
	text-decoration: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	opacity: 1;
	-webkit-appearance: none;
	appearance: none;
}
#abdig-tips.abdig-tips .abdig-tips__custom button.abdig-tips__apply:hover {
	background: #eef4f6;
	border: 1.5px solid var(--abdig-tip-accent);
	color: var(--abdig-tip-accent);
	transform: none;
}
#abdig-tips.abdig-tips .abdig-tips__custom button.abdig-tips__apply:focus:not(:focus-visible) {
	outline: none;
}
#abdig-tips.abdig-tips .abdig-tips__custom button.abdig-tips__apply:focus-visible {
	outline: 2px solid var(--abdig-tip-accent);
	outline-offset: 2px;
}
#abdig-tips.abdig-tips .abdig-tips__custom button.abdig-tips__apply[disabled] {
	opacity: .55;
	cursor: progress;
}
#abdig-tips.abdig-tips .abdig-tips__custom p.abdig-tips__help {
	flex-basis: 100%;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--abdig-tip-muted);
}
#abdig-tips.abdig-tips .abdig-tips__custom p.abdig-tips__help.is-error {
	color: var(--abdig-tip-err);
}

/*
 * Status line (aria-live). Always in the DOM so the live region exists before
 * its text changes; collapsed while empty, fades after 4 s but keeps its text
 * for screen readers.
 */
#abdig-tips.abdig-tips p.abdig-tips__status {
	display: block;
	margin: 12px 0 0;
	padding: 8px 12px;
	border: 1px solid var(--abdig-tip-ok-line);
	border-radius: 8px;
	background: var(--abdig-tip-ok-bg);
	color: var(--abdig-tip-ok);
	font-size: 13.5px;
	line-height: 1.45;
	/* fade first, then give the space back (the text stays for screen readers) */
	transition: opacity .3s, height 0s .3s, margin 0s .3s, padding 0s .3s, border-width 0s .3s;
}
#abdig-tips.abdig-tips p.abdig-tips__status:empty {
	margin: 0;
	padding: 0;
	border: 0;
	height: 0;
	overflow: hidden;
}
#abdig-tips.abdig-tips p.abdig-tips__status.is-error {
	border-color: var(--abdig-tip-err-line);
	background: var(--abdig-tip-err-bg);
	color: var(--abdig-tip-err);
}
#abdig-tips.abdig-tips p.abdig-tips__status.is-faded {
	opacity: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border-width: 0;
	overflow: hidden;
}

/* Thank-you line under the block once a tip is on the order */
#abdig-tips.abdig-tips p.abdig-tips__thanks {
	margin: 10px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--abdig-tip-muted);
}

/* Increase-only notice (a partial payment is on record), above the pills it explains */
#abdig-tips.abdig-tips .abdig-tips__locked {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--abdig-tip-ok-line);
	border-radius: 8px;
	background: var(--abdig-tip-ok-bg);
	color: var(--abdig-tip-ok);
	font-size: 14px;
	line-height: 1.45;
}
#abdig-tips.abdig-tips .abdig-tips__locked svg {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Mobile */
@media (max-width: 640px) {
	body.abdig-tips-pay:not(.abdig-tips-placed) .wfacp-section.wfacp_payment,
	body.abdig-tips-pay:not(.abdig-tips-placed) #payment {
		margin-top: 174px; /* pills wrap to two rows */
	}
	#abdig-tips.abdig-tips legend#abdig-tips-legend {
		font-size: 21px;
	}
	#abdig-tips.abdig-tips legend#abdig-tips-legend svg {
		width: 19px;
		height: 19px;
	}
	#abdig-tips.abdig-tips .abdig-tips__custom {
		flex-direction: column;
		align-items: stretch;
	}
	#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money input.abdig-tips__input {
		width: 100%;
	}
	#abdig-tips.abdig-tips .abdig-tips__custom button.abdig-tips__apply {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * FunnelKit's per-form stylesheet (a selector list with two ids, e.g.
 * ".wfacp-checkout-form-block.wfacp-xxxx #wfacp-e-form ... button") paints every
 * button black. Measured on the live checkout on 2026-09-13: the pills rendered
 * rgb(0,0,0). Only the visual properties are forced; layout stays above.
 * ------------------------------------------------------------------ */
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill {
	background: var(--abdig-tip-bg) !important;
	color: var(--abdig-tip-ink) !important;
	border: 1.5px solid var(--abdig-tip-line) !important;
	border-radius: var(--abdig-tip-radius) !important;
	padding: 0 18px !important;
	height: auto !important;
	min-height: 44px !important;
	width: auto !important;
	font: 600 15px/1 var(--abdig-tip-font) !important;
	text-transform: none !important;
	box-shadow: none !important;
	line-height: 1 !important;
}
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill:hover {
	background: var(--abdig-tip-bg-hover) !important;
	color: var(--abdig-tip-ink) !important;
	border-color: var(--abdig-tip-line) !important;
}
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill[aria-checked="true"],
#abdig-tips.abdig-tips .abdig-tips__choices button.abdig-tips__pill[aria-checked="true"]:hover {
	background: var(--abdig-tip-accent) !important;
	color: var(--abdig-tip-accent-ink) !important;
	border-color: var(--abdig-tip-accent) !important;
}
#abdig-tips.abdig-tips .abdig-tips__custom button.abdig-tips__apply {
	background: #fff !important;
	color: var(--abdig-tip-accent) !important;
	border: 1.5px solid var(--abdig-tip-accent) !important;
	border-radius: var(--abdig-tip-radius) !important;
	padding: 0 18px !important;
	height: 44px !important;
	min-height: 44px !important;
	width: auto !important;
	font: 600 15px/1 var(--abdig-tip-font) !important;
	text-transform: none !important;
	box-shadow: none !important;
	line-height: 1 !important;
}
#abdig-tips.abdig-tips .abdig-tips__custom button.abdig-tips__apply:hover {
	background: #eef4f6 !important;
	color: var(--abdig-tip-accent) !important;
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money input.abdig-tips__input {
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 12px 0 26px !important;
	border: 1.5px solid var(--abdig-tip-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--abdig-tip-ink) !important;
	box-shadow: none !important;
}
#abdig-tips.abdig-tips .abdig-tips__custom .abdig-tips__field .abdig-tips__money.is-error input.abdig-tips__input {
	border-color: var(--abdig-tip-err) !important;
}

/* FunnelKit's pay template collapses the wrapper margin against the next section; measured 2026-09-13. */
#wfacp-e-form .abdig-tips-wrap--pay,
form#order_review .abdig-tips-wrap--pay {
	margin: 4px 0 26px !important;
	padding-bottom: 4px;
}