/**
 * Zenth Toolkit — Botón "Dejanos tu reseña en Google"
 *
 * Lo pinta el shortcode [zenth_review_button] (módulo BusinessInfo) y se
 * encola solo cuando ese shortcode se usa.
 *
 * Standalone: usa var(--cr-*, fallback) para funcionar sin el theme.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Botón          → .zenth-review-btn (pill + estrellas + label)
 *   §2  Responsive     → @media de tamaño + accesibilidad
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS
 *   Mobile → max-width: 480px   (el pill pasa a ancho completo)
 *
 *   Más 1 media de accesibilidad (prefers-reduced-motion) en subsección
 *   propia al final de §2.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · BOTÓN — .zenth-review-btn
   ───────────────────────────────────────────────────────────────────────
   Las estrellas van en dorado y no en rojo CR a propósito: es el color con
   el que la gente reconoce una calificación, y el botón tiene que leerse
   como "esto es para calificar", no como un CTA más de la marca.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-review-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: var(--cr-color-darker, #0f0f0f);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 100px;
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, system-ui, sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--cr-transition-base, 250ms ease),
		border-color var(--cr-transition-base, 250ms ease),
		transform var(--cr-transition-base, 250ms ease);
}

.zenth-review-btn__stars {
	color: #fbbc04; /* el amarillo de las estrellas de Google */
	font-size: 1rem;
	letter-spacing: 0.06em;
}

.zenth-review-btn:hover,
.zenth-review-btn:focus-visible {
	background: var(--cr-color-primary, #c00000);
	border-color: var(--cr-color-primary, #c00000);
	color: var(--cr-color-white, #fff);
	transform: translateY(-2px);
	outline: none;
}

.zenth-review-btn:focus-visible {
	outline: 2px solid var(--cr-color-white, #fff);
	outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────── MOBILE · max-width: 480px ─────────────────────── */
@media (max-width: 480px) {

	/* §1 · El pill ocupa el ancho disponible y centra: en pantallas chicas un
	   botón angosto con texto largo termina cortando la etiqueta. */
	.zenth-review-btn {
		width: 100%;
		justify-content: center;
		padding: 14px 18px;
		font-size: 0.75rem;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
	.zenth-review-btn {
		transition: none;
	}

	.zenth-review-btn:hover,
	.zenth-review-btn:focus-visible {
		transform: none;
	}
}