/**
 * Mongo Points — estilos de frontend fuera del checkout/Mi Cuenta (Fase 3):
 * badge "ganarás X puntos" en ficha de producto, widget de la página de
 * agradecimiento, y los shortcodes de saldo/historial cuando se insertan en
 * cualquier página.
 *
 * [mongo_points_earn] se deja deliberadamente con muy poco estilo propio —
 * David lo va a colocar él mismo donde quiera dentro de la ficha de
 * producto, así que no debe imponer una caja/fondo que no encaje con el
 * sitio donde lo pegue; solo color de marca y tamaño de fuente heredado.
 */

.mongo-points-earn-badge {
	color: var(--wd-primary-color, #be0d57);
	font-weight: 600;
}

.mongo-points-thankyou-widget {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bgcolor-gray-200, #f7f7f7);
	border-radius: var(--wd-brd-radius, 12px);
	padding: 14px 18px;
	margin: 20px 0;
}

.mongo-points-thankyou-widget__icon {
	color: var(--wd-primary-color, #be0d57);
	font-size: 1.2rem;
	line-height: 1;
}

.mongo-points-thankyou-widget__text {
	font-size: 1rem;
}

.mongo-points-shortcode-balance {
	display: flex;
	align-items: baseline;
	gap: 8px;
	background: var(--bgcolor-gray-200, #f7f7f7);
	border-radius: var(--wd-brd-radius, 12px);
	padding: 16px 20px;
}

.mongo-points-shortcode-balance__value {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--wd-primary-color, #be0d57);
}

.mongo-points-shortcode-balance__label {
	font-size: 0.9rem;
	color: var(--wd-text-color, #666666);
}

.mongo-points-shortcode-balance__euros {
	margin-left: auto;
	font-size: 0.85rem;
	color: var(--wd-text-color, #666666);
}

.mongo-points-shortcode-history {
	width: 100%;
	border-collapse: collapse;
}

.mongo-points-shortcode-history th,
.mongo-points-shortcode-history td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--brdcolor-gray-300, #ededed);
	font-size: 0.85rem;
}

.mongo-points-shortcode-positive {
	color: #1a7f37;
	font-weight: 600;
}

.mongo-points-shortcode-negative {
	color: var(--wd-primary-color, #be0d57);
	font-weight: 600;
}

.mongo-points-shortcode-empty,
.mongo-points-shortcode-login-prompt {
	color: var(--wd-text-color, #666666);
	font-size: 0.9rem;
}

.mongo-points-shortcode-login-prompt a {
	color: var(--wd-primary-color, #be0d57);
	font-weight: 600;
}

/* Marcador de posición en el editor de bloques — solo visible dentro de wp-admin. */
.mongo-points-block-placeholder {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f7f7f7;
	border: 1px dashed #ccc;
	border-radius: 8px;
	padding: 14px 16px;
	color: #666666;
	font-size: 0.9rem;
}

.mongo-points-block-placeholder__icon {
	color: #be0d57;
}