/**
 * SJ Reviews - front end.
 * Tokens taken from the SJ Writing Services homepage: navy #172e4b,
 * ABeeZee headings, Inter body, pill buttons, 10px cards.
 */

.sjr {
	--sjr-navy: #172e4b;
	--sjr-navy-2: #1c2d49;
	--sjr-teal: #29c4a9;
	--sjr-gold: #d29a26;
	--sjr-gold-empty: #d9dce1;
	--sjr-page: #f5f6f8;
	--sjr-card: #fff;
	--sjr-text: #2a3342;
	--sjr-muted: #69707d;
	--sjr-line: #e4e7eb;
	--sjr-shadow: 0 2px 12px rgba(0, 0, 0, .11);
	--sjr-radius: 10px;
	--sjr-pill: 100px;

	box-sizing: border-box;
	color: var(--sjr-text);
	font-family: Inter, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.6;
}

.sjr *,
.sjr *::before,
.sjr *::after { box-sizing: border-box; }

.sjr :focus-visible {
	outline: 2px solid var(--sjr-navy);
	outline-offset: 2px;
}

/* ---------- stars ---------- */
.sjr-stars { display: inline-flex; gap: 3px; vertical-align: middle; line-height: 1; }

.sjr-star {
	width: 1em;
	height: 1em;
	display: block;
	background-color: var(--sjr-gold-empty);
	-webkit-mask: var(--sjr-star-mask) center / contain no-repeat;
	mask: var(--sjr-star-mask) center / contain no-repeat;
}

.sjr {
	--sjr-star-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.7l3.09 6.53 7.01 1.06-5.07 5.12 1.2 7.25L12 18.2l-6.23 3.46 1.2-7.25L1.9 9.29l7.01-1.06z'/%3E%3C/svg%3E");
}

.sjr-star.is-full { background-color: var(--sjr-gold); }

.sjr-star.is-half {
	background-image: linear-gradient(90deg, var(--sjr-gold) 50%, var(--sjr-gold-empty) 50%);
	background-color: transparent;
}

/* ---------- statistics band ---------- */
.sjr-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 30px;
}

@media (max-width: 840px) {
	.sjr-stats { grid-template-columns: 1fr; }
}

.sjr-panel {
	background: var(--sjr-card);
	border-radius: var(--sjr-radius);
	box-shadow: var(--sjr-shadow);
	padding: 26px 28px;
}

.sjr-score { text-align: center; }

.sjr-big {
	font-family: ABeeZee, Inter, sans-serif;
	font-size: 52px;
	line-height: 1;
	font-weight: 700;
	color: var(--sjr-navy);
	margin-bottom: 12px;
}

.sjr-score small {
	display: block;
	margin-top: 10px;
	color: var(--sjr-muted);
	font-size: .85rem;
}

.sjr-kpis {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
}

.sjr-kpi { display: flex; align-items: center; gap: 14px; }

.sjr-kpi .sjr-v {
	font-family: ABeeZee, Inter, sans-serif;
	font-size: 34px;
	line-height: 1;
	font-weight: 700;
	color: var(--sjr-navy);
	min-width: 1.6em;
}

.sjr-kpi span:last-child { font-size: .88rem; color: var(--sjr-muted); }
.sjr-kpi-alt .sjr-v { color: var(--sjr-navy-2); opacity: .75; }

.sjr-dist-title { font-size: .85rem; color: var(--sjr-muted); margin-bottom: 14px; }

.sjr-drow {
	display: grid;
	grid-template-columns: 1.3em 1fr 2.4em;
	align-items: center;
	gap: 11px;
	font-size: .84rem;
	margin-bottom: 9px;
}

.sjr-drow .sjr-l { text-align: right; color: var(--sjr-muted); font-variant-numeric: tabular-nums; }
.sjr-drow .sjr-c { color: var(--sjr-muted); font-variant-numeric: tabular-nums; }

.sjr-bar { display: block; height: 8px; background: var(--sjr-line); border-radius: 99px; overflow: hidden; }
.sjr-bar i { display: block; height: 100%; background: var(--sjr-gold); border-radius: 99px; }

/* ---------- filters ---------- */
.sjr-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
	margin: 0 0 26px;
}

.sjr-chip {
	font: inherit;
	font-size: .86rem;
	font-weight: 500;
	cursor: pointer;
	background: var(--sjr-card);
	color: var(--sjr-muted);
	border: 1px solid var(--sjr-line);
	border-radius: var(--sjr-pill);
	padding: 8px 18px;
	box-shadow: var(--sjr-shadow);
}

.sjr-chip:hover { color: var(--sjr-navy); }

.sjr-chip[aria-pressed="true"] {
	background: var(--sjr-navy);
	border-color: var(--sjr-navy);
	color: #fff;
}

.sjr-chip .sjr-n { opacity: .7; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---------- review cards ---------- */
.sjr-grid {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.sjr-slide { margin: 0; display: block; }
.sjr-slide[hidden] { display: none; }

.sjr-card {
	background: var(--sjr-card);
	border-radius: var(--sjr-radius);
	box-shadow: var(--sjr-shadow);
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 200px;         /* floor: a card can never collapse unseen */
	box-sizing: border-box;
	margin: 0;
}

/* ---------- carousel ---------- */

/* Width containment. Every ancestor of the track must fill its parent and be
   allowed to shrink below its content, otherwise the percentage flex-basis
   below resolves against zero and every slide collapses to a sliver. */
.sjr-reviews,
.sjr-viewport {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.sjr-viewport { position: relative; }

.sjr-track {
	list-style: none;
	margin: 0;
	height: auto;
	padding: 6px 6px 20px;
	display: flex;
	align-items: stretch;
	gap: 22px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 6px;   /* match the track padding, or slides snap 6px off */
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.sjr-track::-webkit-scrollbar { display: none; }
.sjr-track:focus-visible { outline: 2px solid var(--sjr-navy); outline-offset: 4px; border-radius: 4px; }

.sjr-track > .sjr-slide {
	flex: 0 0 calc((100% - 44px) / 3);
	min-width: 240px;          /* floor: never collapse, whatever the parent does */
	scroll-snap-align: start;
	box-sizing: border-box;
}

@media (max-width: 1000px) {
	.sjr-track > .sjr-slide { flex-basis: calc((100% - 22px) / 2); }
}

@media (max-width: 680px) {
	.sjr-track > .sjr-slide { flex-basis: 100%; min-width: 0; }
}

/* The review text takes up the slack so footers line up across slides.
   min-height:0 is required or the clamped text refuses to shrink. */
.sjr-is-carousel .sjr-scroller {
	flex: 1 1 auto;
	min-height: 0;
}

.sjr-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 4px 0 40px;
}

.sjr-arrow {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: var(--sjr-card);
	color: var(--sjr-navy);
	border: 1px solid var(--sjr-line);
	border-radius: var(--sjr-pill);
	box-shadow: var(--sjr-shadow);
	padding: 0;
}

.sjr-arrow svg { width: 20px; height: 20px; display: block; }
.sjr-arrow:hover:not([disabled]) { background: var(--sjr-navy); color: #fff; border-color: var(--sjr-navy); }
.sjr-arrow[disabled] { opacity: .3; cursor: default; }

.sjr-dots { display: flex; align-items: center; gap: 8px; }

.sjr-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	cursor: pointer;
	border: 0;
	border-radius: 50%;
	background: var(--sjr-gold-empty);
}

.sjr-dot[aria-current="true"] { background: var(--sjr-gold); transform: scale(1.25); }
.sjr-dot:hover { background: var(--sjr-gold); }

/* ---------- card internals ---------- */
.sjr-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.sjr-norate,
.sjr-src {
	font-size: .72rem;
	color: var(--sjr-muted);
	border: 1px solid var(--sjr-line);
	border-radius: 99px;
	padding: 2px 9px;
	white-space: nowrap;
}

.sjr-liked {
	margin: 0 0 14px;
	font-size: .88rem;
	color: var(--sjr-muted);
	padding-left: 12px;
	border-left: 2px solid var(--sjr-gold);
}

.sjr-liked b { color: var(--sjr-text); font-weight: 600; }

.sjr-body { font-size: .97rem; }
.sjr-body p { margin: 0 0 .8em; }
.sjr-body p:last-child { margin-bottom: 0; }

/* Long reviews are clamped, with a toggle added by script. Without
   JavaScript the clamp class is never applied, so nothing is hidden.
   A max-height clamp is used rather than -webkit-line-clamp: the latter
   needs display:-webkit-box, which does not survive being nested inside
   a flex column. */
.sjr-body.is-clamped {
	max-height: 15.5em;
	overflow: hidden;
	position: relative;
}

.sjr-body.is-clamped::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.4em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--sjr-card));
	pointer-events: none;
}

.sjr-readmore {
	font: inherit;
	font-size: .84rem;
	font-weight: 600;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 8px 0 0;
	color: var(--sjr-navy);
	text-decoration: underline;
}

.sjr-response {
	margin: 18px 0 0;
	background: var(--sjr-page);
	border-radius: 8px;
	padding: 15px 17px;
	font-size: .9rem;
	color: var(--sjr-muted);
}

.sjr-response p { margin: 0 0 .7em; }
.sjr-response p:last-child { margin-bottom: 0; }

.sjr-response-head {
	font-size: .76rem;
	font-weight: 700;
	color: var(--sjr-navy);
	margin-bottom: 7px;
}

.sjr-foot {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--sjr-line);
}

.sjr-is-grid .sjr-foot { margin-top: auto; }

.sjr-name { font-weight: 600; font-size: .95rem; color: var(--sjr-text); }
.sjr-meta { font-size: .8rem; color: var(--sjr-muted); margin-top: 2px; }

.sjr-empty { text-align: center; color: var(--sjr-muted); padding: 50px 20px; }
.sjr-more-wrap { text-align: center; margin-bottom: 40px; }

@media (prefers-reduced-motion: reduce) {
	.sjr-track { scroll-behavior: auto; }
	.sjr-dot[aria-current="true"] { transform: none; }
}

/* ---------- forms ---------- */
.sjr-form {
	max-width: 660px;
	margin: 0 auto;
	background: var(--sjr-card);
	border-radius: var(--sjr-radius);
	box-shadow: var(--sjr-shadow);
	padding: 34px 36px;
}

@media (max-width: 560px) {
	.sjr-form { padding: 26px 22px; }
}

.sjr-form-title {
	font-family: ABeeZee, Inter, sans-serif;
	font-weight: 700;
	color: var(--sjr-navy);
	font-size: 22px;
	margin: 0 0 8px;
}

.sjr-lede { color: var(--sjr-muted); font-size: .9rem; margin: 0 0 24px; }

.sjr-field { margin: 0 0 19px; }

.sjr-form label,
.sjr-form legend {
	display: block;
	font-size: .87rem;
	font-weight: 600;
	margin-bottom: 7px;
	color: var(--sjr-text);
}

.sjr-hint {
	display: block;
	font-size: .79rem;
	color: var(--sjr-muted);
	font-weight: 400;
	margin-top: 5px;
}

.sjr-form input[type="text"],
.sjr-form input[type="email"],
.sjr-form textarea,
.sjr-form select {
	font: inherit;
	width: 100%;
	background: #fff;
	color: var(--sjr-text);
	border: 1px solid var(--sjr-line);
	border-radius: 6px;
	padding: 11px 13px;
}

.sjr-form textarea { resize: vertical; }

.sjr-form input:focus,
.sjr-form textarea:focus,
.sjr-form select:focus {
	border-color: var(--sjr-navy);
	outline: none;
	box-shadow: 0 0 0 3px rgba(23, 46, 75, .09);
}

.sjr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 560px) {
	.sjr-row { grid-template-columns: 1fr; }
}

.sjr-rating { border: 0; padding: 0; margin: 0 0 22px; }

.sjr-picker {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 5px;
}

.sjr-picker input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sjr-picker label {
	margin: 0;
	cursor: pointer;
	width: 32px;
	height: 32px;
	background-color: var(--sjr-gold-empty);
	-webkit-mask: var(--sjr-star-mask) center / contain no-repeat;
	mask: var(--sjr-star-mask) center / contain no-repeat;
}

.sjr-picker input:checked ~ label,
.sjr-picker label:hover,
.sjr-picker label:hover ~ label { background-color: var(--sjr-gold); }

.sjr-picker input:focus-visible + label { outline: 2px solid var(--sjr-navy); outline-offset: 3px; }

.sjr-say { font-size: .85rem; color: var(--sjr-muted); margin-top: 9px; min-height: 1.3em; }

.sjr-btn {
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	background: var(--sjr-navy);
	color: #fff;
	border: 1px solid var(--sjr-navy);
	border-radius: var(--sjr-pill);
	padding: 12px 24px;
}

.sjr-btn:hover { opacity: .9; }
.sjr-btn[disabled] { opacity: .45; cursor: not-allowed; }
.sjr-btn.sjr-ghost { background: transparent; color: var(--sjr-navy); box-shadow: none; }

.sjr-msg {
	margin-top: 16px;
	font-size: .9rem;
	padding: 12px 15px;
	border-radius: 6px;
}

.sjr-msg:empty { display: none; }
.sjr-msg.is-ok { background: rgba(41, 196, 169, .14); color: var(--sjr-navy); }
.sjr-msg.is-bad { background: rgba(210, 154, 38, .18); color: var(--sjr-text); }

/* Honeypot: hidden from people, reachable by bots. */
.sjr-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

/* ---------------------------------------------------------------
   Containment.
   These components sit inside a Divi Text module, which applies the
   module's own typography, alignment and list styling to everything
   underneath it. The homepage centres most text and themes commonly
   add bullets to any ul, so pin the things that must not inherit.
   --------------------------------------------------------------- */

.sjr,
.sjr p,
.sjr li,
.sjr label,
.sjr legend,
.sjr small,
.sjr span,
.sjr div,
.sjr input,
.sjr textarea,
.sjr select,
.sjr button {
	font-family: Inter, -apple-system, "Segoe UI", sans-serif;
}

.sjr-card,
.sjr-form,
.sjr-panel:not(.sjr-score) {
	text-align: left;
}

.sjr-grid,
.sjr-track,
.sjr-slide {
	list-style: none !important;
	padding-left: 0;
	margin-left: 0;
	text-indent: 0;
}

.sjr-slide::before,
.sjr-slide::marker {
	content: none;
}

.sjr-track { padding: 6px 6px 20px; }

.sjr-body p,
.sjr-response p {
	font-size: inherit;
	line-height: 1.6;
	padding: 0;
}

.sjr-body p { color: var(--sjr-text); }

.sjr-form-title,
.sjr-big,
.sjr-kpi .sjr-v {
	font-family: ABeeZee, Inter, sans-serif !important;
}

.sjr-btn,
.sjr-chip { text-transform: none; letter-spacing: normal; }

.sjr a { text-decoration: underline; }