كيفية تخصيص مربع موافقة الكوكيز في بلوجر ليتناسب تلقائيًا مع أي قالب

<style>
#cookieConsent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 300px;
  background: var(--background-color, #222);
  color: var(--text-color, #fff);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#cookieConsent button {
  background: var(--primary-color, #f39c12);
  color: var(--button-text-color, #fff);
  border: none;
  padding: 8px 15px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s;
}
#cookieConsent button:hover {
  background: var(--primary-dark-color, #e67e22);
}
</style>

<div id="cookieConsent">
  📢 نستخدم ملفات تعريف الارتباط لتحسين تجربتك على موقعنا.  
  <br>
  <button onclick="this.parentElement.style.display='none'">موافق</button>
</div>