/**
 * Mariwork Core WooCommerce frontend presentation.
 *
 * WooCommerce owns the loop AJAX lifecycle; the Core Bundle form adapter uses
 * the same adding_to_cart/added_to_cart events. Core keeps the button's
 * original text space so its dimensions do not change, makes that text
 * transparent, and centers the existing spinner. The native added_to_cart
 * link remains responsible for the post-success "مشاهده سبد" state.
 * The RTL notice correction below keeps Blocksy's mobile notice icon clear
 * of Persian text without replacing the native notice markup.
 *
 * @package Mariwork_Core
 */

[class*="add_to_cart_button"].loading,
.yith-wcpb-add-to-cart-button.loading {
	position: relative;
	justify-content: center;
	align-items: center;
	gap: 0;
	color: transparent;
}

[class*="add_to_cart_button"].loading::after,
.yith-wcpb-add-to-cart-button.loading::after {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: calc(var(--theme-button-spinner-size, 16px) / -2);
	margin-left: calc(var(--theme-button-spinner-size, 16px) / -2);
	background-color: var(--theme-button-text-initial-color, currentColor);
}

.yith-wcpb-add-to-cart-button.loading::after {
	content: "";
	width: var(--theme-button-spinner-size, 16px);
	height: var(--theme-button-spinner-size, 16px);
	animation: spin 1s linear infinite;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' opacity='0.2' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='2.5'/%3E%3Cpath d='m12,2c5.52,0,10,4.48,10,10' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5'/%3E%3C/svg%3E") center no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' opacity='0.2' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='2.5'/%3E%3Cpath d='m12,2c5.52,0,10,4.48,10,10' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5'/%3E%3C/svg%3E") center no-repeat;
}

/*
 * Blocksy's mobile classic WooCommerce notices use a physical left padding
 * for their icon. On the RTL site the icon is placed at the inline start
 * (right), so move the reserved space to the same logical side for every
 * native info, success, error, and thank-you notice.
 */
@media (max-width: 479.98px) {
	html[dir="rtl"] :is(
		.woocommerce-info,
		.woocommerce-error,
		.woocommerce-message,
		.woocommerce-thankyou-order-received
	) {
		padding-inline-start: 46px;
		padding-inline-end: 15px;
	}
}