/**
 * CSS del badge Lo Specchio.
 * Tutte le classi sono prefissate "specchio-badge-" per non collidere con
 * temi/plugin. Nessuna regola globale (nessun reset, nessun !important
 * eccetto dove indispensabile per l'isolamento visivo del badge stesso).
 *
 * @since 1.0.0
 */

.specchio-badge-wrap {
	all: initial;
	box-sizing: border-box;
	line-height: 0;
}

.specchio-badge-wrap * {
	box-sizing: border-box;
}

/* --- Modalità floating: fixed rispetto alla viewport --- */
.specchio-badge-floating {
	position: fixed;
	z-index: var(--specchio-zindex, 999999);
	opacity: var(--specchio-opacity, 1);
	transition: transform .2s ease, opacity .2s ease;
}

/* Posizionamento desktop: applicato tramite l'attributo data-pos, impostato
   direttamente nel template PHP in base all'impostazione "Posizione desktop". */
.specchio-badge-floating[data-pos="top-left"] {
	top: var(--specchio-margin-v);
	left: var(--specchio-margin-h);
	right: auto;
	bottom: auto;
}
.specchio-badge-floating[data-pos="top-right"] {
	top: var(--specchio-margin-v);
	right: var(--specchio-margin-h);
	left: auto;
	bottom: auto;
}
.specchio-badge-floating[data-pos="bottom-left"] {
	bottom: var(--specchio-margin-v);
	left: var(--specchio-margin-h);
	top: auto;
	right: auto;
}
.specchio-badge-floating[data-pos="bottom-right"] {
	bottom: var(--specchio-margin-v);
	right: var(--specchio-margin-h);
	top: auto;
	left: auto;
}
/* "Nascondi" per desktop: si applica solo sopra ai 782px, cosi' non
   interferisce con l'impostazione mobile indipendente qui sotto. */
@media (min-width: 783px) {
	.specchio-badge-floating[data-pos="hidden"] {
		display: none;
	}
}

.specchio-badge-link {
	display: block;
	width: var(--specchio-size, 64px);
	height: auto;
	box-shadow: var(--specchio-shadow, none);
	text-decoration: none;
}

.specchio-badge-img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.specchio-badge-hover .specchio-badge-link:hover {
	transform: scale(1.08);
}

.specchio-badge-delayed {
	opacity: 0;
	pointer-events: none;
}
.specchio-badge-delayed.specchio-badge-visible {
	opacity: var(--specchio-opacity, 1);
	pointer-events: auto;
}

/* --- Modalità footer / shortcode: badge inline, nessun posizionamento fixed --- */
.specchio-badge-ctx-footer,
.specchio-badge-ctx-shortcode {
	display: inline-block;
	margin: 8px 0;
}
.specchio-badge-ctx-footer .specchio-badge-link,
.specchio-badge-ctx-shortcode .specchio-badge-link {
	width: 120px;
	height: auto;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* --- Responsive: sotto i 782px (breakpoint mobile standard WP) usa la
   posizione mobile invece di quella desktop. --- */
@media (max-width: 782px) {
	.specchio-badge-floating[data-pos-mobile="top-left"] {
		top: var(--specchio-margin-v);
		left: var(--specchio-margin-h);
		right: auto;
		bottom: auto;
	}
	.specchio-badge-floating[data-pos-mobile="top-right"] {
		top: var(--specchio-margin-v);
		right: var(--specchio-margin-h);
		left: auto;
		bottom: auto;
	}
	.specchio-badge-floating[data-pos-mobile="bottom-left"] {
		bottom: var(--specchio-margin-v);
		left: var(--specchio-margin-h);
		top: auto;
		right: auto;
	}
	.specchio-badge-floating[data-pos-mobile="bottom-right"] {
		bottom: var(--specchio-margin-v);
		right: var(--specchio-margin-h);
		top: auto;
		left: auto;
	}
	/* "Nascondi" per mobile: indipendente dalla scelta desktop. */
	.specchio-badge-floating[data-pos-mobile="hidden"] {
		display: none;
	}
}