/* =========================================
   TEPRO CLEAN CSS - FIXED (NO DUPLICATES)
   ========================================= */

/* ===== صور الموقع ===== */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===== لوقو الفوتر ===== */
img.footer_logo {
  width: 110px !important;
  height: 40px !important;
  object-fit: contain;
}

/* =========================================
   1) البنر العريض (edit-678058488) + الفراغ بلون المتجر
   ========================================= */
section.s-block:has(#edit-678058488) {
  margin-top: 10px !important;
  margin-bottom: 26px !important; /* مسافة قبل المنتجات */
}

section.s-block:has(#edit-678058488) .container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

section.s-block:has(#edit-678058488) a.banner{
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #141414 !important;
  margin-top: 0 !important;
}

/* صورة البنر: يظهر كامل ويملا الفراغات بلون المتجر */
section.s-block:has(#edit-678058488) a.banner img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1200 / 420 !important; /* طول البنر بالكمبيوتر */
  object-fit: contain !important;       /* يظهر كامل الصورة */
  background: #141414 !important;       /* يملأ الفراغات */
  border-radius: 18px !important;
}

/* =========================================
   2) المؤقت تحت البنر (مو Overlay فوق الصورة)
   ========================================= */
section.s-block:has(#edit-678058488) .banner-countdown-overlay{
  position: static !important;
  transform: none !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 14px !important;
  margin-bottom: 10px !important;
}

section.s-block:has(#edit-678058488) .banner-countdown{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

section.s-block:has(#edit-678058488) .cd-title{
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  margin: 0 8px 0 0 !important;
}

section.s-block:has(#edit-678058488) .cd-time{
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

section.s-block:has(#edit-678058488) .cd-time > div{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1.1 !important;
  min-width: 56px !important;
}

section.s-block:has(#edit-678058488) .cd-time span{
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

section.s-block:has(#edit-678058488) .cd-time small{
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  opacity: .95 !important;
}

/* ===== الجوال للبنر + المؤقت ===== */
@media (max-width: 768px){
  section.s-block:has(#edit-678058488){
    margin-top: 8px !important;
    margin-bottom: 22px !important;
  }

  section.s-block:has(#edit-678058488) .container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  section.s-block:has(#edit-678058488) a.banner{
    border-radius: 16px !important;
  }

  section.s-block:has(#edit-678058488) a.banner img{
    aspect-ratio: 1200 / 500 !important; /* أطول شوي بالجوال */
    border-radius: 16px !important;
  }

  section.s-block:has(#edit-678058488) .banner-countdown-overlay{
    margin-top: 12px !important;
    margin-bottom: 8px !important;
  }

  section.s-block:has(#edit-678058488) .cd-title{
    font-size: 15px !important;
  }

  section.s-block:has(#edit-678058488) .cd-time span{
    font-size: 28px !important;
  }

  section.s-block:has(#edit-678058488) .cd-time > div{
    min-width: 52px !important;
  }
}

/* =========================================
   3) قسم المميزات
   ========================================= */
section.s-block.s-block--features.container { min-height: 180px; }
section.s-block.s-block--features.container .grid { min-height: 120px; align-items: start; }

.s-block--features__item{
  background: transparent !important;
  padding: 25px 15px !important;
  text-align: center;
  min-height: 70px;
}

.feature-icon{
  background: transparent !important;
  border: none !important;
  margin-bottom: 10px !important;
}

.feature-icon i{
  color: #29a9ff !important;
  font-size: 38px !important;
  transition: 0.3s ease;
}

.s-block--features__item:hover .feature-icon i{ transform: scale(1.08); }

.s-block--features__item h2{
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 8px 0 5px 0;
  letter-spacing: 1px;
}

.s-block--features__item p{
  color: #d1d5db !important;
  font-size: 14px !important;
}

/* =========================================
   4) آراء العملاء
   ========================================= */
section.testimonial_com.s-block { min-height: 180px; }

/* =========================================
   5) إطار المنتجات الأبيض (يبقى)
   ========================================= */
custom-salla-product-card{
  border: 2px solid #ffffff !important;
  border-radius: 18px !important;
  overflow: hidden;
}

/* =========================================
   6) الأقسام: بدون إطار/حدود على أقسام المنتجات (كتابة فقط)
   ========================================= */
body.index section.s-block.container:has(salla-products-list),
body.index section.s-block.container:has(.s-products-list){
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =========================================
   7) مسميات التصنيفات فوق المنتجات - ثابتة
   ========================================= */

/* شكل أزرار التصنيفات */
#featured-products-style2-1 .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    background: transparent !important;
    scrollbar-width: none !important;
}

#featured-products-style2-1 .tabs::-webkit-scrollbar {
    display: none !important;
}

#featured-products-style2-1 .tabs salla-button,
#featured-products-style2-1 .tabs .tab-trigger,
#featured-products-style2-1 .tabs .s-button-element {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
}

/* نخفي النص الأصلي */
#featured-products-style2-1 .tabs .s-button-text {
    font-size: 0 !important;
    color: transparent !important;
}

/* التصنيف الأول */
#featured-products-style2-1 .tabs salla-button:nth-child(1) .s-button-text::after,
#featured-products-style2-1 .tabs .tab-trigger:nth-child(1) .s-button-text::after {
    content: "ماوس باد 120x60";
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

/* التصنيف الثاني */
#featured-products-style2-1 .tabs salla-button:nth-child(2) .s-button-text::after,
#featured-products-style2-1 .tabs .tab-trigger:nth-child(2) .s-button-text::after {
    content: "ماوس باد 90x40";
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

/* التصنيف الثالث */
#featured-products-style2-1 .tabs salla-button:nth-child(3) .s-button-text::after,
#featured-products-style2-1 .tabs .tab-trigger:nth-child(3) .s-button-text::after {
    content: "ماوس باد 40x45";
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

/* شكل الزر النشط */
#featured-products-style2-1 .tab-trigger.is-active .s-button-element,
#featured-products-style2-1 .tab-trigger.is-active button {
    background: #1f1f1f !important;
    border-color: #2f2f2f !important;
}

/* الجوال */
@media (max-width:768px){
    #featured-products-style2-1 .tabs salla-button:nth-child(1) .s-button-text::after,
    #featured-products-style2-1 .tabs .tab-trigger:nth-child(1) .s-button-text::after,
    #featured-products-style2-1 .tabs salla-button:nth-child(2) .s-button-text::after,
    #featured-products-style2-1 .tabs .tab-trigger:nth-child(2) .s-button-text::after,
    #featured-products-style2-1 .tabs salla-button:nth-child(3) .s-button-text::after,
    #featured-products-style2-1 .tabs .tab-trigger:nth-child(3) .s-button-text::after {
        font-size: 14px !important;
    }

    .feature-icon i{ font-size: 30px !important; }
    .s-block--features__item h2{ font-size: 22px !important; }
    .s-block--features__item p{ font-size: 12px !important; }
}

/* =========================================
   8) Splash Screen (طريقة واحدة فقط) + زر تخطي
   ========================================= */
body.index::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999999;
  background:
    url("https://cdn.salla.sa/form-builder/fEZpiPtZJQfAYdtVZfPmSn6UlUkwXSmL7vOeNxvS.png")
    center/180px no-repeat
    #141414;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  animation: teproSplashHide 2s ease forwards;
}

body.index.tepro-splash-skip::after{
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes teproSplashHide{
  0%{ opacity:1; transform:scale(1); }
  70%{ opacity:1; transform:scale(1.08); }
  100%{ opacity:0; visibility:hidden; transform:scale(1.15); pointer-events:none; }
}

#tepro-splash-skip-btn{
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10000000 !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  backdrop-filter: blur(6px);
}

body.index.tepro-splash-done #tepro-splash-skip-btn{ display:none !important; }

@media (max-width:768px){
  body.index::after{
    background:
      url("https://cdn.salla.sa/form-builder/fEZpiPtZJQfAYdtVZfPmSn6UlUkwXSmL7vOeNxvS.png")
      center/140px no-repeat
      #141414;
  }
}
.content-entry,
.content-entry p,
.content-entry span,
.content-entry strong {
    color: #000 !important;
}
#featured-products-style2-1 {
    background: #141414 !important;
}

#featured-products-style2-1 .container {
    background: transparent !important;
}
#featured-products-style2-1 {
    background-color: #141414 !important;
}

/* إظهار شريط التصنيفات */
#featured-products-style2-1 .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    background: transparent !important;
    scrollbar-width: none;
}

#featured-products-style2-1 .tabs::-webkit-scrollbar {
    display: none;
}

/* إظهار كل زر تصنيف */
#featured-products-style2-1 .tab-trigger,
#featured-products-style2-1 .tabs salla-button,
#featured-products-style2-1 .tabs .s-button-element {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
}

/* لون النص عشان ما يختفي على الخلفية الداكنة */
#featured-products-style2-1 .tab-trigger .s-button-text,
#featured-products-style2-1 .tabs .s-button-text {
    color: #fff !important;
}

/* التبويب النشط */
#featured-products-style2-1 .tab-trigger.is-active .s-button-element,
#featured-products-style2-1 .tab-trigger.is-active button {
    background: #1f1f1f !important;
    border-color: #2f2f2f !important;
}

#featured-products-style2-1 .tab-trigger.is-active .s-button-text {
    color: #fff !important;
}
/* =========================================
   عناوين أقسام المنتجات
   ========================================= */

/* الشكل العام */
.s-block__title{
display:flex !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
margin-bottom:25px !important;
}

/* إخفاء العنوان الأصلي */
.s-block__title h2,
.s-block__title span{
display:none !important;
}

/* النص الجديد */
.s-block__title::before{
color:#ffffff !important;
font-size:30px !important;
font-weight:900 !important;
text-align:center !important;
display:block !important;
width:100% !important;
}

/* القسم الأول */
.s-block:nth-of-type(1) .s-block__title::before{
content:"د عروض العيد";
}

/* القسم الثاني */
.s-block:nth-of-type(2) .s-block__title::before{
  content:"عروض العيد";
}

/* القسم الثالث */
.s-block:nth-of-type(3) .s-block__title::before{
content:"ماوس باد 120X60";
}

/* القسم الرابع */
.s-block:nth-of-type(4) .s-block__title::before{
content:"ماوس باد 90X40";
}
/* القسم الخامس */
.s-block:nth-of-type(5) .s-block__title::before{
content:"ماوس باد 40X45";
}


/* الجوال */
@media (max-width:768px){
.s-block__title::before{
font-size:22px !important;
}
}