.magps-guide-box {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	margin: 4px 0 6px;
	border-style: solid;
	border-width: 1px;
	border-radius: 16px;
	direction: rtl;
	text-align: right;
}

.magps-guide-box__text {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
}

.magps-gateway-boxes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	width: 100%;
	margin: 4px 0 8px;
}

.magps-widget {
	padding: 5px 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	transition: opacity 200ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
	border-style: solid;
	border-width: 1px;
	border-radius: 12px; /* fallback; overridden to match TorobPay when available */
	position: relative;
	user-select: none;
	direction: rtl;
	min-width: 0;
	cursor: pointer;
}

.magps-widget:hover {
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.magps-widget-media {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.magps-widget-image {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	display: block;
	object-fit: contain;
}

/* Logo animations */
@keyframes magps-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

@keyframes magps-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-6px); }
	60% { transform: translateY(-3px); }
}

@keyframes magps-wobble {
	0%, 100% { transform: translateX(0) rotate(0); }
	15% { transform: translateX(-3px) rotate(-4deg); }
	30% { transform: translateX(2px) rotate(3deg); }
	45% { transform: translateX(-2px) rotate(-2deg); }
	60% { transform: translateX(2px) rotate(2deg); }
	75% { transform: translateX(-1px) rotate(-1deg); }
}

@keyframes magps-ping {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.18);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

@keyframes magps-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes magps-light-sweep {
	0% {
		transform: translateX(-120%) rotate(25deg);
		opacity: 0;
	}
	30% { opacity: 0.85; }
	60% {
		transform: translateX(160%) rotate(25deg);
		opacity: 0;
	}
	100% {
		transform: translateX(160%) rotate(25deg);
		opacity: 0;
	}
}

.magps-logo-pulse {
	animation: magps-pulse 1s ease-in-out infinite;
}

.magps-logo-bounce {
	animation: magps-bounce 1.2s ease-in-out infinite;
}

.magps-logo-wobble {
	animation: magps-wobble 1.2s ease-in-out infinite;
}

.magps-logo-ping {
	animation: magps-ping 1.6s ease-out infinite;
	border-radius: 7px;
}

.magps-logo-spin {
	animation: magps-spin 3s linear infinite;
}

.magps-widget-media.magps-logo-light-sweep {
	position: relative;
	overflow: hidden;
	border-radius: 7px;
}

.magps-widget-media.magps-logo-light-sweep::after {
	content: '';
	position: absolute;
	top: -35%;
	left: 0;
	width: 60%;
	height: 170%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(0) rotate(25deg);
	opacity: 0;
	pointer-events: none;
	animation: magps-light-sweep 1.8s ease-in-out infinite;
}

.magps-widget-content {
	flex: 1;
	min-width: 0;
}

.magps-widget-title {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.magps-widget-description {
	font-weight: 300;
	font-size: 10px;
	line-height: 1.25;
	letter-spacing: -0.2px;
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 480px) {
	.magps-gateway-boxes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5px;
	}

	.magps-widget {
		padding: 4px 6px;
		gap: 4px;
	}

	.magps-widget-image {
		width: 24px;
		height: 24px;
	}

	.magps-widget-title {
		font-size: 10px;
	}

	.magps-widget-description {
		font-size: 9px;
	}
}

/* Add-to-cart highlight after clicking a gateway box */
.single_add_to_cart_button.magps-atc-highlight,
button.single_add_to_cart_button.magps-atc-highlight,
input.single_add_to_cart_button.magps-atc-highlight {
	position: relative;
	z-index: 2;
	overflow: hidden;
	animation: magps-atc-ping 1.6s ease-out 1;
	outline: 2px solid #f59e0b;
	outline-offset: 3px;
}

.single_add_to_cart_button.magps-atc-highlight::after,
button.single_add_to_cart_button.magps-atc-highlight::after {
	content: '';
	position: absolute;
	top: -40%;
	left: 0;
	width: 55%;
	height: 180%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-120%) rotate(25deg);
	pointer-events: none;
	animation: magps-light-sweep 1.2s ease-in-out 1;
}

@keyframes magps-atc-ping {
	0% {
		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
		transform: scale(1);
	}
	60% {
		box-shadow: 0 0 0 14px rgba(245, 158, 11, 0);
		transform: scale(1.03);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
		transform: scale(1);
	}
}

/* Product card gateway logos (shop / archive / related) */
.products .product,
li.product,
.wc-block-grid__product,
.wp-block-post.product,
.xts-products .xts-col {
	position: relative;
}

.magps-loop-logos {
	position: absolute;
	z-index: 20;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	padding: 4px;
	pointer-events: none;
	direction: rtl;
}

.magps-loop-logos--top-right {
	top: 8px;
	right: 8px;
	left: auto;
	bottom: auto;
}

.magps-loop-logos--top-left {
	top: 8px;
	left: 8px;
	right: auto;
	bottom: auto;
}

.magps-loop-logos--bottom-right {
	bottom: 8px;
	right: 8px;
	left: auto;
	top: auto;
}

.magps-loop-logos--bottom-left {
	bottom: 8px;
	left: 8px;
	right: auto;
	top: auto;
}

.magps-loop-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 2px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

.magps-loop-logo img {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	object-fit: contain;
	display: block;
	margin: 0 !important;
	border-radius: 3px;
}

.magps-loop-logos--compat {
	/* Injected by JS into image container */
}