/**
 * Gecko Reviews Pro — estilos del slider.
 *
 * Sin dependencias. Todo lo personalizable está expuesto como CSS custom
 * property con fallback. El plugin inyecta un bloque de overrides dentro de
 * `.gecko-reviews-pro` cuando el cliente configura estilos en el admin; sin
 * overrides, el fallback de cada var reproduce el look original.
 *
 * Layout: 3 tarjetas por fila en desktop (configurable), 2 en tablet,
 * 1 en móvil (scroll-snap).
 */

.gecko-reviews-pro {
	/* ---- Colores ---- */
	--gr-accent:         #e7b53c;
	--gr-text-primary:   #484848;
	--gr-text-secondary: #9a9a9a;
	--gr-text-body:      #5c5c5c;
	--gr-text-meta:      #666666;

	/* ---- Cards ---- */
	--gr-card-bg:        transparent;
	--gr-card-border:    #ececec;
	--gr-card-radius:    4px;
	--gr-card-padding:   30px;
	--gr-card-shadow:    none;

	/* ---- Controles del slider ---- */
	--gr-nav-bg:         #ffffff;
	--gr-nav-color:      #484848;

	/* ---- Layout ---- */
	--gr-cards-per-row:  3;
	--gr-card-gap:       22px;

	/* ---- Tipografía ---- */
	--gr-font-family:    inherit;
	--gr-text-size:      14.5px;

	/* Sin max-width y con padding lateral mínimo: el bloque se estira al 100%
	 * del contenedor donde se inserta el shortcode. Antes había max-width:1140px
	 * + padding:0 24px + margin:auto, pero al pintarse dentro de columnas
	 * estrechas (image-left, sidebars, ACF flex...) robaba ~48px y encogía
	 * las tarjetas. El padding actual (10px) solo da aire para que las cards
	 * no toquen el borde del contenedor cuando ese contenedor tiene fondo
	 * distinto al de la card. */
	margin: 2rem 0;
	padding: 0 20px;
	font-family: var(--gr-font-family);
}

.gecko-reviews-pro .gr-title {
	text-align: center;
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------
 *  Cabecera: nombre del negocio + resumen (estrellas + total)
 * ------------------------------------------------------------- */

.gr-name {
	text-align: center;
	font-size: 20px;
	line-height: 1.3em;
	margin-bottom: 15px;
	color: var(--gr-text-primary);
	font-weight: 500;
}
.gr-name a           { color: inherit; text-decoration: none; }
.gr-name a:hover     { text-decoration: underline; }

.gr-summary {
	display: flex;
	justify-content: center;
	margin-bottom: 1.75rem;
}

.reviews-rating {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--gr-text-meta);
	flex-wrap: wrap;
	justify-content: center;
}

.google-icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	display: inline-flex;
}
.google-icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

.reviews-stars {
	color: var(--gr-accent);
	letter-spacing: 1px;
	font-size: 1rem;
	line-height: 1;
}

.reviews-score {
	font-weight: 600;
	color: var(--gr-text-primary);
}

.reviews-meta a       { color: inherit; text-decoration: none; }
.reviews-meta a:hover { text-decoration: underline; }

/* -------------------------------------------------------------
 *  Carrusel + navegación
 * ------------------------------------------------------------- */

.gr-carousel {
	position: relative;
}

.gr-viewport {
	overflow: hidden;
}

.gr-track {
	list-style: none;
	margin: 0;
	padding: 6px 2px;
	display: flex;
	gap: var(--gr-card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.gr-track::-webkit-scrollbar { display: none; height: 0; }

/* Flechas flotantes: absolutas sobre el viewport para no robar ancho a las
 * cards (antes el flex layout se comía ~116px del hueco). Se solapan un poco
 * con los bordes de las cards y sobresalen ligeramente al exterior. */
.gr-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--gr-nav-bg);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--gr-nav-color);
	box-shadow: 0 3px 14px rgba(0, 0, 0, .14);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s, box-shadow .2s, transform .2s;
	z-index: 2;
}
/* Centro del botón alineado con el borde vertical de la card exterior.
 * Con nav width 40px, `left: -20px` centra el círculo justo en el borde. */
.gr-prev { left: -20px; }
.gr-next { right: -20px; }
.gr-nav:hover {
	box-shadow: 0 5px 18px rgba(0, 0, 0, .20);
	transform: translateY(-50%) scale(1.05);
}
.gr-nav[disabled] {
	opacity: 1;
	cursor: default;
	color: rgba(0, 0, 0, .35);
	box-shadow: 0 3px 14px rgba(0, 0, 0, .10);
	transform: translateY(-50%);
}

/* -------------------------------------------------------------
 *  Tarjeta individual
 * ------------------------------------------------------------- */

.gr-card {
	scroll-snap-align: start;
	/* La fórmula divide el ancho restante (tras restar los `gap` entre cards)
	 * por el número de tarjetas por fila configurado. */
	flex: 0 0 calc(
		(100% - (var(--gr-cards-per-row) - 1) * var(--gr-card-gap))
		/ var(--gr-cards-per-row)
	);
	box-sizing: border-box;
	background: var(--gr-card-bg);
	border: 1px solid var(--gr-card-border);
	border-radius: var(--gr-card-radius);
	padding: var(--gr-card-padding);
	box-shadow: var(--gr-card-shadow);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gr-card-head {
	display: flex;
	align-items: center;
	gap: 13px;
}

/* Alineación centrada: cabecera en columna, estrellas y texto centrados. */
.gecko-reviews-pro[data-align="center"] .gr-card {
	text-align: center;
	align-items: center;
}
.gecko-reviews-pro[data-align="center"] .gr-card-head {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.gecko-reviews-pro[data-align="center"] .gr-meta {
	align-items: center;
}

.gr-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 46px;
}

.gr-avatar--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #b7a996;
	color: #fff;
	font-weight: 400;
	font-size: 20px;
	text-transform: uppercase;
}

.gr-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gr-author {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	color: var(--gr-text-primary);
}

.gr-when {
	font-size: 13px;
	color: var(--gr-text-secondary);
	line-height: 1.2;
}

.gr-card-stars { font-size: 1rem; }
.gr-card-stars .gr-star       { color: #e3e3e0; font-size: 1.05rem; letter-spacing: 1px; }
.gr-card-stars .gr-star.is-on { color: var(--gr-accent); }

.gr-text {
	margin: 0;
	font-size: var(--gr-text-size);
	line-height: 1.62;
	color: var(--gr-text-body);

	/* Antes recortábamos a 5 líneas con "…". Ahora el texto se muestra entero
	 * dentro de una zona con scroll interno (patrón BRB): la card conserva
	 * altura estable y el usuario puede leer la reseña completa sin salir
	 * del carrusel. Combinado con `align-items: stretch` del flex del track,
	 * todas las cards de la vista comparten altura. */
	flex: 1 1 auto;
	max-height: 12em;
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, .18) transparent;
}
.gr-text::-webkit-scrollbar        { width: 6px; }
.gr-text::-webkit-scrollbar-track  { background: transparent; }
.gr-text::-webkit-scrollbar-thumb  { background: rgba(0, 0, 0, .18); border-radius: 3px; }

/* -------------------------------------------------------------
 *  Responsive
 * ------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* En tablet, forzamos 2 por fila independientemente del setting. */
	.gr-card { flex-basis: calc((100% - var(--gr-card-gap)) / 2); }
}

@media (max-width: 600px) {
	.gecko-reviews-pro { padding: 0 16px; }
	.gr-nav        { display: none; }
	.gr-track      { gap: 16px; }
	.gr-card       { flex-basis: 100%; scroll-snap-align: center; }
}