/* ==================================================================
   Veg Restaurant Directory — ফ্রন্টএন্ড স্টাইল (সব vw ইউনিটে)
   ------------------------------------------------------------------
   এই ফাইলের প্রায় প্রতিটা সাইজ var(--vrd-...) দিয়ে লেখা। এই ভ্যারিয়েবলের
   আসল মান আসে class-vrd-admin-settings.php থেকে (Admin Setting পেজ)।
   তাই ডিজাইন ছোট-বড়/দূরত্ব বদলাতে এই ফাইল না ছুঁয়ে সেটিংস পেজ থেকেই
   বেশিরভাগ কাজ করা যায়। var(...) এর ভিতরের দ্বিতীয় মানটা শুধু "ফলব্যাক"
   (ভ্যারিয়েবল না পাওয়া গেলে) — আসল কন্ট্রোল অ্যাডমিন প্যানেলেই।
   ⚠️ এই ফাইলে ইচ্ছাকৃতভাবে কোনো @media (max-width:700px) ব্লকে ফন্ট-সাইজ/
   স্পেসিং হার্ডকোড করা হয়নি — আগে এমন একটা হার্ডকোড থাকায় Admin Setting
   থেকে টাইটেল ফন্ট সাইজ বাড়ালেও মোবাইলে কোনো প্রভাব পড়ছিল না।
   ================================================================== */

.vrd-directory {
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	padding: 0; /* কন্টেইনারের গা থেকেই ডিজাইন শুরু হবে — কোনো ফাঁকা জায়গা নেই */
	font-family: inherit;
}
.vrd-directory * { box-sizing: border-box; }

/* ==== সার্চ রো: সার্চ বক্স (আইকনসহ) + ফিল্টার আইকন, একই লাইনে ==== */
.vrd-search-wrap {
	position: relative;
	margin-bottom: var(--vrd-banner-gap-top, 1.2vw);
}
.vrd-search-row {
	display: flex;
	align-items: stretch;
	gap: 0.8vw;
}
.vrd-search-dropdown[hidden] {
	display: none; /* [hidden] অ্যাট্রিবিউট + ক্লাস মিলিয়ে স্পেসিফিসিটি বেশি হওয়ায় এটাই জিতবে —
	                  আগে হালকা বক্স/লাইন সবসময় দেখা যাচ্ছিল কারণ display:flex রুলটা hidden-কে
	                  ওভাররাইড করে ফেলত। এখন hidden থাকলে সত্যিকারের অদৃশ্য হয়ে যাবে। */
}
.vrd-search-dropdown {
	position: absolute;
	top: calc(100% + 0.6vw);
	left: 0;
	right: 0;
	z-index: 500;
	max-height: 60vh;
	max-height: 60dvh; /* মোবাইলে কিবোর্ড খোলা থাকলে dvh আসল দৃশ্যমান উচ্চতা অনুযায়ী মাপে, vh নয় */
	overflow-y: auto;
	overscroll-behavior: contain; /* ড্রপডাউন স্ক্রল করার সময় পেছনের পেজ যেন স্ক্রল না হয়ে যায় */
	-webkit-overflow-scrolling: touch;
	background: rgba(255, 255, 255, 0.75); /* হালকা ঘোলাটে/frosted — ফিল্টার মোডালের ব্যাকড্রপের মতোই স্টাইল */
	backdrop-filter: blur(1vw);
	-webkit-backdrop-filter: blur(1vw);
	border-radius: var(--vrd-search-filter-radius, 1.2vw);
	box-shadow: 0 0.6vw 2vw rgba(20, 30, 60, 0.18);
	padding: 0.8vw;
	display: flex;
	flex-direction: column;
	gap: 0.6vw;
}
.vrd-search-dropdown .vrd-card {
	width: 100%;
	flex: 0 0 auto; /* প্রতিটা কার্ড নিজের স্বাভাবিক উচ্চতা রাখে, একটার উপর আরেকটা ওভারল্যাপ করে না */
	box-shadow: none;
}
.vrd-search-dropdown-empty { text-align: center; font-size: 0.9vw; color: #55617a; padding: 1.5vw 0; }
.vrd-search-box {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 0.6vw;
	padding: var(--vrd-search-filter-thickness, 0.9vw) 1.2vw;
	border-radius: var(--vrd-search-filter-radius, 1.2vw);
	border: 0.28vw solid #b7c0cf; /* আরও একটু মোটা ও গাঢ় করা হলো — আগের 0.18vw এখনও চিকন লাগছিল */
	background: #fff;
	box-shadow: 0 0.2vw 0.8vw rgba(20, 30, 60, 0.08); /* হালকা শ্যাডো — বর্ডারের বাইরে একটা নরম আভা */
}
.vrd-search-icon {
	width: var(--vrd-search-icon-size, 1.2vw);
	height: var(--vrd-search-icon-size, 1.2vw);
	flex-shrink: 0;
	color: #8a93a6;
}
/* ⚠️ appearance:none — অনেক মোবাইল ব্রাউজার/ওয়েবভিউ ইনপুট বক্সে নিজের একটা ডিফল্ট
   "বক্সের মতো" স্টাইল বসিয়ে দেয় (ভিতরে ছোট্ট একটা বর্ডার/শ্যাডো দেখা যায়) — এটা সেটা বন্ধ করে */
#vrd-search-input {
	flex: 1 1 auto;
	width: 100%;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	font-size: var(--vrd-search-font-size, 0.9vw);
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}
#vrd-search-input::-webkit-search-decoration,
#vrd-search-input::-webkit-search-cancel-button,
#vrd-search-input::-webkit-search-results-button,
#vrd-search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

/* ফিল্টার আইকন বক্স — width ও height দুটোই একটামাত্র ভ্যারিয়েবল (--vrd-filter-box-size)
   দিয়ে নিয়ন্ত্রিত, তাই সাইজ বদলালেও এটা কখনো চারকোনা/স্কয়ার থেকে আয়তক্ষেত্র হয়ে যাবে না */
.vrd-filter-icon-box {
	flex: 0 0 auto;
	width: var(--vrd-filter-box-size, 3.2vw);
	height: var(--vrd-filter-box-size, 3.2vw);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--vrd-search-filter-radius, 1.2vw);
	border: 0.28vw solid #b7c0cf;
	background: #fff;
	box-shadow: 0 0.2vw 0.8vw rgba(20, 30, 60, 0.08);
	cursor: pointer;
	color: #1b2a4a;
	padding: 0;
	text-decoration: none; /* <a> ট্যাগ হিসেবে ব্যবহার হলে (হার্ট আইকন) যেন আন্ডারলাইন না আসে */
}
.vrd-filter-icon {
	width: var(--vrd-filter-icon-size, 1.6vw);
	height: var(--vrd-filter-icon-size, 1.6vw);
	flex-shrink: 0;
	object-fit: contain; /* কাস্টম আইকন-ছবি ব্যবহার করলেও অনুপাত ঠিক থাকবে */
}

/* ==== হার্ট (ফেভারিট) আইকন — বক্সের ব্যাকগ্রাউন্ড/বর্ডার/সাইজ ফিল্টার আইকন বক্সের সাথেই শেয়ার্ড
   (vrd-filter-icon-box ক্লাস থেকে আসে, উপরে দেখুন) — এখানে শুধু ভিতরের আইকনের সাইজ আলাদা কন্ট্রোলে ==== */
.vrd-heart-icon {
	width: var(--vrd-heart-top-icon-size, 1.5vw);
	height: var(--vrd-heart-top-icon-size, 1.5vw);
	object-fit: contain;
}

/* ==== হরাইজন্টাল অটো-চেঞ্জিং ব্যানার — স্মুথ ক্রসফেড (opacity ট্রানজিশন) ==== */
.vrd-banner {
	position: relative;
	width: var(--vrd-banner-width, 100vw);
	max-width: 100%;
	height: var(--vrd-banner-height, 20vw);
	border-radius: var(--vrd-banner-radius, 1.5vw);
	overflow: hidden;
	margin-bottom: var(--vrd-banner-gap-bottom, 1.5vw);
	background: #e3e7ee;
}
.vrd-banner-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1s ease-in-out; /* একটা আস্তে মুছে যায়, আরেকটা আস্তে ভেসে ওঠে — কোনো slide/hard-cut নেই */
}
.vrd-banner-slide.active { opacity: 1; }

/* ==== ব্যানারের নিচে পেজিনেশন ডট — কোন ছবি এখন দেখাচ্ছে তা বোঝায়, একটিভ ডট বেশি উজ্জ্বল ==== */
.vrd-banner-dots {
	position: absolute;
	left: 50%;
	bottom: 1vw;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.6vw;
	z-index: 5;
}
.vrd-banner-dot {
	width: var(--vrd-banner-dot-size, 0.7vw);
	height: var(--vrd-banner-dot-size, 0.7vw);
	border-radius: 50%;
	background: var(--vrd-banner-dot-color, rgba(255,255,255,0.55));
	transition: background 0.2s ease, transform 0.2s ease;
}
.vrd-banner-dot.active {
	background: var(--vrd-banner-dot-active-color, #ffffff);
	transform: scale(1.2);
}

/* ==== সেকেন্ডারি ব্যানার/বিজ্ঞাপন বক্স — কোনো ফিক্সড উচ্চতা নেই, ছবি যতটা মোটা ঠিক ততটাই জায়গা নেয়
   (ছবি স্বাভাবিক অনুপাতে বসে) — শুধু কর্নার-রাউন্ড কন্ট্রোলযোগ্য ==== */
.vrd-secondary-banner {
	display: block;
	margin-top: var(--vrd-secondary-banner-gap-top, 1.2vw);
	margin-bottom: var(--vrd-secondary-banner-gap-bottom, 1.5vw);
}
.vrd-secondary-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vrd-secondary-banner-radius, 1.5vw);
}

/* ==== ক্যাটাগরি ট্যাব: Top / All / ভাত-তরকারি / ফাস্ট ফুড — ৪টা সমান-প্রস্থের বক্স,
   স্ক্রিনের/কন্টেইনারের একদম বাম কানা থেকে ডান কানা পর্যন্ত বিস্তৃত, নিজেদের মধ্যে সমান দূরত্বে ==== */
.vrd-tabs {
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: var(--vrd-tab-gap, 0.8vw);
	margin-bottom: var(--vrd-tab-bottom-gap, 1.5vw);
}
.vrd-tab {
	flex: 1 1 0;
	width: 0; /* flex:1 এর সাথে থাকলে ৪টা বক্স সবসময় সমান প্রস্থ হয় */
	height: var(--vrd-tab-height, 3.2vw);
	padding: 0 0.4vw;
	border-radius: var(--vrd-tab-radius, 2vw);
	border: 0.14vw solid var(--vrd-tab-border-color, #b7c0cf);
	background: var(--vrd-tab-inactive-bg, #ffffff);
	color: var(--vrd-tab-inactive-text, #10213f);
	font-size: var(--vrd-tab-font-size, 0.95vw);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vrd-tab.active {
	background: var(--vrd-tab-active-bg, #2fae4f);
	border-color: var(--vrd-tab-active-bg, #2fae4f);
	color: var(--vrd-tab-active-text, #ffffff);
}

/* ==== ব্লার-ব্যাকড্রপ ==== */
.vrd-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 20, 40, 0.35);
	backdrop-filter: blur(0.6vw);
	-webkit-backdrop-filter: blur(0.6vw);
	z-index: 999;
}

/* ==== মাঝখানে ফিল্টার মোডাল ==== */
.vrd-filter-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85vw;
	max-width: 90vw;
	background: #fff;
	border-radius: 2.2vw;
	padding: 5vw 5vw 4vw;
	z-index: 1000;
	box-shadow: 0 1.5vw 4vw rgba(10, 20, 40, 0.25);
}
.vrd-modal-step h4#vrd-modal-title {
	margin: 0 0 3vw;
	font-size: 4.2vw;
	color: #10213f;
	font-weight: 700;
	text-align: center;
}
.vrd-term-list { list-style: none; margin: 0 0 3vw; padding: 0; max-height: 45vw; overflow-y: auto; }
.vrd-term-list li {
	position: relative;
	padding: 3.2vw 4vw;
	border-radius: 2.5vw;
	cursor: pointer;
	font-size: 3.6vw;
	color: #10213f;
	background: #eef2f9;
	margin-bottom: 2.4vw;
	border: 0.3vw solid transparent;
	transition: background 0.15s, border-color 0.15s;
}
.vrd-term-list li:last-child { margin-bottom: 0; }
.vrd-term-list li.selected {
	background: #e9f0ff;
	border-color: #10213f;
	color: #10213f;
	font-weight: 700;
}
.vrd-term-list li.selected::after {
	content: "✓";
	position: absolute;
	right: 4vw;
	top: 50%;
	transform: translateY(-50%);
	color: #10213f;
	font-weight: 700;
}

/* Next ও Finish বাটনের পজিশন মার্কআপেই সোয়াপ করা আছে (দেখুন class-vrd-shortcode.php);
   এখানে শুধু flex-direction অনুযায়ী দৃশ্যমান ক্রম বজায় রাখা হচ্ছে */
.vrd-modal-actions { display: flex; gap: 2.4vw; }
.vrd-btn-ghost, .vrd-btn-solid, .vrd-btn-back {
	flex: 1;
	border: none;
	border-radius: 2.5vw;
	padding: 3.2vw 0;
	font-size: 3.6vw;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s;
}
.vrd-btn-solid { background: #10213f; color: #fff; }
.vrd-btn-ghost { background: #dfe6f3; color: #10213f; }
.vrd-btn-back { flex: 0 0 auto; padding: 3.2vw 4vw; background: #f0f3f8; color: #10213f; }

.vrd-btn-ghost:disabled, .vrd-btn-solid:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ==== গ্রিড ==== */
.vrd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--vrd-card-min-width, 26vw), 1fr));
	gap: var(--vrd-card-gap, 1.5vw);
}

/* ==== কার্ড ====
   বর্ডার স্পষ্ট রঙের, শ্যাডো সবসময় থাকে (হোভার ছাড়াই — মোবাইলে হোভার নেই বলে)।
   ছবির সাইজ এখন সম্পূর্ণ নির্দিষ্ট (flex:0 0 auto + fixed width/height), % বা auto-fit
   দিয়ে না — তাই ডিভাইস/কন্টেন্ট যাই হোক ছবি সবসময় একই মাপে দেখাবে, এলোমেলো হবে না।
   টাইটেল ও ঠিকানা ২ লাইনের বেশি হলে "..." (ellipsis) দিয়ে কেটে যায় — এতে প্রতিটা কার্ডের
   উচ্চতা সবসময় সমান থাকে, লেখা কখনো কার্ডের বাইরে চলে যায় না। */
.vrd-card {
	display: flex;
	align-items: stretch;
	gap: var(--vrd-card-image-gap, 1vw);
	text-decoration: none;
	color: inherit;
	border-radius: var(--vrd-card-radius, 1.2vw);
	overflow: hidden;
	border: 0.12vw solid #c9d2e0;
	background: #fff;
	padding: var(--vrd-card-padding, 0.8vw);
	box-shadow: 0 0.25vw 1vw rgba(20, 30, 60, 0.09);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vrd-card:hover, .vrd-card:active {
	transform: translateY(-0.3vw);
	box-shadow: 0 0.6vw 1.5vw rgba(20, 30, 60, 0.16);
}
.vrd-card-img {
	flex: 0 0 var(--vrd-card-image-width, 38vw);
	width: var(--vrd-card-image-width, 38vw);
	height: var(--vrd-card-image-height, 13vw);
	background-size: cover;
	background-position: center;
	background-color: #d9e0eb;
	border-radius: var(--vrd-image-radius, 1.2vw);
}
.vrd-card-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vrd-card-title {
	margin: 0 0 0.6vw;
	font-size: var(--vrd-title-size, 1.3vw);
	color: #1b2a4a;
	font-weight: 700;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* ২ লাইনের বেশি হলে "..." */
	overflow: hidden;
}
.vrd-card-address {
	margin: 0 0 0.4vw;
	font-size: var(--vrd-address-size, 0.9vw);
	color: #55617a;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* ২ লাইনের বেশি হলে "..." */
	overflow: hidden;
}
.vrd-card-hours {
	margin: 0 0 0.4vw;
	font-size: var(--vrd-hours-size, 0.85vw);
	color: #1b2a4a;
	display: flex;
	align-items: center;
	gap: 0.5vw;
	white-space: nowrap;
}
/* খোলা/বন্ধ স্ট্যাটাস ডট — সময়ের ঠিক পাশে ছোট্ট প্রফেশনাল রঙিন বৃত্ত (ইমোজি নয়, তাই সব ডিভাইসে একইরকম দেখাবে) */
.vrd-status-dot {
	display: inline-block;
	width: var(--vrd-status-dot-size, 0.6vw);
	height: var(--vrd-status-dot-size, 0.6vw);
	border-radius: 50%;
	flex-shrink: 0;
}
.vrd-status-dot.is-open { background: var(--vrd-status-open-color, #2fbf5c); }
.vrd-status-dot.is-closed { background: var(--vrd-status-closed-color, #d64545); }

/* সময়ের ঠিক পাশে সেই দেশের পতাকা — ছোট, লম্বালম্বি (পোর্ট্রেট) আয়তক্ষেত্র, কর্নার হালকা বাঁকানো
   (গোলাকার/বৃত্ত নয়) — কোন দেশ তা রেস্টুরেন্টের Country ট্যাক্সোনমি থেকেই বোঝা যায় */
.vrd-card-flag {
	width: var(--vrd-flag-width, 1.3vw);
	height: var(--vrd-flag-height, 1.7vw);
	border-radius: var(--vrd-flag-radius, 0.25vw);
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 0 0 0.07vw rgba(0,0,0,0.12);
}

.vrd-card-rating {
	margin: 0;
	font-size: var(--vrd-rating-size, 0.9vw);
	color: #b8860b;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.3vw;
	line-height: 1; /* ⚠️ এমোজি/সংখ্যা একসাথে থাকলে ডিফল্ট লাইন-হাইট আলাদা হওয়ায় লেখাটা উপরে "ভেসে" থাকত —
	                    সবকিছু line-height:1 করে এক লাইনে ঠিকঠাক মাঝ-বরাবর বসিয়ে দেওয়া হয়েছে */
}
.vrd-rating-star {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.vrd-rating-value { line-height: 1; }
.vrd-card-rating span,
.vrd-rating-count { color: #8a93a6; font-weight: 400; line-height: 1; }

/* কার্ডের ফেভারিট হার্ট আইকন — Instagram-এর মতো: ডিফল্টে শুধু খালি বর্ডার-আউটলাইন (কোনো
   ব্যাকগ্রাউন্ড/ভরাট রঙ নেই), ক্লিক করলে ভরাট লাল হয়ে যায় — রেটিং লাইনের একদম ডান পাশে */
.vrd-card-heart {
	margin-left: auto;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	color: #c7ccd6; /* ডিফল্ট: খালি আউটলাইনের রঙ */
	transition: color 0.15s ease, transform 0.15s ease;
}
.vrd-card-heart svg {
	width: var(--vrd-card-heart-size, 1.4vw);
	height: var(--vrd-card-heart-size, 1.4vw);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}
.vrd-card-heart:hover { transform: scale(1.1); }
.vrd-card-heart.is-favorited { color: #e0455c; } /* ফেভারিট হলে লাল */
.vrd-card-heart.is-favorited svg { fill: currentColor; } /* ...এবং পুরোপুরি ভরাট */

.vrd-no-results { text-align: center; font-size: 1vw; color: #55617a; padding: 3vw 0; }

/* ==== ট্যাব/সার্চ/ফিল্টার বদলানোর সময় গ্রিড রিফ্রেশ — হঠাৎ জায়গা বদলে যাওয়ার বদলে হালকা ফেড ইন/আউট ==== */
.vrd-grid-wrap { position: relative; }
.vrd-grid { transition: opacity 0.2s ease; }
.vrd-grid.vrd-fading { opacity: 0.35; }

/* নেটওয়ার্ক ধীরগতির কারণে রেজাল্ট আসতে দেরি হলে দেখানোর জন্য স্পিনার — দ্রুত রেসপন্সে
   ফ্ল্যাশ করে দেখা যাবে না, তাই JS ইচ্ছাকৃতভাবে একটু দেরি করে এটা দেখায় */
.vrd-grid-loader {
	position: absolute;
	top: 2vw;
	left: 50%;
	transform: translateX(-50%);
	width: 2.4vw;
	height: 2.4vw;
	border-radius: 50%;
	border: 0.28vw solid rgba(20,30,60,0.12);
	border-top-color: var(--vrd-tab-active-bg, #2fae4f);
	animation: vrd-spin 0.7s linear infinite;
	z-index: 10;
}
@keyframes vrd-spin { to { transform: translateX(-50%) rotate(360deg); } }

.vrd-favorites-title { font-size: 1.6vw; color: #1b2a4a; font-weight: 700; margin: 0 0 1.5vw; }

/* ==== [veg_restaurant_rate] — রেটিং দেওয়ার উইজেট: কন্টেইনারের পুরো প্রস্থ জুড়ে, ৫টা স্টার সমান দূরত্বে ==== */
.vrd-rating-box { width: 100%; }
.vrd-stars {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between; /* ৫টা স্টার কন্টেইনারের একদম দুই প্রান্ত থেকে শুরু-শেষ, সমান দূরত্বে */
	gap: 1vw;
}
.vrd-star { font-size: 2.4vw; cursor: pointer; color: #d5dbe3; transition: color 0.15s; flex: 1; text-align: center; }
.vrd-star.filled { color: #f5b301; }
.vrd-rating-msg { font-size: 0.85vw; color: #55617a; margin-top: 0.6vw; }

/* ==== [veg_restaurant_rating_display] — শুধু গড় রেটিং দেখানোর উইজেট (ভিউ-অনলি) ==== */
.vrd-rating-display {
	margin: 0;
	font-size: var(--vrd-rating-size, 0.9vw);
	color: #b8860b;
	font-weight: 600;
}
.vrd-rating-display span { color: #8a93a6; font-weight: 400; }

/* ==== [veg_restaurant_heart] — স্বতন্ত্র হার্ট আইকন — কোনো ব্যাকগ্রাউন্ড/বক্স নেই, শুধু আইকন, নিজস্ব সাইজ কন্ট্রোল ==== */
.vrd-standalone-heart { display: inline-flex; background: none; border: none; box-shadow: none; padding: 0; }
.vrd-standalone-heart svg { width: var(--vrd-standalone-heart-size, 2.2vw); height: var(--vrd-standalone-heart-size, 2.2vw); }

/* ==== বড় স্ক্রিনে (ট্যাবলেট/ডেস্কটপ) শুধু ফিল্টার-মোডালের ফিক্সড px-জাতীয় UI ছোট করা হচ্ছে —
   এখানে টাইটেল/অ্যাড্রেস/ইত্যাদির কোনো ফন্ট-সাইজ ওভাররাইড করা হয়নি, তাই Admin Setting-এর মান
   সবসময়, সব স্ক্রিনে কাজ করবে। ==== */
@media (min-width: 700px) {
	.vrd-filter-modal { width: 40vw; max-width: 40vw; padding: 2.2vw 2.2vw 1.8vw; border-radius: 1vw; }
	.vrd-modal-step h4#vrd-modal-title { font-size: 1.4vw; margin-bottom: 1.2vw; }
	.vrd-term-list { max-height: 20vw; margin-bottom: 1.2vw; }
	.vrd-term-list li { padding: 1vw 1.4vw; border-radius: 0.8vw; font-size: 1vw; margin-bottom: 0.8vw; border-width: 0.08vw; }
	.vrd-term-list li.selected::after { right: 1.2vw; }
	.vrd-modal-actions { gap: 0.8vw; }
	.vrd-btn-ghost, .vrd-btn-solid, .vrd-btn-back { border-radius: 0.8vw; padding: 0.9vw 0; font-size: 0.9vw; }
	.vrd-btn-back { padding: 0.9vw 1.4vw; }
}

@media (max-width: 700px) {
	/* .vrd-directory padding intentionally stays 0 — কন্টেইনারের গা থেকেই ডিজাইন, মোবাইলেও */
	.vrd-search-row { gap: 2vw; }
	.vrd-grid { gap: 3vw; }
	/* ⚠️ ইচ্ছাকৃতভাবে এখানে grid-template-columns বা .vrd-card-img-এর কোনো হার্ডকোড ওভাররাইড
	   রাখা হয়নি — Admin Setting-এর "কার্ডের প্রস্থ" ও "কার্ডের ছবির মাপ" নিয়ন্ত্রণ এখন মোবাইল ও
	   ডেস্কটপ উভয় জায়গাতেই একইভাবে কাজ করে (vw ইউনিট এমনিতেই স্ক্রিন-প্রপোরশনাল)। আগে এখানে
	   জোর করে ১-কলাম আর ছবির অনুপাত বদলে দেওয়া হতো, যেটার কারণে বিভিন্ন মোবাইলে কার্ডের
	   মাপ এলোমেলো/অসামঞ্জস্যপূর্ণ দেখাচ্ছিল — Admin Setting-এর মান উপেক্ষা করে। */
}