/**
 * Block: BD Rating Summary (COD) — .bdr15
 *
 * Reads: --gap --title-size --score-size --star-size --count-size --row-size
 *        --bar-height --bar-radius --label-w --score-pct (inline, per block)
 *        --title-color --score-color --star-color --star-empty --count-color
 *        --row-color --track-color --fill-color --panel-bg --panel-line
 *        --badge-bg --badge-color
 * Derives: --score-fs (the score size capped against the viewport, set on
 *        .bdr15-s and reused by the medallion ring)
 * Root classes: is-design-{split|card|soft|outline|dark|gradient|medallion|banner|minimal}
 *               is-layout-{side|stack} is-boxed/no-boxed is-text-align-*
 *               is-bar-style-{thin|thick|segments|striped|gradient}
 *               is-show-bars/no-show-bars
 * Mobile-first: phones first, then 768px, then 1024px.
 */

/* ---------------------------------------------------------------- shell */
.espt-block-bd-rating-summary .bdr15 {
	color: var(--bd-ink);
	min-width: 0;
	overflow-wrap: anywhere;
	position: relative;
}

.espt-block-bd-rating-summary .espt-block-note {
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
}

/* ----------------------------------------------------------------- head */
.espt-block-bd-rating-summary .bdr15 .bdr15-head {
	margin: 0 0 14px;
	min-width: 0;
}

.espt-block-bd-rating-summary .bdr15 .bdr15-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 18px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
}

.espt-block-bd-rating-summary .bdr15 .bdr15-sub {
	color: var(--count-color, var(--bd-muted));
	font-size: max(12px, calc(var(--count-size, 13px) + 1px));
	margin: 5px 0 0;
}

.espt-block-bd-rating-summary.is-text-align-center .bdr15-head { text-align: center; }
.espt-block-bd-rating-summary.is-text-align-right .bdr15-head { text-align: right; }
.espt-block-bd-rating-summary.is-text-align-left .bdr15-head { text-align: left; }

/* ----------------------------------------------------------------- body */
.espt-block-bd-rating-summary .bdr15-body {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--gap, 20px);
	min-width: 0;
}

/* ----------------------------------------------------------- score block */
/* --score-fs caps the typed score size against the viewport, so a 96px score
   plus a maxed-out box padding still cannot break out of a 320px column. */
.espt-block-bd-rating-summary .bdr15-s {
	--score-fs: min(var(--score-size, 38px), 18vw);
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 5px;
	max-width: 100%;
	min-width: 0;
	text-align: center;
}

.espt-block-bd-rating-summary .bdr15-ring,
.espt-block-bd-rating-summary .bdr15-ring-in {
	display: contents;
}

.espt-block-bd-rating-summary .bdr15-score {
	align-items: baseline;
	color: var(--score-color, var(--bd-primary-dark));
	display: flex;
	font-size: var(--score-fs, var(--score-size, 38px));
	font-weight: 800;
	gap: 1px;
	justify-content: center;
	letter-spacing: -0.01em;
	line-height: 1;
	min-width: 0;
}

.espt-block-bd-rating-summary .bdr15-out {
	color: var(--count-color, var(--bd-muted));
	font-size: 0.4em;
	font-weight: 700;
	opacity: 0.85;
}

.espt-block-bd-rating-summary .bdr15-count {
	color: var(--count-color, var(--bd-muted));
	font-size: var(--count-size, 13px);
	line-height: 1.4;
	min-width: 0;
}

.espt-block-bd-rating-summary .bdr15-badge {
	align-items: center;
	background: var(--badge-bg, var(--bd-soft));
	border-radius: 99px;
	color: var(--badge-color, var(--bd-primary-dark));
	display: inline-flex;
	font-size: max(11px, calc(var(--count-size, 13px) - 1px));
	font-weight: 700;
	gap: 5px;
	line-height: 1.3;
	margin-top: 3px;
	max-width: 100%;
	padding: 4px 11px;
}

.espt-block-bd-rating-summary .bdr15-bi {
	font-size: 1.05em;
}

/* ------------------------------------------------------------- star row */
.espt-block-bd-rating-summary .bdr15-st {
	display: inline-block;
	font-size: min(var(--star-size, 16px), 7vw);
	letter-spacing: 2px;
	line-height: 1;
	max-width: 100%;
	position: relative;
	white-space: nowrap;
}

/* The trailing letter-spacing after the 5th star would otherwise widen the
   track by 2px and push the fill percentage off by a fifth of a star. */
.espt-block-bd-rating-summary .bdr15-st-e {
	color: var(--star-empty, var(--bd-line));
	display: block;
	margin-right: -2px;
}

.espt-block-bd-rating-summary .bdr15-st-f {
	color: var(--star-color, var(--bd-accent));
	display: block;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
}

.espt-block-bd-rating-summary .bdr15-st-txt {
	color: var(--star-color, var(--bd-accent));
}

/* ----------------------------------------------------------------- bars */
.espt-block-bd-rating-summary .bdr15-b {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	width: 100%;
}

.espt-block-bd-rating-summary .bdr15-l {
	align-items: center;
	color: var(--row-color, var(--bd-muted));
	display: flex;
	font-size: var(--row-size, 13px);
	gap: 9px;
	line-height: 1.4;
	min-width: 0;
}

/* min-width, not width: a longer label ("৫ তারা") widens the column and the
   track gives way, instead of the text spilling over the bar. */
.espt-block-bd-rating-summary .bdr15-lb {
	flex: 0 0 auto;
	min-width: var(--label-w, 30px);
	white-space: nowrap;
}

.espt-block-bd-rating-summary .bdr15-tr {
	background: var(--track-color, var(--bd-line));
	border-radius: var(--bar-radius, 99px);
	display: block;
	flex: 1 1 auto;
	height: var(--bar-height, 8px);
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.espt-block-bd-rating-summary .bdr15-fl {
	background: var(--fill-color, var(--bd-accent));
	border-radius: inherit;
	display: block;
	height: 100%;
	max-width: 100%;
	transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	width: 0;
}

.espt-block-bd-rating-summary .bdr15-ct {
	flex: 0 0 auto;
	min-width: 34px;
	text-align: right;
	white-space: nowrap;
}

/* bar styles */
.espt-block-bd-rating-summary.is-bar-style-thin .bdr15-tr {
	height: max(3px, calc(var(--bar-height, 8px) * 0.55));
}

/* The five gaps are punched out of the track with a mask rather than painted
   over with a matching colour, so segments read correctly on a white card, a
   dark panel and a gradient banner alike. */
.espt-block-bd-rating-summary.is-bar-style-segments .bdr15-tr {
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 4px), transparent calc(20% - 4px) 20%);
	border-radius: min(var(--bar-radius, 99px), 5px);
	mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 4px), transparent calc(20% - 4px) 20%);
}

.espt-block-bd-rating-summary.is-bar-style-segments .bdr15-fl {
	border-radius: 0;
}

/* Light AND dark bands, so the stripes stay visible whether the fill is the
   dark accent colour or the white one the banner design uses. */
.espt-block-bd-rating-summary.is-bar-style-striped .bdr15-fl {
	animation: espt-bdr15-stripe 1.1s linear infinite;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.34) 0 6px,
		rgba(0, 0, 0, 0.09) 6px 13px
	);
	background-size: 26px 26px;
}

@keyframes espt-bdr15-stripe {
	to { background-position: 26px 0; }
}

.espt-block-bd-rating-summary.is-bar-style-gradient .bdr15-fl {
	background: linear-gradient(90deg, var(--bd-primary), var(--fill-color, var(--bd-accent)));
	box-shadow: 0 0 10px -2px var(--fill-color, var(--bd-accent));
}

/* ----------------------------------------------------------------- foot */
.espt-block-bd-rating-summary .bdr15-foot {
	align-items: center;
	border-top: 1px solid var(--panel-line, var(--bd-line));
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	justify-content: space-between;
	margin-top: 14px;
	min-width: 0;
	padding-top: 11px;
}

.espt-block-bd-rating-summary .bdr15-note {
	color: var(--bd-muted);
	flex: 1 1 180px;
	font-size: max(11px, calc(var(--count-size, 13px) - 1px));
	min-width: 0;
}

.espt-block-bd-rating-summary .bdr15-link {
	align-items: center;
	color: var(--bd-primary);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: max(12px, var(--count-size, 13px));
	font-weight: 700;
	gap: 5px;
	text-decoration: none;
	transition: gap 0.2s ease, color 0.2s ease;
}

.espt-block-bd-rating-summary .bdr15-link:hover,
.espt-block-bd-rating-summary .bdr15-link:focus-visible {
	color: var(--bd-primary-dark);
	gap: 9px;
}

/* ================================================================ designs */

/* --- card: a rule between the score and the bars --- */
.espt-block-bd-rating-summary.is-design-card .bdr15-b {
	border-top: 1px solid var(--panel-line, var(--bd-line));
	padding-top: var(--gap, 20px);
}

/* --- soft: tinted score panel --- */
.espt-block-bd-rating-summary.is-design-soft .bdr15-s {
	background: var(--panel-bg, var(--bd-soft));
	border: 1px solid var(--panel-line, var(--bd-soft-line));
	border-radius: 14px;
	padding: 14px 18px;
	width: 100%;
}

.espt-block-bd-rating-summary.is-design-soft .bdr15-badge {
	background: var(--badge-bg, var(--bd-box-bg));
}

/* --- outline --- */
.espt-block-bd-rating-summary.is-design-outline .bdr15 {
	background: var(--panel-bg, transparent);
	border: 2px solid var(--panel-line, var(--bd-primary));
}

.espt-block-bd-rating-summary.is-design-outline.no-boxed .bdr15 {
	border-radius: var(--bd-radius);
	padding: var(--bd-pad);
}

/* --- dark --- */
.espt-block-bd-rating-summary.is-design-dark .bdr15 {
	background: var(--panel-bg, var(--bd-deep));
	border-color: transparent;
	color: #fff;
}

.espt-block-bd-rating-summary.is-design-dark.no-boxed .bdr15 {
	border-radius: var(--bd-radius);
	padding: var(--bd-pad);
}

.espt-block-bd-rating-summary.is-design-dark .bdr15-title { color: var(--title-color, #fff); }
.espt-block-bd-rating-summary.is-design-dark .bdr15-score { color: var(--score-color, #fff); }
.espt-block-bd-rating-summary.is-design-dark .bdr15-count,
.espt-block-bd-rating-summary.is-design-dark .bdr15-sub,
.espt-block-bd-rating-summary.is-design-dark .bdr15-out { color: var(--count-color, rgba(255, 255, 255, 0.76)); }
.espt-block-bd-rating-summary.is-design-dark .bdr15-l { color: var(--row-color, rgba(255, 255, 255, 0.76)); }
.espt-block-bd-rating-summary.is-design-dark .bdr15-tr { background: var(--track-color, rgba(255, 255, 255, 0.16)); }
.espt-block-bd-rating-summary.is-design-dark .bdr15-st-e { color: var(--star-empty, rgba(255, 255, 255, 0.22)); }
.espt-block-bd-rating-summary.is-design-dark .bdr15-badge {
	background: var(--badge-bg, rgba(255, 255, 255, 0.12));
	color: var(--badge-color, #fff);
}
.espt-block-bd-rating-summary.is-design-dark .bdr15-foot { border-top-color: var(--panel-line, rgba(255, 255, 255, 0.16)); }
.espt-block-bd-rating-summary.is-design-dark .bdr15-note { color: rgba(255, 255, 255, 0.7); }
.espt-block-bd-rating-summary.is-design-dark .bdr15-link { color: var(--bd-accent); }

/* --- gradient: coloured score block --- */
.espt-block-bd-rating-summary.is-design-gradient .bdr15-s {
	background: linear-gradient(140deg, var(--panel-bg, var(--bd-primary)), var(--bd-primary-dark));
	border-radius: 16px;
	color: #fff;
	padding: 16px 20px;
	width: 100%;
}

.espt-block-bd-rating-summary.is-design-gradient .bdr15-score { color: var(--score-color, #fff); }
.espt-block-bd-rating-summary.is-design-gradient .bdr15-count,
.espt-block-bd-rating-summary.is-design-gradient .bdr15-out { color: var(--count-color, rgba(255, 255, 255, 0.85)); }
.espt-block-bd-rating-summary.is-design-gradient .bdr15-st-e { color: var(--star-empty, rgba(255, 255, 255, 0.3)); }
.espt-block-bd-rating-summary.is-design-gradient .bdr15-badge {
	background: var(--badge-bg, rgba(255, 255, 255, 0.16));
	color: var(--badge-color, #fff);
}

/* --- medallion: score inside a progress ring --- */
.espt-block-bd-rating-summary.is-design-medallion .bdr15-ring {
	background: conic-gradient(
		var(--fill-color, var(--bd-accent)) var(--score-pct, 80%),
		var(--track-color, var(--bd-line)) 0
	);
	border-radius: 50%;
	display: block;
	flex: 0 0 auto;
	height: calc(var(--score-fs, var(--score-size, 38px)) * 2.4);
	max-width: 100%;
	padding: 7px;
	width: calc(var(--score-fs, var(--score-size, 38px)) * 2.4);
}

.espt-block-bd-rating-summary.is-design-medallion .bdr15-ring-in {
	align-items: center;
	background: var(--panel-bg, var(--bd-box-bg));
	border-radius: 50%;
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 6%;
	width: 100%;
}

/* Small enough that "৪.৮/৫" still clears the curve of the inner circle. */
.espt-block-bd-rating-summary.is-design-medallion .bdr15-score {
	font-size: calc(var(--score-fs, var(--score-size, 38px)) * 0.62);
	white-space: nowrap;
}

/* --- banner: one solid coloured strip --- */
.espt-block-bd-rating-summary.is-design-banner .bdr15 {
	background: linear-gradient(135deg, var(--panel-bg, var(--bd-primary)), var(--bd-primary-dark));
	border-color: transparent;
	color: #fff;
}

.espt-block-bd-rating-summary.is-design-banner.no-boxed .bdr15 {
	border-radius: var(--bd-radius);
	padding: var(--bd-pad);
}

.espt-block-bd-rating-summary.is-design-banner .bdr15-title { color: var(--title-color, #fff); }
.espt-block-bd-rating-summary.is-design-banner .bdr15-score { color: var(--score-color, #fff); }
.espt-block-bd-rating-summary.is-design-banner .bdr15-count,
.espt-block-bd-rating-summary.is-design-banner .bdr15-sub,
.espt-block-bd-rating-summary.is-design-banner .bdr15-out { color: var(--count-color, rgba(255, 255, 255, 0.85)); }
.espt-block-bd-rating-summary.is-design-banner .bdr15-l { color: var(--row-color, rgba(255, 255, 255, 0.85)); }
.espt-block-bd-rating-summary.is-design-banner .bdr15-tr { background: var(--track-color, rgba(255, 255, 255, 0.22)); }
/* background-color, not the shorthand: the shorthand would wipe out the
   background-image the striped / gradient bar styles paint on the fill. */
.espt-block-bd-rating-summary.is-design-banner .bdr15-fl { background-color: var(--fill-color, #fff); }
.espt-block-bd-rating-summary.is-design-banner .bdr15-st-e { color: var(--star-empty, rgba(255, 255, 255, 0.3)); }
.espt-block-bd-rating-summary.is-design-banner .bdr15-badge {
	background: var(--badge-bg, rgba(255, 255, 255, 0.18));
	color: var(--badge-color, #fff);
}
.espt-block-bd-rating-summary.is-design-banner .bdr15-foot { border-top-color: var(--panel-line, rgba(255, 255, 255, 0.24)); }
.espt-block-bd-rating-summary.is-design-banner .bdr15-note { color: rgba(255, 255, 255, 0.8); }
.espt-block-bd-rating-summary.is-design-banner .bdr15-link { color: #fff; }

/* --- minimal: strip the box completely --- */
.espt-block-bd-rating-summary.is-design-minimal .bdr15 {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.espt-block-bd-rating-summary.is-design-minimal .bdr15-b {
	border-top: 0;
}

/* ------------------------------------------------------- stacked layout */
.espt-block-bd-rating-summary.is-layout-stack .bdr15-s {
	width: 100%;
}

.espt-block-bd-rating-summary.is-layout-stack.is-text-align-left .bdr15-s {
	align-items: flex-start;
	align-self: flex-start;
	text-align: left;
}

.espt-block-bd-rating-summary.is-layout-stack.is-text-align-right .bdr15-s {
	align-items: flex-end;
	align-self: flex-end;
	text-align: right;
}

/* --------------------------------------------------- score without bars */
/* With the bars switched off the score is the only thing in the row, so it
   follows the heading's alignment instead of sitting centred by default. */
.espt-block-bd-rating-summary.no-show-bars.is-text-align-left .bdr15-s {
	align-items: flex-start;
	text-align: left;
}

.espt-block-bd-rating-summary.no-show-bars.is-text-align-right .bdr15-s {
	align-items: flex-end;
	text-align: right;
}

/* ================================================================ tablet */
@media (min-width: 768px) {

	.espt-block-bd-rating-summary.is-layout-side .bdr15-body {
		align-items: center;
		flex-direction: row;
	}

	.espt-block-bd-rating-summary.is-layout-side .bdr15-s {
		min-width: 130px;
		width: auto;
	}

	.espt-block-bd-rating-summary.is-layout-side.is-design-soft .bdr15-s,
	.espt-block-bd-rating-summary.is-layout-side.is-design-gradient .bdr15-s {
		min-width: 170px;
	}

	/* Bars hidden (or every row emptied): nothing sits beside the score, so
	   it fills the row instead of hugging the left edge of the card. */
	.espt-block-bd-rating-summary.is-layout-side .bdr15-s:only-child {
		width: 100%;
	}

	.espt-block-bd-rating-summary.is-layout-side.is-design-card .bdr15-b {
		border-left: 1px solid var(--panel-line, var(--bd-line));
		border-top: 0;
		padding: 0 0 0 var(--gap, 20px);
	}

	.espt-block-bd-rating-summary .bdr15-l {
		gap: 11px;
	}

	.espt-block-bd-rating-summary .bdr15-ct {
		min-width: 40px;
	}
}

/* =============================================================== desktop */
@media (min-width: 1024px) {

	.espt-block-bd-rating-summary .bdr15-b {
		gap: 7px;
	}

	.espt-block-bd-rating-summary.is-layout-side .bdr15-s {
		min-width: 150px;
	}
}

/* ========================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {

	.espt-block-bd-rating-summary .bdr15-fl {
		animation: none;
		transition: none;
	}

	.espt-block-bd-rating-summary .bdr15-link {
		transition: none;
	}
}