/**
 * Bloque de opiniones del producto (`inc/reviews.php`), estilo Mercado
 * Libre -pedido explicito de Adriano del 24/08, con captura de referencia-:
 * sin tarjeta ni fondo propio, numero y estrellas grandes con la cantidad
 * de calificaciones debajo, barras finas por cantidad de estrellas, lista
 * de mensajes con sus propias estrellas, "Ver mas" como link (no boton). No
 * hay formulario de carga en esta pantalla -ver PHP-, asi que no hay
 * estilos para eso aca.
 */

.ace-reviews {
	--ace-star-color: #f5a623;

	margin-block-start: var(--wp--preset--spacing--60, 2.5rem);
}

.ace-reviews__title {
	font-size: var(--wp--preset--font-size--large, 1.375rem);
	margin-block-end: 1rem;
}

.ace-reviews__empty {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
}

.ace-reviews__layout {
	display: grid;
	gap: var(--wp--preset--spacing--50, 2rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56.25rem) {
	.ace-reviews__layout {
		grid-template-columns: 16rem minmax(0, 1fr);
	}
}

/* ---------- Estrellas propias (promedio, barras y cada mensaje) ---------- */

.ace-reviews__average-stars svg,
.ace-reviews__item-stars svg {
	block-size: 1rem;
	color: var(--wp--preset--color--hairline, #e2e1de);
	inline-size: 1rem;
}

.ace-reviews__average-stars svg.is-filled,
.ace-reviews__item-stars svg.is-filled {
	color: var(--ace-star-color);
}

/* ---------- Columna de resumen: sin tarjeta, igual que la referencia ---------- */

.ace-reviews__average {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.ace-reviews__average-number {
	color: var(--wp--preset--color--contrast, #1c1c1c);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
}

.ace-reviews__average-count {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: 0.8125rem;
	margin: 0.25rem 0 1.25rem;
}

.ace-reviews__bars {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.ace-reviews__bar {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--wp--preset--border-radius--small, 0.375rem);
	cursor: pointer;
	display: grid;
	gap: 0.625rem;
	grid-template-columns: 1fr auto;
	padding: 0.25rem 0.375rem;
}

.ace-reviews__bar:disabled {
	cursor: default;
	opacity: 0.4;
}

.ace-reviews__bar:not(:disabled):hover,
.ace-reviews__bar.is-active {
	background: var(--wp--preset--color--base-alt, #f1f0ee);
}

.ace-reviews__bar-track {
	background: var(--wp--preset--color--hairline, #e2e1de);
	block-size: 0.25rem;
	border-radius: 999px;
	overflow: hidden;
}

.ace-reviews__bar-fill {
	background: var(--wp--preset--color--contrast, #1c1c1c);
	block-size: 100%;
	display: block;
}

.ace-reviews__bar-label {
	align-items: center;
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	display: flex;
	font-size: 0.8125rem;
	gap: 0.125rem;
}

.ace-reviews__bar-star {
	block-size: 0.75rem;
	color: var(--wp--preset--color--hairline, #e2e1de);
	inline-size: 0.75rem;
}

/* ---------- Columna de mensajes ---------- */

.ace-reviews__list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ace-reviews__item {
	border-block-end: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	padding-block-end: 1.25rem;
}

.ace-reviews__item:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.ace-reviews__item-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 0.375rem;
}

.ace-reviews__item-stars {
	display: inline-flex;
	gap: 0.0625rem;
}

.ace-reviews__item-author {
	font-size: 0.875rem;
	font-weight: 600;
}

.ace-reviews__item-date {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: 0.8125rem;
}

.ace-reviews__item-text {
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
}

/*
 * "Ver mas": un link, no un boton -pedido de Adriano-. Se mantiene como
 * `<button>` en el marcado (dispara Javascript, no navega a ningun lado),
 * pero se ve y se comporta como texto clickeable.
 */
.ace-reviews__more {
	background: none;
	border: 0;
	color: var(--wp--preset--color--accent, #3f4a5a);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	margin-block-start: 1rem;
	padding: 0;
}

.ace-reviews__more:hover {
	text-decoration: underline;
}

.ace-reviews__no-match {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	margin-block-start: 1rem;
}

/* ---------- Popup de escritorio ----------
 * `<dialog>` nativo: trae backdrop, tecla Escape y bloqueo del scroll de
 * fondo sin escribir nada de eso a mano. En celular no se usa -el "Ver mas"
 * despliega el resto en el lugar en vez de abrir esto-, ver reviews.js.
 */
.ace-reviews__dialog {
	background: var(--wp--preset--color--surface, #fff);
	border: 0;
	border-radius: var(--wp--preset--border-radius--large, 1rem);
	inline-size: min(40rem, 90vw);
	max-block-size: 85vh;
	padding: 1.5rem;
}

.ace-reviews__dialog::backdrop {
	background: rgb(0 0 0 / 50%);
}

.ace-reviews__dialog-close {
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	block-size: 2.25rem;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	position: absolute;
}

.ace-reviews__dialog-close .ace-icon {
	block-size: 1.125rem;
	inline-size: 1.125rem;
}

/*
 * `scrollbar-gutter:stable` reserva el lugar de la barra de scroll de
 * entrada, para que el contenido no quede tapado por ella ni se corra
 * cuando aparece -la barra en si usa el estilo sutil unico de todo el
 * sitio, definido en foundations.css-.
 */
.ace-reviews__dialog-body {
	margin-block-start: 0.5rem;
	max-block-size: calc(85vh - 4rem);
	overflow-y: auto;
	padding-inline-end: 0.5rem;
	scrollbar-gutter: stable;
}

/*
 * ---------- Formulario de opinion (`#review_form #commentform`) ----------
 * Hoy este formulario no se ve en ningun lado -`render_section()` en
 * `inc/reviews.php` saca la pestaña "Valoraciones" que lo traia, cargar una
 * opinion queda para una etapa posterior desde "Mi cuenta"-, pero se deja
 * resuelto de una vez: mismo patron de etiqueta flotante que `.ace-field`
 * (`foundations.css`) y que `.woocommerce-account form .form-row`
 * (`account.css`), aca sobre el marcado de `comment_form()` de WordPress
 * (`<p class="comment-form-author"><label>..</label><input placeholder="">
 * </p>`, sin envoltorio extra alrededor del input/textarea -a diferencia del
 * de WooCommerce-). `inc/reviews.php` agrega el `placeholder=" "` que
 * WordPress no trae de fabrica en estos campos.
 */
#commentform .comment-form-author,
#commentform .comment-form-email,
#commentform .comment-form-url,
#commentform .comment-form-comment {
	position: relative;
}

#commentform .comment-form-author > label,
#commentform .comment-form-email > label,
#commentform .comment-form-url > label,
#commentform .comment-form-comment > label {
	position: absolute;
	left: 14px;
	top: 24px;
	z-index: 1;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 4px;
	max-width: calc(100% - 28px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	pointer-events: none;
	transform-origin: left center;
	transition: top 0.15s ease-out, transform 0.15s ease-out, color 0.15s ease-out;
}

/* El textarea del mensaje es mas alto que un input de una linea: la
 * etiqueta en reposo se apoya arriba del texto, no en el centro vertical
 * de toda la caja (quedaria tapando la segunda o tercera linea). */
#commentform .comment-form-comment > label {
	top: 24px;
}

#commentform input,
#commentform textarea {
	width: 100%;
}

#commentform .comment-form-author:has(input:focus) > label,
#commentform .comment-form-email:has(input:focus) > label,
#commentform .comment-form-url:has(input:focus) > label,
#commentform .comment-form-comment:has(textarea:focus) > label,
#commentform .comment-form-author:has(input:not(:placeholder-shown)) > label,
#commentform .comment-form-email:has(input:not(:placeholder-shown)) > label,
#commentform .comment-form-url:has(input:not(:placeholder-shown)) > label,
#commentform .comment-form-comment:has(textarea:not(:placeholder-shown)) > label {
	top: 0;
	transform: translateY(-50%) scale(0.85);
}

#commentform .comment-form-author:has(input:focus) > label,
#commentform .comment-form-email:has(input:focus) > label,
#commentform .comment-form-url:has(input:focus) > label,
#commentform .comment-form-comment:has(textarea:focus) > label {
	color: var(--wp--preset--color--accent, #3f4a5a);
}