/* Wrapper for the button row */
.wi-payment-buttons {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

/* Alignment */
.wi-payment-buttons.wi-button-align-left {
	justify-content: flex-start;
}
.wi-payment-buttons.wi-button-align-center {
	justify-content: center;
}
.wi-payment-buttons.wi-button-align-right {
	justify-content: flex-end;
}

/* The button itself (editor preview + frontend if you use this class there) */
.wi-payment-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	padding: 0.6em 1.4em;
	text-decoration: none;
	border-width: 1px;
	border-style: solid;
	cursor: pointer;
	line-height: 1.2;

	/* Colors via CSS variables (set in JS/PHP) with fallbacks */
	background-color: var(--wi-btn-bg, var(--wp--preset--color--primary, #111827));
	color: var(--wi-btn-text, #ffffff);
	background-image: var(--wi-btn-gradient, none);
	border-color: transparent;
}

/* Size variants */
.wi-button-size-sm .wi-payment-button {
	padding: 0.4em 1.0em;
	font-size: 0.875rem;
}
.wi-button-size-md .wi-payment-button {
	padding: 0.6em 1.4em;
	font-size: 1rem;
}
.wi-button-size-lg .wi-payment-button {
	padding: 0.8em 1.8em;
	font-size: 1.0625rem;
}

/* Shape variants */
.wi-button-shape-rounded .wi-payment-button {
	border-radius: 4px;
}
.wi-button-shape-pill .wi-payment-button {
	border-radius: 999px;
}
.wi-button-shape-square .wi-payment-button {
	border-radius: 0;
}

/* Variant tweaks */
.wi-button-variant-outline .wi-payment-button {
	background-color: transparent;
	background-image: none;
	color: var(--wi-btn-bg, var(--wp--preset--color--primary, #111827));
	border-color: currentColor;
}

.wi-button-variant-ghost .wi-payment-button {
	background-color: transparent;
	background-image: none;
	border-color: transparent;
}