/* گروه واحد دکمه‌های مودال */
.wpdc-modal-group {
	margin: 16px 0;
	width: fit-content;
	max-width: 100%;
}

.wpdc-align-center {
	margin-left: auto;
	margin-right: auto;
}

.wpdc-align-left {
	margin-right: auto;
}

.wpdc-align-right {
	margin-left: auto;
}

.wpdc-modal-group--auto {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wpdc-modal-group--grid {
	display: grid;
	grid-template-columns: repeat(var(--wpdc-cols, 3), 1fr);
	gap: 10px;
}

.wpdc-modal-group--scroll {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 10px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.wpdc-modal-group--scroll .wpdc-modal-block {
	flex: 0 0 auto;
}

/* نوار شناور (بالا یا پایین صفحه) — همیشه هنگام اسکرول هم سرجایش می‌ماند. */
.wpdc-floating-bar {
	position: fixed;
	z-index: 9000;
	max-width: 96vw;
	background: rgba(255, 255, 255, .97);
	padding: 10px 14px;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
	box-sizing: border-box;
}

.wpdc-floating-bar--center {
	left: 50%;
	transform: translateX(-50%);
}

.wpdc-floating-bar--left {
	left: 16px;
}

.wpdc-floating-bar--right {
	right: 16px;
}

.wpdc-floating-bar .wpdc-modal-group {
	margin: 0;
}

/* وقتی ارتفاع نوار شناور دستی تنظیم شده: به‌جای اسکرول، خودِ دکمه‌ها دقیقاً به همان ارتفاع کشیده/جمع
   می‌شوند — دقیقاً همان تکنیکی که برای اندازه گالری تصاویر هم استفاده شده. */
.wpdc-floating-bar--fixed-height {
	overflow: hidden;
}

.wpdc-floating-bar--fixed-height .wpdc-modal-group {
	height: 100%;
}

.wpdc-floating-bar--fixed-height .wpdc-modal-group--grid {
	grid-auto-rows: 1fr;
}

.wpdc-floating-bar--fixed-height .wpdc-modal-block {
	display: flex;
}

.wpdc-floating-bar--fixed-height .wpdc-modal-group .wpdc-modal-trigger {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

@media (max-width: 782px) {
	.wpdc-floating-bar {
		left: 10px !important;
		right: 10px !important;
		transform: none !important;
		max-width: none;
	}
}

/* نوار چسبان: ابتدا در جای طبیعی‌اش (بالای محتوای محصول) است، و فقط وقتی اسکرول می‌کنید و از لبه
   بالای صفحه رد می‌شود، همان‌جا (زیر هدر) می‌چسبد — نه از همان اول ثابت (بر خلاف نوار شناور). */
.wpdc-sticky-bar {
	position: sticky;
	z-index: 8000;
	display: block;
	width: fit-content;
	max-width: 96vw;
	background: rgba(255, 255, 255, .97);
	padding: 10px 14px;
	margin-bottom: 16px;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	box-sizing: border-box;
}

.wpdc-sticky-bar--center {
	margin-left: auto;
	margin-right: auto;
}

.wpdc-sticky-bar--left {
	margin-right: auto;
}

.wpdc-sticky-bar--right {
	margin-left: auto;
}

.wpdc-sticky-bar .wpdc-modal-group {
	margin: 0;
}

@media (max-width: 782px) {
	.wpdc-sticky-bar {
		width: auto;
		max-width: 100%;
	}
}

.wpdc-modal-group .wpdc-modal-block {
	margin: 0;
}

.wpdc-modal-block {
	margin: 12px 0;
}

.wpdc-modal-trigger {
	display: inline-block;
	cursor: pointer;
	border: 1px solid currentColor;
	background: transparent;
	padding: 10px 18px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	color: inherit;
	transition: opacity .15s ease;
}

.wpdc-modal-group--grid .wpdc-modal-trigger {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.wpdc-modal-trigger:hover {
	opacity: .75;
}

/* چک‌باکس مخفی که وضعیت باز/بسته را نگه می‌دارد — دیده نمی‌شود اما با کیبورد هم قابل‌فوکوس و تغییر است. */
.wpdc-modal-toggle {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* پنل مودال به‌صورت پیش‌فرض در جریان صفحه نیست (position: fixed) و در انتهای body رندر می‌شود؛
   نمایش/پنهانی هر پنل با یک قانون اختصاصی body:has(#...:checked) کنترل می‌شود که پلاگین به‌ازای
   هر آیتم مودال، مستقیماً کنار خودش در PHP چاپ می‌کند — نه اینجا، چون شناسه‌ها پویا هستند. */
.wpdc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
	box-sizing: border-box;
}

.wpdc-modal-backdrop {
	position: absolute;
	inset: 0;
	display: block;
	cursor: pointer;
}

.wpdc-modal-box {
	position: relative;
	background: #fff;
	color: #222;
	width: min(60vw, 98vw);
	max-height: min(60vh, 94vh);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	z-index: 1;
}

.wpdc-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid #eee;
	font-weight: 600;
	font-size: 17px;
}

.wpdc-modal-close {
	border: none;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	color: inherit;
	text-decoration: none;
}

/* پیش‌فرض عمداً هیچ تایپوگرافی (font-size/line-height) تحمیل نمی‌کند — چون این مقادیر به تمام
   فرزندان هم ارث می‌رسد، و اگر دکمه/فرم تم از padding بر پایه em استفاده کند (خیلی رایج است)،
   عوض‌شدن font-size/line-height ارثی باعث می‌شود دکمه خرید یا هر ویجت دیگر تم شکل/اندازه‌اش
   عوض شود — دقیقاً همان چیزی که نباید اتفاق بیفتد. فقط فاصله (padding) دور محتوا اضافه می‌شود که
   داخل مودال جمع‌وجور به‌نظر نرسد، بدون دست‌زدن به ظاهر داخلی خودِ محتوا.
   برای متن‌های طولانی (توضیحات/زبانه‌ها) کلاس --prose جداگانه در ادامه این فاصله‌ها را اضافه می‌کند. */
.wpdc-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 28px 32px;
	overflow-y: auto;
}

/* فقط برای محتوای متنی طولانی (توضیحات، زبانه‌ها) — نه برای ویجت‌های کاربردی تم مثل دکمه خرید،
   گالری، محصولات مرتبط/پیشنهادی که باید دقیقاً همان‌طور که تم طراحی کرده بمانند. */
.wpdc-modal-body--prose {
	line-height: 1.8;
}

.wpdc-modal-body--prose p {
	margin: 0 0 1.1em;
}

.wpdc-modal-body--prose table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.2em;
}

.wpdc-modal-body--prose table th,
.wpdc-modal-body--prose table td {
	padding: 12px 14px;
}

.wpdc-modal-body--prose ul,
.wpdc-modal-body--prose ol {
	padding-inline-start: 1.5em;
	margin-bottom: 1.1em;
}

.wpdc-modal-body--prose li {
	margin-bottom: .4em;
}

.wpdc-modal-body--prose img {
	max-width: 100%;
	height: auto;
}

/* گالری ساده: تصاویر در یک چیدمان معمولی و قابل‌شکستن نمایش داده می‌شوند؛ اگر تعدادشان زیاد باشد،
   خودِ مودال (مثل هر محتوای دیگری) به‌صورت عمودی اسکرول می‌شود — بدون هیچ ظرف/اسکرول اختصاصی. */
.wpdc-gallery-simple {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.wpdc-gallery-simple img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 60vh;
	border-radius: 4px;
}

.wpdc-modal-body--prose > *:first-child {
	margin-top: 0;
}

.wpdc-modal-loading {
	opacity: .6;
	padding: 4px 0;
}

.wpdc-modal-retry {
	display: inline-block;
	margin-top: 10px;
	cursor: pointer;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
}

.wpdc-modal-retry:hover {
	opacity: .75;
}

@media (max-width: 782px) {
	.wpdc-modal-box {
		width: 96vw !important;
		max-height: 92vh !important;
	}
	.wpdc-modal-body {
		padding: 20px;
	}
}