/**
 * Colour-card controls shared by the PILOT configurator ("Color del tejido") and
 * Muestras gratis ("Elige un color"): the round zoom (magnifier) button over the
 * photo and the "Muestra gratis" heart button under the card. One definition, so
 * both places look and behave alike. (Moved here from staggs-bridge.css — same
 * rules, nothing changed for the configurator.)
 */

/* ------------------------------------------------------------------ *
 * Zoom control — overlaid on each color's photo. Click/tap enlarges the
 * real fabric photo in the shared lightbox; it never selects the color
 * (staggs-muestras-bridge.js stops the click from reaching the <label>).
 * ------------------------------------------------------------------ */

.ed-color-zoom {
	position: absolute;
	top: var(--ed-space-2xs);
	right: var(--ed-space-2xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--ed-color-text);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	cursor: pointer;
	transition: background-color var(--ed-transition-fast), color var(--ed-transition-fast);
}

.ed-color-zoom:hover {
	background-color: #ffffff;
	color: var(--ed-color-primary);
}

.ed-color-zoom:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-color-zoom svg {
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------ *
 * "Muestra gratis" heart button — own row under the color name, so it
 * never overlaps or runs into the next card's label/button (each color
 * is its own independent grid item with normal card spacing).
 * ------------------------------------------------------------------ */

.ed-color-sample-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-3xs);
	margin-top: var(--ed-space-2xs);
	padding: var(--ed-space-3xs) var(--ed-space-2xs);
	background: none;
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	color: var(--ed-color-muted);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	cursor: pointer;
	transition: color var(--ed-transition-fast), border-color var(--ed-transition-fast);
}

/*
 * Real mouse hover only — `@media (hover: hover) and (pointer: fine)`
 * excludes touch. Without this guard, Android Chrome has no mouse to
 * "leave" the element on touch-release, so it kept matching `:hover`
 * (confirmed live: `element.matches(':hover')` stayed true, and a
 * forced-hover screenshot reproduced the exact bug — turquoise
 * border/text with an empty, un-selected heart) until a DIFFERENT
 * "Muestra gratis" button was next touched, which is exactly the
 * "turquoise outline follows the last tap" symptom reported from a real
 * device. Desktop mouse hover keeps working unchanged; `.is-active`
 * (the REAL selected-sample state, driven by EDSamplesStore) is a
 * separate rule below and was never affected by this bug.
 */
@media (hover: hover) and (pointer: fine) {
	.ed-color-sample-btn:hover:not(:disabled) {
		color: var(--ed-color-primary);
		border-color: var(--ed-color-primary);
	}
}

.ed-color-sample-btn:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-color-sample-btn__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.ed-color-sample-btn.is-active {
	color: var(--ed-color-primary);
	border-color: var(--ed-color-primary);
}

.ed-color-sample-btn.is-active .ed-color-sample-btn__icon {
	fill: var(--ed-color-primary);
}

.ed-color-sample-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}