/* ============================================================
   OG Rating System — theme-matched skin
   Built to sit visually inside the "sr-premium-container" /
   "iq-wrap" / "mob-promo-card" family already used on the post
   template: white rounded card, top shimmer bar, DM Sans
   headings, amber/gold star accent, green success state.
   ============================================================ */

.ogr-box{
	--ogr-ink:#1e2533;
	--ogr-ink2:#4a5568;
	--ogr-ink3:#8a93a6;
	--ogr-gold:#d97706;
	--ogr-gold2:#f59e0b;
	--ogr-green:#15803d;
	--ogr-green-bg:#dcfce7;
	--ogr-border:#eef0f4;
	position:relative;
	background:#fff;
	border:1px solid var(--ogr-border);
	border-radius:16px;
	overflow:hidden;
	max-width:560px;
	margin:1.8rem auto;
	box-shadow:0 4px 18px -6px rgba(30,37,51,0.10);
	box-sizing:border-box;
	font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.ogr-box *{box-sizing:border-box}

/* top shimmer strip — same gradient language as .iq-shimmer / .sb-shimmer */
.ogr-shimmer{
	height:4px;
	width:100%;
	background:linear-gradient(90deg,#16a34a,#1d4ed8,#7c3aed,#f59e0b,#16a34a);
	background-size:300% 100%;
	animation:ogr-shimmer-move 4s linear infinite;
}
@keyframes ogr-shimmer-move{
	0%{background-position:0% 0}
	100%{background-position:300% 0}
}

.ogr-inner{
	padding:1.6rem 1.4rem 1.5rem;
	text-align:center;
}

.ogr-icon-wrap{
	width:46px;
	height:46px;
	margin:0 auto 0.7rem;
	border-radius:50%;
	background:#fef3c7;
	border:1px solid #fcd34d;
	display:flex;
	align-items:center;
	justify-content:center;
}
.ogr-icon-wrap svg{
	width:22px;
	height:22px;
	fill:var(--ogr-gold);
	stroke:var(--ogr-gold);
}

.ogr-title{
	font-size:1.05rem;
	font-weight:700;
	color:var(--ogr-ink);
	margin:0 0 1rem;
	line-height:1.4;
}

.ogr-summary{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	flex-wrap:wrap;
	margin-bottom:1.2rem;
	transition:opacity .2s;
}
.ogr-summary.ogr-hidden{opacity:0;height:0;margin:0;overflow:hidden}
.ogr-avg{font-size:1.7rem;font-weight:800;color:var(--ogr-ink)}
.ogr-stars-display{color:var(--ogr-gold);font-size:1.15rem;letter-spacing:2px}
.ogr-count{font-size:0.8rem;color:var(--ogr-ink3);font-weight:600}

.ogr-input{
	display:flex;
	justify-content:center;
	gap:6px;
	margin-bottom:0.8rem;
}
.ogr-star{
	background:none;
	border:none;
	font-size:2.1rem;
	line-height:1;
	color:#e2e5ec;
	cursor:pointer;
	transition:transform .15s ease,color .15s ease;
	padding:2px 3px;
}
.ogr-star:hover:not(:disabled){
	transform:scale(1.15) rotate(-4deg);
	color:var(--ogr-gold2);
}
.ogr-star.ogr-active{color:var(--ogr-gold)}
.ogr-star:disabled{cursor:default}

.ogr-thanks{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	font-size:0.86rem;
	font-weight:700;
	color:var(--ogr-green);
	background:var(--ogr-green-bg);
	border:1px solid #86efac;
	border-radius:10px;
	padding:8px 12px;
	margin:0.4rem auto 0;
	max-width:340px;
}
.ogr-thanks svg{
	width:15px;
	height:15px;
	stroke:var(--ogr-green);
	fill:none;
	stroke-width:2.5;
	flex-shrink:0;
}

/* mobile tightening */
@media (max-width:480px){
	.ogr-inner{padding:1.3rem 1rem 1.2rem}
	.ogr-title{font-size:0.98rem}
	.ogr-avg{font-size:1.5rem}
	.ogr-star{font-size:1.85rem}
}