/* ============================================================
 * ریست ایمن و مقاوم در برابر استایل‌های عمومی قالب
 * ------------------------------------------------------------
 * بسیاری از قالب‌های وردپرس برای تگ‌های عمومی مثل a، button، img
 * و ul/li استایل سراسری تعریف می‌کنند (مثلا "a { text-decoration:
 * underline; display:inline; }"). چون آن قوانین هم روی سایت واقعی
 * لود می‌شوند ولی در پیش‌نمایش پنل مدیریت وجود ندارند، دقیقا همین
 * تفاوت باعث می‌شد ویجت در پیش‌نمایش درست و در سایت به‌هم‌ریخته
 * دیده شود. این بخش، ابتدا یک ریست پایه با specificity کم اعمال
 * می‌کند و سپس تمام کلاس‌های ویجت به‌صورت ".ctcfb-widget .کلاس"
 * (یعنی حداقل دو کلاس) نوشته شده‌اند تا specificity آن‌ها همیشه از
 * قوانین عمومی قالب (مثل "a{}" یا ".content a{}") بالاتر بماند و
 * دیگر توسط CSS قالب بازنویسی نشوند.
 * ============================================================ */
.ctcfb-widget,
.ctcfb-widget *,
.ctcfb-widget *::before,
.ctcfb-widget *::after {
	box-sizing: border-box !important;
}

.ctcfb-widget a,
.ctcfb-widget button {
	all: unset;
	box-sizing: border-box !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ctcfb-widget img {
	max-width: none;
	border: none;
	vertical-align: middle;
}

.ctcfb-widget ul,
.ctcfb-widget li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ============================================================
 * دکمه شناور اصلی
 * ============================================================ */
.ctcfb-widget {
	position: fixed !important;
	bottom: var(--ctcfb-offset-v, 20px);
	z-index: 999999 !important;
	direction: rtl;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "IRANSans", "Vazir", sans-serif;
	line-height: normal;
}
.ctcfb-widget.ctcfb-pos-right { right: var(--ctcfb-offset-h, 20px); left: auto; }
.ctcfb-widget.ctcfb-pos-left  { left: var(--ctcfb-offset-h, 20px); right: auto; }

.ctcfb-widget .ctcfb-bubble {
	width: var(--ctcfb-bubble-size, 62px);
	height: var(--ctcfb-bubble-size, 62px);
	min-width: var(--ctcfb-bubble-size, 62px);
	border-radius: 50% !important;
	background: var(--ctcfb-bubble-bg, #25D366);
	color: var(--ctcfb-bubble-icon, #fff);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 6px 20px rgba(0,0,0,.22);
	position: relative;
	padding: 0 14px;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ctcfb-widget .ctcfb-bubble:hover {
	background: var(--ctcfb-bubble-bg-hover, var(--ctcfb-bubble-bg, #25D366));
	transform: scale(1.06);
	box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.ctcfb-widget .ctcfb-bubble-icon {
	width: 46%;
	height: 46%;
	color: var(--ctcfb-bubble-icon, #fff);
	display: block;
}
.ctcfb-widget .ctcfb-bubble-text {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ctcfb-bubble-icon, #fff);
	display: inline-block;
}
.ctcfb-widget .ctcfb-bubble-ping {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--ctcfb-bubble-bg, #25D366);
	opacity: .55;
	z-index: -1;
	display: block;
}

/* --- انیمیشن‌های حباب --- */
.ctcfb-widget .ctcfb-anim-pulse .ctcfb-bubble-ping {
	animation: ctcfb-pulse 1.8s ease-out infinite;
}
@keyframes ctcfb-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}
.ctcfb-widget .ctcfb-anim-bounce { animation: ctcfb-bounce 1.6s ease-in-out infinite; }
@keyframes ctcfb-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
.ctcfb-widget .ctcfb-anim-shake { animation: ctcfb-shake 3.2s ease-in-out infinite; }
@keyframes ctcfb-shake {
	0%, 88%, 100% { transform: rotate(0deg); }
	90%  { transform: rotate(-12deg); }
	92%  { transform: rotate(10deg); }
	94%  { transform: rotate(-8deg); }
	96%  { transform: rotate(6deg); }
	98%  { transform: rotate(0deg); }
}
.ctcfb-widget .ctcfb-anim-none .ctcfb-bubble-ping { display: none; }

/* ============================================================
 * پنجره اطلاعات (حالت popup)
 * ============================================================ */
.ctcfb-widget .ctcfb-popup {
	position: absolute;
	bottom: calc(var(--ctcfb-bubble-size, 62px) + 16px);
	width: 300px;
	max-width: calc(100vw - 40px);
	background: var(--ctcfb-popup-bg, #fff);
	color: var(--ctcfb-popup-text, #333);
	border-radius: 16px;
	box-shadow: 0 14px 40px rgba(0,0,0,.22);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.96);
	transition: all .25s ease;
	transform-origin: bottom;
}
.ctcfb-widget.ctcfb-pos-right .ctcfb-popup { right: 0; left: auto; }
.ctcfb-widget.ctcfb-pos-left  .ctcfb-popup { left: 0; right: auto; }

.ctcfb-widget.ctcfb-open .ctcfb-popup {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.ctcfb-widget .ctcfb-popup-close {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0,0,0,.06);
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50% !important;
	font-size: 16px;
	line-height: 1;
	color: inherit;
}

.ctcfb-widget .ctcfb-popup-header {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.ctcfb-widget .ctcfb-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50% !important;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid rgba(0,0,0,.05);
	display: block;
}
.ctcfb-widget .ctcfb-name {
	font-size: var(--ctcfb-font-name, 16px);
	font-weight: 700;
}
.ctcfb-widget .ctcfb-caption {
	font-size: var(--ctcfb-font-caption, 13px);
	opacity: .65;
	margin-top: 2px;
}
.ctcfb-widget .ctcfb-description {
	font-size: var(--ctcfb-font-desc, 13px);
	line-height: 1.9;
	margin-bottom: 14px;
	opacity: .9;
}
.ctcfb-widget .ctcfb-phone-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	background: var(--ctcfb-phone-color-bg, rgba(37, 211, 102, .12));
	color: var(--ctcfb-phone-color, #25D366);
	border: 1px solid var(--ctcfb-phone-color, #25D366);
	border-radius: 10px;
	padding: 10px 14px;
	font-weight: 700;
	font-size: var(--ctcfb-font-phone, 15px);
	transition: filter .2s ease, opacity .2s ease;
}
.ctcfb-widget .ctcfb-phone-link:hover { opacity: .85; }
.ctcfb-widget .ctcfb-phone-number { direction: ltr; display: inline-block; }

/* ============================================================
 * منوی کشویی چند-کاناله (حالت stack)
 * ============================================================ */
.ctcfb-widget .ctcfb-stack {
	position: absolute;
	bottom: calc(var(--ctcfb-bubble-size, 62px) + 14px);
	display: flex !important;
	flex-direction: column-reverse; /* اولین کانال، نزدیک‌ترین به دکمه شناور باشد */
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	margin: 0;
	padding: 0;
}
.ctcfb-widget.ctcfb-pos-right .ctcfb-stack { right: 0; left: auto; align-items: flex-end; }
.ctcfb-widget.ctcfb-pos-left  .ctcfb-stack { left: 0; right: auto; align-items: flex-start; }

.ctcfb-widget.ctcfb-open .ctcfb-stack {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.ctcfb-widget .ctcfb-stack-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px;
	background: var(--ctcfb-stack-item-bg, #ffffff);
	color: var(--ctcfb-stack-item-text, #1f2937);
	border-radius: 999px;
	padding: 6px 10px 6px 16px;
	box-shadow: 0 8px 22px rgba(0,0,0,.18);
	white-space: nowrap;
	/* حداقل‌عرض یکسان برای همه دکمه‌ها، تا صرف‌نظر از طول متن (مثلا «اینستاگرام»
	   در برابر «واتساپ»)، لبه‌های آن‌ها هم‌تراز شوند و یک ستون منظم تشکیل شود. */
	min-width: 172px;
	width: max-content;
	transform: translateY(10px) scale(.92);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease, box-shadow .2s ease;
}
.ctcfb-widget.ctcfb-pos-left .ctcfb-stack-item {
	padding: 6px 16px 6px 10px;
	flex-direction: row-reverse !important;
}

.ctcfb-widget.ctcfb-open .ctcfb-stack-item {
	transform: translateY(0) scale(1);
	opacity: 1;
}
.ctcfb-widget .ctcfb-stack-item:hover {
	box-shadow: 0 12px 28px rgba(0,0,0,.24);
	filter: brightness(0.98);
}

.ctcfb-widget .ctcfb-stack-item-icon {
	width: var(--ctcfb-stack-icon-size, 40px);
	height: var(--ctcfb-stack-icon-size, 40px);
	min-width: var(--ctcfb-stack-icon-size, 40px);
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
	overflow: hidden;
}
.ctcfb-widget .ctcfb-stack-item-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ctcfb-widget .ctcfb-stack-item-emoji {
	font-size: calc(var(--ctcfb-stack-icon-size, 40px) * 0.5);
	line-height: 1;
	display: block;
}
.ctcfb-widget .ctcfb-stack-item-label {
	font-size: var(--ctcfb-stack-font-label, 14px);
	font-weight: 600;
	flex: 1 1 auto;
	display: inline-block;
}

/* --- کنترل نمایش بر اساس دستگاه --- */
@media (min-width: 1025px) {
	.ctcfb-widget.ctcfb-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.ctcfb-widget.ctcfb-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
	.ctcfb-widget.ctcfb-hide-mobile { display: none !important; }
	.ctcfb-widget .ctcfb-popup { width: 88vw; }
	/* در صفحه‌های خیلی باریک، حداقل‌عرض ثابت می‌تواند از عرض صفحه بیشتر شود؛
	   این‌جا آن را محدودتر می‌کنیم تا سرریز (overflow) افقی رخ ندهد. */
	.ctcfb-widget .ctcfb-stack-item { min-width: 0; max-width: calc(100vw - 90px); }
}