/* ==========================================================================
   01. Fonts & Variables
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap");

:root {
  /* Brand */
  --g-one: #381D0D;
  --g-two: #9C592B;
  --h: var(--g-one);
  --f: var(--g-one);

  /* Gradients */
  --linear-2: linear-gradient(90deg, var(--g-one), var(--g-two));
  --linear-title: linear-gradient(-225deg, #000 0, var(--color-primary) 29%, #000 67%, #68111b 100%);
  --linear: var(--linear-title);

  /* Assets */
  --logo: url("https://cdn.files.salla.network/other/290738689/0cfd0b56-9f4f-4a7f-92ed-0f5cde840ab4-original.webp");
  --img-back: url("");
  --card-img-back: url("https://cdn.salla.sa/form-builder/gUICVKxoZzCKHiJmeHQputZwK9ch666yQsBCAa4R.png");
  --filter: brightness(0) invert(1);

  /* Surfaces */
  --col-back: transparent;
  --pr-back: #fff;
  --pr-color: var(--col-back);

  /* Design tokens */
  --radius-sm: 11px;
  --radius-md: 17px;
  --radius-lg: 20px;
  --shadow-brand: 1px 1px 5px var(--g-one);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.12);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.25s var(--ease);
  --t-base: 0.4s var(--ease);
}


/* ==========================================================================
   02. Base / Reset
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body,
body :where(h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, select, textarea, label) {
  font-family: "Noto Kufi Arabic", sans-serif !important;
}

/* ترانزشن خفيف على العناصر التفاعلية فقط (بدل * لأداء أفضل) */
a,
button,
.s-button-element,
.header-btn,
.s-product-card-vertical,
.s-products-slider-card,
.lazy__bg,
.main-menu a {
  transition: var(--t-base);
}

::selection {
  background: var(--g-two);
  color: #fff;
}

/* شريط تمرير بهوية المتجر */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--g-two) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--g-two); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

@media (min-width: 1280px) {
  .container { max-width: 90%; }
}


/* ==========================================================================
   03. Announcement Bar (الشريط المتحرك)
   ========================================================================== */
.store-features-bar {
  position: relative;
  z-index: 9999;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-inline: 20px;
  overflow: hidden;
  direction: ltr;
  background: var(--linear-2);
  color: #fff;
}

.store-features-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: scrollFeatures 120s linear infinite;
  will-change: transform;
}

.store-features-bar:hover .store-features-wrapper {
  animation-play-state: paused;
}

.store-feature-item {
  display: inline-block;
  margin-right: 25px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

@keyframes scrollFeatures {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (max-width: 767px) {
  .store-features-bar { height: 39px; }
  .store-feature-item { font-size: 14px; margin-right: 20px; }
}


/* ==========================================================================
   04. Header
   ========================================================================== */
.top-navbar { display: none; }

.store-header { background-color: transparent; }

.main-nav-container,
.main-nav-container.shadow-default.bg-white {
  background-color: var(--h);
}

.main-nav-container.fixed-pinned .navbar-brand img {
  max-height: 60px;
}

/* .navbar-brand img { filter: var(--filter); } */

@media (min-width: 1024px) {
  .navbar-brand {
    height: 100%;
    margin: 0;
    padding: 0 20px;
  }
}

@media (min-width: 991px) {
  .store-header .container { background-color: var(--h); }
}

/* توزيع عناصر الهيدر */
header .inner.bg-inherit div.flex.items-center:not(.justify-end) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

custom-main-menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 84px;
}

.main-menu { justify-content: center; }

/* ألوان النصوص والأيقونات */
.main-menu li.root-level > a,
.main-menu > .has-children:hover > a,
header .text-primary,
.s-cart-summary-total,
.s-user-menu-login-btn svg,
.header-btn__icon,
i.sicon-menu.text-primary.text-2xl.me-2\.5,
header .sicon-search {
  color: #fff !important;
  fill: #fff;
}

@media (min-width: 1024px) {
  .main-menu #offers a { color: #fff; }
  .main-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    background-color: var(--g-two);
  }
}

/* أزرار الهيدر */
.s-user-menu-trigger { background-color: transparent; }

.header-btn {
  width: 40px;
  margin: 0 10px 0 0;
  margin-inline-start: 11px !important;
  padding: 6px;
  border: 1px solid wheat;
  border-radius: 50%;
  color: #fff;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: var(--t-fast);
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.header-search { margin: 0 20px; }

/* استبدال الأيقونات */
.sicon-shopping-bag:before { content: "\e901"; text-align: center; }
.sicon-user-circle:before  { content: "\f077"; text-align: center; }


/* ==========================================================================
   05. Mobile Menu & Modal
   ========================================================================== */
/* شعار أعلى القائمة الجانبية والنوافذ */
#salla-modal > div.s-modal-wrapper > div > div.s-modal-header > div > span {
  display: none;
}

#salla-modal > div.s-modal-wrapper > div > div.s-modal-header::before,
nav#mobile-menu::before,
#app > div.mm-ocd.mm-ocd--right.mm-ocd--open > div.mm-ocd__content::before {
  content: "";
  display: block !important;
  width: 100%;
  height: 105px;
  border-radius: 15px;
  background: var(--g-two) var(--logo) center / contain no-repeat;
}

#salla-modal > div.s-modal-wrapper > div > div.s-modal-header::before {
  margin: -27px 0 32px;
}

@media (min-width: 767px) {
  nav#mobile-menu::before { display: none !important; }
}

@media (max-width: 1024px) {
  .mm-ocd--right .mm-ocd__content {
    inset: -67px 0 0 0 !important;
    width: 86%;
    height: 83%;
    margin: auto;
    border-radius: var(--radius-lg);
  }

  .mm-spn ul.mm-spn--open {
    left: 0;
    background-color: var(--g-two);
  }

  .mm-spn ul.mm-spn--open li {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
  }
}

@media (max-width: 991px) {
  .header-btn__icon,
  i.sicon-menu.text-primary.text-2xl.me-2\.5,
  header .sicon-search {
    color: #fff !important;
  }
}


/* ==========================================================================
   06. Search Popup
   ========================================================================== */
.bg-white.p-6.rounded.shadow.w-full.max-w-md.relative {
  top: -170px;
  border: 2px solid #fff;
  border-radius: 46px;
  background: var(--linear-2);
  color: aliceblue;
  box-shadow: var(--shadow-soft);
}

.bg-white.p-6.rounded.shadow.w-full.max-w-md.relative button {
  color: aliceblue;
}

@media (max-width: 768px) {
  .bg-white.p-6.rounded.shadow.w-full.max-w-md.relative { top: -240px; }
}


/* ==========================================================================
   07. Page Background & Layout
   ========================================================================== */
.app-inner {
  background: var(--img-back) var(--col-back) no-repeat fixed center / cover;
}

.s-block:first-of-type { margin-top: 0; }

@media (min-width: 640px) {
  .s-block { margin-top: 2rem; }
}

.s-block__title { display: none; }

.s-block .container {
  max-width: 100vw;
  padding-inline: 0;
}

.overflow-auto { overflow: hidden; }


/* ==========================================================================
   08. Banners & Sliders
   ========================================================================== */
salla-slider.photos-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
  padding-inline: 0;
}

salla-slider.photos-slider .swiper-slide {
  width: 100%;
  margin-inline: 0;
  padding: 0;
}

.banner-entry,
.banner--fixed img {
  background-color: transparent !important;
}

.banner-entry {
  flex-grow: 1;
  height: 250px !important;
  overflow: inherit;
}

.s-block--banners .grid.one-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sm\:gap-8 { gap: 0; }

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 991px) {
  .banner-entry { height: 410px !important; }
}

@media (max-width: 768px) {
  .s-block--banners { margin-top: 0; }
  .s-block--banners .md\:grid-cols-3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .banner-entry { height: 280px !important; }
  .two-row .banner-entry:first-child { padding: 0.75rem !important; }
  .lazy__bg { background-size: 100% !important; }
  salla-slider .slide--one-fourth {
    width: 100%;
    max-width: 141px;
    height: auto;
  }
}

/* حركة الهوفر (مخففة) */
.lazy__bg:hover {
  transform: scale(1.06);
  filter: drop-shadow(1px 1px 10px var(--g-one));
}

.carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
  padding-block: 15px;
}

salla-slider:not(.hydrated),
.carousel-slider {
  background-color: transparent;
}


/* ==========================================================================
   09. Product Cards
   ========================================================================== */
.s-products-slider-card {
  width: 225px !important;
  height: 300px !important;
  filter: drop-shadow(var(--shadow-brand));
}

.s-products-slider-card:hover {
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .s-products-slider-card {
    width: 200px !important;
    height: 290px !important;
  }
}

.s-product-card-vertical {
  flex-direction: column;
  border: 4px solid #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* صورة المنتج */
.s-product-card-fit-height.s-product-card-vertical .s-product-card-image {
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  background: var(--card-img-back) center / cover no-repeat;
}

.s-product-card-fit-height.s-product-card-vertical:hover .s-product-card-image {
  background: #fff;
}

.s-product-card-vertical .s-product-card-image {
  height: 150px !important;
  overflow: inherit;
}

.s-product-card-image img.loaded {
  position: relative;
  opacity: 1;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* object-fit: cover يمنع تمدد/تشوه الصور (بدل fill) */
.s-product-card-image-cover,
.s-product-card-image-contain {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}

/* المحتوى */
.s-product-card-content { padding: 7px; }

.s-product-card-content-title a {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.s-product-card-content-title a:hover { color: #000; }

.s-product-card-content-sub { justify-content: center; }

.s-product-card-content-footer { width: 20%; }

.s-product-card-content-footer .s-button-text span { display: none; }

.s-product-card-content-footer
  salla-add-product-button
  .s-button-element:not(:disabled):not([loading]) {
  width: auto;
  padding: 6px 15px;
  left: -170%;
  pointer-events: auto;
}

/* الأزرار والأيقونات */
.s-product-card-vertical .s-button-outline {
  padding: 4px 15px !important;
  border-width: 1px;
  border-color: #eee;
}

.s-product-card-vertical .s-product-card-wishlist-btn button {
  height: 32px;
  margin: 0;
  padding-inline: 10px !important;
  border: 2px solid #eee;
}

.s-product-card-vertical [class^="sicon-"],
.s-product-card-vertical [class*=" sicon-"] {
  color: var(--g-one);
}

/* نفذت الكمية */
.s-product-card-content-footer salla-add-product-button .s-button-disabled {
  position: relative;
  width: 50px;
}

.s-product-card-content-footer salla-add-product-button .s-button-disabled::after {
  content: "نفذت الكمية";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #000;
}


/* ==========================================================================
   10. Product Page / Quick View
   ========================================================================== */
.quick-view-modal .article--main * { color: #000 !important; }

.quick-view-modal .s-button-element:not(:disabled):not([loading]) {
  width: 100%;
  padding: 5px 10px;
  border-color: var(--col-back);
  color: #fff;
  pointer-events: auto;
}

.quick-view-modal .py-4 { padding-block: 0; }
.quick-view-modal .p-5  { padding: 0.25rem; }

.btn-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .btn-container {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* شريط الشراء الثابت (جوال) */
@media (max-width: 640px) {
  .is-sticky-product-bar .sticky-product-bar { bottom: 0; }
}


/* ==========================================================================
   11. Categories & Section Titles
   ========================================================================== */
.s-block--categories .s-slider-block__title h2,
.main-content h1,
.s-block__title h2 {
  text-transform: uppercase;
}

.s-slider-block__title .s-slider-block__title-left {
  flex-direction: column;
  justify-content: center;
}

.slide--cat-entry { height: 7rem; }
.slide--cat-entry h2 { color: #fff; }

.brand-item {
  border: 2px solid #000;
  border-radius: var(--radius-md);
}


/* ==========================================================================
   12. Footer
   ========================================================================== */
.footer-is-light .store-footer .store-footer__inner {
  background-color: var(--f);
}

footer.store-footer *,
p.text-gray-400.mb-2\.5.md\:mb-0,
.hover\:text-primary {
  color: #fff !important;
  text-align: center;
}

/* توسيط المحتوى */
.lg\:col-span-2.lg\:pe-20,
#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
}

a.mb-4.last\:mb-0.flex.items-center.text-sm.leading-none,
a.flex.items-center.m-0,
ul.flex.mb-6,
.s-contacts-item {
  justify-content: center;
}

footer .max-w-sm.leading-6 { margin-top: 30px; }

/* شعار الفوتر */
.store-footer__inner .container::before {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  width: 100px;
  height: 90px;
  margin-inline: auto;
  border-radius: 10%;
  background: var(--logo) center / contain no-repeat;
  /* filter: var(--filter); */
}

@media (min-width: 1020px) {
  .store-footer__inner .container::before {
    width: 80px;
    top: -65px;
    left: -281px;
  }
}

/* عناوين الفوتر */
.store-footer h3 {
  width: fit-content;
  margin: 0 auto 20px;
  padding: 0 30px 10px;
  border-radius: 9rem 0 8rem 2rem;
  background: var(--g-one);
  color: #fff;
  font-size: 20px !important;
  font-weight: 700;
  text-align: center;
}

.store-footer__inner a h3 { display: none; }

/* وسائل الدفع */
.s-payments-list-item,
.s-payments-list-item img {
  background: #fff !important;
}

#app > div.app-inner.flex.flex-col.min-h-full > footer >
  div.md\:flex.items-center.justify-between.py-4.container.text-center > ul > li {
  width: 4rem;
  height: 3rem;
}

#app > div.app-inner.flex.flex-col.min-h-full > footer >
  div.md\:flex.items-center.justify-between.py-4.container.text-center > span > p {
  display: none;
}

/* حقوق التطوير */
.store-footer::after {
  content: "برمجة وتطوير Riseon";
  display: inline-block;
  width: 100%;
  color: #000 !important;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  opacity: 0.8;
}

/* واتساب */
#we-whatsapp-message { width: 40%; }


/* ==========================================================================
   13. Dark Mode
   ========================================================================== */
body.dark .app-inner { background-image: none; }

body.dark .s-slider-block__title h2,
body.dark .main-content h1,
body.dark .s-block__title h2 {
  background-image: var(--linear);
}

body.dark .stats-title,
body.dark .stats-subtitle,
body.dark .stats-section h2,
body.dark .testimonial-title,
body.dark .testimonials-section p.subtitle,
body.dark .features-section h2,
body.dark .features-section p.subtitle,
body.dark .slider-title,
body.dark .faq-answer,
body.dark #faq-section h2,
body.dark #suggestion-section h2,
body.dark #suggestion-section p,
body.dark .breadcrumbs *,
body.dark #page-main-title,
body.dark .s-menu-topnav-item,
body.dark .text-unicode,
body.dark .main-content .flex.items-center,
body.dark .s-comments {
  color: #fff !important;
}

body.dark .testimonial-title { margin-bottom: 0 !important; }

body.dark .s-comments { background-color: transparent !important; }

body.dark #faq-section { background-color: var(--f) !important; }

body.dark .s-contacts-icon { background-color: var(--color-primary) !important; }

body.dark .review { background: var(--color-primary); }

body.dark .main-content { background-color: transparent; }

body.dark .product-single .main-content {
  padding: 10px;
  border-radius: 12px;
  background-color: #fff;
}

body.dark .total-price { color: #000; }

body.dark .s-button-primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
}

body.dark .s-slider-block__title h2:where([dir="rtl"], [dir="rtl"] *) {
  padding-left: 2rem;
  color: var(--g-one);
}

body.dark .rtl .form-select,
body.dark .rtl select,
body.dark [dir="rtl"] .form-select,
body.dark [dir="rtl"] select {
  color: var(--f);
}

body.dark .store-footer__inner {
  background-blend-mode: multiply;
  background-size: cover;
}

@media (max-width: 1024px) {
  body.dark .mm-spn.mm-spn--light,
  body.dark .mm-spn.mm-spn--light * {
    color: #fff;
  }
  body.dark .mm-spn.mm-spn--light { background: #000; }
}


/* ==========================================================================
   14. Accessibility & Motion
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--g-two);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


.main-menu > li > a[href*="offer"] {
  --tw-text-opacity: 1;
  color: #991b1b;
  color: rgb(255, 255, 255);
  display: none;
}


.s-button-primary {
  border-width: 1px;
  border-color: #f5a959;
  background-color: var(--g-two);
  color: #fff;
}

.sticky-product-bar salla-mini-checkout-widget .s-fast-checkout-button.outline,
.sticky-product-bar salla-mini-checkout-widget button.s-fast-checkout-button.outline {
    background-color: transparent !important;
    background: transparent !important;
    border: 1px solid var(--g-two) !important;
    color: var(--g-one) !important;
    box-shadow: none !important;
}


.s-slider-block__display-all {
  color: #371e0e;
}

.s-products-slider-wrapper .swiper-wrapper {
  justify-content: center;
}

.s-slider-block__title h2 {
  display: none;
}


.s-contacts-list .s-contacts-item[href^="tel:"] {
    display: none !important;
}

#raed-coffee {
    display: none;
}