/* ============================================================
   🎨 SHATARA THEME — Salla رائد → shatara.sa design
   Paste in: Theme → Advanced customization → Customize with CSS
   Brand source: shatara.sa (Alexandria font, purple CTAs, brown text)
   ============================================================ */

/* 1️⃣ Load Alexandria font (same as shatara.sa) */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&display=swap');

/* 2️⃣ Official Salla theme variables — purple as primary, like the website */
:root {
  --color-primary:        #AB86B9;   /* brand purple — buttons, links, accents */
  --color-primary-dark:   #9A73A8;   /* hover */
  --color-primary-light:  #C9ADD4;
  --color-secondary:      #6B4E45;   /* brand brown */
  --color-secondary-dark: #563D36;

  --font-main: 'Alexandria', sans-serif;
}

/* 3️⃣ Global font + text colors */
body, html,
h1, h2, h3, h4, h5, h6,
p, span, a, button, input, select, textarea, label {
  font-family: 'Alexandria', sans-serif !important;
}

body {
  color: #6B4E45;
  background-color: #FFFFFF;
}

/* Headings → brand brown */
h1, h2, h3, h4, h5, h6,
.section-title, .s-section-title {
  color: #644B48 !important;
  font-weight: 800 !important;
}

/* Muted text */
.text-gray-500, .text-muted, small, .s-text-muted {
  color: #6B7280 !important;
}

/* 4️⃣ Buttons → purple pill style (like shatara.sa) */
.s-button, button.s-button,
.s-btn, .btn-primary,
a.s-button,
.s-add-product-to-cart-btn,
.s-cart-submit,
.s-login-btn {
  background-color: #AB86B9 !important;
  border-color: #AB86B9 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 15px -3px rgba(171, 134, 185, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.s-button:hover, button.s-button:hover,
.s-btn:hover, .btn-primary:hover,
a.s-button:hover {
  background-color: #9A73A8 !important;
  border-color: #9A73A8 !important;
  box-shadow: 0 10px 15px -3px rgba(171, 134, 185, 0.40) !important;
  transform: translateY(-2px);
}

/* 5️⃣ Header → white, clean, bottom border (like shatara.sa) */
.s-header, header.s-header,
#s-header, .header-wrapper {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F3F4F6 !important;
  box-shadow: none !important;
}

/* Header links → brown, bold */
.s-header a, .s-header nav a,
.main-nav a, .s-menu-item a {
  color: #6B4E45 !important;
  font-weight: 700 !important;
  transition: color 0.2s ease !important;
}

.s-header a:hover, .s-header nav a:hover,
.main-nav a:hover, .s-menu-item a:hover {
  color: #AB86B9 !important;
}

/* 6️⃣ Product cards → rounded white cards (like shatara.sa) */
.s-product-card,
.product-card,
.s-product-card-wrapper {
  border-radius: 18px !important;
  border: 1px solid #E8E4DE !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  overflow: hidden;
}

.s-product-card:hover,
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(107, 78, 69, 0.15),
              0 4px 8px -4px rgba(171, 134, 185, 0.08) !important;
}

/* Product title → brown */
.s-product-card-title,
.s-product-card a[class*="title"],
.product-title {
  color: #6B4E45 !important;
  font-weight: 700 !important;
}

/* Product image zoom on hover */
.s-product-card img,
.product-card img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

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

/* 7️⃣ Prices */
.s-product-card-price, .product-price,
.price, .s-price {
  color: #6B4E45 !important;
  font-weight: 800 !important;
}

/* Old price → gray strikethrough */
.s-product-card-price del, .product-price del,
.price del, .s-price del,
.s-product-card-price-before {
  color: #9CA3AF !important;
  font-weight: 400 !important;
}

/* Sale / discount badge → red (like shatara.sa) */
.s-product-card-sale-badge,
.sale-badge, .badge-sale,
.s-product-card [class*="sale"],
.s-product-card [class*="discount"] {
  background-color: #EF4444 !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}

/* 8️⃣ Announcement / top bar → purple */
.s-announcement-bar,
.announcement-bar,
.top-bar {
  background-color: #AB86B9 !important;
  color: #FFFFFF !important;
}

/* 9️⃣ Footer → white with top border (like shatara.sa) */
.s-footer, footer.s-footer,
#s-footer, .footer-wrapper {
  background-color: #FFFFFF !important;
  border-top: 1px solid #F3F4F6 !important;
  color: #6B7280 !important;
}

.s-footer a, footer a {
  color: #4B5563 !important;
  font-weight: 700 !important;
  transition: color 0.2s ease !important;
}

.s-footer a:hover, footer a:hover {
  color: #AB86B9 !important;
}

.s-footer h3, .s-footer h4,
footer h3, footer h4 {
  color: #4A4A4A !important;
  font-weight: 800 !important;
}

/* Social icons → purple squares (like shatara.sa) */
.s-footer .social a,
.s-social-links a,
footer [class*="social"] a {
  background-color: #AB86B9 !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 🔟 Inputs → rounded, purple focus (like shatara.sa) */
input, select, textarea,
.s-input, .s-text-input {
  border-radius: 0.5rem !important;
  border-color: #E5E7EB !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

input:focus, select:focus, textarea:focus,
.s-input:focus {
  border-color: #AB86B9 !important;
  box-shadow: 0 0 0 3px rgba(171, 134, 185, 0.15) !important;
  outline: none !important;
}

/* 1️⃣1️⃣ Selection → purple (like shatara.sa) */
::selection {
  background-color: #AB86B9 !important;
  color: #FFFFFF !important;
}

/* 1️⃣2️⃣ Links (general) */
a {
  transition: color 0.2s ease;
}

/* 1️⃣3️⃣ Smooth scroll + easing on everything animated */
html {
  scroll-behavior: smooth;
}

/* Section spacing feel */
.s-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* 🔒 Footer: hide Salla credit, show حقوق النشر */
footer a[href*="salla.com"],
footer a[href*="salla.sa"],
.s-footer a[href*="salla.com"],
.s-footer a[href*="salla.sa"] {
  display: none !important;
}

footer [class*="copy"],
.s-footer [class*="copy"] {
  font-size: 0 !important;
}

footer [class*="copy"]::after,
.s-footer [class*="copy"]::after {
  content: "© 2026 ميدان شطارة — جميع الحقوق محفوظة" !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #6B7280 !important;
  font-family: 'Alexandria', sans-serif !important;
  display: inline-block !important;
}