/**
 * Review badges over the homepage hero (Booking.com / Google / Tripadvisor).
 * Desktop: top-right corner over the hero. Mobile: tidy centered row below the
 * hero title so they never overlap it. Based on the approved client mockup.
 */

.molino-review-badges {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	display: flex;
	gap: 10px;
	font-family: inherit;
}

.molino-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #ffffff;
	color: #222;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.molino-badge:hover,
a.molino-badge:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
	color: #222;
}

a.molino-badge:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.molino-badge__plat {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 3px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.molino-badge__score {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: #222;
}

.molino-badge__stars {
	margin-top: 3px;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 1;
}

.molino-badge__caption {
	margin-top: 3px;
	font-size: 10px;
	color: #888;
	line-height: 1;
}

/* --- Booking.com --- */
.molino-badge--booking .molino-badge__plat {
	color: #003b95;
}

.molino-badge__box {
	margin-top: 4px;
	padding: 3px 8px;
	border-radius: 4px 4px 4px 0;
	background: #003b95;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

/* --- Google --- */
.molino-badge__plat--google .g1 { color: #4285f4; }
.molino-badge__plat--google .g2 { color: #ea4335; }
.molino-badge__plat--google .g3 { color: #fbbc05; }
.molino-badge__plat--google .g4 { color: #34a853; }

.molino-badge__stars--gold {
	color: #fbbc05;
}

/* --- Tripadvisor --- */
.molino-badge--tripadvisor .molino-badge__plat {
	color: #007a5e;
}

.molino-badge__stars--green {
	color: #00aa6c;
}

.molino-owl {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #00aa6c;
}

.molino-owl::before,
.molino-owl::after {
	content: "";
	position: absolute;
	top: 3px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}

.molino-owl::before { left: 2px; }
.molino-owl::after { right: 2px; }

/* ===== Mobile / small screens ===== */
/* Compact row pinned to the TOP of the hero so the badges are seen first,
   without scrolling, and are never covered by the booking bar below. */
@media (max-width: 767px) {
	.molino-review-badges {
		top: 10px;
		right: 0;
		left: 0;
		justify-content: center;
		gap: 6px;
		padding: 0 10px;
	}

	.molino-badge {
		min-width: 0;
		padding: 5px 8px;
		border-radius: 8px;
	}

	.molino-badge__plat {
		font-size: 9px;
		margin-bottom: 2px;
	}

	.molino-badge__score {
		font-size: 15px;
	}

	.molino-badge__box {
		font-size: 12px;
		padding: 2px 7px;
	}

	.molino-badge__stars {
		font-size: 10px;
		margin-top: 2px;
	}

	.molino-badge__caption {
		display: none;
	}
}