/* ═══════════════════════════════════════════════════════════
   HUMA SOLUTIONS — CSS لمتجر سلة
   الصق هذا الكود بالكامل في: تخصيص متقدم → تخصيص باستخدام CSS
   ═══════════════════════════════════════════════════════════ */


/* ───────── 1. استيراد الخطوط ───────── */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');


/* ───────── 2. متغيرات الألوان ───────── */
:root {
  --hs-sand: #E8DFD3;
  --hs-sand-light: #F3ECE0;
  --hs-sand-warm: #EADFCF;
  --hs-cream: #F8F3E9;
  --hs-terracotta: #B5613F;
  --hs-terracotta-deep: #8A4528;
  --hs-olive: #6B6B47;
  --hs-olive-dark: #4A4A30;
  --hs-ink: #2C2418;
  --hs-ink-soft: #5C5040;
  --hs-muted: #8A7C6A;
  --hs-white: #FDFBF6;
}


/* ───────── 3. الخطوط الأساسية ───────── */
body,
body * {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

body {
  background: var(--hs-cream) !important;
  color: var(--hs-ink) !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
}

/* العناوين بوزن 600 مش 700 (أنعم وأكثر احترافية) */
h1, h2, h3, h4, h5, h6,
.title, .page-title, .product-title, .section-title {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 600 !important;
  color: var(--hs-ink) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.25 !important;
}


/* ───────── 4. الأزرار (أزرار دائرية بألوان Huma) ───────── */
button,
.btn,
.button,
a.btn,
input[type="submit"],
input[type="button"],
.btn-primary,
.add-to-cart-btn,
.buy-now {
  background: var(--hs-ink) !important;
  color: var(--hs-cream) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  transition: all 0.3s ease !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

button:hover,
.btn:hover,
.button:hover,
.btn-primary:hover,
.add-to-cart-btn:hover,
.buy-now:hover {
  background: var(--hs-terracotta) !important;
  color: var(--hs-cream) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 30px rgba(181, 97, 63, 0.25) !important;
}

/* الأزرار الثانوية (شفافة مع حدود) */
.btn-secondary,
.btn-outline,
.btn.outlined {
  background: transparent !important;
  color: var(--hs-ink) !important;
  border: 1.5px solid var(--hs-ink) !important;
}

.btn-secondary:hover,
.btn-outline:hover {
  background: var(--hs-ink) !important;
  color: var(--hs-cream) !important;
}


/* ───────── 5. الهيدر والقائمة العلوية ───────── */
header,
.header,
.site-header,
nav.navbar {
  background: rgba(248, 243, 233, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(44, 36, 24, 0.08) !important;
  box-shadow: none !important;
}

header a,
nav a,
.header a,
.nav-link {
  color: var(--hs-ink-soft) !important;
  font-weight: 500 !important;
  transition: color 0.3s !important;
}

header a:hover,
nav a:hover,
.nav-link:hover {
  color: var(--hs-terracotta) !important;
}


/* ───────── 6. بطاقات المنتجات ───────── */
.product-card,
.product-item,
.card,
.product {
  background: var(--hs-white) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(44, 36, 24, 0.05) !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  box-shadow: none !important;
}

.product-card:hover,
.product-item:hover,
.card:hover,
.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 30px 60px -20px rgba(44, 36, 24, 0.15) !important;
  border-color: rgba(181, 97, 63, 0.2) !important;
}

/* صورة المنتج */
.product-image,
.product-card img,
.product-item img {
  border-radius: 16px 16px 0 0 !important;
}

/* اسم المنتج */
.product-title,
.product-card-title,
.product-name {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--hs-ink) !important;
  letter-spacing: -0.3px !important;
}

/* السعر */
.price,
.product-price,
.current-price {
  color: var(--hs-terracotta) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: -0.5px !important;
}

.old-price,
.price-before {
  color: var(--hs-muted) !important;
  text-decoration: line-through !important;
}


/* ───────── 7. حقول الإدخال (Forms) ───────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--hs-cream) !important;
  border: 1.5px solid transparent !important;
  border-radius: 100px !important;
  padding: 14px 20px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15px !important;
  color: var(--hs-ink) !important;
  transition: all 0.3s !important;
}

textarea {
  border-radius: 20px !important;
  min-height: 100px !important;
  resize: vertical !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--hs-terracotta) !important;
  background: var(--hs-white) !important;
  box-shadow: 0 0 0 3px rgba(181, 97, 63, 0.1) !important;
}


/* ───────── 8. البنرات والأقسام ───────── */
.banner,
.hero-banner,
.home-banner,
.section-banner {
  border-radius: 24px !important;
  overflow: hidden !important;
}


/* ───────── 9. التصنيفات والفئات ───────── */
.category-card,
.collection-card,
.category-item {
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: all 0.4s !important;
  background: var(--hs-sand-warm) !important;
}

.category-card:hover,
.collection-card:hover {
  transform: translateY(-4px) !important;
}

.category-title,
.collection-title {
  color: var(--hs-ink) !important;
  font-weight: 600 !important;
}


/* ───────── 10. السلة والصفحات الداخلية ───────── */
.cart,
.checkout,
.account-page,
.main-content {
  background: var(--hs-cream) !important;
}

.cart-item,
.order-item {
  background: var(--hs-white) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(44, 36, 24, 0.06) !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
}


/* ───────── 11. الفوتر ───────── */
footer,
.footer,
.site-footer {
  background: var(--hs-ink) !important;
  color: var(--hs-cream) !important;
  padding: 60px 24px 30px !important;
}

footer a,
.footer a {
  color: rgba(248, 243, 233, 0.7) !important;
  transition: color 0.3s !important;
}

footer a:hover,
.footer a:hover {
  color: var(--hs-terracotta) !important;
}

footer h3,
footer h4,
.footer h3,
.footer h4 {
  color: var(--hs-terracotta) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin-bottom: 18px !important;
}


/* ───────── 12. الشريط الإعلاني العلوي ───────── */
.announcement-bar,
.top-bar,
.promo-bar {
  background: var(--hs-ink) !important;
  color: var(--hs-cream) !important;
  padding: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center !important;
}


/* ───────── 13. العلامات (Badges) ───────── */
.badge,
.tag,
.label {
  background: var(--hs-sand) !important;
  color: var(--hs-terracotta) !important;
  border-radius: 100px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

.badge.sale,
.badge-sale,
.discount-badge {
  background: var(--hs-terracotta) !important;
  color: var(--hs-cream) !important;
}


/* ───────── 14. الروابط العامة ───────── */
a {
  color: var(--hs-terracotta);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--hs-terracotta-deep);
}


/* ───────── 15. Scrollbar عصري ───────── */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--hs-sand-light);
}

::-webkit-scrollbar-thumb {
  background: var(--hs-terracotta);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hs-terracotta-deep);
}


/* ───────── 16. تحسينات إضافية ───────── */
/* إزالة الظلال الافتراضية */
.shadow,
.has-shadow {
  box-shadow: 0 10px 30px -10px rgba(44, 36, 24, 0.1) !important;
}

/* الفواصل */
hr {
  border: none !important;
  border-top: 1px dashed rgba(44, 36, 24, 0.15) !important;
  margin: 30px 0 !important;
}

/* الاقتباسات */
blockquote {
  background: var(--hs-sand-light) !important;
  border-right: 3px solid var(--hs-terracotta) !important;
  padding: 20px 24px !important;
  border-radius: 0 16px 16px 0 !important;
  font-style: italic !important;
  color: var(--hs-ink-soft) !important;
}


/* ───────── 17. التجاوب مع الجوال ───────── */
@media (max-width: 768px) {
  body {
    font-size: 14.5px !important;
  }

  button, .btn, .button {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }

  .product-card,
  .card {
    border-radius: 16px !important;
  }
}