/* ==========================================================
   تخصيص عروض سلة - النسخة الاحترافية (رهيبة) 
   ========================================================== */

/* 1. الخلفية الكاملة والإطار الخارجي بتأثير داكن فخم */
salla-offer, 
.s-offer-wrapper, 
.s-offer-card {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    background-color: #0f0f0f !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important; /* إطار خفيف بلمسة ذهبية أو فاخرة */
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
}

/* تأثير عند المرور على بطاقة العرض */
salla-offer .s-offer-card:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-3px);
}

/* 2. تلوين العناوين الرئيسية والفرعية مع خط عصري */
salla-offer .s-slider-block__title h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

salla-offer .s-slider-block__title p {
    color: #b0b0b0 !important;
}

/* 3. تلوين تفاصيل بطاقة العرض الداخلي (عنوان العرض ووصفه والأيقونة) */
salla-offer .s-offer-card-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

salla-offer .s-offer-card-description {
    color: #cccccc !important;
}

salla-offer .s-offer-card-icon i {
    color: #ffcc00 !important; /* جعل الأيقونة تلمع بلون مميز (يمكنك تغيير الأصفر حسب رغبتك) */
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.4));
}

/* 4. تصميم الأقسام المشمولة والزر الفرعي بشكل زجاجي (Glassmorphism) */
salla-offer .s-offer-category-item,
salla-offer .s-offer-categories-toggle span {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 30px !important;
    padding: 6px 14px !important;
    transition: all 0.3s ease !important;
}

/* تأثير تفاعلي جذاب عند المرور على الأزرار والتصنيفات */
salla-offer .s-offer-category-item:hover,
salla-offer .s-offer-categories-toggle span:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.05);
}

/* 5. أسهم التنقل الخاصة بالسلايدر بتصميم أنيق ومضيء */
salla-offer .s-slider-nav-arrow,
salla-offer .s-slider-button-icon svg {
    background-color: #ffffff !important;
    fill: #0f0f0f !important;
    color: #0f0f0f !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

salla-offer .s-slider-nav-arrow:hover {
    background-color: #ffcc00 !important;
    transform: scale(1.1);
}


/* تعديل لون خط المقاسات داخل القائمة المنسدلة */
.product-details__item select.s-form-control {
    color: var(--color-text-main, #2D2D2D) !important;
    background-color: var(--color-bg-main, #FFFFFF) !important;
}

/* لضمان وضوح الخيارات الداخيلة عند فتح القائمة */
.product-details__item select.s-form-control option {
    color: initial !important;
    background-color: initial !important;
}



/* ==========================================================
   التنسيق الآمن والمستقر 100% (CSS فقط بدون تعليق)
   ========================================================== */

/* 1. الخلفية الداكنة الشاملة للقسم */
salla-conditional-offer,
.s-conditional-offer-container,
.s-conditional-offer-title-wrapper,
.s-conditional-offer-progress-container {
    background: #0f0f0f !important;
    background-color: #0f0f0f !important;
}

.s-conditional-offer-container {
    background: linear-gradient(145deg, #141414, #080808) !important;
    border: 1px solid rgba(255, 204, 0, 0.25) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* 2. تحسين العناوين والنصوص لتكون واضحة باللون الأبيض */
.s-conditional-offer-title,
.s-conditional-offer-checkpoint-label,
.s-conditional-offer-checkpoint-label span {
    color: #ffffff !important;
}

.s-conditional-offer-title {
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    text-align: center;
    margin-bottom: 20px !important;
}

/* 3. إلغاء أي أسهم أو عبارات علوية قديمة لتجنب المشاكل */
salla-conditional-offer .s-conditional-offer-item-avatar-content::before,
salla-conditional-offer .s-conditional-offer-item-avatar-content::after {
    display: none !important;
    content: none !important;
}

/* 4. دوائر المراحل الغير نشطة */
.s-conditional-offer-item-avatar-content {
    background-color: #1a1a1a !important;
    color: #666666 !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

/* 5. تمييز دوائر الخصم المحققة والنشطة باللون الذهبي والتوهج */
.s-conditional-offer-item-avatar-content.active,
.s-conditional-offer-active-checkpoint .s-conditional-offer-item-avatar-content {
    background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.7) !important;
    transform: scale(1.1) !important;
}

/* 6. شريط التقدم */
.s-conditional-offer-progress-line-container {
    height: 6px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

.s-conditional-offer-progress-line-active {
    background: linear-gradient(90deg, #ff9900, #ffcc00) !important;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.4) !important;
}



/* ==========================================================
   تنسيق وتحسين بطاقة إرسال الطلب كهدية (List Tile Item)
   ========================================================== */

/* 1. إزالة الخلفية البيضاء وتحويل البطاقة لثيم داكن فاخر */
.s-list-tile-item {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    background-color: #0f0f0f !important;
    border: 1px solid rgba(255, 204, 0, 0.25) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
}

/* تأثير تحفيزي بسيط عند التمرير بالماوس */
.s-list-tile-item:hover {
    border-color: rgba(255, 204, 0, 0.5) !important;
    box-shadow: 0 12px 35px rgba(255, 204, 0, 0.1) !important;
}

/* 2. تحسين العناوين والنصوص لتظهر باللون الأبيض الناصع */
.s-list-tile-item-title,
.s-list-tile-item-title h3,
.s-list-tile-item-title span {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
}

.s-list-tile-item-subtitle,
.s-list-tile-item-subtitle div {
    color: #b3b3b3 !important;
    font-size: 0.95rem !important;
    margin-top: 6px !important;
}

/* 3. تلوين أيقونات SVG باللون الذهبي الجذاب */
.s-list-tile-item svg path {
    fill: #ffcc00 !important;
}

/* 4. إعادة تصميم زر "أرسلها كهدية" بشكل محفز وأنيق */
.s-gifting-widget-action .s-button-element {
    background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
    border: none !important;
    border-radius: 30px !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* نص وحجم الأيقونة داخل الزر */
.s-gifting-widget-action .s-button-text,
.s-gifting-widget-action .s-button-text span {
    color: #000000 !important;
    font-weight: 800 !important;
}

.s-gifting-widget-action .s-button-element svg path {
    fill: #000000 !important; /* جعل أيقونة الهدية داخل الزر باللون الأسود لتوضيحها فوق الذهبي */
}

/* تأثير التمرير على الزر */
.s-gifting-widget-action .s-button-element:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.5) !important;
}




/* ==========================================================
   تنسيق قسم آراء العملاء والتقييمات (Testimonials)
   ========================================================== */

/* 1. إجبار الحاوية الرئيسية على خلفية داكنة مع إطار ذهبي ناعم */
div:has(> .s-comments-testimonials),
.w-full.lg\:w-10\/12.bg-white,
salla-comments,
.s-comments-testimonials {
    background: #0f0f0f !important;
    background-color: #0f0f0f !important;
}

div.w-full.lg\:w-10\/12.bg-white {
    background: linear-gradient(145deg, #141414, #080808) !important;
    border: 1px solid rgba(255, 204, 0, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* 2. تصحيح ألوان العناوين الرئيسية وقائمة الترتيب Dropdown */
h1.font-bold,
.s-comments-header,
.s-comments-count-label,
label[for="testimonials-filter"] {
    color: #ffffff !important;
}

#testimonials-filter {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
}

/* 3. تنسيق بطاقات التعليقات الفردية */
salla-comment-item,
.s-comments-item-wrapper {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 4. أسماء العملاء، التواريخ، ونصوص التقييمات */
.s-comments-item-user-info-name-with-margin,
.s-comments-item-content,
.s-comments-item-content p {
    color: #ffffff !important;
}

.s-comments-item-timestamp,
.s-comments-item-has-order-check-text {
    color: #a0a0a0 !important;
}

/* 5. تمييز النجوم باللون الذهبي البارز */
.s-rating-stars-selected svg {
    fill: #ffcc00 !important;
}

/* 6. تنسيق رد الإدارة (أصالة السدو) بتمييز أنيق */
.s-comments-item-admin-wrapper {
    background-color: rgba(255, 204, 0, 0.05) !important;
    border-right: 3px solid #ffcc00 !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin-top: 10px !important;
}

.s-comments-item-admin-wrapper .s-comments-item-user-info-name-with-margin {
    color: #ffcc00 !important;
    font-weight: 800 !important;
}

.s-comments-item-admin-wrapper .s-comments-item-content p {
    color: #e0e0e0 !important;
}

/* 7. أيقونة الصح والرد */
.s-comments-item-has-order-check-icon svg,
.s-comments-item-reply-icon svg {
    fill: #ffcc00 !important;
}