/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* ===== Lordly Clean Black Theme ===== */

:root {
  --lordly-black: #050505;
  --lordly-deep: #000000;
  --lordly-purple: #7b2cff;
  --lordly-white: #ffffff;
}

/* خلفية المتجر */
html,
body,
#app,
.app,
main,
section,
.s-block,
.s-section,
.main-content {
  background: var(--lordly-black) !important;
  color: var(--lordly-white) !important;
}

/* النصوص */
body,
p,
span,
li,
h1,
h2,
h3,
h4,
h5,
h6,
a {
  color: var(--lordly-white) !important;
}

/* كروت المنتجات فقط */
salla-product-card,
.s-product-card,
.s-product-card-entry,
.product-card,
.product-item,
.product {
  background: var(--lordly-deep) !important;
  border: 1.5px solid var(--lordly-purple) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* حافة خفيفة عند المرور */
salla-product-card:hover,
.s-product-card:hover,
.s-product-card-entry:hover,
.product-card:hover,
.product-item:hover,
.product:hover {
  box-shadow: 0 0 10px rgba(123, 44, 255, 0.35) !important;
}
/* ===== Lordly Fix Footer Thin Line ===== */

/* إزالة أي خط رمادي فوق وتحت الفوتر */
.s-footer,
.s-footer *,
footer,
footer * {
  border-top-color: #7b2cff !important;
  border-bottom-color: #7b2cff !important;
}

/* الخط المنقط الظاهر في الصورة */
.s-footer,
footer,
section,
div {
  border-color: rgba(123, 44, 255, 0.45) !important;
}

/* لو الخط عبارة عن outline أو shadow */
.s-footer,
footer {
  outline: none !important;
  box-shadow: 0 -1px 0 rgba(123, 44, 255, 0.45) !important;
}

/* يخفي الخطوط الرمادية الدقيقة */
.s-footer::before,
.s-footer::after,
footer::before,
footer::after {
  background: #7b2cff !important;
  border-color: #7b2cff !important;
}
.s-footer,
.s-footer *,
footer,
footer * {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.s-footer::before,
.s-footer::after,
footer::before,
footer::after {
  display: none !important;
  content: none !important;
}
/* ===== حذف/تلوين الخط فوق الفوتر ===== */

/* يشيل أي خط رمادي نهائي */
footer,
.s-footer,
.site-footer {
  border-top: none !important;
}

/* إذا فيه خط من عنصر وهمي */
footer::before,
footer::after,
.s-footer::before,
.s-footer::after {
  display: none !important;
  content: none !important;
}

/* إذا كان الخط dashed (منقط) */
hr,
.footer hr {
  border: none !important;
  height: 1px;
  background: linear-gradient(90deg, transparent, #7b2cff, transparent) !important;
}

/* أحياناً يكون داخل container */
footer .container,
footer .row {
  border-top: none !important;
}
/* ===== Lordly Footer Purple VIP ===== */

footer,
.site-footer,
.s-footer,
.s-footer-wrapper,
.footer,
.footer-wrapper {
  background: linear-gradient(135deg, #0a0a0a, #2b0a4a, #7b2cff) !important;
  border-top: 1px solid rgba(123, 44, 255, 0.3) !important;
}

/* الخط الصغير اللي فوق الفوتر */
footer::before,
.s-footer::before {
  background: linear-gradient(90deg, transparent, #7b2cff, transparent) !important;
  height: 1px;
  content: "";
  display: block;
}

/* النصوص داخل الفوتر */
footer,
footer * {
  color: #ffffff !important;
}

/* أي خلفية داخلية رمادية */
footer .container,
footer .row,
footer .col {
  background: transparent !important;
}
/* ===== LORDLY FORCE FULL DARK BACKGROUND ===== */

/* خلفية الموقع كاملة */
html,
body,
#app,
.app,
.wrapper,
.page-wrapper,
.store-wrapper,
main,
.main-content {
  background: #050505 !important;
}

/* الفوتر وكل طبقاته */
footer,
footer *,
.s-footer,
.s-footer *,
.store-footer,
.store-footer *,
.site-footer,
.site-footer *,
.footer,
.footer * {
  background-color: #050505 !important;
  background-image: none !important;
}

/* المنطقة اللي فوق الفوتر */
main + footer,
.main-content + footer,
section + footer,
.s-block + footer,
div + footer {
  background: #050505 !important;
}

/* إلغاء أي طبقة رمادية */
footer::before,
footer::after,
.s-footer::before,
.s-footer::after,
.store-footer::before,
.store-footer::after,
.site-footer::before,
.site-footer::after {
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
}

/* الخط البنفسجي السفلي خله مثل الموجود عندك */
footer {
  border-bottom: 6px solid #7b16d9 !important;
}

/* النصوص والأيقونات لا تتغير */
footer p,
footer span,
footer a,
footer i,
footer svg,
.s-footer p,
.s-footer span,
.s-footer a,
.s-footer i,
.s-footer svg {
  color: #ffffff !important;
}
/* ===== LORDLY Saudi Purple Divider ===== */

footer,
.s-footer {
  position: relative !important;
  background: #050505 !important;
  overflow: hidden !important;
}

/* إخفاء الفاصل الأبيض */
footer::before,
.s-footer::before {
  content: "" !important;
  position: absolute !important;
  top: -42px !important;
  left: -5% !important;
  width: 110% !important;
  height: 95px !important;
  z-index: 1 !important;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='90' viewBox='0 0 900 90'%3E%3Crect width='900' height='90' fill='%237b2cff'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='2'%3E%3Cpath d='M40 65 L70 25 L100 65 Z M120 65 L155 20 L190 65 Z'/%3E%3Cpath d='M245 68 V30 M225 68 V42 M265 68 V42 M225 42 Q245 22 265 42'/%3E%3Cpath d='M345 68 Q380 25 420 68 M362 68 V45 M405 68 V45'/%3E%3Cpath d='M520 70 C550 35 590 35 620 70 M535 70 C558 50 583 50 605 70'/%3E%3Cpath d='M705 70 L745 25 L785 70 M725 70 L745 45 L765 70'/%3E%3Cpath d='M835 70 C855 40 875 40 895 70'/%3E%3C/g%3E%3Cg fill='none' stroke='%23050505' stroke-opacity='.35' stroke-width='1.5'%3E%3Cpath d='M0 20 C160 55 290 5 450 35 S720 65 900 25'/%3E%3Cpath d='M0 55 C170 15 330 80 520 45 S760 10 900 60'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat,
    linear-gradient(90deg, #4b00a8, #7b2cff, #9b4dff, #4b00a8) !important;

  border-top: 2px solid #8b35ff !important;
  border-bottom: 2px solid #8b35ff !important;
  box-shadow: 0 0 25px rgba(123, 44, 255, .45) !important;
  transform: rotate(-1.2deg) !important;
}

/* يخلي محتوى الفوتر فوق الخلفية */
footer > *,
.s-footer > * {
  position: relative !important;
  z-index: 2 !important;
}
/* ===== LORDLY HEADER DARK FIX ===== */

header,
.s-header,
.main-header,
.store-header,
.navbar,
.top-navbar,
.salla-header,
div[class*="header"],
nav[class*="header"] {
  background: #050505 !important;
  background-color: #050505 !important;
  border: none !important;
  box-shadow: none !important;
}

/* العناصر داخل الهيدر */
header *,
.s-header *,
.main-header *,
.store-header *,
.navbar *,
.top-navbar *,
.salla-header * {
  background: transparent !important;
  color: #ffffff !important;
}

/* الخط البنفسجي تحت الهيدر (اختياري فخم) */
header::after,
.s-header::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #7b2cff, transparent);
}
/* ===== LORDLY TRUE BLACK TOP AREA ===== */
html,
body,
#app,
.app,
.store-wrapper,
.page-wrapper {
  background: #000000 !important;
}

header,
.s-header,
.store-header,
.main-header,
.site-header,
.navbar,
.top-navbar,
.salla-header,
div[class*="header"],
div[class*="navbar"] {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

header *,
.s-header *,
.store-header *,
.main-header *,
.site-header *,
.navbar *,
.top-navbar *,
.salla-header * {
  background-color: transparent !important;
  color: #ffffff !important;
}
/* ===== Bottom Bar Dark VIP ===== */

/* خلفية الشريط */
.s-app-bar,
.s-bottom-nav,
.s-bottom-bar,
.mobile-nav,
.bottom-nav,
.bottom-bar,
nav[class*="bottom"],
div[class*="bottom-nav"] {
  background: #000000 !important;
  background-color: #000000 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important; /* خط خفيف فخم */
}

/* النصوص والأيقونات */
.s-app-bar *,
.s-bottom-nav *,
.s-bottom-bar *,
.mobile-nav *,
.bottom-nav *,
.bottom-bar *,
nav[class*="bottom"] *,
div[class*="bottom-nav"] * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* الأيقونة/العنصر النشط */
.s-bottom-nav .active,
.bottom-nav .active,
.mobile-nav .active {
  color: #7b2cff !important;
}

.s-bottom-nav .active svg,
.bottom-nav .active svg,
.mobile-nav .active svg {
  fill: #7b2cff !important;
  stroke: #7b2cff !important;
}

/* ===== Product Border VIP ===== */

salla-product-card,
.s-product-card,
.s-product-card-entry,
.product-card,
.product-item,
.product {

  border: 2px solid transparent !important;
  border-radius: 18px !important;

  background:
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(135deg,
      #000000,
      #ffffff,
      #7b2cff,
      #000000,
      #ffffff,
      #7b2cff
    ) border-box !important;

  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

/* Hover Effect */
salla-product-card:hover,
.s-product-card:hover,
.s-product-card-entry:hover,
.product-card:hover,
.product-item:hover,
.product:hover {

  box-shadow:
    0 0 12px rgba(123,44,255,0.4),
    0 0 6px rgba(255,255,255,0.2);

  transform: translateY(-3px);
}