/* BeautyClouds – Cart Icon Buttons (frontend) */

/* Buttons we target (shop/archive + single) */
.woocommerce a.button.add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce a.product_type_simple,
.woocommerce a.product_type_variable,
.woocommerce a.product_type_external,
.woocommerce a.product_type_grouped,
.woocommerce button.single_add_to_cart_button {
	border-width: var(--bc-cib-border-width, 0px) !important;
	border-style: solid !important;
	border-color: var(--bc-cib-border-color, currentColor) !important;
	border-radius: var(--bc-cib-radius, 999px) !important;

	background: var(--bc-cib-bg, transparent) !important;
	color: var(--bc-cib-color, inherit) !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--bc-cib-gap, 8px) !important;

	height: var(--bc-cib-height, auto) !important;
	line-height: 1 !important;

	/* Auto width by default; can be forced via settings */
	width: var(--bc-cib-width, auto) !important;

	/* Useful when text is visible */
	padding: var(--bc-cib-pad-y, 0px) var(--bc-cib-pad-x, 0px) !important;

	position: relative;
}

/* Hover states */
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce a.product_type_simple:hover,
.woocommerce a.product_type_variable:hover,
.woocommerce a.product_type_external:hover,
.woocommerce a.product_type_grouped:hover,
.woocommerce button.single_add_to_cart_button:hover {
	background: var(--bc-cib-hover-bg, var(--bc-cib-bg, transparent)) !important;
	color: var(--bc-cib-hover-color, var(--bc-cib-color, inherit)) !important;
	border-color: var(--bc-cib-hover-border, var(--bc-cib-border-color, currentColor)) !important;
}

/* The injected icon span */
.bc-cib-icon.dashicons {
	font-size: var(--bc-cib-icon-size, 18px) !important;
	width: auto;
	height: auto;
	line-height: 1;
	display: inline-block;
}

/* If icon-only: visually hide text but keep it accessible */
.bc-cib-hide-text .bc-cib-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Optional badge styling if a theme/plugin outputs something like:
   <span class="bc-cib-badge">4</span> inside the button/link */
.bc-cib-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: var(--bc-cib-badge-size, 22px);
	height: var(--bc-cib-badge-size, 22px);
	padding: 0 6px;
	border-radius: 999px;
	background: var(--bc-cib-badge-bg, #f59e0b);
	color: var(--bc-cib-badge-color, #fff);
	font-size: 13px;
	line-height: var(--bc-cib-badge-size, 22px);
	text-align: center;
	box-sizing: border-box;
}