/* صفحهٔ کتاب دینوک (اسنیپت ۱۱۷۴۶) */

/* ------------------------------------------------ مشخصات کتاب */

.dnk-bs {
	box-sizing: border-box;
}

.dnk-bs__title {
	margin: 0 0 14px;
}

.dnk-bs__list {
	display: grid;
	grid-template-columns: repeat(var(--dnk-bs-cols, 2), minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}

.dnk-bs__row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.dnk-bs__label {
	flex: 0 0 auto;
	margin: 0;
}

.dnk-bs__label::after {
	content: ":";
	margin-inline-start: 2px;
}

.dnk-bs__value {
	margin: 0;
	min-width: 0;
	font-weight: 500;
}

.dnk-bs__value a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.dnk-bs__value a:hover {
	opacity: 0.75;
}

.dnk-bs__sep {
	margin-inline-start: -2px;
}

/* ---------------------------------------------------- توضیحات */

.dnk-bd__title {
	margin: 0 0 12px;
}

/* متن فارسیِ بلند با تراز دوطرفه یکدست‌تر خوانده می‌شود. */
.dnk-bd__body {
	text-align: justify;
	text-justify: inter-word;
}

.dnk-bd__body > *:first-child {
	margin-top: 0;
}

.dnk-bd__body > *:last-child {
	margin-bottom: 0;
}

.dnk-bd__body img {
	max-width: 100%;
	height: auto;
}

/* متن بلند تا کلیک روی «ادامه» جمع می‌ماند؛ محوشدگی پایین یعنی «ادامه دارد».
   باز و بسته شدن با max-height انیمیت می‌شود و جاوااسکریپت ارتفاع واقعی را
   به‌صورت پیکسلی می‌گذارد: از `none` به عدد، هیچ مرورگری انیمیشن نمی‌سازد. */
.dnk-bd--clamp .dnk-bd__body {
	position: relative;
	max-height: var(--dnk-bd-clamp, 260px);
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.dnk-bd--clamp .dnk-bd__body::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.dnk-bd--clamp.dnk-bd--open .dnk-bd__body {
	max-height: none;
}

/* محوشدگی به‌جای حذف شدن، محو می‌شود؛ `content: none` پرش داشت. */
.dnk-bd--clamp.dnk-bd--open .dnk-bd__body::after {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dnk-bd--clamp .dnk-bd__body,
	.dnk-bd--clamp .dnk-bd__body::after {
		transition: none;
	}
}

.dnk-bd__more {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* قالب Hello در reset.css به هر <button> در حالت هاور و فوکوس پس‌زمینهٔ
   صورتی و متن سفید می‌دهد (`button:hover` با وزن ۰,۱,۱). تعریف‌نکردنِ
   پس‌زمینه یعنی پذیرفتنِ آن؛ پس همهٔ دکمه‌های متنی این اسنیپت با وزن
   بالاتر (۰,۲,۰) صریحاً خنثی می‌شوند. */
.dnk-bd .dnk-bd__more,
.dnk-bd .dnk-bd__more:hover,
.dnk-bd .dnk-bd__more:focus,
.dnk-bd .dnk-bd__more:active {
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
}

.dnk-bd .dnk-bd__more:hover {
	text-decoration: underline;
}

.dnk-bd .dnk-bd__more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* `hidden` جلوی CSS خودمان را نمی‌گیرد مگر با این قانون. */
.dnk-bd [hidden] {
	display: none !important;
}

/* ------------------------------------------- افزودن به سبد خرید */

.dnk-atc {
	--dnk-atc-h: 52px;
	--dnk-atc-radius: 10px;
	--dnk-atc-accent: #e3001b;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.dnk-atc__form {
	margin: 0;
}

/* رنگ متن دکمه باید صریح باشد: reset قالب Hello به هر <button> رنگ صورتی
   #CC3366 می‌دهد و هر جایی که کنترل المنتور رنگ نداده باشد (مثل نوار خرید
   موبایل) متن دکمه صورتی می‌شد. وزن ۰,۲,۰ از reset جلو می‌زند و از کنترل
   المنتور (۰,۴,۰) عقب می‌ماند، یعنی تنظیم کاربر همچنان برنده است. */
.dnk-atc .dnk-atc__add,
.dnk-atc .dnk-atc__add:hover,
.dnk-atc .dnk-atc__add:focus,
.dnk-atc .dnk-atc__add:active {
	border: 0;
	color: #fff;
}

.dnk-atc .dnk-atc__add:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dnk-atc__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--dnk-atc-h);
	border: 0;
	border-radius: var(--dnk-atc-radius);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* کادر نرم با دکمه‌های سفید: حاشیهٔ قرمزِ تنها، جعبه را خالی و تیز نشان
   می‌داد. رنگ حاشیه متغیر جداست تا از کنترل المنتور قابل تغییر بماند. */
.dnk-atc__stepper {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	height: var(--dnk-atc-h);
	padding: 5px;
	border: 1px solid var(--dnk-atc-border, var(--dnk-atc-accent));
	border-radius: var(--dnk-atc-radius);
}

.dnk-atc__count {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.25;
}

.dnk-atc__unit {
	font-size: 12px;
	color: #8b8b8b;
}

.dnk-atc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: calc(var(--dnk-atc-radius) - 4px);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	color: var(--dnk-atc-accent);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dnk-atc__btn svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* همان تلهٔ reset.css: بدون این، آیکن‌های + و − روی هاور سفید می‌شدند. */
.dnk-atc .dnk-atc__btn,
.dnk-atc .dnk-atc__btn:hover,
.dnk-atc .dnk-atc__btn:focus,
.dnk-atc .dnk-atc__btn:active {
	border: 0;
	color: var(--dnk-atc-accent);
	background-color: #fff;
}

.dnk-atc .dnk-atc__btn:hover {
	background-color: var(--dnk-atc-accent);
	color: #fff;
}

.dnk-atc .dnk-atc__remove:hover {
	background-color: #6b7280;
	color: #fff;
}

.dnk-atc .dnk-atc__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dnk-atc__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.dnk-atc__value {
	font-weight: 700;
	font-size: 17px;
	color: #1d1c1c;
}

.dnk-atc__view,
.dnk-atc__remove {
	display: none;
}

/* لینک ساده زیر شمارنده شناور به نظر می‌رسید؛ دکمهٔ فرعی هم‌عرض، وزنِ
   بصری درستی به آن می‌دهد بدون اینکه با دکمهٔ اصلی رقابت کند. */
.dnk-atc__view {
	align-items: center;
	justify-content: center;
	height: 40px;
	border: 1px solid #e3e3e5;
	border-radius: var(--dnk-atc-radius);
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background-color 0.15s ease;
}

.dnk-atc__view:hover {
	background-color: #f7f7f8;
	text-decoration: none;
}

/* سه حالت، یک attribute: صفر → دکمه، یک → سطل و عدد، بیشتر → منها و عدد.
   همهٔ حالت‌ها در مارک‌آپ هستند و CSS انتخاب می‌کند، پس جاوااسکریپت فقط
   همان یک عدد را می‌نویسد. */
.dnk-atc:not([data-qty="0"]) .dnk-atc__form {
	display: none;
}

.dnk-atc:not([data-qty="0"]) .dnk-atc__stepper {
	display: flex;
}

.dnk-atc:not([data-qty="0"]) .dnk-atc__view {
	display: flex;
}

.dnk-atc[data-qty="1"] .dnk-atc__minus {
	display: none;
}

.dnk-atc[data-qty="1"] .dnk-atc__remove {
	display: flex;
}

/* «در حال ارسال» فقط کم‌رنگ می‌شود و کلیک را نمی‌بندد: عدد از قبل روی
   صفحه عوض شده و کاربر باید بتواند پشت‌هم بزند. */
.dnk-atc--busy {
	opacity: 0.75;
}

.dnk-atc--oos .dnk-atc__oos {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--dnk-atc-h);
	border: 1px dashed #d8d8da;
	border-radius: var(--dnk-atc-radius);
	color: #8b8b8b;
	font-weight: 700;
}

.dnk-atc__stock {
	font-size: 14px;
	color: #5a5a5a;
}

/* ------------------------------ ناموجود: راه سفارش از پشتیبانی */

/* کادر بیرون از .dnk-atc است، پس متغیرها مقدار پیش‌فرض دارند. */
.dnk-oos-cta {
	margin-top: 12px;
	padding: 14px 14px 12px;
	border: 1px solid #e3eef6;
	border-radius: var(--dnk-atc-radius, 10px);
	background: #f5f9fc;
	text-align: center;
}

.dnk-oos-cta__title {
	margin: 0 0 4px;
	color: #1d1c1c;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.dnk-oos-cta__text {
	margin: 0 0 12px;
	color: #5f5f68;
	font-size: 13px;
	line-height: 1.85;
}

/* رنگ تلگرام، چون کاربر باید همان نگاه اول بشناسد کجا می‌رود. */
.dnk-oos-tg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--dnk-atc-h, 46px);
	padding: 0 14px;
	border-radius: var(--dnk-atc-radius, 10px);
	background: #229ed9;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* وزن دوکلاسه: قالب Hello رنگ لینک را در هاور عوض می‌کند. */
.dnk-oos-cta .dnk-oos-tg:hover,
.dnk-oos-cta .dnk-oos-tg:focus,
.dnk-atc--oos .dnk-oos-tg:hover,
.dnk-atc--oos .dnk-oos-tg:focus {
	background: #1b87ba;
	color: #fff;
	text-decoration: none;
}

.dnk-oos-tg svg {
	flex: 0 0 auto;
}

.dnk-oos-cta__alt {
	margin: 10px 0 0;
	color: #75757e;
	font-size: 12.5px;
}

.dnk-oos-cta .dnk-oos-cta__alt a {
	color: #1d1c1c;
	font-weight: 700;
	text-decoration: none;
	unicode-bidi: isolate;
}

.dnk-oos-cta .dnk-oos-cta__alt a:hover {
	text-decoration: underline;
}

/* نوار موبایل: دکمهٔ پیام جای برچسب «ناموجود» را می‌گیرد. */
.dnk-atc--compact.dnk-atc--oos .dnk-oos-tg {
	font-size: 14px;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.dnk-oos-tg {
		transition: none;
	}
}

/* نوار موبایل، کالای ناموجود: به‌جای قیمت (که شاید به‌روز نباشد) خود وضعیت. */
.dnk-bb .dnk-bb__price--oos {
	color: #8b8b8b;
	font-size: 15px;
	font-weight: 700;
}

/* -------------------------------------- نوار خرید چسبان موبایل */

.dnk-bb {
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 998;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-top: 1px solid #ebebeb;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(110%);
	transition: transform 0.2s ease;
}

.dnk-bb--active.dnk-bb--shown {
	display: flex;
	transform: translateY(0);
}

.dnk-bb--active {
	display: flex;
}

.dnk-bb__price {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* تخفیف‌دار: قیمت قبلی + درصد در خط اول، قیمت فعلی در خط دوم (مثل جعبهٔ خرید) */
.dnk-bb__price--sale {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	justify-items: start;
	align-items: center;
	column-gap: 6px;
	row-gap: 2px;
	line-height: 1.2;
}

.dnk-bb__price--sale del {
	grid-area: 1 / 1;
	color: #8b8b8b;
	font-size: 12px;
	font-weight: 400;
}

.dnk-bb__price--sale .dnk-bb__pct {
	grid-area: 1 / 2;
}

.dnk-bb__price--sale ins {
	grid-area: 2 / 1 / 3 / 3;
	text-decoration: none;
}

.dnk-bb__pct {
	padding: 1px 7px;
	border-radius: 12px;
	background-color: #e3001b;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

.dnk-bb__action {
	flex: 1 1 auto;
	min-width: 0;
}

.dnk-bb .dnk-atc {
	--dnk-atc-h: 44px;
}

.dnk-bb .dnk-atc__view,
.dnk-bb .dnk-atc__stock,
.dnk-bb .dnk-atc__unit {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.dnk-bb {
		transition: none;
	}
}

/* ------------------------------------------------ اشتراک‌گذاری */

.dnk-sh {
	--dnk-sh-size: 38px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dnk-sh__label {
	margin-inline-end: 2px;
}

.dnk-sh__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dnk-sh-size);
	height: var(--dnk-sh-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dnk-sh .dnk-sh__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dnk-sh__btn svg {
	width: 55%;
	height: 55%;
	fill: currentColor;
}

.dnk-sh__toast {
	font-size: 13px;
	color: #1a7f37;
}

.dnk-sh [hidden] {
	display: none !important;
}

/* ------------------------------------------ نشان محتوای هوش مصنوعی */

.dnk-ai {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	line-height: 1.6;
}

.dnk-ai__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.dnk-ai__icon svg {
	width: 16px;
	height: 16px;
}

.dnk-ai__text {
	min-width: 0;
}

/* ------------------------------------------ دانلود نمونهٔ کتاب */

.dnk-sample__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 8px 14px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.dnk-sample__btn:hover {
	text-decoration: none;
}

.dnk-sample__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.dnk-sample__icon svg {
	width: 20px;
	height: 20px;
}

.dnk-sample__size {
	font-size: 0.85em;
	font-weight: 400;
}