/* =========================================
   Call Button Pro - Frontend Styles
   مبني على تصميم AZEL الأصلي، القيم المتغيرة بتيجي من CSS Variables ديناميكية
   ========================================= */

.cbp-dock-wrap {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 999999;
	display: flex;
	justify-content: center;
	padding: 0 12px env(safe-area-inset-bottom) 12px;
	pointer-events: none;
}

.cbp-dock {
	pointer-events: auto;
	position: relative;
	width: 100%;
	max-width: var(--cbp-bar-max-width, 720px);
	margin-bottom: var(--cbp-bar-margin-bottom-desktop, 14px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--cbp-bar-bg, #fff);
	border: 1px solid var(--cbp-bar-border, #e7ebf3);
	border-radius: var(--cbp-bar-radius, 20px);
	box-shadow: var(--cbp-bar-shadow, 0 -8px 24px rgba(11,29,58,.08));
	padding: var(--cbp-bar-padding, 12px);
	direction: rtl;
}

.cbp-dock-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	min-width: 0;
}

.cbp-dock-brand img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.cbp-dock-brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 160px;
}

.cbp-dock-brand-name {
	font-weight: 800;
	font-size: 15.5px;
	color: #0b1d3a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cbp-dock-brand-sub {
	font-size: 12px;
	color: #6b7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cbp-dock-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.cbp-dock-btn--help {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--cbp-side-bg, #eef1f8);
	color: var(--cbp-side-color, #0b1d3a);
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 50%;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.cbp-dock-btn--help svg { width: 22px; height: 22px; fill: currentColor; }
.cbp-dock-btn--help:hover { background: var(--cbp-side-color, #0b1d3a); color: #fff; }

.cbp-dock-btn--help[data-cbp-anim="shake"] svg { animation: cbpShake 5s infinite; }
.cbp-dock-btn--help[data-cbp-anim="pulse"] { animation: cbpPulse 2s infinite; }
.cbp-dock-btn--help[data-cbp-anim="bounce"] { animation: cbpBounce 2s infinite; }
.cbp-dock-btn--help[data-cbp-anim="ring"] svg { animation: cbpShake 3s infinite; }

@keyframes cbpShake {
	0%, 78%, 100% { transform: translateX(0) rotate(0); }
	80% { transform: translateX(-3px) rotate(-8deg); }
	83% { transform: translateX(3px) rotate(8deg); }
	86% { transform: translateX(-3px) rotate(-8deg); }
	89% { transform: translateX(3px) rotate(8deg); }
	92% { transform: translateX(0) rotate(0); }
}
@keyframes cbpPulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
@keyframes cbpBounce { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }

.cbp-help-badge {
	position: absolute; top: 0; right: 0;
	width: 9px; height: 9px; border-radius: 50%;
	background: #ffc107; border: 2px solid #fff;
	display: none;
}
.cbp-help-badge.cbp-show-badge {
	display: block;
	animation: cbpBadgePulse 1.8s ease-out infinite;
}
@keyframes cbpBadgePulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,193,7,.55); }
	70%  { box-shadow: 0 0 0 7px rgba(255,193,7,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
}

.cbp-dock-btn--wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none !important;
	white-space: nowrap;
	font-weight: 800;
	height: 54px;
	padding: 0 24px;
	background: var(--cbp-wa-bg, #ffc107);
	border-radius: var(--cbp-wa-radius, 16px);
	transition: transform .2s ease, background .2s ease;
}
.cbp-dock-btn--wa svg { width: 24px; height: 24px; fill: var(--cbp-wa-color, #0b1d3a); flex-shrink: 0; }
.cbp-dock-btn--wa span { color: var(--cbp-wa-color, #0b1d3a); font-size: 15px; }
.cbp-dock-btn--wa .cbp-wa-short { display: none; }
.cbp-dock-btn--wa:hover { background: var(--cbp-wa-hover-bg, #e0a800); transform: translateY(-2px); }

@media (max-width: 380px) {
	.cbp-dock-btn--wa .cbp-wa-full { display: none; }
	.cbp-dock-btn--wa .cbp-wa-short { display: inline; }
	.cbp-dock-brand-text { max-width: 96px; }
}

/* ===== Popup ===== */
.cbp-modal-overlay {
	position: fixed; inset: 0; z-index: 9999999;
	background: var(--cbp-popup-overlay, rgba(11,29,58,.55));
	display: flex; align-items: center; justify-content: center;
	padding: 16px; opacity: 0; visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.cbp-modal-overlay.cbp-open { opacity: 1; visibility: visible; }

.cbp-modal {
	position: relative; width: 100%; max-width: 460px; max-height: 85vh;
	overflow-y: auto;
	background: var(--cbp-popup-bg, #fff);
	border-radius: var(--cbp-popup-radius, 20px);
	padding: 26px; direction: rtl; text-align: center;
	box-shadow: 0 24px 60px rgba(11,29,58,.3);
	transform: translateY(20px) scale(.97);
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.cbp-modal-overlay.cbp-open .cbp-modal { transform: translateY(0) scale(1); }
.cbp-modal-overlay[data-cbp-anim="fade"] .cbp-modal { transform: none; }
.cbp-modal-overlay[data-cbp-anim="slide"] .cbp-modal { transform: translateY(60px); }
.cbp-modal-overlay[data-cbp-anim="slide"].cbp-open .cbp-modal { transform: translateY(0); }

.cbp-modal-close {
	position: absolute; top: 10px; left: 10px; width: 32px; height: 32px;
	border: none; border-radius: 50%; background: #eef1f8; color: #0b1d3a;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cbp-modal-close:hover { background: #0b1d3a; color: #fff; }

.cbp-modal-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }

.cbp-modal-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #e6f9ee;
	color: #128c4b;
	border: 1px solid #b4e6c9;
	font-weight: 700;
	font-size: 12px;
	padding: 5px 13px;
	border-radius: 50px;
	margin-bottom: 6px;
}
.cbp-modal-badge svg { width: 14px; height: 14px; fill: #128c4b; flex-shrink: 0; }

.cbp-modal-title { font-size: 20px; font-weight: 800; color: #0b1d3a; margin: 9px 0 4px; }
.cbp-modal-sub { color: #6b7280; font-size: 12.5px; margin-bottom: 11px; }
.cbp-modal-image { width: 100%; border-radius: 12px; margin-bottom: 12px; }
.cbp-modal-text { color: #3a4250; font-size: 13px; line-height: 1.8; margin: 0; }

.cbp-modal-feats {
	display: grid; grid-template-columns: repeat(2,1fr); gap: 7px;
	margin: 14px 0 16px; text-align: right;
}
.cbp-modal-feat { background: #eef1f8; border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: #0b1d3a; }

.cbp-modal-cred-title { font-size: 12.5px; font-weight: 800; color: #0b1d3a; margin-bottom: 9px; }

.cbp-modal-cred-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.cbp-modal-cred-item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 5px; background: #eef1f8; border: 1px solid #e7ebf3; border-radius: 10px; padding: 9px 5px; text-align: center;
}
.cbp-modal-cred-item img { max-width: 100%; height: 38px; object-fit: contain; }
.cbp-modal-cred-item span { font-size: 10px; font-weight: 700; color: #6b7280; line-height: 1.3; }

.cbp-modal-discount {
	display: block; width: fit-content; margin: 14px auto 0;
	background: rgba(255,193,7,.15); border: 1px dashed rgba(255,193,7,.6);
	color: #0b1d3a; font-weight: 800; font-size: 13px; padding: 8px 19px; border-radius: 50px;
}

/* ===== Scroll To Top (خاص بنظام الشريط السفلي فقط - بيتوقف تحميله نهائيًا لو
   نظام العرض المختار هو "أزرار عائمة"؛ زر العودة للأعلى الخاص بالأزرار العائمة
   له إعدادات وكود مستقل تمامًا في float-buttons.css/js) ===== */
/* الشاشات الكبيرة: الزر بيقعد جمب الشريط على نفس المحور السفلي بمسافة واضحة */
.cbp-top-btn {
	position: fixed; z-index: 999998;
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border: none; border-radius: 50%;
	cursor: pointer;
	background: var(--cbp-top-bg, #fff);
	box-shadow: 0 2px 6px rgba(11,29,58,.15);
	opacity: 0; visibility: hidden;
	transform: translateY(10px) scale(.9);
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
	right: calc(50% - (var(--cbp-bar-max-width, 720px) / 2) - var(--cbp-top-gap-desktop, 26px) - 46px);
	bottom: calc(var(--cbp-top-bottom-desktop, 32px) + env(safe-area-inset-bottom));
}
.cbp-top-btn.cbp-show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.cbp-top-btn svg { width: 20px; height: 20px; fill: var(--cbp-top-color, #0b1d3a); }
.cbp-top-btn:hover { background: #ffc107; }

/* الشاشات الصغيرة: مفيش مساحة كفاية جمب الشريط - الزر يرجع فوقه */
@media (max-width: 900px) {
	.cbp-top-btn {
		right: var(--cbp-top-right-mobile, 14px);
		bottom: calc(var(--cbp-top-bottom-mobile, 90px) + env(safe-area-inset-bottom));
	}
}

@media (max-width: 560px) {
	.cbp-dock { border-radius: 0; }
	.cbp-dock-wrap { padding: 0 0 env(safe-area-inset-bottom) 0; }
	.cbp-dock { margin-bottom: var(--cbp-bar-margin-bottom-mobile, 0px); }
}