/**
 * JD Credit — Google rating summary and the review feed on the Reviews page.
 * See inc/google-reviews.php.
 */

/* --------------------------------------------------- rating summary -- */

.jd-grating {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.jd-grating__score {
	font-family: Inter, sans-serif;
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: #212121;
	letter-spacing: -0.02em;
}

/* Two identical rows of stars: a grey one, and a gold one on top clipped to
   the share of five actually earned, so a 4.9 shows as very nearly five. */
.jd-grating__stars {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.jd-grating__stars-empty,
.jd-grating__stars-full {
	display: block;
	white-space: nowrap;
}

.jd-grating__stars-empty {
	color: #dcdcdc;
}

.jd-grating__stars-full {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: #fbbc04;
}

.jd-grating__stars svg {
	display: inline-block;
	width: 26px;
	height: 26px;
}

.jd-grating__label {
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #7e7e7e;
}

.jd-grating__link {
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #1565a8;
	text-decoration: none;
	border-bottom: 1px solid rgba(21, 101, 168, 0.35);
}

.jd-grating__link:hover,
.jd-grating__link:focus-visible {
	color: #0f4d81;
	border-bottom-color: #0f4d81;
}

/* On the blue hero: the gold stays, everything else goes light. The score is
   the loudest thing on the page and it earns that — it is the one number a
   visitor came to check. */
.jd-grating--dark .jd-grating__score {
	color: #fff;
}

.jd-grating--dark .jd-grating__stars-empty {
	color: rgba(255, 255, 255, 0.3);
}

.jd-grating--dark .jd-grating__label {
	color: rgba(255, 255, 255, 0.82);
}

.jd-grating--dark .jd-grating__link {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.45);
}

.jd-grating--dark .jd-grating__link:hover,
.jd-grating--dark .jd-grating__link:focus-visible {
	color: #fff;
	border-bottom-color: #fff;
}

.jd-grating--dark .jd-grating__score {
	font-size: 54px;
}

.jd-grating--dark .jd-grating__stars svg {
	width: 28px;
	height: 28px;
}

.jd-grating--dark {
	gap: 8px;
}

/* ------------------------------------------------------ review feed -- */

/* The Trustindex layout is a slider, and which layout is used is a single
   global setting shared with the widget on the homepage and every loan page.
   A slider is the wrong shape for a page whose whole purpose is "here is
   every review", so on this page only the track is allowed to wrap and the
   arrows are dropped. Everything else keeps the plugin's own styling, and no
   other page is touched.

   Spacing is done with margins rather than `gap`: the plugin's own stylesheet
   sets margins on both the track and the cards with !important, and a gap on
   top of those produced no space at all. Margins are what it already uses, so
   they compose instead of fighting.

   The !important flags beat both that stylesheet and the inline styles the
   slider script writes onto each card. */

.jd-reviews-grid .ti-widget .ti-reviews-container,
.jd-reviews-grid .ti-widget .ti-reviews-container-wrapper {
	height: auto !important;
	transform: none !important;
	overflow: visible !important;
}

.jd-reviews-grid .ti-widget .ti-reviews-container-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	margin: 0 !important;
}

/* Three across, with the 22px between them split as a margin either side.
   The plugin gives each card `flex: 0 0 33.333%`, and a flex-basis outranks
   width on a flex item — leaving the basis alone makes each card a third plus
   its margins, so only two fit a row. The basis has to carry the same sum. */
.jd-reviews-grid .ti-widget .ti-review-item {
	position: relative !important;
	inset-inline-start: auto !important;
	inset-block-start: auto !important;
	flex: 0 0 calc(33.333% - 22px) !important;
	width: calc(33.333% - 22px) !important;
	max-width: none !important;
	margin: 0 11px 38px !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* ------------------------------------------------------- the cards -- */

/* The plugin's card is .ti-inner, and the reviewer's name lives in a separate
   .ti-review-header *outside* it — so out of the box the name floats on the
   page background under a card it does not appear to belong to, and the card
   itself carries a wavy background pattern.

   Here the whole item becomes the card: the chrome moves from .ti-inner up to
   .ti-review-item, which already wraps both halves, and .ti-inner is stripped
   back to plain padding. The name then sits inside the card, on a hairline,
   pinned to the bottom so cards in a row line up.

   Each selector carries .ti-goog: the plugin styles these same elements at
   .ti-widget.ti-goog <child>, which is three classes, and its stylesheet is
   printed after the theme's. */

.jd-reviews-grid .ti-widget.ti-goog .ti-review-item {
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	background-color: #fff !important;
	border: 1px solid #e6e9ec !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(0, 25, 49, 0.04) !important;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.jd-reviews-grid .ti-widget.ti-goog .ti-review-item:hover {
	border-color: #d2dae2 !important;
	box-shadow: 0 6px 18px rgba(0, 25, 49, 0.09) !important;
}

/* Strip the plugin's own card: the wave pattern, the shadow, the radius.
   It declares these at `.ti-widget.ti-goog .ti-review-item > .ti-inner` with
   !important, so matching that shape plus .jd-reviews-grid is what wins. */
.jd-reviews-grid .ti-widget.ti-goog .ti-review-item > .ti-inner {
	flex: 1 1 auto !important;
	background-image: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 20px 20px 14px !important;
}

.jd-reviews-grid .ti-widget.ti-goog .ti-review-text,
.jd-reviews-grid .ti-widget.ti-goog .ti-review-text-container {
	color: #3c4043 !important;
	font-size: 14.5px !important;
	line-height: 1.6 !important;
}

/* The label is inside a span, which is where the plugin sets its colour. */
.jd-reviews-grid .ti-widget.ti-goog .ti-read-more,
.jd-reviews-grid .ti-widget.ti-goog .ti-read-more span {
	color: #1565a8 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	opacity: 1 !important;
}

/* The Google mark is a trust signal, not a headline. */
.jd-reviews-grid .ti-widget.ti-goog .ti-platform-icon img {
	width: 17px !important;
	height: 17px !important;
}

/* The name block, now a footer inside the card. */
.jd-reviews-grid .ti-widget.ti-goog .ti-review-header {
	margin: 0 !important;
	padding: 13px 20px 15px !important;
	border-top: 1px solid #f0f2f4 !important;
}

.jd-reviews-grid .ti-widget.ti-goog .ti-profile-img img {
	width: 34px !important;
	height: 34px !important;
}

.jd-reviews-grid .ti-widget.ti-goog .ti-name {
	color: #212121 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.jd-reviews-grid .ti-widget.ti-goog .ti-date {
	color: #8a8f94 !important;
	font-size: 12.5px !important;
}

/* Arrows and dots belong to the slider that is no longer there. */
.jd-reviews-grid .ti-widget .ti-controls,
.jd-reviews-grid .ti-widget .ti-controls-line {
	display: none !important;
}

@media (max-width: 1024px) {
	.jd-reviews-grid .ti-widget .ti-review-item {
		flex-basis: calc(50% - 22px) !important;
		width: calc(50% - 22px) !important;
	}
}

@media (max-width: 767px) {
	.jd-reviews-grid .ti-widget .ti-review-item {
		flex-basis: 100% !important;
		width: 100% !important;
		margin: 0 0 30px !important;
	}

	/* The "verified" tooltip is 192px wide and absolutely positioned to the
	   right of its badge, so on a phone it hangs past the viewport and gives
	   the page a horizontal scroll. It only ever opens on hover, which a touch
	   screen has not got.

	   The plugin declares `display:inline-block !important` on it at three
	   classes, so this carries .ti-goog as a fourth to outweigh it rather than
	   relying on which stylesheet loads last. */
	.jd-reviews-grid .ti-widget.ti-goog .ti-verified-tooltip {
		display: none !important;
	}

	.jd-grating__score,
	.jd-grating--dark .jd-grating__score {
		font-size: 40px;
	}

	.jd-grating__stars svg,
	.jd-grating--dark .jd-grating__stars svg {
		width: 23px;
		height: 23px;
	}
}