/**
 * Reggal Reviews — Summary panel styles
 *
 * The carousel's left panel and [reggal_reviews_summary]; carousel.css depends on this.
 */

/* -----------------------------------------------
   Summary panel
   ----------------------------------------------- */

.rr-carousel__summary {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rr-carousel__heading {
	font-size: inherit;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.25rem 0;
	color: #222;
}

.rr-carousel__logo-rating {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.rr-carousel__logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex-shrink: 0;
}

.rr-carousel__rating-info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.rr-carousel__score-line {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rr-carousel__score {
	font-size: inherit;
	font-weight: 700;
	line-height: 1;
	color: #222;
}

.rr-carousel__stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.rr-carousel__count {
	font-size: inherit;
	color: #666;
}

.rr-carousel__write-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.25rem;
	border: 1.5px solid #333;
	background: #fff;
	color: #333;
	font-size: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	align-self: flex-start;
}

.rr-carousel__write-btn:hover {
	background-color: #333;
	color: #fff;
}

/* Star icons (the carousel's own rules cover its cards). */
.rr-summary .rr-star-icon {
	width: 16px;
	height: 16px;
	fill: #ddd;
	stroke: none;
	flex-shrink: 0;
}

.rr-summary .rr-star-icon--filled {
	fill: #FFC400;
}