/**
 * Affiliate Product Behaviour — Frontend Styles
 *
 * Styles for the "View Product" button on archive pages.
 * Button colours can be overridden via the admin settings
 * (dynamic CSS injected in wp_head).
 *
 * @package Affiliate_Product_Behaviour
 * @since   1.0.0
 */

/* ==========================================================================
   View Product Button — Archive / Loop
   ========================================================================== */

.apb-view-product {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none !important;
	font-weight: 600;
	letter-spacing: 0.2px;
	width: auto !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	align-self: center !important;
	justify-self: center !important;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.15s ease,
		box-shadow 0.25s ease;
}

/* Hover state */
.apb-view-product:hover,
.apb-view-product:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Active / pressed */
.apb-view-product:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Focus ring for accessibility */
.apb-view-product:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   Subtle shimmer animation on hover
   ========================================================================== */

.apb-view-product::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.15),
		transparent
	);
	transition: none;
	pointer-events: none;
}

.apb-view-product:hover::after {
	animation: apb-shimmer 0.6s ease forwards;
}

@keyframes apb-shimmer {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

/* ==========================================================================
   WooCommerce Block Grid Compatibility
   ========================================================================== */

.wc-block-grid__product .apb-view-product,
.wp-block-post .apb-view-product {
	box-sizing: border-box;
	text-align: center;
	width: auto !important;
	margin: 0 auto;
}

/* ==========================================================================
   Theme Compatibility Overrides
   ========================================================================== */

/* Ensure the button inherits theme button styles properly */
.woocommerce ul.products li.product .apb-view-product,
.woocommerce-page ul.products li.product .apb-view-product,
.woocommerce ul.products li.product .add_to_cart_button.apb-view-product,
.woocommerce-page ul.products li.product .add_to_cart_button.apb-view-product {
	text-decoration: none !important;
	display: inline-flex !important;
	width: auto !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	align-self: center !important;
	justify-self: center !important;
}

/* Storefront */
.storefront .apb-view-product {
	font-size: inherit;
}

/* Astra */
.ast-woocommerce-container .apb-view-product {
	font-size: inherit;
}

/* Kadence */
.wp-site-blocks .apb-view-product {
	font-size: inherit;
}