/* Image Link Copier - Styles */
/* Prevent FOUC and ensure styles don't affect other elements */
.ilc-image-wrapper {
	position: relative;
	display: inline-block;
	/* Prevent layout shifts */
	contain: layout style;
}

/* Hide button on images with no-link class (fallback if JS doesn't catch it) */
.ilc-image-wrapper img.no-link ~ .ilc-button,
.ilc-image-wrapper:has(img.no-link) .ilc-button,
.no-link .ilc-image-wrapper .ilc-button,
.ilc-image-wrapper:has(.no-link) .ilc-button {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.ilc-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 6px;
	padding: 10px;
	cursor: pointer;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.3s ease, background 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
}

.ilc-image-wrapper:hover .ilc-button,
.ilc-button.ilc-button-active {
	opacity: 1;
}

/* Always show button on touch devices */
@media (hover: none) and (pointer: coarse) {
	.ilc-button {
		opacity: 0.8;
	}
	
	.ilc-button:active {
		opacity: 1;
		background: rgba(0, 0, 0, 0.9);
	}
}

.ilc-button:hover {
	background: rgba(0, 0, 0, 0.9);
}

/* Only target SVG elements directly inside .ilc-button, not nested ones */
.ilc-button > svg {
	width: 20px !important;
	height: 20px !important;
	fill: #fff !important;
	display: block !important;
	max-width: 20px !important;
	max-height: 20px !important;
	flex-shrink: 0;
}

.ilc-menu {
	position: absolute;
	top: calc(100% + 5px);
	right: 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1001;
	overflow: hidden;
}

.ilc-button:hover .ilc-menu,
.ilc-menu:hover,
.ilc-menu.ilc-menu-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ilc-menu-item {
	padding: 14px 18px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: background 0.2s ease;
	user-select: none;
}

.ilc-menu-item:last-child {
	border-bottom: none;
}

.ilc-menu-item:hover {
	background: #f8f8f8;
}

.ilc-menu-item:active {
	background: #f0f0f0;
}

/* Only target SVG elements directly inside .ilc-menu-item */
.ilc-menu-item > svg {
	width: 20px !important;
	height: 20px !important;
	fill: #555 !important;
	flex-shrink: 0;
	max-width: 20px !important;
	max-height: 20px !important;
	transition: fill 0.2s ease;
}

.ilc-menu-item:hover > svg {
	fill: #333 !important;
}

.ilc-menu-item span {
	font-size: 14px;
	color: #333;
	font-weight: 500;
	line-height: 1.4;
}

.ilc-notification {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #4D574F;
	color: #fff;
	padding: 14px 24px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	z-index: 10000;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 14px;
	font-weight: 500;
	pointer-events: none;
}

.ilc-notification.show {
	opacity: 1;
	transform: translateY(0);
}

/* Mobile/Touch device improvements */
@media (max-width: 768px) {
	.ilc-button {
		padding: 10px;
		opacity: 0.85; /* More visible on mobile */
		touch-action: manipulation; /* Prevent double-tap zoom */
	}
	
	.ilc-image-wrapper:hover .ilc-button {
		opacity: 0.85;
	}
	
	.ilc-button > svg {
		width: 20px !important;
		height: 20px !important;
		max-width: 20px !important;
		max-height: 20px !important;
	}
	
	.ilc-menu {
		min-width: 200px;
		right: 0;
		left: auto;
	}
	
	.ilc-menu-item {
		padding: 16px 18px;
		font-size: 15px;
		touch-action: manipulation;
	}
	
	.ilc-menu-item:active {
		background: #e8e8e8;
	}
}

/* Touch device specific */
@media (hover: none) and (pointer: coarse) {
	.ilc-button {
		opacity: 0.85;
		min-width: 44px; /* Minimum touch target size */
		min-height: 44px;
	}
	
	.ilc-menu-item {
		min-height: 44px; /* Minimum touch target size */
	}
}