/**
 * ELREDA GROUP — Wishlist + Compare + Cart card actions
 * v4
 */

/* ==========================================================
   PRODUCT CARD ACTION STACK
   ========================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.elreda-home-product,
.elreda-home-product__image {
	position: relative;
}

/*
 * We supply our own cart icon in the 3-icon stack.
 * Hide ONLY Astra's duplicate modern add-to-cart/select-options trigger.
 * Sale badge and any other Astra card UI remain untouched.
 */
.woocommerce ul.products li.product .ast-on-card-button.ast-select-options-trigger,
.woocommerce-page ul.products li.product .ast-on-card-button.ast-select-options-trigger {
	display: none !important;
}

/*
 * RTL: inline-end is the physical LEFT side.
 * This keeps the action stack opposite the sale badge.
 */
.elreda-card-actions {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 25;

	display: flex;
	flex-direction: column;
	gap: 7px;

	pointer-events: none;
}

.elreda-home-product__image .elreda-card-actions {
	top: 8px;
	inset-inline-end: 8px;
}

.elreda-card-action {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;
	flex: 0 0 40px;

	/*
	 * Semi-transparent frosted background:
	 * product image remains visible instead of being covered by solid white.
	 */
	border: 1px solid rgba(226, 231, 237, .78);
	border-radius: 50%;
	background: rgba(255, 255, 255, .72);
	color: #061A36;

	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);

	box-shadow: 0 3px 10px rgba(6, 26, 54, .09);
	overflow: visible;

	pointer-events: auto;

	transition:
		background-color .18s ease,
		border-color .18s ease,
		color .18s ease,
		transform .18s ease,
		box-shadow .18s ease;
}

.elreda-card-action:hover {
	color: #ED0029;
	background: rgba(255, 255, 255, .88);
	border-color: rgba(237, 0, 41, .28);
	box-shadow: 0 5px 14px rgba(6, 26, 54, .13);
	transform: translateY(-1px);
}

.elreda-card-action:focus-within {
	outline: 2px solid #1267C4;
	outline-offset: 2px;
}

/*
 * Keep the REAL WPC / WooCommerce action full-size and clickable,
 * but transparent. This preserves AJAX/state behavior.
 */
.elreda-card-action .woosw-btn,
.elreda-card-action .woosc-btn,
.elreda-card-action .elreda-cart-btn {
	position: absolute !important;
	inset: 0 !important;
	z-index: 5 !important;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;

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

	border: 0 !important;
	border-radius: 50% !important;

	background: transparent !important;
	box-shadow: none !important;

	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-decoration: none !important;

	opacity: 0 !important;
	cursor: pointer !important;
}

/* Prevent plugin pseudo-icons/text from appearing over our UI. */
.elreda-card-action .woosw-btn::before,
.elreda-card-action .woosw-btn::after,
.elreda-card-action .woosc-btn::before,
.elreda-card-action .woosc-btn::after,
.elreda-card-action .elreda-cart-btn::before,
.elreda-card-action .elreda-cart-btn::after {
	display: none !important;
}

/* ----------------------------------------------------------
   ICONS — pure CSS, no SVG sanitization issues
   ---------------------------------------------------------- */

/* Wishlist heart. */
.elreda-card-action--wishlist::before {
	content: "♡";

	position: absolute;
	inset: 0;
	z-index: 2;

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

	color: currentColor;
	font-family: Arial, "Segoe UI Symbol", sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;

	transform: translateY(-1px);
	pointer-events: none;
}

/* Compare: two overlapping layers. */
.elreda-card-action--compare::before,
.elreda-card-action--compare::after {
	content: "";

	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;

	width: 15px;
	height: 11px;

	border: 1.8px solid currentColor;
	border-radius: 2px;

	box-sizing: border-box;
	pointer-events: none;
}

.elreda-card-action--compare::before {
	transform: translate(-65%, -35%);
}

.elreda-card-action--compare::after {
	transform: translate(-35%, -65%);
	background: rgba(255, 255, 255, .54);
}

/* Cart: basket + two wheels. */
.elreda-card-action--cart::before {
	content: "";

	position: absolute;
	left: 50%;
	top: 48%;
	z-index: 2;

	width: 16px;
	height: 11px;

	border: 1.8px solid currentColor;
	border-top: 0;
	border-radius: 1px 1px 3px 3px;

	transform: translate(-46%, -62%) skewX(-7deg);
	box-sizing: border-box;
	pointer-events: none;
}

.elreda-card-action--cart::after {
	content: "";

	position: absolute;
	left: calc(50% - 5px);
	top: calc(50% + 7px);
	z-index: 2;

	width: 3px;
	height: 3px;

	border-radius: 50%;
	background: currentColor;
	box-shadow: 10px 0 0 currentColor;

	pointer-events: none;
}

/* Small cart handle. */
.elreda-card-action--cart .elreda-card-action__tooltip::before {
	content: "";

	position: absolute;
	right: calc(100% + 11px);
	top: 50%;

	width: 6px;
	height: 5px;

	border-top: 1.8px solid #061A36;
	border-left: 1.8px solid #061A36;

	opacity: 0;
	pointer-events: none;
}

/* ----------------------------------------------------------
   ACTIVE STATES
   ---------------------------------------------------------- */

.elreda-card-action.is-active {
	color: #ED0029;
	border-color: rgba(237, 0, 41, .26);
	background: rgba(255, 244, 246, .84);
}

.elreda-card-action--wishlist.is-active::before {
	content: "♥";
	font-size: 23px;
}

.elreda-card-action--compare.is-active::after {
	background: rgba(255, 244, 246, .64);
}

/* Cart turns red briefly/after WooCommerce marks it as added. */
.elreda-card-action--cart.is-active {
	color: #ED0029;
	background: rgba(255, 244, 246, .84);
}

/* ----------------------------------------------------------
   TOOLTIP
   ---------------------------------------------------------- */

.elreda-card-action__tooltip {
	position: absolute;
	top: 50%;
	inset-inline-end: calc(100% + 9px);
	z-index: 50;

	display: block;

	min-width: max-content;
	max-width: 180px;
	padding: 7px 10px;

	border-radius: 6px;
	background: #061A36;
	color: #FFFFFF;

	font: 600 12px/1.35 "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) translateX(4px);

	pointer-events: none;

	transition:
		opacity .15s ease,
		visibility .15s ease,
		transform .15s ease;
}

.elreda-card-action:hover .elreda-card-action__tooltip,
.elreda-card-action:focus-within .elreda-card-action__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* Mobile: no hover tooltip that can cover the product image. */
@media (hover: none), (max-width: 767px) {
	.elreda-card-action__tooltip {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.elreda-card-actions {
		top: 7px;
		inset-inline-end: 7px;
		gap: 6px;
	}

	.elreda-card-action {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
		background: rgba(255, 255, 255, .68);
	}

	.elreda-card-action--wishlist::before {
		font-size: 24px;
	}

	.elreda-card-action--wishlist.is-active::before {
		font-size: 21px;
	}

	.elreda-card-action--compare::before,
	.elreda-card-action--compare::after {
		width: 14px;
		height: 10px;
	}

	.elreda-card-action--cart::before {
		width: 15px;
		height: 10px;
	}

	.elreda-card-action--cart::after {
		top: calc(50% + 6px);
	}
}


/* ==========================================================
   ELREDA RESPONSIVE COMPARISON BAR
   Previous fixes retained:
   - one "قارن الآن" only
   - WPC engine remains intact
   - no MutationObserver
   ========================================================== */

#woosc-area .woosc-bar-search,
#woosc-area .woosc-bar-remove,
#woosc-area .woosc-bar-add,
#woosc-area .woosc-bar-share,
#woosc-area .woosc-bar-print {
	display: none !important;
}

#woosc-area .woosc-bar {
	position: fixed !important;

	left: 14px !important;
	right: 14px !important;
	bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;

	display: flex !important;
	align-items: center !important;
	gap: 10px !important;

	width: auto !important;
	max-width: none !important;
	min-height: 70px !important;
	height: auto !important;

	margin: 0 !important;
	padding: 9px 11px !important;

	border: 1px solid #E2E7ED !important;
	border-radius: 16px !important;

	background: #FFFFFF !important;
	color: #182230 !important;

	box-shadow: 0 10px 30px rgba(6, 26, 54, .16) !important;

	direction: rtl !important;
	box-sizing: border-box !important;
	z-index: 980 !important;
}

#woosc-area .woosc-bar[data-count="0"] {
	display: none !important;
}

#woosc-area .woosc-bar-items {
	order: 1 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 6px !important;

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

	overflow: hidden !important;
}

#woosc-area .woosc-bar-items > * {
	flex: 0 0 44px !important;

	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;

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

	border: 1px solid #E2E7ED !important;
	border-radius: 10px !important;
	background: #F8FAFC !important;

	overflow: hidden !important;
	box-sizing: border-box !important;
}

#woosc-area .woosc-bar-items > *:nth-child(n+4) {
	display: none !important;
}

#woosc-area .woosc-bar-items img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 2px !important;

	background: #FFFFFF !important;
	object-fit: contain !important;
	box-sizing: border-box !important;
}

#woosc-area .woosc-bar-item-remove,
#woosc-area .woosc-bar-items [class*="remove"] {
	display: none !important;
}

#woosc-area .elreda-compare-count {
	order: 2 !important;
	flex: 0 0 auto !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-height: 38px !important;
	padding: 0 10px !important;

	border-radius: 999px !important;
	background: #F5F7FA !important;
	color: #061A36 !important;

	font: 700 12px/1 "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif !important;
	white-space: nowrap !important;
}

#woosc-area .woosc-bar-btn {
	order: 3 !important;
	flex: 0 0 auto !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-width: 98px !important;
	height: 44px !important;
	min-height: 44px !important;

	margin: 0 !important;
	padding: 0 15px !important;

	border: 0 !important;
	border-radius: 10px !important;

	background: #ED0029 !important;
	color: #FFFFFF !important;
	box-shadow: none !important;

	font: 700 14px/1 "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif !important;
	text-align: center !important;
	white-space: nowrap !important;

	cursor: pointer !important;
}

/* Only our single clean label remains visible. */
#woosc-area .woosc-bar-btn > :not(.elreda-compare-button-text) {
	display: none !important;
}

#woosc-area .elreda-compare-button-text {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	color: #FFFFFF !important;
	font: inherit !important;
}

#woosc-area .woosc-bar-btn:hover,
#woosc-area .woosc-bar-btn:focus {
	background: #C90023 !important;
	color: #FFFFFF !important;
}

#woosc-area .woosc-bar.woosc-bar-bubble {
	border-radius: 16px !important;
	transform: none !important;
}

@media (max-width: 380px) {
	#woosc-area .woosc-bar {
		left: 8px !important;
		right: 8px !important;
		gap: 7px !important;
		padding: 8px !important;
	}

	#woosc-area .woosc-bar-items > * {
		flex-basis: 38px !important;
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
	}

	#woosc-area .woosc-bar-items > *:nth-child(n+3) {
		display: none !important;
	}

	#woosc-area .elreda-compare-count {
		padding: 0 7px !important;
		font-size: 11px !important;
	}

	#woosc-area .woosc-bar-btn {
		min-width: 84px !important;
		padding: 0 10px !important;
		font-size: 13px !important;
	}
}

@media (min-width: 768px) {
	#woosc-area .woosc-bar {
		left: 50% !important;
		right: auto !important;
		bottom: 22px !important;

		width: min(760px, calc(100vw - 48px)) !important;
		min-height: 78px !important;

		padding: 12px 16px !important;
		gap: 14px !important;

		border-radius: 18px !important;

		transform: translateX(-50%) !important;
		z-index: 9999 !important;
	}

	#woosc-area .woosc-bar-items {
		gap: 8px !important;
	}

	#woosc-area .woosc-bar-items > * {
		flex-basis: 52px !important;
		width: 52px !important;
		height: 52px !important;
		min-width: 52px !important;
		max-width: 52px !important;
	}

	#woosc-area .woosc-bar-items > *:nth-child(4) {
		display: block !important;
	}

	#woosc-area .elreda-compare-count {
		min-height: 42px !important;
		padding: 0 14px !important;
		font-size: 13px !important;
	}

	#woosc-area .woosc-bar-btn {
		min-width: 124px !important;
		height: 48px !important;
		min-height: 48px !important;
		padding: 0 22px !important;
		font-size: 15px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elreda-card-action {
		transition: none;
	}
}