/* Buy-page review cards - markup from common/review-card.php. Mirrors the homepage testimonial cards. */

.testimonialsbox .test.review-card,
.custrev .testimonialsbox .test.review-card {
	height: auto;
	padding: 16px;
	border: 0.5px solid #F0F0F0;
	border-radius: 10px;
	background-color: #FDFDFD;
	box-shadow: none;
	font-family: "Inter", sans-serif;
	text-align: left;
}

.testimonialsbox .test.review-card .stars {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-bottom: 8px;
}

.testimonialsbox .test.review-card .icon {
	display: inline-flex;
}

.testimonialsbox .test.review-card .stars .icon {
	width: 16px;
	height: 16px;
}

.testimonialsbox .test.review-card .stars .icon.off {
	opacity: .25;
	filter: grayscale(1);
}

.testimonialsbox .test.review-card .icon img,
.testimonialsbox .test.review-card .icon svg {
	width: 100%;
	height: 100%;
}

/* One-line title + two-line text keeps every card the same height in the float grid */
.testimonialsbox .test.review-card .label {
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.testimonialsbox .test.review-card .review {
	margin: 0 0 15px;
	font-size: 13px;
	font-weight: 300;
	line-height: 18px;
	max-height: 36px;
	color: #4F4F4F;
}

.testimonialsbox .test.review-card .reviewer {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 300;
	color: #4F4F4F;
}

.testimonialsbox .test.review-card .reviewer .icon {
	width: 9px;
	height: 10px;
}

.testimonialsbox .test.review-card .reviewer .name {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

@media only screen and (min-width: 992px) {
	.testimonialsbox .test.review-card {
		padding: 20px 16px;
	}

	.testimonialsbox .test.review-card .stars {
		margin-bottom: 10px;
	}

	.testimonialsbox .test.review-card .stars .icon {
		width: 18px;
		height: 18px;
	}

	.testimonialsbox .test.review-card .label {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.testimonialsbox .test.review-card .review {
		font-size: 14px;
		line-height: 20px;
		max-height: 40px;
	}

	.testimonialsbox .test.review-card .reviewer {
		font-size: 14px;
		gap: 5px;
	}

	.testimonialsbox .test.review-card .reviewer .icon {
		width: 11px;
		height: 13px;
	}
}

/* Featured testimonials above the review grid: same card treatment as the review cards */
.testp .testpbox,
.custrev .testp .testpbox {
	border: 0.5px solid #F0F0F0;
	border-radius: 10px;
	background-color: #FDFDFD;
	box-shadow: none;
}

/* Speech-bubble tail pointing at the avatar: card colour plus the two outer edges */
.testp .testpbox .arrow,
.custrev .testp .testpbox .arrow {
	background-color: #FDFDFD;
	border-right: 0.5px solid #F0F0F0;
	border-bottom: 0.5px solid #F0F0F0;
}

/* Reviews section v2 (buy-instagram-followers): centred heading like the other
   sections, a rating pill matching the hero's, then the 10 newest reviews -
   a continuously gliding, swipeable row (full width on desktop). */
.rv-section {
	background-color: #FFFFFF;
	padding: 48px 0;
	overflow: hidden;
	font-family: "Inter", sans-serif;
}

/* Keep the page's alternating light-purple band where the section has one */
.rv-section.color1 {
	background-color: #fcf9ff;
}

.rv-section .cnwidth {
	box-sizing: border-box;
	padding: 0 16px;
}

.rv-section .heading-color {
	float: none;
	margin: 0 0 16px;
	text-align: center;
}


/* Same look as the hero's .sv-rating-pill (css/rating-pill.css) */
.rv-summary {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.rv-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #E3F7E8;
	color: #0B5D2A;
	font-size: 16px;
	line-height: 1;
}

.rv-pill b {
	font-weight: 600;
}

.rv-pill .sv-stars {
	display: block;
	color: #0B5D2A;
}

.rv-summary .rv-count {
	font-size: 13px;
	color: #4F4F4F;
}

/* Mobile carousel: each card 86% wide so the next one peeks in. The track
   runs into the 16px page gutters on either side. */
.rv-track {
	display: flex;
	gap: 12px;
	margin: 0 -16px;
	padding: 4px 16px 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 16px;
	scrollbar-width: none;
	text-align: left;
}

.rv-track::-webkit-scrollbar {
	display: none;
}

.rv-slide {
	flex: 0 0 86%;
	scroll-snap-align: start;
}

/* Continuous glide (script adds .rv-moving on mobile): snapping would fight it */
.rv-moving .rv-track {
	scroll-snap-type: none;
}

.rv-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.rv-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #E4D9F7;
	cursor: pointer;
	transition: width .2s;
}

.rv-dot[aria-current="true"] {
	width: 20px;
	border-radius: 4px;
	background-color: #7B2FD9;
}

.review-card.review-card--v2 {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid #ECE4FA;
	border-radius: 16px;
	background-color: #FFFFFF;
	box-shadow: 0 4px 16px rgba(123, 47, 217, .06);
}

.review-card--v2 .rv-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.review-card--v2 .stars .sv-stars {
	display: block;
	color: #0B5D2A;
}

.review-card--v2 time {
	font-size: 12px;
	color: #71717A;
}

.review-card--v2 .review {
	flex: 1;
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 23px;
	color: #1D1D1F;
}

.review-card--v2 .reviewer {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid #F3EEFC;
}

.review-card--v2 .avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #F3ECFF;
	color: #7B2FD9;
	font-size: 13px;
	font-weight: 600;
}

.review-card--v2 .who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.review-card--v2 .name {
	font-size: 14px;
	font-weight: 600;
	color: #1D0A4A;
}

.review-card--v2 .meta {
	margin-top: 2px;
	font-size: 12px;
	color: #71717A;
}

.rv-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-top: 20px;
}

.rv-section .rv-write {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid #DCCEF5;
	border-radius: 12px;
	background-color: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	color: #1D0A4A;
	text-decoration: none;
}

.rv-section .rv-write:hover {
	border-color: #7B2FD9;
	color: #7B2FD9;
}

.rv-section .rv-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	font-weight: 500;
	color: #7B2FD9;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.rv-section .rv-icon {
	display: block;
	flex-shrink: 0;
}

.rv-section .rv-all .rv-icon {
	transition: transform .15s ease-out;
}

.rv-section .rv-all:hover .rv-icon {
	transform: translateX(3px);
}

/* Desktop: the same gliding row, full width, with wider cards and no dots */
@media only screen and (min-width: 992px) {
	.rv-section {
		padding: 72px 0;
	}


	.rv-summary {
		margin-bottom: 36px;
	}

	/* Full-bleed row: break out of .cnwidth to the viewport edges */
	.rv-track {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		padding: 4px 0 8px;
		gap: 20px;
	}

	.rv-slide {
		flex: 0 0 380px;
	}

	.rv-dots {
		display: none;
	}

	.review-card.review-card--v2 {
		padding: 24px;
	}

	.rv-actions {
		margin-top: 32px;
	}
}

/* About Us (about-us-2.html): the same review row under the contact form.
   Inherits .rv-section, minus its band background and padding; the section
   clips the full-bleed row instead. */
#section-form-message {
	overflow: hidden;
}

.rv-section.rv-about {
	padding: 40px 0 0;
	background: transparent;
	overflow: visible;
}