/* ===============================
   Categories Page Styles
   =============================== */

/* --- Page Title --- */
.categories-title {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin: 30px 0 20px;
  cursor: default;
  color: #333;
  animation: pop 0.5s ease forwards;
}

.categories-title svg {
  color: blue;
  margin: 0px 10px;
}

/* --- Grid Layout --- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 10px;
  margin: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
}

/* --- Category Card --- */
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  padding: 30px 20px;
  color: #333;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  animation: pop 0.5s ease forwards;
}

/* --- Animation --- */
@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* --- Category Icon --- */
.category-icon {
  font-size: 40px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.icon-doll    { color: #f472b6; } /* صورتی */
.icon-car     { color: #ef4444; } /* قرمز */
.icon-game    { color: #3b82f6; } /* آبی */
.icon-brain   { color: #f59e0b; } /* نارنجی */
.icon-edu     { color: #10b981; } /* سبز روشن */
.icon-figure  { color: #8b5cf6; } /* بنفش */
.icon-puzzle  { color: #74c69d; }
.icon-control { color: #74c69d; }

.category-card:hover .category-icon {
  transform: scale(1.15);
  filter: brightness(1.2);
}

/* --- Category Title --- */
.category-card h2 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

/* --- Product Count Badge --- */
.category-productCount {
  font-size: 12px;
  color: #16a34a;
  background: #2563eb1a;
  border-radius: 10px;
  padding: 3px;
}

/* --- Mobile Responsive --- */
@media (max-width: 640px) {
  .categories-title {
    font-size: 22px;
  }
  .category-card {
    padding: 18px;
  }
  .category-icon {
    font-size: 34px;
  }
}