/* iPad-style app icons + home/admin layout polish */

/* ——— Squircle App Icons (iOS-like) ——— */
.app-icon {
  --icon-size: 56px;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 22%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  background: linear-gradient(160deg, var(--icon-from, #A71C20) 0%, var(--icon-to, #6B1013) 100%);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.app-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
}
.app-icon i,
.app-icon svg {
  width: 48%;
  height: 48%;
  stroke-width: 2.2;
  position: relative;
  z-index: 1;
}
.app-icon-sm { --icon-size: 40px; }
.app-icon-md { --icon-size: 52px; }
.app-icon-lg { --icon-size: 64px; }

.app-icon-red    { --icon-from: #E23B3F; --icon-to: #A71C20; }
.app-icon-green  { --icon-from: #2D9B68; --icon-to: #1E6B47; }
.app-icon-amber  { --icon-from: #F6B73C; --icon-to: #D97706; }
.app-icon-blue   { --icon-from: #3B9EFF; --icon-to: #007AFF; }
.app-icon-slate  { --icon-from: #8B95A5; --icon-to: #4B5563; }
.app-icon-purple { --icon-from: #A78BFA; --icon-to: #6D28D9; }
.app-icon-teal   { --icon-from: #2DD4BF; --icon-to: #0F766E; }
.app-icon-rose   { --icon-from: #FB7185; --icon-to: #BE123C; }
.app-icon-pink   { --icon-from: #F472B6; --icon-to: #DB2777; }
.app-icon-orange { --icon-from: #FB923C; --icon-to: #C2410C; }
.app-icon-gray   { --icon-from: #9CA3AF; --icon-to: #4B5563; }
.app-icon-emerald { --icon-from: #34D399; --icon-to: #059669; }

/* لون واحد لكل مربّعات أيقونات الأقسام: التدرّج من --brand-gradient وحده.
   يضبط background مباشرةً بدل --icon-from/--icon-to لأن زاوية التدرّج نفسها
   جزء من القيمة المشتركة (135deg) لا 160deg التي في .app-icon أعلاه.
   يأتي بعد المتغيّرات الملوّنة فيغلبها عند تساوي الأولوية.
   ما عاد اللون يميّز الأيقونات — الشكل وحده يميّزها، والنص تحتها. */
.app-icon-brand { background: var(--brand-gradient); }

/* ——— Home hub layout ——— */
.home-hub {
  display: grid;
  gap: 20px;
  margin-bottom: 28px;
}
.home-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.home-action {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 16px 10px 14px;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 110px;
}
.home-action:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.home-action:hover .app-icon {
  transform: scale(1.06);
}
.home-action h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.stats-banner {
  background: linear-gradient(135deg, #C4282D 0%, #A71C20 55%, #7A1215 100%);
  border-radius: 20px;
  padding: 22px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  color: white;
  box-shadow: 0 8px 24px rgba(167, 28, 32, 0.28);
}
.stats-banner .stat-item { text-align: center; }
.stats-banner .stat-val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.stats-banner .stat-lbl { font-size: 11px; opacity: 0.9; margin-top: 4px; font-weight: 600; }

.ai-banner {
  background:
    linear-gradient(135deg, rgba(30,107,71,0.62), rgba(21,76,50,0.70)),
    url('/assets/images/scanner-bg.webp') center/cover;
  border-radius: 20px;
  padding: 22px 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(30, 107, 71, 0.28);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.55s ease both;
}
.ai-banner-text h2 { margin: 0 0 6px; font-weight: 800; font-size: 22px; }
.ai-banner-text p { margin: 0; font-size: 13px; opacity: 0.92; line-height: 1.5; }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 28px 0 14px;
}
.section-title {
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  margin: 0;
}
.view-all {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.category-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: none;
}
.category-rail::-webkit-scrollbar { display: none; }
.category-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 72px;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.category-app span {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.product-card {
  min-width: 180px;
  max-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* لا شيء منهما كان يضبط line-height، فكانا يرثان 1.6 من body، والفجوة
   بينهما 4px وهي أضيق فجوة في البطاقة (فوقها 10px وتحتها 8px). نصف
   الرصاص تحت الاسم 4.2px وفوق التصنيف 3.6px، فتلتقي نزلات الاسم الثقيل
   (800) مع علامات العربية (الشدّة والتنوين) في تلك الأربع. الضبط هنا
   بنيوي: ارتفاع سطر صريح يحترم حدّ العربية (1.5 للعنوان، 1.7 للنص)
   وإيقاع رأسي واحد 10/8/8. */
.product-card h3 {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.product-card p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-tertiary);
  margin: 0;
  overflow-wrap: anywhere;
}
/* بنية البطاقة الواحدة: صورة · اسم · تصنيف · شارة · «عرض التفاصيل».
   الشارة في الموضع الرابع دائماً، لا فوق الاسم.
   الصورة صارت `.logo-tile` في components.css — كانت `.pc-thumb` هنا بعرضٍ
   كامل وارتفاع 96 وخلفية `--bg-surface-hover` (رمادية داكنة في الوضع
   المظلم، فتختفي عليها العلامات السوداء). */
/* .badge أصلها inline-block؛ داخل عمود مرن تتحوّل إلى كتلة فتمتدّ بعرض
   البطاقة كلّها. flex-start يُبقيها ملتصقة بنصّها. */
.product-card .badge { align-self: flex-start; margin-top: 8px; }
/* Row (.h-scroll) stretches every card to the tallest sibling by
   default — pin the cue to the actual bottom instead of letting it
   float right under a short 1-line name while a 2-line sibling's
   cue sits lower. */
.product-card .card-detail-cue { margin-top: auto; padding-top: 6px; }

/* ═══ بطاقة المشهور ═══
   كانت دائرة رمادية فيها أيقونة yad عامّة، فكل مشهور بلا صورة يبدو نسخة
   من الآخر. الصورة الآن مربّعة بتدوير مصغّرة المنتج نفسه (12px)، وبديلها
   الحرف الأوّل من الاسم على التدرّج المشترك — يفرّق بين شخصٍ وآخر. */
.celeb-card {
  display: flex;
  flex-direction: column;
  text-align: initial;
}
/* الرابط يحمل كل ما فوق الزرّ، وينمو ليدفع الزرّ إلى قاع البطاقة */
.celeb-card .celeb-card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}
.celeb-avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;   /* نفس تدوير `.logo-tile` (`--radius-md`) */
  overflow: hidden;
  margin-bottom: 10px;
  background-color: var(--bg-surface-hover);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
/* لا صورة: سطحٌ محايد وأيقونة صامتة، بلا أي لون هوية.
   كان الحرف الأول من الاسم بـ34px فوق --brand-gradient: حرفٌ عربي مفرد
   مكبَّر لا يُقرأ بورتريهاً بل شظيّةَ اسم، والتدرّج يجعل **غياب** الصورة
   أعلى عناصر البطاقة صوتاً — فتسبق البطاقةُ الناقصة البطاقةَ الكاملة إلى
   العين. الأحمر يبقى حيث يعني شيئاً: زرّ الحظر وشارة عدد الحظر. */
.celeb-avatar.is-empty {
  background: var(--bg-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}
.celeb-avatar .celeb-fallback-icon {
  width: 40%;
  height: 40%;
  color: var(--text-tertiary);
  stroke-width: 1.5;
  flex-shrink: 0;
}
.celeb-card .celeb-name {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 6px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
/* سطر السبب: سطر واحد بحذفٍ في آخره، لا أصغر ولا أبهت من نصّ ثانوي */
.celeb-card .celeb-reason {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.celeb-card .celeb-count {
  align-self: flex-start;
  margin: 0 0 10px;
}
/* الزرّ آخر عنصر: margin-top:auto يدفعه إلى القاع فتتساوى البطاقات
   مهما اختلف طول الاسم أو السبب. الارتفاع 44px حدّاً أدنى صراحةً. */
.celeb-card .celeb-block-btn {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
}

.h-scroll {
  display: flex;
  /* بطاقات الرفّ الواحد بارتفاع واحد مهما اختلف طول النص — stretch هي
     القيمة الافتراضية، وتُكتب صراحةً لأن تساوي الارتفاع شرط في البنية. */
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; }

.feed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.feed-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.campaign-card {
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}

/* ═══ مكوّن وسائط البطاقة — واحد لبطاقات الحملات والمحتوى معاً ═══
   كانت كلٌّ منهما تكتب <div style="height:120px; background:url(...)"> وحدها،
   ومشروطة بوجود صورة: فبطاقة بلا غلاف تفقد منطقة الوسائط كلّها وتنهار،
   وبطاقة بغلاف تحتفظ بها — فيبدو النوعان منتجين مختلفين على صفحة واحدة.
   هنا نسبة واحدة، وتدوير واحد، وانزياح واحد، وسلوك واحد عند غياب الصورة. */
.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: var(--bg-surface-hover);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
/* لا صورة: نفس معالجة .shops-panel — التدرّج المشترك وأيقونة باهتة وحدها،
   لا صندوق فارغ ولا صورة أرشيفية لا تخصّ المادّة. */
.card-media.is-empty {
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-media .card-media-icon {
  width: 34%;
  max-width: 72px;
  aspect-ratio: 1;
  height: auto;
  color: #fff;
  opacity: 0.12;
  stroke-width: 1.5;
  flex-shrink: 0;
}
.campaign-card:last-child { margin-bottom: 0; }
.news-card {
  display: flex;
  gap: 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 10px;
}
.news-card:last-child { margin-bottom: 0; }
.news-card img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.activity-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.activity-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.map-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
/* .map-preview-bg وطبقة التعتيم rgba(17,24,39,0.42) فوقها أُزيلتا مع الصورة:
   لم يبق لهما مستعمل بعد أن صارت اللوحة .shops-panel. */

/* لوحة «محلات داعمة للمقاطعة» — بلا صورة. التدرّج نفسه المشترك، وأيقونة
   lucide كبيرة بشفافية منخفضة زينةً وحيدة، والزرّ فوقها.
   الزرّ شبح: خلفيته شفّافة، فنصّه يقع على التدرّج مباشرةً — ولذلك يُقاس
   عليه لا على خلفية زرٍّ مصمتة. أبيض على أفتح موقف (#C1272C) = 5.84:1،
   وعلى أغمقه (#8C171B) أعلى. زرّ .btn-primary الأحمر هنا كان سيقيس 1.27:1
   بإزاء التدرّج، أي شكلاً غير مرئي أصلاً. */
.shops-panel {
  position: relative;
  width: 100%;
  height: 160px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shops-panel-ornament {
  position: absolute;
  width: 132px;
  height: 132px;
  inset-inline-end: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  opacity: 0.12;
  pointer-events: none;
  stroke-width: 1.5;
}
.shops-panel-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
}
.shops-panel-btn:hover { background: rgba(255, 255, 255, 0.14); }
.shops-panel-btn i,
.shops-panel-btn svg { flex-shrink: 0; }

.mobile-search-bar {
  background: var(--bg-surface);
  border: 1.5px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
  padding: 14px 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-strict);
  margin-bottom: 18px;
  box-shadow: var(--shadow-md);
  cursor: text;
}
/* lucide.createIcons() يستبدل <i data-lucide> بعنصر <svg> فعلياً — لا بد من
   استهداف الوسمين معاً وإلا فشلت القاعدة صامتة بعد التحميل */
.mobile-search-bar i,
.mobile-search-bar svg { color: var(--text-strict); flex: 0 0 auto; }

/* ——— Admin panel polish ——— */
.admin-kpi-icon.app-icon { --icon-size: 48px; }
.nav-link .app-icon {
  --icon-size: 32px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.nav-link .app-icon i,
.nav-link .app-icon svg { width: 55%; height: 55%; }

@media (min-width: 640px) {
  .home-actions { gap: 16px; }
  .home-action { min-height: 120px; padding: 18px 12px; }
  .home-action h3 { font-size: 13px; }
  .feed-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-banner .stat-val { font-size: 26px; }
}

@media (min-width: 900px) {
  .home-hub {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
  }
  .stats-banner {
    height: 100%;
    align-content: center;
    padding: 28px 20px;
  }
  .home-actions {
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
  }
  .home-action {
    justify-content: center;
    min-height: 0;
  }
  .feed-grid { grid-template-columns: repeat(3, 1fr); }
  .mobile-search-bar { display: none; }
  .shops-panel { height: 180px; }
  .shops-panel-ornament { width: 150px; height: 150px; }
  .ai-banner { padding: 28px 28px; }
  .ai-banner-text h2 { font-size: 26px; }
}

@media (max-width: 480px) {
  .home-actions { grid-template-columns: repeat(2, 1fr); }
  .home-action h3 { font-size: 11px; }
  .app-icon-md { --icon-size: 48px; }
  .ai-banner { flex-direction: column; text-align: center; }
  .stats-banner .stat-val { font-size: 18px; }
}