:root {
  --primary-orange: #FF6B35;
  --secondary-orange: #F9A620;
  --accent-orange: #F37329;
  --dark-orange: #E65C00;
  --light-orange: #FFE0CC;
  --warm-gray: #F8F5F0;
  --cool-gray: #F0F0F0;
  --dark-gray: #2D2D2D;
  --medium-gray: #666666;
  --light-gray: #CCCCCC;
  --white: #FFFFFF;
  --black: #000000;
  --shadow-light: 0 2px 6px rgba(0,0,0,0.08);
  --transition-smooth: all 0.25s ease;
  --border-radius-circle: 50%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--dark-gray);
  background: var(--white);
  min-height: 100vh;
  direction: rtl;
}

.container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background: var(--white);
  /* [HARDENING-MOBILE] شبكة قد تتجاوز عرض الجهاز بصريًا في بعض الحالات —
     هذا خط دفاع أخير يمنع أي انزياح أفقي/قص للعمود الأخير على الهاتف،
     بغض النظر عن السبب الدقيق (حشو/هوامش/عرض غير محسوب). */
  overflow-x: hidden;
}

.header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.header h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--primary-orange), var(--dark-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 1px 2px rgba(255, 107, 53, 0.1);
}

/* شبكة الفئات - 3×3×3 على الموبايل */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* [REDESIGN] بطاقة التصنيف — مساحة تنفّس داخلية + انتقال أنعم يجمع بين
   الرفع (translateY) والتكبير الخفيف، بدل تكبير مفاجئ بلا عمق. */
.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-radius: 16px;
  transition: var(--transition-smooth);
}

.category-item:hover,
.category-item:focus-visible {
  transform: translateY(-3px) scale(1.02);
  background: var(--warm-gray);
}

.category-image-free {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-circle);
  object-fit: cover;
  border: 2px solid var(--light-orange);
  margin: 0 auto 0.6rem;
  display: block;
  transition: var(--transition-smooth);
}

/* [REDESIGN] الأيقونة البديلة (SVG مضمَّن) — ظل ناعم يمنحها عمقًا حقيقيًا
   بدل دائرة مسطّحة، ويتناسق مع ظل البطاقة عند الـhover. لا border هنا
   عمدًا (التدرّج اللوني نفسه يمنحها حدًا بصريًا واضحًا بلا الحاجة لإطار
   إضافي يزاحم الألوان). */
.category-avatar-svg {
  filter: drop-shadow(0 3px 6px rgba(230, 92, 0, 0.25));
}

.category-item:hover .category-image-free {
  border-color: var(--primary-orange);
  transform: scale(1.05);
}

.category-item:hover .category-avatar-svg {
  filter: drop-shadow(0 5px 10px rgba(230, 92, 0, 0.35));
}

/* [REDESIGN] اسم التصنيف — سطران بدل قصّ صارم بسطر واحد (أسماء عربية
   مركّبة مثل "الحقائب والإكسسوارات" تفقد معناها إن اقتُصّت لكلمة واحدة).
   ارتفاع أدنى ثابت يحافظ على محاذاة صفوف الشبكة سواء كان الاسم سطرًا أو
   سطرين. */
.category-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-gray);
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: 2.6em;
  transition: var(--transition-smooth);
}

.category-item:hover .category-name {
  color: var(--primary-orange);
}

.no-categories {
  text-align: center;
  padding: 2rem;
}

.no-categories h2 {
  color: var(--medium-gray);
}

/* ====================== */
/* التصميم الاستجابة */
@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .category-image-free {
    width: 90px;
    height: 90px;
  }
  .category-name {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .category-image-free {
    width: 100px;
    height: 100px;
  }
  .category-name {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
  }
  .category-image-free {
    width: 70px;
    height: 70px;
  }
  .category-name {
    font-size: 0.85rem;
  }
}