.cbp-artblock {
	direction: rtl;
	max-width: 850px;
	margin: 35px auto;
	padding: 30px;
	background: var(--cbp-artblock-bg, #ffffff);
	border: 1px solid var(--cbp-artblock-border, #eeeeee);
	border-radius: var(--cbp-artblock-radius, 12px);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	text-align: center;
	box-sizing: border-box;
	font-family: inherit;
}
.cbp-artblock-title {
	margin: 0 0 10px;
	color: var(--cbp-artblock-title-color, #102a43);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}
.cbp-artblock-text {
	margin: 0 auto 24px;
	max-width: 650px;
	color: var(--cbp-artblock-text-color, #52606d);
	font-size: 16px;
	line-height: 1.9;
}
.cbp-artblock-buttons {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.cbp-artblock-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 185px;
	padding: 13px 24px;
	border-radius: 7px;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: 700;
	transition: all 0.2s ease;
	box-sizing: border-box;
}
/* فاصل ثابت بين الأيقونة والنص - margin صريح بدل الاعتماد على flex gap فقط،
   عشان الفاصل يبقى مضمون في كل المتصفحات حتى القديمة منها اللي دعمها لـ gap
   جوه flexbox ضعيف أو غير متوفر، وده اللي كان بيسبب التصاق الأيقونة بالنص. */
.cbp-artblock-btn svg {
	flex-shrink: 0;
	fill: currentColor;
	margin-inline-end: 9px;
}
.cbp-artblock-whatsapp {
	background: var(--cbp-artblock-wa-bg, #f5c400);
	color: var(--cbp-artblock-wa-color, #102a43) !important;
}
.cbp-artblock-whatsapp:hover {
	filter: brightness(0.94);
	transform: translateY(-2px);
}
.cbp-artblock-call {
	background: var(--cbp-artblock-call-bg, #102a43);
	color: var(--cbp-artblock-call-color, #ffffff) !important;
}
.cbp-artblock-call:hover {
	filter: brightness(1.15);
	transform: translateY(-2px);
}

/* محاذاة المحتوى - center (افتراضي) | right | left */
.cbp-artblock--right {
	text-align: right;
}
.cbp-artblock--right .cbp-artblock-text {
	margin-right: 0;
}
.cbp-artblock--right .cbp-artblock-buttons {
	justify-content: flex-start;
}
.cbp-artblock--left {
	text-align: left;
}
.cbp-artblock--left .cbp-artblock-text {
	margin-left: 0;
}
.cbp-artblock--left .cbp-artblock-buttons {
	justify-content: flex-end;
}

@media (max-width: 600px) {
	.cbp-artblock {
		margin: 25px 10px;
		padding: 24px 18px;
	}
	.cbp-artblock-title {
		font-size: 21px;
	}
	.cbp-artblock-text {
		font-size: 15px;
	}
	.cbp-artblock-buttons {
		flex-direction: column;
	}
	.cbp-artblock-btn {
		width: 100%;
		max-width: 320px;
	}
}