/* ==========================================================================
   BDL Reviews — মক্কেলের রিভিউ (প্ল্যান §১৯)

   ⚠️ এই ফাইলে **শুধু নতুন ক্লাস**। রিভিউয়ের অংশটি প্রোফাইলের বিদ্যমান
   `.bdl-sec`, `.bdl-badge`, `.bdl-dim`, `.bdl-label`, `.bdl-input`,
   `.bdl-btn`, `.bdl-hint` ক্লাসই ব্যবহার করে — কারণ রিভিউয়ের অংশ
   প্রোফাইলের বাকি অংশের মতোই দেখতে হওয়া উচিত।

   ⚠️⚠️ এই ফাইলটি পাঠানোই হয় **শুধু সুবিধা চালু থাকলে**
   (`BDL_Plugin::assets()`), কারণ §৬৭ এর সুইচ বন্ধ থাকলে এই
   মার্কআপের একটিও ছাপা হয় না।

   নির্ভরতা: `bdl-profiles.css` (CSS ভেরিয়েবলগুলো সেখানে)।
   ========================================================================== */

/* --------------------------------------------------------------------------
   প্রোফাইলের রিভিউ-অংশ: গড় ও ভাঙন
   -------------------------------------------------------------------------- */

.bdl-rv-top {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	align-items: center;
	padding: 0 0 1.2rem;
	margin: 0 0 1rem;
	border-bottom: 1px solid var(--bdl-line, #e3e6ea);
}

.bdl-rv-avg {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 7rem;
}

.bdl-rv-avg strong {
	font-size: 2.4rem;
	line-height: 1;
	font-weight: 700;
}

/* ⚠️ তারাগুলো ইউনিকোড অক্ষর (★☆), ছবি নয় — তাই রঙটি `color` দিয়েই আসে
   আর কপি করলেও বোঝা যায়। */
.bdl-rv-stars {
	color: #d98400;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.bdl-rv-bars {
	flex: 1 1 14rem;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}

.bdl-rv-bars li {
	display: grid;
	/* সংখ্যা · বার · গণনা — তিনটি কলাম, বারটি যা জায়গা পায় নেয়। */
	grid-template-columns: 1.4rem 1fr 2.4rem;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.86rem;
}

.bdl-rv-bar {
	display: block;
	height: 0.5rem;
	border-radius: 0.25rem;
	background: var(--bdl-line, #e3e6ea);
	overflow: hidden;
}

.bdl-rv-bar > span {
	display: block;
	height: 100%;
	background: #d98400;
}

.bdl-rv-bar-c {
	text-align: right;
	color: var(--bdl-dim, #5a6472);
}

/* --------------------------------------------------------------------------
   রিভিউয়ের তালিকা
   -------------------------------------------------------------------------- */

.bdl-rv-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.2rem;
}

.bdl-rv-item {
	padding: 0 0 1.2rem;
	border-bottom: 1px solid var(--bdl-line, #e3e6ea);
}

.bdl-rv-list > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bdl-rv-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.4rem;
	font-size: 0.9rem;
}

.bdl-rv-title {
	margin: 0 0 0.3rem;
	font-size: 1.02rem;
	font-weight: 600;
}

.bdl-rv-body {
	margin: 0 0 0.4rem;
	/* ⚠️ `pre-wrap` নয় — লেখাটি `esc_html()` দিয়ে যায়, আর মক্কেলের
	   দেওয়া নতুন লাইনগুলো রাখা হলে কেউ ফাঁকা লাইন দিয়ে পাতা লম্বা
	   করে ফেলতে পারতেন। */
	white-space: normal;
}

.bdl-rv-meta {
	margin: 0;
	font-size: 0.84rem;
}

/* আইনজীবীর উত্তর — মক্কেলের লেখা থেকে স্পষ্ট আলাদা দেখাতে হবে, নইলে
   পাঠক দুটোকে একই ব্যক্তির কথা ভাবতে পারেন। */
.bdl-rv-reply {
	margin: 0.6rem 0 0;
	padding: 0.6rem 0.8rem;
	border-inline-start: 3px solid var(--bdl-accent, #d4a537);
	background: var(--bdl-soft, #faf7f0);
	border-radius: 0 0.3rem 0.3rem 0;
}

.bdl-rv-reply strong {
	display: block;
	font-size: 0.86rem;
	margin: 0 0 0.2rem;
}

.bdl-rv-reply p {
	margin: 0;
	font-size: 0.94rem;
}

.bdl-note-sm {
	margin: 1rem 0 0;
	font-size: 0.84rem;
	color: var(--bdl-dim, #5a6472);
}

/* --------------------------------------------------------------------------
   মক্কেলের পাতায় রিভিউয়ের ফর্ম
   -------------------------------------------------------------------------- */

.bdl-match-review {
	flex-basis: 100%;
	margin: 0.5rem 0 0;
}

.bdl-match-review > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--bdl-dim, #5a6472);
}

.bdl-match-review[open] > summary {
	margin-bottom: 0.6rem;
}

.bdl-match-review.is-done {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

/* ⚠️ রেডিও বোতাম ধরেই রাখা হয়েছে, তারার ছবিতে বদলানো হয়নি —
   JavaScript ছাড়াও কাজ করে আর স্ক্রিন-রিডারে পড়া যায়। শুধু দেখতে
   গুছিয়ে দেওয়া হয়েছে। */
.bdl-stars-pick {
	border: 0;
	margin: 0 0 0.6rem;
	padding: 0;
	display: grid;
	gap: 0.2rem;
}

.bdl-stars-pick legend {
	padding: 0;
	margin: 0 0 0.3rem;
}

.bdl-star-opt {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.92rem;
	cursor: pointer;
}

/* ⚠️ `flex-direction: row` স্পষ্ট করে লেখা — ধাপ ২-এ থিমের একটি
   নিয়ম চেকবক্সগুলোকে খাড়া করে দিয়েছিল, আর বাগটি স্ক্রিনশটে ধরা
   পড়েছিল। একই ফাঁদে যেন আবার না পড়ি। */
.bdl-star-opt input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
}

@media (max-width: 480px) {
	.bdl-rv-avg strong {
		font-size: 2rem;
	}

	.bdl-rv-top {
		gap: 1rem;
	}
}