/* Owlsora Elements — Reviews widget
 * Colors/sizes come from widget controls as CSS variables on .spr.
 */

.spr {
	--spr-bg: #F7FAFD;
	--spr-max: 1200px;
	--spr-pad-top: 104px;
	--spr-pad-bottom: 104px;
	--spr-pad-x: 16px;
	--spr-gap: 28px;
	--spr-clamp: 4;
	--spr-eyebrow: #0B6BF0;
	--spr-title: #0B1A3D;
	--spr-sub: #56658a;
	--spr-card-bg: #FFFFFF;
	--spr-card-radius: 24px;
	--spr-star: #FFC400;
	--spr-src-bg: #e7f2fb;
	--spr-src: #2D8CFF;
	--spr-quote: #2a3a66;
	--spr-more: #0a3fcf;
	--spr-name: #060f24;
	--spr-avatar-bg: #0B1A3D;
	--spr-avatar: #FFFFFF;
	--spr-card-border: rgba(11, 26, 61, .16);
	--spr-btn-bg: #0b6bf0;
	--spr-btn-bg-hover: #0B6BF0;
	--spr-btn-color: #FFFFFF;
	--spr-btn-edge: #0845b0;
	--spr-badge-bg: #FFFFFF;

	position: relative;
	background-color: var(--spr-bg);
	color: var(--spr-quote);
	font-family: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
.spr *,
.spr *::before,
.spr *::after { box-sizing: border-box; }

.spr--texture {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%230b1a3d' fill-opacity='.06'%3E%3Ccircle cx='12' cy='20' r='1.2'/%3E%3Ccircle cx='70' cy='44' r='.9'/%3E%3Ccircle cx='130' cy='12' r='1.1'/%3E%3Ccircle cx='40' cy='96' r='1.3'/%3E%3Ccircle cx='110' cy='80' r='.8'/%3E%3Ccircle cx='150' cy='130' r='1.2'/%3E%3Ccircle cx='86' cy='140' r='1'/%3E%3Ccircle cx='20' cy='146' r='.8'/%3E%3C/g%3E%3C/svg%3E");
}

.spr.owe-stretch { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }

.spr__inner {
	max-width: var(--spr-max);
	margin: 0 auto;
	padding-top: var(--spr-pad-top);
	padding-bottom: var(--spr-pad-bottom);
	padding-left: max(var(--spr-pad-x), env(safe-area-inset-left, 0px));
	padding-right: max(var(--spr-pad-x), env(safe-area-inset-right, 0px));
}

/* heading */
.spr__head { max-width: 860px; margin: 0 auto; text-align: center; }
.spr__eyebrow { display: block; margin-bottom: 14px; color: var(--spr-eyebrow); font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.spr .spr__title {
	margin: 0;
	padding: 0;
	color: var(--spr-title);
	font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif;
	font-size: clamp(46px, 6vw, 84px);
	font-weight: 400;
	line-height: .98;
	text-transform: uppercase;
	text-wrap: balance;
}
.spr .spr__sub { margin: 22px auto 0; max-width: none; color: var(--spr-sub); font-size: 20px; line-height: 1.6; }

/* rating badge */
.spr .spr__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin-top: 28px;
	padding: 12px 18px;
	background: var(--spr-badge-bg);
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(11, 26, 61, .12);
	color: var(--spr-name);
	text-decoration: none;
	text-align: left;
}
.spr__badge-platform { font-size: 14px; font-weight: 600; }
.spr__badge-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spr__badge-num { font-size: 20px; font-weight: 800; color: #8A4B10; }
.spr__badge-count { font-size: 14px; color: var(--spr-sub); }

/* cards */
.spr__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spr-gap);
	margin-top: 56px;
	align-items: stretch;
}
@media (max-width: 980px) { .spr__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; } }

.spr .spr__card {
	margin: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 30px;
	background: var(--spr-card-bg);
	border: 2px dashed var(--spr-card-border);
	border-radius: var(--spr-card-radius);
	box-shadow: 0 14px 30px rgba(11, 26, 61, .1);
}
.spr__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spr__stars { display: inline-flex; gap: 3px; }
.spr__stars svg { width: 22px; height: 22px; display: block; }
.spr__stars .is-on { fill: var(--spr-star); }
.spr__stars .is-off { fill: rgba(6, 15, 36, .14); }
.spr__src {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--spr-src-bg);
	color: var(--spr-src);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.spr .spr__quote {
	margin: 22px 0 0;
	padding: 0;
	border: 0;
	color: var(--spr-quote);
	flex: 1;
	font-size: 18px;
	font-style: italic;
	line-height: 1.65;
	quotes: none;
	overflow-wrap: anywhere;
}
.spr .spr__quote::before,
.spr .spr__quote::after { content: none; }
.spr--clamped .spr__quote:not(.is-open) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--spr-clamp);
	line-clamp: var(--spr-clamp);
	overflow: hidden;
}
.spr .spr__more {
	align-self: flex-start;
	margin: 10px 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--spr-more);
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
}
.spr .spr__more:hover { text-decoration: underline; background: none; color: var(--spr-more); }
.spr .spr__more[hidden] { display: none; }

.spr__who {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(6, 15, 36, .12);
}
.spr__avatar {
	width: 50px;
	height: 50px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--spr-avatar-bg);
	color: var(--spr-avatar);
	font-weight: 800;
	font-size: 17px;
}
.spr__avatar--img { object-fit: cover; }
.spr__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.6; }
.spr__name { color: var(--spr-name); font-size: 15px; font-weight: 800; }
.spr .spr__view { color: var(--spr-name); font-size: 14px; font-weight: 800; text-decoration: none; }
.spr .spr__view:hover { text-decoration: underline; color: var(--spr-name); }
.spr__date { color: var(--spr-sub); font-size: 14px; }

/* button */
.spr__cta { display: flex; justify-content: center; margin-top: 48px; }
.spr .spr__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: 10px;
	background: var(--spr-btn-bg);
	color: var(--spr-btn-color);
	box-shadow: 0 4px 0 var(--spr-btn-edge);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.6;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.spr .spr__btn:hover,
.spr .spr__btn:focus-visible { background: var(--spr-btn-bg-hover); color: var(--spr-btn-color); transform: translateY(-2px); box-shadow: 0 6px 0 var(--spr-btn-edge); }
.spr__btn svg { width: 20px; height: 20px; flex: none; }
.spr a:focus-visible,
.spr button:focus-visible { outline: 3px solid #2D8CFF; outline-offset: 3px; border-radius: 6px; }

@media (max-width: 767px) {
	.spr .spr__card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.spr * { transition: none !important; }
}

/* Full width: when this widget is alone in an Elementor container/column,
 * drop that container's padding so no gap shows above, below or beside it. */
.e-con:has(> .elementor-widget-ow-reviews:only-child .owe-stretch),
.e-con:has(> .e-con-inner > .elementor-widget-ow-reviews:only-child .owe-stretch) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
	padding: 0;
}
.elementor-widget-wrap:has(> .elementor-widget-ow-reviews:only-child .owe-stretch) { padding: 0 !important; }
.elementor-section:has(.elementor-widget-wrap > .elementor-widget-ow-reviews:only-child .owe-stretch) { padding-top: 0; padding-bottom: 0; }
.elementor-widget-ow-reviews:has(.owe-stretch) { margin-top: 0; margin-bottom: 0; --kit-widget-spacing: 0px; }