/**
 * Image Overlay Buttons
 *
 * Shared styles for buttons that appear on images (EXIF, cart, etc).
 * Single source of truth for overlay button appearance.
 *
 * Used by:
 * - exif-overlay.js (.exif-toggle)
 * - purchasable-image-triggers.js (.purchasable-cart-trigger)
 * - ltp-lightbox-integration.js (.ltp-exif-btn, .ltp-cart-btn)
 *
 * @package NightGlass
 * @since 1.0.0
 */

/* ==========================================================================
   Base Button Style (shared by all overlay buttons)

   Design principle: Subtle, perceptible but not intrusive.
   Buttons blend with the image at rest, become more visible on hover.
   ========================================================================== */

.image-overlay-btn,
.exif-toggle,
.purchasable-cart-trigger {
	position: absolute;
	width: 36px;
	height: 36px;
	background: rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 10;
	padding: 0;
	opacity: 0.6;
}

.image-overlay-btn svg,
.exif-toggle svg,
.purchasable-cart-trigger svg {
	width: 18px;
	height: 18px;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.2s ease;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.image-overlay-btn:hover,
.image-overlay-btn.is-active,
.exif-toggle:hover,
.exif-toggle.is-active,
.purchasable-cart-trigger:hover,
.purchasable-cart-trigger.is-active {
	background: rgba(0, 0, 0, 0.35);
	border-color: rgba(255, 255, 255, 0.12);
	opacity: 1;
}

.image-overlay-btn:hover svg,
.image-overlay-btn.is-active svg,
.exif-toggle:hover svg,
.exif-toggle.is-active svg,
.purchasable-cart-trigger:hover svg,
.purchasable-cart-trigger.is-active svg {
	color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   Position Variants
   ========================================================================== */

/* EXIF button - bottom left */
.exif-toggle {
	bottom: 0.75rem;
	left: 0.75rem;
}

/* Cart button - bottom right */
.purchasable-cart-trigger {
	bottom: 0.75rem;
	right: 0.75rem;
}

/* ==========================================================================
   EXIF Overlay Panel
   ========================================================================== */

.exif-overlay {
	position: absolute;
	bottom: 3.5rem;
	left: 0.75rem;
	min-width: 220px;
	max-width: 300px;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 1rem;
	z-index: 11;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.2s ease;
}

.exif-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.exif-overlay__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.exif-overlay__item {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.exif-overlay__item dt {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.5);
}

.exif-overlay__item dd {
	font-size: 0.875rem;
	color: #fff;
	margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
	.image-overlay-btn,
	.exif-toggle,
	.purchasable-cart-trigger {
		width: 32px;
		height: 32px;
		bottom: 0.5rem;
	}

	.exif-toggle {
		left: 0.5rem;
	}

	.purchasable-cart-trigger {
		right: 0.5rem;
	}

	.image-overlay-btn svg,
	.exif-toggle svg,
	.purchasable-cart-trigger svg {
		width: 16px;
		height: 16px;
	}

	.exif-overlay {
		left: 0.5rem;
		bottom: 3rem;
		min-width: 180px;
	}
}

/* ==========================================================================
   Day Glass (Light Mode)
   ========================================================================== */

[data-theme="light"] .image-overlay-btn,
[data-theme="light"] .exif-toggle,
[data-theme="light"] .purchasable-cart-trigger {
	background: rgba(255, 255, 255, 0.6);
	border-color: rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .image-overlay-btn svg,
[data-theme="light"] .exif-toggle svg,
[data-theme="light"] .purchasable-cart-trigger svg {
	color: rgba(0, 0, 0, 0.7);
	filter: none;
}

[data-theme="light"] .image-overlay-btn:hover,
[data-theme="light"] .image-overlay-btn.is-active,
[data-theme="light"] .exif-toggle:hover,
[data-theme="light"] .exif-toggle.is-active,
[data-theme="light"] .purchasable-cart-trigger:hover,
[data-theme="light"] .purchasable-cart-trigger.is-active {
	background: rgba(255, 255, 255, 0.85);
	border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .image-overlay-btn:hover svg,
[data-theme="light"] .image-overlay-btn.is-active svg,
[data-theme="light"] .exif-toggle:hover svg,
[data-theme="light"] .exif-toggle.is-active svg,
[data-theme="light"] .purchasable-cart-trigger:hover svg,
[data-theme="light"] .purchasable-cart-trigger.is-active svg {
	color: #1a1a1a;
}

[data-theme="light"] .exif-overlay {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .exif-overlay__item dt {
	color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .exif-overlay__item dd {
	color: #1a1a1a;
}