/* ============ Frontend: Floating Buttons ============ */
.fcb-wrapper {
	position: fixed;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* الوضع الرأسي */
.fcb-pos-bottom-right,
.fcb-pos-bottom-left { bottom: 24px; }
.fcb-pos-top-right,
.fcb-pos-top-left { top: 24px; }
.fcb-pos-middle-right,
.fcb-pos-middle-left { top: 50%; transform: translateY(-50%); }

/* الوضع الأفقي */
.fcb-pos-bottom-right,
.fcb-pos-top-right,
.fcb-pos-middle-right { right: 20px; }
.fcb-pos-bottom-left,
.fcb-pos-top-left,
.fcb-pos-middle-left { left: 20px; }

.fcb-group {
	display: flex;
	gap: 10px;
}
.fcb-layout-vertical .fcb-group { flex-direction: column; }
.fcb-layout-horizontal .fcb-group { flex-direction: row; flex-wrap: wrap; }

.fcb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	min-width: 52px;
	min-height: 52px;
	text-decoration: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	transition: transform .15s ease, box-shadow .15s ease;
	border: none;
	line-height: 1.2;
	white-space: nowrap;
}
.fcb-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,.3);
	opacity: .95;
}
.fcb-icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	display: block;
}
.fcb-social-btn {
	padding: 12px;
	min-width: 46px;
	min-height: 46px;
}

/* ============ 10 أشكال للأزرار ============ */

/* 1. دائري كامل */
.fcb-shape-1 { border-radius: 50%; }

/* 2. مربع بحواف دائرية */
.fcb-shape-2 { border-radius: 14px; }

/* 3. مربع حاد الحواف */
.fcb-shape-3 { border-radius: 0; }

/* 4. كبسولة / بيضاوي عريض */
.fcb-shape-4 { border-radius: 50px; }

/* 5. سداسي */
.fcb-shape-5 {
	border-radius: 6px;
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
	padding: 16px 22px;
}

/* 6. معين */
.fcb-shape-6 {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	padding: 20px;
}

/* 7. ورقة (زاوية واحدة دائرية أكثر) */
.fcb-shape-7 { border-radius: 50% 8px 50% 8px; }

/* 8. مربع ناعم Squircle */
.fcb-shape-8 { border-radius: 35% / 45%; }

/* 9. دائري بحلقة خارجية */
.fcb-shape-9 {
	border-radius: 50%;
	outline: 3px solid rgba(255,255,255,.7);
	outline-offset: 3px;
}

/* 10. شريط جانبي Ribbon */
.fcb-shape-10.fcb-call-btn,
.fcb-shape-10.fcb-whatsapp-btn {
	border-radius: 0 30px 30px 0;
}
.fcb-pos-bottom-left .fcb-shape-10.fcb-call-btn,
.fcb-pos-bottom-left .fcb-shape-10.fcb-whatsapp-btn,
.fcb-pos-top-left .fcb-shape-10.fcb-call-btn,
.fcb-pos-top-left .fcb-shape-10.fcb-whatsapp-btn,
.fcb-pos-middle-left .fcb-shape-10.fcb-call-btn,
.fcb-pos-middle-left .fcb-shape-10.fcb-whatsapp-btn {
	border-radius: 30px 0 0 30px;
}
.fcb-shape-10.fcb-social-btn { border-radius: 50%; }

/* التحكم في إظهار/إخفاء النص على الهاتف حسب اختيار الأدمن */
@media (max-width: 480px) {
	.fcb-wrapper.fcb-mobile-text-hide .fcb-btn .fcb-text { display: none; }
	.fcb-wrapper.fcb-mobile-text-hide .fcb-btn { padding: 12px; min-width: 50px; }

	.fcb-wrapper.fcb-mobile-text-show .fcb-btn { padding: 10px 14px; font-size: 13px; }
	.fcb-wrapper.fcb-mobile-text-show .fcb-icon svg { width: 20px; height: 20px; }
}

/* ============ تحريك الأيقونة (تأثير جذب انتباه) ============ */
@keyframes fcb-icon-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}
@keyframes fcb-ring-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
	70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.fcb-btn.fcb-animate {
	animation: fcb-ring-pulse 2.2s infinite;
}
.fcb-btn.fcb-animate .fcb-icon svg {
	animation: fcb-icon-pulse 1.6s ease-in-out infinite;
	transform-origin: center;
}
.fcb-btn.fcb-animate:hover {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.fcb-btn.fcb-animate,
	.fcb-btn.fcb-animate .fcb-icon svg {
		animation: none;
	}
}

/* ============ Admin ============ */
.fcb-admin-wrap .fcb-tab-content {
	background: #fff;
	border: 1px solid #ccd0d4;
	border-top: none;
	padding: 20px;
}
.fcb-shape-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	max-width: 700px;
}
.fcb-shape-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	padding: 10px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
}
.fcb-shape-option input { margin-bottom: 4px; }
.fcb-shape-preview {
	width: 40px;
	height: 40px;
	background: #2271b1;
	display: inline-block;
}
.fcb-social-table th, .fcb-social-table td {
	padding: 8px 10px;
	vertical-align: middle;
}