/* ==========================================================
   MASHAEL TECH — MALAK THEME OPTIMIZED
   Premium Blue + Navy | Salla Twilight Engine
   ========================================================== */

/* 1. DESIGN TOKENS */
:root {
  --mt-bg: #F5F7FB;
  --mt-card: #FFFFFF;
  --mt-primary: #3765F5;
  --mt-primary-dark: #2446AF;
  --mt-navy: #0B152C;
  --mt-text: #101E38;
  --mt-muted: #778196;
  --mt-border: #DDE3EF;
  --mt-radius-md: 16px;
  --mt-radius-lg: 20px;
  --mt-shadow: 0 4px 16px rgba(16,30,56,.06);
  --mt-shadow-hover: 0 10px 24px rgba(16,30,56,.12);
}

/* 2. GLOBAL STYLES */
html, body {
  background-color: var(--mt-bg);
  color: var(--mt-text);
  -webkit-font-smoothing: antialiased;
}

/* 3. HEADER & TOP NAVBAR (Unified Navy Color - FORCE) */
header, 
salla-header, 
.s-header, 
.s-site-header, 
.store-header, 
.main-header,
.header-inner,
.top-navbar,
.s-announcement-bar {
  background-color: var(--mt-navy) !important;
  background: var(--mt-navy) !important;
  border: none !important;
  box-shadow: none !important;
}

.top-navbar, 
.top-navbar a, 
.top-navbar span,
.s-announcement-bar,
.s-announcement-bar * {
  color: #F6FAFF !important;
}

/* تلوين أيقونات وروابط الهيدر بالأبيض وإجبار ظهورها */
header a, header button, header i, header svg, header path,
salla-header a, salla-header button, salla-header i, salla-header svg, salla-header path {
  color: #F6FAFF !important;
  fill: #F6FAFF !important; 
  stroke: #F6FAFF !important; 
}

header a:hover, 
salla-header a:hover {
  color: var(--mt-primary) !important;
}

@media (min-width: 768px) {
  .navbar-brand img {
    max-height: 75px !important;
    object-fit: contain;
  }
}

@media (max-width: 767px) {
  .navbar-brand img {
    max-height: 55px !important;
    object-fit: contain;
  }
}

/* 4. SEARCH INPUTS */
.s-search-input, .search-input {
  background-color: #FFFFFF !important;
  color: var(--mt-text) !important;
  border: 1px solid var(--mt-border) !important;
  border-radius: 999px !important;
}

.s-search-input:focus, .search-input:focus {
  border-color: var(--mt-primary) !important;
  box-shadow: 0 0 0 3px rgba(55,101,245,.12) !important;
}

/* 5. SECTIONS & TITLES */
.s-block__title h2, .s-slider-block__title h2 {
  color: var(--mt-text);
  font-weight: 800;
}

.s-block__title a, .s-slider-block__display-all {
  color: var(--mt-primary);
  font-weight: 700;
}

/* 6. BANNERS & SLIDERS */
.s-block--photos-slider img, 
.s-block--banners img {
  border-radius: var(--mt-radius-md);
}

@media (max-width: 767px) {
  .s-block--banners .grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .s-block--banners .banner-entry {
    flex: 0 0 85%;
    border-radius: 12px;
  }
}

/* 7. PRODUCT CARDS (Twilight Standard) */
.s-product-card-entry {
  background: var(--mt-card);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-md);
  box-shadow: var(--mt-shadow);
  transition: all .2s ease;
}

.s-product-card-entry:hover {
  border-color: rgba(55,101,245,.35);
  box-shadow: var(--mt-shadow-hover);
}

.s-product-card-content-title a {
  color: var(--mt-text);
  font-weight: 700;
}

.s-product-card-content-title a:hover {
  color: var(--mt-primary);
}

.s-product-card-price {
  color: var(--mt-primary);
  font-weight: 800;
}

/* 8. BUTTONS & BADGES */
.s-product-card-entry .s-button-element, 
.s-button-primary {
  background-color: var(--mt-primary) !important;
  border-color: var(--mt-primary) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
}

.s-product-card-entry .s-button-element:hover, 
.s-button-primary:hover {
  background-color: var(--mt-primary-dark) !important;
}

.s-product-card-promotion-title {
  background-color: var(--mt-primary) !important;
}

/* 9. CUSTOM HERO SECTION (Mashael Experience) */
#mashael-experience {
  background-color: var(--mt-navy);
  color: #F6FAFF;
}

#mashael-experience .mt-copy h1,
#mashael-experience .mt-category-heading h2 {
  color: #F6FAFF;
  font-weight: 700;
}

#mashael-experience .mt-copy h1 em {
  color: #AFC4FF;
  font-style: normal;
}

/* 10. DARK BACKGROUND FOR CUSTOM HERO HOMEPAGE */
body:has(#mashael-experience),
body:has(#mashael-experience) .s-main-content {
  background-color: var(--mt-navy);
}

body:has(#mashael-experience) .s-block__title h2 {
  color: #F6FAFF;
}

body:has(#mashael-experience) .s-block__title a {
  color: #AFC4FF;
}

/* 11. FOOTER */
.s-site-footer {
  background-color: var(--mt-navy) !important;
  color: #E7EDFF;
}

.s-site-footer a, .s-site-footer h3 {
  color: #E7EDFF !important;
}

/* 12. MOBILE TWEAKS */
@media (max-width: 767px) {
  .s-product-card-entry {
    border-radius: 14px;
  }
  .s-product-card-content-title a {
    font-size: 13px;
  }
  .s-product-card-price {
    font-size: 14px;
  }
}
/* ==========================================================
   الكسر الإجباري للون الهيدر - ثيم ملاك
   ========================================================== */

/* 1. تجاوز متغيرات سلة الأساسية */
:root, [data-theme="light"], [data-theme="dark"] {
  --header-bg: #0B152C !important;
  --theme-header-bg: #0B152C !important;
}

/* 2. تلوين كافة الطبقات والحاويات الخاصة بالهيدر */
header, 
header.s-header, 
salla-header,
.s-site-header, 
.store-header, 
.main-header,
.s-header__inner,
.s-header-wrapper,
.header-inner,
.s-header-container,
header > div,
.store-header > div,
.top-navbar,
.s-announcement-bar {
  background-color: #0B152C !important;
  background: #0B152C !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3. إظهار الأيقونات (السلة، القائمة، المستخدم) والروابط باللون الأبيض */
header a, 
header button, 
header i, 
header svg, 
header path,
.s-header a, 
.s-header button, 
.s-header i, 
.s-header svg, 
.s-header path,
.store-header a, 
.store-header button, 
.store-header i, 
.store-header svg, 
.store-header path,
.header-actions button,
.header-actions a {
  color: #F6FAFF !important;
}

/* فرض لون الأطراف (Stroke) لأيقونات SVG في حال كانت مفرغة */
header svg, 
.s-header svg, 
.store-header svg {
  stroke: #F6FAFF !important;
}

/* 4. حماية مربع البحث ليبقى أبيض والخط داخله غامق */
header input[type="search"], 
.s-header input, 
.store-header input,
.s-search-input,
.search-input {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #101E38 !important;
  border: 1px solid transparent !important;
}

/* استثناء أيقونة البحث داخل المربع لتظهر بلون غامق */
header form button svg,
.s-header form button svg,
.search-form button svg {
  stroke: #101E38 !important;
  color: #101E38 !important;
}
/* ==========================================================
   إزالة الفراغ الأبيض بين الهيدر والتصميم في ثيم ملاك
   ========================================================== */

/* 1. تلوين خلفية الحاوية الرئيسية باللون الكحلي وإزالة الحشوة العلوية */
body:has(#mashael-experience) .s-main-content,
body:has(#mashael-experience) main,
body:has(#mashael-experience) .app-inner,
body:has(#mashael-experience) .content-wrapper,
body:has(#mashael-experience) .store-home {
  background-color: #0B152C !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2. إزالة الهوامش السفلية من الهيدر والهوامش العلوية من تصميمك */
header, 
salla-header, 
.s-site-header, 
.store-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#mashael-experience {
  margin-top: 0 !important;
}

/* 3. إخفاء شريط مسار التنقل (Breadcrumbs) في الصفحة الرئيسية إذا كان موجوداً */
body:has(#mashael-experience) salla-breadcrumb,
body:has(#mashael-experience) .s-breadcrumb,
body:has(#mashael-experience) nav[aria-label="breadcrumb"] {
  display: none !important;
}

/* Account menu contrast fix — mobile and desktop */
salla-user-menu .s-user-menu-dropdown {
  background: #FFFFFF !important;
  color: #101E38 !important;
}
salla-user-menu .s-user-menu-dropdown :is(a, button, span, p, i, svg, path) {
  color: #101E38 !important;
  -webkit-text-fill-color: currentColor !important;
}
salla-user-menu .s-user-menu-dropdown :is(svg, path) {
  fill: currentColor !important;
  stroke: none !important;
}
salla-user-menu .s-user-menu-dropdown .s-user-menu-dropdown-item-link:is(:hover, :focus-visible) {
  color: #2446AF !important;
  background: #F0F4FF !important;
}
salla-user-menu .s-user-menu-dropdown .s-user-menu-dropdown-item-link:is(:hover, :focus-visible) * {
  color: inherit !important;
}
salla-user-menu .s-user-menu-dropdown .s-user-menu-dropdown-item-logout :is(a, span, i, svg, path) {
  color: #B42318 !important;
}

/* Customer pages use a light background: keep breadcrumb labels readable. */
body:has(nav[aria-label="حسابي"]) .s-breadcrumb-wrapper .s-breadcrumb-item,
body:has(nav[aria-label="حسابي"]) .s-breadcrumb-wrapper .s-breadcrumb-item a {
  color: #2446AF !important;
  -webkit-text-fill-color: currentColor !important;
}
body:has(nav[aria-label="حسابي"]) .s-breadcrumb-wrapper svg,
body:has(nav[aria-label="حسابي"]) .s-breadcrumb-wrapper svg path {
  color: #778196 !important;
  fill: currentColor !important;
}


/* The cart summary header is a white card, separate from the store navbar. */
header.s-cart-summary-card-sheet-header {
  background: #FFFFFF !important;
  color: #101E38 !important;
}
header.s-cart-summary-card-sheet-header :is(h3, button, i, svg, path) {
  color: #101E38 !important;
  -webkit-text-fill-color: currentColor !important;
}
header.s-cart-summary-card-sheet-header :is(svg, path) {
  fill: currentColor !important;
  stroke: none !important;
}

/* Mobile cart: keep coupon instructions unobstructed. */
@media (max-width: 767px) {
  body.cart #mt-direct-whatsapp { display: none !important; }
}