/* ========================================
   MY SYSTEM | ماي سيستم
   Navy • Beige • Gold
   ======================================== */

:root {
  --ms-navy: #142B4C;
  --ms-navy-light: #203E63;
  --ms-beige: #F3EBDD;
  --ms-gold: #C8AD7F;
  --ms-white: #FFFFFF;
  --ms-text: #263448;
  --ms-radius: 14px;
}

/* ========================================
   1. خلفية الصفحة
   ======================================== */

html,
body,
#app,
main,
.app-inner,
.store-home,
.page-wrapper {
  background-color: var(--ms-beige) !important;
  color: var(--ms-text);
}

/* ========================================
   2. الهيدر الرئيسي - كحلي
   ======================================== */

header,
header > div,
header .container,
header .inner,
header .navbar,
.store-header,
.store-header .container,
.navbar,
.s-header,
.s-header__inner,
.salla-header,
.header-wrapper {
  background-color: var(--ms-navy) !important;
  color: var(--ms-beige) !important;
}

/* نصوص القوائم الرئيسية */
header a,
header nav a,
header button,
header nav button,
.store-header a,
.navbar a,
.s-header a,
.salla-header a,
.main-menu a,
.main-nav a,
.menu-item a {
  color: var(--ms-beige) !important;
}

/* أيقونات الهيدر */
header svg,
.store-header svg,
.navbar svg,
.s-header svg,
.salla-header svg {
  color: var(--ms-beige) !important;
}

/* البحث داخل الهيدر */
header input,
.store-header input,
.navbar input {
  color: var(--ms-navy) !important;
  background-color: var(--ms-white) !important;
  border-color: #D9CEB8;
}

/* ========================================
   3. الشريط العلوي - بيج
   ======================================== */

.s-announcement-bar,
.top-navbar,
.top-header,
.salla-announcement-bar {
  background-color: var(--ms-beige) !important;
  color: var(--ms-navy) !important;
}

.s-announcement-bar a,
.top-navbar a,
.top-header a,
.salla-announcement-bar a {
  color: var(--ms-navy) !important;
}

/* ========================================
   4. القوائم الفرعية
   ======================================== */

.dropdown-menu,
.submenu,
header nav ul ul {
  background-color: var(--ms-beige) !important;
}

.dropdown-menu a,
.submenu a,
header nav ul ul a {
  color: var(--ms-navy) !important;
}

/* التأثير عند المرور على القوائم */
header nav a:hover,
.store-header nav a:hover,
.navbar a:hover,
.dropdown-menu a:hover,
.submenu a:hover {
  color: var(--ms-gold) !important;
}

/* ========================================
   5. العناوين
   ======================================== */

h1,
h2,
h3,
h4 {
  color: var(--ms-navy);
  font-weight: 700;
}

/* ========================================
   6. بطاقات المنتجات
   ======================================== */

.product-card,
.product-entry,
.s-product-card {
  border: 1px solid #E8DFCE;
  border-radius: var(--ms-radius);
  overflow: hidden;
  background-color: var(--ms-white);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.product-card:hover,
.product-entry:hover,
.s-product-card:hover {
  transform: translateY(-3px);
  border-color: var(--ms-gold);
  box-shadow: 0 8px 24px rgba(20, 43, 76, .10);
}

/* صور المنتجات */
.product-card img,
.product-entry img,
.s-product-card img {
  transition: transform .35s ease;
}

.product-card:hover img,
.product-entry:hover img,
.s-product-card:hover img {
  transform: scale(1.035);
}

/* ========================================
   7. أسماء المنتجات والأسعار
   ======================================== */

.product-card h2,
.product-card h3,
.product-entry h2,
.product-entry h3,
.s-product-card h2,
.s-product-card h3,
.price,
.product-price,
.s-product-card-price {
  color: var(--ms-navy);
  font-weight: 800;
}

/* السعر القديم */
.price-before,
.old-price,
.line-through {
  color: #8B8B8B;
}

/* ========================================
   8. أزرار الشراء
   ======================================== */

button,
.button,
.btn,
.s-button-primary {
  border-radius: 10px;
  transition:
    background-color .2s ease,
    transform .2s ease;
}

.s-button-primary,
.btn-primary {
  background-color: var(--ms-navy);
  color: var(--ms-white);
  border-color: var(--ms-navy);
}

.s-button-primary:hover,
.btn-primary:hover {
  background-color: var(--ms-navy-light);
  transform: translateY(-1px);
}

/* ========================================
   9. شارات الخصومات
   ======================================== */

.badge,
.discount-badge,
.s-product-card-badge {
  background-color: var(--ms-gold);
  color: var(--ms-navy);
  border-radius: 7px;
  font-weight: 700;
}

/* ========================================
   10. حقول البحث والإدخال
   ======================================== */

input,
select,
textarea {
  border-color: #D9CEB8;
  border-radius: 9px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ms-gold);
  outline-color: var(--ms-gold);
}

/* ========================================
   11. صور البنرات
   ======================================== */

img {
  max-width: 100%;
}

.banner img,
.slider img {
  border-radius: 10px;
}

/* ========================================
   12. بانر العروض
   ======================================== */

.ms-offer-banner {
  background: linear-gradient(
    120deg,
    var(--ms-navy),
    var(--ms-navy-light),
    var(--ms-navy)
  );
  background-size: 200% 200%;
  color: var(--ms-beige);
  border: 1px solid var(--ms-gold);
  border-radius: var(--ms-radius);
  overflow: hidden;
  animation: ms-banner-motion 6s ease infinite;
}

.ms-offer-banner .offer-title {
  color: var(--ms-gold);
}

.ms-offer-banner .offer-button {
  background: var(--ms-gold);
  color: var(--ms-navy);
  border-radius: 8px;
  padding: 10px 18px;
}

/* حركة البانر */
@keyframes ms-banner-motion {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ========================================
   13. تحسين عرض الجوال
   ======================================== */

@media (max-width: 768px) {
  .product-card,
  .product-entry,
  .s-product-card {
    border-radius: 10px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}