/* Add custom CSS styles below */ 
/* =========================
   تحسين زر/تبويب التجربة الافتراضية
========================= */
a, button, span {
  transition: all .25s ease;
}

*:has(> img[alt*="camera"]),
*:has(> i[class*="camera"]) {
  border-radius: 12px;
}

/* محاولة تنسيق أي عنصر يحتوي على نص التجربة الافتراضية */
body * {
  box-sizing: border-box;
}

/* تبويب التجربة الافتراضية */
.virtual-tryon-tab,
.tryon-tab,
[class*="try"][class*="tab"],
[id*="try"][id*="tab"] {
  background: #f7dce3 !important;
  color: #7a2e45 !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  border: 1px solid #e7b7c5 !important;
}

.virtual-tryon-tab:hover,
.tryon-tab:hover,
[class*="try"][class*="tab"]:hover,
[id*="try"][id*="tab"]:hover {
  background: #f3cad6 !important;
  color: #5f2034 !important;
}

/* =========================
   تحسين النافذة المنبثقة لو كانت خارج iframe
========================= */

/* الخلفية المعتمة */
[class*="modal"],
[class*="popup"],
[class*="overlay"] {
  backdrop-filter: blur(4px);
}

/* صندوق النافذة */
[class*="modal"] [class*="content"],
[class*="popup"] [class*="content"],
[class*="dialog"],
[class*="try-on"] {
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* الأزرار */
button,
[class*="btn"],
a[class*="btn"] {
  border-radius: 12px !important;
}

/* زر الشراء داخل النافذة */
button[class*="shop"],
a[class*="shop"],
[class*="shop-now"] {
  background: #111 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
}

button[class*="shop"]:hover,
a[class*="shop"]:hover,
[class*="shop-now"]:hover {
  background: #000 !important;
}

/* تبويبات الألوان */
[class*="lip"],
[class*="liner"],
[class*="blush"] {
  font-weight: 700 !important;
}

/* دوائر الألوان */
[class*="color"] button,
[class*="shade"] button,
[class*="swatch"],
[class*="color-dot"] {
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  transition: all .2s ease !important;
}

[class*="color"] button:hover,
[class*="shade"] button:hover,
[class*="swatch"]:hover,
[class*="color-dot"]:hover {
  transform: scale(1.08);
}

[class*="selected"],
[aria-selected="true"],
.active {
  box-shadow: 0 0 0 3px #f3c0cf !important;
}