/* Add custom CSS styles below */
:root {
  --main-color: #d4b47a;      /* الذهبي */
  --sec-color: #b79963;       /* ذهبي أدكن شوي */
  --white-color: #f8f3e6;     /* أوف وايت */
}
body{
  background: var(--white-color);
}

/* start header */
.inner.bg-inherit {
    background: #5e000033;
    color: var(--main-color) !important;
}

.top-navbar .s-search-input {
    background-color: var(--main-color) !important;
}

.s-search-input::placeholder,
.s-search-input:-ms-input-placeholder,
.s-search-input::-ms-input-placeholder {
  color: var(--white-color) !important;
}

.s-search-icon svg {
    fill: var(--white-color) !important;
}

.s-menu-topnav-list *{
  color: var(--main-color) !important;
}

i.header-btn__icon.icon.sicon-shopping-bag,
i.header-btn__icon.sicon-user-circle{
    background: var(--main-color) !important;
    color: var(--white-color) !important;
    border:none;
}

i.sicon-menu.text-primary.text-2xl {
    background: var(--main-color) !important;
    border-radius: 50px;
    padding: 6px;
    color: var(--white-color) !important;
}
/* end header */

/** start slider **/
section.s-block.s-block--photos-slider {
  margin-top: 0;
  .swiper-slide {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  & * {
    border-radius: 0 !important;
  }
  .swiper.s-slider-container {
    padding: 0 !important;
  }
  .s-slider-block__title-nav {
    visibility: hidden;
  }
}

.main-nav-container.fixed-header .inner {
  background: var(--white-color) !important;
  color: var(--main-color) !important;
}
/** End slider **/

/** start banners **/
.banner--fixed img {
  background: var(--white-color) !important;
}

section.s-block.s-block--fixed-banner.wide-placeholder:not(:has(a[href="https://fanar-collection.com/offers"])):first-of-type {
  margin-top: 0 !important;
}

section.s-block.s-block--fixed-banner.wide-placeholder:not(:has(a[href="https://fanar-collection.com/offers"])) > .container {
  max-width: fit-content !important;
}

a.banner--fixed:not([href="https://fanar-collection.com/offers"]) img {
  border-radius: 0 !important;
  background: var(--white-color) !important;
}
/** End banners **/

/* start catagroies */
body.index > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div{ 
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.index > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div .banner-entry {
  height: 392px;
  background: var(--white-color) !important;
}

@media (max-width: 767px) {
 body.index > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div .banner-entry {
  height: 120px;
 }
}
/* end catagroies */


/*start products*/
salla-add-product-button button.s-button-element {
  position: relative;
  transition: all 250ms ease-in-out;
  overflow: hidden;
  z-index: 1;
  background-color: var(--main-color); 
  color: var(--white-color);
}

salla-add-product-button button.s-button-element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--white-color); 
  z-index: -1;
  transition: all 250ms ease-in-out;
}

salla-add-product-button button.s-button-element:hover::before {
  width: 100%;
}

.s-button-primary-outline:hover {
    fill: var(--main-color)!important;
    color: var(--main-color)!important;
}

img.s-product-card-image-contain.lazy.loaded {
    background: var(--white-color);
}

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

.s-product-card-price{
  color: var(--main-color)  !important;
}

.s-product-card-vertical .s-product-card-wishlist-btn button {
 opacity: 1;
 background-color: var(--main-color) !important; 
 color: var(--white-color) !important;
}

.s-slider-block__title-right h2,
.right-side h2 {
  position: relative;
  color: var(--sec-color);
  font-size: 20px;
}

.s-slider-block__title-right h2::after,
.right-side h2::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 50%;
  height: 2px;
  background-color: var(--sec-color);
  border-radius: 3px;
  transition: width 0.5s ease-out;
}

.s-slider-block__title-right h2:hover::after,
.right-side h2:hover::after {
  width: 100%;
}

custom-salla-product-card.s-product-card-entry {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(212 180 122 / 18%);
  transition: all 0.4s ease;
}

custom-salla-product-card.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgb(212 180 122 / 20%);
}
/*end products*/


/* start feature */
.grid.grid-cols-\[repeat\(2\,minmax\(0\,1fr\)\)\].md\:grid-cols-\[repeat\(3\,minmax\(0\,1fr\)\)\].gap-4.sm\:gap-6.xl\:gap-8 {
    background: #d4b47a2e;
    border-radius: 66px;
}

.s-block--features__item {
    background: transparent;
}

.s-block--features__item .feature-icon {
    background-color: transparent !important;
}

.s-block--features__item h2{
    color: #5e0000;
    font-weight: 700;
    font-size: 23.49px;
    line-height: 133%;
}

.s-block--features__item p{
    color: #5e0000;
    font-weight: 400;
    font-size: 18px;
    line-height: 133%;
}

.s-block--features__item:hover {
    box-shadow: none !important;
}

@media (max-width: 767px) {
 .grid.grid-cols-\[repeat\(2\,minmax\(0\,1fr\)\)\].md\:grid-cols-\[repeat\(3\,minmax\(0\,1fr\)\)\].gap-4.sm\:gap-6.xl\:gap-8 {
    border-radius: 40px;
 }   

.s-block--features__item h2{
    font-size: 18px;
}
.s-block--features__item p{
    font-size: 14px;
}
}
/* end feature */


/*start footer */
footer a[href*=instagram] {
 background: linear-gradient(45deg, #e0c78d, #d4b47a);
 color: var(--white-color);
}

footer a[href*=tiktok] {
    background: black;
    color: var(--white-color);
}

footer a[href*=snapchat] {
    background: yellow;
    color: black;
}

.store-footer__inner {
 background: #5e0000 !important;
}

div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div:nth-child(2){
  color: var(--white-color) !important; 
}

div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a > h3 {
  display:none;
}

div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > p{
  display:none;
}

.s-social-list {
  justify-content: center;
}

salla-contacts.s-contacts.hydrated {
  color: var(--white-color) !important; 
}

@media (max-width: 767px) {
  .store-footer__inner * {
    justify-content: center;
    text-align: center;
  }

#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > img{
    max-width: 65%;
    margin: auto;
 }
}
/* end footer */


*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--main-color) !important;
}

.s-products-list-placeholder span svg {
   fill: #ffffff;
}

.s-products-list-placeholder span {
  background-color: var(--main-color) !important;
}
/* تغيير لون عناوين السلايدر إلى الخمري الغامق */
.s-slider-block__title-right h2,
.s-slider-block__title-left h2,
.s-slider-block__title h2 {
    color: #5e0000 !important;
}
.s-slider-block__title-right h2,
.s-slider-block__title-left h2,
.s-slider-block__title h2 {
    color: #5e0000 !important;
    position: relative;
}

.s-slider-block__title-right h2::after,
.s-slider-block__title-left h2::after,
.s-slider-block__title h2::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    width: 40%;
    height: 2px;
    background-color: #5e0000;
    border-radius: 3px;
}
/* لون عناوين المنتجات */
.s-product-card-content-title a {
    color: #5e0000 !important;
}

/* لون الأسعار */
.s-product-card-price,
.s-product-card-price * {
    color: #5e0000 !important;
}
/* تغيير لون عنوان المنتج */
.s-product-card-content-title,
.s-product-card-content-title *,
.s-product-card-content h2,
.s-product-card-content h2 a,
.s-product-card-content a,
.s-product-card-vertical h2,
.s-product-card-vertical h2 a {
    color: #5e0000 !important;
}
/* تغيير لون عنوان المنتج داخل كرت المنتج */
.s-product-card-entry a,
.s-product-card-content a,
.s-product-card a {
    color: #5e0000 !important;
}
/* تغيير لون عنوان المنتج بالقوة */
.s-product-card-entry .s-product-card-content-title a,
.s-product-card-entry h2 a,
.s-product-card-entry a:not(.s-button-element),
.s-product-card-vertical .s-product-card-content-title a,
.s-product-card-horizontal .s-product-card-content-title a {
    color: #5e0000 !important;
}
/* لون أيقونة المفضلة (القلب) */
.s-product-card-wishlist-btn .sicon-heart {
    color: #5e0000 !important;
    fill: #5e0000 !important;
}
/* إزالة خلفية قسم التابات فقط */
.s-block--tabs-products {
    background: transparent !important;
}
.s-block--full-bg-gray-100 {
    background: transparent !important;
}

section[id*="featured-products-style2"] {
    background: transparent !important;
}
.s-block--features__item .feature-icon i,
.s-block--features__item .feature-icon svg {
    color: #5e0000 !important;
    fill: #5e0000 !important;
    stroke: #5e0000 !important;
}
/* خلفية الهيدر */
header,
.main-nav-container,
.top-navbar,
nav#mobile-menu.mobile-menu.mm-spn--light.mm-spn--navbar.mm-spn--main {
    background: #f8f3e6 !important; /* أوف وايت */
}


/* لون نصوص الهيدر */
header *,
.main-nav-container *,
.top-navbar *,
nav#mobile-menu * {
    color: #5e0000 !important; /* خمري غامق */
}


/* لون أيقونات الهيدر */
header svg,
header i,
.top-navbar svg,
.top-navbar i,
nav#mobile-menu svg,
nav#mobile-menu i {
    color: #5e0000 !important;
    fill: #5e0000 !important;
    stroke: #5e0000 !important;
}


/* لون صندوق البحث */
.s-search-input {
    background: #f8f3e6 !important;
    border: 1px solid #5e0000 !important;
    color: #5e0000 !important;
}

.s-search-input::placeholder {
    color: #5e0000 !important;
}

/* أيقونة البحث */
.s-search-icon svg {
    fill: #5e0000 !important;
}

/* -- تعديل خلفية الهيدر بالكامل بكل طبقاته -- */
header,
header *,
.salla-header,
.salla-header *,
.app-header,
.app-header *,
.main-nav-container,
.main-nav-container *,
.top-navbar,
.top-navbar *,
.header-top,
.header-top *,
nav#mobile-menu,
nav#mobile-menu *,
body.header-is-light .main-nav-container,
body.header-is-light .salla-header {
    background: #f8f3e6 !important; /* أوف وايت */
    color: #5e0000 !important; /* خمري غامق */
}

/* -- تعديل خلفية الكونتينر المحيط بالهيدر (التوسيط اللي كان لونه مختلف) -- */
header .container,
.salla-header .container,
.main-nav-container .container {
    background: #f8f3e6 !important;
}

/* -- النصوص في الهيدر -- */
header a,
header span,
header button,
.main-nav-container a,
.main-nav-container span,
.top-navbar a,
.top-navbar span {
    color: #5e0000 !important;
}

/* -- الأيقونات -- */
header svg,
header i,
.top-navbar svg,
.top-navbar i {
    color: #5e0000 !important;
    fill: #5e0000 !important;
    stroke: #5e0000 !important;
}

/* -- صندوق البحث -- */
.s-search-input {
    background: #f8f3e6 !important;
    border: 1px solid #5e0000 !important;
    color: #5e0000 !important;
}

.s-search-input::placeholder {
    color: #5e0000 !important;
}

.s-search-icon svg {
    fill: #5e0000 !important;
}
.store-footer__inner {
    position: relative;
    background-color: #5e0000 !important; /* لون الفوتر الخمري */
}

/* الموجة فوق الفوتر */
.store-footer__inner::before {
    content: "";
    position: absolute;
    top: -58px; /* يرفع الموجة لفوق */
    left: 0;
    width: 100%;
    height: 60px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;

    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54'>\
<path fill='%235e0000' d='M0 22L120 16.7C240 11 480 1.00001 720 0.700012C960 1.00001 1200 11 1320 16.7L1440 22V54H1320C1200 54 960 54 720 54C480 54 240 54 120 54H0V22Z'></path>\
</svg>");
}

footer .s-social-list a {
    background: transparent !important;  /* إزالة الخلفية */
    border: 1px solid #f8f3e6 !important; /* حدود أوف وايت */
    border-radius: 50%; /* دائرة */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
footer .s-social-list svg path {
    fill: none !important;          /* بدون تعبئة */
    stroke: #f8f3e6 !important;      /* لون الرسم أوف وايت */
    stroke-width: 2px !important;    /* وضوح الرسم */
}
custom-salla-product-card.s-product-card-entry {
    border: 1px solid #5e0000 !important;  /* إطار نحيف خمري */
    border-radius: 10px !important;        /* زوايا ناعمة */
    padding: 8px !important;
}
/* شكل زر إضافة للسلة */
.s-button-primary-outline {
    border-color: #5e0000 !important;
    color: #5e0000 !important;
    font-weight: 500;
}

/* عند تمرير الماوس */
.s-button-primary-outline:hover {
    background-color: #5e0000 !important;
    color: #fff !important;
}
.s-button-primary-outline i {
    color: #5e0000 !important;
}
/* شكل الزر وهو غير مفعّل */
.tabs .tab-trigger .s-button-element {
    background-color: transparent !important;
    border: 1px solid #5e0000 !important;
    color: #5e0000 !important;
}

/* شكل الزر عند التحديد */
.tabs .tab-trigger.is-active .s-button-element {
    background-color: #5e0000 !important;
    color: #f8f3e6 !important;
    border-color: #5e0000 !important;
}

/* النص داخل الزر */
.tabs .tab-trigger .s-button-element .s-button-text {
    color: inherit !important;  /* يخليه يأخذ نفس لون الزر */
}