/* Add custom CSS styles below */ 
.s-product-card-content-title {
    COLOR: #ffffff;
    font-size: .875rem;
    line-height: 1.25rem;
    transition-duration: .2s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.s-product-card-price, .s-product-card-starting-price h4 {
    color: #ffffff;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.s-button-element:not(:disabled):not([loading]) {
    color: #ff0000f1;
    pointer-events: auto;
    border: 1px solid #0642eb !important;
    background-color: transparent !important;
    border-radius: 8px !important;
}

.s-product-card-content salla-add-product-button .s-button-text {
    color: #ffffff;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 24px !important;
    align-items: center;
    display: flex;
    gap: .25rem;
    justify-content: center;
}

.s-product-card-category {
    background-color: rgba(21, 94, 232, 0.18) !important;
    color: #5FA8FF !important;
    border: 1px solid #155EE8 !important;
    border-radius: 5px !important;
    padding: 4px 12px !important;
}

.dev-signature-link {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
    display: inline-block !important;
    background: linear-gradient(45deg, #ffffff, #3467c6, #a628e3);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* تصميم مربع الوصف - تأثير ثري دي (3D) وألعاب نيون (داخل صفحة المنتج فقط) */
.product-details .product-detials__desc,
.product-details .salla-product-details__description,
.product-details .product-details-content,
.product-details .product__description,
.product-details .article--product-details,
.product-details div#description,
.product-details .product-description-wrapper,
.product-details .product-details .content,
.product-details salla-product-description,
.product-details .product-description-container {
    background: #0f1016 !important; 
    border: 2px solid transparent !important;
    background-image: linear-gradient(#0f1016, #0f1016), linear-gradient(135deg, #004FF9 0%, #FF0033 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 16px !important;
    box-shadow: 
        -15px 0px 30px rgba(0, 79, 249, 0.35), 
        15px 0px 30px rgba(255, 0, 51, 0.35), 
        inset 0px 5px 15px rgba(0, 0, 0, 0.9), 
        inset 0px -5px 15px rgba(255, 255, 255, 0.05) !important;
    padding: 30px !important;
    display: block !important;
    margin: 35px 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.product-details .product-detials__desc *,
.product-details .salla-product-details__description *,
.product-details .product-details-content *,
.product-details .product__description *,
.product-details .article--product-details *,
.product-details div#description *,
.product-details .product-description-wrapper *,
.product-details .product-details .content *,
.product-details salla-product-description *,
.product-details .product-description-container * {
    color: #ffffff !important;
    background-color: transparent !important;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.8) !important;
    line-height: 1.8 !important;
}

/* تصميم المستطيل الصغير للأزرار داخل صفحة المنتج فقط (مع حماية الصفحة الرئيسية) */
.product-details .product-details__actions > div,
.product-details .salla-cart-form-container > div,
.product-details .product-options-wrapper {
    background-color: #ffffff !important;
    border: 3px solid transparent !important;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #004FF9 0%, #FF0033 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: 
        -8px 0px 15px rgba(0, 79, 249, 0.4),      
        8px 0px 15px rgba(255, 0, 51, 0.4) !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.product-details .salla-cart-form button:not([class*="apple"]),
.product-details .btn--buy,
.product-details button[name="buy_now"],
.product-details .btn--add-to-cart,
.product-details salla-quantity-input {
     box-shadow: none !important;
     border: 1px solid #ddd !important;
}

/* 1. إزالة البرواز الخارجي الكبير الذي كان يزعج العميل */
.product-details__actions,
.product-form__actions,
.salla-product-actions,
.salla-cart-form-container,
div:has(> salla-add-product-button),
form.product-form {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. تصميم المستطيل الصغير (الحاوية المباشرة للأزرار) بتأثير النيون الأزرق والأحمر */
/* نستهدف الحاوية الداخلية التي تجمع الأزرار معاً */
.product-details__actions > div,
.salla-cart-form-container > div,
.product-options-wrapper,
div.flex.items-center.gap-2 /* محاولة استهداف كلاسات Tailwind الشائعة في سلة لهذه الحاوية */ {
    
    background-color: #ffffff !important; /* خلفية المستطيل الصغير بيضاء */
    
    /* إطار شفاف لتطبيق التدرج */
    border: 3px solid transparent !important; 
    
    /* تدرج لوني للإطار: أبيض للداخل، وأزرق-أحمر للإطار */
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #004FF9 0%, #FF0033 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    
    border-radius: 12px !important;
    padding: 15px !important; /* مسافة داخلية أقل من المستطيل الكبير */
    
    /* توهج نيون أزرق وأحمر على المستطيل الصغير */
    box-shadow: 
        -8px 0px 15px rgba(0, 79, 249, 0.4),      
        8px 0px 15px rgba(255, 0, 51, 0.4) !important;
        
    margin-bottom: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}
/* 1. تصميم مربع الوصف النيون الأصلي (كما هو وبأفضل شكل) */
.product-detials__desc,
.salla-product-details__description,
.product-details-content,
.product__description,
.article--product-details,
div#description,
.product-description-wrapper,
.product-details .content,
salla-product-description,
.product-description-container {
    background: #0f1016 !important; 
    border: 2px solid transparent !important;
    background-image: linear-gradient(#0f1016, #0f1016), linear-gradient(135deg, #004FF9 0%, #FF0033 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 16px !important;
    box-shadow: 
        -15px 0px 30px rgba(0, 79, 249, 0.35), 
        15px 0px 30px rgba(255, 0, 51, 0.35),  
        inset 0px 5px 15px rgba(0, 0, 0, 0.9),  
        inset 0px -5px 15px rgba(255, 255, 255, 0.05) 
        !important;
    padding: 30px !important;
    display: block !important;
    margin: 35px 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.product-detials__desc *,
.salla-product-details__description *,
.product-details-content *,
.product__description *,
.article--product-details *,
div#description *,
.product-description-wrapper *,
.product-details .content *,
salla-product-description *,
.product-description-container * {
    color: #ffffff !important;
    background-color: transparent !important;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.8) !important;
    line-height: 1.8 !important;
}

/* 2. جعل أزرار التبويبات (التفاصيل والتقييمات) تأخذ نفس إطار النيون الأسود الفخم منفصلة ومتناسقة */
.tabs.tabs__product {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.tabs.tabs__product .tab-trigger {
    background: #0f1016 !important;
    border: 2px solid transparent !important;
    background-image: linear-gradient(#0f1016, #0f1016), linear-gradient(135deg, #004FF9 0%, #FF0033 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 12px !important;
    padding: 12px 25px !important;
    color: #ffffff !important;
    box-shadow: 0px 0px 15px rgba(0, 79, 249, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* الزر النشط (Active) بيكون متوهج وواضح */
.tabs.tabs__product .tab-trigger.is-active {
    background-image: linear-gradient(135deg, #004FF9 0%, #FF0033 100%), linear-gradient(135deg, #004FF9 0%, #FF0033 100%) !important;
    box-shadow: 0px 0px 20px rgba(255, 0, 51, 0.5) !important;
}

.tabs.tabs__product .tab-trigger * {
    color: #ffffff !important;
    background: transparent !important;
}


/* =========================================
   Wishlist - Super Store
   ========================================= */

/* =========================================
   1. الوضع الطبيعي - مخفي بالكامل
   ========================================= */

.s-product-card .s-product-card-wishlist {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;

    transform: scale(0.7);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease !important;

    z-index: 50 !important;
}


/* =========================================
   2. عند الوقوف على كارت المنتج
   ========================================= */

.s-product-card:hover .s-product-card-wishlist {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    /* خلفية القلب */
    background: #071A3D !important;
    background-color: #071A3D !important;

    /* إطار أزرق */
    border: 2px solid #00C2FF !important;
    border-radius: 10px !important;

    /* تكبير مساحة الخلفية حول القلب */
    padding: 9px !important;

    /* إضاءة وظل */
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.75),
        0 0 8px rgba(0, 194, 255, 0.9),
        0 0 18px rgba(0, 194, 255, 0.55) !important;

    transform: scale(1);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}


/* =========================================
   3. القلب - أزرق نيون
   ========================================= */

.s-product-card-wishlist svg {
    color: #00C2FF !important;
    stroke: #00C2FF !important;

    fill: none !important;

    filter:
        drop-shadow(0 0 2px #FFFFFF)
        drop-shadow(0 0 5px #00C2FF)
        drop-shadow(0 0 10px #00C2FF) !important;

    transition:
        color 0.2s ease,
        stroke 0.2s ease,
        filter 0.2s ease,
        transform 0.2s ease !important;
}


/* =========================================
   4. عند الوقوف على القلب نفسه
   ========================================= */

.s-product-card-wishlist:hover {
    background: #0B2855 !important;
    background-color: #0B2855 !important;

    border-color: #FFD43B !important;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.85),
        0 0 10px rgba(255, 212, 59, 0.95),
        0 0 22px rgba(255, 212, 59, 0.65) !important;

    transform: scale(1.08);
}


/* =========================================
   5. القلب عند Hover - ذهبي مضيء
   ========================================= */

.s-product-card-wishlist:hover svg {
    color: #FFD43B !important;
    stroke: #FFD43B !important;

    /* لو الأيقونة تسمح بالـ fill يظهر القلب ممتلئًا */
    fill: #FFD43B !important;

    filter:
        drop-shadow(0 0 2px #FFFFFF)
        drop-shadow(0 0 5px #FFD43B)
        drop-shadow(0 0 10px #FFD43B)
        drop-shadow(0 0 18px rgba(255, 212, 59, 0.9)) !important;

    transform: scale(1.12);
}

/* لون عنوان المنتج عند الوقوف عليه */
.s-product-card-content-title a:hover,
.s-product-card-content-title:hover {
    color: #00C2FF !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* لو كان الـHover على النص نفسه */
.s-product-card-content-main a:hover {
    color: #00C2FF !important;
    background-color: transparent !important;
}