/* ==================================================
   تعديل حجم بطاقة المنتج وصورة العرض (VDOX Layout)
================================================== */

/* 1. هيكل البطاقة الخارجي - تكبير الطول */
.product-entry {
    display: flex !important;
    flex-direction: column !important;
    /* هذا الرقم يتحكم في أقل طول للبطاقة - زد الرقم ليصبح الكارت أطول */
    min-height: 450px !important; 
    background-color: #0d0d0d !important; /* خلفية سوداء */
    border: 1px solid #222 !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

/* 2. منطقة الصورة - جعلها تحتل المساحة الأكبر */
.product-entry__image {
    /* الصورة تأخذ 75% من طول البطاقة بالكامل */
    height: 75% !important; 
    width: 100% !important;
    position: relative !important;
    background-color: #141414 !important; /* لون خلفية الصورة */
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important; /* توسيط عمودي */
    justify-content: center !important; /* توسيط أفقي */
    padding: 20px !important; /* مسافة داخلية عشان المنتج ما يلزق في الحواف */
}

/* 3. تنسيق الصورة نفسها (المنتج) */
.product-entry__image img {
    /* نجبر الصورة تأخذ كامل الارتفاع المتاح لها لتظهر كبيرة */
    height: 100% !important; 
    width: auto !important; /* العرض يتعدل تلقائي عشان الصورة ما تتمطط */
    object-fit: contain !important; /* تضمن ظهور المنتج كاملاً بدون قص */
    transition: transform 0.5s ease !important;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)) !important; /* ظل للمنتج نفسه ليعطيه عمق */
}

/* عند مرور الماوس: تكبير المنتج (Zoom) */
.product-entry:hover .product-entry__image img {
    transform: scale(1.15) !important;
}

/* 4. منطقة النصوص (الاسم والسعر) أسفل الصورة */
.product-entry__content {
    height: 25% !important; /* تأخذ المساحة المتبقية */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 15px !important;
    text-align: center !important;
    background-color: #0d0d0d !important;
    border-top: 1px solid #222 !important;
}

.product-entry__title a {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* 5. زر الإضافة للسلة - تعديل مكانه ليظهر فوق الصورة بشكل جمالي */
/* (اختياري: إذا كنت تريد الزر عائماً) */
.s-add-to-cart-btn {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    opacity: 0 !important; /* مخفي افتراضياً */
    transition: all 0.3s ease !important;
}

/* يظهر الزر عند مرور الماوس فوق منطقة الصورة */
.product-entry:hover .s-add-to-cart-btn {
    opacity: 1 !important;
    bottom: 20px !important;
}




/* --- 1. خلفية الموقع بالكامل (أسود ملكي) --- */
body, .app-inner, .s-block, section, footer {
    background-color: #050505 !important;
    background-image: radial-gradient(circle at 50% 50%, #1a1500 0%, #050505 50%) !important;
}

/* --- 2. تحويل النصوص والعناوين إلى الذهبي المشع --- */
h1, h2, h3, h4, .s-block__title, .product-title, .product-entry__title {
    color: #ddca81 !important;
    text-shadow: 0 0 15px rgba(221, 202, 129, 0.4) !important; /* توهج للنص */
    font-weight: bold !important;
}

/* --- 3. تصميم بطاقات المميزات (الموجودة في الكود الخاص بك) --- */
.s-block--features__item {
    background: rgba(20, 20, 20, 0.6) !important;
    border: 1px solid #ddca81 !important;
    border-radius: 15px !important;
    box-shadow: 0 0 10px rgba(221, 202, 129, 0.1) !important;
    transform: perspective(1000px) rotateX(0deg);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    padding: 25px !important;
}

/* حركة عند مرور الماوس على المميزات */
.s-block--features__item:hover {
    background: linear-gradient(135deg, #000 0%, #332b00 100%) !important;
    box-shadow: 0 10px 30px rgba(221, 202, 129, 0.3) !important;
    transform: translateY(-10px) scale(1.05) !important;
    border-color: #fff0a7 !important;
}

.feature-icon i {
    font-size: 3rem !important;
    color: #fff0a7 !important;
    filter: drop-shadow(0 0 8px #ddca81);
}

/* --- 4. القائمة العلوية (Header) تطفو وتلمع --- */
.store-header {
    background: rgba(5, 5, 5, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, transparent, #ddca81, transparent) 1 !important; /* خط ذهبي متدرج أسفل القائمة */
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
}

/* --- 5. الأزرار (تأثير النيون) --- */
.btn, button, .s-add-to-cart-btn {
    border-radius: 50px !important; /* أزرار دائرية الحواف */
    background: transparent !important;
    border: 2px solid #ddca81 !important;
    color: #ddca81 !important;
    box-shadow: 0 0 5px #ddca81, inset 0 0 5px #ddca81 !important;
    transition: 0.3s ease !important;
    font-weight: 900 !important;
}

.btn:hover, button:hover, .s-add-to-cart-btn:hover {
    background: #ddca81 !important;
    color: #000 !important;
    box-shadow: 0 0 20px #ddca81, 0 0 40px #ddca81 !important; /* توهج قوي جداً عند اللمس */
}

/* --- 6. تأثير الصور والمنتجات --- */
img {
    transition: filter 0.5s ease !important;
}
/* تغميق الصور قليلاً لتركيز النظر، وعند اللمس تضيء */
.product-entry__image img, .banner img {
    filter: brightness(0.9) !important;
}
.product-entry:hover img, .banner:hover img {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(221, 202, 129, 0.5)) !important;
}

/* --- 7. آراء العملاء (شكل عصري) --- */
.s-reviews-testimonial {
    background: linear-gradient(180deg, #1a1a1a 0%, #000 100%) !important;
    border: 1px solid #333 !important;
    border-right: 4px solid #ddca81 !important; /* خط ذهبي جانبي */
}



/* =========================================
   تعديل صفحة المنتج - VDOX Royal Edition
========================================= */

/* 1. إزالة الخلفيات البيضاء وتحويلها لداكنة */
body.product-single, .product-single .app-inner, 
.product-single .bg-white, .product-single .sidebar, 
.product-single .main-content {
    background-color: #050505 !important;
    color: #e0e0e0 !important;
}

/* 2. صندوق تفاصيل المنتج (يمين الشاشة) - تأثير الزجاج */
.product-single .main-content {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(221, 202, 129, 0.15) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.5) !important;
    margin-top: 10px !important;
}

/* 3. عنوان المنتج */
h1.text-xl, h1 {
    color: #ddca81 !important;
    text-shadow: 0 0 15px rgba(221, 202, 129, 0.3) !important;
    font-size: 1.6rem !important;
    line-height: 1.6 !important;
    border-bottom: 1px solid #333 !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

/* 4. السعر (مميز جداً) */
.total-price {
    color: #fff0a7 !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    text-shadow: 0 0 20px rgba(221, 202, 129, 0.5) !important;
}
.before-price {
    color: #666 !important; /* لون السعر القديم باهت */
}

/* 5. زر "إضافة للسلة" - العنصر الأهم */
salla-add-product-button, .sticky-product-bar__btn {
    background: linear-gradient(90deg, #ddca81 0%, #b7a45b 50%, #ddca81 100%) !important;
    background-size: 200% auto !important;
    color: #000 !important;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(221, 202, 129, 0.4) !important;
    transition: 0.5s !important;
    animation: shine 3s infinite linear !important; /* لمعان مستمر */
}
salla-add-product-button:hover, .sticky-product-bar__btn:hover {
    box-shadow: 0 0 40px rgba(221, 202, 129, 0.7) !important;
    background-position: right center !important;
    transform: scale(1.02) !important;
}

/* 6. تحسين عرض الصور (Slider) */
.details-slider {
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid #333 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
.swiper-slide img {
    background-color: #111 !important; /* خلفية سوداء للصور الشفافة */
}

/* 7. تنسيق الوصف والنقاط (bullets) */
.product__description {
    color: #ccc !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
}
.product__description strong {
    color: #fff !important;
}
/* تحويل النقاط العادية إلى أيقونات ذهبية */
.product__description ul li, .product__description ol li {
    list-style: none !important;
    position: relative !important;
    padding-right: 25px !important;
    margin-bottom: 10px !important;
}
.product__description ul li::before, .product__description ol li::before {
    content: '✦'; /* نجمة ذهبية */
    color: #ddca81 !important;
    position: absolute !important;
    right: 0 !important;
    font-size: 1.2rem !important;
}

/* 8. الشريط السفلي في الجوال (Sticky Bar) */
.sticky-product-bar {
    background: #1a1a1a !important;
    border-top: 2px solid #ddca81 !important;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.5) !important;
}
.sticky-product-bar label {
    color: #ddca81 !important;
}

/* 9. تأثير اللمعان للحركة */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}
/* ==================================================
   إصلاح مشكلة تداخل القوائم مع بطاقة المنتج
================================================== */

/* 1. رفع مستوى الهيدر (الشريط العلوي) ليكون فوق كل محتوى الموقع */
.store-header, header, .top-navbar {
    position: relative !important;
    z-index: 9999999 !important; /* رقم عالي جداً لضمان البقاء في الأعلى */
}

/* 2. رفع مستوى القائمة المنسدلة لحساب المستخدم */
salla-user-menu, .s-user-menu, .s-dropdown, .s-dropdown-menu {
    z-index: 99999999 !important; /* أعلى من الهيدر نفسه */
    position: relative !important;
}

/* 3. خفض مستوى بطاقة المنتج وتفاصيلها لتكون خلف القوائم */
.product-single .main-content, 
.product-single .sidebar,
.product-entry {
    z-index: 1 !important; /* رقم منخفض */
    position: relative !important;
}

/* 4. في حالة وجود عناصر منبثقة (Popups) */
.salla-modal, .modal {
    z-index: 999999 !important;
}


/* =========================================================
   إصلاح تداخل التعليقات + تحويلها للوضع الليلي الفخم
========================================================= */

/* 1. إبعاد قسم التعليقات عن بطاقة المنتج (حل التداخل) */
salla-comments, section.s-comments-product {
    margin-top: 80px !important; /* مسافة أمان كبيرة بين المنتج والتعليقات */
    padding-top: 40px !important;
    display: block !important;
    position: relative !important;
    z-index: 5 !important; /* لضمان قابلية الضغط عليها */
    clear: both !important; /* منع أي عناصر عائمة من التداخل */
}

/* 2. تحويل خلفية التعليقات من الأبيض إلى الأسود الشفاف */
salla-comments, .s-comments-product, .comment-entry {
    background-color: transparent !important; /* إزالة الخلفية البيضاء */
}

/* 3. تنسيق مربع الكتابة (textarea) ليكون داكناً */
textarea, input[type="text"], .s-form-control {
    background-color: #111 !important; /* خلفية سوداء */
    color: #fff !important; /* نص أبيض */
    border: 1px solid #333 !important; /* إطار رمادي غامق */
    border-radius: 10px !important;
}

textarea:focus, input:focus {
    border-color: #ddca81 !important; /* إطار ذهبي عند الكتابة */
    box-shadow: 0 0 10px rgba(221, 202, 129, 0.2) !important;
}

/* 4. زر "إرسال" (التعليق/السؤال) */
.s-comments-product button[type="submit"], .btn--submit {
    background: #ddca81 !important;
    color: #000 !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 20px !important;
}

/* 5. العناوين داخل قسم التعليقات (مثل "شاركنا سؤالك") */
.s-comments-product h3, .s-comments-product h2 {
    color: #ddca81 !important;
}