/* =========================================================
   JetStoreKSA – GLOBAL CLEAN + MOTION THEME (v2)
   ========================================================= */

/* ---------- 1) Variables ---------- */
:root{
  --brand: #d4af37;
  --brand2:#2563eb;
  --brand-glow:#f5d76e;

  --bg0:#070b14;
  --bg1:#0b1224;
  --bg2:#0e1a36;

  --card:#0b1632cc;
  --card2:#0a132bcc;

  --text:#dfe9fb;
  --text-2:#d5e3fa;
  --text-3:#c6d8f6;
  --muted:#aebfdf;
  --gold-text:#f0d78a;

  --line: rgba(120,150,210,.22);
  --line2: rgba(120,150,210,.12);
  --line-gold: rgba(212,175,55,.24);
  --line-gold-2: rgba(212,175,55,.14);

  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadow2: 0 10px 28px rgba(0,0,0,.28);

  --r: 16px;
  --r2: 22px;

  --t: 220ms;
  --t2: 380ms;

  --glass: rgba(11,18,36,.55);
  --glass2: rgba(11,18,36,.38);
}

/* ---------- Base ---------- */
html,body{
  background: var(--bg0) !important;
}
body{
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* خلفية */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 70% 10%, rgba(212,175,55,.18), transparent 55%),
    radial-gradient(820px 520px at 20% 30%, rgba(37,99,235,.12), transparent 58%),
    linear-gradient(145deg, var(--bg0), var(--bg1) 40%, var(--bg0));
}

/* ---------- Buttons ---------- */
button,
.btn,
a.btn,
.s-button,
.s-add-product-button,
.s-product-card-add-to-cart,
salla-add-product-button button{
  background: linear-gradient(
    135deg,
    var(--brand),
    var(--brand2),
    var(--brand-glow)
  ) !important;
  color: #08111f !important;
  border: 1px solid rgba(212,175,55,.18) !important;
  border-radius:14px !important;
  box-shadow: 0 12px 30px rgba(212,175,55,.25) !important;
  transition: all .25s ease;
}

button:hover,
.btn:hover,
a.btn:hover,
.s-button:hover,
.s-add-product-button:hover,
.s-product-card-add-to-cart:hover,
salla-add-product-button button:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(212,175,55,.35) !important;
  filter: brightness(1.08);
}

button:active,
.btn:active{
  transform: translateY(0) scale(.99);
}

/* ---------- Links ---------- */
a{
  color: var(--text-2);
}
a:hover{
  color: var(--brand);
}

/* ---------- Focus ---------- */
:focus-visible{
  outline: 2px solid rgba(212,175,55,.7);
  outline-offset: 2px;
}

/* ---------- Product Card Hover ---------- */
.s-product-card:hover{
  border-color: rgba(212,175,55,.35) !important;
}

/* ---------- Stars ---------- */
.rating svg,
.star{
  color: #f5d76e !important;
  fill: #f5d76e !important;
}

/* ---------- Reviews ---------- */
.s-reviews-testimonial svg{
  color: #f5d76e !important;
  fill: #f5d76e !important;
}

/* ---------- Forms Buttons ---------- */
.product-form button,
.product-form .btn{
  background: linear-gradient(
    135deg,
    var(--brand),
    var(--brand2),
    var(--brand-glow)
  ) !important;
  color: #08111f !important;
  border: 1px solid rgba(212,175,55,.18) !important;
}

/* ---------- Cart Buttons ---------- */
.cart button,
.cart .btn,
.cart .s-button-primary{
  background: linear-gradient(
    135deg,
    var(--brand),
    var(--brand2)
  ) !important;
  color: #08111f !important;
  border: 1px solid rgba(212,175,55,.18) !important;
}

/* ---------- Table Header ---------- */
.s-orders-table thead{
  background: linear-gradient(
    135deg,
    var(--brand),
    var(--brand2)
  ) !important;
}

.s-orders-table thead th{
  color: #08111f !important;
}

/* ---------- Glow Effect ---------- */
button,
.btn{
  position: relative;
  overflow: hidden;
}

button::after,
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(245,215,110,.22),
    transparent
  );
  opacity:0;
  transition:.4s;
}

button:hover::after,
.btn:hover::after{
  opacity:1;
}

/* ---------- Inputs ---------- */
input,
select,
textarea{
  color: var(--text) !important;
  background: rgba(13,22,42,.82) !important;
  border: 1px solid rgba(120,150,210,.18) !important;
}

input::placeholder,
textarea::placeholder{
  color: rgba(174,191,223,.72) !important;
}

/* ---------- Product Cards ---------- */
.s-product-card,
custom-salla-product-card,
.s-product-card-entry,
.s-product-card-vertical,
.s-product-card-fit-height{
  background: linear-gradient(145deg, var(--card), var(--card2)) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--shadow2) !important;
  overflow: hidden;
  transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}

.s-product-card:hover,
custom-salla-product-card:hover{
  transform: translateY(-4px);
  border-color: rgba(212,175,55,.28) !important;
  box-shadow: var(--shadow) !important;
}

.s-product-card-image,
.s-product-card-image-cover,
.product-card-image,
.s-product-card-image img,
.s-product-card-image-cover img{
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(245,215,110,.08), rgba(37,99,235,.03) 55%, transparent 70%),
    linear-gradient(145deg, rgba(11,18,36,.65), rgba(7,11,20,.35)) !important;
}

.s-product-card-image img,
.s-product-card-image-cover img{
  mix-blend-mode: normal;
  display: block;
}

.s-product-card-content,
.s-product-card-entry{
  color: var(--text) !important;
}

.s-product-card-title,
.s-product-card-content h3,
.s-product-card-content a{
  color: var(--text-2) !important;
}

.s-product-card-subtitle,
.s-product-card-content p{
  color: rgba(198,216,246,.72) !important;
}

.s-product-card-price,
.s-product-card-sale-price{
  color: var(--gold-text) !important;
}

/* ---------- Product Area ---------- */
.product,
.product-single,
.product-single-page,
.product-content,
.product-details{
  background: transparent !important;
}

.content-single-page,
.product .container > div{
  background: linear-gradient(145deg, #0b1f3d, #0d2a52) !important;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(212,175,55,.08);
  color: var(--text);
}

.product h1,
.product h2,
.product h3{
  color: var(--gold-text) !important;
}

.product p,
.product span,
.product li{
  color: #d2e0f8 !important;
  line-height: 1.9;
}

.product img{
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
}

form.product-form,
.sticky-product-bar{
  background: linear-gradient(160deg, #0f2f5c, #123a70) !important;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(212,175,55,.12);
  box-shadow: 0 15px 40px rgba(0,0,0,.35);
}

.product-form input,
.product-form select,
.product-form textarea{
  background: rgba(13,22,42,.82) !important;
  border: 1px solid rgba(120,150,210,.18) !important;
  color: var(--text) !important;
  border-radius: 12px;
  padding: 12px;
}

.product-form input::placeholder,
.product-form textarea::placeholder{
  color: rgba(174,191,223,.72) !important;
}

/* ---------- Orders Table ---------- */
.s-orders-table{
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(145deg, var(--card), var(--card2));
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid var(--line2);
  box-shadow: var(--shadow2);
  color: var(--text);
}

.s-orders-table-tbody tr{
  background: rgba(7,11,20,.75);
  transition: background var(--t) ease, transform var(--t) ease;
}

.s-orders-table-tbody tr:nth-child(even){
  background: rgba(11,18,36,.85);
}

.s-orders-table-tbody tr:hover{
  background: rgba(212,175,55,.08);
  transform: translateY(-1px);
}

.s-orders-table-tbody td{
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line2);
}

.s-orders-table-tbody td.order-number{
  font-weight: 600;
  color: var(--brand);
}

.s-orders-table-tbody td.order-total{
  font-weight: 600;
  color: var(--gold-text);
}

.s-orders-table-tbody td.order-date{
  color: var(--muted);
}

.s-orders-table-tbody td.order-status{
  font-weight: 600;
  font-size: 13px;
}

.s-orders-table-tbody td.order-status span{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(11,18,36,.9);
}

.s-orders-table-tbody td.order-status.status-completed span{
  color: #76e5a1;
  border-color: rgba(74,222,128,.45);
  background: rgba(22,163,74,.18);
}

.s-orders-table-tbody td.order-status.status-returned span{
  color: #f2a3a3;
  border-color: rgba(248,113,113,.45);
  background: rgba(185,28,28,.20);
}

.s-orders-table-tbody td.order-status.status-pending span{
  color: #f0d78a;
  border-color: rgba(251,191,36,.45);
  background: rgba(180,83,9,.22);
}

.s-orders-table-tbody td.order-status.status-explained span{
  color: #8ab4ff;
  border-color: rgba(96,165,250,.45);
  background: rgba(37,99,235,.18);
}

/* ---------- Luxury polish ---------- */
.card,
.s-product-card,
.s-block,
.salla-orders .s-orders-table-body-tr,
nav[aria-label="Sidebar"]{
  border-radius: 18px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.12) !important;
}

a,
button,
.s-product-card{
  transition: all .22s ease !important;
}

.s-product-card:hover,
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
}

/* ---------- Toast ---------- */
.swal2-container{
  z-index: 2147483647 !important;
  position: fixed !important;
}

.swal2-toast{
  top: 90px !important;
  right: 50% !important;
  transform: translateX(50%) !important;
  max-width: min(92vw, 420px);
  color: var(--text) !important;
  background: linear-gradient(145deg, rgba(10,18,36,.96), rgba(13,26,52,.94)) !important;
  border: 1px solid rgba(212,175,55,.12) !important;
}

body.swal2-toast-shown,
body.swal2-shown{
  overflow: visible !important;
  padding-right: 0 !important;
}

.swal2-backdrop-show{
  background: transparent !important;
}

/* ---------- Loader ---------- */
#brand-loader{
  position: fixed;
  inset: 0;
  background: #050b1a;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}

#brand-loader.hidden{
  opacity: 0;
  visibility: hidden;
}

#brand-loader img{
  width: 120px;
  height: auto;
  animation: brandPulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(212,175,55,.45))
          drop-shadow(0 0 24px rgba(37,99,235,.28));
}

@keyframes brandPulse{
  0%   { transform: scale(1); opacity: .85; }
  50%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: .85; }
}

html.loader-hold body{
  opacity: 0 !important;
}

html.loader-ready body{
  opacity: 1 !important;
  transition: opacity .15s ease;
}

/* ---------- User menu click fix ---------- */
.s-user-menu-dropdown{
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.s-user-menu-toggler.opened .s-user-menu-dropdown,
.s-user-menu-wrapper.opened .s-user-menu-dropdown,
.s-user-menu.opened .s-user-menu-dropdown{
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.s-user-menu-backdrop,
.s-user-menu-overlay{
  pointer-events: none !important;
}

.s-user-menu-toggler.opened .s-user-menu-backdrop,
.s-user-menu-wrapper.opened .s-user-menu-backdrop,
.s-user-menu.opened .s-user-menu-backdrop,
.s-user-menu-toggler.opened .s-user-menu-overlay,
.s-user-menu-wrapper.opened .s-user-menu-overlay,
.s-user-menu.opened .s-user-menu-overlay{
  pointer-events: auto !important;
}
/* ===== REMOVE WHITE HEADER COMPLETELY ===== */

/* الهيدر الرئيسي */
header.store-header,
.store-header,
.top-navbar,
.main-nav-container,
.main-nav-container.shadow-default,
.main-nav-container.bg-white,
.top-navbar.bg-white{
  
  background: linear-gradient(
    145deg,
    rgba(7,11,20,.95),
    rgba(11,18,36,.92)
  ) !important;

  border-bottom: 1px solid rgba(212,175,55,.12) !important;
  backdrop-filter: blur(10px);
}

/* أي عنصر داخلي فيه bg-white */
header.store-header .bg-white,
.top-navbar .bg-white,
.main-nav-container .bg-white{
  background: transparent !important;
}

/* الطبقة اللي فوق (container الداخلي) */
.main-nav-container .inner,
header.store-header .inner{
  background: transparent !important;
}

/* الشريط اللي فوق (اللي بالصورة البنفسجي/أبيض) */
.top-navbar{
  background: linear-gradient(
    145deg,
    rgba(9,16,30,.95),
    rgba(12,22,44,.92)
  ) !important;
}

/* أي flex bar مثل اللي بالصورة */
.flex.items-stretch.justify-between{
  background: transparent !important;
}

/* ظل خفيف ذهبي */
.main-nav-container.fixed-pinned{
  box-shadow: 0 10px 30px rgba(212,175,55,.18) !important;
}
/* =========================================================
   FINAL WHITE-KILL PATCH
   حطه آخر شيء في الـ CSS
   ========================================================= */

/* ===== 1) قتل أي bg-white عام ===== */
.bg-white,
[class*="bg-white"],
section.bg-white,
div.bg-white,
footer .bg-white,
main .bg-white,
article .bg-white,
aside .bg-white {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===== 2) بلوك المميزات ===== */
section.s-block.s-block--features.container,
section.s-block.s-block--features,
section.s-block.s-block--features > .grid,
section.s-block.s-block--features .grid{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

section.s-block.s-block--features .s-block__features__item,
section.s-block.s-block--features .s-block--features__item{
  background: linear-gradient(145deg, rgba(10,20,40,.96), rgba(13,31,61,.94)) !important;
  border: 1px solid rgba(212,175,55,.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
  color: #dfe9fb !important;
}

section.s-block.s-block--features .s-block__features__item *,
section.s-block.s-block--features .s-block--features__item *{
  color: #dfe9fb !important;
}

section.s-block.s-block--features .s-block__features__item h2,
section.s-block.s-block--features .s-block__features__item h3,
section.s-block.s-block--features .s-block--features__item h2,
section.s-block.s-block--features .s-block--features__item h3{
  color: #f0d78a !important;
}

section.s-block.s-block--features .s-block__features__item p,
section.s-block.s-block--features .s-block--features__item p{
  color: #b8c6e6 !important;
}

section.s-block.s-block--features .s-block__features__item svg,
section.s-block.s-block--features .s-block__features__item i,
section.s-block.s-block--features .s-block--features__item svg,
section.s-block.s-block--features .s-block--features__item i{
  color: #d4af37 !important;
  fill: #d4af37 !important;
}

/* ===== 3) الفوتر الداخلي الكبير ===== */
footer.store-footer,
.store-footer,
.store-footer__inner,
.footer-is-light .store-footer,
.footer-is-light .store-footer .store-footer__inner,
div.store-footer__inner{
  background: linear-gradient(145deg, rgba(8,16,31,.98), rgba(11,25,49,.96)) !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(212,175,55,.12) !important;
  border-bottom: 0 !important;
  color: #dfe9fb !important;
}

.store-footer__inner *,
footer.store-footer *,
.store-footer *{
  color: #dfe9fb !important;
}

.store-footer__inner h2,
.store-footer__inner h3,
.store-footer__inner h4,
.store-footer__inner strong{
  color: #f0d78a !important;
}

/* ===== 4) السطر السفلي في الفوتر ===== */
footer.store-footer .md\:flex.items-center.justify-between.py-4.container.text-center,
footer.store-footer .items-center.justify-between.py-4.container.text-center,
.store-footer .md\:flex.items-center.justify-between.py-4.container.text-center{
  background: linear-gradient(145deg, rgba(7,13,26,.98), rgba(10,20,40,.96)) !important;
  border-top: 1px solid rgba(120,150,210,.10) !important;
  border-bottom: 0 !important;
  color: #b8c6e6 !important;
}

footer.store-footer .md\:flex.items-center.justify-between.py-4.container.text-center *,
footer.store-footer .items-center.justify-between.py-4.container.text-center *{
  color: #b8c6e6 !important;
}

/* ===== 5) قائمة الجوال نفسها ===== */
.mm-ocd,
.mm-ocd__content,
.mm-ocd_content{
  background: rgba(4,10,20,.58) !important;
}

#mobile-menu,
nav#mobile-menu,
.mobile-menu.mm-spn,
.mm-spn,
.mm-spn.mm-spn--navbar,
.mm-spn.mm-spn--main,
.mm-spn.mm-spn--light,
nav.mobile-menu.mm-spn--light.mm-spn--navbar.mm-spn--main.mm-spn{
  background: linear-gradient(145deg, rgba(8,16,31,.98), rgba(11,25,49,.97)) !important;
  background-color: transparent !important;
  color: #dfe9fb !important;
  border-left: 1px solid rgba(212,175,55,.12) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
}

/* القائمة الداخلية UL */
.mm-spn ul,
.mm-spn .main-menu,
.mm-spn ul.main-menu.mm-spn--open,
ul.main-menu.mm-spn--open{
  background: linear-gradient(145deg, rgba(10,20,40,.98), rgba(13,31,61,.97)) !important;
  background-color: transparent !important;
}

/* عناصر الجوال */
.mm-spn li,
.mm-spn li::before,
.mm-spn li::after,
.mm-spn li > a,
.mm-spn li > span{
  background: transparent !important;
  color: #dfe9fb !important;
  border-color: rgba(120,150,210,.10) !important;
}

.mm-spn li > a:hover,
.mm-spn li > span:hover{
  background: rgba(212,175,55,.08) !important;
  color: #f0d78a !important;
}

/* ===== 6) هيدر قائمة الجوال ===== */
.mm-spn__navbar,
.mm-spn.mm-spn--navbar:before,
.mm-spn.mm-spn--navbar:after,
.mm-spn.mm-spn--main:before,
.mm-spn.mm-spn--main:after,
nav#mobile-menu:before,
nav#mobile-menu:after,
nav.mobile-menu.mm-spn--light.mm-spn--navbar.mm-spn--main.mm-spn:before,
nav.mobile-menu.mm-spn--light.mm-spn--navbar.mm-spn--main.mm-spn:after{
  background: linear-gradient(145deg, rgba(11,25,49,.98), rgba(14,36,71,.96)) !important;
  background-color: transparent !important;
  color: #f0d78a !important;
  border-bottom: 1px solid rgba(212,175,55,.12) !important;
  box-shadow: none !important;
}

.mm-spn__navbar *,
.mm-spn.mm-spn--navbar:before,
.mm-spn.mm-spn--navbar:after{
  color: #f0d78a !important;
}

/* زر الإغلاق */
button.btn--close.close-mobile-menu,
button[class*="close-mobile-menu"]{
  background: rgba(212,175,55,.12) !important;
  border: 1px solid rgba(212,175,55,.20) !important;
  color: #d4af37 !important;
}

/* ===== 7) صفحة المنتج – أي سكشن أبيض ===== */
form.product-form section.bg-white,
form.product-form section.flex.bg-white,
form.product-form section.sticky-product-bar.bg-white,
section.sticky-product-bar.bg-white,
section.flex.bg-white.p-5,
section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none,
section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none *,
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none,
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none *{
  background: linear-gradient(160deg, rgba(15,47,92,.96), rgba(18,58,112,.94)) !important;
  background-color: transparent !important;
  color: #dfe9fb !important;
  border: 1px solid rgba(212,175,55,.12) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}

/* شريط السعر والـ 22 ريال */
.product-form .price,
.product-form .amount,
.product-form .total,
.product-form [class*="price"],
.product-form [class*="amount"]{
  color: #f0d78a !important;
}

/* الحقول داخل الفورم */
.product-form input,
.product-form select,
.product-form textarea{
  background: rgba(9,18,35,.88) !important;
  color: #dfe9fb !important;
  border: 1px solid rgba(120,150,210,.18) !important;
}

/* ===== 8) أي عنصر أبيض طالع في الفوتر أو المنتج ===== */
.store-footer [class*="bg-"],
.product-form [class*="bg-white"],
.product-single-description [class*="bg-white"],
#main-content [class*="bg-white"]{
  background-color: transparent !important;
}

/* ===== 9) حماية إضافية للنصوص ===== */
.store-footer a,
.store-footer p,
.store-footer li,
.store-footer span,
.store-footer div,
.product-form p,
.product-form span,
.product-form label,
.mm-spn a,
.mm-spn span{
  color: #dfe9fb !important;
}

.store-footer a:hover,
.mm-spn a:hover{
  color: #f0d78a !important;
}

/* ===== 10) الشريط/الفراغات الملونة الغريبة ===== */
section.s-block.s-block--features.container::before,
section.s-block.s-block--features.container::after,
.store-footer__inner::before,
.store-footer__inner::after,
.store-footer::before,
.store-footer::after{
  content: none !important;
  display: none !important;
}
/* =========================================================
   FIX CUSTOM MAIN MENU IN HEADER
   ========================================================= */

/* العنصر نفسه */
custom-main-menu{
  display: flex !important;
  align-items: center !important;
  min-height: auto !important;
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  z-index: auto !important;
}

/* أي شيء داخل العنصر */
custom-main-menu,
custom-main-menu *{
  background: transparent !important;
  box-shadow: none !important;
  border-color: rgba(212,175,55,.10) !important;
}

/* لو فيه القائمة الأصلية داخله */
custom-main-menu ul,
custom-main-menu ol,
custom-main-menu nav,
custom-main-menu .menu,
custom-main-menu .main-menu,
custom-main-menu .sub-menu{
  background: transparent !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* الروابط */
custom-main-menu a,
custom-main-menu button,
custom-main-menu span{
  color: #dfe9fb !important;
  background: transparent !important;
  line-height: 1.2 !important;
}

/* الهوفر */
custom-main-menu a:hover,
custom-main-menu button:hover{
  color: #f0d78a !important;
  background: rgba(212,175,55,.08) !important;
  border-radius: 12px !important;
}

/* لو فيه عنصر متوسع بعرض/ارتفاع غلط */
custom-main-menu > *{
  max-width: 100% !important;
  min-height: auto !important;
}

/* إصلاح مكانه داخل الهيدر */
header.store-header custom-main-menu,
.main-nav-container custom-main-menu,
.top-navbar custom-main-menu{
  align-self: center !important;
  justify-self: auto !important;
}

/* لو في خلفية زرقاء جاية من كلاسات داخلية */
custom-main-menu [class*="bg-"],
custom-main-menu [class*="background"],
custom-main-menu .bg-white,
custom-main-menu .bg-primary,
custom-main-menu .bg-blue{
  background: transparent !important;
  background-color: transparent !important;
}

/* لو عندك الدروب داون نفسه، نخليه فقط هو اللي يطلع بخلفية */
custom-main-menu .sub-menu,
custom-main-menu .dropdown-menu,
custom-main-menu [role="menu"]{
  background: linear-gradient(145deg, rgba(8,16,31,.98), rgba(11,25,49,.97)) !important;
  border: 1px solid rgba(212,175,55,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 35px rgba(0,0,0,.28) !important;
  padding: 8px !important;
}

/* لو فيه بادينق أو ارتفاع مفروض من app.css */
custom-main-menu[style],
custom-main-menu.style,
custom-main-menu.custom-main-menu{
  min-height: auto !important;
  height: auto !important;
}