/* Defaults follow the design; every value is overridable via the widget's style controls. */

.diza-grc {
	--diza-grc-gap: 24px;
	--diza-grc-visible: 3;
	color: #0b1a4c;
}

/* --- Header --- */

.diza-grc__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 20px;
}

.diza-grc__heading {
	margin: 0;
	font-family: Manrope, sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
	color: #0b1a4c;
}

.diza-grc .diza-grc__header-link,
.diza-grc .diza-grc__summary-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	color: #0b1a4c;
	text-decoration: none;
}

.diza-grc .diza-grc__header-link {
	margin-left: auto;
	color: #1c3faa;
}

.diza-grc .diza-grc__header-link:hover,
.diza-grc .diza-grc__header-link:focus-visible,
.diza-grc .diza-grc__summary-link:hover,
.diza-grc .diza-grc__summary-link:focus-visible {
	text-decoration: underline;
}

.diza-grc__link-icon {
	display: inline-flex;
	font-size: 14px;
	transition: transform 0.2s ease;
}

.diza-grc a:hover .diza-grc__link-icon {
	transform: translateX(3px);
}

.diza-grc__link-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* --- Body: fixed score tile + scrolling reviews --- */

.diza-grc__body {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--diza-grc-gap);
	/* Default: score tile exactly as wide as one review tile. */
	--diza-grc-summary-basis: var(--diza-grc-summary-width, calc((100% - var(--diza-grc-visible) * var(--diza-grc-gap)) / (var(--diza-grc-visible) + 1)));
}

.diza-grc__summary,
.diza-grc__review {
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 2px 8px rgba(11, 26, 76, 0.04);
}

.diza-grc__summary {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 0 0 var(--diza-grc-summary-basis);
	min-width: 0;
	background-color: #f7f8fa;
}

.diza-grc__viewport {
	flex: 1 1 0;
	min-width: 0;
}

.diza-grc__track {
	display: flex;
	gap: var(--diza-grc-gap);
	/* Vertical padding keeps tile shadows visible; negative margin keeps tiles level with the score tile. */
	margin: -4px 0 -10px;
	padding: 4px 0 10px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

.diza-grc__track:focus-visible {
	outline: 2px solid #1c3faa;
	outline-offset: 2px;
}

.diza-grc--no-scrollbar .diza-grc__track {
	scrollbar-width: none;
}

.diza-grc--no-scrollbar .diza-grc__track::-webkit-scrollbar {
	display: none;
}

.diza-grc__review {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--diza-grc-visible) - 1) * var(--diza-grc-gap)) / var(--diza-grc-visible));
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

/* --- Score tile content --- */

.diza-grc__summary-title {
	margin: 0 0 8px;
	font-family: Manrope, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #0b1a4c;
}

.diza-grc__rating {
	display: block;
	margin-bottom: 8px;
	font-family: Manrope, sans-serif;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.1;
	color: #0b1a4c;
}

.diza-grc .diza-grc__count {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.4;
	color: #0b1a4c;
	text-decoration: none;
}

.diza-grc .diza-grc__count--link:hover,
.diza-grc .diza-grc__count--link:focus-visible {
	text-decoration: underline;
}

.diza-grc__summary-link-wrap {
	margin-top: 16px;
}

/* --- Stars (score tile + reviews) --- */

.diza-grc__stars {
	--diza-star-size: 30px;
	display: flex;
	gap: 2px;
}

.diza-grc__review .diza-grc__stars {
	--diza-star-size: 26px;
	margin-bottom: 16px;
}

.diza-grc__star {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--diza-star-size);
	height: var(--diza-star-size);
	color: #e3e5ea;
}

.diza-grc__star svg {
	display: block;
	width: var(--diza-star-size);
	height: var(--diza-star-size);
	max-width: none;
}

.diza-grc__star-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	color: #f7b500;
}

/* --- Review content --- */

.diza-grc__name {
	margin: 0 0 12px;
	font-family: Manrope, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #0b1a4c;
}

.diza-grc__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	font-size: 16px;
	line-height: 1.7;
	color: #1a203f;
}

.diza-grc__date {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #6b7280;
}

.diza-grc__google {
	display: block;
	flex: 0 0 auto;
	align-self: flex-end;
	width: 36px;
	height: 36px;
	margin-top: auto;
	padding-top: 16px;
	box-sizing: content-box;
}

/* --- Arrows --- */

.diza-grc__nav {
	--diza-grc-arrow-size: 44px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

.diza-grc[data-scrollable="false"] .diza-grc__nav {
	display: none;
}

.diza-grc .diza-grc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--diza-grc-arrow-size);
	height: var(--diza-grc-arrow-size);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #d5d9e2;
	border-radius: 50%;
	background-color: #fff;
	color: #0b1a4c;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.diza-grc .diza-grc__arrow:not(:disabled):hover {
	background-color: #0b1a4c;
	border-color: #0b1a4c;
	color: #fff;
}

.diza-grc .diza-grc__arrow:focus-visible {
	outline: 2px solid #1c3faa;
	outline-offset: 2px;
}

.diza-grc .diza-grc__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.diza-grc__arrow svg {
	width: 45%;
	height: 45%;
}

@media (max-width: 767px) {
	.diza-grc {
		--diza-grc-gap: 16px;
	}

	.diza-grc__heading {
		font-size: 22px;
	}

	.diza-grc__summary,
	.diza-grc__review {
		padding: 20px;
	}

	.diza-grc__rating {
		font-size: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.diza-grc__track {
		scroll-behavior: auto;
	}

	.diza-grc__link-icon,
	.diza-grc .diza-grc__arrow {
		transition: none;
	}
}

/* --- Editor-only notice --- */

.diza-grc__notice {
	margin: 0 0 12px;
	padding: 8px 12px;
	border: 1px dashed #c3c4c7;
	background: #f6f7f7;
	color: #50575e;
	font-size: 13px;
}