/* Stripe checkout button override for Fisiocyl.
 *
 * frappe/payments stripe_checkout.html renders the Pay button with a
 * hard-coded #171717 charcoal background AND a float:right +
 * max-width:40% layout that looks broken on the Fisiocyl page
 * (button hugs the right edge, no lateral padding, visually
 * disconnected from the form). This file is loaded via
 * web_include_css in fisiocyl_lms/hooks.py and overrides ONLY the
 * submit button styling, leaving the Stripe Elements iframe and
 * every other upstream style untouched.
 *
 * Color is sourced from --color-accent (defined in
 * fisiocyl-tailwind.css from fisiocyl_lms.__init__.BRAND_PRIMARY) so
 * that re-theming the brand only requires changing BRAND_PRIMARY in
 * Python and --color-accent in CSS. Hover/active/disabled tones are
 * derived with color-mix() for automatic darken/lighten.
 */

.stripe button#submit,
.stripe button.submit {
	background-color: var(--color-accent, #ec5e6b);
	color: #ffffff;
	/* Layout: full width of the form, with lateral breathing room */
	float: none;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 1.5rem 0 0.5rem 0;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	height: auto;
	line-height: 1.5;
	text-align: center;
	transition: background-color 0.15s ease, transform 0.05s ease,
		box-shadow 0.15s ease;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
		0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.stripe button#submit:hover,
.stripe button.submit:hover {
	background-color: color-mix(in srgb, var(--color-accent, #ec5e6b) 90%, black);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.stripe button#submit:active,
.stripe button.submit:active {
	background-color: color-mix(in srgb, var(--color-accent, #ec5e6b) 80%, black);
	transform: translateY(1px);
}

.stripe button#submit:disabled,
.stripe button.submit:disabled {
	background-color: color-mix(in srgb, var(--color-accent, #ec5e6b) 70%, white);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}