/*
 * Synercate Checkout — frontend styles.
 *
 * Owned scope: the [synercate_buy] button and (eventually) any inline status
 * affordances around it. Everything else stays in the theme's hands.
 *
 * Theming
 * -------
 * Every visual is driven by CSS custom properties scoped to .synercate-buy-btn.
 * Themes override by re-declaring any of them at a higher specificity, e.g.:
 *
 *   .synercate-buy-btn {
 *       --synercate-btn-bg: #0b6e4f;
 *       --synercate-btn-bg-hover: #094f39;
 *       --synercate-btn-radius: 2px;
 *   }
 *
 * Or per instance via the css_class attribute:
 *
 *   [synercate_buy product="vc-custody-pack" css_class="brand-accent"]
 *
 *   .synercate-buy-btn.brand-accent {
 *       --synercate-btn-bg: #c0392b;
 *   }
 *
 * Properties are declared on the button itself rather than :root so the
 * defaults don't pollute the global cascade, and theme overrides at a more
 * specific selector still cascade in normally.
 *
 * Accessibility
 * -------------
 * - 44px minimum tap target (WCAG 2.5.5 Target Size, Apple HIG).
 * - Visible :focus-visible ring via outline + outline-offset so it survives
 *   Windows High Contrast / forced-colors mode where box-shadow rings vanish.
 * - prefers-reduced-motion disables the hover transition.
 * - type="button" on the markup side prevents accidental form submits.
 */

.synercate-buy-btn {
	/* Palette */
	--synercate-btn-bg: #1a2332;
	--synercate-btn-bg-hover: #0f1620;
	--synercate-btn-bg-active: #050a13;
	--synercate-btn-bg-disabled: #6b7585;
	--synercate-btn-color: #ffffff;

	/* Focus ring */
	--synercate-btn-focus-ring-color: #4d8eff;
	--synercate-btn-focus-ring-width: 3px;
	--synercate-btn-focus-ring-offset: 2px;

	/* Shape & spacing */
	--synercate-btn-padding-y: 0.75rem;
	--synercate-btn-padding-x: 1.5rem;
	--synercate-btn-radius: 6px;
	--synercate-btn-border: 1px solid transparent;
	--synercate-btn-min-height: 44px; /* WCAG tap target */

	/* Typography */
	--synercate-btn-font-size: 1rem;
	--synercate-btn-font-weight: 600;
	--synercate-btn-letter-spacing: 0;
	--synercate-btn-line-height: 1.2;

	/* Motion */
	--synercate-btn-transition: background-color 120ms ease, transform 80ms ease;

	/* Applied styles */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	min-height: var(--synercate-btn-min-height);
	padding: var(--synercate-btn-padding-y) var(--synercate-btn-padding-x);

	background-color: var(--synercate-btn-bg);
	color: var(--synercate-btn-color);

	border: var(--synercate-btn-border);
	border-radius: var(--synercate-btn-radius);

	font-family: inherit;
	font-size: var(--synercate-btn-font-size);
	font-weight: var(--synercate-btn-font-weight);
	letter-spacing: var(--synercate-btn-letter-spacing);
	line-height: var(--synercate-btn-line-height);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;
	user-select: none;
	touch-action: manipulation; /* removes 300ms tap delay on mobile */

	transition: var(--synercate-btn-transition);
	-webkit-appearance: none;
	appearance: none;
}

.synercate-buy-btn:hover {
	background-color: var(--synercate-btn-bg-hover);
	color: var(--synercate-btn-color);
}

.synercate-buy-btn:active {
	background-color: var(--synercate-btn-bg-active);
	transform: translateY(1px);
}

/*
 * :focus-visible isolates the keyboard-focus case from the mouse-click case,
 * so the ring only appears when it's actually helpful. The plain :focus rule
 * below is a safety net for the long tail of browsers without :focus-visible
 * support; it gets overridden by the :focus-visible rule on modern engines.
 */
.synercate-buy-btn:focus {
	outline: var(--synercate-btn-focus-ring-width) solid var(--synercate-btn-focus-ring-color);
	outline-offset: var(--synercate-btn-focus-ring-offset);
}

.synercate-buy-btn:focus:not(:focus-visible) {
	outline: none;
}

.synercate-buy-btn:focus-visible {
	outline: var(--synercate-btn-focus-ring-width) solid var(--synercate-btn-focus-ring-color);
	outline-offset: var(--synercate-btn-focus-ring-offset);
}

.synercate-buy-btn:disabled,
.synercate-buy-btn[aria-disabled="true"] {
	background-color: var(--synercate-btn-bg-disabled);
	cursor: not-allowed;
	opacity: 0.85;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.synercate-buy-btn {
		transition: none;
	}

	.synercate-buy-btn:active {
		transform: none;
	}
}