/* Add custom CSS styles below */

/* ==================================================
   Tadamon Brand Colors
================================================== */

:root {
  --color-primary: #1F4B59 !important;
  --color-primary-rgb: 31, 75, 89 !important;

  --tadamon-primary: #1F4B59;
  --tadamon-gold: #F2A952;
  --tadamon-light: #F7F4EF;
  --tadamon-shadow: rgba(31, 75, 89, 0.16);
}

/* ==================================================
   Global
================================================== */

body {
  font-family: 'Cairo', sans-serif !important;
  color: #2f2f2f;
}

/* الروابط العامة */
a:not(.btn):not(.button-primary):not(.btn-primary) {
  color: var(--tadamon-primary) !important;
  transition: color 0.25s ease;
}

a:not(.btn):not(.button-primary):not(.btn-primary):hover {
  color: var(--tadamon-gold) !important;
}

/* الأزرار */
button,
.btn,
[class*='btn'] {
  transition: all 0.25s ease;
}

/* الأزرار الرئيسية وأزرار التبرع */
.btn-primary,
.button-primary,
[class*='donate'] {
  background: linear-gradient(
    135deg,
    var(--tadamon-gold) 0%,
    #d99038 45%,
    var(--tadamon-primary) 100%
  ) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(31, 75, 89, 0.18);
}

.btn-primary:hover,
.button-primary:hover,
[class*='donate']:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(31, 75, 89, 0.28);
  opacity: 0.96;
}

.btn-primary:active,
.button-primary:active,
[class*='donate']:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(31, 75, 89, 0.18);
}

/* الشارات والوسوم العامة */
.badge,
[class*='badge'] {
  background: var(--tadamon-gold) !important;
  color: var(--tadamon-primary) !important;
  border-radius: 999px !important;
  font-weight: 700;
}

/* بطاقات المنتجات */
.product-card,
.product-item,
.card-product,
[class*='product-card'],
[class*='product_item'] {
  border-radius: 14px !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover,
.product-item:hover,
.card-product:hover,
[class*='product-card']:hover,
[class*='product_item']:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(31, 75, 89, 0.15);
}

/* الصور داخل بطاقات المنتجات */
.product-card img,
.product-item img,
.card-product img,
[class*='product-card'] img {
  transition: transform 0.35s ease;
}

.product-card:hover img,
.product-item:hover img,
.card-product:hover img,
[class*='product-card']:hover img {
  transform: scale(1.03);
}

/* العناوين */
h1,
h2,
h3,
h4 {
  color: var(--tadamon-primary) !important;
  font-weight: 700;
}

/* الأرقام والإحصائيات */
.stats-number,
.counter,
.count,
[class*='stats'],
[class*='counter'] {
  color: var(--tadamon-primary) !important;
  font-weight: 800;
}

/* الحقول */
input,
textarea,
select {
  border-radius: 8px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--tadamon-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 75, 89, 0.12) !important;
  outline: none !important;
}

/* ==================================================
   Header Cart Only
   إصلاح السلة والمبلغ فقط
================================================== */

header salla-cart-summary,
.header salla-cart-summary,
.navbar salla-cart-summary,
header .s-cart-summary-wrapper,
.header .s-cart-summary-wrapper,
.navbar .s-cart-summary-wrapper,
header [class*='s-cart-summary'],
.header [class*='s-cart-summary'],
.navbar [class*='s-cart-summary'] {
  color: var(--tadamon-primary) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* أيقونة السلة */
header salla-cart-summary svg,
.header salla-cart-summary svg,
.navbar salla-cart-summary svg,
header [class*='s-cart-summary'] svg,
.header [class*='s-cart-summary'] svg,
.navbar [class*='s-cart-summary'] svg {
  color: var(--tadamon-primary) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

header salla-cart-summary svg *,
.header salla-cart-summary svg *,
.navbar salla-cart-summary svg *,
header [class*='s-cart-summary'] svg *,
.header [class*='s-cart-summary'] svg *,
.navbar [class*='s-cart-summary'] svg * {
  stroke: currentColor !important;
}

header salla-cart-summary svg *:not([fill='none']),
.header salla-cart-summary svg *:not([fill='none']),
.navbar salla-cart-summary svg *:not([fill='none']),
header [class*='s-cart-summary'] svg *:not([fill='none']),
.header [class*='s-cart-summary'] svg *:not([fill='none']),
.navbar [class*='s-cart-summary'] svg *:not([fill='none']) {
  fill: currentColor !important;
}

/* المبلغ بجانب السلة */
header .s-cart-summary-total,
.header .s-cart-summary-total,
.navbar .s-cart-summary-total,
header [class*='cart-summary-total'],
.header [class*='cart-summary-total'],
.navbar [class*='cart-summary-total'] {
  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700 !important;
}

/* رقم السلة */
header .s-cart-summary-count,
.header .s-cart-summary-count,
.navbar .s-cart-summary-count,
header [class*='cart-summary-count'],
.header [class*='cart-summary-count'],
.navbar [class*='cart-summary-count'] {
  background-color: var(--tadamon-gold) !important;
  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* hover للسلة فقط */
header salla-cart-summary:hover,
.header salla-cart-summary:hover,
.navbar salla-cart-summary:hover,
header [class*='s-cart-summary']:hover,
.header [class*='s-cart-summary']:hover,
.navbar [class*='s-cart-summary']:hover {
  color: var(--tadamon-gold) !important;
}

/* ==================================================
   User Login Area Only
   إصلاح أيقونة ونص تسجيل الدخول
================================================== */

/* حاوية تسجيل الدخول */
header salla-user-menu,
.header salla-user-menu,
.navbar salla-user-menu,
header .s-user-menu-wrapper,
.header .s-user-menu-wrapper,
.navbar .s-user-menu-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin-inline: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
}

/* زر تسجيل الدخول */
header .s-user-menu-trigger,
.header .s-user-menu-trigger,
.navbar .s-user-menu-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 36px !important;

  padding: 6px 11px !important;
  margin: 0 !important;

  background-color: rgba(31, 75, 89, 0.06) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-decoration: none !important;

  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* النص الموجود داخل القالب */
header .s-user-menu-trigger span,
.header .s-user-menu-trigger span,
.navbar .s-user-menu-trigger span,
header .s-user-menu-trigger a,
.header .s-user-menu-trigger a,
.navbar .s-user-menu-trigger a {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;

  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  background: transparent !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* إضافة نص تسجيل الدخول إذا كان القالب يعرض الأيقونة فقط */
header .s-user-menu-trigger::after,
.header .s-user-menu-trigger::after,
.navbar .s-user-menu-trigger::after {
  content: "تسجيل الدخول" !important;
  display: inline-block !important;
  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  background: transparent !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* إذا كان النص مضافًا على عنصر salla-user-menu نفسه */
header salla-user-menu::after,
.header salla-user-menu::after,
.navbar salla-user-menu::after {
  content: "تسجيل الدخول" !important;
  display: inline-block !important;
  margin-inline-start: 7px !important;
  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  background: transparent !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* منع تكرار النص إذا كان .s-user-menu-trigger موجودًا */
header salla-user-menu:has(.s-user-menu-trigger)::after,
.header salla-user-menu:has(.s-user-menu-trigger)::after,
.navbar salla-user-menu:has(.s-user-menu-trigger)::after {
  content: "" !important;
  display: none !important;
}

/* أيقونة تسجيل الدخول */
header .s-user-menu-trigger i,
.header .s-user-menu-trigger i,
.navbar .s-user-menu-trigger i,
header .s-user-menu-trigger [class^='sicon-'],
.header .s-user-menu-trigger [class^='sicon-'],
.navbar .s-user-menu-trigger [class^='sicon-'],
header .s-user-menu-trigger [class*=' sicon-'],
.header .s-user-menu-trigger [class*=' sicon-'],
.navbar .s-user-menu-trigger [class*=' sicon-'] {
  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* SVG الخاص بأيقونة المستخدم */
header .s-user-menu-trigger svg,
.header .s-user-menu-trigger svg,
.navbar .s-user-menu-trigger svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--tadamon-primary) !important;
  stroke: currentColor !important;
  fill: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
}

header .s-user-menu-trigger svg *,
.header .s-user-menu-trigger svg *,
.navbar .s-user-menu-trigger svg * {
  stroke: currentColor !important;
  fill: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* دعم إضافي إذا كانت أيقونة المستخدم داخل header-btn */
header .header-btn:has([class*='user']),
.header .header-btn:has([class*='user']),
.navbar .header-btn:has([class*='user']),
header .header-btn:has([class*='account']),
.header .header-btn:has([class*='account']),
.navbar .header-btn:has([class*='account']),
header .header-btn:has([class*='profile']),
.header .header-btn:has([class*='profile']),
.navbar .header-btn:has([class*='profile']) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  min-height: 36px !important;
  padding: 6px 11px !important;
  background-color: rgba(31, 75, 89, 0.06) !important;
  border-radius: 999px !important;
  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* إضافة النص لزر header-btn إذا كان هو زر المستخدم */
header .header-btn:has([class*='user'])::after,
.header .header-btn:has([class*='user'])::after,
.navbar .header-btn:has([class*='user'])::after,
header .header-btn:has([class*='account'])::after,
.header .header-btn:has([class*='account'])::after,
.navbar .header-btn:has([class*='account'])::after,
header .header-btn:has([class*='profile'])::after,
.header .header-btn:has([class*='profile'])::after,
.navbar .header-btn:has([class*='profile'])::after {
  content: "تسجيل الدخول" !important;
  display: inline-block !important;
  color: var(--tadamon-primary) !important;
  -webkit-text-fill-color: var(--tadamon-primary) !important;
  background: transparent !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* hover لمنطقة تسجيل الدخول فقط */
header .s-user-menu-trigger:hover,
.header .s-user-menu-trigger:hover,
.navbar .s-user-menu-trigger:hover,
header salla-user-menu:hover,
.header salla-user-menu:hover,
.navbar salla-user-menu:hover,
header .header-btn:has([class*='user']):hover,
.header .header-btn:has([class*='user']):hover,
.navbar .header-btn:has([class*='user']):hover,
header .header-btn:has([class*='account']):hover,
.header .header-btn:has([class*='account']):hover,
.navbar .header-btn:has([class*='account']):hover,
header .header-btn:has([class*='profile']):hover,
.header .header-btn:has([class*='profile']):hover,
.navbar .header-btn:has([class*='profile']):hover {
  background-color: rgba(242, 169, 82, 0.14) !important;
  color: var(--tadamon-gold) !important;
  -webkit-text-fill-color: var(--tadamon-gold) !important;
}

/* لون النص والأيقونة عند المرور */
header .s-user-menu-trigger:hover::after,
.header .s-user-menu-trigger:hover::after,
.navbar .s-user-menu-trigger:hover::after,
header .s-user-menu-trigger:hover span,
.header .s-user-menu-trigger:hover span,
.navbar .s-user-menu-trigger:hover span,
header .s-user-menu-trigger:hover i,
.header .s-user-menu-trigger:hover i,
.navbar .s-user-menu-trigger:hover i,
header .s-user-menu-trigger:hover svg,
.header .s-user-menu-trigger:hover svg,
.navbar .s-user-menu-trigger:hover svg,
header salla-user-menu:hover::after,
.header salla-user-menu:hover::after,
.navbar salla-user-menu:hover::after,
header .header-btn:has([class*='user']):hover::after,
.header .header-btn:has([class*='user']):hover::after,
.navbar .header-btn:has([class*='user']):hover::after,
header .header-btn:has([class*='account']):hover::after,
.header .header-btn:has([class*='account']):hover::after,
.navbar .header-btn:has([class*='account']):hover::after {
  color: var(--tadamon-gold) !important;
  -webkit-text-fill-color: var(--tadamon-gold) !important;
  stroke: var(--tadamon-gold) !important;
  fill: var(--tadamon-gold) !important;
}

/* ==================================================
   Search Button Protection
   حماية زر البحث من تنسيقات تسجيل الدخول
================================================== */

header .header-btn:not(:has([class*='user'])):not(:has([class*='account'])):not(:has([class*='profile'])),
.header .header-btn:not(:has([class*='user'])):not(:has([class*='account'])):not(:has([class*='profile'])),
.navbar .header-btn:not(:has([class*='user'])):not(:has([class*='account'])):not(:has([class*='profile'])),
header [class*='search'],
.header [class*='search'],
.navbar [class*='search'] {
  background: transparent !important;
  box-shadow: none !important;
}

/* ==================================================
   Mobile
================================================== */

@media (max-width: 768px) {
  header .s-user-menu-trigger,
  .header .s-user-menu-trigger,
  .navbar .s-user-menu-trigger {
    min-height: 34px !important;
    padding: 6px 8px !important;
  }

  header .s-user-menu-trigger::after,
  .header .s-user-menu-trigger::after,
  .navbar .s-user-menu-trigger::after,
  header salla-user-menu::after,
  .header salla-user-menu::after,
  .navbar salla-user-menu::after,
  header .s-user-menu-trigger span,
  .header .s-user-menu-trigger span,
  .navbar .s-user-menu-trigger span {
    display: none !important;
    content: "" !important;
  }
}

/* ==================================================
   Reduced Motion
================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* تغيير لون نص تسجيل الدخول إلى اللون الأساسي فقط */
header .s-user-menu-trigger,
.header .s-user-menu-trigger,
.navbar .s-user-menu-trigger,
header .s-user-menu-trigger span,
.header .s-user-menu-trigger span,
.navbar .s-user-menu-trigger span,
header .s-user-menu-trigger::after,
.header .s-user-menu-trigger::after,
.navbar .s-user-menu-trigger::after,
header salla-user-menu::after,
.header salla-user-menu::after,
.navbar salla-user-menu::after {
  color: #1F4B59 !important;
  -webkit-text-fill-color: #1F4B59 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* عند المرور على تسجيل الدخول */
header .s-user-menu-trigger:hover,
.header .s-user-menu-trigger:hover,
.navbar .s-user-menu-trigger:hover,
header .s-user-menu-trigger:hover span,
.header .s-user-menu-trigger:hover span,
.navbar .s-user-menu-trigger:hover span,
header .s-user-menu-trigger:hover::after,
.header .s-user-menu-trigger:hover::after,
.navbar .s-user-menu-trigger:hover::after,
header salla-user-menu:hover::after,
.header salla-user-menu:hover::after,
.navbar salla-user-menu:hover::after {
  color: #F2A952 !important;
  -webkit-text-fill-color: #F2A952 !important;
}

/* ================================================
   FIX: Login Button (topnav-link-item) 
   The actual element class is .topnav-link-item
   .s-user-menu-trigger does NOT exist in the DOM
================================================ */

/* Login button - main container */
header .topnav-link-item,
.header .topnav-link-item,
.navbar .topnav-link-item,
.main-nav .topnav-link-item {
  color: #1F4B59 !important;
  -webkit-text-fill-color: #1F4B59 !important;
}

/* Login icon - sicon-user inside topnav-link-item */
header .topnav-link-item i.sicon-user,
.header .topnav-link-item i.sicon-user,
.navbar .topnav-link-item i.sicon-user,
.main-nav .topnav-link-item i.sicon-user,
header .topnav-link-item .icon,
.header .topnav-link-item .icon,
.navbar .topnav-link-item .icon {
  color: #1F4B59 !important;
  -webkit-text-fill-color: #1F4B59 !important;
  background-color: rgba(31, 75, 89, 0.08) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Login text and inner elements */
header .topnav-link-item span,
.header .topnav-link-item span,
.navbar .topnav-link-item span,
.main-nav .topnav-link-item span,
header .topnav-link-item div,
.header .topnav-link-item div,
.navbar .topnav-link-item div,
.main-nav .topnav-link-item div {
  color: #1F4B59 !important;
  -webkit-text-fill-color: #1F4B59 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hover state */
header .topnav-link-item:hover,
.header .topnav-link-item:hover,
.navbar .topnav-link-item:hover {
  color: #F2A952 !important;
  -webkit-text-fill-color: #F2A952 !important;
}

header .topnav-link-item:hover i,
.header .topnav-link-item:hover i,
.navbar .topnav-link-item:hover i,
header .topnav-link-item:hover span,
.header .topnav-link-item:hover span,
.navbar .topnav-link-item:hover span,
header .topnav-link-item:hover div,
.header .topnav-link-item:hover div,
.navbar .topnav-link-item:hover div {
  color: #F2A952 !important;
  -webkit-text-fill-color: #F2A952 !important;
}

header .topnav-link-item:hover .icon,
.header .topnav-link-item:hover .icon,
.navbar .topnav-link-item:hover .icon {
  background-color: rgba(242, 169, 82, 0.12) !important;
}