/**
 * Wishlist & Registry Counter — dropdown + drawer styles.
 */

/* ---------------------------------------------------------------
 * Scoped reset — isolate counter from theme styles
 * ------------------------------------------------------------- */

.lfwlr-counter-dropdown,
.lfwlr-counter-dropdown *,
.lfwlr-counter-dropdown *::before,
.lfwlr-counter-dropdown *::after {
	box-sizing: border-box !important;
	text-decoration: none !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-indent: 0 !important;
	word-spacing: normal !important;
	margin: 0 !important;
	float: none !important;
}

/* ---------------------------------------------------------------
 * Counter widget — toggle button
 * ------------------------------------------------------------- */

.lfwlr-counter-widget {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	font-family: inherit !important;
	box-sizing: border-box !important;
}

.lfwlr-counter-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	padding: 6px !important;
	position: relative !important;
	color: inherit !important;
	font-size: inherit !important;
	line-height: 1 !important;
	transition: color 0.2s ease !important;
	outline: none !important;
	box-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

.lfwlr-counter-toggle:hover {
	color: var(--lfwlr-primary, #e8475f) !important;
}

.lfwlr-counter-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
}

.lfwlr-counter-icon svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
}

/* ---------------------------------------------------------------
 * Badge
 * ------------------------------------------------------------- */

.lfwlr-counter-badge {
	display: none !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	min-width: 16px !important;
	height: 16px !important;
	padding: 0 4px !important;
	border-radius: 8px !important;
	background: var(--lfwlr-primary, #e8475f) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	text-align: center !important;
	pointer-events: none !important;
	transform: translate(40%, -30%) !important;
	border: none !important;
	box-shadow: none !important;
}

.lfwlr-counter-badge--visible {
	display: inline-block !important;
}

/* ---------------------------------------------------------------
 * Label (optional)
 * ------------------------------------------------------------- */

.lfwlr-counter-label {
	font-size: 13px !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	color: inherit !important;
}

/* ---------------------------------------------------------------
 * Dropdown (desktop)
 * ------------------------------------------------------------- */

.lfwlr-counter-dropdown {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 99999 !important;
	width: 300px !important;
	max-height: 400px !important;
	overflow: hidden !important;
	background: #fff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: var(--lfwlr-radius, 12px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
	padding: 0 !important;
	margin-top: 8px !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #333 !important;
}

.lfwlr-counter--dropdown-open .lfwlr-counter-dropdown {
	display: flex !important;
	flex-direction: column !important;
}

/* Dropdown needs flex layout for fixed footer */
.lfwlr-counter--dropdown-open .lfwlr-counter-dropdown,
.lfwlr-counter-dropdown--fixed {
	display: flex !important;
	flex-direction: column !important;
}

/* Make items scrollable, footer stays fixed */
.lfwlr-counter--dropdown-open .lfwlr-counter-items,
.lfwlr-counter-dropdown--fixed .lfwlr-counter-items {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	min-height: 0 !important;
}

/* Footer container stays at bottom */
.lfwlr-counter--dropdown-open .lfwlr-counter-footer,
.lfwlr-counter-dropdown--fixed .lfwlr-counter-footer,
.lfwlr-counter--dropdown-open .lfwlr-counter-more,
.lfwlr-counter-dropdown--fixed .lfwlr-counter-more,
.lfwlr-counter--dropdown-open .lfwlr-counter-cta,
.lfwlr-counter-dropdown--fixed .lfwlr-counter-cta {
	flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------
 * Drawer (mobile)
 * ------------------------------------------------------------- */

.lfwlr-counter--drawer-open .lfwlr-counter-dropdown {
	display: flex !important;
	flex-direction: column !important;
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: auto !important;
	width: 85vw !important;
	max-width: 360px !important;
	max-height: 100vh !important;
	height: 100vh !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	z-index: 999999 !important;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2) !important;
	animation: lfwlr-slide-in 0.25s ease-out !important;
}

@keyframes lfwlr-slide-in {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

/* Drawer backdrop */
body.lfwlr-counter-drawer-active::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999998;
}

/* ---------------------------------------------------------------
 * Items list
 * ------------------------------------------------------------- */

.lfwlr-counter-items {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 8px 0 !important;
	background: transparent !important;
	border: none !important;
}

.lfwlr-counter-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

.lfwlr-counter-item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: none !important;
	background: transparent !important;
	width: 100% !important;
	float: none !important;
	display: block !important;
}

.lfwlr-counter-item::before,
.lfwlr-counter-item::after {
	content: none !important;
	display: none !important;
}

.lfwlr-counter-item-link {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 14px !important;
	text-decoration: none !important;
	color: #333 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	transition: background 0.15s ease !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	width: 100% !important;
	float: none !important;
	min-height: 0 !important;
}

.lfwlr-counter-item-link:hover {
	background: var(--lfwlr-primary-light, rgba(232, 71, 95, 0.08)) !important;
	color: #333 !important;
	text-decoration: none !important;
}

.lfwlr-counter-item-link:visited,
.lfwlr-counter-item-link:focus {
	color: #333 !important;
	text-decoration: none !important;
}

.lfwlr-counter-item-img {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
	border-radius: var(--lfwlr-radius-xs, 6px) !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
	background: #f5f5f5 !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: block !important;
}

.lfwlr-counter-item-name {
	flex: 1 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	color: #333 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------- */

.lfwlr-counter-empty {
	padding: 24px 14px !important;
	text-align: center !important;
	color: #999 !important;
	font-size: 13px !important;
	background: transparent !important;
}

/* ---------------------------------------------------------------
 * "More" indicator
 * ------------------------------------------------------------- */

.lfwlr-counter-more {
	padding: 6px 14px !important;
	text-align: center !important;
	color: #888 !important;
	font-size: 12px !important;
	border-top: 1px solid #f0f0f0 !important;
	background: transparent !important;
}

/* ---------------------------------------------------------------
 * CTA button at bottom
 * ------------------------------------------------------------- */

.lfwlr-counter-cta {
	display: block !important;
	padding: 12px 14px !important;
	text-align: center !important;
	background: var(--lfwlr-primary, #e8475f) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-top: 1px solid #e0e0e0 !important;
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
	border-radius: 0 0 var(--lfwlr-radius, 12px) var(--lfwlr-radius, 12px) !important;
	transition: background 0.2s ease !important;
	box-shadow: none !important;
	line-height: 1.4 !important;
}

.lfwlr-counter-cta:hover,
.lfwlr-counter-cta:visited,
.lfwlr-counter-cta:focus {
	background: var(--lfwlr-primary-hover, #d63a51) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* Drawer: CTA keeps its bottom-radius off */
.lfwlr-counter--drawer-open .lfwlr-counter-cta {
	border-radius: 0 !important;
	flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------
 * Loading spinner
 * ------------------------------------------------------------- */

.lfwlr-counter-loading {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 32px 14px !important;
	background: transparent !important;
}

.lfwlr-counter-loading::after {
	content: '';
	width: 24px;
	height: 24px;
	border: 2px solid #e0e0e0;
	border-top-color: var(--lfwlr-primary, #e8475f);
	border-radius: 50%;
	animation: lfwlr-spin 0.6s linear infinite;
}

@keyframes lfwlr-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------------------------------------------------------------
 * Widget notice (editor only)
 * ------------------------------------------------------------- */

/* ---------------------------------------------------------------
 * Navigation menu counter item
 * ------------------------------------------------------------- */

.lfwlr-nav-counter-item {
	display: inline-flex !important;
	align-items: center !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.lfwlr-nav-counter-item .lfwlr-counter-widget {
	display: inline-flex !important;
	align-items: center !important;
}

.lfwlr-nav-counter-item .lfwlr-counter-toggle {
	padding: 8px 6px !important;
}

/* Portaled dropdown (moved to <body> when counter is inside nav).
 * Fully self-contained since it lives outside the widget DOM.     */
.lfwlr-counter-dropdown--fixed {
	position: fixed !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	background: #fff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: var(--lfwlr-radius, 12px) !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
	padding: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #333 !important;
}

.lfwlr-widget-notice {
	padding: 12px 16px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 6px;
	color: #856404;
	font-size: 13px;
	margin: 8px 0;
}