/* --- ألوان وقيم أساسية --- */
:root {
  --main-bg: #ffffff;
  --accent-woody: #7B3F00; /* اللون العودي */
  --accent-woody-dark: #693300;
  --text-dark: #222222;
}

/* --- تنسيق عام للجسم --- */
body {
  background-color: var(--main-bg);
  color: var(--text-dark);
  font-family: 'Cairo', sans-serif !important;
}

/* --- زر وأيقونة تسجيل الدخول --- */

/* تغيير لون الخلفية ولون النص للزر والأيقونة */
.account-button, .account-icon, a[href*="account"], .login-link {
  background-color: var(--accent-woody) !important;  /* اللون العودي */
  color: white !important;
  border-radius: 50% !important;
  padding: 0.5em !important;
  display: inline-block !important;
  transition: background-color 0.3s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* لون الخلفية عند المرور على الزر */
.account-button:hover, .account-icon:hover, a[href*="account"]:hover, .login-link:hover {
  background-color: var(--accent-woody-dark) !important; /* لون عودي غامق */
}

/* استبدال الأيقونة بصورة جديدة */
.account-icon {
  width: 24px !important;
  height: 24px !important;
  background-image: url('your-new-icon.svg') !important; /* استبدل هذا بالرابط الصحيح لأيقونتك */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: transparent !important; /* إخفاء اللون الافتراضي */
  text-indent: -9999px !important; /* إخفاء النص لو فيه */
}

/* تنسيق نص زر تسجيل الدخول إذا فيه */
.login-link {
  padding: 8px 15px !important;
  border-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  font-weight: 600 !important;
  border: none !important;
}

/* تنسيق أيقونة داخل زر تسجيل الدخول */
.login-link .account-icon {
  margin-right: 10px !important;
  border-radius: 50% !important;
}

/* --- بقية الأكواد الأساسية من الكود اللي أرسلتها --- */

/* الهيدر */
header {
  background-color: var(--main-bg) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
header a, header .contact-info {
  color: var(--text-dark) !important;
}
header a:hover {
  color: var(--accent-woody) !important;
}

/* الأزرار عامة */
button, .btn, input[type="submit"], .add-to-cart, .product-card button {
  background-color: var(--accent-woody) !important;
  color: #fff !important;
  font-size: 1rem;
  padding: 0.8em 1.2em;
  border-radius: 4px;
  border: none;
  transition: background-color 0.3s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background-color: var(--accent-woody-dark) !important;
}

/* صور البانر والعروض */
.hero-banner img, .carousel img {
  border-radius: 6px !important;
}

/* بطاقات المنتجات والخدمات */
.feature-card, .product-card {
  background-color: #f9f9f9 !important;
  color: var(--text-dark);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.feature-card h3, .product-card h3 {
  color: var(--text-dark);
}

/* الفوتر */
footer {
  background-color: var(--main-bg);
  color: var(--text-dark);
  padding: 2rem 0;
  border-top: 1px solid #eee;
}
footer a {
  color: var(--accent-woody);
}

/* تجاوب الجوال */
@media (max-width: 768px) {
  header, footer {
    text-align: center;
  }
  .feature-card, .product-card {
    margin-bottom: 1.5rem;
  }
}