/* ======================================================
   Pixel Store - The Ultimate Luxury Master CSS
   Style: Dark Tech, Glassmorphism, Animated Neon
   Colors: Orange (#F7931E) & Purple (#662D91)
====================================================== */

/* =========================================
   1. الإعدادات الأساسية (الجذر، الخطوط، الخلفية)
========================================= */
:root {
  --u-orange: #F7931E;
  --u-purple: #662D91;
  --bg-dark: #050505;
  --surface: rgba(17, 17, 17, 0.85);
  --text-main: #ffffff;
  --text-muted: #a0a0a0;
  --shadow-orange: 0 0 20px rgba(247, 147, 30, 0.3);
  --shadow-purple: 0 0 20px rgba(102, 45, 145, 0.3);
}

/* 1. الإعدادات الأساسية وتهيئة الخلفية للـ JS */
html {
    background-color: #0b0214 !important; 
    scroll-behavior: smooth;
}

body {
  background-color: transparent !important;
  color: var(--text-main) !important;
  font-family: 'Cairo', sans-serif !important;
  overflow-x: hidden !important; 
}

body, #main, .min-h-dvh, main, section {
    background-color: transparent !important;
}

/* شريط التمرير الاحترافي */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--u-purple), var(--u-orange));
  border-radius: 10px;
}

/* 2. الهيدر العائم (Floating Glass Header) */
header {
  position: fixed !important;
  top: 55px !important; /* مسافة للشريط الإعلاني */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 95% !important;
  max-width: 1200px !important;
  background: rgba(15, 15, 15, 0.7) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 8px 20px !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
  z-index: 1000 !important;
}

/* 2. وضع لون ليلي عميق في أصل الصفحة عشان النيون يبرز */
html {
    background-color: #0b0214 !important; 
}

/* 3. التأكد أن الكانفاس يملأ الشاشة ومثبت */
#neonCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* التأكد أن الكانفاس دائماً في الخلف */
canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/* شريط التمرير (Scrollbar) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--u-purple), var(--u-orange));
  border-radius: 10px;
}

/* خلفية حيوية (توهج يتحرك ببطء في البودي) */
body::before {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(102, 45, 145, 0.05), transparent 60%),
              radial-gradient(circle at 80% 20%, rgba(247, 147, 30, 0.04), transparent 50%);
  animation: bg-pulse 15s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}

@keyframes bg-pulse {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.1) translate(3%, 3%); }
  100% { transform: scale(1) translate(0, 0); }
}

/* تأثير الدخول للأقسام (دخول ناعم من الأسفل) */
section, main {
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =========================================
   2. الهيدر (القائمة العلوية العائمة) وإصلاح التداخل
========================================= */
header {
  position: fixed !important;
  top: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 1200px !important;
  background: rgba(18, 18, 18, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 10px 20px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6) !important;
  z-index: 1000 !important;
  transition: all 0.4s ease !important;
}

/* إزاحة المحتوى للأسفل عشان الهيدر ما يغطي عليه */
main#main { padding-top: 130px !important; }
@media (max-width: 768px) { main#main { padding-top: 100px !important; } }

/* الشعار والأيقونات في الهيدر */
header img {
  border-radius: 8px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
header a, header button, header svg {
  color: var(--text-main) !important;
  transition: all 0.3s ease !important;
}
header a:hover, header button:hover { color: var(--u-orange) !important; }
header svg { color: var(--u-purple) !important; }
header a:hover svg, header button:hover svg { color: var(--u-orange) !important; }

/* =========================================
   3. القائمة الجانبية للجوال (Mobile Drawer)
========================================= */
#mobile-drawer {
  top: 0 !important;
  z-index: 990 !important; /* تحت الهيدر */
}
#mobile-drawer el-dialog-panel > div {
  background: rgba(10, 10, 10, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-left: 1px solid rgba(102, 45, 145, 0.3) !important;
}
#mobile-drawer .overflow-y-auto { padding-top: 100px !important; }

#mobile-drawer a, #mobile-drawer button {
  color: #FFFFFF !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: all 0.3s ease !important;
}
#mobile-drawer a:hover, #mobile-drawer button:hover {
  color: var(--u-orange) !important;
  background: rgba(247, 147, 30, 0.05) !important;
  padding-inline-start: 35px !important; /* حركة إزاحة النص */
}

/* أيقونة الهامبرغر */
button[commandfor="mobile-drawer"] span { background-color: #FFFFFF !important; transition: all 0.3s ease !important; }
button[commandfor="mobile-drawer"]:hover span, button[commandfor="mobile-drawer"][aria-expanded="true"] span { background-color: var(--u-orange) !important; }

/* =========================================
   4. العناوين ومسار الصفحة (Breadcrumbs & Headings)
========================================= */
/* إجبار العناوين على اللون الأبيض */
h1, h2, h3, h4, .text-foreground.text-xl, .text-foreground.text-2xl {
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* روابط "جميع المنتجات" بجانب الأقسام */
.theme-container a.text-foreground.items-center {
  color: var(--u-orange) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}
.theme-container a.text-foreground.items-center:hover { color: #FFFFFF !important; text-shadow: var(--shadow-orange) !important; }

/* مسار الصفحة (Breadcrumbs) */
nav[aria-label="breadcrumb"] a, nav[aria-label="breadcrumb"] span, nav[aria-label="breadcrumb"] svg, nav[aria-label="breadcrumb"] li {
  color: #FFFFFF !important; opacity: 0.85 !important; transition: all 0.3s ease !important;
}
nav[aria-label="breadcrumb"] a:hover {
  color: var(--u-orange) !important; opacity: 1 !important; text-shadow: var(--shadow-orange) !important;
}

/* =========================================
   5. شبكة المنتجات (الرئيسية) وكروت المنتجات
========================================= */
/* ترتيب الشبكة (Grid) بدال السلايدر */
[section-id="e1fe4234-8243-4519-ac55-6cfc4a746b31"] .products-embla__container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  transform: none !important;
  width: 100% !important;
  padding: 15px 0 !important;
}
@media (min-width: 768px) { [section-id="e1fe4234-8243-4519-ac55-6cfc4a746b31"] .products-embla__container { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } }
@media (min-width: 1024px) { [section-id="e1fe4234-8243-4519-ac55-6cfc4a746b31"] .products-embla__container { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } }

/* الكرت نفسه */
[data-product-card] {
  background: var(--surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* التوهج عند التمرير (Hover Effect) */
[data-product-card]::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(247, 147, 30, 0.1), transparent);
  transform: skewX(-20deg); transition: all 0.6s ease;
}
[data-product-card]:hover::before { left: 150%; }
[data-product-card]:hover {
  border-color: var(--u-purple) !important;
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-purple) !important;
}

/* صورة المنتج */
[data-product-card] img {
  border-radius: 10px !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  margin-bottom: 10px !important;
  max-height: 180px !important;
  width: 100% !important;
}

/* نصوص كرت المنتج */
[data-product-card] h3 a, [data-product-card] h3, [data-product-card] .text-foreground {
  color: #FFFFFF !important; font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.4 !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}
[data-product-card] p.text-foreground, [data-product-card] p {
  color: var(--u-orange) !important; font-size: 1.1rem !important; font-weight: 900 !important; margin-top: 8px !important;
}
[data-product-card] .text-muted, [data-product-card] .text-sm:not(.bg-\[\#6f42c1\]) { color: #CCCCCC !important; }

/* إخفاء الـ SKU نهائياً */
[data-product-sku-wrapper] { display: none !important; }

/* =========================================
   6. صفحة تفاصيل المنتج (Product Details Page)
========================================= */
.product-details-column {
  background: var(--surface) !important;
  border-radius: 20px !important;
  padding: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4) !important;
  position: relative;
}
.product-details-column::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--u-purple), var(--u-orange), transparent); opacity: 0.7;
}
#header h1 { color: var(--text-main) !important; font-size: 2rem !important; font-weight: 900 !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; }
[data-product-price] { color: var(--u-orange) !important; font-size: 1.8rem !important; font-weight: 900 !important; text-shadow: var(--shadow-orange) !important; }

/* أزرار المفضلة والإضافة للسلة */
[data-product-actions] .btn-filled {
  background: linear-gradient(135deg, #F9AB50 0%, var(--u-orange) 100%) !important; color: #000 !important; font-weight: 800 !important; font-size: 1.1rem !important; border-radius: 12px !important; padding: 14px !important; border: none !important; box-shadow: var(--shadow-orange) !important; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
[data-product-actions] .btn-filled:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 12px 30px rgba(247, 147, 30, 0.5) !important; }

[data-wishlist-btn] {
  background: rgba(102, 45, 145, 0.1) !important; border: 1px solid rgba(102, 45, 145, 0.5) !important; border-radius: 12px !important; transition: all 0.3s ease !important;
}
[data-wishlist-btn]:hover { background: var(--u-purple) !important; box-shadow: var(--shadow-purple) !important; }
[data-wishlist-btn] svg { color: var(--text-main) !important; }

/* قسم المكافآت (الولاء) */
.loyalty-points-products-section {
  background: rgba(102, 45, 145, 0.08) !important; border: 1px solid rgba(102, 45, 145, 0.3) !important; border-radius: 12px !important; padding: 15px !important; color: var(--text-main) !important;
}
.loyalty-points__points-text, .loyalty-points-rewards-logo path { fill: #D4AF37 !important; color: #D4AF37 !important; }
.loyalty-points-rewards { color: var(--u-orange) !important; }

/* زر برنامج الولاء العائم */
#loyalty-floating-btn .loyalty_footer_btn {
  background: linear-gradient(135deg, var(--u-purple) 0%, #4a2168 100%) !important;
  box-shadow: var(--shadow-purple) !important; border: 1px solid rgba(255,255,255,0.1) !important;
}

/* =========================================
   7. الأزرار العامة وحقل الكمية والأسئلة الشائعة
========================================= */
.btn-outlined, .btn-filled { border-radius: 8px !important; font-weight: 800 !important; text-transform: uppercase !important; transition: all 0.4s ease !important; }
.btn-outlined { background: rgba(247, 147, 30, 0.1) !important; color: var(--u-orange) !important; border: 1px solid var(--u-orange) !important; padding: 8px 10px !important; font-size: 0.85rem !important; }
.btn-outlined:hover { background: var(--u-orange) !important; color: #000 !important; box-shadow: var(--shadow-orange) !important; }

.qty-input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 10px !important; }
.qty-input-field { color: var(--text-main) !important; background: transparent !important; }
.qty-input-btn { color: var(--u-orange) !important; }

button[command="--toggle"] { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.05) !important; color: var(--text-main) !important; border-radius: 12px !important; }
button[command="--toggle"]:hover { border-color: var(--u-purple) !important; }

/* =========================================
   8. الشريط السفلي العائم للمنتج (Sticky CTA)
========================================= */
#sticky-cta {
  background: rgba(15, 15, 15, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-top: 1px solid rgba(102, 45, 145, 0.4) !important; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important; padding: 15px 20px !important; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
@media (min-width: 768px) {
  #sticky-cta {
    bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; width: 90% !important; max-width: 900px !important; border: 1px solid rgba(102, 45, 145, 0.5) !important; border-radius: 20px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), var(--shadow-purple) !important;
  }
  #sticky-cta.starting\:translate-y-full { transform: translate(-50%, 150%) !important; }
}
#sticky-cta img { border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; }
#sticky-cta [data-sticky-cta-name] { color: #FFFFFF !important; font-weight: 800 !important; }
#sticky-cta [data-sticky-cta-price] { color: var(--u-orange) !important; font-weight: 900 !important; text-shadow: var(--shadow-orange) !important; }
#sticky-cta .text-muted { color: #A0A0A0 !important; }
#sticky-cta .btn-filled { box-shadow: var(--shadow-orange) !important; }

/* =========================================
   9. قسم المميزات والفوتر (Footer)
========================================= */
.section-benefits { background: transparent !important; position: relative !important; }
.section-benefits::after { content: ''; position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(102,45,145,0.15) 0%, transparent 70%); transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.section-benefits .grid { background: var(--surface) !important; border-radius: 20px !important; padding: 30px !important; border: 1px solid rgba(255,255,255,0.05) !important; }
.section-benefits h3 { color: var(--u-orange) !important; }
.section-benefits p { color: var(--text-muted) !important; }

footer {
  background: #000000 !important; border-top: 1px solid rgba(255,255,255,0.05) !important; position: relative !important; overflow: hidden !important;
}
footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--u-purple), var(--u-orange), transparent); }
footer * { color: var(--text-muted) !important; }
footer h3 { color: var(--text-main) !important; font-weight: bold !important; }
footer a:hover { color: var(--u-orange) !important; }

footer img[alt="apple_pay"], footer img[alt="mada"], footer img[alt="visa"], footer img[alt="mastercard"] {
  filter: grayscale(100%) opacity(0.5) !important; transition: all 0.3s ease !important;
}
footer img:hover { filter: grayscale(0%) opacity(1) !important; transform: scale(1.1) !important; }

.border-border-light.pt-4 a svg { color: var(--text-muted) !important; transition: all 0.3s ease !important; }
.border-border-light.pt-4 a:hover svg { color: var(--u-orange) !important; transform: scale(1.2) translateY(-2px) !important; }

/* ======================================================
   تضبيط صفحة "جميع المنتجات" (Products List Page)
====================================================== */

/* --- 1. شريط التحكم العلوي (الفلاتر، الترتيب، طريقة العرض) --- */
#products-content .flex.flex-wrap.items-center.justify-between {
  background: var(--surface) !important;
  border-radius: 16px !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  margin-bottom: 20px !important;
}

/* نصوص شريط التحكم */
#products-content .text-muted, 
#products-content .text-muted-foreground {
  color: var(--text-muted) !important;
}

/* زر الفلاتر (موبايل) وأزرار الترتيب */
#products-content .btn-outlined,
#products-content button[popovertarget] {
  color: var(--text-main) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.03) !important;
  border-radius: 8px !important;
  padding: 8px 15px !important;
  transition: all 0.3s ease !important;
}

#products-content .btn-outlined:hover,
#products-content button[popovertarget]:hover {
  border-color: var(--u-orange) !important;
  color: var(--u-orange) !important;
  background: rgba(247, 147, 30, 0.05) !important;
}

/* أزرار تغيير العرض (شبكة / قائمة) */
.btn-group {
  background: rgba(0,0,0,0.5) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

.btn-group-item {
  color: var(--text-muted) !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  padding: 6px !important;
}

.btn-group-item:hover {
  color: var(--text-main) !important;
}

/* تفعيل اللون البرتقالي للزر المحدد (الشبكة أو القائمة) */
.btn-group-item:has(input:checked) {
  background: var(--u-purple) !important;
  color: var(--text-main) !important;
  box-shadow: 0 0 10px rgba(102, 45, 145, 0.4) !important;
}

/* --- 2. القوائم المنسدلة (Popovers) للترتيب والتوفر --- */
el-popover, el-options {
  background: rgba(15, 15, 15, 0.95) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(102, 45, 145, 0.4) !important; /* حدود بنفسجية */
  border-radius: 12px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.7) !important;
  color: var(--text-main) !important;
  overflow: hidden !important;
}

el-option, .form-control {
  color: var(--text-main) !important;
  transition: all 0.2s ease !important;
}

el-option:hover, el-option[aria-selected="true"], .form-control:hover {
  background: rgba(247, 147, 30, 0.1) !important; /* خلفية برتقالية خفيفة عند التحديد */
  color: var(--u-orange) !important;
}

/* --- 3. نافذة الفلاتر الجانبية (Filters Drawer) للموبايل --- */
#filters-drawer el-dialog-panel > form {
  background: rgba(10, 10, 10, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(102, 45, 145, 0.3) !important;
}

#filters-drawer h2, #filters-drawer .text-foreground {
  color: var(--text-main) !important;
}

#filters-drawer .border-t {
  border-color: rgba(255,255,255,0.05) !important;
}

/* سلايدر السعر (Price Range Slider) */
.noUi-connect { background: var(--u-orange) !important; }
.noUi-handle {
  background: var(--u-purple) !important;
  border: 2px solid var(--text-main) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(102, 45, 145, 0.8) !important;
}
.noUi-target { background: rgba(255,255,255,0.1) !important; border: none !important; }

/* مدخلات السعر (Price Inputs) */
.form-input {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--text-main) !important;
  border-radius: 8px !important;
}
.form-input:focus {
  border-color: var(--u-orange) !important;
  box-shadow: 0 0 8px rgba(247, 147, 30, 0.3) !important;
  outline: none !important;
}

/* --- 4. ترتيب المنتجات كقائمة (List View) --- */
/* إذا العميل اختار عرض المنتجات كقائمة أفقية بدل مربعات */
[data-grid="list"] [data-product-card] {
  flex-direction: row !important;
  align-items: center !important;
}

@media (max-width: 767px) {
  [data-grid="list"] [data-product-card] {
    flex-direction: column !important; /* في الجوال الصغير جداً نرجعها عمودي عشان المساحة */
  }
}

[data-grid="list"] [data-product-card] img {
  width: 150px !important;
  height: 150px !important;
  margin-bottom: 0 !important;
  margin-left: 20px !important; /* مسافة بين الصورة والنص (RTL) */
}

/* ======================================================
   إصلاح وتفخيم العرض العرضي للمنتجات (List View)
====================================================== */

/* 1. إجبار الكرت على أن يكون شبكة أفقية مرتبة (لشاشات الكمبيوتر والتابلت) */
@media (min-width: 768px) {
  [data-grid="list"] [data-product-card] {
    display: grid !important;
    grid-template-columns: 200px 1fr 220px !important; /* قسم صورة | قسم نصوص | قسم أزرار */
    grid-template-rows: 1fr !important;
    gap: 25px !important;
    align-items: center !important;
    padding: 20px !important;
  }
}

/* 2. تضبيط العرض العرضي لشاشات الجوال (Mobile) */
@media (max-width: 767px) {
  [data-grid="list"] [data-product-card] {
    display: grid !important;
    grid-template-columns: 130px 1fr !important; /* صورة يمين | نصوص وأزرار يسار */
    grid-template-rows: auto auto !important;
    gap: 15px !important;
    align-items: start !important;
    padding: 15px !important;
  }
}

/* 3. تضبيط مساحة الصورة (Image Area) */
[data-grid="list"] [data-product-card] > a {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* بالجوال الصورة تاخذ السطرين */
@media (max-width: 767px) {
  [data-grid="list"] [data-product-card] > a {
    grid-row: 1 / span 2 !important; 
    align-items: start !important;
  }
}

[data-grid="list"] [data-product-card] img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

/* 4. تضبيط مساحة النصوص (Info Area) */
[data-grid="list"] [data-product-card] > div:nth-of-type(1) {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
}

/* 5. تضبيط مساحة الأزرار والسلة (Actions Area) */
[data-grid="list"] [data-product-card] > div:nth-of-type(2) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  [data-grid="list"] [data-product-card] > div:nth-of-type(2) {
    grid-column: 3 !important; /* في الكمبيوتر تكون في العمود الثالث يسار */
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-right: 25px !important; /* مسافة للخط الفاصل (RTL) */
  }
}

@media (max-width: 767px) {
  [data-grid="list"] [data-product-card] > div:nth-of-type(2) {
    grid-column: 2 !important; /* في الجوال تكون تحت النصوص مباشرة */
  }
}

/* 6. ترتيب الشارات (مثل "فوري") وزر المفضلة داخل العرض العرضي */
[data-grid="list"] [data-product-card] .absolute.top-4 {
  top: 10px !important;
  right: 10px !important;
  left: auto !important; /* التثبيت لليمين (RTL) */
}

[data-grid="list"] [data-product-card] [data-wishlist-btn] {
  bottom: 10px !important;
  left: 10px !important;
  right: auto !important; /* التثبيت لليسار (RTL) */
  width: 35px !important;
  height: 35px !important;
  padding: 6px !important;
}

/* تكبير الأزرار العرضية عشان تملى المساحة صح */
[data-grid="list"] [data-product-card] .btn-outlined, 
[data-grid="list"] [data-product-card] .btn-filled {
  width: 100% !important;
}

/* تضبيط حقل الكمية داخل العرض العرضي */
[data-grid="list"] [data-product-card] .qty-input-full {
  width: 100% !important;
  justify-content: space-between !important;
}

/* ======================================================
   Legendary Product Page (صفحة تفاصيل المنتج الأسطورية)
====================================================== */

/* --- 1. قسم صورة المنتج (Gallery) --- */
.product-gallery__slide img {
  border-radius: 20px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 20px rgba(102, 45, 145, 0.15) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease !important;
}

.product-gallery__slide img:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), 0 0 40px rgba(247, 147, 30, 0.25) !important;
}

/* --- 2. صندوق تفاصيل المنتج (Details Column) --- */
.product-details-column {
  background: linear-gradient(145deg, rgba(20,20,20,0.8), rgba(10,10,10,0.95)) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-radius: 24px !important;
  padding: 35px !important;
  border: 1px solid rgba(102, 45, 145, 0.3) !important; /* حدود بنفسجية فخمة */
  box-shadow: inset 0 0 20px rgba(255,255,255,0.02), 0 20px 50px rgba(0,0,0,0.5) !important;
}

/* --- 3. السعر والشارات (Price & Badges) --- */
/* تلوين السعر بتدرج نيون برتقالي وذهبي */
[data-product-price] {
  font-size: 2.2rem !important;
  background: linear-gradient(90deg, var(--u-orange), #FFD700);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 20px rgba(247, 147, 30, 0.3) !important;
  display: inline-block;
}

/* شارة "فوري!" */
#product-badges span.bg-\[\#6f42c1\] {
  background: linear-gradient(135deg, var(--u-purple), #8a3ebf) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 5px 15px rgba(102, 45, 145, 0.4) !important;
  padding: 6px 16px !important;
  font-size: 0.95rem !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
}

/* --- 4. بطاقة الولاء والمكافآت (VIP Card Style) --- */
.loyalty-points-products-section {
  background: linear-gradient(145deg, rgba(102, 45, 145, 0.15), rgba(0,0,0,0.6)) !important;
  border: 1px solid rgba(247, 147, 30, 0.3) !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 18px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}

/* لمعة تتحرك على بطاقة الولاء كل 4 ثواني */
.loyalty-points-products-section::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: skewX(-20deg);
  animation: vip-shine 4s infinite;
}

@keyframes vip-shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

/* --- 5. قسم الأسئلة الشائعة (FAQ Accordion & Form) --- */
button[command="--toggle"] {
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 16px 22px !important;
  font-size: 1.1rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}

button[command="--toggle"]:hover {
  background: rgba(102, 45, 145, 0.15) !important;
  border-color: var(--u-orange) !important;
  box-shadow: 0 0 15px rgba(247, 147, 30, 0.15) !important;
}

/* حقول الإدخال في الأسئلة الشائعة (Inputs & Textarea) */
.form-input, .form-textarea {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 14px !important;
  transition: all 0.3s ease !important;
}

.form-input:focus, .form-textarea:focus {
  border-color: var(--u-orange) !important;
  box-shadow: 0 0 12px rgba(247, 147, 30, 0.3) !important;
  outline: none !important;
  background: rgba(0, 0, 0, 0.8) !important;
}

.form-label {
  color: #cccccc !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* --- 6. أيقونات المشاركة (Social Share Icons) --- */
.border-border-light.pt-4 a {
  background: rgba(255,255,255,0.05) !important;
  padding: 10px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

.border-border-light.pt-4 a:hover {
  background: rgba(247, 147, 30, 0.1) !important;
  border-color: var(--u-orange) !important;
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 8px 15px rgba(247, 147, 30, 0.2) !important;
}

/* ======================================================
   تضبيط صفحة السلة (Cart Page - Luxury Dark UI)
====================================================== */

/* --- 1. حاوية السلة وتقسيم الشاشة --- */
/* تخفيف لون الخطوط الفاصلة */
.border-border-light {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- 2. كروت المنتجات داخل السلة --- */
.cart-product-item {
  background: var(--surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
  transition: all 0.3s ease !important;
}

.cart-product-item:hover {
  border-color: rgba(102, 45, 145, 0.3) !important; /* توهج بنفسجي خفيف جداً */
  box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important;
}

/* صورة المنتج في السلة */
.cart-product-item img {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* اسم المنتج والسعر */
.cart-product-item a.text-foreground {
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.cart-product-item p.text-foreground,
.cart-product-item .text-foreground.font-medium {
  color: var(--u-orange) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(247, 147, 30, 0.2) !important;
}

/* أيقونة الحذف من السلة */
button[data-action="product-remove"] {
  background: rgba(255, 0, 0, 0.05) !important;
  border: 1px solid rgba(255, 0, 0, 0.1) !important;
  color: #ff4d4d !important;
  border-radius: 8px !important;
}
button[data-action="product-remove"]:hover {
  background: #ff4d4d !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 15px rgba(255, 77, 77, 0.4) !important;
}

/* --- 3. الجانب الأيسر: ملخص الطلب وكود الخصم --- */
/* قسم "ملخص الطلب" */
[data-order-summary] {
  background: linear-gradient(145deg, rgba(20,20,20,0.8), rgba(10,10,10,0.95)) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-radius: 20px !important;
  padding: 25px !important;
  border: 1px solid rgba(102, 45, 145, 0.3) !important; /* إطار بنفسجي أنيق */
  box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
}

/* توهج خفيف علوي لملخص الطلب */
[data-order-summary]::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--u-purple), transparent); opacity: 0.5;
}

/* نصوص المجموع داخل الملخص */
[data-cart-totals] span.text-foreground {
  color: #FFFFFF !important;
}

[data-cart-totals] span.font-semibold {
  font-size: 1.1rem !important;
}

[data-cart-totals] .text-end {
  color: var(--u-orange) !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
}

/* --- 4. زر إتمام الطلب --- */
[data-checkout-buttons] .btn-filled {
  background: linear-gradient(135deg, #F9AB50 0%, var(--u-orange) 100%) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  padding: 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px rgba(247, 147, 30, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  margin-top: 10px !important;
  animation: pulse-btn 2.5s infinite alternate !important; /* حركة نبض خفيفة لجذب الانتباه */
}

[data-checkout-buttons] .btn-filled:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 15px 35px rgba(247, 147, 30, 0.6) !important;
  animation: none !important; /* يوقف النبض عند التمرير */
}

@keyframes pulse-btn {
  0% { box-shadow: 0 0 15px rgba(247, 147, 30, 0.3); }
  100% { box-shadow: 0 0 30px rgba(247, 147, 30, 0.6); }
}

/* --- 5. حقل كود الخصم --- */
[data-coupon-section] {
  background: var(--surface) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 16px !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
}

[data-coupon-input] {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 12px 15px !important;
}

[data-coupon-input]:focus {
  border-color: var(--u-purple) !important;
  box-shadow: 0 0 10px rgba(102, 45, 145, 0.3) !important;
  outline: none !important;
}

[data-coupon-submit-btn] {
  background: var(--u-purple) !important; /* زر الخصم بنفسجي عشان ما يسرق العين من زر إتمام الطلب */
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
}
[data-coupon-submit-btn]:hover:not(:disabled) {
  box-shadow: 0 5px 15px rgba(102, 45, 145, 0.4) !important;
}

/* --- 6. قسم الولاء في السلة --- */
[data-loyalty-section] [data-loyalty-earn-card] {
  background: rgba(102, 45, 145, 0.08) !important;
  border: 1px solid rgba(102, 45, 145, 0.3) !important;
  border-radius: 12px !important;
  color: var(--text-main) !important;
}
[data-loyalty-calculated-points] {
  color: #D4AF37 !important; /* ذهبي فخم للنقاط */
  font-weight: 900 !important;
}
/* ======================================================
   إصلاح ألوان النصوص (تحويلها للأبيض) في السلة وباقي الموقع
====================================================== */

/* 1. إجبار الكلاسات الافتراضية على اللون الأبيض بدلاً من الأسود/الرمادي الغامق */
.text-foreground {
  color: #FFFFFF !important;
}

.text-muted, 
.text-muted-foreground {
  color: #CCCCCC !important; /* رمادي فاتح مريح للعين للتفاصيل الثانوية */
}

/* 2. تبييض كل النصوص داخل السلة، ملخص الطلب، ونقاط الولاء */
.cart-product-item a, 
.cart-product-item p, 
.cart-product-item span,
[data-order-summary-section] h3,
[data-order-summary-section] span,
[data-order-summary-section] p,
[data-loyalty-section] p,
[data-loyalty-section] span,
[data-loyalty-section] h3,
[data-coupon-section] h3,
[data-cart-products-list] .text-foreground {
  color: #FFFFFF !important;
}

/* 3. حماية الأسعار والنقاط عشان تظل باللون البرتقالي والذهبي المميز */
.cart-product-item p.text-foreground,
[data-cart-totals] .text-end,
[data-product-price],
[data-sticky-cta-price],
.loyalty-points-rewards {
  color: var(--u-orange) !important;
  text-shadow: 0 0 10px rgba(247, 147, 30, 0.2) !important;
}

[data-loyalty-calculated-points] {
  color: #D4AF37 !important; /* لون ذهبي لنقاط الولاء */
}

/* 4. تضبيط حقل إدخال كود الخصم عشان يكون النص أبيض لما يكتب العميل */
[data-coupon-input] {
  color: #FFFFFF !important;
}
[data-coupon-input]::placeholder {
  color: #888888 !important;
}

/* 5. رابط "متابعة التسوق" تحت السلة */
a[href="https://pixelstoreksa.com/"] {
  color: #FFFFFF !important;
}
a[href="https://pixelstoreksa.com/"]:hover {
  color: var(--u-orange) !important;
}

/* ======================================================
   Pixel Store - Dark Glass Search Dialog (واجهة البحث الفخمة)
====================================================== */

/* 1. النافذة الرئيسية للبحث (الخلفية العائمة) */
#search-dialog el-dialog-panel {
  background: rgba(10, 10, 10, 0.85) !important; /* أسود شفاف */
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-bottom: 1px solid rgba(102, 45, 145, 0.5) !important; /* خط بنفسجي ملكي تحت النافذة */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
}

/* 2. شريط البحث نفسه (حقل الكتابة) */
.form-input-wrapper {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  padding: 5px 15px !important;
}

/* توهج شريط البحث عند التحديد */
.form-input-wrapper.focus-within\:border-foreground {
  border-color: var(--u-orange) !important;
  box-shadow: 0 0 15px rgba(247, 147, 30, 0.3) !important;
}

/* نص البحث وأيقونة العدسة داخل الشريط */
#search-input {
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  background: transparent !important;
}

#search-input::placeholder {
  color: #888888 !important;
}

.form-input-wrapper [data-slot="icon"] svg {
  color: var(--u-purple) !important;
}

/* زر المسح (X) وزر الإغلاق */
button[data-search-clear] svg,
button[commandfor="search-dialog"] svg {
  color: var(--text-muted) !important;
  transition: all 0.3s ease !important;
}

button[data-search-clear]:hover svg,
button[commandfor="search-dialog"]:hover svg {
  color: var(--u-orange) !important;
  transform: scale(1.1) rotate(90deg) !important; /* حركة دوران خفيفة للإغلاق */
}

/* --- 3. قسم النتائج والمنتجات --- */

/* النصوص العامة (النتائج، جاري البحث، لم يتم العثور) */
[data-search-results] .text-muted, 
[data-search-loading] .text-muted, 
[data-search-empty] .text-muted {
  color: #CCCCCC !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* كروت نتائج البحث المصغرة (التصميم) */
[data-search-products] {
  padding-bottom: 10px !important; /* مساحة للسكرول */
}

/* رابط "عرض كل النتائج" أسفل النافذة */
[data-search-all-link] {
  color: var(--u-orange) !important;
  font-weight: 800 !important;
  transition: all 0.3s ease !important;
  justify-content: center !important; /* توسيط الرابط */
  font-size: 1.1rem !important;
}

[data-search-all-link]:hover {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(247, 147, 30, 0.5) !important;
  letter-spacing: 1px !important;
}

[data-search-all-link] svg {
  color: var(--u-orange) !important;
}

/* خطوط الفواصل داخل نافذة البحث */
.border-border-light {
  border-color: rgba(255,255,255,0.05) !important;
}

/* --- 4. الهياكل الوهمية (Skeleton Loading) أثناء البحث --- */
[data-search-loading] .bg-secondary {
  background: rgba(255,255,255,0.05) !important; /* رمادي داكن لتأثير النبض */
}

/* ======================================================
   Pixel Store - Search Results Styling (تنسيق نتائج البحث)
====================================================== */

/* --- 1. شريط التمرير الأفقي لنتائج البحث --- */
[data-search-products] {
  padding-bottom: 20px !important; /* مساحة للسكرول والظل */
  scrollbar-width: thin;
  scrollbar-color: var(--u-purple) transparent;
}
[data-search-products]::-webkit-scrollbar { height: 6px; }
[data-search-products]::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
[data-search-products]::-webkit-scrollbar-thumb { background: var(--u-purple); border-radius: 10px; }

/* --- 2. كرت المنتج داخل البحث --- */
[data-search-products] > a {
  background: var(--surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
  /* تصغير عرض الكروت عشان تطلع بشكل أنيق في البحث بدال الحجم الضخم */
  width: 240px !important; 
}

@media (min-width: 768px) {
  [data-search-products] > a {
    width: 280px !important; 
  }
}

/* توهج الكرت عند مرور الماوس */
[data-search-products] > a:hover {
  border-color: var(--u-orange) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 30px rgba(247, 147, 30, 0.15) !important;
}

/* --- 3. صورة المنتج في البحث --- */
[data-search-products] .aspect-\[3\/4\] {
  aspect-ratio: 1/1 !important; /* تحويل الصورة لمربع عشان تصير أرتب */
  border-radius: 12px !important;
  overflow: hidden !important;
}

[data-search-products] img {
  transition: transform 0.5s ease !important;
}

[data-search-products] > a:hover img {
  transform: scale(1.05) !important; /* تكبير الصورة شوي عند الماوس */
}

/* --- 4. شارة "فوري!" في البحث --- */
[data-search-products] .bg-secondary.text-foreground {
  background: linear-gradient(135deg, var(--u-purple), #8a3ebf) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(102, 45, 145, 0.4) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
}

/* --- 5. نصوص اسم المنتج والسعر في البحث --- */
[data-search-products] h3 {
  color: #FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

[data-search-products] p {
  color: var(--u-orange) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  margin-top: 5px !important;
}
.border-border-light.pt-4 a {
  border-radius: 5% !important;
}
/* ======================================================
   إصلاح تقسيم قسم المميزات (3 أعمدة متساوية)
====================================================== */

/* 1. إجبار الشبكة على 3 أعمدة في الشاشات الكبيرة والتابلت */
@media (min-width: 768px) {
  .section-benefits .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important; /* مسافة أنيقة بين المميزات */
  }
}

/* 2. ترتيبها كعمود واحد في الجوال عشان ما تنعفص وتكون فخمة */
@media (max-width: 767px) {
  .section-benefits .grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* 3. توسيط النصوص والأيقونات داخل كل ميزة */
.section-benefits .grid > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px !important;
  background: rgba(255, 255, 255, 0.02) !important; /* خلفية خفيفة جداً تعزل كل ميزة */
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  transition: all 0.3s ease !important;
}

/* حركة خفيفة عند التمرير على الميزة */
.section-benefits .grid > div:hover {
  transform: translateY(-5px) !important;
  background: rgba(102, 45, 145, 0.1) !important;
  border-color: var(--u-purple) !important;
  box-shadow: var(--shadow-purple) !important;
}
/* ======================================================
   Pixel Store - Categories Page (صفحة التصنيفات)
====================================================== */

/* --- 1. تضبيط خلفية صفحة التصنيفات --- */
/* إزالة الخلفية الرمادية الفاتحة الافتراضية وجعلها متناسقة مع الدارك مود */
[data-template="list_categories"] .bg-secondary.absolute {
  background: var(--bg-dark) !important;
}

/* --- 2. صندوق "لا توجد تصنيفات" (فارغ) --- */
.bg-secondary.flex.flex-col.items-center.justify-center.rounded-lg.py-16 {
  background: rgba(10, 10, 10, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px dashed rgba(255, 255, 255, 0.05) !important; /* حدود متقطعة خفيفة */
  border-radius: 24px !important;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5) !important;
}

.bg-secondary.flex.flex-col.items-center.justify-center.rounded-lg.py-16 p {
  color: var(--text-muted) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

/* --- 3. تصميم كروت التصنيفات المستقبلية (لما تضيفها) --- */
/* هذا الكود جاهز لكروت التصنيفات عشان أول ما تضيف تصنيف يطلع أسطوري */

/* شبكة التصنيفات */
[data-template="list_categories"] .grid {
  gap: 20px !important;
}

/* كرت التصنيف */
.category-card {
  background: var(--surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  text-align: center !important;
  padding-bottom: 15px !important;
}

/* حركة كرت التصنيف */
.category-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--u-purple) !important;
  box-shadow: var(--shadow-purple) !important;
}

/* صورة التصنيف */
.category-card img {
  border-radius: 20px 20px 0 0 !important;
  transition: transform 0.5s ease !important;
  width: 100% !important;
  object-fit: cover !important;
}

.category-card:hover img {
  transform: scale(1.05) !important;
}

/* عنوان التصنيف */
.category-card h3 {
  color: #FFFFFF !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  margin-top: 15px !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
  transition: color 0.3s ease !important;
}

.category-card:hover h3 {
  color: var(--u-orange) !important;
}
/* ======================================================
   Pixel Store - إصلاح الشريط الإعلاني وتداخل الهيدر
====================================================== */

/* 1. تضبيط الشريط الإعلاني (Announcement Bar) ليكون مثبت في الأعلى */
[data-announcement-bar] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 42px !important; /* ارتفاع ثابت للشريط */
  z-index: 1005 !important; /* أعلى من الهيدر */
  background: linear-gradient(90deg, var(--u-purple), var(--u-orange)) !important; /* تدرج فخم */
  box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* نص الشريط الإعلاني */
[data-announcement-bar] p {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: 1px !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.4) !important;
  margin: 0 !important;
}

/* 2. إزاحة الهيدر العائم للأسفل عشان ما يغطي على الشريط الإعلاني */
header {
  top: 55px !important; /* 42px للشريط + 13px مسافة جمالية */
}

/* 3. إزاحة محتوى الموقع بالكامل للأسفل عشان ما يختفي تحت الهيدر والشريط */
main#main {
  padding-top: 160px !important; 
}

@media (max-width: 768px) {
  main#main {
    padding-top: 130px !important;
  }
}

/* 4. تعديل مساحة القائمة الجانبية في الجوال عشان ما يغطي عليها الهيدر */
#mobile-drawer .overflow-y-auto {
  padding-top: 120px !important; 
}
/* ======================================================
   Pixel Store - Product Details Enhancements
   (تضبيط السعر، الخصم، والوصف القصير)
====================================================== */

/* --- 1. تضبيط منطقة الأسعار (السعر الحالي، القديم، الخصم) --- */
/* السعر الحالي (بعد الخصم) - لمعة برتقالية */
[data-product-price] {
  color: var(--u-orange) !important;
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  background: linear-gradient(90deg, var(--u-orange), #FFD700);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 15px rgba(247, 147, 30, 0.3) !important;
  display: inline-block;
}

/* السعر القديم (المشطوب) */
[data-product-price-old] {
  color: #777777 !important; /* رمادي داكن عشان ما يسرق العين من السعر الجديد */
  font-size: 1.1rem !important;
  text-decoration-color: #ff4d4d !important; /* خط الشطب لونه أحمر لتوضيح الإلغاء */
  opacity: 0.8 !important;
}

/* شارة نسبة الخصم (خصم 10%) */
[data-product-discount] {
  background: rgba(102, 45, 145, 0.15) !important; /* خلفية بنفسجية ملكية شفافة */
  color: #dcb0ff !important; /* نص بنفسجي فاتح ساطع */
  border: 1px solid var(--u-purple) !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  box-shadow: 0 0 10px rgba(102, 45, 145, 0.4) !important;
  font-size: 0.85rem !important;
}

/* --- 2. الوصف القصير للمنتج (اشتراك نتفلكس رسمي...) --- */
.prose.prose-sm p {
  color: #EAEAEA !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  background: rgba(255, 255, 255, 0.03) !important; /* خلفية زجاجية خفيفة جداً */
  padding: 16px 20px !important;
  border-radius: 12px !important;
  border-right: 3px solid var(--u-orange) !important; /* خط برتقالي فخم من اليمين يبرز النص */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2) !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* --- 3. نصوص العناوين الصغيرة (مثل: الكمية) --- */
.form-label {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin-bottom: 8px !important;
}

/* --- 4. إصلاح لون زر المفضلة النشط (لما يضيف العميل المنتج للمفضلة) --- */
/* تعديل الألوان الافتراضية للقلب عشان تتماشى مع البرتقالي بدل الأحمر الافتراضي */
[data-wishlist-btn] svg path[fill="#C22B51"] {
  fill: var(--u-orange) !important;
}
[data-wishlist-btn] svg path[stroke="#C22B51"] {
  stroke: var(--u-orange) !important;
}
/* ======================================================
   Pixel Store - Custom Fields & Dropdowns (حقول خيارات المنتج)
====================================================== */

/* 1. الحاوية الأساسية للحقل */
.custom-field-wrapper {
  margin-top: 10px !important;
  margin-bottom: 15px !important;
}

/* 2. عنوان الحقل (مثل: المدة) */
.custom-field__label {
  display: block !important;
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.5px !important;
}

/* النجمة الحمراء (*) الدالة على أن الحقل إجباري */
.custom-field__required {
  color: #ff4d4d !important;
  font-size: 1.2rem !important;
  margin-right: 4px !important;
}

/* 3. القائمة المنسدلة نفسها (Select Dropdown) */
.custom-field__select {
  width: 100% !important;
  background-color: rgba(0, 0, 0, 0.6) !important; /* أسود زجاجي شفاف */
  color: #FFFFFF !important; /* لون النص الأساسي */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 1.05rem !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  appearance: none !important; /* إخفاء سهم المتصفح الافتراضي المزعج */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  
  /* رسم سهم أنيق ومتناسق من اليسار (RTL) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7931E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: left 15px center !important;
  background-size: 18px !important;
}

/* عند التركيز على القائمة (Focus) */
.custom-field__select:focus {
  border-color: var(--u-orange) !important;
  box-shadow: 0 0 12px rgba(247, 147, 30, 0.3) !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* 4. تنسيق الخيارات داخل القائمة (Options) */
.custom-field__select option {
  background-color: #1a1a1a !important; /* لون داكن للخيارات */
  color: #FFFFFF !important;
  font-size: 1rem !important;
  padding: 10px !important;
}

/* تلوين الخيار المخصص اللي فيه سعر إضافي (المتصفحات تدعمها بشكل محدود لكن بتعطي لمسة ممتازة) */
.custom-field__select option[value*="+"] {
  color: var(--u-orange) !important;
  font-weight: bold !important;
}
/* ======================================================
   Pixel Store - Luxury FAQ & Question Form (قسم الأسئلة)
====================================================== */

/* 1. الصندوق الداخلي للأسئلة بعد فتح القائمة */
#faq > div {
  background: rgba(0, 0, 0, 0.2) !important; /* تعتيم خفيف للداخل */
  border-radius: 0 0 16px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-top: none !important;
  box-shadow: inset 0 10px 20px rgba(0,0,0,0.2) !important;
  margin-top: -5px !important;
  padding-top: 20px !important;
}

/* 2. نص "لا توجد أسئلة بعد" */
#faq .text-muted.text-sm {
  color: #aaaaaa !important;
  font-size: 1rem !important;
  text-align: center !important;
  padding: 15px 0 !important;
  font-style: italic !important;
}

/* 3. الفواصل وعنوان "اطرح سؤالك" */
#faq .border-t {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

#faq h3.text-foreground {
  color: #FFFFFF !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
}

/* 4. حقول الإدخال (الاسم، الإيميل، والسؤال) */
#question-form .form-label {
  color: #cccccc !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

/* النجمة الحمراء */
#question-form .form-label-required {
  color: #ff4d4d !important;
  margin-right: 4px !important;
  font-size: 1.1rem !important;
}

#question-form .form-input, 
#question-form .form-textarea {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
  font-family: 'Cairo', sans-serif !important;
}

/* توهج الحقول عند الكتابة */
#question-form .form-input:focus, 
#question-form .form-textarea:focus {
  border-color: var(--u-orange) !important;
  box-shadow: 0 0 12px rgba(247, 147, 30, 0.3) !important;
  outline: none !important;
  background: rgba(0, 0, 0, 0.8) !important;
}

/* 5. زر (لا تعرض اسمي) Checkbox */
#question-form .form-control {
  color: #bbbbbb !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#question-form .form-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

/* شكل الـ Checkbox عند التحديد */
#question-form .form-checkbox:checked {
  background: var(--u-purple) !important;
  border-color: var(--u-purple) !important;
  box-shadow: 0 0 10px rgba(102, 45, 145, 0.4) !important;
}
#question-form .form-checkbox:checked::after {
  content: '✔';
  position: absolute;
  color: white;
  font-size: 12px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* 6. زر إرسال السؤال */
#submit-question-btn {
  background: linear-gradient(135deg, #F9AB50 0%, var(--u-orange) 100%) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  border-radius: 10px !important;
  padding: 10px 25px !important;
  border: none !important;
  box-shadow: 0 5px 15px rgba(247, 147, 30, 0.3) !important;
  transition: all 0.3s ease !important;
}

#submit-question-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(247, 147, 30, 0.5) !important;
}

/* 7. رسائل الخطأ (Error Messages) */
#question-form .text-destructive {
  color: #ff4d4d !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}
/* ======================================================
   Pixel Store - Homepage Categories (سلايدر الأقسام)
====================================================== */

/* 1. كرت القسم (التصنيف) */
.section-categories .embla__slide a {
  display: block !important;
  background: var(--surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 12px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* التوهج والارتفاع عند تمرير الماوس */
.section-categories .embla__slide a:hover {
  transform: translateY(-8px) !important;
  border-color: var(--u-purple) !important;
  box-shadow: var(--shadow-purple) !important;
}

/* 2. صورة القسم */
.section-categories .embla__slide img {
  border-radius: 14px !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
}

/* 3. عنوان القسم (مثال: اشتراكات) */
.section-categories .embla__slide h3 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  padding-top: 8px !important;
  margin-bottom: 5px !important;
  transition: color 0.3s ease !important;
}

.section-categories .embla__slide a:hover h3 {
  color: var(--u-orange) !important;
  text-shadow: 0 0 10px rgba(247, 147, 30, 0.3) !important;
}

/* 4. شريط التمرير (Progress Bar) اللي تحت السلايدر */
.section-categories .embla__progress {
  background: rgba(255, 255, 255, 0.05) !important; /* خلفية داكنة للشريط */
  height: 6px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* الخط المتحرك داخل الشريط */
.section-categories .embla__progress-bar {
  background: linear-gradient(90deg, var(--u-purple), var(--u-orange)) !important;
  box-shadow: 0 0 10px rgba(247, 147, 30, 0.5) !important;
  height: 100% !important;
  border-radius: 10px !important;
}

/* 5. أزرار التقليب (السابق والتالي) */
.section-categories .embla__prev,
.section-categories .embla__next {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  transition: all 0.3s ease !important;
}

.section-categories .embla__prev:hover,
.section-categories .embla__next:hover {
  background: rgba(247, 147, 30, 0.1) !important;
  border-color: var(--u-orange) !important;
  color: var(--u-orange) !important;
  box-shadow: var(--shadow-orange) !important;
}

/* 6. زر "جميع الاقسام" بجانب العنوان */
.section-categories a.btn-text {
  color: var(--u-orange) !important;
  transition: all 0.3s ease !important;
  font-weight: 700 !important;
}

.section-categories a.btn-text:hover {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(247, 147, 30, 0.5) !important;
  transform: translateX(-5px) !important; /* حركة دفع خفيفة لليسار */
}
/* ======================================================
   تعديل كروت الأقسام لتصبح مستطيلة (Landscape 16:9)
====================================================== */

/* إجبار الصورة وحاويتها على الشكل المستطيل العرضي */
.section-categories .embla__slide img,
.section-categories .embla__slide .overflow-hidden {
  aspect-ratio: 16 / 9 !important; /* نسبة العرض إلى الطول (مستطيل سينمائي) */
  width: 100% !important;
  height: 100% !important;
  max-height: 200px !important; /* تحديد أقصى ارتفاع عشان ما تصير ضخمة بزيادة */
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* توسيط العنوان تحت المستطيل بشكل أنيق */
.section-categories .embla__slide h3 {
  text-align: center !important;
  width: 100% !important;
  margin-top: 10px !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.5px !important;
}
/* ======================================================
   Pixel Store - Luxury List View (إصلاح وتفخيم العرض العرضي)
====================================================== */

/* --- 1. الكرت الأساسي في وضع القائمة --- */
[data-grid="list"] [data-product-card] {
  display: grid !important;
  background: linear-gradient(145deg, rgba(20,20,20,0.6), rgba(10,10,10,0.8)) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  gap: 20px !important;
  align-items: center !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

[data-grid="list"] [data-product-card]:hover {
  border-color: var(--u-purple) !important;
  background: linear-gradient(145deg, rgba(30,30,30,0.8), rgba(15,15,15,0.9)) !important;
  box-shadow: var(--shadow-purple) !important;
  transform: translateY(-4px) !important;
}

/* --- 2. تقسيم الأعمدة للكمبيوتر والتابلت (صورة | تفاصيل | أزرار) --- */
@media (min-width: 768px) {
  [data-grid="list"] [data-product-card] {
    grid-template-columns: 200px 1fr 220px !important; /* 3 أعمدة مرتبة */
    grid-template-rows: 1fr !important;
  }
  
  [data-grid="list"] [data-product-card] > a {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 180px !important; /* تثبيت ارتفاع الصورة */
  }
  
  [data-grid="list"] [data-product-card] > div:nth-of-type(1) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 15px !important;
  }
  
  [data-grid="list"] [data-product-card] > div:nth-of-type(2) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important; /* فاصل فخم بين النص والأزرار (RTL) */
    padding-right: 20px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* --- 3. تقسيم الأعمدة للجوال (صورة يمين | تفاصيل وتحتها الأزرار يسار) --- */
@media (max-width: 767px) {
  [data-grid="list"] [data-product-card] {
    grid-template-columns: 130px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  
  [data-grid="list"] [data-product-card] > a {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important; /* الصورة تاخذ السطرين عشان توازي النص والأزرار */
    height: 100% !important;
    min-height: 140px !important;
  }
  
  [data-grid="list"] [data-product-card] > div:nth-of-type(1) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  
  [data-grid="list"] [data-product-card] > div:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin-top: auto !important;
  }
}

/* --- 4. تضبيط الصورة داخل العرض العرضي --- */
[data-grid="list"] [data-product-card] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
}

/* --- 5. الشارات والمفضلة (إصلاح التداخل) --- */
[data-grid="list"] [data-product-card] .absolute.top-4 {
  top: 8px !important;
  right: 8px !important;
  left: auto !important; /* تثبيت يمين (RTL) */
}

[data-grid="list"] [data-product-card] button[data-wishlist-btn] {
  bottom: 8px !important;
  left: 8px !important;
  right: auto !important; /* تثبيت يسار (RTL) */
  width: 32px !important;
  height: 32px !important;
  padding: 5px !important;
  background: rgba(10,10,10,0.6) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* --- 6. النصوص والسعر داخل العرض العرضي --- */
[data-grid="list"] [data-product-card] h3 a {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
}

/* الوصف القصير (إظهاره بشكل أنيق في الكمبيوتر فقط أو سطرين بالجوال) */
[data-grid="list"] [data-product-card] p.text-muted {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #aaaaaa !important;
  font-size: 0.9rem !important;
  margin-top: 5px !important;
  line-height: 1.5 !important;
}

/* السعر والخصم */
[data-grid="list"] [data-product-card] .font-semibold {
  color: var(--u-orange) !important;
  font-size: 1.25rem !important;
  text-shadow: 0 0 10px rgba(247, 147, 30, 0.2) !important;
}

[data-grid="list"] [data-product-card] .line-through {
  color: #777777 !important;
  text-decoration-color: #ff4d4d !important;
}

[data-grid="list"] [data-product-card] .bg-success\/20 {
  background: rgba(102, 45, 145, 0.2) !important;
  color: #dcb0ff !important;
  border: 1px solid var(--u-purple) !important;
  box-shadow: 0 0 8px rgba(102, 45, 145, 0.4) !important;
  font-weight: 700 !important;
}

/* --- 7. الأزرار وحقل الكمية (ملء المساحة) --- */
[data-grid="list"] [data-product-card] .btn-outlined,
[data-grid="list"] [data-product-card] .btn-filled {
  width: 100% !important;
  padding: 10px !important;
  font-size: 0.95rem !important;
  margin-bottom: 8px !important;
}

[data-grid="list"] [data-product-card] .qty-input-full {
  width: 100% !important;
  justify-content: space-between !important;
  background: rgba(255,255,255,0.03) !important;
  border-radius: 10px !important;
}
/* ======================================================
   Pixel Store - Category Banner (ترويسة الأقسام)
====================================================== */

/* 1. إطار البانر الأساسي (عزله عن حواف الشاشة ليكون كرت فخم) */
main#main > section.relative.flex.items-center.overflow-hidden {
  border-radius: 24px !important;
  margin: 15px 20px 30px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(102, 45, 145, 0.3) !important; /* حدود بنفسجية أنيقة */
  min-height: 180px !important; /* إعطاء البانر ارتفاع مناسب */
}

/* في الجوال نقلل الهوامش شوي */
@media (max-width: 767px) {
  main#main > section.relative.flex.items-center.overflow-hidden {
    margin: 10px 15px 20px !important;
    border-radius: 16px !important;
    min-height: 140px !important;
  }
}

/* 2. الخلفية وإضاءات النيون (الخلفية البديلة لـ bg-secondary) */
main#main > section .bg-secondary.absolute.inset-0 {
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.9), rgba(5, 5, 5, 0.95)) !important;
}

/* إضاءة برتقالية خفيفة من اليمين */
main#main > section .bg-secondary.absolute.inset-0::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(247, 147, 30, 0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* إضاءة بنفسجية خفيفة من اليسار */
main#main > section .bg-secondary.absolute.inset-0::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(102, 45, 145, 0.2), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* 3. عنوان القسم (مثل: اشتراكات) */
main#main > section h1.text-foreground {
  color: #FFFFFF !important;
  font-size: 2.8rem !important; /* تكبير الخط ليكون عنوان رئيسي قوي */
  font-weight: 900 !important;
  text-shadow: 0 5px 15px rgba(0,0,0,0.8), 0 0 25px rgba(247, 147, 30, 0.2) !important;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  margin: 0 !important;
}

/* في الجوال نصغر الخط شوي */
@media (max-width: 767px) {
  main#main > section h1.text-foreground {
    font-size: 2rem !important;
  }
}

/* 4. خط مشع تحت العنوان (Neon Underline) */
main#main > section h1.text-foreground::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0; /* التثبيت من اليمين (RTL) */
  width: 80px; /* طول الخط */
  height: 5px; /* سماكة الخط */
  background: linear-gradient(90deg, var(--u-orange), var(--u-purple));
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(247, 147, 30, 0.6);
  transition: width 0.4s ease !important;
}

/* حركة تمدد للخط عند تمرير الماوس على البانر */
main#main > section.relative.flex.items-center.overflow-hidden:hover h1.text-foreground::after {
  width: 100%; /* يتمدد الخط على كامل الكلمة */
}
/* ======================================================
   Pixel Store - Luxury Reviews Section (قسم التقييمات الملكي)
====================================================== */

/* 1. الحاوية الأساسية لقسم التقييمات */
#reviews {
  margin-top: 40px !important;
  padding: 30px !important;
  background: rgba(10, 10, 10, 0.4) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5) !important;
}

/* عنوان القسم */
#reviews h2 {
  color: #FFFFFF !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  text-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
  margin-bottom: 10px !important;
}

/* 2. كروت الإحصائيات الزجاجية (اليمين واليسار) */
#reviews .flex-col.md\:flex-row > div {
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.8), rgba(15, 15, 15, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

#reviews .flex-col.md\:flex-row > div:hover {
  border-color: rgba(102, 45, 145, 0.4) !important; /* إطار بنفسجي عند التمرير */
  box-shadow: 0 10px 30px rgba(102, 45, 145, 0.15) !important;
  transform: translateY(-3px) !important;
}

/* 3. الرقم الكبير (0.0) والنجوم */
#reviews .tracking-wide.uppercase {
  color: #aaaaaa !important;
  font-size: 0.9rem !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
}

#reviews p.text-lg.font-semibold {
  font-size: 3.5rem !important; /* تكبير الرقم */
  font-weight: 900 !important;
  background: linear-gradient(90deg, var(--u-orange), #FFD700) !important; /* لمعة ذهبية/برتقالية */
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 25px rgba(247, 147, 30, 0.3) !important;
  line-height: 1 !important;
  margin-left: 10px !important;
}

/* تكبير النجوم وتلوينها */
#reviews svg.text-muted-foreground {
  color: #333333 !important; /* لون النجوم الفارغة داكن وفخم */
  width: 22px !important;
  height: 22px !important;
  transition: all 0.3s ease !important;
}

/* 4. زر "اكتب تقييم" */
#reviews button.btn-outlined,
#reviews a.btn-outlined {
  background: rgba(247, 147, 30, 0.05) !important;
  border: 1px solid var(--u-orange) !important;
  color: var(--u-orange) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  border-radius: 12px !important;
  padding: 12px !important;
  transition: all 0.3s ease !important;
  margin-top: 15px !important;
  width: 100% !important;
}

#reviews button.btn-outlined:hover,
#reviews a.btn-outlined:hover {
  background: linear-gradient(135deg, #F9AB50 0%, var(--u-orange) 100%) !important;
  color: #000000 !important;
  box-shadow: 0 5px 20px rgba(247, 147, 30, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* 5. أشرطة التقييم (Progress Bars) */
/* خلفية الشريط */
#reviews .bg-secondary.h-1 {
  height: 8px !important; /* زيادة سماكة الشريط */
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.8) !important;
}

/* الشريط المعبأ */
#reviews .bg-accent.h-1 {
  height: 100% !important;
  background: linear-gradient(90deg, var(--u-purple), var(--u-orange)) !important; /* تدرج نيون */
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(247, 147, 30, 0.5) !important;
}

/* النصوص بجانب الأشرطة (5 نجوم، 4 نجوم...) */
#reviews .text-foreground.w-\[42px\] {
  color: #dddddd !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}
#reviews .text-muted.w-10 {
  color: var(--u-orange) !important;
  font-weight: 900 !important;
}

/* 6. حالة "لا توجد تقييمات" والخط الفاصل */
#reviews .border-y {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

#reviews > .flex-col > p.text-muted {
  text-align: center !important;
  color: #888888 !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  padding: 10px 0 20px !important;
}
/* ======================================================
   Pixel Store - Quick View Modal (نافذة النظرة السريعة للمنتج)
====================================================== */

/* 1. الصندوق الأساسي للنافذة المنبثقة */
#product-quick-view-modal .bg-background {
  background: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(102, 45, 145, 0.4) !important; /* إطار بنفسجي فخم */
  border-radius: 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(102, 45, 145, 0.15) !important;
  color: #ffffff !important;
}

/* 2. الهيدر (العنوان وزر الإغلاق) */
#product-quick-view-modal h2#quick-view-title {
  color: #FFFFFF !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* زر الإغلاق (X) */
#product-quick-view-modal button[command="close"] {
  color: #cccccc !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transition: all 0.3s ease !important;
  border-radius: 12px !important;
}
#product-quick-view-modal button[command="close"]:hover {
  color: var(--u-orange) !important;
  background: rgba(247, 147, 30, 0.1) !important;
  transform: rotate(90deg) scale(1.1) !important;
}

/* 3. تفاصيل المنتج (العنوان، السعر، والوصف القصير) */
/* اسم المنتج */
#product-main-section h1 {
  color: #FFFFFF !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* السعر الحالي والقديم */
#product-main-section [data-product-price] {
  color: var(--u-orange) !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 15px rgba(247, 147, 30, 0.3) !important;
}
#product-main-section [data-product-price-old] {
  color: #777777 !important;
  text-decoration-color: #ff4d4d !important;
}

/* الوصف القصير */
#product-main-section .prose.prose-sm p {
  color: #EAEAEA !important;
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 12px 15px !important;
  border-radius: 10px !important;
  border-right: 3px solid var(--u-orange) !important;
}

/* 4. إعدادات نموذج إشعار التوفر (أعلمني عند التوفر) */
#notify-me-dialog-wrapper .bg-background {
  background: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(102, 45, 145, 0.4) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
}

#notify-me-dialog-wrapper h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* حقول النموذج (الاسم، البريد، الجوال) */
#notify-me-dialog-wrapper input.form-input,
#notify-me-dialog-wrapper .border-input {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}
#notify-me-dialog-wrapper input.form-input:focus,
#notify-me-dialog-wrapper .border-input:focus-within {
  border-color: var(--u-orange) !important;
  box-shadow: 0 0 12px rgba(247, 147, 30, 0.3) !important;
}

/* 5. الفوتر (رابط عرض كل التفاصيل) */
#quick-view-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
#quick-view-footer a {
  color: var(--u-orange) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  transition: all 0.3s ease !important;
  display: inline-block;
}
#quick-view-footer a:hover {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(247, 147, 30, 0.5) !important;
  transform: translateY(-2px) !important;
}
/* ======================================================
   Pixel Store - Testimonials Section (قسم قالوا عنا)
====================================================== */

/* 1. عنوان القسم (قالوا عنا؟) */
.section-testimonials h2 {
  color: #FFFFFF !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  text-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

/* 2. كرت التقييم (التصميم الزجاجي) */
.section-testimonials .embla__slide article {
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.8), rgba(15, 15, 15, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important; /* توزيع متساوي للمحتوى */
}

/* توهج الكرت عند تمرير الماوس */
.section-testimonials .embla__slide article:hover {
  border-color: rgba(247, 147, 30, 0.4) !important; /* إطار برتقالي خفيف */
  box-shadow: 0 15px 40px rgba(247, 147, 30, 0.15) !important;
  transform: translateY(-5px) !important;
}

/* تأثير علامة الاقتباس (") في خلفية الكرت */
.section-testimonials .embla__slide article::before {
  content: '”';
  position: absolute;
  top: -20px;
  left: 20px; /* التثبيت يسار (RTL) */
  font-size: 120px;
  color: rgba(255, 255, 255, 0.03);
  font-family: serif;
  line-height: 1;
  pointer-events: none;
}

/* 3. النجوم (تلميع الذهبي) */
.section-testimonials .text-warning {
  color: #FFD700 !important; /* لون ذهبي مشع */
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)) !important; /* توهج حول النجوم */
}

/* 4. نص التقييم (رأي العميل) */
.section-testimonials article p {
  color: #EAEAEA !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  font-style: italic !important;
  margin-top: 15px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 5. اسم العميل */
.section-testimonials article h3 {
  color: var(--u-orange) !important; /* لون برتقالي فخم لاسم العميل */
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: capitalize !important; /* تكبير أول حرف للأسماء الإنجليزية */
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important; /* خط فاصل خفيف فوق الاسم */
  padding-top: 15px !important;
  margin-top: auto !important; /* دفع الاسم للأسفل دائمًا */
}

/* 6. شريط التمرير (Progress Bar) اللي تحت السلايدر */
.section-testimonials .embla__progress {
  background: rgba(255, 255, 255, 0.05) !important;
  height: 6px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.section-testimonials .embla__progress-bar {
  background: linear-gradient(90deg, var(--u-purple), var(--u-orange)) !important;
  box-shadow: 0 0 10px rgba(247, 147, 30, 0.5) !important;
  height: 100% !important;
  border-radius: 10px !important;
}

/* 7. أزرار التقليب (السابق والتالي) */
.section-testimonials .embla__prev,
.section-testimonials .embla__next {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  transition: all 0.3s ease !important;
}

.section-testimonials .embla__prev:hover,
.section-testimonials .embla__next:hover {
  background: rgba(247, 147, 30, 0.1) !important;
  border-color: var(--u-orange) !important;
  color: var(--u-orange) !important;
  box-shadow: var(--shadow-orange) !important;
}
/* ======================================================
   Pixel Store - Luxury Legal Pages (تنسيق صفحات السياسات)
====================================================== */

/* 1. الحاوية الأساسية للنص */
.prose-theme {
    background: rgba(15, 15, 15, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    padding: 40px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
    color: #e0e0e0 !important;
    line-height: 1.8 !important;
}

/* 2. العناوين الرئيسية (المواد) */
.prose-theme h2, .prose-theme h3 {
    color: var(--u-orange) !important;
    font-weight: 900 !important;
    border-right: 4px solid var(--u-purple) !important; /* خط جانبي بنفسجي */
    padding-right: 15px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    text-shadow: 0 2px 10px rgba(247, 147, 30, 0.2) !important;
}

/* 3. تنسيق القوائم (1, 2, 3...) */
.prose-theme ol {
    margin-top: 20px !important;
    padding-right: 20px !important;
}

.prose-theme ol li {
    margin-bottom: 15px !important;
    position: relative;
    padding-right: 10px;
}

/* تلوين الأرقام بالبرتقالي */
.prose-theme ol li::marker {
    color: var(--u-orange) !important;
    font-weight: bold !important;
}

/* 4. إبراز الكلمات القوية (بكسل ستور، المستهلك..) */
.prose-theme strong {
    color: #ffffff !important;
    background: rgba(102, 45, 145, 0.2) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

/* 5. روابط التنقل (Breadcrumbs) العلوية */
nav[aria-label="breadcrumb"] ol li {
    color: var(--text-muted) !important;
}

nav[aria-label="breadcrumb"] a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

nav[aria-label="breadcrumb"] a:hover {
    color: var(--u-orange) !important;
}

/* 6. تحسين شكل النصوص في الجوال */
@media (max-width: 768px) {
    .prose-theme {
        padding: 20px !important;
        font-size: 0.95rem !important;
    }
    
    .section-categories h1, .section-pages h1 {
        font-size: 1.8rem !important;
    }
}

/* 7. إخفاء أي شارات برمجية زائدة تظهر في النص (Citations) */
.citation-10895, .citation-10894, .citation-end-10895 {
    display: inline !important;
    color: inherit !important;
}

/* تنسيق الخط الفاصل في الفوتر لصفحة السياسات */
.border-border-light {
    border-color: rgba(255, 255, 255, 0.05) !important;
}
/* ======================================================
   Pixel Store - All Categories Page (تنسيق شبكة التصنيفات)
====================================================== */

/* 1. تضبيط شبكة التصنيفات (Grid) */
[data-template="list_categories"] .grid, 
section.px-4.pb-16 .grid {
    gap: 25px !important;
    display: grid !important;
}

/* 2. كرت التصنيف - تحويله لشكل مستطيل وفخم */
[data-template="list_categories"] .group.flex-col,
section.px-4.pb-16 .group.flex-col {
    background: var(--surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    text-decoration: none !important;
}

/* حركة الكرت عند التمرير */
[data-template="list_categories"] .group.flex-col:hover,
section.px-4.pb-16 .group.flex-col:hover {
    transform: translateY(-10px) !important;
    border-color: var(--u-purple) !important;
    box-shadow: var(--shadow-purple) !important;
}

/* 3. الصورة - إجبارها على الشكل المستطيل العرضي */
[data-template="list_categories"] .aspect-square,
section.px-4.pb-16 .aspect-square {
    aspect-ratio: 16 / 9 !important; /* شكل مستطيل سينمائي */
    height: auto !important;
    border-radius: 14px !important;
    background: #000 !important; /* خلفية سوداء تحت الصورة */
}

[data-template="list_categories"] img,
section.px-4.pb-16 img {
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
}

[data-template="list_categories"] .group:hover img,
section.px-4.pb-16 .group:hover img {
    transform: scale(1.1) !important; /* زووم ناعم للصورة */
}

/* إخفاء الطبقة البيضاء الشفافة الافتراضية */
[data-template="list_categories"] .bg-white\/10 {
    display: none !important;
}

/* 4. عنوان التصنيف (مثل: اشتراكات) */
[data-template="list_categories"] h3,
section.px-4.pb-16 h3 {
    color: #FFFFFF !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    margin-top: 12px !important;
    margin-bottom: 5px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
    transition: color 0.3s ease !important;
}

[data-template="list_categories"] .group:hover h3,
section.px-4.pb-16 .group:hover h3 {
    color: var(--u-orange) !important;
}

/* 5. توافق تام مع جميع الشاشات */
@media (max-width: 768px) {
    /* في الجوال نخليها حبتين جنب بعض بشكل مستطيل أنيق */
    [data-template="list_categories"] .grid,
    section.px-4.pb-16 .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    [data-template="list_categories"] h3,
    section.px-4.pb-16 h3 {
        font-size: 1.1rem !important;
    }
}

@media (min-width: 1024px) {
    /* في الكمبيوتر 3 تصنيفات في السطر لراحة العين */
    [data-template="list_categories"] .grid,
    section.px-4.pb-16 .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}