/* =========================================================
   Dark Purple Theme (Salla) - Store: 3nbrtv [V 12.0 - Ultimate Masterpiece]
   ========================================================= */

/* ==========================================
   1. المتغيرات والخلفية الأساسية للمتجر
   ========================================== */
:root, :host {
    --brand: #8b5cf6 !important;
    --brand2: #a78bfa !important;
    --bg: #05040a !important;
    --card: rgba(255,255,255,.06) !important;
    --card2: rgba(255,255,255,.08) !important;
    --ink: #ffffff !important;
    --muted: rgba(255,255,255,.72) !important;
    --shadow: 0 16px 40px rgba(0,0,0,.45) !important;
    --radius: 18px !important;
    --bg-white: #05040a !important;
    --drawer-bg: #05040a !important;
    --text-main: #ffffff !important;
    --tw-bg-opacity: 1 !important;
}

body {
    background: radial-gradient(1200px 600px at 50% -10%, rgba(139,92,246,.25), transparent 55%),
                radial-gradient(900px 500px at 20% 20%, rgba(167,139,250,.12), transparent 60%),
                var(--bg) !important;
    color: var(--ink) !important;
}
a { color: var(--ink); }

/* ==========================================
   2. الهيدر، السلة، وشريط البحث
   ========================================== */
#mainnav, .top-navbar { position: sticky !important; top: 0 !important; z-index: 999 !important; background: rgba(10, 8, 16, .72) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.10); }
#mainnav a, .top-navbar a, .s-cart-summary-total { color: var(--ink) !important; font-weight: 700;}
.navbar-brand img, .navbar-brand svg { height: var(--logo-height) !important; width: auto !important; }
salla-search, .s-search-results, .s-search-container { z-index: 999999 !important; }
.s-search-results { background-color: var(--bg) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important;}

/* أيقونة السلة (بالبنفسجي الفاتح) */
.s-cart-summary-icon svg, .s-cart-summary-icon i, .header-btn__icon, .cart-icon svg { color: #a78bfa !important; fill: #a78bfa !important; stroke: #a78bfa !important; }

/* ==========================================
   3. القوائم (قائمة الهمبرقر وقائمة العميل)
   ========================================== */
salla-mobile-menu, .s-drawer, #mobile-menu, .s-mobile-menu-overlay { z-index: 999999 !important; }

/* قائمة الهمبرقر بالبنفسجي الليلي وإصلاح العناوين */
html body .main-menu, html body .mm-spn, html body .mm-spn--open, html body .mm-spn.mm-spn--light, salla-mobile-menu .bg-white, .s-mobile-menu-content, aside, .s-drawer__content, salla-mobile-menu::part(drawer) { 
    background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; background-color: #1e0a3c !important; border-right: 1px solid rgba(255,255,255,0.1) !important; 
}
html body .main-menu li a, html body .main-menu li span, html body .mm-spn a, html body .mm-spn span, html body .main-menu li a.text-gray-500 { color: #ffffff !important; }
html body .mm-spn::before, html body .mm-spn::after, html body .mm-spn--title, html body .mm-spn.mm-spn--light { color: #ffffff !important; }

/* قائمة العميل المنسدلة */
salla-user-menu, .s-user-menu-wrapper, .s-user-menu-trigger-slot, .s-user-menu-trigger, .s-user-menu-avatar-wrap, .s-header__user-avatar { background: transparent !important; border: none !important; box-shadow: none !important; }
.s-user-menu-dropdown, .s-user-menu-dropdown-header, .s-user-menu-dropdown-list, .s-user-menu-dropdown-item { background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; }
.s-user-menu-dropdown *, .s-user-menu-trigger-content * { color: #ffffff !important; fill: #ffffff !important; }
.s-user-menu-dropdown-item-link:hover { background-color: rgba(139, 92, 246, 0.3) !important; border-radius: 8px !important; }

/* تثبيت ارتفاع القائمة بالجوال */
@media (max-width: 767px) { html body .s-user-menu-dropdown { top: 60px !important; position: absolute !important; right: 0 !important; } }

/* ==========================================
   4. كروت المنتجات وترتيب الأقسام (الفلتر)
   ========================================== */
section.s-block { margin-top: 14px !important; margin-bottom: 14px !important; }
html body .s-product-card-entry, html body .s-product-card, html body .s-product-summary, html body .product-block, html body .s-product-card-footer { 
    background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; border-radius: 22px !important; 
}
.s-button-element:not(:disabled):not([loading]), .s-button-btn { background: linear-gradient(135deg, var(--brand), var(--brand2)) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; }
.s-product-card-content-title a { color: var(--ink) !important; font-weight: 800; }
salla-pricing *, .s-pricing-price *, .product-price, .s-price, .s-product-price, .s-product-card-price * { color: #a78bfa !important; font-weight: 900; }

/* نسف اللون الأبيض من الصناديق العادية */
.bg-white, .bg-gray-50, .s-box, .s-panel, salla-user-profile .bg-white, select option, .s-dropdown-menu, .dropdown-menu, salla-bottom-sheet .s-bottom-sheet__content, salla-modal .s-modal-content { background: var(--bg) !important; border-color: rgba(255,255,255,0.1) !important; color: #ffffff !important; }
.text-gray-900, .text-gray-800, .text-black, salla-user-profile * { color: #ffffff !important; }

/* قائمة ترتيب المنتجات (الفلتر) وتبييض النصوص المجاورة */
html body select#product-filter, html body select.form-input { background-color: #1e0a3c !important; background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; color: #ffffff !important; border: 1px solid rgba(139, 92, 246, 0.4) !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important; }
html body select#product-filter option, html body select.form-input option { background-color: #1a1025 !important; color: #ffffff !important; }
html body .s-products-list-header span, html body .s-products-list-header i, html body .s-products-list-header button { color: #ffffff !important; }

/* ==========================================
   5. صفحة المنتج: الخيارات، المدة، والكمية
   ========================================== */
/* توحيد الخلفيات بالبنفسجي الليلي */
html body salla-product-options, html body salla-product-options > div, html body .s-product-options-wrapper, html body salla-quantity-input, html body salla-quantity-input > div, html body salla-comment-form, html body salla-comment-form > div, html body .s-comment-form-wrapper, html body .s-product-form .bg-white, html body .s-product-options-wrapper .bg-white, html body salla-product-options .bg-white, html body salla-quantity-input .bg-white, html body .s-quantity-input-wrapper .bg-white, html body .s-box.bg-white, html body salla-comment-form .bg-white, html body .s-comment-form-wrapper .bg-white {
    background-color: #1e0a3c !important; background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; border-radius: 16px !important;
}

/* اختراق مكونات سلة (Shadow DOM) */
html body salla-product-options::part(container), html body salla-product-options::part(wrapper), html body salla-quantity-input::part(container), html body salla-quantity-input::part(wrapper), html body salla-comment-form::part(container), html body salla-comment-form::part(wrapper) {
    background-color: #1e0a3c !important; background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; border-radius: 16px !important;
}

/* القوائم المنسدلة للخيارات (مثل: سنة / مدى الحياة) */
html body select.s-form-control, html body .s-product-options-wrapper select, html body .s-product-form select { background-color: #1e0a3c !important; background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; color: #ffffff !important; border: 1px solid rgba(139, 92, 246, 0.4) !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important; padding: 10px !important; }
html body select.s-form-control option, html body .s-product-options-wrapper select option { background-color: #1a1025 !important; color: #ffffff !important; }

/* تبييض العناوين والكلمات الرمادية (مثل: المدة) */
html body .s-product-options-wrapper label, html body .s-product-options-title, html body .s-product-options-wrapper .text-gray-500, html body .s-product-form label, html body .s-product-form .text-gray-500, html body .s-product-options-wrapper span { color: #ffffff !important; font-weight: bold !important; }

/* إخفاء البياض الداخلي اللي يعاند في الأزرار العادية */
html body salla-product-options button, html body .s-product-options-option, html body .s-option { background: #1a1025 !important; border: 1px solid rgba(139, 92, 246, 0.4) !important; color: #fff !important; }
html body salla-product-options button .bg-white, html body .s-product-options-option .bg-white, html body salla-product-options button > div { background: transparent !important; background-color: transparent !important; }
html body salla-product-options button.btn--active, html body .s-product-options-option.selected, html body .s-option.active { background: #8b5cf6 !important; border-color: #8b5cf6 !important; color: #fff !important; }

/* تلوين أزرار زايد وناقص في الكمية وتلوين الرقم */
html body salla-quantity-input button { color: #a78bfa !important; background: transparent !important; }
html body salla-quantity-input input, html body .s-quantity-input-input { color: #ffffff !important; background: transparent !important; }

/* مربع كتابة التقييم (ليكون النص واضحاً) */
html body salla-comment-form textarea, html body .s-comment-form-wrapper textarea, html body div.s-comments textarea { background-color: #1a1025 !important; color: #ffffff !important; border: 1px solid rgba(139, 92, 246, 0.4) !important; border-radius: 10px !important; }
html body salla-comment-form textarea:focus { background-color: #2a1b3d !important; border-color: #8b5cf6 !important; outline: none !important; }

/* ==========================================
   6. أسهم تحريك الصور (سلايدر السايبر بانك)
   ========================================== */
html body .s-gallery-navigation-container button, html body .s-slider-navigation-container button, html body .s-slider-navigation > button, html body .s-gallery-navigation > button, html body [class*="s-slider-"] > button { background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; background-color: transparent !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; border-radius: 50% !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important; color: #fff !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
html body .s-gallery-navigation-container button svg, html body .s-slider-navigation-container button svg, html body .s-slider-navigation > button svg, html body .s-gallery-navigation > button svg, html body [class*="s-slider-"] > button svg { color: #a78bfa !important; fill: #a78bfa !important; stroke: #a78bfa !important; width: 24px !important; height: 24px !important; }
html body .s-gallery-navigation-container button:hover, html body .s-slider-navigation-container button:hover, html body .s-slider-navigation > button:hover, html body .s-gallery-navigation > button:hover { box-shadow: 0 0 15px rgba(139, 92, 246, 0.6) !important; border-color: rgba(139, 92, 246, 0.5) !important; }

/* ==========================================
   7. التقييمات وآراء العملاء ومزايا المتجر
   ========================================== */
salla-comments, salla-comments.hydrated, salla-comments[type="product"], div.s-comments, salla-reviews, .s-reviews-list, .s-comments-list, .s-review-box, .s-comment, .comment-item, .s-reviews-testimonial__inner, .s-reviews-summary-wrapper, html body .s-reviews-testimonial__inner, html body .s-comments-product, html body .s-comments-container, html body .s-comments-item-wrapper, salla-comment-item::part(inner), salla-comment-item::part(wrapper), salla-reviews-summary::part(container) {
    background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; border-radius: 16px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
.s-block--testimonials, .s-reviews-testimonial, .s-reviews-testimonial .bg-white, div.s-comments [class*="bg-"], salla-reviews .bg-white, .s-reviews-testimonial__avatar { background: transparent !important; border: none !important; box-shadow: none !important; }
.s-comments-title, h2.s-comments-title, .s-reviews-summary-average { color: #ffffff !important; font-size: 14px !important; }
.s-rate-stars .s-star-icon, salla-rating-stars::part(star) { color: #8b5cf6 !important; fill: #8b5cf6 !important; }

/* مزايا المتجر */
.s-block--features__item { background: linear-gradient(145deg, #1e0a3c, #0a0415) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; border-radius: 16px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important; }
.s-block--features__item h2 { color: #ffffff !important; font-size: 11px !important; font-weight: bold !important; margin-bottom: 5px !important; }
.s-block--features__item p { color: rgba(255, 255, 255, 0.7) !important; line-height: 1.5 !important; }
.s-block--features__item .feature-icon i, .s-block--features__item .feature-icon { color: #a78bfa !important; background: transparent !important; }
.s-block--features, .s-block--features-wrapper { background-color: transparent !important; }

/* ==========================================
   8. إعدادات حجم الخطوط
   ========================================== */
salla-comments *, div.s-comments *, .s-comment-name, .s-comment-date, .s-comment-content, .s-reviews-testimonial__text p, .s-reviews-testimonial__info h2, .s-comments-item-content p, .s-comments-item-user-info-name, .s-comments-item-timestamp, .s-reviews-summary-count, .s-comments-count-label, salla-comment-item::part(name), salla-comment-item::part(content), salla-comment-item::part(date) {
    color: #ffffff !important; font-size: 13px !important; line-height: 1.6 !important;
}
@media (min-width: 768px) {
    html body .s-comments-item-content p, html body .s-comments-item-user-info-name, html body .s-comments-item-timestamp, html body .s-reviews-testimonial__text p, html body .s-reviews-testimonial__info h2, html body .s-reviews-summary-count { 
        font-size: 14px !important; line-height: 1.6 !important; 
    }
}