/* Add custom CSS styles below */ 
/* =====================================
   تأثير اليوم الوطني 96 على الهيدر
   يستهدف الهيدر الرئيسي فقط
===================================== */

.header__main-container {
  --nd-green-dark: #075f3e;
  --nd-green: #0b7a4b;
  --nd-green-light: #dcecdf;
  --nd-ivory: #fbf7ec;
  --nd-gold: #c8a45d;

  position: relative;
  isolation: isolate;
  min-height: 82px;
}

/* الخلفية والزخارف */
.header__main-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -2;

  width: 100vw;
  transform: translateX(-50%);

  background:
    /* لمعة ذهبية هادئة */
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 40%,
      rgba(200, 164, 93, 0.15) 48%,
      rgba(255, 255, 255, 0.30) 51%,
      rgba(200, 164, 93, 0.12) 54%,
      transparent 62%,
      transparent 100%
    ),

    /* زخارف هندسية يمين */
    repeating-linear-gradient(
      45deg,
      rgba(7, 95, 62, 0.055) 0 5px,
      transparent 5px 13px
    ),

    /* لون الخلفية الأساسي */
    linear-gradient(
      135deg,
      var(--nd-ivory) 0%,
      #f2f6ec 40%,
      var(--nd-green-light) 100%
    );

  background-size:
    230% 100%,
    48px 48px,
    100% 100%;

  background-position:
    130% 0,
    center,
    center;

  border-top: 3px solid var(--nd-green-dark);
  border-bottom: 3px solid var(--nd-gold);

  box-shadow:
    0 7px 22px rgba(7, 95, 62, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);

  animation: national-header-shine 8s ease-in-out infinite;
  pointer-events: none;
}

/* رقم 96 كعلامة مائية */
.header__main-container::after {
  content: "96";
  position: absolute;
  top: 50%;
  right: 8%;
  z-index: -1;

  transform: translateY(-50%);
  font-family: Arial, sans-serif;
  font-size: 76px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -7px;

  color: transparent;
  -webkit-text-stroke: 1.5px rgba(7, 95, 62, 0.12);

  opacity: 0.85;
  pointer-events: none;
}

/* ضمان ظهور عناصر الهيدر فوق التأثير */
.header__main-container .header__main-row {
  position: relative;
  z-index: 3;
  min-height: 82px;
}

/* لون الأيقونات والنصوص */
.header__main-container .header-btn__icon,
.header__main-container .sicon-menu,
.header__main-container .menu-label,
.header__main-container .sicon-search,
.header__main-container .sicon-cart {
  color: var(--nd-green-dark) !important;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

/* حركة بسيطة عند المرور على أيقونات الهيدر */
.header__main-container button:hover .header-btn__icon,
.header__main-container a:hover .sicon-menu,
.header__main-container button:hover .sicon-search,
.header__main-container a:hover .sicon-cart {
  color: var(--nd-gold) !important;
  transform: translateY(-2px);
}

/* إبراز اللوجو بشكل هادئ */
.header__main-container .header__brand {
  position: relative;
}

.header__main-container .header__brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;

  width: 115px;
  height: 62px;
  transform: translate(-50%, -50%);

  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.42) 48%,
    transparent 75%
  );

  border-radius: 50%;
  pointer-events: none;
}

/* حركة اللمعة عبر الهيدر */
@keyframes national-header-shine {
  0%,
  55% {
    background-position:
      130% 0,
      center,
      center;
  }

  85%,
  100% {
    background-position:
      -130% 0,
      center,
      center;
  }
}

/* نسخة الموبايل */
@media (max-width: 767px) {
  .header__main-container,
  .header__main-container .header__main-row {
    min-height: 70px;
  }

  .header__main-container::before {
    background-size:
      300% 100%,
      36px 36px,
      100% 100%;

    border-top-width: 2px;
    border-bottom-width: 2px;
  }

  .header__main-container::after {
    right: 17%;
    font-size: 53px;
    letter-spacing: -5px;
    opacity: 0.55;
  }

  .header__main-container .header__brand::before {
    width: 90px;
    height: 52px;
  }
}

/* إيقاف الحركة لمن يفضل تقليل المؤثرات */
@media (prefers-reduced-motion: reduce) {
  .header__main-container::before {
    animation: none;
  }

  .header__main-container .header-btn__icon,
  .header__main-container .sicon-menu,
  .header__main-container .sicon-search,
  .header__main-container .sicon-cart {
    transition: none;
  }
}
/* =========================================
   Saudi National Font — Arabic Characters Only
   ========================================= */

@font-face {
  font-family: "Saudi National Arabic";
  src: url("https://cdn.gea.gov.sa/ND-2026/fonts/Saudi-Bold.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;

  /* Arabic characters only */
  unicode-range:
    U+0600-06FF,
    U+0750-077F,
    U+08A0-08FF,
    U+FB50-FDFF,
    U+FE70-FEFF;
}


/* =========================================
   Main Store Font
   Arabic → Saudi National
   English → Clean Latin Font
   ========================================= */

:root {
  --font-main:
    "Saudi National Arabic",
    Arial,
    Helvetica,
    sans-serif !important;
}


/* تطبيق الخط على المتجر */

html,
body,
button,
input,
textarea,
select,
option,
label,
.s-button-element,
.s-button-text,
.product-card,
.home-block-title {
  font-family: var(--font-main) !important;
}


/* =========================================
   Protect Salla Icons
   ========================================= */

[class^="sicon-"],
[class*=" sicon-"],
i[class^="sicon-"],
i[class*=" sicon-"] {
  font-family: "sallaicons" !important;
}