/**
 * WehfiGO Bugfix — gallery and flyer download affordance (bug #2).
 *
 * Tokens only (wehfigo-tokens.css / wehfigo-theme.css). Works over images
 * in both light and dark mode (glass pill) and on the page surface (flyer
 * pill uses brand red, AA with white text in both modes).
 */

/* ---- Shared download pill ---- */
.wehfigo-dl-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	font-family: var(--font-family-brand);
	font-size: var(--text-label);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.wehfigo-dl-btn:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	box-shadow: var(--shadow-focus);
}

.wehfigo-dl-btn .wehfigo-icon {
	display: inline-flex;
	width: var(--icon-sm);
	height: var(--icon-sm);
}

.wehfigo-dl-btn .wehfigo-icon svg {
	width: 100%;
	height: 100%;
}

/* ---- Flyer pill (sits on the page surface, light and dark) ---- */
/* v2.14.0: flyer is full-bleed; download pill removed — keep height auto. */
.listing-logo.wehfigo-has-download {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
}

.wehfigo-dl-btn--flyer .wehfigo-dl-btn__label {
	white-space: nowrap;
}

.wehfigo-dl-btn--flyer {
	background: var(--color-primary);
	color: var(--color-brand-white);
	box-shadow: var(--shadow-sm);
}

.wehfigo-dl-btn--flyer:hover {
	background: var(--color-primary-hover);
	color: var(--color-brand-white);
}

.wehfigo-flyer-link {
	display: inline-block;
	cursor: zoom-in;
	border-radius: var(--radius-md);
}

.wehfigo-flyer-link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* ---- Glass pill over images (top slider + lightbox) ---- */
.wehfigo-dl-btn--slider,
.wehfigo-dl-btn--lightbox {
	background: var(--color-overlay);
	color: var(--color-brand-white);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--color-lightbox-chrome);
}

.wehfigo-dl-btn--slider:hover,
.wehfigo-dl-btn--lightbox:hover {
	background: var(--color-surface-sunken);
	color: var(--color-brand-white);
	border-color: var(--color-lightbox-chrome-hover);
}

.wehfigo-dl-btn--slider {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: var(--z-sticky);
}

/* Magnific Popup chrome is ~z-index 1040 to 1046; keep the button above
   the image but inside the popup layer. Bottom center: most visible on
   mobile screens, clear of the close button (top right) and arrows (mid). */
.wehfigo-dl-btn--lightbox {
	position: fixed;
	bottom: var(--space-6);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	/* Slightly more opaque on mobile so it's always readable */
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Touch targets: WCAG 2.5.8 minimum 24px, aim for 44px on coarse pointers. */
@media (pointer: coarse) {
	.wehfigo-dl-btn {
		min-height: 44px;
		padding: var(--space-3) var(--space-5);
		font-size: 1rem;
	}

	/* On mobile the download button should be extra prominent */
	.wehfigo-dl-btn--lightbox {
		bottom: max(var(--space-8), env(safe-area-inset-bottom, 24px));
		padding: var(--space-4) var(--space-6);
		font-size: 1rem;
		gap: var(--space-3);
		border-radius: var(--radius-pill);
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
	}
}

/* Also pin the slider button so it's always visible over the image */
.wehfigo-dl-btn--slider {
	opacity: 1 !important;
}