/* Add custom CSS styles below */

/* ===== Hala Code Footer Styling ===== */


.store-footer,
.store-footer--live-editor,
.store-footer_inner,
.store-footer [class*="bg-white"],
.store-footer [class*="bg-dark"] {
  background-color: #8CC63F !important; 
}

.store-footer *,
.store-footer a {
  color: #0D1C2E !important;
  transition: all 0.3s ease-in-out;
}

.store-footer *:hover,
.store-footer a:hover,
.store-footer svg:hover path {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.store-footer img[src*="hala"],
.store-footer img[src*="Hala"],
.store-footer img[src*="code"],
.store-footer img[src*="Code"] {
  filter: brightness(0) invert(1) !important; 
  opacity: 1 !important;
  transition: all 0.3s ease-in-out;
}

.store-footer svg,
.store-footer svg path {
  fill: #ffffff !important;
  transition: all 0.3s ease-in-out;
}


:root{
  --hala-indigo:#2C2A6A;      
  --hala-green:#29C36A;       
  --hala-purple:#6F4BD8;     
  --card-radius:16px;
  --card-aspect: 3 / 4;       
  --card-gap:12px;
}


@media (max-width: 767px) {
  
  .s-block .grid.md\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important; 
  }

 
  .s-block .grid.md\:grid-cols-3 > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* الكود التالي يطبق فقط على صفحة يلا لودو */
body[class*="815923483"]::before {
  content: "";
  display: block;
  height: 0; /* مهم حتى ما يأثر على التصميم */
}

/* نضيف الأزرار عبر ::after بشكل وهمي */
body[class*="815923483"] .page-title::after {
  content: "💎 الماس     🪙 ذهب";
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 10px 0;
  margin: 15px auto;
  width: 95%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  cursor: pointer;
}

/* لا يمكننا إنشاء روابط حقيقية في CSS فقط، 
   لذلك نستخدم خدعة: عند النقر على الماس أو الذهب،
   نوجه المستخدم إلى الرابط الصحيح حسب موضع الضغط */
body[class*="815923483"] .page-title::after {
  position: relative;
}
body[class*="815923483"] .page-title::after {
  background: linear-gradient(to right, #ffffff 50%, #ffffff 50%);
}

/* منطقة الماس */
body[class*="815923483"] .page-title::after {
  background: none;
}
body[class*="815923483"] .page-title::after {
  display: flex;
  justify-content: center;
  gap: 20px;
}
body[class*="815923483"] .page-title::after span {
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 10px;
  padding: 8px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* مستحيل تنفيذ click إلى رابط مباشرة بالـCSS فقط،
   لذا إذا تقدر تضيف HTML صغير جدًا داخل وصف التصنيف،
   هذا هو الخيار المثالي 👇 */