/* ==========================================================================
   Aura Musk — تنسيق ناعم (وردي فاتح + أبيض)
   انسخ الملف كامل في: تصميم المتجر ← إعدادات متقدمة ← CSS مخصص
   عدّل الألوان من قسم ١ فقط.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");

/* --- ١. المتغيّرات ------------------------------------------------------- */
:root {
  --am-ink:        #4a3a3d;              /* النص الأساسي */
  --am-ink-soft:   rgba(74, 58, 61, .72);
  --am-ink-faint:  rgba(74, 58, 61, .42);
  --am-rose:       #d98ca0;              /* الوردي الأساسي */
  --am-rose-deep:  #b96a80;              /* التمرير والضغط */
  --am-rose-tint:  #fdeef2;              /* خلفيات وردية فاتحة */
  --am-rose-line:  #f3dbe1;              /* الحدود */
  --am-white:      #ffffff;
  --am-bg:         #fffafb;              /* خلفية الصفحة */
  --am-radius:     18px;
  --am-radius-sm:  12px;
  --am-shadow:     0 12px 30px -18px rgba(74, 58, 61, .28);
  --am-shadow-lg:  0 22px 48px -26px rgba(74, 58, 61, .34);
  --am-font:       "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* --- ٢. الأساسيات -------------------------------------------------------- */
body {
  font-family: var(--am-font) !important;
  background: var(--am-bg) !important;
  color: var(--am-ink) !important;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--am-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  color: var(--am-ink) !important;
  line-height: 1.35 !important;
}

p, li, span, td, th, label, input, textarea, select, button {
  font-family: var(--am-font) !important;
}

p { line-height: 1.9 !important; font-weight: 300 !important; color: var(--am-ink-soft) !important; }

a { color: var(--am-rose-deep); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--am-ink); }

::selection { background: var(--am-rose-tint); color: var(--am-rose-deep); }

*:focus-visible {
  outline: 2px solid var(--am-rose) !important;
  outline-offset: 3px;
}

/* --- ٣. زوايا ناعمة في كل مكان ------------------------------------------ */
button, .btn, .button, input, textarea, select,
.card, .product-entry, .product-card, .s-card,
img, .badge, .tag, .label, .s-badge, .product-badge {
  border-radius: var(--am-radius-sm) !important;
}

/* --- ٤. الأزرار ---------------------------------------------------------- */
button, .btn, .button, [type="submit"], .s-button-primary {
  font-weight: 500 !important;
  border-radius: 999px !important;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn-primary, .button--primary, .s-button-primary,
[type="submit"], .add-to-cart, .btn--add-to-cart {
  background: var(--am-rose) !important;
  border: none !important;
  color: #fff !important;
  padding: 14px 30px !important;
  font-size: 16px !important;
  box-shadow: var(--am-shadow) !important;
}

.btn-primary:hover, .button--primary:hover, .s-button-primary:hover,
[type="submit"]:hover, .add-to-cart:hover, .btn--add-to-cart:hover {
  background: var(--am-rose-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-primary:active, .s-button-primary:active,
[type="submit"]:active, .add-to-cart:active { transform: translateY(0); }

/* الزر الثانوي — إطار وردي فاتح */
.btn-secondary, .button--secondary, .btn-outline, .s-button-outline {
  background: var(--am-white) !important;
  border: 1.5px solid var(--am-rose-line) !important;
  color: var(--am-rose-deep) !important;
  padding: 12px 28px !important;
  box-shadow: none !important;
}

.btn-secondary:hover, .button--secondary:hover,
.btn-outline:hover, .s-button-outline:hover {
  background: var(--am-rose-tint) !important;
  border-color: var(--am-rose) !important;
}

/* --- ٥. الوسوم والشارات -------------------------------------------------- */
.badge, .tag, .label, .s-badge, .product-badge, .discount-badge {
  background: var(--am-rose-tint) !important;
  color: var(--am-rose-deep) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 5px 13px !important;
}

/* --- ٦. السعر ------------------------------------------------------------ */
.price, .product-price, .s-price {
  font-weight: 600 !important;
  color: var(--am-ink) !important;
}

.price--old, .old-price, .price-before-discount, s, del {
  color: var(--am-ink-faint) !important;
  font-weight: 300 !important;
  text-decoration: line-through;
}

/* --- ٧. البطاقات والفواصل ------------------------------------------------ */
.card, .product-entry, .product-card, .s-card {
  background: var(--am-white) !important;
  border: 1px solid var(--am-rose-line) !important;
  border-radius: var(--am-radius) !important;
  box-shadow: var(--am-shadow) !important;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover, .product-entry:hover, .product-card:hover, .s-card:hover {
  box-shadow: var(--am-shadow-lg) !important;
  transform: translateY(-2px);
}

hr, .divider, .separator {
  border: none !important;
  height: 1px !important;
  background: var(--am-rose-line) !important;
  margin: 32px 0 !important;
}

/* --- ٨. الهيدر وشريط الإعلان -------------------------------------------- */
header, .header, .s-header, nav, .navbar {
  background: var(--am-white) !important;
  border-bottom: 1px solid var(--am-rose-line) !important;
  box-shadow: none !important;
}

.announcement-bar, .topbar, .header-notice, .s-announcement {
  background: var(--am-rose-tint) !important;
  color: var(--am-rose-deep) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
}

/* الشعار دائري */
.logo img, .navbar-brand img, .s-header-logo img, header .logo img {
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1;
  height: 54px !important;
  width: 54px !important;
}

/* --- ٩. حقول الإدخال ---------------------------------------------------- */
input, textarea, select, .form-control, .s-input {
  background: var(--am-white) !important;
  border: 1.5px solid var(--am-rose-line) !important;
  border-radius: var(--am-radius-sm) !important;
  color: var(--am-ink) !important;
  padding: 13px 16px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--am-rose) !important;
  box-shadow: 0 0 0 4px rgba(217, 140, 160, .16) !important;
}

input::placeholder, textarea::placeholder { color: var(--am-ink-faint) !important; }

/* --- ١٠. صور المنتج ---------------------------------------------------- */
.product-images, .product-gallery, .s-product-images {
  background: var(--am-rose-tint) !important;
  border-radius: var(--am-radius) !important;
  padding: 22px !important;
}

.product-entry img, .product-card img, .s-card img {
  border-radius: 0 !important;
}

/* --- ١١. الفوتر --------------------------------------------------------- */
footer, .footer, .s-footer {
  background: var(--am-rose-tint) !important;
  color: var(--am-ink-soft) !important;
  border-top: 1px solid var(--am-rose-line) !important;
}

footer a, .footer a { color: var(--am-ink-soft) !important; }
footer a:hover, .footer a:hover { color: var(--am-rose-deep) !important; }

/* --- ١٢. لمسات إضافية --------------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--am-rose-line); border-radius: 999px; }
::-webkit-scrollbar-track { background: var(--am-bg); }