/**
 * ==========================================================
 * CHACHA HOME — COMMERCE ACTIONS V1.7
 * ==========================================================
 *
 * Single source of truth for product-card commerce CTAs.
 *
 * Covers:
 * - Homepage / Yeni Gelenler
 * - Homepage / ChaCha Seçkisi
 * - Classic WooCommerce product loops (shop / search / related / shortcodes)
 * - Product-card cart icon (.chacha-product-cart-trigger)
 * - Catalog Quick Variation Picker
 * - Cart Modal recommendations
 * - Cart Modal quick variation picker
 * - Cart / Kasa Önü Fırsatları
 * - Cart / ChaCha Home Seçkinleri
 *
 * Component files control layout only.
 * This file controls visual CTA language and states.
 */

:root {
	--chacha-commerce-action-height: 44px;
	--chacha-commerce-action-height-mobile: 40px;
	--chacha-commerce-action-bg: #201A17;
	--chacha-commerce-action-border: #201A17;
	--chacha-commerce-action-text: #FFFDFC;
	--chacha-commerce-action-hover: #B08D57;
	--chacha-commerce-action-focus: #B08D57;
	--chacha-commerce-action-status-bg: #FDF9F3;
	--chacha-commerce-action-status-border: #D7B98A;
	--chacha-commerce-action-status-text: #8F6F3F;
}


/**
 * ==========================================================
 * 01. PRIMARY PRODUCT CTA
 * ==========================================================
 */

:is(
	:is(.chacha-product-collection, .chacha-product-card-block-scope) .wp-block-button__link:not(.chacha-product-cart-trigger),
	ul.products li.product .button,
	.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
	.chacha-product-quick-picker__add,
	.chacha-modal-product__button:not(.chacha-modal-product__button--secondary),
	.chacha-quick-variation__add,
	body.woocommerce-cart .chacha-cart-rec-card__button
) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: var(--chacha-commerce-action-height) !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid var(--chacha-commerce-action-border) !important;
	border-radius: 0 !important;
	background: var(--chacha-commerce-action-bg) !important;
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--chacha-font-body, Inter, sans-serif) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.09em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--chacha-commerce-action-text) !important;
	cursor: pointer;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		opacity 180ms ease;
}


@media (hover: hover) {
	:is(
		:is(.chacha-product-collection, .chacha-product-card-block-scope) .wp-block-button__link:not(.chacha-product-cart-trigger),
		ul.products li.product .button,
		.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
		.chacha-product-quick-picker__add,
		.chacha-modal-product__button:not(.chacha-modal-product__button--secondary),
		.chacha-quick-variation__add,
		body.woocommerce-cart .chacha-cart-rec-card__button
	):hover:not(:disabled):not(.disabled) {
		border-color: var(--chacha-commerce-action-hover) !important;
		background: var(--chacha-commerce-action-hover) !important;
		color: #FFFDFC !important;
	}
}


:is(
	:is(.chacha-product-collection, .chacha-product-card-block-scope) .wp-block-button__link:not(.chacha-product-cart-trigger),
	ul.products li.product .button,
	.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
	.chacha-product-quick-picker__add,
	.chacha-modal-product__button:not(.chacha-modal-product__button--secondary),
	.chacha-quick-variation__add,
	body.woocommerce-cart .chacha-cart-rec-card__button
):focus-visible {
	outline: 2px solid var(--chacha-commerce-action-focus);
	outline-offset: 2px;
}


/**
 * ==========================================================
 * 01A. PRODUCT CARD CART TRIGGER
 * ==========================================================
 *
 * Compact, always-visible cart control for classic product
 * cards. Layout/placement belongs to product-card.css.
 */
.chacha-product-cart-trigger {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;

	margin: 0 !important;
	padding: 0 !important;

	border:
		1px
		solid
		var(
			--chacha-subtle,
			#D7CEC4
		) !important;

	border-radius: 50% !important;

	background:
		rgba(
			255,
			253,
			252,
			0.96
		) !important;

	box-shadow:
		0
		4px
		14px
		rgba(
			32,
			26,
			23,
			0.08
		) !important;

	appearance: none;
	-webkit-appearance: none;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		) !important;

	text-decoration: none !important;

	cursor: pointer;

	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease,
		opacity 180ms ease;
}


.chacha-product-cart-trigger__icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	pointer-events: none;
}


.chacha-product-cart-trigger__icon
svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;

	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;

	pointer-events: none;
}


@media (hover: hover) and (pointer: fine) {

	.chacha-product-cart-trigger:hover {
		border-color:
			var(
				--chacha-accent,
				#B08D57
			) !important;

		background:
			var(
				--chacha-accent,
				#B08D57
			) !important;

		color:
			#FFFDFC !important;

		box-shadow:
			0
			6px
			18px
			rgba(
				32,
				26,
				23,
				0.12
			) !important;

		transform:
			translateY(
				-1px
			);
	}

}


.chacha-product-cart-trigger:focus-visible {
	outline:
		2px
		solid
		var(
			--chacha-commerce-action-focus,
			#B08D57
		);

	outline-offset: 2px;
}


/**
 * Native WooCommerce AJAX adds .loading while the request is
 * in flight. Keep the control fixed in place and show one
 * restrained spinner without introducing text/layout shifts.
 */
.chacha-product-cart-trigger.loading,
.chacha-product-cart-trigger.is-loading {
	pointer-events: none !important;

	cursor: wait;

	opacity: 1 !important;
}


.chacha-product-cart-trigger.loading
.chacha-product-cart-trigger__icon,

.chacha-product-cart-trigger.is-loading
.chacha-product-cart-trigger__icon {
	opacity: 0;
}


.chacha-product-cart-trigger.loading::after,
.chacha-product-cart-trigger.is-loading::after {
	content: "";

	position: absolute;

	width: 14px;
	height: 14px;

	border:
		1.5px
		solid
		rgba(
			176,
			141,
			87,
			0.28
		);

	border-top-color:
		var(
			--chacha-accent,
			#B08D57
		);

	border-radius: 50%;

	animation:
		chacha-product-cart-spin
		650ms
		linear
		infinite;
}


/**
 * WooCommerce leaves .added on successful classic-loop AJAX
 * controls. Keep the cart icon visible but give a quiet success
 * acknowledgement; the global cart modal remains the primary
 * confirmation.
 */
.chacha-product-cart-trigger.added {
	border-color:
		var(
			--chacha-commerce-action-status-border,
			#D7B98A
		) !important;

	background:
		var(
			--chacha-commerce-action-status-bg,
			#FDF9F3
		) !important;

	color:
		var(
			--chacha-commerce-action-status-text,
			#8F6F3F
		) !important;
}


@keyframes chacha-product-cart-spin {

	to {
		transform:
			rotate(
				360deg
			);
	}

}


@media (max-width: 767px) {

	.chacha-product-cart-trigger {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
	}


	.chacha-product-cart-trigger__icon {
		width: 16px;
		height: 16px;
	}

}


/**
 * ==========================================================
 * 02. LOADING / DISABLED
 * ==========================================================
 */

:is(
	.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
	.chacha-product-quick-picker__add,
	.chacha-modal-product__button,
	.chacha-quick-variation__add,
	body.woocommerce-cart .chacha-cart-rec-card__button
).is-loading,

:is(
	.chacha-modal-product__button,
	ul.products li.product .button
).loading {
	opacity: 0.55 !important;
	pointer-events: none !important;
	cursor: wait;
}


:is(
	.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
	.chacha-product-quick-picker__add,
	.chacha-modal-product__button,
	.chacha-quick-variation__add,
	body.woocommerce-cart .chacha-cart-rec-card__button
):disabled,

:is(
	ul.products li.product .button
).disabled {
	opacity: 0.36 !important;
	pointer-events: none !important;
	cursor: not-allowed;
}


/**
 * ==========================================================
 * 03. REDUNDANT VIEW-CART FOLLOW-UP
 * ==========================================================
 *
 * ChaCha Home already confirms a successful add through the
 * global cart modal and through the in-card quantity state.
 *
 * WooCommerce may append links such as:
 * - Sepetim
 * - Sepeti görüntüle
 * - View cart
 *
 * commerce-actions.js marks those links with the class below.
 * Classic WooCommerce loops also use .added_to_cart directly.
 */

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.chacha-commerce-view-cart-link--hidden,

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.added_to_cart,

ul.products
li.product
.added_to_cart {
	display: none !important;
}


/**
 * ==========================================================
 * 04. CART PRESENCE STATUS
 * ==========================================================
 *
 * WooCommerce Blocks changes the inner label to values such
 * as "1 sepette" after an item is added. commerce-actions.js
 * detects that live state and adds:
 *
 * - .chacha-commerce-action--in-cart to the BUTTON
 * - .chacha-commerce-cart-state to the state SPAN
 *
 * The button remains functional, but is visually separated
 * from the primary black "Sepete Ekle" action.
 */


:is(
	:is(.chacha-product-collection, .chacha-product-card-block-scope) .wp-block-button__link:not(.chacha-product-cart-trigger),
	ul.products li.product .button,
	.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
	.chacha-product-quick-picker__add,
	.chacha-modal-product__button:not(.chacha-modal-product__button--secondary),
	.chacha-quick-variation__add,
	body.woocommerce-cart .chacha-cart-rec-card__button
).chacha-commerce-action--in-cart {
	border-color:
		var(--chacha-commerce-action-status-border) !important;

	background:
		var(--chacha-commerce-action-status-bg) !important;

	color:
		var(--chacha-commerce-action-status-text) !important;
}


:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wp-block-button__link.chacha-commerce-action--in-cart:not(.chacha-product-cart-trigger)
.chacha-commerce-cart-state {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--chacha-font-body, Inter, sans-serif);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
}


:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wp-block-button__link.chacha-commerce-action--in-cart:not(.chacha-product-cart-trigger)
.chacha-commerce-cart-state::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	border: 1px solid var(--chacha-commerce-action-status-border);
	border-radius: 50%;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	color: var(--chacha-commerce-action-status-text);
}


@media (hover: hover) {
	:is(
		:is(.chacha-product-collection, .chacha-product-card-block-scope) .wp-block-button__link:not(.chacha-product-cart-trigger),
		ul.products li.product .button,
		.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
		.chacha-product-quick-picker__add,
		.chacha-modal-product__button:not(.chacha-modal-product__button--secondary),
		.chacha-quick-variation__add,
		body.woocommerce-cart .chacha-cart-rec-card__button
	).chacha-commerce-action--in-cart:hover:not(:disabled):not(.disabled) {
		border-color:
			var(--chacha-commerce-action-status-text) !important;

		background:
			#F6F1EA !important;

		color:
			var(--chacha-commerce-action-status-text) !important;
	}
}


:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wp-block-button__link.chacha-commerce-action--in-cart:not(.chacha-product-cart-trigger):focus-visible {
	outline:
		2px solid
		var(--chacha-commerce-action-status-border);
	outline-offset: 2px;
}


/**
 * ==========================================================
 * 05. MOBILE
 * ==========================================================
 */

@media (max-width: 767px) {
	:is(
		:is(.chacha-product-collection, .chacha-product-card-block-scope) .wp-block-button__link:not(.chacha-product-cart-trigger),
		ul.products li.product .button,
		.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
		.chacha-product-quick-picker__add,
		.chacha-modal-product__button:not(.chacha-modal-product__button--secondary),
		.chacha-quick-variation__add,
		body.woocommerce-cart .chacha-cart-rec-card__button
	) {
		min-height: var(--chacha-commerce-action-height-mobile) !important;
		padding: 0 8px !important;
		font-size: 9px !important;
		letter-spacing: 0.055em;
	}

	.chacha-product-collection
	.wp-block-button__link.chacha-commerce-action--in-cart
	.chacha-commerce-cart-state {
		gap: 6px;
		font-size: 8px;
		letter-spacing: 0.06em;
	}

	.chacha-product-collection
	.wp-block-button__link.chacha-commerce-action--in-cart
	.chacha-commerce-cart-state::before {
		width: 14px;
		height: 14px;
		flex-basis: 14px;
		font-size: 8px;
	}
}


/**
 * ==========================================================
 * 06. REDUCED MOTION
 * ==========================================================
 */

@media (prefers-reduced-motion: reduce) {

	.chacha-product-cart-trigger {
		transition: none !important;
	}

	:is(
		:is(.chacha-product-collection, .chacha-product-card-block-scope) .wp-block-button__link:not(.chacha-product-cart-trigger),
		ul.products li.product .button,
		.chacha-product-quick-trigger:not(.chacha-product-cart-trigger),
		.chacha-product-quick-picker__add,
		.chacha-modal-product__button,
		.chacha-quick-variation__add,
		body.woocommerce-cart .chacha-cart-rec-card__button
	) {
		transition: none !important;
	}
}