/**
 * Atomic Addons — shared WooCommerce storefront controls.
 *
 * Wishlist, Compare and Quick View each put a button on the same product card,
 * and each used to style it independently: wishlist and compare had
 * byte-identical rules, while quick view was a pill with a `currentColor`
 * border. Side by side on one card they read as three different plugins.
 *
 * The button is defined once here for all three. The extensions keep their own
 * class names — no markup changed — and their stylesheets are free to add
 * anything genuinely specific to them, since they load after this file.
 */

/* --- Product action button ---------------------------------------------
   Used inline under a product (`--loop`, `--single`) and over the product
   image (`--image`). */

.atomel-wl-btn,
.atomel-cmp-btn,
.atomel-qv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aea-wc-space-2);
	box-sizing: border-box;
	min-height: var(--aea-wc-control-height);
	margin: 0;
	padding: 0 var(--aea-wc-control-padding-x);
	border: 1px solid var(--aea-wc-border);
	border-radius: var(--aea-wc-radius-md);
	background: var(--aea-wc-surface);
	color: var(--aea-wc-text-muted);
	font-size: var(--aea-wc-text-base);
	font-weight: var(--aea-wc-weight-medium);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: color var(--aea-wc-transition), border-color var(--aea-wc-transition),
		background-color var(--aea-wc-transition);
}

.atomel-wl-btn:hover,
.atomel-cmp-btn:hover,
.atomel-qv-btn:hover {
	border-color: var(--aea-wc-border-strong);
	background: var(--aea-wc-surface-subtle);
	color: var(--aea-wc-text);
}

/* Pointer users get the hover treatment above; keyboard users get a ring that
   does not depend on colour alone. */
.atomel-wl-btn:focus-visible,
.atomel-cmp-btn:focus-visible,
.atomel-qv-btn:focus-visible {
	outline: none;
	border-color: var(--aea-wc-accent);
	box-shadow: var(--aea-wc-focus-ring);
	color: var(--aea-wc-text);
}

.atomel-wl-btn:active,
.atomel-cmp-btn:active,
.atomel-qv-btn:active {
	background: var(--aea-wc-surface-muted);
}

/* Already in the wishlist / already in the comparison. The state is carried by
   the icon and the label as well, so this is reinforcement, not the only cue. */
.atomel-wl-btn.is-active,
.atomel-cmp-btn.is-active {
	border-color: var(--aea-wc-accent);
	background: var(--aea-wc-accent);
	color: var(--aea-wc-accent-contrast);
}

.atomel-wl-btn.is-active:hover,
.atomel-cmp-btn.is-active:hover {
	border-color: var(--aea-wc-accent-hover);
	background: var(--aea-wc-accent-hover);
	color: var(--aea-wc-accent-contrast);
}

.atomel-wl-btn[disabled],
.atomel-cmp-btn[disabled],
.atomel-qv-btn[disabled],
.atomel-wl-btn.is-loading,
.atomel-cmp-btn.is-loading,
.atomel-qv-btn.is-loading {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Icons are drawn at the same size in all three, and sit on the text baseline
   rather than floating above it. */
.atomel-wl-btn__icon,
.atomel-cmp-btn__icon,
.atomel-qv-btn__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}

.atomel-wl-btn__icon svg,
.atomel-cmp-btn__icon svg,
.atomel-qv-btn__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* --- Primary action ----------------------------------------------------
   The one filled button in these extensions: add-to-cart inside quick view,
   and add-the-bundle in recommendations. Quick view used to paint its own
   50px button while the bundle kept whatever the theme's `.button` looked
   like, so a single quick-view modal showed two different primary buttons.

   `!important` throughout because these sit on WooCommerce's `.button`, which
   themes style with high specificity — this is the same approach quick view
   already had to take. */

.atomel-qv-cart .single_add_to_cart_button,
.atomel-pr .atomel-pr-bundle__add {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--aea-wc-space-2);
	/* border-box, or the 1px border lands outside the declared height and the
	   button ends up 2px taller than everything else on the row. */
	box-sizing: border-box !important;
	min-height: var(--aea-wc-control-height-lg) !important;
	margin: 0 !important;
	padding: 0 var(--aea-wc-space-5) !important;
	border: 1px solid var(--aea-wc-accent) !important;
	border-radius: var(--aea-wc-radius-md) !important;
	background: var(--aea-wc-accent) !important;
	color: var(--aea-wc-accent-contrast) !important;
	font-size: var(--aea-wc-text-md) !important;
	font-weight: var(--aea-wc-weight-semibold) !important;
	line-height: 1 !important;
	text-decoration: none;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color var(--aea-wc-transition), border-color var(--aea-wc-transition) !important;
}

.atomel-qv-cart .single_add_to_cart_button:hover,
.atomel-pr .atomel-pr-bundle__add:hover {
	border-color: var(--aea-wc-accent-hover) !important;
	background: var(--aea-wc-accent-hover) !important;
	color: var(--aea-wc-accent-contrast) !important;
}

.atomel-qv-cart .single_add_to_cart_button:focus-visible,
.atomel-pr .atomel-pr-bundle__add:focus-visible {
	outline: none;
	box-shadow: var(--aea-wc-focus-ring) !important;
}

.atomel-qv-cart .single_add_to_cart_button.disabled,
.atomel-qv-cart .single_add_to_cart_button[disabled],
.atomel-pr .atomel-pr-bundle__add.is-loading {
	opacity: 0.45;
	box-shadow: none !important;
	cursor: not-allowed;
}

/* --- Over-the-image variant --------------------------------------------
   A round icon button on the product image. Wishlist and compare were already
   40px circles; quick view stayed a wide pill, so a card showed two circles
   and a lozenge. All three are circles now. */

.atomel-wl-btn--image,
.atomel-cmp-btn--image,
.atomel-qv-btn--image {
	width: var(--aea-wc-control-height);
	height: var(--aea-wc-control-height);
	min-height: var(--aea-wc-control-height);
	padding: 0;
	border-color: rgba(24, 24, 27, 0.08);
	border-radius: var(--aea-wc-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	color: var(--aea-wc-text-soft);
	box-shadow: var(--aea-wc-shadow-md);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.atomel-wl-btn--image:hover,
.atomel-cmp-btn--image:hover,
.atomel-qv-btn--image:hover {
	background: var(--aea-wc-surface);
	color: var(--aea-wc-text);
}

.atomel-wl-btn--image.is-active,
.atomel-cmp-btn--image.is-active {
	border-color: transparent;
	background: var(--aea-wc-accent);
	color: var(--aea-wc-accent-contrast);
}

/* The label still names the button for assistive technology — it is moved out
   of view, not removed, so the icon-only button keeps its accessible name. */
.atomel-wl-btn--image .atomel-wl-btn__label,
.atomel-cmp-btn--image .atomel-cmp-btn__label,
.atomel-qv-btn--image .atomel-qv-btn__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Over-image action stack -------------------------------------------
   Each extension positions its own absolutely placed wrapper inside the card.
   They used to land in different corners at different insets — wishlist and
   compare top-right at 12px, quick view bottom-left at 14px — so a card showed
   a scatter rather than a set. They share one column in the top-left corner
   now, at one inset, in a fixed order.

   Top-left is also clear of the sale badge on the themes this ships against
   (Hello Elementor parks `.onsale` in the top-right corner). A theme that puts
   its badge top-left instead would overlap, and the inset below is the single
   value to change for that.

   Scoped to `li.product`: inside the Elementor product widgets these same
   wrappers are laid out by a flex container in wcx-widget-actions.css, which
   is kept on the same side. */

li.product {
	/* Where the column starts, and how far apart the buttons in it are. Both
	   are set on the card so the rules below stay arithmetic-free. */
	--aea-wc-stack-inset: var(--aea-wc-space-3);
	--aea-wc-stack-step: calc(var(--aea-wc-control-height) + var(--aea-wc-space-2));
}

li.product .atomel-wl-image-wrap,
li.product .atomel-cmp-image-wrap,
li.product .atomel-qv-image-wrap {
	position: absolute;
	left: var(--aea-wc-stack-inset);
	right: auto;
	bottom: auto;
	z-index: 3;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--aea-wc-transition), visibility var(--aea-wc-transition),
		transform var(--aea-wc-transition);
}

li.product .atomel-wl-image-wrap {
	top: var(--aea-wc-space-3);
}

li.product .atomel-cmp-image-wrap {
	top: calc(var(--aea-wc-space-3) + var(--aea-wc-stack-step));
}

li.product .atomel-qv-image-wrap {
	top: calc(var(--aea-wc-space-3) + var(--aea-wc-stack-step) * 2);
}

li.product:hover .atomel-wl-image-wrap,
li.product:hover .atomel-cmp-image-wrap,
li.product:hover .atomel-qv-image-wrap,
li.product:focus-within .atomel-wl-image-wrap,
li.product:focus-within .atomel-cmp-image-wrap,
li.product:focus-within .atomel-qv-image-wrap {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Mirrored for right-to-left: the same single column, on the other side. */
.rtl li.product .atomel-wl-image-wrap,
.rtl li.product .atomel-cmp-image-wrap,
.rtl li.product .atomel-qv-image-wrap {
	left: auto;
	right: var(--aea-wc-stack-inset);
}

/* On a touch screen the hover reveal never fires, which left these buttons
   unreachable — quick view already had this problem. Show them outright. */
@media (hover: none) {
	li.product .atomel-wl-image-wrap,
	li.product .atomel-cmp-image-wrap,
	li.product .atomel-qv-image-wrap {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* Touch targets: a 40px circle is the minimum comfortable tap area, so the
   overlay buttons keep their size on small screens rather than shrinking. */
@media (max-width: 767px) {
	.atomel-wl-btn,
	.atomel-cmp-btn,
	.atomel-qv-btn {
		min-height: var(--aea-wc-control-height);
	}
}