/* ================================
   Hub Trend - Custom SVG Icons
   Organized & documented
   ================================ */

/* قاعدة عامة لكل عناصر القائمة التي تبدأ بـ icon- */
li[class^="icon-"] > a.menu-link::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  margin-left: 0px;
  background-color: currentColor; /* الأيقونة ترث لون الرابط */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* أيقونات محددة */

li.icon-about > a.menu-link::before { -webkit-mask-image: url('../svg/about.svg'); mask-image: url('../svg/about.svg'); }
li.icon-contact > a.menu-link::before { -webkit-mask-image: url('../svg/contact.svg'); mask-image: url('../svg/contact.svg'); }
li.icon-shop > a.menu-link::before { -webkit-mask-image: url('../svg/shop.svg'); mask-image: url('../svg/shop.svg'); }
li.icon-fashion > a.menu-link::before { -webkit-mask-image: url('../svg/fashion.svg'); mask-image: url('../svg/fashion.svg'); }
li.icon-beauty > a.menu-link::before { -webkit-mask-image: url('../svg/beauty.svg'); mask-image: url('../svg/beauty.svg'); }
li.icon-home > a.menu-link::before { -webkit-mask-image: url('../svg/home.svg'); mask-image: url('../svg/home.svg'); }
li.icon-tech > a.menu-link::before { -webkit-mask-image: url('../svg/tech.svg'); mask-image: url('../svg/tech.svg'); }
li.icon-lifestyle > a.menu-link::before { -webkit-mask-image: url('../svg/lifestyle.svg'); mask-image: url('../svg/lifestyle.svg'); }
li.icon-pet > a.menu-link::before { -webkit-mask-image: url('../svg/pet.svg'); mask-image: url('../svg/pet.svg'); }
li.icon-featured > a.menu-link::before { -webkit-mask-image: url('../svg/featured.svg'); mask-image: url('../svg/featured.svg'); }
li.icon-login > a.menu-link::before { -webkit-mask-image: url('../svg/login.svg'); mask-image: url('../svg/login.svg'); }
li.icon-logout > a.menu-link::before { -webkit-mask-image: url('../svg/logout.svg'); mask-image: url('../svg/logout.svg'); }
li.icon-gauge > a.menu-link::before { -webkit-mask-image: url('../svg/gauge.svg'); mask-image: url('../svg/gauge.svg'); }
li.icon-order > a.menu-link::before { -webkit-mask-image: url('../svg/order.svg'); mask-image: url('../svg/order.svg'); }
li.icon-cart > a.menu-link::before { -webkit-mask-image: url('../svg/cart.svg'); mask-image: url('../svg/cart.svg'); }
li.icon-checkout > a.menu-link::before { -webkit-mask-image: url('../svg/checkout.svg'); mask-image: url('../svg/checkout.svg'); }
li.icon-address > a.menu-link::before { -webkit-mask-image: url('../svg/address.svg'); mask-image: url('../svg/address.svg'); }
li.icon-account-details > a.menu-link::before { -webkit-mask-image: url('../svg/account-details.svg'); mask-image: url('../svg/account-details.svg'); }
li.icon-lost-password > a.menu-link::before { -webkit-mask-image: url('../svg/lost-password.svg'); mask-image: url('../svg/lost-password.svg'); }

/* RTL دعم */
.rtl li[class^="icon-"] > a.menu-link::before {
  margin-right: 0px;
  margin-left: 8px;
}

/* ===============================
   Hub Trend - Share Icons
   Organized & documented
   ================================ */
   [class^="share-"] .icon-whatsapp,
   [class^="share-"] .icon-facebook,
   [class^="share-"] .icon-x-twitter,
   [class^="share-"] .icon-telegram,
   [class^="share-"] .icon-linkedin,
   [class^="share-"] .icon-instagram,
   [class^="share-"] .icon-account-details,
   [class^="share-"] .icon-address,
   [class^="share-"] .icon-cart,
   [class^="share-"] .icon-checkout,
   [class^="share-"] .icon-gauge,
   [class^="share-"] .icon-link,
   [class^="share-"] .icon-login,
   [class^="share-"] .icon-logout,
   [class^="share-"] .icon-lost-password,
   [class^="share-"] .icon-order,
   [class^="share-"] .icon-user-check,
   [class^="share-"] .icon-user-lock,
   [class^="share-"] .icon-user-pen,
   [class^="share-"] .icon-user-plus,
   [class^="share-"] .icon-user {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* روابط المشاركة المحددة */
.share-whatsapp .icon-whatsapp {-webkit-mask-image: url('../svg/whatsapp.svg');mask-image: url('../svg/whatsapp.svg');}
.share-facebook .icon-facebook {-webkit-mask-image: url('../svg/facebook.svg');mask-image: url('../svg/facebook.svg');}
.share-x-twitter .icon-x-twitter {-webkit-mask-image: url('../svg/x-twitter.svg');mask-image: url('../svg/x-twitter.svg');}
.share-telegram .icon-telegram {-webkit-mask-image: url('../svg/telegram.svg');mask-image: url('../svg/telegram.svg');}
.share-linkedin .icon-linkedin {-webkit-mask-image: url('../svg/linkedin.svg');mask-image: url('../svg/linkedin.svg');}
.share-instagram .icon-instagram {-webkit-mask-image: url('../svg/instagram.svg');mask-image: url('../svg/instagram.svg');}
/* نهاية أيقونات المشاركة */


/* ===============================
   Hub Trend - Share Icons (إضافة خاصة بزر النسخ)
   ================================ */
.copy-product-link .icon-link {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: all 0.3s ease;
}

/* الحالة العادية */
.copy-product-link .icon-link {
  -webkit-mask-image: url('../svg/link.svg');
  mask-image: url('../svg/link.svg');
}

/* حالة النسخ جاري */
.copy-product-link.hubtrend-copying .icon-link {
  -webkit-mask-image: url('../svg/spinner.svg');
  mask-image: url('../svg/spinner.svg');
}

/* حالة النسخ نجاح */
.copy-product-link.hubtrend-copied .icon-link {
  -webkit-mask-image: url('../svg/check.svg');
  mask-image: url('../svg/check.svg');
  background-color: #ffffff; /* أبيض */
}

/* حالة النسخ فشل */
.copy-product-link.hubtrend-failed .icon-link {
  -webkit-mask-image: url('../svg/xmark.svg');
  mask-image: url('../svg/xmark.svg');
  background-color: #ffffff; /* أبيض */
}

/* قاعدة عامة لأيقونات القائمة المنسدلة للحساب */
.hubtrend-menu-item .icon-user-check,
.hubtrend-menu-item .icon-user-lock,
.hubtrend-menu-item .icon-gauge,
.hubtrend-menu-item .icon-order,
.hubtrend-menu-item .icon-cart,
.hubtrend-menu-item .icon-checkout,
.hubtrend-menu-item .icon-user-pen,
.hubtrend-menu-item .icon-account-details,
.hubtrend-menu-item .icon-logout,
.hubtrend-menu-item .icon-login,
.hubtrend-menu-item .icon-user-plus {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  vertical-align: middle;
}

/* أيقونات محددة للقائمة المنسدلة */
.hubtrend-menu-item .icon-user-check { -webkit-mask-image: url('../svg/user-check.svg'); mask-image: url('../svg/user-check.svg'); }
.hubtrend-menu-item .icon-user-lock { -webkit-mask-image: url('../svg/user-lock.svg'); mask-image: url('../svg/user-lock.svg'); }
.hubtrend-menu-item .icon-gauge { -webkit-mask-image: url('../svg/gauge.svg'); mask-image: url('../svg/gauge.svg'); }
.hubtrend-menu-item .icon-order { -webkit-mask-image: url('../svg/order.svg'); mask-image: url('../svg/order.svg'); }
.hubtrend-menu-item .icon-cart { -webkit-mask-image: url('../svg/cart.svg'); mask-image: url('../svg/cart.svg'); }
.hubtrend-menu-item .icon-checkout { -webkit-mask-image: url('../svg/checkout.svg'); mask-image: url('../svg/checkout.svg'); }
.hubtrend-menu-item .icon-user-pen { -webkit-mask-image: url('../svg/user-pen.svg'); mask-image: url('../svg/user-pen.svg'); }
.hubtrend-menu-item .icon-account-details { -webkit-mask-image: url('../svg/account-details.svg'); mask-image: url('../svg/account-details.svg'); }
.hubtrend-menu-item .icon-logout { -webkit-mask-image: url('../svg/logout.svg'); mask-image: url('../svg/logout.svg'); }
.hubtrend-menu-item .icon-login { -webkit-mask-image: url('../svg/login.svg'); mask-image: url('../svg/login.svg'); }
.hubtrend-menu-item .icon-user-plus { -webkit-mask-image: url('../svg/user-plus.svg'); mask-image: url('../svg/user-plus.svg'); }

/* أيقونة الزناد (الزر الرئيسي) */
.hubtrend-account-trigger .icon-user-check,
.hubtrend-account-trigger .icon-user-lock {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.hubtrend-account-trigger .icon-user-check { 
  -webkit-mask-image: url('../svg/user-check.svg'); 
  mask-image: url('../svg/user-check.svg'); 
}

.hubtrend-account-trigger .icon-user-lock { 
  -webkit-mask-image: url('../svg/user-lock.svg'); 
  mask-image: url('../svg/user-lock.svg'); 
}

/* RTL دعم للقائمة المنسدلة */
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-user-check,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-user-lock,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-gauge,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-order,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-cart,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-checkout,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-user-pen,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-account-details,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-logout,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-login,
.hubtrend-account-dropdown.rtl .hubtrend-menu-item .icon-user-plus {
  margin-right: 0;
  margin-left: 10px;
}

/* تحسينات الوصول للقوائم */
.hubtrend-menu-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.hubtrend-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.hubtrend-menu-item span {
  flex: 1;
}