/* =====================================================================
   product-card-calm.css
   إعادة تصميم بطاقة المنتج بالنمط "الهادئ" المستوحى من تصميم
   Filter Products based on Brand (بطاقة بيضاء نظيفة، صورة مربّعة بـ zoom
   خفيف، حدود ناعمة محايدة، ظل لطيف يكبر عند المرور، نص هادئ، شارات بسيطة).

   يُحمَّل بعد styles.css و premium-polish.css فيفوز بترتيب المصدر.
   لا يعدّل HTML أو JS — يحافظ على كل عناصر البطاقة ووظائفها
   (المفضلة، المشاهدات، التوصيل، رابط التاجر، التقييم) ويعيد تنسيقها فقط.
   يُطبّق على كل بطاقات المنتجات (الرئيسية، الكتالوج، المتجر، المفضلة، ذات صلة).
   ===================================================================== */

:root {
  --calm-card-bg: #ffffff;
  --calm-border: rgba(0, 0, 0, 0.10);
  --calm-text: #1a1a1a;
  --calm-muted: #717182;
  --calm-radius: 14px;
  --calm-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --calm-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
  --calm-chip-bg: #f4f4f6;
  --calm-chip-text: #545467;
  --calm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── الهيكل: بطاقة بيضاء هادئة ───────────────────────────────────── */
.product-card.product-card-refined {
  background: var(--calm-card-bg) !important;
  border: 1px solid var(--calm-border) !important;
  border-radius: var(--calm-radius) !important;
  box-shadow: var(--calm-shadow) !important;
  overflow: hidden !important;
  transition: transform 0.28s var(--calm-ease), box-shadow 0.28s var(--calm-ease), border-color 0.28s var(--calm-ease) !important;
}
.product-card.product-card-refined:hover {
  transform: translateY(-4px) !important;
  border-color: var(--calm-border) !important;
  box-shadow: var(--calm-shadow-hover) !important; /* ظل محايد بلا توهّج ملوّن */
}

/* ── الصورة: نسبة 4:3 (أقصر من المربّعة) مع zoom خفيف ───────────── */
.product-card.product-card-refined .product-image-wrap {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  background: #f7f7f8 !important;
  overflow: hidden !important;
}
.product-card.product-card-refined .product-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s var(--calm-ease) !important;
}
.product-card.product-card-refined:hover .product-image-wrap img {
  transform: scale(1.05) !important;
}

/* ── تهدئة الطبقة فوق الصورة + شارة المشاهدات ──────────────────── */
.product-card.product-card-refined .product-image-overlay {
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.06)) !important;
}
.product-card.product-card-refined .views-badge {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #545467 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 600 !important;
  backdrop-filter: blur(4px);
}

/* ── شريط الحالة (condition ribbon): شارة بسيطة هادئة ───────────── */
.product-card.product-card-refined .condition-ribbon {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #545467 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
}

/* ── زر المفضلة: دائرة بيضاء ناعمة ──────────────────────────────── */
.product-card.product-card-refined .product-hover-action-favorite {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  color: #d4183d !important;
}

/* ── جسم البطاقة: مضغوط من الأسفل (مسافات أقل) ─────────────────── */
.product-card.product-card-refined .product-body {
  padding: 10px 11px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

/* العنوان: وزن متوسط، هادئ، سطر واحد افتراضاً (بلا min-height يطيل) ── */
.product-card.product-card-refined .product-title {
  color: var(--calm-text) !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* تقليص صف السعر (إزالة هوامش زائدة) ── */
.product-card.product-card-refined .product-price-row { margin: 0 !important; padding: 0 !important; }
.product-card.product-card-refined .product-meta-grid { margin: 0 !important; }

/* السعر / "تواصل للسعر": بارز لكن هادئ (بلا تدرّج صاخب) ── */
.product-card.product-card-refined .product-price,
.product-card.product-card-refined .product-price-hero {
  color: var(--calm-text) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

/* المنطقة + التوصيل: شارات محايدة بسيطة ── */
.product-card.product-card-refined .region-pill,
.product-card.product-card-refined .product-region-badge {
  background: var(--calm-chip-bg) !important;
  color: var(--calm-chip-text) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  box-shadow: none !important;
}
.product-card.product-card-refined .product-delivery-icon {
  background: var(--calm-chip-bg) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.product-card.product-card-refined .product-delivery-icon.is-available {
  background: rgba(76, 175, 80, 0.12) !important;
}

/* التاجر + التقييم: نص ثانوي هادئ ── */
.product-card.product-card-refined .product-store-rating-row {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding-top: 6px !important;
  margin-top: 0 !important;
}
.product-card.product-card-refined .store-link {
  color: var(--calm-muted) !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
}
.product-card.product-card-refined .store-link:hover {
  color: #B45309 !important; /* يحافظ على تباين AA */
}
.product-card.product-card-refined .product-rating-inline {
  color: var(--calm-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}
.product-card.product-card-refined .product-rating-star { color: #f5a623 !important; }
.product-card.product-card-refined .rating-count { color: #9a9aa8 !important; font-weight: 500 !important; }

/* ── في الشبكة (catalog/seller/favorites): عرض مرن بدل العرض الثابت ── */
.catalog-grid .product-card.product-card-refined,
.seller-products-wide .product-card.product-card-refined,
#favoritesGrid .product-card.product-card-refined,
#relatedProductsGrid .product-card.product-card-refined {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* في شريط الرئيسية الأفقي: عرض ثابت مريح ── */
.cards-strip .product-card.product-card-refined {
  min-width: 230px !important;
  max-width: 230px !important;
}

/* ── الجوال (mobile-first): بطاقة مضغوطة وقصيرة ────────────────── */
@media (max-width: 700px) {
  .product-card.product-card-refined .product-body { padding: 8px 9px !important; gap: 4px !important; }
  .product-card.product-card-refined .product-title {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 1 !important; /* سطر واحد على الجوال لتقصير البطاقة */
  }
  .product-card.product-card-refined .product-price,
  .product-card.product-card-refined .product-price-hero { font-size: 0.9rem !important; }
  .product-card.product-card-refined .region-pill,
  .product-card.product-card-refined .product-region-badge { font-size: 0.68rem !important; padding: 2px 7px !important; }
  .product-card.product-card-refined .store-link { font-size: 0.74rem !important; }
  .product-card.product-card-refined .product-rating-inline { font-size: 0.72rem !important; }
  .product-card.product-card-refined .product-store-rating-row { padding-top: 5px !important; }
}

/* شاشات صغيرة جداً: ضغط إضافي للجسم (دون ضغط العرض كثيراً) */
@media (max-width: 380px) {
  .product-card.product-card-refined .product-body { padding: 7px 8px !important; }
}

/* =====================================================================
   تباعد الشبكة على الجوال: بطاقات متقاربة بمسافة صغيرة + عرض مريح
   (طلب المالك: متقاربين جانبياً، مسافة صغيرة، أبعاد مريحة بلا ضغط زائد)
   ===================================================================== */
/* ملاحظة جوهرية: .cards-strip شبكة CSS تستخدم grid-auto-columns لتحديد عرض
   العمود. لتصبح الفجوة حقيقية يجب أن يساوي عرض العمود عرض البطاقة، وإلا
   يبقى فراغ داخلي يبدو كأنه مسافة كبيرة مهما صغّرنا gap. */

/* الجوال (≤700px) */
@media (max-width: 700px) {
  /* شبكة الكتالوج/المتجر/المفضلة: عمودان بفجوة صغيرة */
  #catalogView .catalog-grid,
  #catalogView .compact-grid,
  #favoritesGrid,
  #relatedProductsGrid,
  .seller-products-wide,
  #myProductsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* الشريط الأفقي: عرض العمود = عرض البطاقة + فجوة صغيرة جداً (طلب المالك) */
  .cards-strip {
    grid-auto-columns: 160px !important;
    gap: 2px !important;
    padding-inline: 0 !important;
  }
  .cards-strip .product-card,
  .cards-strip .product-card.product-card-refined {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
  }
}

/* شاشات صغيرة جداً (≤380px) */
@media (max-width: 380px) {
  #catalogView .catalog-grid,
  #catalogView .compact-grid,
  #favoritesGrid,
  #relatedProductsGrid,
  .seller-products-wide { gap: 7px !important; }
  .cards-strip { grid-auto-columns: 150px !important; gap: 2px !important; }
  .cards-strip .product-card,
  .cards-strip .product-card.product-card-refined {
    width: 150px !important; min-width: 150px !important; max-width: 150px !important;
  }
}

/* الكمبيوتر (>700px): عمود مريح + فجوة مريحة (لا تكدّس ولا فراغ داخلي) */
@media (min-width: 701px) {
  .cards-strip { grid-auto-columns: 205px !important; gap: 14px !important; }
  .cards-strip .product-card,
  .cards-strip .product-card.product-card-refined {
    width: 205px !important; min-width: 205px !important; max-width: 205px !important;
  }
}

/* =====================================================================
   أيقونات شريط الجوال السفلي: SVG احترافية + حالة نشطة بلون الهوية (أخضر)
   ===================================================================== */
.mobile-bottom-nav-icon { font-size: 0 !important; line-height: 0 !important; }
.mobile-bottom-nav-icon svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
}
.mobile-bottom-nav-item { color: #5b6573 !important; }
.mobile-bottom-nav-item.is-active {
  background: linear-gradient(180deg, rgba(76,175,80,0.16), rgba(76,175,80,0.06)) !important;
  color: #2E7D32 !important;
}
.mobile-bottom-nav-badge {
  background: #E65100 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* =====================================================================
   تهدئة الهيرو والبحث في الرئيسية — إزالة القوس-قزح الغاريش
   ===================================================================== */
/* حدّ البحث: من قوس-قزح دوّار → حدّ أنيق هادئ */
.rainbow-border { display: none !important; }
.google-search-wrapper { margin: 14px 16px !important; }
.google-search-wrapper .search-box {
  border: 1px solid rgba(20,49,38,0.12) !important;
  box-shadow: 0 2px 10px rgba(16,40,34,0.06) !important;
  border-radius: 999px !important;
}
.google-search-wrapper .search-box:focus-within {
  border-color: #4CAF50 !important;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.16) !important;
}
/* زر "ابدأ البيع": من قوس-قزح → أخضر علامة تجارية نظيف */
#homeView .rainbow-btn-outer {
  background: none !important;
  animation: none !important;
  padding: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
#homeView .rainbow-btn-inner,
#homeView .hero-actions .rainbow-btn-inner {
  background: linear-gradient(135deg, #4CAF50, #2E7D32) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(46,125,50,0.28) !important;
}
/* زر "تصفح المنتجات" الذهبي: تنعيم الحواف لتناسق */
#homeView .hero-actions .golden-btn { border-radius: 14px !important; }

/* =====================================================================
   اسم المنصة في الفوتر: لون أسود (كان أبيض غير مقروء)
   ===================================================================== */
.site-footer.footer .footer-brand h3 {
  color: #1a1a1a !important;
  text-shadow: none !important;
  letter-spacing: -0.005em;
}
.site-footer.footer .footer-brand p {
  color: rgba(26, 26, 26, 0.72) !important;
  text-shadow: none !important;
}

/* =====================================================================
   Topbar (الجوال): إصلاح تموضع الشعار + الاسم
   - كان: شعار 46×46 داخل غلاف 42×42 يطفح ويُقصّ
   - الآن: شعار وغلاف متطابقان 40×40 مع object-fit + توسيط نظيف
   ===================================================================== */
@media (max-width: 900px) {
  .topbar.site-header.topbar-layout-lock .brand {
    gap: 10px !important;
    align-items: center !important;
  }
  .topbar.site-header.topbar-layout-lock .brand-mark.topbar-logo-wrap {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(16, 40, 34, 0.10) !important;
  }
  .topbar.site-header.topbar-layout-lock .topbar-logo-img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 12px !important;
  }
  .topbar.site-header.topbar-layout-lock .brand-copy {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
  .topbar.site-header.topbar-layout-lock #siteBrandTitle {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #2E7D32 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* =====================================================================
   شريط الجوال السفلي: أيقونات SVG احترافية + لون الهوية الأخضر
   ===================================================================== */
.mobile-bottom-nav-icon svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
}
.mobile-bottom-nav-icon {
  display: grid !important;
  place-items: center !important;
  height: 24px !important;
}
/* الحالة النشطة: أخضر الهوية بدل الأزرق */
.mobile-bottom-nav-item.is-active {
  background: linear-gradient(180deg, rgba(76, 175, 80, 0.16), rgba(76, 175, 80, 0.06)) !important;
  color: #2E7D32 !important;
}
.mobile-bottom-nav-item { color: #475569 !important; }
/* شارة العداد: لون الهوية الذهبي/البرتقالي */
.mobile-bottom-nav-badge {
  background: #E65100 !important;
  color: #fff !important;
  font-weight: 800 !important;
}