/* =================================================
   Blog Wall – LOWER (IDs Wall)
   Stone / Brick Inspired – Tameecom Style
================================================= */

.wall-wrapper {
  max-width: var(--width-wall);
  margin: 40px auto;
  direction: rtl;
  text-align: center;
}

/* ================= GRID ================= */

.wall-container {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ================= ID BOX ================= */

.wall-box {
  width: 92px;              /* كبرنا الحجر */
  height: 82px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* حجر فاتح مع ملمس خفيف */
  background:
    linear-gradient(135deg, #ffffff, #fffaf2),
    radial-gradient(circle at 20% 20%, rgba(255,152,0,.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(84,96,168,.05), transparent 45%);

  color: var(--color-accent);

  font-size: 24px;          /* صغرنا الرقم لمسة */
  font-weight: 800;
  line-height: 1;
  letter-spacing: .5px;

  border-radius: var(--radius-md);
  border: 2px solid var(--color-accent);

  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wall-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
}

/* ================= SPECIAL IDS ================= */

.wall-box.special {
  background:
    linear-gradient(135deg, var(--color-accent), var(--color-hover)),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 45%);
  color: #fff;
  border-color: var(--color-hover);
}

/* ================= HIDDEN ================= */

.hidden-id {
  display: none !important;
}

/* ================= COUNTER ================= */

.wall-counter {
  margin-top: 18px;
  font-size: var(--font-meta);
  font-weight: 600;
  color: var(--color-muted);
}

/* ================= LOAD MORE BUTTON ================= */

#loadMoreBtn {
  display: block;
  margin: 24px auto 0;   /* في المنتصف */
}

/* ================= MOBILE ================= */

@media (max-width: 600px) {

  .wall-box {
    width: 82px;
    height: 72px;
    font-size: 22px;
  }

  .wall-container {
    gap: 10px;
  }
}