/* =========================================================
   PREMIUM SALLA THEME UI
   UPDATED BRAND VERSION

   Platform: Salla / Twilight
   Primary Brand: #003B75

   ملاحظات مهمة:
   - تعديل بصري فقط.
   - لا يحتوي JavaScript.
   - لا يغير HTML.
   - لا يغير منطق Cart أو Checkout.
   - جميع الألوان المستخدمة من لوحة الهوية المعتمدة فقط.
========================================================= */


/* =========================================================
   01. CSS VARIABLES
========================================================= */

:root {

  /* Brand Colors */
  --brand-primary: #003B75;
  --brand-dark: #063F73;
  --brand-hover: #3F7FB8;
  --brand-light: #A8C9DF;
  --brand-bg: #E8EFF5;
  --brand-section: #F8FAFC;
  --brand-white: #FFFFFF;
  --brand-text-muted: #667482;
  --brand-border: #E1E6EB;

  /* Salla / Twilight Brand Tokens */
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: var(--brand-hover);
  --color-primary-reverse: var(--brand-white);
  --color-text: var(--brand-dark);

  /* Radius */
  --brand-radius-xs: 6px;
  --brand-radius-sm: 8px;
  --brand-radius-md: 12px;
  --brand-radius-lg: 16px;
  --brand-radius-xl: 20px;

  /* Spacing */
  --brand-space-xs: 6px;
  --brand-space-sm: 10px;
  --brand-space-md: 16px;
  --brand-space-lg: 24px;
  --brand-space-xl: 32px;
  --brand-space-2xl: 48px;

  /* Shadows */
  --brand-shadow-xs:
    0 1px 3px var(--brand-border);

  --brand-shadow-sm:
    0 4px 14px var(--brand-border);

  --brand-shadow-md:
    0 8px 24px var(--brand-border);

  /* Motion */
  --brand-transition-fast: 160ms ease;
  --brand-transition: 220ms ease;
  --brand-transition-slow: 280ms ease;
}


/* =========================================================
   02. GLOBAL STYLES
========================================================= */

html {
  background: var(--brand-white);
  color-scheme: light;
  scroll-behavior: smooth;
  max-width: 100%;
}

body {
  background: var(--brand-white);
  color: var(--brand-dark);
  line-height: 1.7;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;
  max-width: 100%;
}

.app-inner {
  background: var(--brand-white);
  max-width: 100%;
}

main {
  position: relative;
  isolation: isolate;
  max-width: 100%;
}

img,
video,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  transition:
    color var(--brand-transition-fast),
    background-color var(--brand-transition-fast),
    border-color var(--brand-transition-fast),
    opacity var(--brand-transition-fast);
}

::selection {
  background: var(--brand-primary);
  color: var(--brand-white);
}


/* =========================================================
   03. TYPOGRAPHY
========================================================= */

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--brand-dark);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

h1 {
  font-weight: 700;
}

h2,
h3 {
  font-weight: 650;
}

h4,
h5,
h6 {
  font-weight: 600;
}

:where(p, small) {
  color: var(--brand-text-muted);
}

:where(strong, b) {
  color: inherit;
}

.text-muted,
.text-gray-500,
.text-gray-600 {
  color: var(--brand-text-muted);
}


/* =========================================================
   04. HEADER
========================================================= */

/*
   الهيدر الرئيسي

   نستخدم !important هنا فقط لضمان تجاوز إعدادات
   لون الهيدر الأصلية في الثيم عند الحاجة.
*/

body > .app-inner > header,
body.theme-raed > .app-inner > header,
.store-header {
  background: var(--brand-primary) !important;
  color: var(--brand-white);
  border-bottom: 1px solid var(--brand-hover);
  box-shadow: none;
  position: relative;
  z-index: 50;
}


/* أي حاويات داخلية للهيدر */

body > .app-inner > header
  :where(.main-nav-container, .inner),
.store-header
  :where(.main-nav-container, .inner) {
  background: var(--brand-primary);
}


/*
   THEME-SPECIFIC:
   .main-nav-container و .inner موجودة في عدة إصدارات
   من ثيمات Twilight وقد تختلف في بعض الثيمات المخصصة.
*/


body > .app-inner > header .container,
.store-header .container {
  padding-top: 11px;
  padding-bottom: 11px;
}


/* Header Text & Links */

body > .app-inner > header a,
.store-header a {
  color: var(--brand-white) !important;
}

body > .app-inner > header a:hover,
body > .app-inner > header a:focus-visible,
.store-header a:hover,
.store-header a:focus-visible {
  color: var(--brand-light) !important;
}

body > .app-inner > header a:active,
.store-header a:active {
  color: var(--brand-hover) !important;
}


/* Header Icons */

body > .app-inner > header
  i[class*="sicon-"],
.store-header
  i[class*="sicon-"] {
  color: var(--brand-white) !important;
  transition: color var(--brand-transition-fast);
}

body > .app-inner > header
  a:hover i[class*="sicon-"],
body > .app-inner > header
  button:hover i[class*="sicon-"],
.store-header
  a:hover i[class*="sicon-"],
.store-header
  button:hover i[class*="sicon-"] {
  color: var(--brand-light) !important;
}


/* Header Salla Components */

body > .app-inner > header salla-cart-summary,
body > .app-inner > header salla-user-menu,
.store-header salla-cart-summary,
.store-header salla-user-menu {
  --color-primary: var(--brand-white);
  --color-primary-dark: var(--brand-light);
  --color-primary-light: var(--brand-light);
  --color-primary-reverse: var(--brand-primary);

  color: var(--brand-white);

  transition:
    color var(--brand-transition-fast),
    background-color var(--brand-transition-fast),
    transform var(--brand-transition-fast);
}

body > .app-inner > header salla-cart-summary:hover,
body > .app-inner > header salla-user-menu:hover,
.store-header salla-cart-summary:hover,
.store-header salla-user-menu:hover {
  color: var(--brand-light);
}


/* Header Buttons */

body > .app-inner > header .header-btn,
.store-header .header-btn {
  color: var(--brand-white);
  border-radius: var(--brand-radius-md);

  transition:
    color var(--brand-transition-fast),
    background-color var(--brand-transition-fast),
    transform var(--brand-transition-fast);
}

body > .app-inner > header .header-btn:hover,
.store-header .header-btn:hover {
  color: var(--brand-light);
  background: var(--brand-dark);
}


/* =========================================================
   HEADER LOGO
========================================================= */

/*
   شعار Raed يستخدم عادة .navbar-brand.

   تمت إضافة أكثر من Selector بشكل آمن لدعم بعض
   ثيمات Twilight الأخرى.

   إذا كان الثيم المخصص يستخدم Class مختلف للشعار
   يمكن استبدال هذه Selectors بالـSelector الفعلي.
*/

body > .app-inner > header
  :where(.navbar-brand, .store-logo, .logo) img,
.store-header
  :where(.navbar-brand, .store-logo, .logo) img {
  display: block;

  width: auto;
  height: auto;

  max-width: 190px;
  max-height: 76px;

  object-fit: contain;
  object-position: center;

  transition:
    max-width var(--brand-transition),
    max-height var(--brand-transition);
}


/* Logo container */

body > .app-inner > header
  :where(.navbar-brand, .store-logo, .logo),
.store-header
  :where(.navbar-brand, .store-logo, .logo) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* =========================================================
   05. NAVIGATION
========================================================= */

:where(.main-nav, .main-menu) {
  background: var(--brand-primary);
  border-color: var(--brand-hover);
}

:where(.main-nav, .main-menu) a {
  color: var(--brand-white) !important;
  font-weight: 500;

  transition:
    color var(--brand-transition-fast),
    background-color var(--brand-transition-fast),
    border-color var(--brand-transition-fast);
}

:where(.main-nav, .main-menu) a:hover {
  color: var(--brand-light) !important;
}

:where(.main-nav, .main-menu) .active > a,
:where(.main-nav, .main-menu) a.active,
:where(.main-nav, .main-menu) [aria-current="page"] {
  color: var(--brand-white) !important;
  font-weight: 700;
  border-bottom-color: var(--brand-light);
}


/* Desktop Navigation */

@media (min-width: 1025px) {

  /*
     إبقاء التصنيفات ظاهرة على Desktop.

     لا نستخدم display:none نهائيًا.
  */

  body > .app-inner > header
    :where(.main-nav, .main-menu),
  .store-header
    :where(.main-nav, .main-menu) {
    display: flex;
    align-items: center;
    max-width: 100%;
  }

  body > .app-inner > header
    :where(.main-menu),
  .store-header
    :where(.main-menu) {
    gap: 6px;
  }

  body > .app-inner > header
    :where(.main-nav, .main-menu) > li > a,
  .store-header
    :where(.main-nav, .main-menu) > li > a {
    padding-inline: 11px;
  }
}


/* Dropdown Navigation */

:where(.main-nav, .main-menu)
  :where(.sub-menu, .dropdown-menu) {
  background: var(--brand-dark);
  border: 1px solid var(--brand-hover);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-sm);
  padding: 8px;
}

:where(.main-nav, .main-menu)
  :where(.sub-menu, .dropdown-menu)
  a {
  color: var(--brand-white) !important;
  border-radius: var(--brand-radius-sm);
  padding: 9px 12px;
}

:where(.main-nav, .main-menu)
  :where(.sub-menu, .dropdown-menu)
  a:hover {
  background: var(--brand-primary);
  color: var(--brand-light) !important;
}


/* Mobile Menu Trigger */

body > .app-inner > header
  :where(.mburger, button),
.store-header
  :where(.mburger, button) {
  color: var(--brand-white);
}

body > .app-inner > header
  :where(.mburger, button):hover,
.store-header
  :where(.mburger, button):hover {
  color: var(--brand-light);
}


/* =========================================================
   06. SEARCH
========================================================= */

salla-search {
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: var(--brand-hover);
}


/* General Search */

input[type="search"],
.search-input,
.search-field input {
  width: 100%;
  min-height: 44px;

  padding-inline: 15px;

  background: var(--brand-white);
  color: var(--brand-dark);

  border: 1px solid var(--brand-light);
  border-radius: var(--brand-radius-md);

  outline: none;

  transition:
    border-color var(--brand-transition-fast),
    box-shadow var(--brand-transition-fast),
    background-color var(--brand-transition-fast);
}


/* Search inside Header */

body > .app-inner > header
  :where(input[type="search"], .search-input, .search-field input),
.store-header
  :where(input[type="search"], .search-input, .search-field input) {
  background: var(--brand-white);
  color: var(--brand-dark);

  border: 1px solid var(--brand-light);
}


/* Search Placeholder */

input[type="search"]::placeholder,
.search-field input::placeholder {
  color: var(--brand-text-muted);
  opacity: 1;
}


/* Search Hover */

input[type="search"]:hover,
.search-field input:hover {
  border-color: var(--brand-hover);
}


/* Search Focus */

input[type="search"]:focus,
.search-field input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-bg);
}


/* =========================================================
   07. HERO / BANNERS
========================================================= */

:where(.main-slider, .home-slider, .hero-slider) {
  overflow: hidden;
  border-radius: var(--brand-radius-lg);
}

:where(.main-slider, .home-slider, .hero-slider) img {
  display: block;
  width: 100%;
  object-fit: cover;
}

:where(.banner, .home-banner) {
  overflow: hidden;
  border-radius: var(--brand-radius-lg);
}

:where(.banner, .home-banner) img {
  transition: transform var(--brand-transition-slow);
}

@media (hover: hover) {

  :where(.banner, .home-banner):hover img {
    transform: scale(1.01);
  }

}


/* =========================================================
   08. SECTIONS
========================================================= */

section {
  position: relative;
}


/* =========================================================
   HOME PRODUCT SECTION TITLES
========================================================= */

.section-title,
.s-block__title,
salla-slider [slot="title"] {
  color: var(--brand-dark);
}


/*
   عناوين مثل:
   أحدث المنتجات
   الأكثر مبيعًا
   منتجات مختارة

   يتم توسيطها بدون تغيير بنية القسم.
*/

.section-title,
.s-block__title,
salla-slider [slot="title"] {
  text-align: center;
}


/* Heading داخل s-block title */

.s-block__title
  :where(h1, h2, h3, h4),
.section-title
  :where(h1, h2, h3, h4) {
  text-align: center;
  color: var(--brand-dark);

  font-size: 1.55rem;
  font-weight: 700;

  line-height: 1.4;

  margin-inline: auto;
}


/* إذا كان الـTitle نفسه Heading */

h2.section-title,
h3.section-title,
.s-block__title {
  color: var(--brand-dark);
  font-weight: 700;
}


/*
   Accent أسفل العنوان.

   لا نستخدم ::after على Wrapper قد يحتوي زر عرض الكل
   إلا في .section-title المعروف.
*/

.section-title::after {
  content: "";

  display: block;

  width: 38px;
  height: 3px;

  margin-top: 9px;
  margin-inline: auto;

  border-radius: var(--brand-radius-xs);

  background: var(--brand-primary);
}


/* Section spacing */

.s-block__title {
  margin-bottom: 24px;
}


/* View All */

.s-block__title a,
.section-title + a {
  color: var(--brand-primary);
  font-weight: 500;
}

.s-block__title a:hover,
.section-title + a:hover {
  color: var(--brand-hover);
}


/* Light Sections */

.section-light,
.section-bg {
  background: var(--brand-section);
}


/* =========================================================
   09. CATEGORIES
========================================================= */

:where(.category-card, .category-entry, .category-item) {
  background: var(--brand-white);

  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg);

  overflow: hidden;

  box-shadow: var(--brand-shadow-xs);

  transition:
    transform var(--brand-transition),
    border-color var(--brand-transition),
    box-shadow var(--brand-transition);
}

:where(.category-card, .category-entry, .category-item) img {
  width: 100%;
  object-fit: cover;
}

:where(.category-card, .category-entry, .category-item)
  :where(h3, h4, span) {
  color: var(--brand-dark);
}

@media (hover: hover) {

  :where(.category-card, .category-entry, .category-item):hover {
    transform: translateY(-2px);
    border-color: var(--brand-light);
    box-shadow: var(--brand-shadow-sm);
  }

}


/* =========================================================
   10. PRODUCT CARDS
========================================================= */

salla-product-card {
  display: block;
  min-width: 0;

  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: var(--brand-hover);
  --color-primary-reverse: var(--brand-white);
}


/* Card */

salla-product-card
  :where(.s-product-card-entry, .product-entry) {
  height: 100%;

  background: var(--brand-white);

  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg);

  overflow: hidden;

  box-shadow: var(--brand-shadow-xs);

  transition:
    transform var(--brand-transition),
    border-color var(--brand-transition),
    box-shadow var(--brand-transition);
}


/* Product Image */

salla-product-card
  :where(.s-product-card-image, .product-entry__image) {
  position: relative;
  overflow: hidden;

  background: var(--brand-section);
}

salla-product-card
  :where(.s-product-card-image, .product-entry__image)
  img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform var(--brand-transition-slow);
}


/* Product Content */

salla-product-card
  :where(.s-product-card-content, .product-entry__content) {
  padding: 15px;
}


/* Product Title */

salla-product-card
  :where(
    .s-product-card-content-title,
    .s-product-card-title,
    .product-entry__title
  ) {
  color: var(--brand-dark);

  font-size: 0.98rem;
  font-weight: 600;

  line-height: 1.55;

  margin-bottom: 8px;
}

salla-product-card
  :where(
    .s-product-card-content-title,
    .s-product-card-title,
    .product-entry__title
  )
  a {
  color: var(--brand-dark);
}

salla-product-card
  :where(
    .s-product-card-content-title,
    .s-product-card-title,
    .product-entry__title
  )
  a:hover {
  color: var(--brand-primary);
}


/* Product Subtitle */

salla-product-card
  :where(
    .s-product-card-content-sub,
    .product-entry__description
  ) {
  color: var(--brand-text-muted);

  font-size: 0.88rem;
  line-height: 1.6;
}


/* =========================================================
   PRODUCT PRICE
========================================================= */

salla-product-card
  :where(
    .s-product-card-price,
    .product-entry__price
  ) {
  color: var(--brand-primary);

  font-size: 1.12rem;
  font-weight: 700;

  line-height: 1.4;
}


/* Old Price */

salla-product-card
  :where(
    .s-product-card-sale-price,
    .s-product-card-old-price,
    del
  ) {
  color: var(--brand-text-muted);

  font-size: 0.86rem;
  font-weight: 400;

  opacity: 1;
}


/* =========================================================
   PRODUCT CARD ADD TO CART BUTTON
========================================================= */

salla-product-card salla-button {
  display: block;
  width: 100%;

  margin-top: 12px;

  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: var(--brand-hover);
  --color-primary-reverse: var(--brand-white);

  background: var(--brand-primary);
  color: var(--brand-white);

  border-color: var(--brand-primary);

  border-radius: var(--brand-radius-md);
}


/*
   إذا كان الثيم يعرض Button HTML داخل بطاقة المنتج
   وليس salla-button فقط.
*/

salla-product-card
  :where(
    .s-product-card-content-footer button,
    .product-entry__content button
  ) {
  background: var(--brand-primary);

  color: var(--brand-white);

  border: 1px solid var(--brand-primary);
  border-radius: var(--brand-radius-md);

  transition:
    background-color var(--brand-transition-fast),
    border-color var(--brand-transition-fast),
    color var(--brand-transition-fast),
    transform var(--brand-transition-fast);
}

salla-product-card
  :where(
    .s-product-card-content-footer button,
    .product-entry__content button
  ):hover {
  background: var(--brand-dark);

  color: var(--brand-white);

  border-color: var(--brand-dark);
}


/* Disabled / Out Of Stock */

salla-product-card salla-button[disabled],
salla-product-card salla-button[aria-disabled="true"],
salla-product-card
  :where(
    .s-product-card-content-footer button,
    .product-entry__content button
  ):disabled {
  --color-primary: var(--brand-bg);
  --color-primary-dark: var(--brand-bg);
  --color-primary-light: var(--brand-bg);
  --color-primary-reverse: var(--brand-text-muted);

  background: var(--brand-bg);

  color: var(--brand-text-muted);

  border-color: var(--brand-border);

  cursor: not-allowed;

  transform: none;
}


/* Card Hover */

@media (hover: hover) {

  salla-product-card
    :where(.s-product-card-entry, .product-entry):hover {
    transform: translateY(-3px);

    border-color: var(--brand-light);

    box-shadow: var(--brand-shadow-sm);
  }

  salla-product-card
    :where(.s-product-card-entry, .product-entry):hover
    :where(.s-product-card-image, .product-entry__image)
    img {
    transform: scale(1.012);
  }

}


/* =========================================================
   11. BUTTONS
========================================================= */

salla-button {
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: var(--brand-hover);
  --color-primary-reverse: var(--brand-white);
}


/* Primary Buttons */

:where(
  .btn-primary,
  button.btn-primary,
  a.btn-primary,
  button[type="submit"]:not(.btn-secondary)
) {
  background: var(--brand-primary);

  border-color: var(--brand-primary);

  color: var(--brand-white);

  border-radius: var(--brand-radius-md);

  transition:
    background-color var(--brand-transition-fast),
    border-color var(--brand-transition-fast),
    color var(--brand-transition-fast),
    transform var(--brand-transition-fast),
    box-shadow var(--brand-transition-fast);
}

:where(
  .btn-primary,
  button.btn-primary,
  a.btn-primary,
  button[type="submit"]:not(.btn-secondary)
):hover {
  background: var(--brand-dark);

  border-color: var(--brand-dark);

  color: var(--brand-white);
}


/* Primary Focus */

:where(
  .btn-primary,
  button.btn-primary,
  a.btn-primary
):focus-visible {
  background: var(--brand-primary);

  border-color: var(--brand-primary);

  color: var(--brand-white);

  outline: 2px solid var(--brand-light);
  outline-offset: 2px;
}


/* Primary Active */

:where(
  .btn-primary,
  button.btn-primary,
  a.btn-primary
):active {
  background: var(--brand-dark);

  border-color: var(--brand-dark);

  color: var(--brand-white);
}


/* Secondary Buttons */

:where(
  .btn-secondary,
  button.btn-secondary,
  a.btn-secondary
) {
  background: var(--brand-white);

  color: var(--brand-primary);

  border: 1px solid var(--brand-primary);

  border-radius: var(--brand-radius-md);

  transition:
    background-color var(--brand-transition-fast),
    border-color var(--brand-transition-fast),
    color var(--brand-transition-fast);
}

:where(
  .btn-secondary,
  button.btn-secondary,
  a.btn-secondary
):hover {
  background: var(--brand-section);

  border-color: var(--brand-dark);

  color: var(--brand-dark);
}


/* Disabled Buttons */

:where(button, .btn):disabled {
  background: var(--brand-bg);

  color: var(--brand-text-muted);

  border-color: var(--brand-border);

  cursor: not-allowed;

  transform: none;
}


/* =========================================================
   12. PRODUCT PAGE
========================================================= */

salla-add-product {
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: var(--brand-hover);
  --color-primary-reverse: var(--brand-white);
}

salla-product-options {
  --color-primary: var(--brand-primary);
}

salla-quantity-input {
  --color-primary: var(--brand-primary);
}


/* Product Title */

.product-single :where(h1, .product-title),
.product-details :where(h1, .product-title) {
  color: var(--brand-dark);

  font-weight: 700;

  line-height: 1.4;
}


/* Product Price */

.product-single :where(.price, .product-price),
.product-details :where(.price, .product-price) {
  color: var(--brand-primary);

  font-size: 1.35rem;

  font-weight: 700;
}


/* Old Product Price */

.product-single del,
.product-details del {
  color: var(--brand-text-muted);

  font-size: 0.95rem;

  opacity: 1;
}


/* Product Description */

.product-single
  :where(.product-description, .description, .content-entry),
.product-details
  :where(.product-description, .description, .content-entry) {
  color: var(--brand-text-muted);

  line-height: 1.9;
}


/* Main Add To Cart */

.product-single salla-add-product,
.product-details salla-add-product {
  display: block;
  width: 100%;
}

.product-single salla-add-product salla-button,
.product-details salla-add-product salla-button {
  width: 100%;

  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-reverse: var(--brand-white);
}


/* Product Inputs */

.product-single
  :where(
    select,
    input:not([type="checkbox"]):not([type="radio"])
  ),
.product-details
  :where(
    select,
    input:not([type="checkbox"]):not([type="radio"])
  ) {
  border-color: var(--brand-border);
}


/* Product Thumbnails */

.product-single
  :where(.thumbnail, .thumb, .product-thumbnail),
.product-details
  :where(.thumbnail, .thumb, .product-thumbnail) {
  border: 1px solid var(--brand-border);

  border-radius: var(--brand-radius-sm);

  overflow: hidden;

  transition:
    border-color var(--brand-transition-fast),
    opacity var(--brand-transition-fast);
}

.product-single
  :where(.thumbnail, .thumb, .product-thumbnail):hover,
.product-details
  :where(.thumbnail, .thumb, .product-thumbnail):hover {
  border-color: var(--brand-light);
}

.product-single
  :where(.thumbnail.active, .thumb.active, .product-thumbnail.active),
.product-details
  :where(.thumbnail.active, .thumb.active, .product-thumbnail.active) {
  border-color: var(--brand-primary);
}


/* =========================================================
   13. CART
========================================================= */

/*
   لا يتم تغيير بنية أو ترتيب Cart.
   جميع التعديلات هنا Visual فقط.
*/

salla-cart-summary {
  --color-primary: var(--brand-primary);
}

.cart-page,
.cart-container {
  color: var(--brand-dark);
}


/* Cart Item */

.cart-page
  :where(.cart-item, .cart-product),
.cart-container
  :where(.cart-item, .cart-product) {
  background: var(--brand-white);

  border: 1px solid var(--brand-border);

  border-radius: var(--brand-radius-lg);

  padding: var(--brand-space-md);
}


/* Cart Product Images */

.cart-page
  :where(.cart-item, .cart-product)
  img,
.cart-container
  :where(.cart-item, .cart-product)
  img {
  border-radius: var(--brand-radius-md);
}


/* Cart Summary */

.cart-page
  :where(.cart-summary, .cart-total),
.cart-container
  :where(.cart-summary, .cart-total) {
  background: var(--brand-section);

  border: 1px solid var(--brand-border);

  border-radius: var(--brand-radius-lg);

  padding: var(--brand-space-lg);
}


/* Coupon */

.cart-page
  :where(.coupon, .coupon-wrapper),
.cart-container
  :where(.coupon, .coupon-wrapper) {
  background: var(--brand-white);

  border-radius: var(--brand-radius-md);
}


/* Quantity */

salla-quantity-input {
  border-radius: var(--brand-radius-md);
}


/*
   Checkout:
   لا يتم استهداف Grid
   أو ترتيب الحقول
   أو طرق الدفع
   أو خطوات Checkout.
*/


/* =========================================================
   14. FORMS
========================================================= */

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select
) {
  background: var(--brand-white);

  color: var(--brand-dark);

  border: 1px solid var(--brand-border);

  border-radius: var(--brand-radius-md);

  outline: none;

  transition:
    border-color var(--brand-transition-fast),
    box-shadow var(--brand-transition-fast),
    background-color var(--brand-transition-fast);
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select
):hover {
  border-color: var(--brand-light);
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select
):focus {
  border-color: var(--brand-primary);

  box-shadow: 0 0 0 3px var(--brand-bg);
}

:where(input, textarea)::placeholder {
  color: var(--brand-text-muted);

  opacity: 1;
}

textarea {
  resize: vertical;

  min-height: 110px;
}

label {
  color: var(--brand-dark);

  font-weight: 500;
}


/* Checkboxes & Radios */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-primary);
}


/* =========================================================
   15. BADGES
========================================================= */

:where(
  .s-product-card-promotion-title,
  .product-badge,
  .badge
) {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 24px;

  padding: 3px 8px;

  font-size: 0.75rem;
  font-weight: 600;

  line-height: 1.2;

  border-radius: var(--brand-radius-xs);

  border: 1px solid var(--brand-light);

  background: var(--brand-bg);

  color: var(--brand-dark);
}


/* Discount */

:where(.badge-discount, .sale-badge) {
  background: var(--brand-primary);

  color: var(--brand-white);

  border-color: var(--brand-primary);
}


/* New */

:where(.badge-new, .new-badge) {
  background: var(--brand-bg);

  color: var(--brand-dark);

  border-color: var(--brand-light);
}


/* Best Seller */

:where(.badge-best, .best-seller) {
  background: var(--brand-dark);

  color: var(--brand-white);

  border-color: var(--brand-dark);
}


/* Sold Out */

:where(.badge-out, .out-of-stock) {
  background: var(--brand-bg);

  color: var(--brand-text-muted);

  border-color: var(--brand-border);
}


/* =========================================================
   16. MODALS / POPUPS
========================================================= */

salla-modal,
salla-login-modal,
salla-offer-modal,
salla-rating-modal {
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: var(--brand-hover);
}

[role="dialog"] {
  color: var(--brand-dark);
}

:where(.modal-content, .s-modal-body) {
  background: var(--brand-white);

  border: 1px solid var(--brand-border);

  border-radius: var(--brand-radius-xl);

  box-shadow: var(--brand-shadow-md);
}

:where(.modal-header, .s-modal-header) {
  border-bottom: 1px solid var(--brand-border);
}

:where(.modal-footer, .s-modal-footer) {
  border-top: 1px solid var(--brand-border);
}


/* =========================================================
   17. FOOTER
========================================================= */

/*
   لون الفوتر يتم فرضه لضمان تجاوز footer-is-light
   الموجود في بعض إعدادات ثيم Raed.
*/

body > .app-inner > footer,
body.theme-raed > .app-inner > footer,
.store-footer {
  background: var(--brand-dark) !important;

  color: var(--brand-white) !important;

  border-top: 1px solid var(--brand-hover);
}


/* Footer Inner Areas */

body > .app-inner > footer
  :where(.footer-main, .footer-bottom, .footer-container),
.store-footer
  :where(.footer-main, .footer-bottom, .footer-container) {
  background: var(--brand-dark);
}


/*
   THEME-SPECIFIC:
   بعض الثيمات قد لا تستخدم أسماء Footer الداخلية أعلاه.
*/


/* Footer Headings */

body > .app-inner > footer
  :where(h1, h2, h3, h4, h5, h6),
.store-footer
  :where(h1, h2, h3, h4, h5, h6) {
  color: var(--brand-white) !important;

  font-weight: 700;
}


/* Footer Main Text */

body > .app-inner > footer
  :where(p, li),
.store-footer
  :where(p, li) {
  color: var(--brand-white) !important;
}


/* Footer Secondary Text */

body > .app-inner > footer
  :where(
    small,
    .text-muted,
    .text-gray-500,
    .text-gray-600
  ),
.store-footer
  :where(
    small,
    .text-muted,
    .text-gray-500,
    .text-gray-600
  ) {
  color: var(--brand-light) !important;

  opacity: 1;
}


/* Footer Links */

body > .app-inner > footer a,
.store-footer a {
  color: var(--brand-white) !important;

  text-decoration: none;

  transition:
    color var(--brand-transition-fast),
    background-color var(--brand-transition-fast);
}

body > .app-inner > footer a:hover,
body > .app-inner > footer a:focus-visible,
.store-footer a:hover,
.store-footer a:focus-visible {
  color: var(--brand-light) !important;
}

body > .app-inner > footer a:active,
.store-footer a:active {
  color: var(--brand-hover) !important;
}


/* Footer Icons */

body > .app-inner > footer
  i[class*="sicon-"],
.store-footer
  i[class*="sicon-"] {
  color: var(--brand-white) !important;
}

body > .app-inner > footer
  a:hover i[class*="sicon-"],
.store-footer
  a:hover i[class*="sicon-"] {
  color: var(--brand-light) !important;
}


/* Footer Borders */

body > .app-inner > footer hr,
.store-footer hr {
  border-color: var(--brand-hover);
}


/* Footer Inputs */

body > .app-inner > footer
  :where(input, textarea),
.store-footer
  :where(input, textarea) {
  background: var(--brand-white);

  color: var(--brand-dark);

  border-color: var(--brand-light);
}

body > .app-inner > footer
  :where(input, textarea)::placeholder,
.store-footer
  :where(input, textarea)::placeholder {
  color: var(--brand-text-muted);
}


/* Newsletter */

:where(.newsletter, .footer-newsletter) {
  border-radius: var(--brand-radius-lg);
}

body > .app-inner > footer
  :where(.newsletter, .footer-newsletter),
.store-footer
  :where(.newsletter, .footer-newsletter) {
  border-color: var(--brand-hover);
}


/* =========================================================
   FOOTER PAYMENT METHODS & EXTERNAL LOGOS
========================================================= */

/*
   لا يتم تطبيق fill أو color أو filter على صور الدفع
   حتى نحافظ على ألوانها الأصلية.

   salla-payments مكوّن سلة.
   .payment-methods Selector يعتمد على الثيم.
*/

body > .app-inner > footer
  :where(salla-payments, .payment-methods)
  img,
.store-footer
  :where(salla-payments, .payment-methods)
  img {
  filter: none !important;

  opacity: 1;

  object-fit: contain;

  background: var(--brand-white);

  border-radius: var(--brand-radius-xs);
}


/* Footer Copyright */

body > .app-inner > footer
  :where(.copyright, .footer-copyright),
.store-footer
  :where(.copyright, .footer-copyright) {
  color: var(--brand-white) !important;

  border-color: var(--brand-hover);

  opacity: 1;
}


/* =========================================================
   18. UTILITY ELEMENTS
========================================================= */


/* Breadcrumbs */

salla-breadcrumb {
  --color-primary: var(--brand-primary);

  color: var(--brand-text-muted);
}

:where(.breadcrumb, .breadcrumbs) {
  color: var(--brand-text-muted);

  font-size: 0.85rem;
}

:where(.breadcrumb, .breadcrumbs) a {
  color: var(--brand-text-muted);
}

:where(.breadcrumb, .breadcrumbs) a:hover {
  color: var(--brand-primary);
}


/* =========================================================
   PAGINATION
========================================================= */

salla-pagination {
  --color-primary: var(--brand-primary);
}

:where(.pagination, .s-pagination) a,
:where(.pagination, .s-pagination) button {
  min-width: 38px;
  height: 38px;

  border: 1px solid var(--brand-border);

  border-radius: var(--brand-radius-sm);

  background: var(--brand-white);

  color: var(--brand-dark);

  transition:
    background-color var(--brand-transition-fast),
    border-color var(--brand-transition-fast),
    color var(--brand-transition-fast);
}

:where(.pagination, .s-pagination) a:hover,
:where(.pagination, .s-pagination) button:hover {
  background: var(--brand-bg);

  border-color: var(--brand-primary);

  color: var(--brand-primary);
}

:where(.pagination, .s-pagination)
  :where(.active, [aria-current="page"]) {
  background: var(--brand-primary);

  color: var(--brand-white);

  border-color: var(--brand-primary);
}


/* =========================================================
   WISHLIST
========================================================= */

salla-wishlist-button {
  --color-primary: var(--brand-primary);

  color: var(--brand-dark);

  transition:
    color var(--brand-transition-fast),
    background-color var(--brand-transition-fast),
    transform var(--brand-transition-fast);
}

salla-wishlist-button:hover {
  color: var(--brand-primary);
}


/* =========================================================
   RATINGS
========================================================= */

salla-rating-stars,
salla-reviews,
salla-reviews-summary,
salla-comments {
  --color-primary: var(--brand-primary);
}

salla-reviews,
salla-comments {
  color: var(--brand-dark);
}


/* =========================================================
   TOAST MESSAGES
========================================================= */

/*
   نمرر هوية المتجر للمكونات بدون تغيير منطق
   Success / Error الداخلي الخاص بسلة.
*/

salla-add-product-toast,
salla-bottom-alert {
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: var(--brand-hover);
}


/* Accordion */

salla-accordion {
  --color-primary: var(--brand-primary);

  color: var(--brand-dark);
}


/* Metadata */

salla-metadata {
  --color-primary: var(--brand-primary);

  color: var(--brand-text-muted);
}


/* Social Share */

salla-social-share {
  --color-primary: var(--brand-primary);
}


/* =========================================================
   SCROLLBAR
========================================================= */

html {
  scrollbar-width: thin;

  scrollbar-color:
    var(--brand-light)
    var(--brand-section);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: var(--brand-section);
}

::-webkit-scrollbar-thumb {
  background: var(--brand-light);

  border: 2px solid var(--brand-section);

  border-radius: var(--brand-radius-xl);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-hover);
}


/* Separators */

hr {
  border: 0;

  border-top: 1px solid var(--brand-border);
}


/* Tables */

table {
  border-color: var(--brand-border);
}

table :where(th, td) {
  border-color: var(--brand-border);
}

table th {
  color: var(--brand-dark);

  background: var(--brand-section);
}


/* =========================================================
   19. ANIMATIONS
========================================================= */

@keyframes brandFadeIn {

  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

.brand-fade-in {
  animation: brandFadeIn 280ms ease both;
}


/* =========================================================
   20. TABLET RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

  :root {
    --brand-space-2xl: 40px;
  }


  /* Header */

  body > .app-inner > header .container,
  .store-header .container {
    padding-inline: 18px;

    padding-top: 9px;
    padding-bottom: 9px;
  }


  /* Tablet Logo */

  body > .app-inner > header
    :where(.navbar-brand, .store-logo, .logo) img,
  .store-header
    :where(.navbar-brand, .store-logo, .logo) img {
    max-width: 165px;
    max-height: 66px;
  }


  /* Navigation */

  body > .app-inner > header
    :where(.main-nav, .main-menu),
  .store-header
    :where(.main-nav, .main-menu) {
    max-width: 100%;
  }


  /* Products */

  salla-product-card
    :where(.s-product-card-content, .product-entry__content) {
    padding: 13px;
  }

  salla-product-card
    :where(
      .s-product-card-price,
      .product-entry__price
    ) {
    font-size: 1.08rem;
  }


  /* Section Titles */

  .s-block__title
    :where(h1, h2, h3, h4),
  .section-title
    :where(h1, h2, h3, h4) {
    font-size: 1.42rem;
  }


  /* Hero */

  :where(.main-slider, .home-slider, .hero-slider),
  :where(.banner, .home-banner) {
    border-radius: var(--brand-radius-md);
  }


  /* Product Page */

  .product-single,
  .product-details {
    gap: var(--brand-space-lg);
  }

}


/* =========================================================
   21. MOBILE RESPONSIVE
========================================================= */

@media (max-width: 767px) {

  :root {

    --brand-radius-lg: 14px;
    --brand-radius-xl: 16px;

    --brand-space-lg: 20px;
    --brand-space-xl: 26px;
    --brand-space-2xl: 32px;

  }


  html,
  body,
  .app-inner {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
  }


  body {
    font-size: 15px;
  }


  h1 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  h2 {
    font-size: clamp(1.3rem, 6vw, 1.65rem);
  }

  h3 {
    font-size: clamp(1.05rem, 5vw, 1.3rem);
  }


  /* =======================================================
     MOBILE HEADER
  ======================================================= */

  body > .app-inner > header,
  .store-header {
    max-width: 100%;
  }

  body > .app-inner > header .container,
  .store-header .container {
    width: 100%;
    max-width: 100%;

    padding-inline: 12px;

    padding-top: 8px;
    padding-bottom: 8px;
  }


  /* Mobile Logo */

  body > .app-inner > header
    :where(.navbar-brand, .store-logo, .logo) img,
  .store-header
    :where(.navbar-brand, .store-logo, .logo) img {
    max-width: 138px;
    max-height: 56px;

    object-fit: contain;
  }

  body > .app-inner > header
    :where(.navbar-brand, .store-logo, .logo),
  .store-header
    :where(.navbar-brand, .store-logo, .logo) {
    flex-shrink: 1;

    min-width: 0;
  }


  /* Header Components */

  salla-cart-summary,
  salla-user-menu {
    flex-shrink: 0;
  }


  /*
     لا نجبر القائمة الرئيسية على display:flex في الجوال
     لأن Raed يستخدم قائمة Responsive خاصة به.

     بهذا تبقى التصنيفات متاحة من زر القائمة بدون كسر الهيدر.
  */

  body > .app-inner > header
    :where(.main-nav, .main-menu),
  .store-header
    :where(.main-nav, .main-menu) {
    max-width: 100%;
  }


  /* Search Mobile */

  body > .app-inner > header
    :where(input[type="search"], .search-input, .search-field input),
  .store-header
    :where(input[type="search"], .search-input, .search-field input) {
    max-width: 100%;
  }


  /* =======================================================
     MOBILE HERO
  ======================================================= */

  :where(.main-slider, .home-slider, .hero-slider),
  :where(.banner, .home-banner) {
    border-radius: var(--brand-radius-md);
  }


  /* =======================================================
     MOBILE SECTION TITLES
  ======================================================= */

  .section-title,
  .s-block__title,
  salla-slider [slot="title"] {
    text-align: center;
  }

  .s-block__title
    :where(h1, h2, h3, h4),
  .section-title
    :where(h1, h2, h3, h4) {
    font-size: 1.25rem;

    line-height: 1.4;

    text-align: center;
  }

  h2.section-title,
  h3.section-title,
  .s-block__title {
    font-size: 1.25rem;
  }

  .section-title::after {
    width: 30px;

    margin-top: 7px;
  }

  .s-block__title {
    margin-bottom: 18px;
  }


  /* =======================================================
     MOBILE PRODUCT CARDS
  ======================================================= */

  salla-product-card {
    width: 100%;
    min-width: 0;
  }

  salla-product-card
    :where(.s-product-card-entry, .product-entry) {
    width: 100%;
    min-width: 0;
  }

  salla-product-card
    :where(.s-product-card-content, .product-entry__content) {
    padding: 11px;
  }


  /* Product Title */

  salla-product-card
    :where(
      .s-product-card-content-title,
      .s-product-card-title,
      .product-entry__title
    ) {
    font-size: 0.94rem;

    line-height: 1.55;

    margin-bottom: 6px;

    overflow-wrap: anywhere;
  }


  /* Product Description */

  salla-product-card
    :where(
      .s-product-card-content-sub,
      .product-entry__description
    ) {
    font-size: 0.8rem;
  }


  /* Product Price */

  salla-product-card
    :where(
      .s-product-card-price,
      .product-entry__price
    ) {
    color: var(--brand-primary);

    font-size: 1.02rem;

    font-weight: 700;
  }


  /* Old Price */

  salla-product-card
    :where(
      .s-product-card-sale-price,
      .s-product-card-old-price,
      del
    ) {
    font-size: 0.79rem;
  }


  /* Add To Cart Mobile */

  salla-product-card salla-button {
    width: 100%;

    min-height: 44px;

    margin-top: 9px;

    --color-primary: var(--brand-primary);
    --color-primary-dark: var(--brand-dark);
    --color-primary-reverse: var(--brand-white);
  }

  salla-product-card
    :where(
      .s-product-card-content-footer button,
      .product-entry__content button
    ) {
    width: 100%;

    min-height: 44px;

    font-size: 0.88rem;
  }


  /* =======================================================
     MOBILE BUTTONS
  ======================================================= */

  :where(
    button,
    .btn,
    input[type="submit"]
  ) {
    min-height: 44px;
  }


  /* =======================================================
     MOBILE FORMS
  ======================================================= */

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select
  ) {
    max-width: 100%;

    font-size: 16px;
  }


  /*
     16px يمنع Zoom تلقائي في Safari iOS
     عند التركيز على الحقول.
  */


  /* =======================================================
     MOBILE CATEGORIES
  ======================================================= */

  :where(.category-card, .category-entry, .category-item) {
    border-radius: var(--brand-radius-md);

    min-width: 0;
  }


  /* =======================================================
     MOBILE PRODUCT PAGE
  ======================================================= */

  .product-single,
  .product-details {
    gap: var(--brand-space-md);

    max-width: 100%;
  }

  .product-single :where(.price, .product-price),
  .product-details :where(.price, .product-price) {
    font-size: 1.18rem;
  }


  /* =======================================================
     MOBILE CART
  ======================================================= */

  .cart-page
    :where(.cart-item, .cart-product),
  .cart-container
    :where(.cart-item, .cart-product) {
    padding: 12px;

    border-radius: var(--brand-radius-md);

    max-width: 100%;
  }

  .cart-page
    :where(.cart-summary, .cart-total),
  .cart-container
    :where(.cart-summary, .cart-total) {
    padding: 16px;

    border-radius: var(--brand-radius-md);

    max-width: 100%;
  }


  /* =======================================================
     MOBILE MODAL
  ======================================================= */

  :where(.modal-content, .s-modal-body) {
    max-width: 100%;

    border-radius: var(--brand-radius-lg);
  }


  /* =======================================================
     MOBILE FOOTER
  ======================================================= */

  body > .app-inner > footer,
  .store-footer {
    text-align: start;

    max-width: 100%;
  }


  /* =======================================================
     MOBILE PAGINATION
  ======================================================= */

  :where(.pagination, .s-pagination) a,
  :where(.pagination, .s-pagination) button {
    min-width: 36px;
    height: 36px;
  }

}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  body {
    font-size: 14.5px;
  }


  /* Extra Small Logo */

  body > .app-inner > header
    :where(.navbar-brand, .store-logo, .logo) img,
  .store-header
    :where(.navbar-brand, .store-logo, .logo) img {
    max-width: 122px;
    max-height: 52px;
  }


  /* Product Card */

  salla-product-card
    :where(.s-product-card-content, .product-entry__content) {
    padding: 10px;
  }

  salla-product-card
    :where(
      .s-product-card-content-title,
      .s-product-card-title,
      .product-entry__title
    ) {
    font-size: 0.88rem;
  }

  salla-product-card
    :where(
      .s-product-card-price,
      .product-entry__price
    ) {
    font-size: 0.98rem;
  }


  /* Section Title */

  .s-block__title
    :where(h1, h2, h3, h4),
  .section-title
    :where(h1, h2, h3, h4),
  h2.section-title,
  h3.section-title {
    font-size: 1.16rem;
  }

}


/* =========================================================
   22. ACCESSIBILITY
========================================================= */

:where(
  a,
  button,
  input,
  textarea,
  select,
  summary,
  [tabindex]
):focus-visible {
  outline: 2px solid var(--brand-primary);

  outline-offset: 3px;
}


/* Header Focus */

body > .app-inner > header
  :where(
    a,
    button,
    input,
    salla-cart-summary,
    salla-user-menu
  ):focus-visible,
.store-header
  :where(
    a,
    button,
    input,
    salla-cart-summary,
    salla-user-menu
  ):focus-visible {
  outline-color: var(--brand-light);
}


/* Salla Components Focus */

salla-button:focus-within,
salla-wishlist-button:focus-within,
salla-cart-summary:focus-within,
salla-user-menu:focus-within,
salla-quantity-input:focus-within {
  outline: 2px solid var(--brand-primary);

  outline-offset: 3px;

  border-radius: var(--brand-radius-md);
}


/* Touch Targets */

@media (pointer: coarse) {

  :where(
    button,
    a.btn,
    input[type="submit"]
  ) {
    min-height: 44px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }

  salla-product-card
    :where(.s-product-card-entry, .product-entry):hover,
  :where(.category-card, .category-entry, .category-item):hover {
    transform: none;
  }

  :where(.banner, .home-banner):hover img,
  salla-product-card
    :where(.s-product-card-entry, .product-entry):hover
    :where(.s-product-card-image, .product-entry__image)
    img {
    transform: none;
  }

}
/* =========================================================
   SALLA FOOTER MENU - قائمة ذيل الصفحة
   Selectors فعلية من salla-menu
========================================================= */

/* مكوّن قائمة الفوتر */
footer salla-menu[source="footer"],
.store-footer salla-menu[source="footer"] {
  display: block;
  width: 100%;

  background-color: #063F73 !important;
  color: #FFFFFF !important;

  --color-primary: #A8C9DF;
  --color-primary-dark: #003B75;
  --color-primary-light: #A8C9DF;
  --color-primary-reverse: #FFFFFF;
}


/* الحاوية الداخلية التي تولدها سلة */
footer salla-menu[source="footer"] > div,
.store-footer salla-menu[source="footer"] > div {
  width: 100%;
  background-color: #063F73 !important;
  color: #FFFFFF !important;
}


/* قائمة روابط ذيل الصفحة الفعلية */
footer .s-menu-footer-list,
.store-footer .s-menu-footer-list {
  width: 100%;

  background-color: #063F73 !important;
  color: #FFFFFF !important;

  border-color: #3F7FB8 !important;
}


/* روابط القائمة */
footer .s-menu-footer-item,
.store-footer .s-menu-footer-item {
  color: #FFFFFF !important;
  background-color: #063F73 !important;

  border-color: #3F7FB8 !important;

  opacity: 1 !important;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}


/* Hover */
footer .s-menu-footer-item:hover,
.store-footer .s-menu-footer-item:hover {
  color: #A8C9DF !important;
  background-color: #003B75 !important;
}


/* Focus */
footer .s-menu-footer-item:focus-visible,
.store-footer .s-menu-footer-item:focus-visible {
  color: #FFFFFF !important;
  background-color: #003B75 !important;

  outline: 2px solid #A8C9DF;
  outline-offset: 2px;
}


/* Active */
footer .s-menu-footer-item:active,
.store-footer .s-menu-footer-item:active {
  color: #FFFFFF !important;
  background-color: #3F7FB8 !important;
}


/* دعم الفوتر الفاتح في Raed ومنع رجوع الخلفية البيضاء */
body.footer-is-light footer salla-menu[source="footer"],
body.footer-is-light footer .s-menu-footer-list,
body.footer-is-light footer .s-menu-footer-item {
  background-color: #063F73 !important;
}


/* Mobile */
@media (max-width: 767px) {

  footer .s-menu-footer-list,
  .store-footer .s-menu-footer-list {
    background-color: #063F73 !important;
  }

  footer .s-menu-footer-item,
  .store-footer .s-menu-footer-item {
    color: #FFFFFF !important;
    background-color: #063F73 !important;
  }

}
/* =========================================================
   HEADER SEARCH - WHITE STYLE
========================================================= */

body > .app-inner > header
  :where(
    input[type="search"],
    .search-input,
    .search-field input
  ),
.store-header
  :where(
    input[type="search"],
    .search-input,
    .search-field input
  ) {
  background: #FFFFFF !important;
  color: #063F73 !important;

  border: 1px solid #A8C9DF !important;

  border-radius: 12px;
}


/* النص الداخلي */

body > .app-inner > header
  :where(
    input[type="search"],
    .search-input,
    .search-field input
  )::placeholder,
.store-header
  :where(
    input[type="search"],
    .search-input,
    .search-field input
  )::placeholder {
  color: #667482 !important;
  opacity: 1;
}


/* Hover */

body > .app-inner > header
  :where(
    input[type="search"],
    .search-input,
    .search-field input
  ):hover,
.store-header
  :where(
    input[type="search"],
    .search-input,
    .search-field input
  ):hover {
  background: #FFFFFF !important;
  border-color: #3F7FB8 !important;
}


/* Focus */

body > .app-inner > header
  :where(
    input[type="search"],
    .search-input,
    .search-field input
  ):focus,
.store-header
  :where(
    input[type="search"],
    .search-input,
    .search-field input
  ):focus {
  background: #FFFFFF !important;
  color: #063F73 !important;

  border-color: #A8C9DF !important;

  outline: 2px solid #A8C9DF;
  outline-offset: 1px;

  box-shadow: none !important;
}


/* أيقونة البحث داخل الحقل */

body > .app-inner > header
  :where(.search-field, salla-search)
  i,
.store-header
  :where(.search-field, salla-search)
  i {
  color: #003B75 !important;
}

/* =========================================================
   FULL FOOTER BRAND COLOR
   الفوتر كامل بلون الهوية
========================================================= */

/* الفوتر الرئيسي */
body.footer-is-light footer,
body.footer-is-dark footer,
body.theme-raed footer,
body > .app-inner > footer,
.store-footer {
  background: #063F73 !important;
  background-color: #063F73 !important;

  color: #FFFFFF !important;

  border-top: 1px solid #3F7FB8 !important;
}


/* أي طبقات داخلية قد تكون لها خلفية مستقلة */
body.footer-is-light footer > div,
body.footer-is-dark footer > div,
body.theme-raed footer > div,
.store-footer > div {
  background: #063F73 !important;
  background-color: #063F73 !important;
}


/* الحاويات الداخلية للفوتر */
body footer .container,
body footer .footer-main,
body footer .footer-bottom,
body footer .footer-container,
body footer .footer-list,
body footer .footer-menu,
body footer nav,
body footer section {
  background-color: #063F73 !important;
}


/* عناوين الفوتر */
body footer h1,
body footer h2,
body footer h3,
body footer h4,
body footer h5,
body footer h6 {
  color: #FFFFFF !important;
}


/* النصوص */
body footer p,
body footer li,
body footer span,
body footer strong {
  color: #FFFFFF !important;
}


/* النصوص الثانوية */
body footer small,
body footer .text-muted,
body footer .text-gray-500,
body footer .text-gray-600 {
  color: #A8C9DF !important;
  opacity: 1 !important;
}


/* روابط الفوتر */
body footer a {
  color: #FFFFFF !important;
  background-color: transparent !important;

  transition:
    color 180ms ease,
    background-color 180ms ease;
}


/* Hover */
body footer a:hover,
body footer a:focus-visible {
  color: #A8C9DF !important;
}


/* Active */
body footer a:active,
body footer a.active,
body footer a[aria-current="page"] {
  color: #A8C9DF !important;
}


/* الأيقونات */
body footer i,
body footer i[class*="sicon-"] {
  color: #FFFFFF !important;
}


/* Hover للأيقونات */
body footer a:hover i,
body footer button:hover i {
  color: #A8C9DF !important;
}


/* الفواصل */
body footer hr {
  border-color: #3F7FB8 !important;
}


/* حدود العناصر */
body footer li,
body footer nav,
body footer section {
  border-color: #3F7FB8 !important;
}


/* =========================================================
   FOOTER MENU COMPONENT
========================================================= */

body footer salla-menu,
body footer salla-menu[source="footer"] {
  background: #063F73 !important;
  background-color: #063F73 !important;

  color: #FFFFFF !important;

  --color-primary: #A8C9DF;
  --color-primary-dark: #003B75;
  --color-primary-light: #A8C9DF;
  --color-primary-reverse: #FFFFFF;
}


/* قائمة الروابط */
body footer .s-menu-footer-list {
  background: #063F73 !important;
  background-color: #063F73 !important;
}


/* عناصر القائمة */
body footer .s-menu-footer-item {
  background: #063F73 !important;

  color: #FFFFFF !important;

  border-color: #3F7FB8 !important;
}


/* Hover */
body footer .s-menu-footer-item:hover {
  background: #003B75 !important;

  color: #A8C9DF !important;
}


/* =========================================================
   FOOTER INPUTS
========================================================= */

body footer input,
body footer textarea {
  background: #FFFFFF !important;

  color: #063F73 !important;

  border: 1px solid #A8C9DF !important;
}

body footer input::placeholder,
body footer textarea::placeholder {
  color: #667482 !important;
}


/* =========================================================
   PAYMENT METHODS
   نحافظ على ألوان الشعارات الأصلية
========================================================= */

body footer salla-payments img,
body footer .payment-methods img,
body footer img[alt*="مدى"],
body footer img[alt*="Visa"],
body footer img[alt*="Mastercard"] {
  filter: none !important;
  opacity: 1 !important;

  background: #FFFFFF !important;

  border-radius: 6px;
}


/* =========================================================
   FOOTER COPYRIGHT
========================================================= */

body footer .copyright,
body footer .footer-copyright {
  background: #003B75 !important;

  color: #FFFFFF !important;

  border-color: #3F7FB8 !important;
}


/* =========================================================
   MOBILE FOOTER
========================================================= */

@media (max-width: 767px) {

  body.footer-is-light footer,
  body.footer-is-dark footer,
  body.theme-raed footer,
  body > .app-inner > footer,
  .store-footer {
    background: #063F73 !important;
    background-color: #063F73 !important;
  }

  body footer > div,
  body footer .container,
  body footer nav,
  body footer section,
  body footer salla-menu,
  body footer .s-menu-footer-list {
    background-color: #063F73 !important;
  }

}
/* =========================================================
   END OF PREMIUM SALLA THEME UI
========================================================= */