/* =========================================
   1. Global Settings (إعدادات عامة)
   ========================================= */
body {
    background-color: #1e1e1e;
}

/* إصلاح التباين للأيقونات والعناوين العامة */
.top-navbar,
.breadcrumbs,
#page-main-title,
label[for="product-filter"],
.text-\[var\(--color-secondary\)\],
h2.font-bold.text-xl.inline-block,
.product-stat,
tamara-widget,
.s-slider-block__title-right,
.s-breadcrumb-arrow svg {
    color: white !important;
}

.s-breadcrumb-arrow {
    fill: white !important;
}

/* تنسيق ويدجت تمارا */
tamara-widget:hover {
    color: black !important;
}

.collapsed {
    opacity: 1;
}

/* =========================================
   2. Header (الرأس والقائمة العلوية)
   ========================================= */
#mainnav > div > div > div,
#mainnav,
#mainnav > div > div,
#mainnav > div {
    background-color: transparent !important;
    z-index: 99;
    --tw-shadow: 0px 0px 0px !important;
}

.navbar-brand img {
    max-height: 2.5rem;
}

/* تلوين أيقونات الهيدر والسلة */
#mainnav > div > div > div > div.flex.items-center.header-links.w-fit > a > i,
#mainnav > div > div > div > div.flex.items-center.justify-end.header-icons.w-fit > button.header-btn > i,
#cart-button > i {
    color: #c0923f !important;
}

/* =========================================
   3. Banners & Home Slider (البنرات)
   ========================================= */
slider-home-wrapper {
    /* كود فارغ في الأصل تم الإبقاء عليه */
}

.slider-home-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media only screen and (min-width: 520px) {
    .slider-home-wrapper {
        padding-left: 10%;
        padding-right: 10%;
    }
}

/* تنسيق البنر الرئيسي */
#app > div.app-inner.flex.flex-col.min-h-full.overflow-hidden > section.relative.overflow-hidden.mb-12.md\:mb-16.subbanner.new_bnr.subbanner-0.sal-animate > div {
    padding-left: 0rem;
    padding-right: 0rem;
}

/* إخفاء الشرائح المكررة في السلايدر */
a.img-slider.swiper-slide.swiper-slide-duplicate.swiper-slide-duplicate-active.swiper-slide-prev,
a.img-slider.swiper-slide.swiper-slide-duplicate.swiper-slide-duplicate-active.swiper-slide-next {
    opacity: 0;
}

/* ضبط صور السلايدر */
a.img-slider.swiper-slide.swiper-slide-visible.swiper-slide-active.swiper-slide-duplicate-next.swiper-slide-duplicate-prev > img {
    object-fit: contain !important;
    max-height: 100% !important;
}

.subbanner {
    margin-bottom: 2rem;
}

#app > div.app-inner.flex.flex-col.min-h-full.overflow-hidden > section.s-block.s-block--fixed-banner.wide-placeholder.mb-12.md\:mb-16.\!mt-0 {
    margin-bottom: 1rem;
}

.banner--fixed img {
    background: transparent;
}

/* =========================================
   4. Categories (الأقسام)
   ========================================= */
#app > div.app-inner.flex.flex-col.min-h-full.overflow-hidden > section.mb-12.md\:mb-16.cate-section.cate-section-2 {
    margin-bottom: 0rem;
    margin-top: -1rem;
}

.btn-categories {
    color: #c0923f !important;
    font-weight: 800 !important;
    margin-top: 0rem !important;
}

.carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
    padding-left: 8rem;
}

#categories_sec-4 > div {
    margin-top: 1.5rem;
}

.categories_sec {
    margin-bottom: 0rem;
}

.categories_sec tabs-component::part(tab-header) {
    justify-content: center !important;
}

/* =========================================
   5. Products Cards (بطاقات المنتجات)
   ========================================= */
.salla-btns {
    display: none !important;
}

.s-product-card-entry .s-product-card-content {
    background-color: #252525;
}

.s-product-card-entry .cate-name {
    color: white;
    display: none;
}

.s-product-card-entry .s-product-card-price {
    color: white !important;
}

.s-product-card-content {
    align-items: center;
    text-align: center;
}

div.s-product-card-image > a > img {
    border-radius: 2rem;
    padding: .5rem;
}

div.s-product-card-image {
    background: #252525;
}

.s-product-card-vertical {
    border-radius: 1.7rem;
    background: #252525;
    border: 2px solid #c0923f;
}

salla-add-product-button > div > salla-button > button {
    border-radius: 10rem !important;
}

.s-product-card-promotion-title {
    background-color: #c0923f;
}

/* =========================================
   6. Product Page Details (صفحة المنتج)
   ========================================= */
/* خلفية الخيارات والتعليقات */
.s-product-options-wrapper,
.s-comments.s-comments-product {
    background-color: #1e1e1e;
    color: white;
}

/* تنسيق الحاويات الداخلية في صفحة المنتج */
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16.px-2.sal-animate > form > section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none,
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16.px-2.sal-animate > form > section.bg-white.p-5.rounded-md.mb-5 {
    border-radius: 1rem;
}

/* زر "إضافة ملاحظة" */
.btn--collapse:where([dir="rtl"], [dir="rtl"] *) {
    background-color: #c0923f !important;
    border-radius: 5rem;
}

h2 .sicon-sar {
    color: #c0923f;
}

/* =========================================
   7. Reviews / Testimonials (آراء العملاء)
   ========================================= */
.swiper-slide.bg-\[\#FFFFFF\] {
    background-color: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    padding: 25px 20px !important;
    margin-top: 25px !important;
    overflow: visible !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto !important;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.swiper-slide.bg-\[\#FFFFFF\]:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.swiper-slide img.rounded-full {
    width: 70px !important;
    height: 70px !important;
    border: 5px solid #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: absolute !important;
    top: -25px !important;
    right: 20px !important;
    left: auto !important;
    object-fit: cover;
    z-index: 2;
}

.swiper-slide p.font-semibold {
    margin-top: 15px !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    color: #333 !important;
    padding-right: 0 !important;
    font-family: inherit;
}

.swiper-slide p.text-base {
    font-size: 14px !important;
    line-height: 1.6;
    color: #666 !important;
    margin-bottom: 20px !important;
    padding-right: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.swiper-slide .flex.justify-between {
    margin-top: auto;
    border-top: 1px solid #f9f9f9;
    padding-top: 15px;
}

.swiper-slide .flex.justify-between svg {
    width: 30px;
    height: auto;
    opacity: 0.2;
}

/* Media Queries للمراجعات */
@media (min-width: 768px) {
    .swiper-slide.bg-\[\#FFFFFF\] {
        padding: 30px 25px !important;
    }

    .swiper-slide img.rounded-full {
        width: 80px !important;
        height: 80px !important;
        right: 25px !important;
    }

    .swiper-slide p.font-semibold {
        font-size: 18px !important;
        margin-top: 25px !important;
    }

    .swiper-slide p.text-base {
        font-size: 15px !important;
    }
}

@media (min-width: 1024px) {
    .swiper-slide.bg-\[\#FFFFFF\] {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
}

/* إخفاء عنوان سكشن المراجعات */
#app > div.app-inner.flex.flex-col.min-h-full.overflow-hidden > section.container.mb-12.md\:mb-16.sal-animate > h4 {
    display: none;
}

/* =========================================
   8. FAQ (الأسئلة الشائعة)
   ========================================= */
.faq-section {
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
}

div.faq-section.container {
    margin-top: -2rem !important;
    margin-bottom: 1rem !important;
}

section.main-faq-section.main-faq-section-22.mb-12.md\:mb-16.sal-animate > div > div {
    border-radius: 2rem !important;
}

/* =========================================
   9. Footer (تذييل الصفحة)
   ========================================= */
.store-footer {
    border-radius: 3rem 3rem 1rem 0rem;
    background: #0e0f0f;
}

footer > div.store-footer__inner {
    border-top: 3px solid #c0923f;
    border-radius: 3rem 3rem 1rem 0rem;
    background: #0e0f0f;
}

/* إخفاء اسم المتجر في الفوتر */
#app > div.app-inner.flex.flex-col.min-h-full.overflow-hidden > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a.footer-store-name.flex.items-center.m-0.sal-animate > h3 {
    display: none;
}

/* أيقونة واتساب العائمة */
a.wa-s-n {
    bottom: 70px !important;
}

/* =========================================
   10. Miscellaneous (متفرقات)
   ========================================= */
.snipperWrapperBgWhite {
    background-color: #343434 !important;
}

div.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-autoheight.swiper-rtl.swiper-backface-hidden,
div.slide--one-fourth.swiper-slide.swiper-slide-visible {
    border-radius: 2rem;
}

#app > div.app-inner.flex.flex-col.min-h-full.overflow-hidden > section.mb-12.md\:mb-16.featuers_store.featuers_store-18.sal-animate {
    margin-bottom: 1rem;
}

/* =========================================
   تنسيق بطاقة التعليقات (Dark Mode)
   ========================================= */

/* 1. خلفية التعليق الأساسي */
.s-comments-item-wrapper {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important; /* حدود خفيفة */
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
}

/* 2. خلفية رد الأدمن (المتجر) - جعلناها أفتح درجة بسيطة للتمييز */
.s-comments-item-admin .s-comments-item-admin-wrapper {
    background-color: #252525 !important;
    border: 1px solid #383838 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-top: 10px !important;
}

/* 3. تصحيح ألوان النصوص (الاسم ومحتوى التعليق) لتكون بيضاء */
.s-comments-item h3,
.s-comments-item p,
.s-comments-item-content,
.s-comments-item-user-info-name-with-margin {
    color: #ffffff !important;
}

/* 4. لون التاريخ (رمادي فاتح) */
.s-comments-item-timestamp,
.s-comments-item-time {
    color: #aaaaaa !important;
}

/* 5. تلوين أيقونة الرد (السهم) باللون الذهبي الخاص بمتجرك */
.s-comments-item-reply-icon svg {
    fill: #c0923f !important;
    width: 20px !important;
}

/* 6. تحسين شكل الصورة الرمزية (Avatar) */
.s-comments-item-avatar-img {
    border: 2px solid #333 !important;
    background-color: #fff !important; /* في حال كانت الصورة شفافة */
}
.s-comments-item {
  background: #1e1e1e !important;
}
.product-single .s-comments-container .s-comments-item:last-child {
  border-bottom-width: 0px !important;
}

@media (max-width: 767px) {
    img.s-trust-badges-image {
        
      margin-left: 0;
      margin-right: 0;
    }
  salla-trust-badges.s-trust-badges-wrapper.dark.hydrated {
    justify-content: center;
  }
}
.s-reviews-header {
  color: white;
}