.tf-notif-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.tf-notif-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: var(--tf-notif-bell-color, #ffc000);
	line-height: 0;
}

.tf-notif-bell svg {
	width: var(--tf-notif-bell-size, 22px);
	height: var(--tf-notif-bell-size, 22px);
}

.tf-notif-bell:hover {
	opacity: 0.85;
}

.tf-notif-bell.has-unread {
	animation: tf-notif-shake 2.2s ease-in-out infinite;
	transform-origin: top center;
}

@keyframes tf-notif-shake {
	0%, 80%, 100% { transform: rotate(0); }
	82% { transform: rotate(12deg); }
	84% { transform: rotate(-10deg); }
	86% { transform: rotate(8deg); }
	88% { transform: rotate(-6deg); }
	90% { transform: rotate(0); }
}

.tf-notif-badge {
	position: absolute;
	top: -2px;
	left: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--tf-notif-badge-bg, #c0392b);
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-weight: 700;
}

.tf-notif-badge.is-hidden {
	display: none;
}

.tf-notif-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: var(--tf-notif-dropdown-width, 320px);
	max-width: 90vw;
	max-height: min(var(--tf-notif-dropdown-maxheight, 650px), 80vh);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #1a1a1a;
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	z-index: 9999;
	direction: rtl;
	text-align: right;
	font-size: 13px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-10px);
	transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0.22s;
}

.tf-notif-dropdown.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

body.dark-mode .tf-notif-dropdown,
body.wp-dark-mode .tf-notif-dropdown {
	background: #1e1e1e;
	color: #f2f2f2;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.tf-notif-dropdown-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8px 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.tf-notif-clear-all,
.tf-views-clear-all {
	background: none;
	border: none;
	color: #c0392b;
	font-size: 12px;
	cursor: pointer;
	padding: 2px 6px;
}

.tf-notif-top-bar-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tf-notif-sound-toggle {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: var(--tf-notif-hover-bg, rgba(26, 95, 208, 0.12));
	color: var(--tf-notif-accent, #1a5fd0);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.tf-notif-sound-toggle:hover {
	opacity: 0.85;
}

.tf-notif-sound-icon-off {
	display: none;
}

.tf-notif-sound-toggle.is-muted {
	background: rgba(0, 0, 0, 0.08);
	color: #999;
}

.tf-notif-sound-toggle.is-muted .tf-notif-sound-icon-on {
	display: none;
}

.tf-notif-sound-toggle.is-muted .tf-notif-sound-icon-off {
	display: block;
}

.tf-notif-close {
	background: none;
	border: none;
	color: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
	opacity: 0.6;
}

.tf-notif-close:hover {
	opacity: 1;
}

.tf-notif-list {
	overflow-y: scroll;
	overscroll-behavior: contain;
	flex: 1;
	min-height: 0;
}

.tf-notif-loading,
.tf-notif-empty {
	padding: 24px 14px;
	text-align: center;
	color: #888;
}

.tf-notif-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 14px;
	border-right: 3px solid transparent;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
	text-decoration: none;
	color: inherit;
}

.tf-notif-item:hover,
.tf-notif-item:visited,
.tf-notif-item:active {
	text-decoration: none;
	color: inherit;
}

.tf-notif-item:hover {
	background: var(--tf-notif-hover-bg, rgba(0, 0, 0, 0.04));
	border-right-color: var(--tf-notif-accent, #1a5fd0);
}

.tf-notif-item-body {
	flex: 1;
	min-width: 0;
}

.tf-notif-item.is-unread .tf-notif-item-title,
.tf-notif-item.is-unread .tf-notif-item-content {
	color: var(--tf-notif-unread-color, #1a5fd0);
}

.tf-notif-item.is-read .tf-notif-item-title,
.tf-notif-item.is-read .tf-notif-item-content {
	color: #1a1a1a;
}

body.dark-mode .tf-notif-item.is-read .tf-notif-item-title,
body.dark-mode .tf-notif-item.is-read .tf-notif-item-content,
body.wp-dark-mode .tf-notif-item.is-read .tf-notif-item-title,
body.wp-dark-mode .tf-notif-item.is-read .tf-notif-item-content {
	color: #f2f2f2;
}

.tf-notif-item-title {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	font-size: var(--tf-notif-title-size, 14px);
	margin-bottom: 2px;
}

.tf-notif-link-icon {
	flex-shrink: 0;
	color: #1a5fd0;
	opacity: 0.75;
	width: var(--tf-notif-icon-size, 14px);
	height: var(--tf-notif-icon-size, 14px);
}

.tf-notif-badge-icon {
	flex-shrink: 0;
	font-size: var(--tf-notif-badge-icon-size, 17px);
	cursor: help;
	line-height: 1;
}

.tf-notif-item-content {
	font-size: var(--tf-notif-content-size, 12px);
	opacity: 0.85;
	margin-bottom: 4px;
}

.tf-notif-item-date {
	font-size: var(--tf-notif-date-size, 11px);
	color: #999;
}

.tf-notif-item-delete {
	background: none;
	border: none;
	color: #a0a0a0;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
}

.tf-notif-item-delete svg {
	width: var(--tf-notif-icon-size, 14px);
	height: var(--tf-notif-icon-size, 14px);
}

.tf-notif-item-delete:hover {
	color: #c0392b;
}

/* ---------- ماژول علاقه‌مندی‌ها ---------- */

.tf-fav-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 6px;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: tf-fav-spin 0.7s linear infinite;
	vertical-align: middle;
}

.tf-fav-spinner.wpfp-hide {
	display: none;
}

@keyframes tf-fav-spin {
	to { transform: rotate(360deg); }
}

.tf-favorites-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tf-favorites-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.tf-favorites-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tf-favorites-actions a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	border-radius: 5px;
	padding: 6px 15px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.tf-favorites-actions a:hover {
	opacity: 0.85;
	color: inherit;
}

.tf-favorites-actions .tf-active-post-comment-favorite-btn {
	background-color: #ffc000;
	color: #000;
}

.tf-favorites-actions .tf-deactive-post-comment-favorite-btn {
	background-color: #ff5722;
	color: #fff;
}

.tf-favorites-actions .tf-active-post-comment-notification-btn {
	background-color: #037dff;
	color: #fff;
}

.tf-favorites-actions .tf-deactive-post-comment-notification-btn {
	background-color: #000;
	color: #fff;
}

/* ---------- دکمه‌های زیر هر مطلب (علاقه‌مندی + اعلان دیدگاه) ---------- */

.tf-post-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.tf-single-post-content-bottom .tf-post-actions {
	flex-direction: column;
}

.tf-single-post-content-bottom .tf-post-actions .tf-post-comment-favorite-btn,
.tf-single-post-content-bottom .tf-post-actions .tf-post-comment-notification-btn {
	width: 100%;
}

.tf-post-actions--row {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
}

.tf-post-actions--row .tf-post-comment-favorite-btn,
.tf-post-actions--row .tf-post-comment-notification-btn {
	width: auto !important;
	flex: 0 1 auto;
	white-space: nowrap;
}

.tf-post-actions .wpfp-span {
	display: contents;
}

.tf-post-actions .tf-post-comment-favorite-btn,
.tf-post-actions .tf-post-comment-notification-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	transition-duration: 0.2s;
	border-radius: 8px;
	padding: 6px 18px;
	cursor: pointer;
	text-align: center;
	font-weight: 600;
	font-size: 13px;
}

.tf-post-actions a:hover {
	opacity: 0.85;
	color: inherit;
}

.tf-post-actions .tf-active-post-comment-favorite-btn {
	background-color: #ffc000;
	color: #000;
}

.tf-post-actions .tf-deactive-post-comment-favorite-btn {
	background-color: #ff5722;
	color: #fff;
}

/* ---------- محل تازه: بین بخش امتیازدهی و اشتراک‌گذاری ---------- */

.megawp-single-post-box .tf-single-post-content-bottom {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
}

.tf-single-post-rate,
.tf-single-post-share {
	float: none !important;
	width: auto !important;
	flex: 1 1 220px;
}

.tf-post-actions {
	flex: 1 1 220px;
	max-width: 260px;
	margin: 0 auto;
}

/* ---------- صفحه اعلان‌ها در پیشخوان کاربری ---------- */

.tf-notif-account-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.tf-notif-fullpage-list {
	max-height: none;
}

.tf-notif-fullpage-list .tf-notif-item {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	margin-bottom: 8px;
}

/* ---------- برچسب "جزئیات" کنار نماد لینک ---------- */

.tf-notif-details-link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 500;
	color: #1a5fd0;
	opacity: 0.85;
	flex-shrink: 0;
}

/* ---------- پس‌زمینه‌ی تیره (فقط در حالت کشویی/پنل کناری فعال می‌شود) ---------- */

.tf-notif-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease-out;
}

.tf-notif-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- نوار بالای منو: تب‌ها + دکمه بستن ---------- */

.tf-notif-top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 0 6px;
	background: var(--tf-notif-header-bg, #ffffff);
	border-radius: inherit;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.tf-notif-tabs {
	display: flex;
}

.tf-notif-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 700;
	color: #888;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.tf-notif-tab:hover {
	color: var(--tf-notif-accent, #1a5fd0);
}

.tf-notif-tab.is-active {
	color: var(--tf-notif-accent, #1a5fd0);
	border-bottom-color: var(--tf-notif-accent, #1a5fd0);
}

.tf-notif-panel {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.tf-views-list {
	overflow-y: scroll;
	overscroll-behavior: contain;
	flex: 1;
	min-height: 0;
}

/* ---------- آیتم‌های بازدید اخیر ---------- */

.tf-view-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.tf-view-item-thumb {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	background: #eee;
}

.tf-view-item-body {
	flex: 1;
	min-width: 0;
}

.tf-view-item-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1a5fd0;
	text-decoration: none;
	margin-bottom: 2px;
}

.tf-view-item-cat {
	font-size: 11px;
	color: #999;
}

.tf-view-item-delete {
	background: none;
	border: none;
	color: #a0a0a0;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
}

.tf-view-item-delete:hover {
	color: #c0392b;
}

.tf-view-item-delete svg {
	width: var(--tf-notif-icon-size, 14px);
	height: var(--tf-notif-icon-size, 14px);
}

/* ---------- اعلان خرید موفق دوره (نماد 🎉) — پس‌زمینه‌ی جشن‌وار برای تمایز از بقیه ---------- */

.tf-notif-item[data-badges~="purchase"] {
	background: linear-gradient(90deg, rgba(255, 192, 0, 0.14), transparent 70%);
	border-right: 3px solid #ffc000;
}

.tf-notif-item[data-badges~="purchase"]:hover {
	background: linear-gradient(90deg, rgba(255, 192, 0, 0.22), transparent 70%);
}

.tf-notif-item[data-badges~="purchase"] .tf-notif-item-title {
	color: #b8860b;
}

/* ---------- پیش‌نمایش زنده در صفحه‌ی تنظیمات ---------- */

.tf-theme-preview {
	margin: 6px 0;
}

.tf-theme-preview .tf-notif-dropdown {
	position: static !important;
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 380px;
	max-height: none !important;
}

#tf-custom-colors-section {
	transition: opacity 0.2s ease;
}

/* ---------- نوار اسکرول قابل‌مشاهده — نشانه‌ی بصری برای ادامه‌داشتن لیست ---------- */

.tf-notif-list,
.tf-views-list,
.tf-notif-fullpage-list {
	scrollbar-width: thin;
	scrollbar-color: var(--tf-notif-accent, #1a5fd0) rgba(0, 0, 0, 0.06);
}

.tf-notif-list::-webkit-scrollbar,
.tf-views-list::-webkit-scrollbar,
.tf-notif-fullpage-list::-webkit-scrollbar {
	width: 6px;
}

.tf-notif-list::-webkit-scrollbar-track,
.tf-views-list::-webkit-scrollbar-track,
.tf-notif-fullpage-list::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.06);
	border-radius: 10px;
}

.tf-notif-list::-webkit-scrollbar-thumb,
.tf-views-list::-webkit-scrollbar-thumb,
.tf-notif-fullpage-list::-webkit-scrollbar-thumb {
	background-color: var(--tf-notif-accent, #1a5fd0);
	border-radius: 10px;
}

@keyframes tf-notif-blink {
	0%, 100% { background-color: transparent; }
	50% { background-color: var(--tf-notif-hover-bg, rgba(255, 192, 0, 0.25)); }
}

.tf-notif-blink {
	animation: tf-notif-blink 1.1s ease-in-out 3;
}

@keyframes tf-notif-bell-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

.tf-notif-bell-blink {
	animation: tf-notif-bell-blink 0.6s ease-in-out 3;
}