/* The review box on a single post: score, verdict, pros, cons and the bars of
   the individual criteria. Colours and corners come from the theme tokens, so
   it follows the palette and the roundness chosen in the panel. */
.pls-review-box{
	position:relative;
	background:var(--pls-surface);
	border:1px solid var(--pls-border-soft);
	border-radius:var(--pls-radius);
	padding:28px 28px 26px;
	margin:32px 0;
	font-size:var(--pls-article-size, 15px);
	line-height:var(--pls-article-lh, 1.55);
	color:var(--pls-ink);
	overflow:hidden;
}
.pls-review-box::before{
	content:"";
	position:absolute;
	inset:0 0 auto 0;
	height:3px;
	background:linear-gradient(90deg,var(--pls-brand) 0%,var(--pls-brand-dark) 100%);
}
.pls-review-box__heading{
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.8px;
	margin:0 0 18px;
	color:var(--pls-mute);
}

/* ── Verdict header (score + best buy + descrizione) ──────────────── */
.pls-review-box__verdict{
	display:grid;
	grid-template-columns:auto 1fr;
	align-items:center;
	gap:22px;
	padding-bottom:22px;
	border-bottom:1px solid var(--pls-border-soft);
	margin-bottom:22px;
}
.pls-review-box__score{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:104px;
	height:104px;
	border-radius:50%;
	background:radial-gradient(circle at 30% 30%, var(--pls-brand) 0%, var(--pls-brand-dark) 100%);
	color:#fff;
	flex-shrink:0;
	box-shadow:0 8px 24px -10px var(--pls-brand);
}
.pls-review-box__score::after{
	content:"";
	position:absolute;
	inset:6px;
	border:1px solid rgba(255,255,255,.2);
	border-radius:50%;
	pointer-events:none;
}
.pls-review-box__score-value{
	font-size:34px;
	font-weight:800;
	line-height:1;
	letter-spacing:-.02em;
}
.pls-review-box__score-max{
	font-size:12px;
	font-weight:600;
	opacity:.85;
	margin-top:4px;
	letter-spacing:.4px;
}
.pls-review-box__verdict-body{
	min-width:0;
}
.pls-review-box__verdict-label{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:5px 12px;
	background:var(--pls-brand-soft, rgba(30,99,212,.1));
	color:var(--pls-brand);
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.6px;
	border-radius:calc(8px * var(--pls-r));
	margin-bottom:10px;
}
.pls-review-box__verdict-label::before{
	content:"";
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--pls-brand);
}
.pls-review-box__verdict-text{
	font-size:16px;
	color:var(--pls-ink2);
	margin:0;
	line-height:1.7;
}
.pls-review-box__verdict-text p{margin:0 0 8px}
.pls-review-box__verdict-text p:last-child{margin-bottom:0}

/* ── Pro/Contro ─────────────────────────────────────────────────── */
.pls-review-box__pros-cons{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
	padding-bottom:22px;
	border-bottom:1px solid var(--pls-border-soft);
	margin-bottom:22px;
}
.pls-review-box__pc-title{
	font-size:12px;
	font-weight:700;
	letter-spacing:.8px;
	text-transform:uppercase;
	margin:0 0 14px;
	color:var(--pls-mute);
	display:flex;
	align-items:center;
	gap:8px;
}
.pls-review-box__pc-title::before{
	content:"";
	width:18px;
	height:2px;
	background:currentColor;
	opacity:.4;
	border-radius:calc(1px * var(--pls-r));
}
.pls-review-box__pros ul,
.pls-review-box__cons ul{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.pls-review-box__pros li,
.pls-review-box__cons li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	font-size:14px;
	color:var(--pls-ink);
	line-height:1.45;
}
.pls-review-box__pros svg,
.pls-review-box__cons svg{
	/* The mark carries no fill attribute of its own, and an SVG with no fill is
	   drawn black: the tick and the cross were black discs with a faint tint
	   behind them, in both appearances. Painting them with the colour of the
	   element is what makes them the green and the red they are meant to be. */
	fill:currentColor;
	width:18px;
	height:18px;
	padding:3px;
	border-radius:50%;
	flex-shrink:0;
	margin-top:1px;
}
.pls-review-box__pros svg{
	color:#16a34a;
	background:rgba(22,163,74,.1);
}
.pls-review-box__cons svg{
	color:#dc2626;
	background:rgba(220,38,38,.1);
}

/* ── Criteri (barre) ────────────────────────────────────────────── */
.pls-review-box__criteria{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:14px;
}
.pls-review-box__criterion{margin:0;list-style:none}
.pls-review-box__criterion::marker{content:""}
.pls-review-box__criterion-row{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	margin-bottom:8px;
	gap:12px;
}
.pls-review-box__criterion-label{
	font-size:14px;
	font-weight:600;
	color:var(--pls-ink);
}
.pls-review-box__criterion-rating{
	font-size:14px;
	font-weight:800;
	color:var(--pls-brand);
	font-variant-numeric:tabular-nums;
	letter-spacing:-.01em;
}
.pls-review-box__bar{
	position:relative;
	height:8px;
	background:var(--pls-border-soft);
	border-radius:calc(999px * var(--pls-r));
	overflow:hidden;
}
.pls-review-box__bar-fill{
	height:100%;
	background:linear-gradient(90deg,var(--pls-brand) 0%,var(--pls-brand-dark) 100%);
	border-radius:calc(999px * var(--pls-r));
	transform-origin:left center;
	/* Revealed on load: scaleX from 0 to 1, with a slight overshoot.
	   the inline width is kept, because that is the final size. */
	animation:pls-bar-grow 1.4s cubic-bezier(.34,1.2,.64,1) .15s both;
}
@keyframes pls-bar-grow{
	from{transform:scaleX(0)}
	to{transform:scaleX(1)}
}
/* Stagger: each criterion starts slightly later */
.pls-review-box__criterion:nth-child(1) .pls-review-box__bar-fill{animation-delay:.15s}
.pls-review-box__criterion:nth-child(2) .pls-review-box__bar-fill{animation-delay:.25s}
.pls-review-box__criterion:nth-child(3) .pls-review-box__bar-fill{animation-delay:.35s}
.pls-review-box__criterion:nth-child(4) .pls-review-box__bar-fill{animation-delay:.45s}
.pls-review-box__criterion:nth-child(5) .pls-review-box__bar-fill{animation-delay:.55s}
.pls-review-box__criterion:nth-child(6) .pls-review-box__bar-fill{animation-delay:.65s}

/* ── Score: pop + glow al caricamento ─────────────────────────────── */
.pls-review-box__score{
	transform-origin:center;
	animation:pls-score-pop 1s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pls-score-pop{
	0%{transform:scale(.6);opacity:0}
	55%{transform:scale(1.08);opacity:1}
	100%{transform:scale(1);opacity:1}
}
.pls-review-box__score::before{
	content:"";
	position:absolute;
	inset:-10px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(30,99,212,.32) 0%, transparent 65%);
	pointer-events:none;
	z-index:-1;
	animation:pls-score-glow 1.4s ease .2s both;
}
@keyframes pls-score-glow{
	from{opacity:0;transform:scale(.5)}
	to{opacity:1;transform:scale(1)}
}

@media(prefers-reduced-motion:reduce){
	.pls-review-box__score,
	.pls-review-box__score::before,
	.pls-review-box__bar-fill{animation:none}
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media(max-width:640px){
	.pls-review-box{padding:22px 18px 20px;margin:24px 0;border-radius:var(--pls-radius-sm,calc(12px * var(--pls-r)))}
	.pls-review-box__verdict{
		grid-template-columns:1fr;
		justify-items:center;
		text-align:center;
		gap:16px;
	}
	.pls-review-box__verdict-body{text-align:center}
	.pls-review-box__pros-cons{grid-template-columns:1fr;gap:18px}
	.pls-review-box__score{width:92px;height:92px}
	.pls-review-box__score-value{font-size:30px}
}