/**
 * Product Page: Add to Cart & Purchase Actions Styles
 * ClickUp Task: 86ewyqyd6
 *
 * Styles the native Blocksy/WooCommerce add-to-cart form to match Figma,
 * plus supplementary elements (subtotal row, shipping group, email-when-available).
 *
 * @package Blaze_Commerce
 * @since 1.0.0
 */

/* ==========================================================================
   Subtotal Row (above native form.cart)
   ========================================================================== */

.blaze-add-to-cart-actions {
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	padding-top: 16px;
}

.blaze-subtotal-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.blaze-subtotal-label {
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #4a4a4a;
}

.blaze-subtotal-price {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #4a4a4a;
}

.blaze-subtotal-price del {
	font-weight: 400;
	font-size: 14px;
	opacity: 0.6;
}

.blaze-subtotal-price ins {
	text-decoration: none;
}

/* ==========================================================================
   Native Blocksy/WooCommerce form.cart — Figma overrides
   ========================================================================== */

/* Cart actions row: quantity + ATC + wishlist */
body.single-product .entry-summary .ct-cart-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

/* Quantity stepper — match Figma: [ − | 1 | + ] bordered group, 132px wide, 48px tall */
body.single-product .entry-summary .ct-cart-actions .quantity {
	--quantity-width: 132px;
	--quantity-height: 48px;
	width: 132px !important;
	min-width: 132px;
	height: 48px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	overflow: hidden;
	display: flex !important;
	align-items: center;
	position: relative;
}

/* Number input — centered in the middle cell */
/* Figma: px-16px, py-12px, Regular 18px, color #4a4a4a, NO left/right border */
body.single-product .entry-summary .ct-cart-actions .quantity input.qty {
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	color: #4a4a4a;
	height: 48px;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	order: 1;
	flex: 1;
	min-width: 52px;
	padding: 0 !important;
	margin: 0 !important;
	text-align: center;
}

/* Shared +/- button overrides — side-by-side cells, not absolute */
/* Figma: 12px padding all sides + 16x16 icon = 40px wide each */
body.single-product .entry-summary .ct-cart-actions .quantity .ct-increase,
body.single-product .entry-summary .ct-cart-actions .quantity .ct-decrease {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	inset-inline-start: auto !important;
	inset-inline-end: auto !important;
	width: 40px !important;
	min-width: 40px;
	height: 48px !important;
	max-width: none !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #353638 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	transition: background-color 0.15s ease;
}

body.single-product .entry-summary .ct-cart-actions .quantity .ct-increase:hover,
body.single-product .entry-summary .ct-cart-actions .quantity .ct-decrease:hover {
	background: #f5f5f5 !important;
}

/* Figma icons: vuesax/linear/minus & vuesax/linear/add — 16x16, #4A4A4A stroke 1.5 round */
body.single-product .entry-summary .ct-cart-actions .quantity .ct-decrease::before {
	content: '' !important;
	font-family: initial !important;
	font-size: 0 !important;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 0 !important;
	margin-top: 0 !important;
	padding: 0 !important;
	transform: none !important;
	position: static !important;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8H12' stroke='%234A4A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

body.single-product .entry-summary .ct-cart-actions .quantity .ct-increase::before {
	content: '' !important;
	font-family: initial !important;
	font-size: 0 !important;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 0 !important;
	margin-top: 0 !important;
	padding: 0 !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	position: static !important;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8H12' stroke='%234A4A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 12V4' stroke='%234A4A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

/* Minus button: left cell — no right border per Figma */
body.single-product .entry-summary .ct-cart-actions .quantity .ct-decrease {
	order: 0;
	border: none !important;
}

/* Plus button: right cell — no left border per Figma */
body.single-product .entry-summary .ct-cart-actions .quantity .ct-increase {
	order: 2;
	border: none !important;
}

/* Hide the screen-reader label from layout */
body.single-product .entry-summary .ct-cart-actions .quantity label {
	position: absolute !important;
	clip: rect(0, 0, 0, 0) !important;
}

/* Add to Cart button — match Figma: green accent, 48px tall, 6px radius */
body.single-product .entry-summary .ct-cart-actions .single_add_to_cart_button {
	flex: 1;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	background-color: var(--theme-button-background-initial-color, #2b9947) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-transform: capitalize !important;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: filter 0.15s ease;
}

/* Right arrow icon after button text — per Figma */
body.single-product .entry-summary .ct-cart-actions .single_add_to_cart_button::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12H20M20 12L14 6M20 12L14 18' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

body.single-product .entry-summary .ct-cart-actions .single_add_to_cart_button:hover {
	filter: brightness(0.85);
}

/* Disabled state (no variation selected) — keep green but reduce opacity */
body.single-product .entry-summary .ct-cart-actions .single_add_to_cart_button.disabled {
	background-color: var(--theme-button-background-initial-color, #2b9947) !important;
	opacity: 0.6;
	cursor: not-allowed;
}

/* Wishlist button — match Figma: 48x48, 2px border, 6px radius */
body.single-product .entry-summary .ct-cart-actions .ct-wishlist-button-single {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px !important;
	min-width: 48px;
	height: 48px !important;
	background: #fff;
	border: 2px solid #e4e5e7 !important;
	border-radius: 6px !important;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

body.single-product .entry-summary .ct-cart-actions .ct-wishlist-button-single:hover {
	border-color: #ccc !important;
}

/* Wishlist icon — replace Blocksy heart with Figma stroke-only outline, 24x24 */
body.single-product .entry-summary .ct-cart-actions .ct-wishlist-button-single .ct-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	position: relative;
}

body.single-product .entry-summary .ct-cart-actions .ct-wishlist-button-single .ct-icon-container > svg:first-child {
	display: none !important;
}

body.single-product .entry-summary .ct-cart-actions .ct-wishlist-button-single .ct-icon-container::before {
	content: '';
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 25.5 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.313 22.8911L12.305 22.8868L12.2771 22.8719C12.2534 22.859 12.2194 22.8405 12.1759 22.8165C12.089 22.7683 11.9638 22.6977 11.8059 22.6055C11.4903 22.4211 11.0431 22.1495 10.5082 21.7964C9.44014 21.0913 8.01304 20.0549 6.58212 18.7302C3.75038 16.1088 0.75 12.2142 0.75 7.41676C0.75 3.83797 3.78213 1 7.44231 1C9.59478 1 11.5221 1.97668 12.75 3.50754C13.9779 1.97668 15.9052 1 18.0577 1C21.7179 1 24.75 3.83797 24.75 7.41676C24.75 12.2142 21.7496 16.1088 18.9179 18.7302C17.487 20.0549 16.0599 21.0913 14.9918 21.7964C14.4569 22.1495 14.0097 22.4211 13.6941 22.6055C13.5362 22.6977 13.411 22.7683 13.3241 22.8165C13.2806 22.8405 13.2466 22.859 13.2229 22.8719L13.195 22.8868L13.187 22.8911L13.1836 22.8929C12.9128 23.0357 12.5872 23.0357 12.3164 22.8929L12.313 22.8911Z' stroke='%234A4A4A' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Keep the loader SVG visible for wishlist animation */
body.single-product .entry-summary .ct-cart-actions .ct-wishlist-button-single .ct-icon-container > svg.ct-button-loader {
	display: block !important;
}

/* ==========================================================================
   Email Me When Available (out-of-stock fallback)
   ========================================================================== */

.blaze-email-available-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	background-color: var(--theme-palette-color-1, #2b9947);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 12px;
	transition: background-color 0.15s ease;
}

.blaze-email-available-btn:hover {
	background-color: color-mix(in srgb, var(--theme-palette-color-1, #2b9947) 85%, black);
}

/* ==========================================================================
   Shipping / Returns / Certifications Button Group
   ========================================================================== */

.blaze-shipping-returns-group {
	display: flex;
	width: 100%;
	background: rgba(89, 64, 46, 0.05);
	border-radius: 6px;
	overflow: hidden;
	margin-top: 12px;
}

.blaze-shipping-returns-group button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1;
	padding: 12px 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #59402e;
	transition: background-color 0.15s ease;
}

.blaze-shipping-returns-group button:hover {
	background: rgba(89, 64, 46, 0.1);
}

.blaze-returns-btn,
.blaze-certifications-btn {
	border-left: 1px solid #e4e5e7 !important;
}

.blaze-shipping-returns-group button svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* ==========================================================================
   Mobile — Sticky Add to Cart Bar
   ========================================================================== */

@media (max-width: 768px) {
	/* Sticky bar — Figma: padding 24px 16px, shadow 0px 2px 10px, 96px height */
	body.single-product .entry-summary .ct-cart-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: #fff;
		padding: 24px 16px;
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.12);
	}

	/* Prevent content from being hidden behind the 96px sticky bar */
	body.single-product .entry-summary {
		padding-bottom: 96px;
	}

	/* Quantity — Figma: 132px, same button sizes as desktop */
	body.single-product .entry-summary .ct-cart-actions .quantity {
		width: 132px !important;
		min-width: 132px;
	}

	/* ATC button — Figma: 16px Barlow Bold, px-6 (24px) */
	body.single-product .entry-summary .ct-cart-actions .single_add_to_cart_button {
		font-size: 16px;
		padding: 0 24px;
	}

	/* Wishlist button — Figma mobile: rounded-[4px] (4px radius, not 6px) */
	body.single-product .entry-summary .ct-cart-actions .ct-wishlist-button-single {
		border-radius: 4px !important;
	}

	.blaze-shipping-returns-group button {
		font-size: 13px;
		padding: 10px 6px;
		gap: 4px;
	}

	.blaze-shipping-returns-group button svg {
		width: 18px;
		height: 18px;
	}
}