/* =====================================================================
   premium-polish.css
   طبقة تحسين بصري "premium" مقصورة على الصفحات غير الرئيسية.
   تُحمَّل بعد styles.css فتفوز بترتيب المصدر.
   لا تلمس #homeView إطلاقاً (الصفحة الرئيسية مصقولة سلفاً).
   لا تعدّل أي HTML أو JS — تستهدف الـ selectors الموجودة فقط.

   النطاق: productView, authView, profileView, cartView, checkoutView,
           ordersView, favoritesView, sellerView, catalogView,
           notificationsView, messagesView (تلطيف خفيف).
   ===================================================================== */

:root {
  --pp-surface: linear-gradient(165deg, #ffffff 0%, #f8fbf9 100%);
  --pp-surface-tint: linear-gradient(165deg, #ffffff 0%, #f3f9f4 100%);
  --pp-border: rgba(20, 49, 38, 0.08);
  --pp-border-strong: rgba(20, 49, 38, 0.14);
  --pp-shadow: 0 2px 8px rgba(16, 40, 34, 0.05), 0 10px 30px rgba(16, 40, 34, 0.07);
  --pp-shadow-hover: 0 6px 18px rgba(16, 40, 34, 0.09), 0 20px 48px rgba(16, 40, 34, 0.13);
  --pp-ring: 0 0 0 3px rgba(76, 175, 80, 0.18);
  --pp-radius: 18px;
  --pp-radius-sm: 12px;
  --pp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pp-grad-primary: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  --pp-grad-accent: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
}

/* =====================================================================
   0) إصلاح التباين (WCAG AA) — يطبّق على كل الموقع بما فيه الرئيسية
   السبب: --muted #999999 كان يرسب (2.65:1). القيمة الجديدة #667085
   تحقق AA على الأبيض (4.97:1) والخلفية (4.62:1) والتدرّجات (4.78:1)
   مع الحفاظ على كونها رمادي ثانوي أنيق. هذا إصلاح قراءة لا تغيير هوية.
   ===================================================================== */
:root {
  --muted: #667085 !important;
  --text-secondary: #475467 !important; /* أغمق قليلاً لتباين أفضل (≈7:1) */
}
.muted,
.small-label,
.inline-muted {
  color: #667085 !important;
}
/* الروابط التي تتحول للبرتقالي عند المرور: استخدم غامق يحقق AA */
.store-link:hover,
.store-link-pro:hover {
  color: #B45309 !important; /* 5.02:1 بدل #FF9800 2.16:1 */
}

/* مجموعة الصفحات المستهدفة (عدا الرئيسية) */
#productView,
#authView,
#profileView,
#cartView,
#checkoutView,
#ordersView,
#favoritesView,
#sellerView,
#catalogView,
#notificationsView {
  --_pp: 1; /* علامة نطاق فقط */
}

/* ── دخول ناعم للعرض عند التبديل ───────────────────────────── */
@keyframes pp-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#productView.view.active,
#authView.view.active,
#profileView.view.active,
#cartView.view.active,
#checkoutView.view.active,
#ordersView.view.active,
#favoritesView.view.active,
#sellerView.view.active,
#notificationsView.view.active {
  animation: pp-fade-in 0.38s var(--pp-ease) both;
}

/* ── العناوين (section-head) ───────────────────────────────── */
#productView .section-head h2,
#authView .section-head h2,
#profileView .section-head h2,
#cartView .section-head h2,
#checkoutView .section-head h2,
#ordersView .section-head h2,
#favoritesView .section-head h2,
#notificationsView .section-head h2,
#sellerView .section-head h2 {
  position: relative;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding-bottom: 10px;
}
#productView .section-head h2::after,
#authView .section-head h2::after,
#profileView .section-head h2::after,
#cartView .section-head h2::after,
#checkoutView .section-head h2::after,
#ordersView .section-head h2::after,
#favoritesView .section-head h2::after,
#notificationsView .section-head h2::after,
#sellerView .section-head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: var(--pp-grad-primary);
}

/* ── البطاقات (card) — زجاجية ناعمة مع رفع عند المرور ───────── */
#productView .card,
#authView .card,
#profileView .card,
#cartView .card,
#checkoutView .card,
#ordersView .card,
#favoritesView .card,
#notificationsView .card,
#sellerView .card {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
  transition: box-shadow 0.3s var(--pp-ease), transform 0.3s var(--pp-ease), border-color 0.3s var(--pp-ease);
}
#productView .card:hover,
#profileView .card:hover,
#cartView .card:hover,
#checkoutView .card:hover,
#ordersView .card:hover,
#favoritesView .card:hover,
#notificationsView .card:hover,
#sellerView .card:hover {
  box-shadow: var(--pp-shadow-hover) !important;
  border-color: var(--pp-border-strong) !important;
}

/* ── الحقول (field) — حواف أنعم + ring تركيز ──────────────── */
#productView .field,
#authView .field,
#profileView .field,
#cartView .field,
#checkoutView .field,
#ordersView .field,
#sellerView .field,
#authView .field-control,
#profileView .field-control {
  border: 1px solid var(--pp-border-strong) !important;
  border-radius: var(--pp-radius-sm) !important;
  background: #fff !important;
  transition: border-color 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease) !important;
}
#productView .field:focus,
#authView .field:focus,
#profileView .field:focus,
#cartView .field:focus,
#checkoutView .field:focus,
#ordersView .field:focus,
#sellerView .field:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: var(--pp-ring) !important;
}

/* ── الأزرار — تدرّج وارتفاع لطيف (مقصور على الصفحات) ───────── */
#productView .btn-primary,
#authView .btn-primary,
#profileView .btn-primary,
#cartView .btn-primary,
#checkoutView .btn-primary,
#ordersView .btn-primary,
#sellerView .btn-primary {
  background: var(--pp-grad-primary) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.24) !important;
  transition: transform 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease), filter 0.2s var(--pp-ease) !important;
}
#productView .btn-primary:hover,
#authView .btn-primary:hover,
#profileView .btn-primary:hover,
#cartView .btn-primary:hover,
#checkoutView .btn-primary:hover,
#ordersView .btn-primary:hover,
#sellerView .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(46, 125, 50, 0.32) !important;
  filter: brightness(1.04) !important;
}
#productView .btn-secondary,
#authView .btn-secondary,
#profileView .btn-secondary,
#cartView .btn-secondary,
#checkoutView .btn-secondary,
#ordersView .btn-secondary,
#sellerView .btn-secondary {
  transition: transform 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease) !important;
}
#productView .btn-secondary:hover,
#authView .btn-secondary:hover,
#profileView .btn-secondary:hover,
#cartView .btn-secondary:hover,
#checkoutView .btn-secondary:hover,
#ordersView .btn-secondary:hover,
#sellerView .btn-secondary:hover {
  transform: translateY(-2px) !important;
}

/* =====================================================================
   1) authView — تسجيل الدخول / إنشاء حساب (انطباع أول premium)
   ===================================================================== */
#authView {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 0 48px;
}
#authView .two-cols {
  max-width: 920px;
  width: 100%;
  gap: 22px;
}
#authView .card {
  padding: 30px 28px !important;
  position: relative;
  overflow: hidden;
}
/* شريط علوي متدرّج لكل بطاقة auth */
#authView .card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 5px;
  background: var(--pp-grad-primary);
}
#authView .card:nth-child(2)::before {
  background: var(--pp-grad-accent);
}
#authView .card h2 {
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 18px;
}
#authView .form-grid { gap: 14px; }
#authView .field {
  padding: 13px 15px !important;
  font-size: 0.98rem !important;
}
#authView .btn {
  padding: 13px 18px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: var(--pp-radius-sm) !important;
  margin-top: 4px;
}

/* =====================================================================
   2) profileView
   ===================================================================== */
#profileView .card { padding: 26px 24px !important; }
#profileView .card h2,
#profileView .card h3 { font-weight: 800; }
#profileView .sep {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pp-border-strong), transparent);
  margin: 22px 0;
}
#profileView .account-actions-row { gap: 10px; }

/* =====================================================================
   3) cartView / checkoutView — قمع التحويل
   ===================================================================== */
#cartView .card,
#checkoutView .card { padding: 22px 20px !important; }

/* بطاقات عناصر السلة */
#cartView .cart-item-card,
#checkoutView .cart-item-card,
#cartView .list-item,
#checkoutView .list-item {
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-sm) !important;
  background: #fff !important;
  box-shadow: var(--pp-shadow) !important;
  transition: box-shadow 0.25s var(--pp-ease), transform 0.25s var(--pp-ease) !important;
}
#cartView .cart-item-card:hover,
#checkoutView .cart-item-card:hover {
  box-shadow: var(--pp-shadow-hover) !important;
  transform: translateY(-1px) !important;
}
#cartView .cart-item-image,
#checkoutView .cart-item-image {
  border-radius: var(--pp-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(16, 40, 34, 0.12);
}

/* لوحة ملخص السلة — لاصقة على الشاشات الكبيرة */
@media (min-width: 901px) {
  #cartView .cart-layout > .card:last-child,
  #checkoutView .checkout-layout > .card:last-child {
    position: sticky;
    top: 88px;
    align-self: start;
    background: var(--pp-surface-tint) !important;
  }
}

/* زر الإتمام الرئيسي */
#checkoutView .btn-block,
#cartView #submitCartOrderBtn {
  background: var(--pp-grad-primary) !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(46, 125, 50, 0.28) !important;
}

/* =====================================================================
   4) ordersView — بطاقات الطلبات + شارات الحالة
   ===================================================================== */
#ordersView .order-card,
#ordersView .list-item {
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  background: var(--pp-surface) !important;
  box-shadow: var(--pp-shadow) !important;
  transition: box-shadow 0.25s var(--pp-ease), transform 0.25s var(--pp-ease) !important;
}
#ordersView .order-card:hover,
#ordersView .list-item:hover {
  box-shadow: var(--pp-shadow-hover) !important;
  transform: translateY(-2px) !important;
}
#ordersView .order-card-product-thumb,
#ordersView .order-card-thumb {
  border-radius: var(--pp-radius-sm) !important;
}

/* =====================================================================
   5) productView — حاوية تفاصيل المنتج
   ===================================================================== */
#productView #productViewContent { margin-top: 6px; }
#productView .product-page-kicker,
#productView .order-details-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(76, 175, 80, 0.1);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.78rem;
}

/* =====================================================================
   6) favoritesView / catalogView / notificationsView
   ===================================================================== */
#notificationsView .list-stack > * {
  border-radius: var(--pp-radius-sm) !important;
  transition: background 0.2s var(--pp-ease) !important;
}
#notificationsView .list-stack > *:hover {
  background: rgba(76, 175, 80, 0.05) !important;
}

/* =====================================================================
   7) messagesView — تلطيف خفيف فقط (لا نكسر whatsapp-shell)
   ملاحظة: لا نلمس السلوك على الجوال (chat-screen-active)
   ===================================================================== */
@media (min-width: 901px) {
  #messagesView .conversations-card {
    border: 1px solid var(--pp-border) !important;
    border-radius: var(--pp-radius) !important;
    box-shadow: var(--pp-shadow) !important;
  }
  #messagesView .messages-main-card {
    border: 1px solid var(--pp-border) !important;
    border-radius: var(--pp-radius) !important;
    box-shadow: var(--pp-shadow) !important;
  }
  #messagesView .messages-search {
    border-radius: 999px !important;
    border: 1px solid var(--pp-border-strong) !important;
  }
  #messagesView .messages-search:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--pp-ring) !important;
    outline: none !important;
  }
}

/* =====================================================================
   8) dashboardView — لوحة التاجر premium
   ===================================================================== */
#dashboardView .dashboard-hero-panel {
  background: linear-gradient(135deg, #1f6b3a 0%, #2E7D32 45%, #357d3a 100%) !important;
  border: none !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: 0 14px 38px rgba(31, 107, 58, 0.28) !important;
  position: relative;
  overflow: hidden;
  color: #fff;
}
#dashboardView .dashboard-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 183, 77, 0.22), transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(255, 255, 255, 0.12), transparent 38%);
  pointer-events: none;
}
#dashboardView .dashboard-hero-kicker {
  display: inline-flex;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff6df;
}
#dashboardView .dashboard-action-pill {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform 0.2s var(--pp-ease), background 0.2s var(--pp-ease) !important;
}
#dashboardView .dashboard-action-pill:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-2px) !important;
}
/* بطاقات الإحصاءات */
#dashboardView .stats-grid > * {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
  transition: box-shadow 0.25s var(--pp-ease), transform 0.25s var(--pp-ease) !important;
}
#dashboardView .stats-grid > *:hover {
  box-shadow: var(--pp-shadow-hover) !important;
  transform: translateY(-2px) !important;
}
/* بطاقات السطح */
#dashboardView .dashboard-surface-card {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
}
#dashboardView .field {
  border: 1px solid var(--pp-border-strong) !important;
  border-radius: var(--pp-radius-sm) !important;
  transition: border-color 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease) !important;
}
#dashboardView .field:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: var(--pp-ring) !important;
}
#dashboardView .btn-primary {
  background: var(--pp-grad-primary) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.24) !important;
  transition: transform 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease) !important;
}
#dashboardView .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(46, 125, 50, 0.32) !important;
}

/* =====================================================================
   9) sellerView — صفحة المتجر premium
   ===================================================================== */
#sellerView .seller-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #f1f8f2 100%) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
  position: relative;
  overflow: hidden;
}
#sellerView .seller-header-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 5px;
  background: var(--pp-grad-primary);
}
#sellerView .seller-feedback-card,
#sellerView .seller-products-card {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
}
#sellerView .section-pill-title {
  position: relative;
  padding-bottom: 8px;
  font-weight: 800;
}
#sellerView .section-pill-title::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--pp-grad-primary);
}

/* =====================================================================
   10) catalogView — تلطيف خفيف (الشبكة مصقولة سلفاً)
   ===================================================================== */
#catalogView .section-head h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* =====================================================================
   11) تحسينات الجوال للصفحات المستهدفة (لا تلمس الرئيسية ولا الشات)
   ===================================================================== */
@media (max-width: 900px) {
  #authView { padding: 12px 0 32px; }
  #authView .two-cols { gap: 16px; }
  #authView .card { padding: 22px 18px !important; }
  #cartView .card,
  #checkoutView .card,
  #profileView .card { padding: 18px 16px !important; }
  #dashboardView .dashboard-hero-panel { border-radius: var(--pp-radius-sm) !important; }
}