/* OrderMint — customer-facing invoice download button.
   Every rule is scoped to the plugin's own class names so theme buttons and
   other links are never affected. */

.ordermint-download-wrap {
	margin: 1.25em 0;
}

/* Brand palette. A theme or child theme can match its own colours by
   redefining these three custom properties, without touching anything else:

	 .ordermint-download-button {
		 --ordermint-button-bg:       #1e40af;
		 --ordermint-button-bg-hover: #1e3a8a;
		 --ordermint-button-text:     #ffffff;
	 }
*/
.ordermint-download-button {
	--ordermint-button-bg: #047857;
	--ordermint-button-bg-hover: #065f46;
	--ordermint-button-text: #ffffff;

	/* Layout */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.75em 1.4em;
	max-width: 100%;

	/* Type */
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	/* Brand: the OrderMint emerald used across the admin UI.
	   White on #047857 is ~5.9:1, comfortably past WCAG AA. */
	color: var(--ordermint-button-text);
	background-color: var(--ordermint-button-bg);
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--ordermint-button-bg) 78%, #ffffff) 0%, var(--ordermint-button-bg) 100%);
	border: 1px solid var(--ordermint-button-bg);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(4, 120, 87, 0.25);

	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ordermint-download-button:hover,
.ordermint-download-button:focus {
	color: var(--ordermint-button-text);
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--ordermint-button-bg-hover) 82%, #ffffff) 0%, var(--ordermint-button-bg-hover) 100%);
	box-shadow: 0 4px 10px rgba(4, 120, 87, 0.3);
	transform: translateY(-1px);
	text-decoration: none;
}

/* Visible keyboard focus that survives themes removing outlines. */
.ordermint-download-button:focus-visible {
	outline: 2px solid var(--ordermint-button-bg-hover);
	outline-offset: 2px;
}

.ordermint-download-button:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(4, 120, 87, 0.25);
}

.ordermint-download-icon {
	width: 1.05em;
	height: 1.05em;
	flex-shrink: 0;
}

/* Full width on small screens so the tap target is comfortable. */
@media (max-width: 480px) {
	.ordermint-download-button {
		display: flex;
		width: 100%;
		padding: 0.85em 1.2em;
	}
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.ordermint-download-button {
		transition: none;
	}

	.ordermint-download-button:hover,
	.ordermint-download-button:focus {
		transform: none;
	}
}