/* =========================================
   Call Button Pro - Floating Buttons (نظام بديل للشريط السفلي)
   كل القيم جاية من CSS Variables ديناميكية لكل زرار على حدة (اتصال / واتساب)
   ========================================= */

.cbp-float-wrap {
	position: fixed;
	inset: 0;
	z-index: 999997;
	pointer-events: none;
}

.cbp-float-btn {
	position: fixed;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(11, 29, 58, .28);
	transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
	box-sizing: border-box;
}
.cbp-float-btn.cbp-float-no-shadow {
	box-shadow: none;
}
.cbp-float-btn:hover {
	filter: brightness(1.08);
}

.cbp-float-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cbp-float-icon svg {
	fill: currentColor;
	display: block;
}

.cbp-float-label {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	line-height: 1;
}

/* لما التسمية تكون شغالة، الزر بيتحول من دائرة لكبسولة (Pill) عشان يستوعب النص */
.cbp-float-btn.cbp-float-has-label {
	width: auto !important;
	border-radius: 999px;
	gap: 10px;
	padding: 0 20px;
}
.cbp-float-btn.cbp-float-has-label.cbp-float-pos-right {
	flex-direction: row-reverse; /* الأيقونة تفضل ملاصقة لحافة الشاشة، والتسمية تتمد ناحية المنتصف */
}

/* ===== زر الاتصال ===== */
.cbp-float-btn--call {
	background: var(--cbp-float-call-bg, #102a43);
	color: var(--cbp-float-call-icon, #ffffff);
	width: var(--cbp-float-call-size, 58px);
	height: var(--cbp-float-call-size, 58px);
	bottom: calc(var(--cbp-float-call-v, 20px) + env(safe-area-inset-bottom));
}
.cbp-float-btn--call.cbp-float-pos-right { right: var(--cbp-float-call-h, 20px); left: auto; }
.cbp-float-btn--call.cbp-float-pos-left  { left: var(--cbp-float-call-h, 20px); right: auto; }
.cbp-float-btn--call .cbp-float-icon svg {
	width: calc(var(--cbp-float-call-size, 58px) * 0.4);
	height: calc(var(--cbp-float-call-size, 58px) * 0.4);
}

/* ===== زر واتساب ===== */
.cbp-float-btn--wa {
	background: var(--cbp-float-wa-bg, #25d366);
	color: var(--cbp-float-wa-icon, #ffffff);
	width: var(--cbp-float-wa-size, 58px);
	height: var(--cbp-float-wa-size, 58px);
	bottom: calc(var(--cbp-float-wa-v, 90px) + env(safe-area-inset-bottom));
}
.cbp-float-btn--wa.cbp-float-pos-right { right: var(--cbp-float-wa-h, 20px); left: auto; }
.cbp-float-btn--wa.cbp-float-pos-left  { left: var(--cbp-float-wa-h, 20px); right: auto; }
.cbp-float-btn--wa .cbp-float-icon svg {
	width: calc(var(--cbp-float-wa-size, 58px) * 0.44);
	height: calc(var(--cbp-float-wa-size, 58px) * 0.44);
}

/* ===== زر العودة للأعلى (خاص بنظام الأزرار العائمة فقط - مستقل عن زر الشريط السفلي) ===== */
.cbp-float-top {
	position: fixed;
	z-index: 999998;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	background: var(--cbp-float-top-bg, #ffffff);
	color: var(--cbp-float-top-icon, #0b1d3a);
	width: var(--cbp-float-top-size, 46px);
	height: var(--cbp-float-top-size, 46px);
	bottom: calc(var(--cbp-float-top-v, 170px) + env(safe-area-inset-bottom));
	box-shadow: 0 2px 6px rgba(11, 29, 58, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(.9);
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease, filter .2s ease;
}
.cbp-float-top.cbp-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}
.cbp-float-top:hover {
	filter: brightness(1.08);
}
.cbp-float-top svg {
	width: calc(var(--cbp-float-top-size, 46px) * 0.42);
	height: calc(var(--cbp-float-top-size, 46px) * 0.42);
	fill: currentColor;
}
.cbp-float-top.cbp-float-pos-right { right: var(--cbp-float-top-h, 20px); left: auto; }
.cbp-float-top.cbp-float-pos-left  { left: var(--cbp-float-top-h, 20px); right: auto; }

@media (max-width: 480px) {
	.cbp-float-top.cbp-float-pos-right { right: max(var(--cbp-float-top-h, 20px), env(safe-area-inset-right)); }
	.cbp-float-top.cbp-float-pos-left  { left: max(var(--cbp-float-top-h, 20px), env(safe-area-inset-left)); }
}

/* =========================================
   تأثيرات الحركة (13 تأثير + بدون حركة) - كل زر يختار تأثيره بشكل مستقل
   ========================================= */

.cbp-float-btn[data-cbp-anim="pulse"] { animation: cbpFloatPulse 2s ease-in-out infinite; }
.cbp-float-btn[data-cbp-anim="shake"] { animation: cbpFloatShake 4.5s ease-in-out infinite; }
.cbp-float-btn[data-cbp-anim="bounce"] { animation: cbpFloatBounce 1.6s ease-in-out infinite; }
.cbp-float-btn[data-cbp-anim="ring"] { animation: cbpFloatRing 3.5s ease-in-out infinite; }
.cbp-float-btn[data-cbp-anim="breathe"] { animation: cbpFloatBreathe 3.6s ease-in-out infinite; }
.cbp-float-btn[data-cbp-anim="swing"] { animation: cbpFloatSwing 2.4s ease-in-out infinite; transform-origin: top center; }
.cbp-float-btn[data-cbp-anim="float"] { animation: cbpFloatFloatY 2.8s ease-in-out infinite; }
.cbp-float-btn[data-cbp-anim="heartbeat"] { animation: cbpFloatHeartbeat 2.2s ease-in-out infinite; }
.cbp-float-btn[data-cbp-anim="wobble"] { animation: cbpFloatWobble 2s ease-in-out infinite; transform-origin: 50% 100%; }
.cbp-float-btn[data-cbp-anim="spin"] { animation: cbpFloatSpin 3s linear infinite; }

.cbp-float-btn[data-cbp-anim="glow"] {
	position: fixed; /* موجودة أصلًا فوق - مكررة هنا فقط عشان position:relative مايبقاش لازم */
}
.cbp-float-btn[data-cbp-anim="glow"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	z-index: -1;
	animation: cbpFloatGlow 2s ease-out infinite;
}

/* حلقة واحدة تتمدد من حول الزر بلون الزر نفسه وتختفي تدريجيًا (نبضة/Ping) */
.cbp-float-btn[data-cbp-anim="ring_single"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	z-index: -1;
	animation: cbpFloatRingPulse 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

/* نفس فكرة الحلقة الواحدة لكن بحلقتين متتاليتين (فرق نص دورة بين الاتنين) */
.cbp-float-btn[data-cbp-anim="ring_double"]::after,
.cbp-float-btn[data-cbp-anim="ring_double"]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	z-index: -1;
	animation: cbpFloatRingPulse 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.cbp-float-btn[data-cbp-anim="ring_double"]::before {
	animation-delay: .9s;
}

@keyframes cbpFloatPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}
@keyframes cbpFloatShake {
	0%, 82%, 100% { transform: translateX(0) rotate(0); }
	84% { transform: translateX(-3px) rotate(-8deg); }
	87% { transform: translateX(3px) rotate(8deg); }
	90% { transform: translateX(-3px) rotate(-8deg); }
	93% { transform: translateX(3px) rotate(8deg); }
	96% { transform: translateX(0) rotate(0); }
}
@keyframes cbpFloatBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes cbpFloatRing {
	0%, 100% { transform: rotate(0); }
	4% { transform: rotate(18deg); }
	8% { transform: rotate(-16deg); }
	12% { transform: rotate(14deg); }
	16% { transform: rotate(-12deg); }
	20% { transform: rotate(8deg); }
	24% { transform: rotate(-4deg); }
	28% { transform: rotate(0); }
}
@keyframes cbpFloatBreathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.045); }
}
@keyframes cbpFloatSwing {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(12deg); }
	40% { transform: rotate(-9deg); }
	60% { transform: rotate(6deg); }
	80% { transform: rotate(-3deg); }
}
@keyframes cbpFloatFloatY {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}
@keyframes cbpFloatHeartbeat {
	0%, 100% { transform: scale(1); }
	14% { transform: scale(1.12); }
	28% { transform: scale(1); }
	42% { transform: scale(1.12); }
	70% { transform: scale(1); }
}
@keyframes cbpFloatGlow {
	0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .35); opacity: 1; }
	70% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); opacity: 0; }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 0; }
}
@keyframes cbpFloatWobble {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-6deg); }
	75% { transform: rotate(6deg); }
}
@keyframes cbpFloatSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@keyframes cbpFloatRingPulse {
	0% { transform: scale(1); opacity: .55; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* =========================================
   موبايل: نضمن مسافة أمان من حواف الشاشة الجانبية (notch/home indicator)
   ========================================= */
@media (max-width: 480px) {
	.cbp-float-btn--call.cbp-float-pos-right { right: max(var(--cbp-float-call-h, 20px), env(safe-area-inset-right)); }
	.cbp-float-btn--call.cbp-float-pos-left  { left: max(var(--cbp-float-call-h, 20px), env(safe-area-inset-left)); }
	.cbp-float-btn--wa.cbp-float-pos-right   { right: max(var(--cbp-float-wa-h, 20px), env(safe-area-inset-right)); }
	.cbp-float-btn--wa.cbp-float-pos-left    { left: max(var(--cbp-float-wa-h, 20px), env(safe-area-inset-left)); }
}