/**
 * File Name: frontend-menu-icons.css
 * File Location: /assets/css/frontend-menu-icons.css
 *
 * Purpose:
 * Professional styling for DAF Marketplace header menu module hooks.
 * Controls native menu icon hooks for notify, compare, wishlist, cart, and account.
 * Keeps all header badges aligned and consistent across desktop, tablet, mobile, and all devices.
 *
 * Linked Files:
 * - /includes/frontend/class-frontend-menu-icons.php
 * - /includes/frontend/class-frontend-cart-widget.php
 * - /includes/frontend/class-frontend-compare-widget.php
 * - /includes/frontend/class-frontend-wishlist-widget.php
 * - /includes/frontend/class-frontend-notify-widget.php
 * - /includes/frontend/class-frontend-account-widget.php
 * - /assets/icons/compare.svg
 * - /assets/icons/cart.svg
 * - /assets/icons/account.svg
 * - /assets/icons/notify.svg
 */

:root {
	--daf-menu-badge-green: #8cc63f;
	--daf-menu-badge-green-shadow: rgba(140, 198, 63, 0.28);
	--daf-menu-icon-text: #0f172a;
}

/* Hide original menu text but keep it accessible */
.daf-menu-label-hidden {
	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;
}

/* Header module hook wrapper */
.daf-menu-hook-wrapper {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: middle !important;
	min-width: 34px !important;
	min-height: 34px !important;
	padding: 5px !important;
	margin-left: 10px !important;
	color: var(--daf-menu-icon-text) !important;
	cursor: pointer !important;
	overflow: visible !important;
	transition: transform 0.22s ease, color 0.22s ease !important;
}

#menu-item-notify .daf-menu-hook-wrapper,
li:first-child .daf-menu-hook-wrapper {
	margin-left: 0 !important;
}

.daf-menu-hook-wrapper:hover {
	transform: translateY(-1px) !important;
}

/* Global icon size */
.daf-menu-svg {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
	object-fit: contain !important;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)) !important;
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.daf-menu-hook-wrapper:hover .daf-menu-svg {
	transform: scale(1.14) !important;
}

/* Cart icon size */
#daf-hook-cart .daf-menu-svg {
	width: 27px !important;
	height: 27px !important;
	filter: brightness(0) saturate(100%) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)) !important;
}

/* Compare icon layer */
#daf-hook-compare {
	z-index: 20 !important;
	overflow: visible !important;
}

#daf-hook-compare .daf-menu-svg {
	width: 22px !important;
	height: 22px !important;
}

/* Account avatar */
.daf-mini-avatar-icon {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

/*
 * Unified header badge system.
 * Applies to notify, compare, wishlist, cart, and any shared .daf-badge badge.
 */
.daf-menu-hook-wrapper .daf-badge,
.daf-menu-hook-wrapper .daf-wl-count-badge,
.daf-menu-hook-wrapper .daf-notify-badge,
.daf-menu-hook-wrapper .daf-compare-count-badge,
.daf-menu-hook-wrapper .daf-cart-badge,
.daf-menu-hook-wrapper .daf-cart-count-badge,
.daf-wishlist-trigger-wrapper .daf-wl-count-badge,
.daf-notify-master-anchor .daf-notify-badge,
#daf-hook-compare .daf-compare-count-badge,
#daf-hook-cart .daf-cart-badge,
#daf-hook-cart .daf-cart-count-badge {
	position: absolute !important;
	top: -4px !important;
	right: -6px !important;
	min-width: 18px !important;
	height: 18px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 5px !important;
	border: 2px solid #ffffff !important;
	border-radius: 999px !important;
	background: var(--daf-menu-badge-green) !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 14px !important;
	letter-spacing: -0.02em !important;
	box-shadow: 0 4px 10px var(--daf-menu-badge-green-shadow) !important;
	z-index: 50 !important;
}

/* Keep single digit badges perfectly circular */
.daf-menu-hook-wrapper .daf-badge,
.daf-menu-hook-wrapper .daf-wl-count-badge,
.daf-menu-hook-wrapper .daf-notify-badge,
.daf-menu-hook-wrapper .daf-compare-count-badge,
.daf-menu-hook-wrapper .daf-cart-badge,
.daf-menu-hook-wrapper .daf-cart-count-badge {
	box-sizing: border-box !important;
}

/* Mobile header hook wrappers use tighter icon boxes */
.daf-mp-mobile-actions .daf-menu-hook-wrapper {
	margin-left: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
}

.daf-mp-mobile-actions .daf-menu-svg {
	width: 18px !important;
	height: 18px !important;
}

.daf-mp-mobile-actions #daf-hook-cart .daf-menu-svg,
.daf-mp-mobile-actions .daf-cart-trigger .daf-menu-svg {
	width: 20px !important;
	height: 20px !important;
}

.daf-mp-mobile-actions .daf-mini-avatar-icon {
	width: 24px !important;
	height: 24px !important;
}

/* Mobile badge placement */
.daf-mp-mobile-actions .daf-menu-hook-wrapper .daf-badge,
.daf-mp-mobile-actions .daf-menu-hook-wrapper .daf-wl-count-badge,
.daf-mp-mobile-actions .daf-menu-hook-wrapper .daf-notify-badge,
.daf-mp-mobile-actions .daf-menu-hook-wrapper .daf-compare-count-badge,
.daf-mp-mobile-actions .daf-menu-hook-wrapper .daf-cart-badge,
.daf-mp-mobile-actions .daf-menu-hook-wrapper .daf-cart-count-badge,
.daf-mp-mobile-actions .daf-wishlist-trigger-wrapper .daf-wl-count-badge,
.daf-mp-mobile-actions .daf-notify-master-anchor .daf-notify-badge {
	top: -6px !important;
	right: -6px !important;
	min-width: 17px !important;
	height: 17px !important;
	padding: 0 4px !important;
	font-size: 9px !important;
	line-height: 13px !important;
}