/*!
 * T5: contact form styling (design §3.5) plus the buy-box/status styles T3
 * specifies but doesn't host (design §3.4/§7 "Collisions" -- T3 sends its
 * CSS needs to T5 through Birdman; there's no shared file edit).
 */

/* Web3Forms honeypot (design §3.5 "Honeypot"): hidden off-screen rather than
 * display:none, so a scripted filler still finds a normal-looking field
 * while a screen reader and a real visitor never encounter it. */
.ag-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Contact form danger message: design's contrast finding (§3.5) -- Elementor's
 * default #d9534f on this form's white background is 3.96:1 (fails AA).
 * #a94442 gives 5.85:1 (AA). Success stays unstyled, as shipped. */
.elementor-message.elementor-message-danger {
	color: #a94442;
}

/* Store-kit design §E.1/§E.2: the stock line and quantity select the kit's
 * store.js fills in and drives. Kept WooCommerce/Kava CSS styles neither --
 * .stock only inherits typography (uploads/elementor/css/global.css) and
 * .quantity's real input styling (woo-module.css ".quantity input") targets
 * an <input>, not the <select> the design brings back (D8) -- so both are
 * hosted here rather than relying on a rule that doesn't match. */
.stock {
	margin: 0 0 8px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 500;
}

.stock.in-stock {
	color: #7ad03a;
}

.stock.out-of-stock {
	color: #a00000;
}

.quantity select {
	width: 70px;
	height: 42px;
	margin: 0 8px 8px 0;
	padding: 8px 10px;
	border: 1px solid #ebeced;
	border-radius: 3px;
	background: #fff;
	color: #a1a2a4;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 300;
	vertical-align: middle;
}

/* --- Buy box (design §3.4/§E.1; the store kit owns store.js/store.css, ag.css
 * hosts the site-specific look per §7 "Collisions"). Everything else the buy
 * box needs (the 270x42 button look, .disabled) already comes from kept
 * WooCommerce CSS. */
.ag-pay--paypal {
	margin-top: 8px;
	width: 270px;
	min-height: 42px;
}

.ag-pay-status {
	font-family: Roboto, sans-serif;
	font-size: 13px;
	/* Every message this element ever shows is a warning or a placeholder
	 * notice (design §3.4 steps 4-5) -- there's no success state, since a
	 * successful pay click navigates away -- so it uses the same danger
	 * shade as the contact form's error text (§3.5), not a conditional class. */
	color: #a94442;
}

/* Placeholder PayPal box (design §3.4 step 5): rendered only when
 * payments.json's paypal.clientId is empty. Fills the .ag-pay--paypal slot
 * at the same footprint as a rendered PayPal button. Explicit opacity/
 * cursor rather than relying on inherited WooCommerce .disabled coverage
 * (T3 relay via Birdman), since this is a plain <button>, not one of the
 * Woo/Elementor selectors that rule targets. */
.ag-pay-placeholder {
	width: 270px;
	height: 42px;
	opacity: 0.5;
	cursor: not-allowed;
}

/* Keyboard focus on the disabled Stripe link and PayPal placeholder (T3 relay via Birdman):
 * both keep tabindex/focusable states while disabled, so they need high-contrast
 * visible focus rings. #1a1a1a achieves ≥3:1 contrast against both white page and
 * the light-blue #398ffc button fill (WCAG 2.2 non-text contrast, AA level). */
a.ag-pay--stripe:focus-visible,
.ag-pay-placeholder:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 3px;
}