* { padding: 0; margin: 0; }
body { font-family: Arial, sans-serif; margin: 0px; }

/* في ملف CSS الخاص بك */
#games-table {
    content-visibility: auto; 
    contain-intrinsic-size: 1000px; /* تقدير ارتفاع الجدول غير المرئي */
}
.bottom-spacer-box {
    width: 100%;
    height: 60px; /* الارتفاع اللي هيرفع الجدول فوق الـ Nav Bar */
    margin-top: 10px !important; /* مسافة بسيطة تحت الجدول */
    
    /* 👈 إلغاء كل الألوان والحدود والتوهج */
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    
    display: block;
    position: relative;
    pointer-events: none; /* عشان لو حد داس عليه ميحسش بحاجة */
    z-index: 1;
}
/* تنسيق شريط المساحة النيون */
.storage-container {
    width: 100%;
    background: #1a1a1a;
    border-radius: 10px;
    height: 30px;
    position: relative;
    margin: 15px 0;
    border: 1px solid #333;
    overflow: hidden;
}

.storage-bar {
    height: 100%;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    width: 0%; /* سيتغير بالجافا سكريبت */
    transition: width 0.5s ease-in-out;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
}

.storage-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
}

.neon-text-yellow { color: #ffff00 !important; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00 !important; }
/* اللون الأبيض النيون */
.neon-text-white {
    color: #ffffff !important;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ffffff,
        0 0 40px #ffffff !important;
}


/* ضبط المسافة للموبايل لضمان الشفافية والرفع */
@media screen and (max-width: 1024px) {
    .bottom-spacer-box {
        height: 55px; /* مقاس مناسب لارتفاع شريط الموبايل */
        margin-top: 5px !important;
    }
}
/* --- تعديل التنوير النيون الشيك (بدون مستطيل) --- */
/* --- التنسيق الأساسي للأزرار (لضمان السلاسة) --- */
.nav-item {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* أنعم حركة ممكنة */
    position: relative;
    background: transparent !important;
    border: none !important;
}

/* 🚀 تأثير الـ HOVER البسيط (عند مرور الماوس) */
.nav-item:hover {
    transform: scale(1.08); /* تكبير بسيط جداً غير ملحوظ لكن مريح للعين */
}

.nav-item:hover .nav-icon {
    /* توهج خفيف جداً للأيقونة عند الوقوف عليها */
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.5));
}

.nav-item:hover .nav-text {
    /* تفتيح لون النص سنة بسيطة */
    color: #00d2ff !important;
    transition: 0.3s;
}

/* 🚀 التنسيق الحالي (Active) - اللي إحنا ثبتناه */
.nav-item.active-nav {
    background: transparent !important;
}

/* الخط النيون الرفيع فوق الزرار النشط */
.nav-item.active-nav::before {
    content: "";
    position: absolute;
    top: -2px; 
    left: 25%; 
    width: 50%; 
    height: 3px;
    background: #00d2ff;
    box-shadow: 0 0 10px #00d2ff;
    border-radius: 0 0 5px 5px;
}

/* تنوير الأيقونة والنص في الصفحة النشطة */
.nav-item.active-nav .nav-icon, 
.nav-item.active-nav .nav-text {
    color: #00d2ff !important;
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.6) !important;
    transform: scale(1.05); /* تثبيت تكبير بسيط للصفحة اللي إنت واقف فيها */
}
/* ==========================================================
   شريط التنقل السفلي الموحد (الكمبيوتر والموبايل)
   ========================================================== */
.main-bottom-nav {
    position: fixed !important; 
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 65px !important; /* الحجم الطبيعي للكمبيوتر */
    background: #0a0b10 !important; 
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important; 
    justify-content: space-around !important;
    align-items: center !important;
    border-top: 2px solid #00d2ff !important;
    box-shadow: 0 -5px 20px rgba(0, 210, 255, 0.5) !important;
    z-index: 9999999 !important;
    backdrop-filter: blur(10px);
}

.nav-item {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    min-width: 80px !important;
    transition: 0.3s all ease !important;
}

.nav-icon {
    font-size: 1.5rem !important; /* حجم الأيقونة في الكمبيوتر */
}

.nav-text {
    font-size: 0.85rem !important; /* حجم الخط في الكمبيوتر */
    font-family: 'Almarai', sans-serif !important;
    font-weight: bold !important;
}

#mini-cart {
    display: flex;
    position: fixed;
    /* نرفعها فوق الشريط بمسافة كافية */
    bottom: 80px !important; 
    /* نغير الـ right ليكون أقصى اليمين بعيداً عن أزرار التنقل */
    right: 25px !important;  
    cursor: pointer;
    /* نرفع الـ z-index ليكون أعلى من الشريط (9999999) */
    z-index: 10000000 !important; 
    justify-content: center;
    align-items: center;
    opacity: 0.95;
}
.cart-icon-wrapper {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    background: rgba(10, 11, 16, 0.9) !important;
    border-radius: 50% !important;
    /* نلغي الـ hidden عشان الـ badge يظهر برا الدائرة */
    overflow: visible !important; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* التأكد من أن النور الدوار يتبع نفس الحجم */
.cart-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: 0; 
    padding: 2px;
    background: conic-gradient(from var(--angle), transparent 70%, #00d2ff, #ffffff, #00d2ff);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateCartNeon 3s linear infinite !important;
    border-radius: 50%;
}
#mini-cart-badge {
    position: absolute;
    /* قيم إيجابية لرفعه فوق الأيقونة مباشرة */
    top: -30px !important; 
    right: -10px !important;
    background: rgba(0, 210, 255, 0.95) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    padding: 4px 10px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    text-align: center;
    font-family: "Sansation", sans-serif !important;
    /* توهج نيون لتمييزه */
    box-shadow: 0 0 15px #00d2ff, 0 0 5px #ffffff !important;
    border: 1.5px solid #ffffff !important;
    z-index: 10000001 !important;
}

/* ==========================================================
   تعديلات خاصة بالموبايل فقط (أصغر وأنحف)
   ========================================================== */
@media screen and (max-width: 1024px) {
    .main-bottom-nav {
        height: 55px !important; /* زودناه 5 بكسل عشان الكلام المكسور براحته */
        padding: 0 5px !important;
    }

    .nav-item {
        min-width: 60px !important; 
        flex: 1 !important; /* يخلي كل زرار واخد مساحة متساوية */
        text-align: center !important; /* 👈 أهم سطر للتوسيط الأفقي */
        justify-content: center !important; /* توسيط رأسي */
    }

    .nav-text {
        font-size: 0.65rem !important;
        line-height: 1.1 !important; /* مسافة بسيطة بين السطرين عشان ميزنقوش */
        white-space: normal !important; /* السماح بكسر الكلام */
        display: block !important;
        width: 100% !important;
        text-align: center !important; /* 👈 يضمن إن السطر التاني يجي في النص بالظبط */
    }
}

/* الـ popup اللي هيظهر لما المستخدم يلاقي اللعبة السرية */
#secretPopup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

#secretPopup .popup-content {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  animation: popIn 0.5s ease;
}

/* تنسيق الحاويات - عام */
.recentimage, .recentimageu, .tableimage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 1px 0;
    padding: 0 10px;
    box-sizing: border-box;
}

/* حجم الصور للكمبيوتر فقط */
.recentimage img, .recentimageu img, .tableimage img {
    max-width: 1000px; /* الحجم اللي إنت كنت كاتبه في الأول للكمبيوتر */
    height: auto;     /* خليه auto عشان الصورة متتمطش وشكلها يبوظ */
    display: block;
}

#mini-cart {
    display: flex;
    position: fixed;
    /* نرفعها فوق الشريط بمسافة كافية */
    bottom: 80px !important; 
    /* نغير الـ right ليكون أقصى اليمين بعيداً عن أزرار التنقل */
    right: 25px !important;  
    cursor: pointer;
    /* نرفع الـ z-index ليكون أعلى من الشريط (9999999) */
    z-index: 10000000 !important; 
    justify-content: center;
    align-items: center;
    opacity: 0.95;
}
.cart-icon-wrapper {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    background: rgba(10, 11, 16, 0.9) !important;
    border-radius: 50% !important;
    /* نلغي الـ hidden عشان الـ badge يظهر برا الدائرة */
    overflow: visible !important; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* التأكد من أن النور الدوار يتبع نفس الحجم */
.cart-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: 0; 
    padding: 2px;
    background: conic-gradient(from var(--angle), transparent 70%, #00d2ff, #ffffff, #00d2ff);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateCartNeon 3s linear infinite !important;
    border-radius: 50%;
}
#mini-cart-badge {
    position: absolute;
    /* قيم إيجابية لرفعه فوق الأيقونة مباشرة */
    top: -30px !important; 
    right: -13px !important;
    background: rgba(0, 210, 255, 0.95) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    padding: 4px 10px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    text-align: center;
    font-family: "Sansation", sans-serif !important;
    /* توهج نيون لتمييزه */
    box-shadow: 0 0 15px #00d2ff, 0 0 5px #ffffff !important;
    border: 1.5px solid #ffffff !important;
    z-index: 10000001 !important;
}

/* ================= Delivery Popup ================= */

#deliveryPopup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999999999999999999;
    backdrop-filter: blur(4px);
}

/* الكارت الرئيسي */
.delivery-box {
    background: #ffffff;
    width: 340px;
    max-width: 92%;
    padding: 22px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0,0,0,0.25);
    animation: deliveryPop 0.35s ease;
    font-family: 'Almarai', sans-serif;
}

.delivery-box h3 {
    margin-bottom: 18px;
    color: #144B5E;
    font-size: 20px;
    font-weight: bold;
}

.delivery-box h4 {
    margin-bottom: 18px;
    color: #144B5E;
    font-size: 20px;
    font-weight: bold;
}

/* الحاوية */
.delivery-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* شكل موحد لكل اختيار */
.delivery-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid transparent;
    transition: all 0.25s ease;
    user-select: none;
}

/* أيقونة */
.delivery-option span {
    font-size: 26px;
}

/* ================= الأنواع ================= */

/* 📦 نقل على هاردي */
.delivery-option.transfer {
    background: #e6f2ff;
    color: #0f94d7;
    border-color: #0f94d7;
}

.delivery-option.transfer:hover {
    background: #0f94d7;
    color: #fff;
    transform: translateY(-2px);
}

/* 💻 نقل على اللابتوب */
.delivery-option.laptop {
    background: #e9f7ef;
    color: #1e8449;
    border-color: #1e8449;
}

.delivery-option.laptop:hover {
    background: #1e8449;
    color: #fff;
    transform: translateY(-2px);
}

/* 💾 هارد جاهز بالداتا */
.delivery-option.ready {
    background: #fff7e6;
    color: #aa7e03;
    border-color: #aa7e03;
}

.delivery-option.ready:hover {
    background: #aa7e03;
    color: #fff;
    transform: translateY(-2px);
}

/* زر إلغاء */
.delivery-cancel {
    margin-top: 18px;
    background: transparent;
    border: none;
    color: #ff4d4d;
    font-size: 14px;
    cursor: pointer;
}

.delivery-cancel:hover {
    text-decoration: underline;
}

/* Animation */
@keyframes deliveryPop {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
#secretPopup h2 {
  margin-bottom: 10px;
  color: #2ecc71;
}

#secretPopup p {
  font-size: 18px;
  margin-bottom: 20px;
}

#secretPopup button {
  background: #2ecc71;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  color: #85cccc;
  cursor: pointer;
  font-size: 16px;
}

@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


body {
  font-family: Arial, sans-serif;
  margin: 0;   
  padding: 0;
  
    background-image: url('wall8.jpg');
  background-repeat: repeat;
  background-size: auto;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgb(248, 252, 255);
  opacity: 0.99;
  pointer-events: none;
  z-index: -1;
}
.logz {
  display: flex;
  justify-content: center; 
  align-items: center;     
  gap: 10px;               
  margin-bottom: 0px; 
  
}

.logz img {
  width: 100px;
  margin: 0;
}
#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    left: 20px; /* بدل right: 20px */
    display: none;       /* يظهر فقط عند نهاية الصفحة */
    padding: 10px 15px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    background-color: #144B5E;
    color: white;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background-color 0.2s;
}

#scrollTopBtn:hover {
    background-color: #0d3a66;
}

/* شبكة الكروت */
.recent-container{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  margin: 5px auto;
  max-width: 95%;
}
.xclear{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  margin: 5px auto;
  max-width: 95%;
}

#mini-cart-badge {
  position: absolute;
  top: -25px;
  right: -5px;
  background: #6eb9ffe0;
  color: rgb(0, 0, 0);
  font-weight: bold;
  padding: 15px 0px;
  border-radius: 50%;
  font-size: 14px;
  text-align: center;
  font-family: "Sansation", sans-serif;
}
.game-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: 'Almarai', sans-serif;
  overflow: hidden;
}

.game-card img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-bottom: 5px;
}

.game-card h3 {
  font-size: 20px;
  margin: 5px 0;
  height: 35px;
  overflow: visible;
}
img {
    -webkit-touch-callout: none; /* Safari iOS */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       
    user-select: none;           
}
.game-card p {
  font-size: 18px;
  color: #444;
  margin-top: 30px;
}

.overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
}

.game-card .remove-btn {
  background-color: #dc3545; /* لون خلفية أحمر */
  color: #fff; /* لون الخط أبيض */
  border: none;
  border-radius: 5px;
  padding: 3px 0px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
  width: 100%; /* لجعله يأخذ نصف مساحة البطاقة */
  margin-left: 5px; /* لإضافة مسافة بينه وبين زر "إضافة للسلة" */
  text-align: center;
}

.game-card .remove-btn:hover {
  background-color: #c82333; /* لون أغمق عند مرور الماوس */
}

.game-card button {
  background: #51b1ff;
  color: #fff;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Almarai', sans-serif;
}

.game-card button:hover {
  background: #05517e;
}
.logz h1 {
  font-size: 32px;
  font-weight: bold;
  color: #0f94d7;
  background: #e6f2ff;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  margin-bottom: 10px; 
  width: auto;    
  margin: 0;      
  text-align: center;
  font-family: "Bree Serif", serif;
}

.added-to-cart {
    /* تغيير الخلفية لدرجة زرقاء شفافة جداً تليق مع النيون */
    background-color: rgba(0, 210, 255, 0.2) !important; 
    
    /* إضافة برواز نيون مضيء */
    border: 1px solid #00d2ff !important;
    
    /* إضافة توهج (Glow) داخلي وخارجي للكارت */
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4), 
                inset 0 0 10px rgba(0, 210, 255, 0.2) !important;
    
    تكبير بسيط للكارت عشان يبان إنه اختير
    transform: scale(1.02);
    transition: all 0.3s ease;
    position: relative;
    z-index: 5;
}

تعديل لون النص جوه الكارت المضاف عشان ينور أبيض
.added-to-cart h3 {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
}

.added-to-cart p {
    color: #FF5F1F !important;
    font-weight: bold;
}

.cart-controls {
  display: none;
  margin-top: 5px;
  font-size: 14px;
}


/* تنسيق غلاف الصورة والنص */
.thumb-wrapper {
    text-align: center;
    width: auto;
}

/* حجم الصور في الكمبيوتر */
.thumbnail {
    width: 450px; /* حجم معقول للديسك توب */
    /* height: 700px; */
    border-radius: 10px;
    transition: transform 0.3s ease;
    min-height: 250px;
}

.thumb-text {
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
}

.thumbnail:hover { transform: scale(1.2); transition: all 1s ease;}

#hide-cart-btn {
  width: 100%; 
  display: block;
  background: #0f94d7;
  color: white;
  border: none;
  margin: 10px 0 0 0;
  border-radius: 5px;
  padding: 5px 0;
  font-size: 16px;
  font-family: 'Almarai', sans-serif;
  white-space: nowrap;       
  overflow: hidden;          
  text-overflow: ellipsis;   
  box-sizing: border-box;
}

.parent-search {
  display: flex; 
  justify-content: center;
  align-items: center; 
  width: 100%;
  margin-top: 0px; /* ممكن تزود مسافة من فوق */
  position: sticky;  /* تخلي العنصر ثابت عند scroll */
  top: 50px; /* المسافة من أعلى الصفحة قبل ما يبدأ الثبات */
  z-index: 9999; /* للتأكد إنه فوق كل العناصر */
}

/* الجزء الخاص بـ search-container */
#search-container {
  display: flex;
  gap: 5px;
  width: max-content;
}
#search-input { width: 300px; padding: 8px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; }
#clear-btn { padding: 8px 12px; font-family: 'Almarai', sans-serif; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; background-color: #ff4d4d; color: white; cursor: pointer; }
#clear-btn:hover { background-color: #e60000; }

.selected-row { background-color: #108ab65a; }

table { margin-top: 10px; font-family: "Lato", sans-serif;
  font-weight: 100; width: 100%; border-collapse: collapse; text-align: center; font-size: 30px; }
th, td { border: 1px solid #ccc; padding: 10px; font-weight: bold; vertical-align: middle; }
/* th { background: #0f94d7; color: white; } */

/* ==========================================================================
   الاستايل الأسطوري: برواز نيون بيلف (Animated Border) - بدون Sticky
   ========================================================================== */

@keyframes rotateNeon {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

/* تعريف خاصية الزاوية للأنيميشن لتشتغل بسلاسة */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

table th {
    /* إلغاء الـ Sticky تماماً */
    position: relative !important; 
    top: auto !important;
    
    padding: 16px 10px !important;
    background: #0a0b10 !important; /* خلفية سوداء عميقة لإبراز النيون */
    color: #00d2ff !important;
    font-family: 'Almarai', sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    text-align: center;
    border: none !important; /* إلغاء البرواز التقليدي */
    overflow: hidden; /* ضروري عشان النور ميتخطاش حدود الخلية */
    z-index: 1;
}

/* الطبقة المضيئة اللي بتلف (البرواز النيون) */
table th::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px; /* سمك خط النور اللي بيلف */
    background: conic-gradient(from var(--angle), transparent 70%, #00d2ff, #ffffff, #00d2ff);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateNeon 3s linear infinite; /* سرعة دوران النور */
    pointer-events: none;
}

/* تأثير التوهج (Glow) الثابت لزيادة الفخامة */
table th::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3),
                inset 0 0 10px rgba(0, 210, 255, 0.1) !important;
    pointer-events: none;
    z-index: -1;
}

/* توهج النص وتأثير الزجاج */
table th {
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.8),
                 0 0 20px rgba(0, 210, 255, 0.4) !important;
    backdrop-filter: blur(10px);
}

/* ضبط المسافات في الموبايل */
@media screen and (max-width: 1024px) {
    table th {
        padding: 12px 5px !important;
        font-size: 11px !important;
    }
}


td[data-label="اسم اللعبة"] { text-align: center; }

.game-img { width: 190px; height: 190px; object-fit: contain; }

.cart {
  position: fixed;
  top: 10px;
  right: 180px;
  width: 320px;
  max-height: calc(100vh - 20px);
  max-width: 320px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #108ab65a;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  overflow: hidden;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Almarai', sans-serif; 
}
.cart-logo { display: flex; justify-content: center; margin-bottom: 5px; }
.cart-logo img { display: block; }
.cart h3 { margin-top: 0; font-size: 18px; text-align:center; }
.cart-info { overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; display: block; background: #108ab65a; padding: 3px 6px; border-radius: 5px; font-weight: bold; margin-top: 5px; text-align: center; }
.cart-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(3 * 80px + 20px);
  overflow-y: auto;
  padding: 5px;
}
.cart-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  background: #f9f9f9;
}
.cart-list img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
td[data-label="اختيار"] {
    position: relative;
    text-align: center; /* لجعل المحتوى يتوسط الخلية أفقياً */
    vertical-align: middle; /* لجعل المحتوى يتوسط الخلية رأسياً */
}

td[data-label="اختيار"] label {
    display: inline-block; /* لجعل الـ label يأخذ فقط المساحة التي يحتاجها */
    padding: 10px 0%; /* لإضافة مساحة أكبر حول مربع الاختيار */
    cursor: pointer;
    user-select: none;
    position: relative; /* مهم لضمان عمله بشكل صحيح */
}
.cart-list div {
  display: flex;
  flex-direction: column;
  white-space: normal;
}
.cart-list span {
  font-weight: bold;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
}
.cart-list button {
  width: 200px; margin-top: 2px; padding: 3px 5px; font-size: 12px; background-color: #ff4d4d; border: none; color: white; font-weight: bold; border-radius: 5px; cursor:pointer;
}
.cart-list button:hover { background-color: #e60000; }
.copy-btn {
  margin-top: 2px; font-family: 'Almarai', sans-serif; padding: 7px 10px; cursor: pointer; background: #1f76a1; color: white; border: none; width: 100%; font-weight: bold; font-size: 16px; border-radius: 5px;
}

#imageModal {
  display: none; position: fixed; z-index: 2000; padding-top: 60px; left: 0; top: 0;
  width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8);
  z-index: 10000000000;
}
#imageModal img { margin:auto; display:block; max-width:90%; max-height:80%; transition: transform 0.3s ease-in-out; }
#imageModal .modal-close { position:absolute; top:15px; right:35px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer; }
#imageModal .prev, #imageModal .next {
  position: absolute; top:50%; color:white; font-size:50px; font-weight:bold; cursor:pointer;
  user-select:none; padding:0 12px; transform:translateY(-50%);
}
#imageModal .prev { left:10px; }
#imageModal .next { right:10px; }

/* حاوية الأزرار */
#grid1-buttons,
#grid2-buttons {
    display: flex;
    justify-content: center; /* يخليهم في النص أفقياً */
    gap: 10px;              /* مسافة بين الزرار */
    margin: 20px 0;         /* مسافة فوق وتحت */
}

/* حاوية الأزرار تتوضع على يمين الصفحة */
#grid1-buttons,
#grid2-buttons {
    display: flex;
    justify-content: center; /* يحرك المحتوى لليمين */
    gap: 10px; /* مسافة بين الزرار */
    margin: 10px 0; /* مسافة بسيطة فوق وتحت */
}

/* تنسيق الزرار */
#grid1-buttons button,
#grid2-buttons button {
    padding: 10px 10px;
    font-size: 12px;
    font-weight: bold;
    background-color: #4a84c7a4; /* أزرق جميل */
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    font-family: 'Almarai', sans-serif;
}

/* تأثير عند المرور بالفأرة */
#grid1-buttons button:hover,
#grid2-buttons button:hover {
    background-color: #173d49; /* أزرق أغمق */
    transform: scale(1.10);
}

/* زرار الرجوع يظهر/يختفي */
#grid1-buttons button.back-btn,
#grid2-buttons button.back-btn {
    background-color: #FF4D4D; /* أحمر للرجوع */
}



/* إضافي: إذا حبيت تخلي الزرار ثابت في النص عند الهواتف */
@media screen and (max-width: 768px) {
    #grid1-buttons,
    #grid2-buttons {
        flex-direction: row;
        gap: 8px;
        justify-content: center; /* يبقى دائمًا في يمين الصفحة */
    }
}
#alpha-filter {
    display: flex;
    justify-content: center; /* في وسط الصفحة */
    flex-wrap: wrap;
    margin: 20px 0;
    gap: 5px; /* مسافة بين الحروف */
}

#alpha-filter .alpha-btn {
    padding: 8px 12px;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #1c55979c;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

#alpha-filter .alpha-btn:hover {
    background-color: #2b89c7;
    transform: scale(1.1);
}

#alpha-filter .alpha-btn.active {
    background-color: #144B5E;
    color: white;
    border-color: #0D4EA1;
    transform: scale(1.1);
}

/* Media Queries */
@media screen and (max-width: 1024px) {
  /* تنسيق منطقة اللوجو بالكامل */
.logz {
    display: flex;
    flex-direction: column; /* يخلي اللوجو فوق والكلمة تحته */
    align-items: center;    /* توسيط أفقي لكل اللي جواه */
    justify-content: center;
    width: 100%;
    margin: 20px auto;      /* مسافة من فوق وتحت وتوسيط للمنطقة كلها */
    text-align: center;
    box-sizing: border-box;
}

/* تصغير وصيانة صورة اللوجو */
.logz img {
    width: 100%;
    max-width: 220px;       /* ده الحجم المناسب عشان ميبقاش ضخم */
    height: auto;
    display: block;
    margin-bottom: 10px;    /* مسافة بين اللوجو وبين الكلمة اللي تحته */
}

/* تنسيق العنوان اللي تحت اللوجو (Mansoura Computer Games) */
.logz h1 {
    font-size: 24px;        /* حجم الخط */
    margin: 0;
    width: 90%;             /* عشان ميتخطاش عرض الشاشة في الموبايل */
    word-wrap: break-word;
}

/* تعديل خاص للموبايل عشان نضمن الـ Zoom out */
@media screen and (max-width: 768px) {
    .logz img {
        max-width: 150px;   /* حجم أصغر بكتير في الموبايل */
    }
    .logz h1 {
        font-size: 18px;    /* تصغير الخط في الموبايل */
    }
}
  .logz h1 {
    font-size: 28px;
    font-weight: bold;
    color: #0f94d7;
    background: #e6f2ff;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: auto;
    margin: 0;
    text-align: center;
  }
  
  #hide-cart-btn {
    width: 100%; 
    display: block;
    background: #0f94d7;
    color: white;
    border: none;
    margin: 10px 0 0 0;
    border-radius: 5px;
    padding: 5px 0;
    font-size: 16px;
    font-family: 'Almarai', sans-serif;
    white-space: nowrap;       
    overflow: hidden;          
    text-overflow: ellipsis;   
    box-sizing: border-box;
  }
  #alpha-filter {
    display: grid;
    grid-template-columns: repeat(14, auto); /* 14 حرف في كل صف */
    justify-content: center; /* تمركز الصفوف */
    gap: 4px;
    padding: 10px 0;
}

#alpha-filter .alpha-btn {
    font-size: 10px;       /* حجم أصغر */
    padding: 5px 6px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #1c55979c;
    cursor: pointer;
    color: white;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

#alpha-filter .alpha-btn.active {
    background-color: #144B5E;
    color: #fff;
}
  #cart-icon {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #8d8f0a54;
    color: white;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1100;
    justify-content: center;
    align-items: center;
  }
  table {
    table-layout: auto !important;
    width: 100% !important;
    font-size: 16px;
  }
  .game-img {
    width: 100% !important; /* خلي الصورة تملا العمود بتاعها */
    max-width: 80px !important; /* بس متزدش عن حجم معين */
    height: auto !important;
  }

  th, td {
    padding: 5px 2px !important;
    word-wrap: break-word; /* عشان لو الاسم طويل ينزل سطر جديد وما يوسعش الجدول */
  }
}
  #mini-cart {
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 85px !important;
    cursor: pointer;
    z-index: 1100;
    justify-content: center;
    align-items: center;
    opacity:0.95;
  }
  #mini-cart img {
    display: block;
  }
  #mini-cart-badge {
    position: absolute;
    top: -18px;
    right:-10px;
    background: #6eb9ffe0;
    color: rgb(0, 0, 0);
    font-weight: bold;
    padding: 10px 0px;
    border-radius: 50%;
    font-size: 13px;
    text-align: center;
    font-family: "Sansation", sans-serif;
    width: 60px !important;
    height: 15px !important;
  }
  .cart {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 350px ;
    height: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    display: none ;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1000 !important;
  }
  th, td {
    padding: 6px 4px !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center;
  }
  td[data-label="اسم اللعبة"], th[data-label="اسم اللعبة"] {
    min-width: 120px !important;
  }
  td[data-label="المساحة"], th[data-label="المساحة"] {
    min-width: 30px !important;
    white-space: nowrap !important;
  }
  td[data-label="الصورة"], th[data-label="الصورة"] {
    width: 100px !important;
  }
  td[data-label="ID"], th[data-label="ID"],
  td[data-label="اختيار"], th[data-label="اختيار"] {
    min-width: auto !important;
  }
  .game-img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain;
  }

.parent-search {
  display: flex; 
  justify-content: center;
  align-items: center; 
  width: 100%;
  margin-top: 20px; /* ممكن تزود مسافة من فوق */
  /* margin-left: 200px; */
  position: sticky;  /* تخلي العنصر ثابت عند scroll */
  top: 50px; /* المسافة من أعلى الصفحة قبل ما يبدأ الثبات */
  z-index: 9999; /* للتأكد إنه فوق كل العناصر */
}

/* الجزء الخاص بـ search-container */
#search-container {
  display: flex;
  gap: 5px;
  width: max-content;
}

@media screen and (max-width: 1024px) {
    #thumbnail-container {
        gap: 10px; /* تقليل المسافة بين الصور في الموبايل */
        padding: 10px;
            
    }

    /* تصغير الصور عشان ميزقوش الصفحة يمين */
    .thumbnail {
        width: 200px !important; /* حجم صغير للموبايل */
        height: auto;
    }

    .thumb-text {
        font-size: 13px !important; /* تصغير الخط عشان مياخدش مساحة */
    }
    
    /* التريك بتاع الـ Zoom Out: لو الصورتين لسه كبار، خليهم تحت بعض */
    /* لو عايزهم يفضلوا جنب بعض سيب السطر اللي جاي ده، لو عايزهم تحت بعض فعلّه */
    /* #thumbnail-container { flex-wrap: wrap; } */
}


  /* #thumbnail-container {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0px 0px 10px auto !important;
    position: relative !important;
    width: auto !important;
  }
  .thumbnail {
    width: 200px !important;
    height: 200px !important;
    object-fit: cover !important;
    cursor: pointer !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    transition: transform 0.2s ease-in-out !important;
  } */
  .thumbnail:hover { transform: scale(1.2) !important; transition: all 1s ease !important; }


#clear-btn {
  padding: 8px 12px !important;
  font-size: 16px !important;
}

#thumbnail-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 50px auto 20px auto;
  
}

.thumb-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.thumb-text {
    font-family: 'Almarai', sans-serif; 
    margin-top: 8px;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    color: #0f94d7;
    background: #e6f2ff;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: 150px;
}

.recent-container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 10px;
  overflow: hidden;
}
.xclear{

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 10px;
  overflow: hidden;
}



.game-card h3 {
  font-size: 20px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;  
  overflow: hidden;
  word-break: break-word;  
  white-space: normal;
  box-sizing: border-box;
  min-height: calc(16px * 4);  
}
.game-card p {
  font-size: 18px;
  color: #444;
  margin-top: 0px;
  font-family: "Sansation", sans-serif
}
.game-card button {
  background: #51b1ff;
  color: #fff;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Almarai', sans-serif;
}


@media screen and (min-width: 1025px) {
  .game-img {
    width: 190px !important;
    height: 190px !important;
    object-fit: contain;
  }

}

/* موبايل */
@media (max-width: 480px) {
    .delivery-box {
        width: 95%;
        padding: 18px;
    }
}
@media screen and (max-width: 1024px) {
    /* أي كود هنا هيتنفذ على الموبايل بس */
    
    .recentimage img, .recentimageu img, .tableimage img {
        max-width: 350px !important; /* حجم أصغر للموبايل عشان ميزقش الصفحة */
        height: auto !important;     /* الحفاظ على أبعاد الصورة */
    }

    .logz img {
        max-width: 160px !important; /* تصغير اللوجو في الموبايل كمان */
    }
}


body {
  font-family: Arial, sans-serif;
  margin: 0;   
  padding: 0;
  /* تغيير: شلنا الصورة وحطينا لون داكن جداً */
  background-color: #0a0b10; 
  color: #ffffff; /* تغيير: الخط بقى أبيض في كل الموقع */
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* تغيير: التعتيم بقى مائل للأسود بدل الأبيض */
  background: rgba(10, 11, 16, 0.96); 
  pointer-events: none;
  z-index: -1;
}

.game-card {
  border: 1px solid rgba(255,255,255,0.1); /* برواز خفيف */
  background: rgba(255,255,255,0.05); /* خلفية شفافة زجاجية */
  color: #ffffff;
  transition: 0s;
}

.game-card:hover {
  border-color: #00d2ff;
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

.game-card h3 {
  color: #ffffff; /* خط أبيض */
}

.game-card p {
        font-size: 27px ; /* تصغير حجم السعر/المساحة */
        margin-bottom: 5px ;
        color: #FF5F1F;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* زرار الإضافة الافتراضي */
.game-card .add-btn {
    display: block; /* مسموح للجافا سكريبت يغيره */
    background-color: rgba(0, 210, 255, 0.05);
    color: #00d2ff;
    border: 1px solid #00d2ff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
    padding: 5px 12px;
    font-size: 20px;
    border-radius: 6px;
    font-family: 'Almarai', sans-serif;
    font-weight: bold;
    cursor: pointer;
    margin: 10px auto 0 auto;
}

.game-card .remove-btn {
  width: fit-content;
}
/* زرار الحذف الافتراضي - نيون أحمر */
.game-card .remove-btn {
    display: none; /* الجافا سكريبت هيظهره لما تختار اللعبة */
    background-color: rgba(255, 77, 77, 0.05);
    color: #ff4d4d;
    border: 1px solid #ff4d4d;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.2);
    padding: 5px 12px;
    font-size: 20px;
    border-radius: 6px;
    font-family: 'Almarai', sans-serif;
    font-weight: bold;
    cursor: pointer;
    margin: 10px auto 0 auto;
}

/* تأثير الـ Hover للاتنين */
.game-card .add-btn:hover { background: #00d2ff; color: #000; box-shadow: 0 0 20px #00d2ff; }
.game-card .remove-btn:hover { background: #ff4d4d; color: #fff; box-shadow: 0 0 20px #ff4d4d; }

@media screen and (max-width: 1024px) {
    /* تعديل الشبكة لعرض 4 كروت في السطر */
    .recent-container, .xclear {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* الرقم 4 هو عدد الأعمدة */
        gap: 8px !important; /* تقليل المسافة جداً عشان الـ 4 كروت يكفوا */
        padding: 10px !important;
        max-width: 100% !important;
        margin: 5px auto !important;
    }

    /* تصغير الكارت ليناسب عرض الـ 4 في السطر */
    .game-card {
        padding: 8px 5px !important;
        border-radius: 10px !important;
        min-width: 0 !important; /* السماح للكارت بالانكماش */
    }

    /* تصغير الصورة داخل الكارت */
    .game-card img {
        width: 88px !important; /* تصغير الصورة عشان الزحمة */
        height: 88px !important;
        margin-bottom: 5px !important;
    }

    /* تصغير الخطوط عشان متضربش في الـ 4 أعمدة */
    .game-card h3 {
        font-size: 15px !important; /* خط صغير جداً ليناسب المساحة */
        line-height: 17px !important;
        font-weight: 700;
        min-height: calc(12px * 4) !important; /* الحفاظ على الـ 4 سطور */
        margin: 5px 0 !important;
    }

    .game-card p {
        font-size: 20px !important; /* تصغير حجم السعر/المساحة */
        margin-bottom: 5px !important;
        color: #FF5F1F;
        font-weight: bold;
    }

    /* تصغير زرار الإضافة ليناسب الكارت الصغير */
    .game-card button {
        font-size: 13px !important;
        padding: 4px 6px !important;
        min-width: 60px !important;
    }
}

/* حاوية الحروف */
#alpha-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02); /* نفس زجاج الـ Grid */
    border-radius: 15px;
    border: 1px solid rgba(0, 210, 255, 0.1);
    margin-bottom: 30px;
}

/* زرار الحرف الواحد */
#alpha-filter .alpha-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Almarai', sans-serif;
    font-weight: bold;
    border-radius: 8px;
    transition: 0.3s all ease-in-out;
    
    /* ستايل النيون الافتراضي */
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}


/* تأثير النيون عند الوقوف عليه */
#alpha-filter .alpha-btn:hover {
    /* تغيير البرواز للون أزرق نيون صريح */
    border-color: #00d2ff !important;
    
    /* إضافة توهج (Glow) طبقات متعددة لزيادة كثافة الضوء */
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6), 
                0 0 20px rgba(0, 210, 255, 0.4), 
                inset 0 0 5px rgba(0, 210, 255, 0.2) !important;
    
    /* لون الخط يقلب أزرق نيون مضيء */
    color: #00d2ff !important;
    
    /* إضافة توهج خفيف للخط نفسه (Text Shadow) */
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.8);
    
    /* حركة الصعود للأعلى مع تكبير بسيط جداً */
    transform: translateY(-5px) scale(1.05);
    
    /* زيادة الشفافية للخلفية عشان تبان زجاجية */
    background: rgba(0, 210, 255, 0.1) !important;
}
/* الحرف المختار (Active) */
#alpha-filter .alpha-btn.active {
    background: #00d2ff !important;
    color: #000 !important;
    box-shadow: 0 0 20px #00d2ff !important;
    border: none;
}

/* تنسيق أزرار البحث (السنين) - نسخة الكمبيوتر */
#alpha-filter {
    display: flex !important;
    justify-content: center !important; /* توسيط الأزرار في نص الصفحة */
    flex-wrap: wrap !important;
    margin: 30px auto !important;
    gap: 15px !important; /* مسافة واسعة بين الأزرار */
    max-width: 1200px !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 15px !important;
    border: 1px solid rgba(0, 210, 255, 0.1) !important;
}

/* تنسيق الزرار الواحد - تكبير الحجم والخط */
#alpha-filter .alpha-btn {
    min-width: 140px !important; /* عرض عريض وشيك */
    height: 55px !important;    /* ارتفاع ضخم */
    padding: 10px 20px !important;
    font-weight: 800 !important;
    font-size: 17px !important;  /* خط كبير وواضح */
    font-family: 'Almarai', sans-serif !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    transition: 0.3s all ease-in-out !important;
    
    /* استايل النيون */
    background: rgba(0, 210, 255, 0.05) !important;
    color: #ffffff !important;
    border: 2px solid rgba(0, 210, 255, 0.3) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* تأثير النيون عند الوقوف بالماوس (Hover) للكمبيوتر */
#alpha-filter .alpha-btn:hover {
    background: rgba(0, 210, 255, 0.15) !important;
    border-color: #00d2ff !important;
    color: #00d2ff !important;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.5), 
                inset 0 0 10px rgba(0, 210, 255, 0.2) !important;
    transform: translateY(-5px) scale(1.05) !important;
    text-shadow: 0 0 10px #00d2ff !important;
}

/* الزرار النشط (السنة المختارة) */
#alpha-filter .alpha-btn.active {
    background: #00d2ff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 25px #00d2ff !important;
}

@media screen and (max-width: 1024px) {
    /* حاوية الحروف */
    #alpha-filter {
        display: flex !important;
        flex-wrap: wrap !important; /* السماح بالنزول لسطر جديد */
        justify-content: center !important;
        gap: 4px !important; /* تقليل المسافة جداً عشان السطرين يكفوا */
        padding: 10px 2px !important;
    }

    /* زرار الحرف الواحد */
    #alpha-filter .alpha-btn {
        /* الحسبة دي (6.8%) بتضمن إن حوالي 14 حرف ييجوا في السطر الواحد */
        /* 14 حرف في سطرين = 28 مكان، وإحنا عندنا 27 عنصر، فتظبط سطرين بالظبط */
        flex: 0 1 calc(6.8% - 4px) !important; 
        min-width: 22px !important; 
        height: 32px !important; /* تصغير الارتفاع عشان الشكل يبقى متناسق */
        font-size: 10px !important; /* تصغير الخط للضرورة */
        padding: 0 !important;
        margin: 2px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
    }
}

/* للموبايلات الصغيرة جداً (مثل iPhone SE) لضمان عدم الخروج لسطر ثالث */
@media screen and (max-width: 480px) {
    #alpha-filter .alpha-btn {
        flex: 0 1 calc(6.5% - 4px) !important;
        height: 28px !important;
        font-size: 9px !important;
    }
}


/* تنسيق نصوص الجدول بالكامل */
#games-table td { 
    color: #ffffff !important; /* إجبار الخط يكون أبيض */
    border: 2px solid rgba(0, 210, 255, 0.3); 
    background: rgba(255, 255, 255, 0.02);
}

/* تنسيق رأس الجدول */
/* #games-table th { 
    background: #00d2ff !important; 
    color: #000000 !important; 
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
} */

/* عشان أسماء الألعاب الملونة (أونلاين، محاكي) تظهر بوضوح فوق الأسود */
.game-name-cell {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.logz h1 {
  color: #ffffff; /* خط أبيض */
  background: rgba(0, 210, 255, 0.1); /* خلفية نيون شفافة */
  border: 1px solid #00d2ff;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

#search-input { 
  width: 350px; 
  padding: 12px 20px; 
  font-size: 16px; 
  border-radius: 10px; 
  /* برواز نيون خفيف */
  border: 3px solid rgba(0, 210, 255, 0.5); 
  background: rgba(255, 255, 255, 0.05); 
  color: #ffffff !important; /* الخط أبيض صريح */
  transition: all 0.3s ease;
  outline: none;
}

/* التأثير عند الضغط داخل المربع */
#search-input:focus {
  border-color: #00d2ff;
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.4), inset 0 0 5px rgba(0, 210, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

/* استهداف الـ Placeholder في كل المتصفحات */
#search-input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important; /* لون أبيض واضح */
    font-family: 'Almarai', sans-serif !important; /* تطبيق الخط اللي طلبته */
    font-weight: bold; /* خليه عريض عشان يظهر النيون */
    opacity: 1; /* لضمان عدم بهتان اللون في متصفح Firefox */
    /* font-size: 9px; */
}

/* لدعم متصفحات Chrome و Safari */
#search-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Almarai', sans-serif !important;
}

/* لدعم متصفح Edge */
#search-input::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Almarai', sans-serif !important;
}

/* لضمان أن النص الذي تكتبه أنت أيضاً يظهر بنفس الخط */
#search-input {
    font-family: 'Almarai', sans-serif !important;
    color: #ffffff !important;
}

/* شاشات الموبايل والتابلت (أقل من 1024px) */
@media screen and (max-width: 1024px) {
    .parent-search {
        padding: 15px 0; /* تقليل المساحة العلوية والسفلية */
        top: 0; /* التأثير المثبت في الأعلى */
    }

    #search-container {
        width: 90%; /* جعل الحاوية تأخذ أغلب عرض الشاشة */
        justify-content: center;
        gap: 8px; /* مسافة بسيطة بين المربع والزر */
    }

    #search-input {
        width: 70%; /* تصغير عرض المربع لترك مساحة لزر الحذف */
        padding: 10px 15px; /* تقليل الحشو الداخلي */
        font-size: 14px; /* تصغير الخط قليلاً ليتناسب مع الموبايل */
        font-family: 'Almarai', sans-serif !important;
    }

    #clear-btn {
        padding: 10px 12px;
        font-size: 14px;
        white-space: nowrap; /* منع انقسام نص الزر على سطرين */
    }
    #search-input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important; /* لون أبيض واضح */
    font-family: 'Almarai', sans-serif !important; /* تطبيق الخط اللي طلبته */
    font-weight: bold; /* خليه عريض عشان يظهر النيون */
    opacity: 1; /* لضمان عدم بهتان اللون في متصفح Firefox */
    font-size: 11px;
}
}

/* الشاشات الصغيرة جداً (أقل من 480px) */
@media screen and (max-width: 480px) {
    #search-input {
        width: 65%; /* عرض مناسب جداً للموبايلات الصغيرة */
        font-size: 13px;
    }

    #clear-btn {
        padding: 8px 10px;
        font-size: 13px;
    }
}

#clear-btn {
    padding: 10px 20px;
    font-family: 'Almarai', sans-serif !important;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s ease;
    
    /* استايل النيون الأساسي */
    background-color: rgba(255, 77, 77, 0.05); /* خلفية شفافة جداً */
    color: #ff4d4d; /* لون الخط أحمر نيون */
    border: 1px solid #ff4d4d; /* برواز أحمر */
    
    /* شعاع النيون (Glow) */
    box-shadow: 0 0 5px rgba(255, 77, 77, 0.2), 
                inset 0 0 5px rgba(255, 77, 77, 0.1);
    
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* التأثير عند تمرير الماوس (Hover) */
#clear-btn:hover {
    background-color: #ff4d4d; /* الزر يتملي باللون */
    color: #ffffff; /* الخط يقلب أبيض */
    
    /* توهج نيون قوي عند الوقوف عليه */
    box-shadow: 0 0 15px #ff4d4d, 
                0 0 30px rgba(255, 77, 77, 0.6);
    
    transform: translateY(-2px) scale(1.05); /* حركة خفيفة للاحترافية */
}

/* التأثير عند الضغط (Active) */
#clear-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 10px #ff4d4d;
}

/* ضبط الزر في الموبايل */
@media screen and (max-width: 1024px) {
    #clear-btn {
        padding: 8px 15px;
        font-size: 14px;
        box-shadow: 0 0 8px rgba(255, 77, 77, 0.3); /* توهج أخف للموبايل */
    }
}


/* ==========================================================================
   تنسيق أزرار التنقل الاحترافية (Neon Style)
   ========================================================================== */

/* الحاوية التي تجمع الأزرار لضمان التوسيط */
#grid1-buttons, #grid2-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
    width: 100%;
}

/* التنسيق المشترك للأزرار */
.more-btn, .back-btn {
    position: relative;
    padding: 12px 30px !important;
    font-family: 'Almarai', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid transparent;
    outline: none;
}

/* -------------------- زرار Show More (أزرق نيون) -------------------- */
.more-btn {
    background: rgba(0, 210, 255, 0.05) !important;
    color: #00d2ff !important;
    border: 1px solid rgba(0, 210, 255, 0.4) !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2), 
                inset 0 0 10px rgba(0, 210, 255, 0.1) !important;
}

.more-btn:hover {
    background: #00d2ff !important;
    color: #000 !important; /* تباين عالي عند الوقوف */
    box-shadow: 0 0 25px #00d2ff, 
                0 0 50px rgba(0, 210, 255, 0.5) !important;
    transform: translateY(-5px) scale(1.05);
}

/* -------------------- زرار Back (أحمر نيون) -------------------- */
.back-btn {
    background: rgba(255, 77, 77, 0.05) !important;
    color: #ff4d4d !important;
    border: 1px solid rgba(255, 77, 77, 0.4) !important;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.2), 
                inset 0 0 10px rgba(255, 77, 77, 0.1) !important;
}

.back-btn:hover {
    background: #ff4d4d !important;
    color: #ffffff !important;
    box-shadow: 0 0 25px #ff4d4d, 
                0 0 50px rgba(255, 77, 77, 0.5) !important;
    transform: translateY(-5px) scale(1.05);
}

/* تأثير الضغط (للاتنين) */
.more-btn:active, .back-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 5px rgba(255,255,255,0.5) !important;
}

/* ==========================================================================
   الميديا كويري (الموبايل والتابلت)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    #grid1-buttons, #grid2-buttons {
        gap: 12px !important;
        margin: 20px 0 !important;
    }

    .more-btn, .back-btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        min-width: 120px !important; /* ضمان حجم مريح للمس */
        text-align: center;
    }
}

/* ==========================================================================
   تنسيق Badge السلة (النيون المضيء)
   ========================================================================== */

#mini-cart-badge {
    position: absolute;
    top: -20px; /* مكان ظهور الدائرة فوق أيقونة السلة */
    right: -10px;
    
    /* خلفية زرقاء نيون شفافة (Glassmorphism) */
    background: rgba(0, 210, 255, 0.9) !important; 
    color: #000000 !important; /* الخط أسود لتباين قوي مع النيون */
    
    /* توهج نيون قوي (Neon Glow) */
    box-shadow: 0 0 15px #00d2ff, 
                0 0 5px #ffffff !important;
    
    font-weight: 900 !important;
    font-size: 13px !important;
    font-family: "Sansation", sans-serif !important;
    
    /* جعل الدائرة مرنة حسب حجم النص (مهم جداً للجيجات الكبيرة) */
    min-width: 30px;
    height: 30px;
    padding: 8px 13px !important; /* حشو داخلي متوازن */
    border-radius: 50px !important; /* شكل بيضاوي مرن بدل الدائرة الثابتة */
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1.5px solid #ffffff !important; /* برواز أبيض خفيف يحددها */
    z-index: 1200;
    pointer-events: none; /* عشان متغطيش على كلكة السلة */
}

/* حركة نبض خفيفة للـ Badge عشان تلفت الانتباه */
@keyframes badgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 25px #00d2ff; }
    100% { transform: scale(1); }
}

#mini-cart-badge {
    animation: badgePulse 2s infinite ease-in-out;
}

/* الميديا كويري لضبط الحجم في الموبايل */
@media screen and (max-width: 1024px) {
    #mini-cart-badge {
        top: -px;
        right: -8px;
        font-size: 15px !important;
        padding: 4px 6px !important;
        min-width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   تنسيق الحاوية (cart-icon-wrapper) مع أنيميشن نيون بيلف
   ========================================================================== */

@keyframes rotateCartNeon {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.cart-icon-wrapper {
    position: relative;
    width: 60px; /* حجم الحاوية */
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(10, 11, 16, 0.8) !important; /* خلفية داكنة لإبراز النور */
    border-radius: 50% !important;
    cursor: pointer;
    overflow: hidden; /* لإخفاء أطراف الأنيميشن الدوار */
    transition: 0.3s;
    margin-left: auto; /* بيدفع العنصر لليمين لو هو جوه Flex */
    margin-right: 0px
}

/* البرواز النيون اللي بيلف حول الدائرة */
.cart-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px; /* سمك خط النور */
    background: conic-gradient(from var(--angle), transparent 70%, #00d2ff, #ffffff, #00d2ff);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateCartNeon 3s linear infinite;
}

/* تأثير التوهج (Glow) الثابت للحاوية */
.cart-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3), 
                inset 0 0 10px rgba(0, 210, 255, 0.1) !important;
    pointer-events: none;
}

/* 2. تنسيق صورة السلة داخل الحاوية */
.cart-icon-wrapper img {
    width: 45px !important; /* حجم الصورة داخل الدائرة */
    height: 45px !important;
    filter: drop-shadow(0 0 8px #00d2ff) brightness(1.2) !important;
    transition: 0.4s ease-in-out;
    z-index: 2;
}

/* تأثير عند الوقوف بالماوس */
.cart-icon-wrapper:hover {
    transform: scale(1.1);
    background: rgba(0, 210, 255, 0.1) !important;
}

.cart-icon-wrapper:hover img {
    filter: drop-shadow(0 0 15px #00d2ff) brightness(1.5) !important;
    transform: rotate(-10deg); /* ميل خفيف عند الـ Hover */
}

/* ==========================================================================
   تنسيق الصف المختار (Neon Selected Row)
   ========================================================================== */

.selected-row {
    /* 1. خلفية زرقاء نيون شفافة جداً */
    background: rgba(0, 210, 255, 0.15) !important; 
    
    /* 2. برواز نيون مضيء من فوق وتحت */
    border-top: 2px solid #00d2ff !important;
    border-bottom: 2px solid #00d2ff !important;
    
    /* 3. تأثير التوهج (Glow) الداخلي والخارجي */
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4), 
                inset 0 0 20px rgba(0, 210, 255, 0.2) !important;
    
    /* 4. تحويل كل النصوص داخل الصف للون الأبيض المضيء */
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.8) !important;
    
    transition: all 0.0s ease-in-out;
    position: relative;
    z-index: 5; /* لضمان ظهور التوهج فوق الصفوف المجاورة */
}

/* تعديل خلايا الجدول داخل الصف المختار */
.selected-row td {
    border-color: rgba(0, 210, 255, 0.3) !important;
    background: transparent !important; /* عشان يظهر لون الصف المختار */
}

/* ==========================================================================
   تنسيق حاوية الصور المصغرة (النيون الاحترافي)
   ========================================================================== */

/* 1. تعريف حركة الدوران للبرواز */
@keyframes rotateThumb {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#thumbnail-container {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.4); /* خلفية داكنة خفيفة */
    border-radius: 20px;
    margin: 20px auto;
}

/* تنسيق الكارت نفسه (الـ Wrapper) */
.thumb-wrapper {
    position: relative;
    padding: 3px; /* مسافة لظهور خيط النور */
    background: conic-gradient(from var(--angle), transparent 70%, #00d2ff, #ffffff, #00d2ff);
    border-radius: 15px;
    animation: rotateThumb 4s linear infinite;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

/* تأثير التوهج (Glow) الخارجي */
.thumb-wrapper {
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

/* المحتوى الداخلي للكارت */
.thumb-wrapper::after {
    content: '';
    position: absolute;
    inset: 3px; /* لإظهار البرواز النيون */
    background: #0a0b10; /* لون الخلفية الداخلي */
    border-radius: 12px;
    z-index: -1;
}

/* الصورة داخل الكارت */
.thumbnail {
    width: 450px; /* يمكنك تعديل المقاس حسب رغبتك */
    height: auto;
    border-radius: 10px;
    display: block;
    transition: 0.5s ease;
    filter: grayscale(20%); /* لمسة سينمائية */
}

/* النص أسفل الصورة */
.thumb-text {
    text-align: center;
    padding: 10px;
    color: #00d2ff;
    font-family: 'Almarai', sans-serif;
    font-weight: 800;
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
}

/* --------------------------------------------------------------------------
   تأثيرات عند الوقوف بالماوس (Hover)
   -------------------------------------------------------------------------- */
.thumb-wrapper:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.6), 
                0 0 60px rgba(0, 210, 255, 0.2);
    animation-duration: 1.5s; /* تسريع الدوران عند الـ Hover */
}

.thumb-wrapper:hover .thumbnail {
    filter: grayscale(0%) brightness(1.2);
    transform: scale(1.1);
}

/* الميديا كويري للموبايل */
@media screen and (max-width: 768px) {
    #thumbnail-container {
        flex-direction: row;
        align-items: center;
    }
    .thumbnail {
        width: 180px;
    }
}
/* تنسيق النص أسفل الصور المصغرة */
.thumb-text {
    background: rgba(0, 0, 0, 0.7) !important; /* خلفية سوداء شفافة فخمة */
    color: #00d2ff !important; /* لون النص أزرق نيون */
    text-align: center;
    padding: 12px 5px !important;
    font-family: 'Almarai', sans-serif !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    
    /* برواز علوي رفيع يفصل النص عن الصورة */
    border-top: 1px solid rgba(0, 210, 255, 0.3) !important;
    
    /* توهج النص (Neon Glow) */
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.8), 
                 0 0 20px rgba(0, 210, 255, 0.4) !important;
    
    /* تنعيم الزوايا من تحت عشان تليق مع الـ Wrapper */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    
    transition: all 0.3s ease;
}

/* تأثير عند الوقوف بالماوس على النص */
.thumb-wrapper:hover .thumb-text {
    background: rgba(0, 210, 255, 0.2) !important; /* الخلفية تفتح شوية مع الـ Hover */
    color: #ffffff !important; /* النص يقلب أبيض منور */
    text-shadow: 0 0 15px #ffffff, 0 0 30px #00d2ff !important;
}

/* ==========================================================================
   تحويل الـ Checkbox لنيون احترافي (Cyberpunk Style)
   ========================================================================== */

/* 1. إخفاء الشكل الافتراضي الممل للمتصفح */
#games-table input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 210, 255, 0.4) !important; /* برواز نيون خافت وهو مطفي */
    border-radius: 6px !important;
    background: rgba(10, 11, 16, 0.9) !important;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    vertical-align: middle;
}

/* 2. التأثير عند اختيار اللعبة (Checked) */
#games-table input[type="checkbox"]:checked {
    background: rgba(0, 210, 255, 0.2) !important;
    border-color: #00d2ff !important; /* البرواز ينور أزرق صريح */
    
    /* توهج نيون خارجي (Outer Glow) */
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.8), 
                inset 0 0 5px rgba(0, 210, 255, 0.5) !important;
}

/* 3. رسم علامة الـ (✓) بالـ CSS عشان تنور أبيض */
#games-table input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff !important;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 5px #ffffff, 0 0 10px #00d2ff !important;
}

/* 4. تأثير عند تمرير الماوس (Hover) */
#games-table input[type="checkbox"]:hover {
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

/* ==========================================================================
   تنسيق السلة (Cart Panel) النيون الزجاجية
   ========================================================================== */

.cart {
    background: rgba(10, 11, 16, 0.95) !important; /* خلفية سوداء عميقة */
    border: 2px solid #00d2ff !important; /* برواز نيون أزرق */
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.3), 
                inset 0 0 20px rgba(0, 210, 255, 0.1) !important;
    backdrop-filter: blur(15px);
    color: #ffffff;
    font-family: 'Almarai', sans-serif;
    transition: all 0.5s ease;
}

/* عنوان السلة */
.cart h3 {
    color: #00d2ff !important;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #00d2ff;
    margin-bottom: 20px;
    border-bottom: 1px dashed rgba(0, 210, 255, 0.3);
    padding-bottom: 10px;
}

/* الألوان الأساسية للنصوص النيون */
.neon-text-red { color: #ff4d4d; text-shadow: 0 0 10px #ff4d4d; font-weight: bold;}
.neon-text-green { color: #00ff00; text-shadow: 0 0 10px #00ff00; font-weight: bold; }
.neon-text-orange { color: #ff9900; text-shadow: 0 0 10px #ff9900; font-weight: bold; }

/* صناديق الإحصائيات (Boxes) */
.neon-box-cyan, .neon-box-blue, .neon-box-white {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 5px 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 210, 255, 0.2);
}

.neon-box-cyan { color: #00d2ff; border-color: #00d2ff; }
.neon-value { font-size: 1.1em; font-weight: 900; text-shadow: 0 0 5px currentColor; }

/* تنسيق عناصر القائمة في السلة */
.neon-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.1) !important;
    transition: 0.3s;
}

.neon-list-item:hover {
    background: rgba(0, 210, 255, 0.05) !important;
    border-left: 3px solid #00d2ff;
}

.neon-list-item img {
    width: 45px;
    height: 45px;
    border-radius: 5px;
    border: 1px solid #00d2ff;
}

.item-info { display: flex; flex-direction: column; flex: 1; }
.item-size { font-size: 12px; color: #888; }

/* ألوان الألعاب داخل القائمة */
.neon-blue { color: #00d2ff; text-shadow: 0 0 5px #00d2ff; }
.neon-green { color: #00ff00; text-shadow: 0 0 5px #00ff00; }
.neon-red { color: #ff4d4d; text-shadow: 0 0 5px #ff4d4d; }
.neon-orange { color: #ff9900; text-shadow: 0 0 5px #ff9900; }
.neon-white { color: #ffffff; }

/* زرار الحذف الصغير داخل السلة */
.neon-delete-btn {
    background: transparent;
    color: #ff4d4d;
    border: 1px solid #ff4d4d;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: 0.3s;
}

.neon-delete-btn:hover {
    background: #ff4d4d;
    color: white;
    box-shadow: 0 0 10px #ff4d4d;
}
/* اللون الأزرق النيون (للمساحة المدفوعة) */
.neon-text-blue {
    color: #00d2ff !important;
    text-shadow: 0 0 10px #00d2ff, 0 0 20px rgba(0, 210, 255, 0.5) !important;
    font-weight: bold !important;
    font-size: 16px !important; /* ضيف السطر ده هنا للتحكم في الحجم */
}

/* اللون الأبيض النيون (للإجمالي والعدد) */
.neon-text-white {
    color: #ffffff !important;
    text-shadow: 0 0 10px #ffffff, 0 0 20px rgba(255, 255, 255, 0.5) !important;
    font-weight: bold !important;
}

/* زر الحذف النيون داخل القائمة */
.neon-delete-btn {
    background: rgba(255, 77, 77, 0.1) !important;
    color: #ff4d4d !important;
    border: 1px solid #ff4d4d !important;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.neon-delete-btn:hover {
    background: #ff4d4d !important;
    color: white !important;
    box-shadow: 0 0 15px #ff4d4d;
}

/* قيمة الرقم داخل الصندوق */
.neon-value {
    margin-left: 5px;
    font-size: 1.2em;
}

/* تنسيق قائمة الألعاب داخل السلة */
#cart-list {
    list-style: none;
    padding: 0;
    margin: 2px 0;
}

.neon-list-item {
    display: flex !important; /* لضمان ظهور الصورة بجانب النص وليس تحتها */
    flex-direction: row !important; /* يمنع ظهور حرف في كل سطر */
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 8px;
    padding: 10px !important;
    border-radius: 8px;
    border: 1px solid rgba(0, 210, 255, 0.2);
}

/* التأكد من أن النص أبيض وواضح */
.item-info span {
    color: #ffffff !important; /* الكتابة باللون الأبيض */
    font-size: 14px;
    display: block;
    white-space: normal; /* يمنع تقطيع الكلمات */
    text-align: right;
}

/* تعديل حجم الصورة لتناسب السطر */
.neon-list-item img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
    border-radius: 4px;
}

/* تنسيق الصورة داخل السلة (Cart List) */
.cart-list li img {
    /* 1. تكبير حجم الصورة قليلاً (من 64px لـ 80px) */
    width: 85px !important; 
    height: 85px !important;
    
    /* 2. إزالة الـ box-shadow نهائياً (إجباري) */
    box-shadow: none !important; 
    border: none !important; /* تأكد إنه مفيش برواز كمان */
    
    /* 3. الحفاظ على تناسق الأبعاد وعدم انضغاط الصورة */
    flex-shrink: 0 !important; 
    object-fit: contain !important; /* الصورة متتقطعش */
    background-color: transparent !important;
    border-radius: 5px; /* حواف منحنية بسيطة للشياكة */
}

/* تعديل الـ flex-direction للـ li لضمان التنسيق الأفقي السليم */
.cart-list li {
    display: flex !important;
    flex-direction: row !important; /* صورة شمال، كلام يمين */
    align-items: center !important;
    gap: 15px !important; /* مسافة بسيطة بين الصورة والنص */
    padding: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* تعديل حاوية النص لتتماشى مع الحجم الجديد للصورة */
.cart-list li div {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* الكلاس الموحد لكل الإحصائيات لضمان التناسق */
.stat-row {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-family: 'Almarai', sans-serif !important;
    font-weight: bold !important;
    font-size: 17px !important;
    margin: 0 !important;
    padding: 6px 0 !important; /* دي المسافة الموحدة بين السطور */
    line-height: 1.4 !important;
}

/* الألوان النيون مع التوهج */
.neon-red { color: #ff4d4d !important; text-shadow: 0 0 10px #ff4d4d !important; }
.neon-green { color: #00ff00 !important; text-shadow: 0 0 10px #00ff00 !important; }
.neon-orange { color: #ff9900 !important; text-shadow: 0 0 10px #ff9900 !important; }
.neon-blue { color: #00d2ff !important; text-shadow: 0 0 12px #00d2ff !important; }
.neon-white { color: #ffffff !important; text-shadow: 0 0 12px #ffffff !important; }

/* تأكد إن الحاويات نفسها في الـ HTML مفيش حاجة مخفياها */
#cart-online, #cart-paid, #cart-hv, #cart-unlocked-paid, #cart-size, #cart-count {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* 1. زرار إخفاء السلة (أزرق نيون) */
#hide-cart-btn {
    background: rgba(0, 210, 255, 0.1) !important;
    color: #00d2ff !important;
    border: 1px solid #00d2ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3) !important;
    transition: 0.3s all ease-in-out !important;
    font-weight: bold !important;
    border-radius: 8px !important;
}

#hide-cart-btn:hover {
    background: #00d2ff !important;
    color: #000 !important;
    box-shadow: 0 0 20px #00d2ff !important;
}

/* 2. زرار نسخ القائمة (أزرق سماوي نيون) */
.copy-btn {
    background: rgba(0, 210, 255, 0.05) !important;
    color: #00d2ff !important;
    border: 2px solid #00d2ff !important;
    text-shadow: 0 0 5px #00d2ff !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2) !important;
    border-radius: 10px !important;
    transition: 0.4s !important;
    font-size: 16px;
    margin-bottom: 10px ;
}

.copy-btn:hover {
    background: #00d2ff !important;
    color: #fff !important;
    box-shadow: 0 0 25px #00d2ff !important;
}

/* 3. زرار حذف القائمة (أحمر نيون صريح) */
.cart-buttons .copy-btn[style*="background-color:#ff4d4d"], 
.cart-buttons .copy-btn[onclick="clearCart()"] {
    background: rgba(255, 77, 77, 0.1) !important;
    color: #ff4d4d !important;
    border: 2px solid #ff4d4d !important;
    text-shadow: 0 0 5px #ff4d4d !important;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.2) !important;
}

.cart-buttons .copy-btn[onclick="clearCart()"]:hover {
    background: #ff4d4d !important;
    color: #fff !important;
    box-shadow: 0 0 25px #ff4d4d !important;
}

/* 4. زرار حذف اللعبة الواحدة (الزرار الصغير) */
.delete-btn-full {
    background: rgba(255, 77, 77, 0.05) !important;
    color: #ff4d4d !important;
    border: 1px solid #ff4d4d !important;
    box-shadow: 0 0 5px rgba(255, 77, 77, 0.2) !important;
    transition: 0.3s !important;
    text-shadow: 0 0 3px #ff4d4d !important;
}

.delete-btn-full:hover {
    background: #ff4d4d !important;
    color: #fff !important;
    box-shadow: 0 0 15px #ff4d4d !important;
}

.cart {
    /* 1. حواف دائرية خفيفة واحترافية */
    border-radius: 20px !important; 
    
    /* 2. التأكد من أن المحتوى الداخلي لا يخرج عن الحواف المنحنية */
    overflow: hidden !important; 
    
    /* 3. برواز نيون رفيع يحدد الشكل */
    border: 2px solid rgba(0, 210, 255, 0.4) !important;
    
    /* 4. إضافة ظل وتوهج خفيف حول السلة بالكامل */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
                0 0 15px rgba(0, 210, 255, 0.2) !important;
                
    /* 5. خلفية زجاجية داكنة (اختياري لو عايزها شفافة شوية) */
    background: rgba(10, 11, 16, 0.98) !important;
    backdrop-filter: blur(10px);
    
    transition: all 0.3s ease-in-out;
}

/* تعديل إضافي لشريط التمرير (Scrollbar) داخل السلة عشان يليق مع المنحنيات */
.cart-list::-webkit-scrollbar {
    width: 5px;
}
.cart-list::-webkit-scrollbar-thumb {
    background: #00d2ff;
    border-radius: 10px;
}

@media screen and (max-width: 1024px) {
    /* تنسيق زرار إخفاء السلة للموبايل */
    #hide-cart-btn {
        display: block !important;
        width: 100% !important; /* يملأ العرض بالكامل لسهولة الضغط */
        margin: 0px 0 !important;
        padding: 6px 0 !important; /* تكبير المساحة للضغط بالصابع */
        font-size: 16px !important;
        font-weight: bold !important;
        border-radius: 10px !important;
        
        /* استايل نيون مخصص للموبايل */
        background: rgba(0, 210, 255, 0.1) !important;
        color: #00d2ff !important;
        border: 1px solid #00d2ff !important;
        box-shadow: 0 0 10px rgba(0, 210, 255, 0.3) !important;
        
        /* منع اختفاء النص أو تقطيعه */
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* تأكد إن حاوية الأزرار مش ضاغطة عليه */
    .cart {
        padding: 15px !important;
        gap: 8px !important;
    }
}
@media screen and (max-width: 1024px) {
    /* 1. تصغير حجم حاوية السلة بالكامل */
    .cart {
        width: 95%;
        max-width: 360px;
        padding: 10px !important; /* تقليل الحشو الداخلي */
        gap: 5px !important; /* تقليل المسافات بين العناصر */
        max-height: 95vh !important; /* ضمان عدم خروجها عن الشاشة */
    }

    /* 2. تصغير اللوجو والعنوان عشان نوفر مساحة */
    .cart-logo img {
        width: 45px !important;
        height: 45px !important;
    }
    .cart h3 {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }

    /* 3. تصغير سطور الإحصائيات */
    .stat-row {
        font-size: 15px !important; /* تصغير الخط */
        padding: 2px 0 !important; /* تقليل المسافة بين السطور */
        line-height: 1.3 !important;
    }

    /* 4. ضبط أزرار التحكم (إخفاء، نسخ، حذف) */
    #hide-cart-btn, .copy-btn {
        padding: 8px 0 !important;
        font-size: 13px !important;
        margin-top: 1px !important;
    }

    /* 5. أهم جزء: ضبط قائمة الألعاب عشان تظهر */
    .cart-list {
        max-height: 250px !important; /* تحديد ارتفاع ثابت للقائمة عشان متمطش الكارت */
        overflow-y: auto !important; /* تفعيل السكرول داخلياً */
        width: 100% !important;
        margin-top: 2px !important;
    }

    /* 6. تصغير شكل اللعبة جوه القائمة */
    .neon-list-item {
        padding: 5px !important;
    }
    .neon-list-item img {
        width: 45px !important;
        height: 45px !important;
    }
    .game-info-text {
        font-size: 15px !important;
    }
}

/* 1. البرواز والوهج الخارجي للكارت (أزرق نيون فقط) */
.neon-list-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.3) !important;

    
    /* التوهج الأزرق المطلوب للبرواز */
    border: 1.5px solid #00d2ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4) !important;
    
    margin-bottom: 8px !important;
    
}

/* 2. وهج أزرق نيون حول صورة اللعبة فقط */
.neon-list-item img {
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    
    /* التوهج الأزرق المطلوب للصورة */
    border: 1.5px solid #00d2ff !important;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.5) !important;
    
}

/* 3. حاوية النص (بدون لمس المحاذاة أو الخط) */
.item-details {
    flex: 1 !important;
    min-width: 0 !important;
    /* شلنا text-align عشان يفضل في مكانه الطبيعي اللي إنت عامله */
}

/* 4. اسم اللعبة (بدون لمس الفونت أو اللون) */
.game-info-text {
    /* هنا مفيش font-family ولا text-align عشان مغيرش حاجة عندك */
    display: block !important;
    line-height: 1.7 !important;
}
@media screen and (max-width: 1024px) {
    /* توحيد كل أزرار التحكم في السلة */
    #hide-cart-btn, 
    .copy-btn, 
    .cart-buttons .copy-btn {
        display: block !important;
        width: 100% !important; /* ملء العرض بالكامل */
        height: 48px !important; /* ارتفاع مريح للمس */
        line-height: 48px !important; /* توسيط النص رأسياً */
        padding: 0 !important;
        margin: 2px 0 !important; /* مسافة متساوية بين الأزرار */
        box-sizing: border-box !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        text-align: center !important;
    }

    /* ضبط الحاوية اللي شايلة الأزرار */
    .cart-buttons {
        display: flex !important;
        flex-direction: column !important; /* ترتيب رأسي */
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important; /* نعتمد على المارجن اللي فوق */
    }

    /* حاوية السلة نفسها نأكد إنها مش خانقة الأزرار */
    .cart {
        padding: 15px 12px !important;
    }
}
/* 1. تنسيق صورة الواتساب جوه الزرار */
.neon-whatsapp-img {
    width: 40px !important; /* حجم متناسق مع الكتابة */
    height: 40px !important;
    vertical-align: middle !important; /* توسيط رأسي مع النص */
    margin-left: 10px !important; /* مسافة بين الصورة والكتابة */
    border-radius: 5px !important; /* حواف ناعمة لو الصورة حادة */
    object-fit: contain !important; /* ضمان عدم تشوه الصورة */
    
    /* 2. تأثير التوهج النيون (Glow) المزدوج */
    /* بنستخدم الـ drop-shadow لأنه بيتبع شكل الصورة الشفافة بالظبط */
    filter: drop-shadow(0 0 5px #25D366) 
            drop-shadow(0 0 10px rgba(37, 211, 102, 0.5)) !important;
            
    transition: 0.3s all ease-in-out !important; /* حركة ناعمة */
}

/* 3. تأثير إضافي عند الوقوف بالماوس (Hover) على الزرار بالكامل */
.copy-btn:hover .neon-whatsapp-img {
    /* زيادة التوهج عند الـ Hover */
    filter: drop-shadow(0 0 10px #25D366) 
            drop-shadow(0 0 20px #25D366) !important;
    transform: scale(1.1); /* تكبير بسيط للصورة */
}

#scrollTopBtn {
    /* الإعدادات الأساسية */
    position: fixed;
    bottom: 70px;
    right: 30px;
    width: 50px;
    height: 50px;
    z-index: 1000;
    cursor: pointer;
    display: none; /* بيظهر بالـ JS */
    
    /* ستايل النيون الأزرق */
    background: rgba(0, 210, 255, 0.1) !important;
    color: #00d2ff !important;
    border: 2px solid #00d2ff !important;
    border-radius: 50% !important; /* شكل دائري */
    font-size: 24px !important;
    font-weight: bold !important;
    
    /* تأثير التوهج (Glow) */
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), 
                inset 0 0 10px rgba(0, 210, 255, 0.2) !important;
    text-shadow: 0 0 5px #00d2ff !important;
    
    /* حركة ناعمة */
    transition: all 0.3s ease-in-out !important;
    backdrop-filter: blur(5px);
}

/* تأثير عند الوقوف بالماوس (Hover) */
#scrollTopBtn:hover {
    background: #00d2ff !important;
    color: #000 !important;
    box-shadow: 0 0 25px #00d2ff, 0 0 40px #00d2ff !important;
    transform: translateY(-5px) scale(1.1); /* حركة بسيطة لفوق */
}

/* تعديل للموبايل عشان مياخدش مساحة كبيرة */
@media screen and (max-width: 1024px) {
    #scrollTopBtn {
        bottom: 80px;
        right: 20px;
        width: 30px;
        height: 30px;
        font-size: 20px !important;
    }
}
/* الخلفية الضبابية وراء الـ Popup */
#deliveryPopup {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
}

/* الكارت الرئيسي بتصميم زجاجي نيون */
.delivery-box {
    background: rgba(10, 11, 16, 0.95) !important;
    border: 2px solid #00d2ff !important;
    border-radius: 25px !important;
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.4), 
                inset 0 0 15px rgba(0, 210, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 30px !important;
    width: 380px !important;
}

/* العناوين نيون مضيئة */
.delivery-box h3 {
    color: #00d2ff !important;
    text-shadow: 0 0 10px #00d2ff !important;
    font-size: 22px !important;
    margin-bottom: 25px !important;
    border-bottom: 1px dashed rgba(0, 210, 255, 0.3);
    padding-bottom: 15px;
}

.delivery-box h4 {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-top: 20px !important;
    opacity: 0.9;
}
/* الاستايل العام لكل كارت اختيار */
.delivery-option {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 12px !important;
    padding: 18px !important;
    border-radius: 15px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 📦 نقل على هاردي (أزرق نيون) */
.delivery-option.transfer {
    border-color: rgba(0, 210, 255, 0.4) !important;
    color: #00d2ff !important;
}
.delivery-option.transfer:hover {
    background: rgba(0, 210, 255, 0.15) !important;
    border-color: #00d2ff !important;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.5) !important;
    transform: scale(1.05);
}

/* 💻 نقل على اللابتوب (أخضر نيون) */
.delivery-option.laptop {
    border-color: rgba(0, 255, 0, 0.4) !important;
    color: #00ff00 !important;
}
.delivery-option.laptop:hover {
    background: rgba(0, 255, 0, 0.15) !important;
    border-color: #00ff00 !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5) !important;
    transform: scale(1.05);
}

/* 💾 هارد جاهز (برتقالي نيون) */
.delivery-option.ready {
    border-color: rgba(255, 153, 0, 0.4) !important;
    color: #ff9900 !important;
}
.delivery-option.ready:hover {
    background: rgba(255, 153, 0, 0.15) !important;
    border-color: #ff9900 !important;
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.5) !important;
    transform: scale(1.05);
}

/* زر الإلغاء نيون أحمر */
.delivery-cancel {
    color: #ff4d4d !important;
    text-shadow: 0 0 5px #ff4d4d !important;
    font-weight: bold !important;
    margin-top: 20px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 1. تنسيق الحاوية الرئيسية للوجو والعنوان */
.logz {
    display: flex;
    justify-content: center; 
    align-items: center;     
    gap: 15px;               
    margin-bottom: 20px;
    padding: 10px;
    transition: all 0.5s ease;
}

/* 2. نيون اللوجو (الصورة) */
.logz img {
    width: 100px;
    /* تأثير توهج نيون أزرق يتبع شكل اللوجو */
    filter: drop-shadow(0 0 8px #00d2ff) 
            drop-shadow(0 0 15px rgba(0, 210, 255, 0.6)) !important;
    transition: 0.5s;
}

/* 3. نيون العنوان (Mansoura Computer Games) */
.logz h1 {
    font-family: "Bree Serif", serif;
    font-size: 32px;
    font-weight: bold;
    /* لون الخط أبيض منور */
    color: #ffffff !important; 
    /* خلفية نيون زجاجية خفيفة جداً */
    background: rgba(0, 210, 255, 0.05) !important; 
    padding: 10px 20px;
    border-radius: 12px;
    
    /* برواز نيون أزرق رفيع */
    border: 2px solid #00d2ff !important;
    
    /* توهج النص والبرواز مع بعض (Neon Glow) */
    text-shadow: 0 0 10px #00d2ff, 
                 0 0 20px rgba(0, 210, 255, 0.5) !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4), 
                inset 0 0 10px rgba(0, 210, 255, 0.1) !important;
    
    margin: 0;
    white-space: nowrap;
}

/* 4. تأثير "النبض" عند الوقوف بالماوس (Hover) */
.logz:hover img {
    filter: drop-shadow(0 0 20px #00d2ff) 
            drop-shadow(0 0 40px #00d2ff) !important;
    transform: scale(1.1) rotate(-5deg);
}

.logz:hover h1 {
    background: rgba(0, 210, 255, 0.15) !important;
    box-shadow: 0 0 25px #00d2ff, 
                inset 0 0 15px rgba(0, 210, 255, 0.3) !important;
    text-shadow: 0 0 15px #ffffff, 0 0 25px #00d2ff !important;
}

/* ضبط الموبايل لضمان عدم خروج النيون بره الشاشة */
@media screen and (max-width: 768px) {
    .logz {
        flex-direction: column;
        gap: 5px;
    }
    .logz img {
        width: 80px;
    }
    .logz h1 {
        font-size: 20px;
        padding: 8px 15px;
    }
}
/* الحاوية الأم لضمان التوسيط الكامل */
.lol2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 40px 0 !important;
    perspective: 1000px; /* لإضافة عمق بصري */
}

/* الحاوية اللي بتلم على قد الكلام (Wrapper) */
.neon-box-final {
    /* السر في التوسيط ولم الحجم */
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    
    /* خلفية زجاجية عميقة */
    background: rgba(0, 0, 0, 0.6) !important;
    
    /* برواز نيون أزرق "سميك" وقوي */
    border: 2.5px solid #00d2ff !important;
    border-radius: 20px !important;
    padding: 15px 35px !important;
    
    /* تأثيرات توهج خارجي وداخلي مرعبة */
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.6), 
                0 0 40px rgba(0, 210, 255, 0.3),
                inset 0 0 20px rgba(0, 210, 255, 0.3) !important;
    
    transition: 0.5s all ease;
}

/* النص نيون "خرافي" بـ Almarai */
.neon-text-main {
    font-family: 'Almarai', sans-serif !important;
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important; /* بيمنع الكلام إنه يفرش بالعرض */
    
    /* توهج النص الأبيض والأزرق المركب */
    text-shadow: 0 0 10px #ffffff,
                 0 0 20px #00d2ff, 
                 0 0 40px #00d2ff,
                 0 0 60px rgba(0, 210, 255, 0.8) !important;
}

/* تأثير إضافي عند الحركة (الـ Pulse هيخلي النور ده يرقص) */
.neon-box-final:hover {
    transform: scale(1.05) rotateX(5deg);
    box-shadow: 0 0 30px #00d2ff, 
                0 0 60px rgba(0, 210, 255, 0.6) !important;
}

/* ضبط الموبايل ليكون "مسطرة" */
@media screen and (max-width: 768px) {
    .neon-box-final {
        padding: 10px 20px !important;
        border-width: 1.5px !important;
        max-width: 90% !important;
    }
    .neon-text-main {
        font-size: 16px !important;
        white-space: normal !important; /* السماح بالنزول في الموبايل فقط */
    }
}

/* 1. تنسيق الحاوية الأم لضمان التوسيط (لو مش متوسطنة) */
.recentimage {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    margin: 30px 0 !important;
}

/* 2. نيون "الضربة القاضية" للصورة (Super Neon Table) */
.recentimage img {
    /* حجم متناسق (ظبطه حسب رغبتك) */
    max-width: 900px; 
    height: auto;
    object-fit: contain;
    
    /* منع اختفاء النور خلف حدود الحاوية */
    margin: 20px; 
    
    /* إضافة حواف ناعمة جداً للصورة لدمج النور */
    border-radius: 10px;

    /* تأثير التوهج الأزرق المركب والخارق ( drop-shadow ) */
    /* بنستخدم 3 طبقات من الضوء عشان النور يبان إنه "فاجع" */
    filter: drop-shadow(0 0 10px #00d2ff) 
            drop-shadow(0 0 25px rgba(0, 210, 255, 0.7)) 
            drop-shadow(0 0 45px rgba(0, 210, 255, 0.4)) !important;
            
    /* حركة ناعمة جداً عشان تليق مع الـ Pulse */
    transition: all 0.5s ease-in-out !important;
    
    /* تعريف أنيميشن إضافي للتوهج الداخلي (اختياري، لو الصورة عريضة) */
    animation: imageBreatheGlow 4s infinite ease-in-out !important;
}

/* 3. تأثير إضافي عند الوقوف بالماوس (Hover) */
.recentimage img:hover {
    transform: scale(1.03); /* تكبير بسيط */
    filter: drop-shadow(0 0 20px #ffffff) 
            drop-shadow(0 0 40px #00d2ff) 
            drop-shadow(0 0 60px rgba(0, 210, 255, 1)) !important;
  
}

/* 4. تعريف أنيميشن "التنفس النيوني" (Breathing Glow) للمساعدة مع الـ Pulse */
@keyframes imageBreatheGlow {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 10px #00d2ff) 
                drop-shadow(0 0 25px rgba(0, 210, 255, 0.7));
    }
    50% {
        /* زيادة التوهج في منتصف النبضة */
        opacity: 0.95;
        filter: drop-shadow(0 0 20px #00d2ff) 
                drop-shadow(0 0 45px rgba(0, 210, 255, 1))
                drop-shadow(0 0 70px rgba(0, 210, 255, 0.6));
    }
}

/* للموبايل عشان متفرشش */
@media screen and (max-width: 768px) {
    .recentimage img {
        /* max-width: 80% !important; */
        margin: 10px;
    }
}
/* ==========================================================
   تنسيق اللوجو المخصص للموبايل (تصغير وتوسيط)
   ========================================================== */
@media screen and (max-width: 1024px) {
    
    /* 1. تصغير الحاوية الأم وتقليل المسافات */
    .logz {
        flex-direction: column !important; /* اللوجو فوق والكلمة تحت */
        gap: 0px !important;
        margin: 1px auto !important;
        padding: 5px !important;
    }

    /* 2. تصغير صورة اللوجو */
    .logz img {
        width: 256px !important; /* حجم مناسب جداً للموبايل */
        max-width: 150px !important;
        height: auto !important;
        /* الحفاظ على التوهج النيون بس بشكل أخف */
        filter: drop-shadow(0 0 5px #00d2ff) !important;
    }

    /* 3. تصغير العنوان (H1) وتظبيطه عشان ميسحبش عرض الصفحة */
    .logz h1 {
        font-size: 26px !important; /* تصغير الخط */
        padding: 6px 12px !important;
        border-radius: 16px !important;
        white-space: normal !important; /* السماح بالنزول لسطرين لو الشاشة صغيرة قوي */
        text-align: center !important;
        width: 85% !important; /* ضمان إنه ملموم في نص الشاشة */
        margin: 0 auto !important;
        line-height: 1.3 !important;
    }

    /* 4. تعطيل الأنميشن المتعب (Tada) في الموبايل لضمان الثبات */
    /* الأنميشن ده وهو Infinite بيخلي اللوجو "يهتز" بطريقة بتزود الـ Lag */
    .animate__tada {
        animation: none !important;
        transform: none !important;
    }
}
/* تعطيل الأنميشن والـ Hover على الموبايل (شاشات أقل من 1024px) */
@media screen and (max-width: 1024px) {

    /* 1. إيقاف جميع أنواع الأنميشن (الدوران، النبض، التحرك) */
    * {
        animation: none;
        transition: none;
    }

    /* 2. إلغاء تأثيرات الـ Hover تماماً لجميع العناصر */
    /* نُعيد العناصر لحالتها الطبيعية ونمنع أي تغيير يحدث عند اللمس */
    
    .game-card:hover,
    .thumb-wrapper:hover,
    .delivery-option:hover,
    .alpha-btn:hover,
    .more-btn:hover,
    .back-btn:hover,
    .copy-btn:hover,
    #clear-btn:hover,
    .cart-icon-wrapper:hover,
    .logz:hover,
    .neon-box-final:hover,
    .recentimage img:hover {
        transform: none !important;
        background: inherit; /* العودة للخلفية الأصلية */
        box-shadow: none !important; /* إزالة التوهج الإضافي */
        filter: none !important; /* إزالة توهج الصور */
    }

    /* 3. إيقاف دوران البرواز النيون في الجداول والصور المصغرة */
    table th::before,
    .cart-icon-wrapper::before,
    .thumb-wrapper {
        animation: none;
        background: rgba(0, 210, 255, 0.4) !important; /* جعل البرواز لون ثابت بدلاً من الدوران */
    }

    /* 4. إيقاف حركة "النبض" لـ Badge السلة */
    #mini-cart-badge {
        animation: none;
        transform: none;
    }

    /* 5. إيقاف تكبير الصور عند اللمس */
    .thumbnail:hover, .game-img:hover {
        transform: none !important;
    }

    /* 6. منع حركة التوهج (Breathing Glow) للصور الكبيرة */
    .recentimage img {
        animation: none !important;
    }
}

/* ==========================================================
   إيقاف كافة أنواع الـ HOVER والـ ANIMATION على الموبايل
   ========================================================== */
@media screen and (max-width: 1024px) {

    /* 1. تعطيل الأنميشن والتحولات السلسة لكل العناصر بلا استثناء */
    *, *::before, *::after {
        animation: none ;
        transition: none ;
        transition-duration: 0s ;
        /* منع ظهور الوميض الأزرق عند الضغط في بعض المتصفحات */
        -webkit-tap-highlight-color: transparent ;
    }

    /* 2. قتل تأثير الـ Hover والـ Active تماماً لكل العناصر
    .game-card:hover,
    .thumb-wrapper:hover,
    .delivery-option:hover,
    .alpha-btn:hover,
    .more-btn:hover,
    .back-btn:hover,
    #clear-btn:hover,
    .logz:hover,
    .neon-box-final:hover,
    .recentimage img:hover,
    .thumbnail:hover,
    .game-img:hover,
    #scrollTopBtn:hover,
    .neon-delete-btn:hover,
    .delete-btn-full:hover,
    .delivery-option.transfer:hover,
    .delivery-option.laptop:hover,
    .delivery-option.ready:hover {
        transform: none !important;      /* منع التكبير أو التحريك */
        box-shadow: none !important;      /* إزالة توهج النيون الإضافي */
        filter: none !important;         /* إزالة فلاتر الإضاءة */
        background-color: inherit !important; /* الاحتفاظ باللون الأصلي */
        opacity: 1 !important;           /* منع التغيير في الشفافية */
    } */

    /* 3. تثبيت البراويز النيون (التي كانت تدور بالـ conic-gradient) */
    table th::before,
    .cart-icon-wrapper::before,
    .thumb-wrapper {
        animation: none;
        /* جعل البرواز لون ثابت بسيط بدل الدوران المزعج */
        background: rgba(0, 210, 255, 0.4) !important; 
    }

    /* 4. إلغاء تأثير الـ Hover على نصوص الصور المصغرة */
    .thumb-wrapper:hover .thumb-text {
        background: rgba(0, 0, 0, 0.7) !important;
        color: #00d2ff !important;
        text-shadow: 0 0 10px rgba(0, 210, 255, 0.8) !important;
    }

    /* 7. إيقاف حركة الـ Popup عند الظهور */
    .delivery-box, .popup-content {
        animation: none;
        transform: none ;
    }
}

@media screen and (max-width: 1024px) {
    /* 1. تثبيت الصندوق ومنع الزوم */
    .parent-search {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        background: #0a0b10 !important; /* خلفية المنطقة اللي شايلة البحث */
        padding: 15px 5px !important;
    }

    /* 2. التحكم في الصندوق نفسه */
    #search-input {
        width: 100% !important;
        height: 55px !important;
        font-size: 16px !important; /* تمنع الزوم نهائياً */
        color: #ffffff !important; /* لون الكتابة أبيض صريح */
        border: 2px solid #00d2ff !important;
        border-radius: 12px !important;
        /* الخلفية الافتراضية داكنة جداً */
        background-color: #000000 !important; 
        box-sizing: border-box !important;
    }

    /* 3. لما تضغط أو تكتب (Focus) يفضل أسود فحم */
    #search-input:focus, 
    #search-input:not(:placeholder-shown) {
        background-color: #000000 !important; /* سواد كامل */
        box-shadow: 0 0 20px rgba(0, 210, 255, 0.6) !important; /* توهج نيون أزرق */
        outline: none !important;
    }

    /* 4. تلوين الكلام اللي بيظهر وانت بتكتب (Placeholder) */
    #search-input::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 14px !important;
    }
    /* 1. نفتح الـ overflow للـ body عشان الـ Sticky يشتغل */
html, body {
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 2. نعدل تنسيق الـ Search Bar للموبايل */
@media screen and (max-width: 1024px) {
    .parent-search {
        position: -webkit-sticky !important; /* لدعم الأيفون */
        position: sticky !important;
        top: 0 !important; /* يلزق في السقف */
        z-index: 99999 !important;
        background-color: #000000 !important; /* خلفية سوداء فحم */
        width: 100% !important;
        padding: 10px 0 !important;
        /* السطر ده هيمنع الحدفة يمين وشمال للسيرش نفسه */
        overflow-x: hidden !important; 
    }

    #search-input {
        width: 90% !important;
        height: 50px !important;
        font-size: 16px !important; /* يمنع الزوم اللعين */
        background-color: #000000 !important;
        color: white !important;
        border: 2px solid #00d2ff !important;
        border-radius: 10px !important;
    }

    /* 3. عشان نمنع الحدفة يمين وشمال للموقع كله من غير ما نبوظ الـ Sticky */
    /* بنطبق الـ overflow على الحاويات اللي جوه بس */
    .recent-container, .xclear, .logz, table {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}
}
/* ==========================================================
   تشغيل أنيميشن السلة والعداد فقط في الموبايل
   ========================================================== */
@media screen and (max-width: 1024px) {

    /* 1. تعطيل كل الأنيميشن والتحولات في الموقع بالكامل */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    /* 2. استثناء: تشغيل دوران البرواز النيون لأيقونة السلة فقط */
    .cart-icon-wrapper::before {
        animation: rotateCartNeon 3s linear infinite !important;
        background: conic-gradient(from var(--angle), transparent 70%, #00d2ff, #ffffff, #00d2ff) !important;
    }

    /* 3. استثناء: تشغيل حركة النبض لعداد الجيجات (Badge) */
    #mini-cart-badge {
        animation: badgePulse 2s infinite ease-in-out !important;
    }

    /* 4. التأكد من ثبات باقي العناصر ومنع أي Hover أو تحرك */
    .game-card, .thumb-wrapper, .recentimage img, .logz, .logz img {
        transform: none !important;
        filter: none !important; /* بيشيل توهج الصور المتحرك ويخليها ثابتة */
        animation: none !important;
    }
}


/* ==========================================================
   تكبير صورة الجدول في الموبايل
   ========================================================== */
@media screen and (max-width: 1024px) {
    
    /* استهداف الـ container بتاع الصورة */
    .recentimage, h1 {
        width: 100% !important; /* التأكد من أن الحاوية تأخذ العرض الكامل */
        padding: 0 !important;   /* إزالة أي هوامش داخلية قد تمنع التكبير */
    
    }

    /* استهداف الصورة نفسها داخل الـ .recentimage */
    .recentimage img {
        width: 100% !important;  /* الصورة هتاخد عرض الـ container بالكامل */
        height: auto !important; /* الحفاظ على أبعاد الصورة عشان متشديش */
        max-width: 100% !important; /* التأكد إنها متطلعش بره الشاشة */
        
        /* اختياري: إضافة بعض التوهج النيون عشان تمشي مع ستايل الموقع */
        filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.5)) !important;
    }
}
@media screen and (max-width: 1024px) {

    /* 1. تكبير الحاوية اللي شيلة النص النيون */
    .lol2 {
        margin: 20px 0 !important; /* تقليل المسافات الرأسية شوية للموبايل */
        width: 100% !important;
    }

    .neon-wrapper, .recentimage {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 2. تكبير النص نفسه ليملاً عرض الشاشة */
    .neon-text-main {
        font-size: 20px !important; /* كبر الحجم ده زي ما تحب (مثلاً 22px أو 24px) */
        line-height: 1.4 !important; /* مسافة بين السطرين عشان الكلام ميزنقش في بعضه */
        white-space: normal !important; /* السماح للكلام ينزل سطر جديد لو طويل */
        width: 95% !important; /* يفرش بعرض الشاشة مع ترك مسافة بسيطة جداً */
        text-align: center !important;
        padding: 10px 5px !important;
    }

    /* 3. لو إنت مستخدم برواز (neon-box-final) نكبره هو كمان */
    .neon-box-final {
        width: 90% !important; /* يخلي البرواز يملأ 90% من عرض الموبايل */
        padding: 15px 10px !important;
        box-sizing: border-box !important;
    }
}
@media screen and (max-width: 1024px) {

    /* استهداف الحاوية الكبيرة للعناوين دي فقط */
    .lol2 .neon-text-main {
        font-size: 26px !important; /* تكبير الخط جداً */
        width: 100% !important;     /* فرش العرض بالكامل */
        max-width: 100vw !important;
        line-height: 1.3 !important; /* تظبيط المسافة بين السطرين */
        white-space: normal !important; /* عشان يلف لو الكلام كتير */
        display: block !important;
        padding: 15px 0 !important;
        text-align: center !important;
    }

    /* تكبير الحاوية اللي شايلاهم عشان تاخد عرض الشاشة */
    .lol2 .recentimage {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}
/* 
/* ============================= */
/* 🛒 CART SIDEBAR - FINAL FIX */
/* ============================= */

/* الوضع الطبيعي = ظاهرة (عشان متختفيش) */
.cart {
    width: 500px !important; 
    max-width: 500px !important;

    height: 100vh !important;
    max-height: 100vh !important;

    position: fixed;
    top: 0 !important;      /* 👈 مهم */
    left: 0 !important;     /* 👈 عشان تبقى sidebar */
    right: auto !important;

    border-radius: 0 !important; /* 👈 عشان تملى الشاشة */

    background: rgba(10, 11, 16, 0.98) !important;
    border-right: 2.5px solid #00d2ff !important; /* بدل border كامل */
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;

    padding: 20px !important;

    box-shadow: 0 0 40px rgba(0, 210, 255, 0.35),
                inset 0 0 25px rgba(0, 210, 255, 0.15) !important;

    backdrop-filter: blur(15px);

    display: flex;
    flex-direction: column;

    overflow: hidden;
    z-index: 10000;
}

/* ============================= */
/* لو حبيت تخفيها (اختياري) */
/* ============================= */

.cart.closed {
    left: -350px !important;
}

/* ============================= */
/* محتوى السلة */
/* ============================= */

.cart-list {
    flex: 1 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 10px !important;
}

/* العناصر جوه السلة */
.cart-list li {
    width: 100%;
}

.cart-list div {
    width: 100%;
}

/* ============================= */
/* زرار القفل */
/* ============================= */

/* #hide-cart-btn {
    position: sticky;
    bottom: 0;
    margin-top: 10px;
} */

/* ============================= */
/* 📱 موبايل */
/* ============================= */

@media screen and (max-width: 1024px) {
    .cart {
        width: 60% !important;
        left: 0 !important;
    }

    .cart.closed {
        left: -100% !important;
    }
}

/* لو السلة اتعملها display none */
.cart[style*="display: none"] {
    left: -500px !important;
}

/* لو الكود القديم بيغير right */
.cart[style*="right"] {
    left: auto !important;
}

/* الوضع الطبيعي */
.cart {
    left: 0;
    right: auto !important;
}

#hide-cart-btn {
    width: 100% !important; /* يأخذ مساحة كبيرة لكن ليس العرض كاملاً */
    max-width: 500px !important; /* أقصى عرض يصل له مهما كبرت السلة */
    margin-top: 5px !important; /* توسيط الزرار في نص السلة */
    display: block !important;
    padding: 10px !important;
}

@media screen and (max-width: 1024px) {
    #hide-cart-btn {
        width: 100% !important; 
        max-width: 430px !important; 
        margin: 10px auto 10px auto !important; 
        display: block !important;
        
        /* الحلول السحرية للتوسيط */
        text-align: center !important;    /* تمركز أفقي */
        padding: 12px 0 !important;       /* إضافة مساحة داخلية فوق وتحت */
        line-height: 1.5 !important;      /* ضبط المسافة بين السطور */
        justify-content: center !important; /* احتياطاً لو الزرار ماخد خاصية flex */
        align-items: center !important;    /* احتياطاً لو الزرار ماخد خاصية flex */
    }
}
/* ============================= */
/* ✨ FIXED WORKING ANIMATION */
/* ============================= */

.cart {
    transform: translateX(0);
    transition: transform 0.4s ease !important;
}

/* حالة الإغلاق */
.cart.closed {
    transform: translateX(-100%);
    transition: transform 0.4s ease !important;
}

/* ==========================================================
   إصلاح أزرار السلة للموبايل فقط (ضبط النسخ والحذف)
   ========================================================== */
@media screen and (max-width: 1024px) {
    
    /* 1. توحيد حاوية الأزرار ومنع أي ترحيل */
    .cart-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 10px !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* 2. ضبط زر الواتساب ومنع "سقوط" النص لأسفل */
    .cart .copy-btn {
        width: 100% !important;
        height: 55px !important; /* ارتفاع كافي لاحتواء النص والصورة بجانب بعض */
        display: flex !important;
        flex-direction: row !important; /* صورة يمين ونص شمال */
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important; /* منع النص من النزول لسطر جديد */
        font-size: 14px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        padding: 0 10px !important;
    }

    /* 3. تصغير أيقونة الواتساب لمنع زق النص */
    .neon-whatsapp-img {
        width: 30px !important;
        height: 30px !important;
        margin-left: 10px !important; /* مسافة بسيطة */
        flex-shrink: 0 !important; /* منع انضغاط الصورة */
    }

    /* 4. إصلاح زر "حذف القائمة" الضخم */
    /* استهداف الزر من خلال الـ onclick لضمان التعديل */
    .cart-buttons button[onclick="clearCart()"], 
    .cart-buttons .copy-btn:last-child {
        background: rgba(255, 77, 77, 0.1) !important;
        border: 2px solid #ff4d4d !important;
        color: #ff4d4d !important;
        width: 100% !important; /* نفس عرض زر النسخ */
        max-width: none !important;
        height: 50px !important;
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.3) !important;
    }
}
/* ==========================================================
   إصلاح زرار حذف اللعبة الواحدة جوه السلة للموبايل
   ========================================================== */
@media screen and (max-width: 1024px) {

    /* 1. ضبط حاوية النص والزرار عشان ميهربوش لبره */
    .item-details {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* محاذاة لليمين/البداية */
        gap: 5px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* 2. تنسيق زرار الحذف الصغير (الخاص بكل لعبة) */
    .delete-btn-full {
        width: fit-content !important; /* خليه على قد الكلمة بس */
        min-width: 60px !important;
        height: auto !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        font-weight: bold !important;
        border-radius: 6px !important;
        margin: 5px 0 0 0 !important; /* مسافة بسيطة فوق الزرار */
        
        /* شكل النيون الأحمر */
        background: rgba(255, 77, 77, 0.1) !important;
        color: #ff4d4d !important;
        border: 1px solid #ff4d4d !important;
        box-shadow: 0 0 5px rgba(255, 77, 77, 0.2) !important;
        text-transform: none !important;
    }

    /* 3. التأكد إن اسم اللعبة مبيزقش الزرار لبره */
    .game-info-text {
        font-size: 13px !important;
        line-height: 1.4 !important;
        display: block !important;
        width: 100% !important;
        white-space: normal !important; /* خليه ينزل سطر جديد */
        word-break: break-word !important;
    }
}
/* ==========================================================
   إصلاح نهائي لزرار نسخ القائمة (الواتساب) في الموبايل
   ========================================================== */
@media screen and (max-width: 1024px) {
    
    /* 1. تظبيط الزرار ليكون مرن ويحتوي النص بالكامل */
    .cart-buttons .copy-btn {
        display: flex !important;
        flex-direction: row !important; /* أيقونة يمين وكلام شمال */
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;         /* سيب الارتفاع يتحدد حسب النص */
        min-height: 55px !important;    /* أقل ارتفاع مريح للضغط */
        padding: 10px 5px !important;   /* حشو داخلي متوازن */
        width: 100% !important;
        max-width: 320px !important;    /* العرض المناسب للسلة */
        margin: 0px auto !important;
        overflow: hidden !important;    /* منع أي تسريب للنص */
    }

    /* 2. التحكم في النص عشان ميهربش بره */
    .cart-buttons .copy-btn {
        font-size: 15px !important;     /* تصغير الخط سنة بسيطة للموبايل */
        line-height: 1.3 !important;    /* تظبيط المسافة بين السطور */
        white-space: normal !important;  /* السماح للنص ينزل سطر جديد لو العرض مش كافي */
        text-align: center !important;
        word-break: break-word !important;
    }

    /* 3. تظبيط أيقونة الواتساب عشان متزقش الكلام */
    .neon-whatsapp-img {
        width: 28px !important;         /* حجم مثالي للأيقونة */
        height: 28px !important;
        margin-left: 10px !important;   /* مسافة ثابتة جهة اليمين */
        flex-shrink: 0 !important;      /* منع انضغاط الصورة */
    }
}
/* في الحالة الطبيعية (الكمبيوتر) الـ Break مخفي */
.mobile-break {
    display: none !important;
}

/* في نسخة الموبايل فقط نظهر الـ Break */
@media screen and (max-width: 1024px) {
    .mobile-break {
        display: block !important;
        content: ""; /* لضمان تفعيل الكسر في بعض المتصفحات */
        margin-top: 5px; /* مسافة بسيطة بين السطرين لو حبيت */
    }

    /* نأكد إن الزرار بيسمح بنزول الكلام سطر جديد */
    .cart-buttons .copy-btn {
        white-space: normal !important; 
        height: auto !important;
        padding: 10px !important;
        flex-direction: row !important; /* يحافظ على الصورة بجانب النص المكسور */
        align-items: center !important;
    }
}

.cart {
  display: none;
}
#mini-cart {
  display: flex;
}

@media screen and (max-width: 1024px) {
    /* توحيد الحاوية للأزرار الثلاثة */
    .cart-buttons {
        display: flex !important;
        flex-direction: column !important; /* ترتيب رأسي */
        align-items: center !important;    /* التوسيط في منتصف السلة */
        gap: 10px !important;              /* مسافة موحدة بين الأزرار */
        width: 100% !important;
        padding: 0 !important;
    }

    /* تطبيق تنسيق موحد على زر الحذف وزر النسخ وزر الإخفاء */ 
    .copy-btn, 
    button[onclick="clearCart()"] {
        width: 85% !important;            /* عرض موحد للكل */
        max-width: 300px !important;      /* أقصى عرض للحفاظ على التناسق */
        margin: 0 auto !important;        /* التوسيط الإجباري */
        height: 50px !important;          /* ارتفاع موحد */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }
}

.cart-list {
    height: 600px !important;
}

/* تنسيق زرار حذف اللعبة الواحدة - نيون أحمر */
.delete-btn-full {
    background: rgba(255, 77, 77, 0.05) !important; /* خلفية شفافة جداً */
    color: #ff4d4d !important; /* لون الخط أحمر نيون */
    border: 2px solid #ff4d4d !important; /* برواز أحمر صريح */
    text-shadow: 0 0 8px #ff4d4d !important; /* توهج النص */
    box-shadow: 0 0 12px rgba(255, 77, 77, 0.2), 
                inset 0 0 8px rgba(255, 77, 77, 0.1) !important;
    border-radius: 10px !important;
    padding: 8px 15px;
    font-weight: bold;
    font-family: 'Almarai', sans-serif;
    cursor: pointer;
    transition: all 0.4s ease !important;
    text-align: center;
}

/* تأثير عند الوقوف بالماوس */
.delete-btn-full:hover {
    background: #ff4d4d !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px #ff4d4d, 0 0 40px rgba(255, 77, 77, 0.6) !important;
    transform: scale(1.05);
}
@media screen and (max-width: 1024px) {
.cart-list {
    height: 350px !important;
    margin: 0px !important;
}
}

/* 1. منع الموقع يروح يمين وشمال نهائياً */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    /* السر هنا: منع الـ Horizontal Scroll مع السماح بالـ Sticky */
    overflow-x: clip !important; 
}

/* 2. تثبيت البحث في السقف (Sticky الحديدي) */
.parent-search {
    position: -webkit-sticky !important; /* لدعم الأيفون */
    position: sticky !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important;
    background-color: #0a0b10 !important; /* خلفية معتمة عشان ميبقاش شفاف */
    padding: 15px 0 !important;
    z-index: 10005 !important; /* رقم عالي جداً عشان يغطي على أي حاجة تانية */
    box-sizing: border-box !important;
}

td[data-label="ID"] {
    word-break: break-all;
    width: 12px;
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
    color: #00d2ff;
    text-shadow: 0 0 5px #00d2ff;
}
td[data-label="المساحة"] {
    color: #00d2ff !important;
    font-weight: bold;
    text-shadow: 
        0 0 5px rgba(0, 210, 255, 0.8),
        0 0 10px rgba(0, 210, 255, 0.6);
}

#mini-cart-badge {
    color: #ffffff !important;
    font-weight: bold;

    text-shadow: 
        0 0 1px #000,
        0 0 4px #00d2ff,
        0 0 8px rgba(0, 210, 255, 0.6);
}
#mini-cart-badge {
    font-size: 16px !important;
    font-weight: bold;
}
.cart-icon-wrapper {
    box-shadow: 
        0 0 15px #00d2ff,
        0 0 30px #00d2ff,
        0 0 60px rgba(0, 210, 255, 0.8);
}

/* تنسيق زرار نسخ القائمة للواتساب - أخضر نيون */
.copy-btn {
    background: rgba(37, 211, 102, 0.05) !important; /* خلفية خضراء شفافة جداً */
    color: #25D366 !important; /* لون الخط أخضر واتساب نيون */
    border: 2px solid #25D366 !important; /* الفريم أخضر نيون */
    text-shadow: 0 0 8px #25D366 !important; /* توهج النص */
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.3), 
                inset 0 0 10px rgba(37, 211, 102, 0.1) !important; /* توهج الفريم الخارجي والداخلي */
    border-radius: 12px !important;
    transition: 0.4s all ease-in-out !important;
}

/* تأثير عند تمرير الماوس فوق الزر */
.copy-btn:hover {
    background: #25D366 !important; /* يمتلئ باللون الأخضر عند الوقوف عليه */
    color: #ffffff !important; /* الخط يتحول للأبيض للوضوح */
    box-shadow: 0 0 25px #25D366, 
                0 0 50px rgba(37, 211, 102, 0.6) !important; /* زيادة قوة التوهج */
    transform: translateY(-3px); /* حركة بسيطة للأعلى */
}

/* تنسيق أيقونة الواتساب داخل الزر لتتوهج مع الزر */
.neon-whatsapp-img {
    filter: drop-shadow(0 0 5px #25D366) !important;
}

/* عرض الشريط - سنكبره قليلاً لنعوض مسافة الإزاحة */
::-webkit-scrollbar {
    width: 12px; 
}

/* المسار الخلفي */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); 
}

/* الجزء المتحرك (السكرول) */
::-webkit-scrollbar-thumb {
    background: #FF5F1F !important;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 95, 31, 0.5);
    
    /* الحيلة هنا: إضافة حدود شفافة من جهة اليمين فقط */
    /* هذا سيجعل الجزء الملون يبتعد عن الحافة اليمنى */
    border-right: 1px solid transparent; 
    
    /* لمنع اللون من ملء منطقة الحدود الشفافة */
    background-clip: padding-box; 
}

/* عند الوقوف عليه بالماوس (اختياري) */
::-webkit-scrollbar-thumb:hover {
    background: #ff4500 !important;
    background-clip: padding-box; /* التأكد من بقاء الإزاحة عند الهوفر */
}
/* لون الشريط عند الوقوف عليه بالماوس */
::-webkit-scrollbar-thumb:hover {
    background: #ff4500 !important; 
}
@media screen and (max-width: 1024px) {
    /* تصغير اسم اللعبة داخل السلة */
    .cart-list li span, 
    .item-info span, 
    .game-info-text {
        font-size: 13px !important; /* حجم صغير جداً للموبايل */
        line-height: 1.1 !important;
        font-weight: bold !important; /* لتقليل الزحمة */
    
    }

@media screen and (max-width: 1024px) {
    /* ضبط حاوية القائمة لمنع أي ترحيل وتقليل المسافات */
    .cart-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;  /* توسيط كل الكروت في منتصف السلة */
        width: 100% !important;
        padding: 0 !important;
        gap: 0px !important;            /* إلغاء المسافة التلقائية بين العناصر */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* تنسيق الكروت داخل السلة لتطابق عرض الأزرار وضبط المسافات */
    .neon-list-item, 
    .cart-list li {
        width: 100% !important;           /* نفس النسبة المستخدمة للأزرار */
        max-width: 300px !important;     /* نفس الحد الأقصى للأزرار لضمان التطابق */
        margin: 8px auto 0px auto !important; /* توسيط مع مسافة 8px بين كل كارت واللي تحته */
        padding: 3px !important;            /* تقليل الحشو الداخلي للكارت ليظهر بحجم أصغر */
        box-sizing: border-box !important;
        display: flex !important;
        border-radius: 12px !important;  /* نفس انحناء الأزرار */
    }
}
@media screen and (max-width: 1024px) {
    /* تصغير العناوين داخل الكروت */
    .game-card h3 {
        font-size: 13px !important; /* تصغير الخط ليناسب الأعمدة الأربعة */
        line-height: 16px !important;
        min-height: calc(16px * 4) !important; /* تقليل الارتفاع المحجوز للاسم */
        margin: 6px 0 !important;
    }

}
}
#thumbnail-container,.lol2,.recent-container,.recentimage,.xclear,#grid2-buttons,#grid1-buttons,.parent-search,.alpha-btn,#alpha-filter{

    display: none !important;
}
@media screen and (max-width: 1024px) {
    .cart-list {
        max-height: 100vh !important; /* 40% من ارتفاع الشاشة */
        overflow-y: auto !important;
    }
}

/* ==========================================================
   تعديلات الناف بار للموبايل (مسافة بسيطة جداً بين الأزرار + سطرين للنص)
   ========================================================== */
@media screen and (max-width: 1024px) {
    /* 1. ارتفاع مناسب عشان يستوعب الأيقونة + سطرين كلام */
    .main-bottom-nav {
        height: 55px !important; 
        padding: 0 5px !important; /* مسافة بسيطة من حواف الشاشة يمين وشمال */
        gap: 4px !important; /* 👈 السر هنا: مسافة 4 بكسل بين كل زرار والتاني */
    }

    /* 2. تظبيط البوكس الشفاف ليتطابق مع الارتفاع */
    .bottom-spacer-box {
        height: 55px !important;
        margin-top: 5px !important;
    }

    /* 3. ضغط الأزرار مع الحفاظ على المسافة */
    .nav-item {
        min-width: 0 !important; 
        padding: 0 !important;
        flex: 1 1 0 !important; /* بيخلي الأزرار تظبط مقاسها تلقائي عشان متخرجش بره الشاشة */
        text-align: center !important;
        justify-content: center !important;
        overflow: hidden !important; /* بيمنع أي حاجة تخرج بره الزرار */

    }

    /* 4. حجم الأيقونة */
    .nav-icon {
        font-size: 1.1rem !important; 
        margin-bottom: 2px !important;
    }

    /* 5. تظبيط النص عشان ينزل لسطرين عادي */
    .nav-text {
        font-size: 9px !important; 
        line-height: 1.3 !important; 
        white-space: normal !important; /* بيسمح بكسر الكلام لسطرين */
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        text-align: center !important;
    }
}

.info-card-neon {
    border: 1px solid #00d2ff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 12px;
    margin: 15px auto;
    width: 90%; /* عشان يفضل متناسق */
    text-align: right; /* ضمان الاتجاه العربي */
    direction: rtl;
}

.info-item {
    color: #fff;
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.price-tag {
    color: #ff4d4d;
    font-weight: bold;
    margin: 0 5px;
    text-shadow: 0 0 5px #ff0000;
}

.blue-tag {
    color: #00d2ff;
    font-weight: bold;
    margin: 0 5px;
    text-shadow: 0 0 5px #00d2ff;
}

.note-text {
    color: #aaa; /* لون رمادي هادي للتوضيح */
    font-size: 11px;
    margin-right: auto; /* يزق التوضيح لليسار شوية */
}

.emoji-glow {
    margin-left: 10px;
    filter: drop-shadow(0 0 3px #fff);
}

.Anime {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    margin: 30px 0 !important;
    padding: 0 10px;
    box-sizing: border-box;
}

.Anime img {
    max-width: 900px;
    height: auto;
    display: block;
    object-fit: contain;
    margin: 20px;
    border-radius: 10px;
    /* تأثير التوهج النيون الخارق */
    filter: drop-shadow(0 0 10px #00d2ff) 
            drop-shadow(0 0 25px rgba(0, 210, 255, 0.7)) 
            drop-shadow(0 0 45px rgba(0, 210, 255, 0.4)) !important;
    transition: all 1s ease-in-out !important;
    /* حركة التنفس النيوني */
    animation: imageBreatheGlow 4s infinite ease-in-out !important;
}

/* تأثير عند الوقوف بالماوس (Hover) للكمبيوتر */
.Anime img:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 0 1px #ffffff) 
            drop-shadow(0 0 1px #00d2ff) 
            drop-shadow(0 0 1px rgba(0, 210, 255, 1)) !important;
}

/* ========================================= */
/* إعدادات الميديا كويري (للموبايل والتابلت) */
/* ========================================= */
@media screen and (max-width: 1024px) {
    .Anime {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .Anime img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 10px !important;
        /* توهج نيون أخف للموبايل عشان الأداء */
        filter: drop-shadow(0 0 2px rgba(0, 210, 255, 0.5)) !important;
        /* إيقاف الأنيميشن وحركة التكبير في الموبايل */
        animation: none !important;
        transform: none !important;
    }
}
/* --- كود اللودر النيون (شغال كمبيوتر وموبايل) --- */

/* --- كود اللودر النيون الجديد (شغال كمبيوتر وموبايل) --- */
#loader-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 999999 !important;
    overflow: hidden;
}

.loader-scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,210,255,0.4), transparent);
    animation: scanMove 3s linear infinite;
    pointer-events: none;
}

.loader-corner {
    position: absolute;
    width: 20px; height: 20px;
    opacity: 0.5;
}
.corner-tl { top: 16px; left: 16px; border-top: 2px solid #00d2ff; border-left: 2px solid #00d2ff; }
.corner-tr { top: 16px; right: 16px; border-top: 2px solid #00d2ff; border-right: 2px solid #00d2ff; }
.corner-bl { bottom: 16px; left: 16px; border-bottom: 2px solid #00d2ff; border-left: 2px solid #00d2ff; }
.corner-br { bottom: 16px; right: 16px; border-bottom: 2px solid #00d2ff; border-right: 2px solid #00d2ff; }

.loader-stars { position: absolute; inset: 0; pointer-events: none; }
.loader-star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: twinkleStar var(--d, 2s) ease-in-out infinite var(--delay, 0s);
}

.loader-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    z-index: 10;
}

.loader-rings-wrap {
    position: relative;
    width: 120px; height: 120px;
    display: flex; align-items: center; justify-content: center;
}

.neon-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    display: block !important;
}
.neon-ring::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--clr, #00d2ff);
    border-right-color: var(--clr, #00d2ff);
    filter: drop-shadow(0 0 8px var(--clr, #00d2ff));
}
.ring1 { --clr: #00d2ff; inset: 0;    animation: spin 1.2s linear infinite !important; }
.ring2 { --clr: #ff00ff; inset: 12px; animation: spin 1.8s linear infinite reverse !important; }
.ring3 { --clr: #00ff88; inset: 24px; animation: spin 2.6s linear infinite !important; }

.loader-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 10px #00d2ff);
    animation: iconPulse 2s ease-in-out infinite;
}

.loading-text {
    font-family: 'Almarai', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700;
    color: #fff !important;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 0 20px #00d2ff, 0 0 40px #00d2ff;
    animation: titleGlow 2s ease-in-out infinite;
    display: block !important;
    margin-top: 0 !important;
}

.loader-subtitle {
    font-family: 'Almarai', sans-serif;
    font-size: 13px;
    color: rgba(0, 210, 255, 0.7);
    letter-spacing: 3px;
    animation: fadeSub 1.5s ease-in-out infinite alternate;
}

.loader-progress-wrap {
    width: 220px; height: 3px;
    background: rgba(0, 210, 255, 0.15);
    border-radius: 99px; overflow: hidden;
}
.loader-progress-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #00d2ff, #ff00ff, #00ff88);
    animation: progressAnim 2.5s ease-in-out infinite;
    box-shadow: 0 0 10px #00d2ff;
}

.loader-dots {
    display: flex; gap: 8px;
}
.loader-dot {
    width: 6px; height: 6px;
    border-radius: 50%; background: #00d2ff;
    animation: dotBounce 1.2s ease-in-out infinite;
    box-shadow: 0 0 6px #00d2ff;
}
.loader-dot:nth-child(2) { animation-delay: .2s; background: #ff00ff; box-shadow: 0 0 6px #ff00ff; }
.loader-dot:nth-child(3) { animation-delay: .4s; background: #00ff88; box-shadow: 0 0 6px #00ff88; }
.loader-dot:nth-child(4) { animation-delay: .6s; }

@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes scanMove    { 0% { top: 0; } 100% { top: 100%; } }
@keyframes twinkleStar { 0%,100%{opacity:.1;transform:scale(1)}50%{opacity:.9;transform:scale(1.4)} }
@keyframes iconPulse   { 0%,100%{transform:scale(1)}50%{transform:scale(1.1)} }
@keyframes titleGlow   { 0%,100%{text-shadow:0 0 10px #00d2ff,0 0 20px #00d2ff}50%{text-shadow:0 0 20px #00d2ff,0 0 50px #00d2ff,0 0 70px #00d2ff} }
@keyframes fadeSub     { from{opacity:.4}to{opacity:1} }
@keyframes progressAnim{ 0%{width:0%;margin-left:0}50%{width:80%;margin-left:0}100%{width:0%;margin-left:100%} }
@keyframes dotBounce   { 0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-8px);opacity:1} }


@media screen and (max-width: 1024px) {

    /* بنعطل كل حاجة ماعدا اللودر وأيقونة السلة */
    *:not(#loader-container):not(#loader-container *):not(.cart-icon-wrapper):not(.cart-icon-wrapper::before) {
        animation: none !important;
        transition: none !important;
    }

    /* نعيد تشغيل كل أنميشن اللودر عشان ::before مش بيتضمن في :not */
    .ring1, .ring1::before { animation: spin 1.2s linear infinite !important; }
    .ring2, .ring2::before { animation: spin 1.8s linear infinite reverse !important; }
    .ring3, .ring3::before { animation: spin 2.6s linear infinite !important; }
    .loader-scan-line { animation: scanMove 3s linear infinite !important; }
    .loader-star { animation: twinkleStar var(--d, 2s) ease-in-out infinite var(--delay, 0s) !important; }
    .loader-icon { animation: iconPulse 2s ease-in-out infinite !important; }
    .loading-text { animation: titleGlow 2s ease-in-out infinite !important; }
    .loader-subtitle { animation: fadeSub 1.5s ease-in-out infinite alternate !important; }
    .loader-progress-fill { animation: progressAnim 2.5s ease-in-out infinite !important; }
    .loader-dot { animation: dotBounce 1.2s ease-in-out infinite !important; }
    .loader-dot:nth-child(2) { animation-delay: .2s !important; }
    .loader-dot:nth-child(3) { animation-delay: .4s !important; }
    .loader-dot:nth-child(4) { animation-delay: .6s !important; }
}


.sol-btn-red {
    background: rgba(255, 71, 87, 0.05) !important;
    /* خلفية حمراء شفافة جداً */
    color: #ff4757 !important;
    /* لون الخط أحمر نيون */
    border: 2px solid #ff4757 !important;
    /* الفريم أحمر نيون */
    text-shadow: 0 0 8px #ff4757 !important;
    /* توهج النص */
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.3),
        inset 0 0 10px rgba(255, 71, 87, 0.1) !important;
    border-radius: 12px !important;
    padding: 6px 10px !important;
    /* التعديل ده هيخلي حجمه "سمباتيك" ومش منفوخ */
    transition: 0.4s all ease-in-out !important;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
}

/* تأثير عند تمرير الماوس فوق الزر الأحمر */
.sol-btn-red:hover {
    background: #ff4757 !important;
    /* يمتلئ بالأحمر */
    color: #ffffff !important;
    /* الخط أبيض للوضوح */
    box-shadow: 0 0 20px #ff4757,
        0 0 40px rgba(255, 71, 87, 0.6) !important;
    transform: translateY(-2px);
    /* حركة أخف للأعلى */
}

@media screen and (max-width: 1024px) {

    /* بنعطل كل حاجة ماعدا اللودر وأيقونة السلة */
    .sol-btn-red {
        background: rgba(255, 71, 87, 0.05) !important;
        /* خلفية حمراء شفافة جداً */
        color: #ff4757 !important;
        /* لون الخط أحمر نيون */
        border: 2px solid #ff4757 !important;
        /* الفريم أحمر نيون */
        text-shadow: 0 0 8px #ff4757 !important;
        /* توهج النص */
        box-shadow: 0 0 15px rgba(255, 71, 87, 0.3),
            inset 0 0 10px rgba(255, 71, 87, 0.1) !important;
        border-radius: 12px !important;
        padding: 4px 10px !important;
        /* التعديل ده هيخلي حجمه "سمباتيك" ومش منفوخ */
        transition: 0.4s all ease-in-out !important;
        cursor: pointer;
        font-weight: bold;
        font-size: 15px;
        width: 85%;
    }
}




.stat-x {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-family: 'Almarai', sans-serif !important;
    font-weight: bold !important;
    font-size: 17px !important;
    margin: 0 !important;
    padding: 3px 0 !important;
    /* دي المسافة الموحدة بين السطور */
    line-height: 1.4 !important;

}

@media screen and (max-width: 1024px) {

    /* بنعطل كل حاجة ماعدا اللودر وأيقونة السلة */
    .stat-x {
        font-size: 12px !important;
        /* تصغير الخط */
        padding: 2px 0 !important;
        /* تقليل المسافة بين السطور */
        line-height: 1.3 !important;
    }
}

/* ==========================================================
   ضبط حجم أزرار السلة الثلاثة في الموبايل
   (إغلاق السلة - نسخ القائمة - حذف القائمة)
   ========================================================== */
@media screen and (max-width: 1024px) {

    /* زرار إغلاق السلة */
    #hide-cart-btn {
        padding: 6px 10px !important;
        height: auto !important;
        min-height: unset !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    /* زرار نسخ القائمة (واتساب) */
    .cart-buttons .copy-btn {
        padding: 6px 10px !important;
        height: auto !important;
        min-height: unset !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    /* زرار حذف القائمة */
    .cart-buttons button[onclick="clearCart()"],
    button[onclick="clearCart()"] {
        padding: 1px 1px !important;
        height: auto !important;
        min-height: unset !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    /* تصغير أيقونة الواتساب جوه زرار النسخ */
    .cart-buttons .copy-btn .neon-whatsapp-img {
        width: 30px !important;
        height: 30px !important;
        margin-left: 3px !important;
    }
}

/* ==========================================================
   تصغير زرار حذف القائمة - override قوي
   الزرار عنده class="copy-btn" وonclick="clearCart()"
   ========================================================== */
@media screen and (max-width: 1024px) {
    .cart-buttons .copy-btn[onclick="clearCart()"],
    .copy-btn[onclick="clearCart()"] {
        padding: 6px 12px !important;
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        display: inline-block !important;
    }
}

@media screen and (max-width: 1024px){

    .cart-header {
        display: flex !important;
        align-items: center !important;
        gap: 1px !important;
    }

    .cart-logo img {
        width: 42px !important;
        height: auto !important;
    }

    .cart-header h3 {
        margin: 0 !important;
        font-size: 15px !important;
    }

}

/* ============================================================
   @keyframes لحركة السلة
   ============================================================ */

/* حركة الدخول: من الشمال لليمين */
@keyframes cartSlideIn {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* حركة الخروج: من اليمين للشمال */
@keyframes cartSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-80px);
    }
}

/* الحالة الافتراضية: مخفية */
.cart {
    display: none;
    pointer-events: none;
}

/* لما السلة تتفتح */
.cart.cart-visible {
    display: block;
    pointer-events: all;
    animation: cartSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* لما السلة تتقفل */
.cart.cart-hiding {
    display: block;
    pointer-events: none;
    animation: cartSlideOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* الأيقونة الصغيرة: الحالة المخفية */
#mini-cart {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* الأيقونة الصغيرة: الحالة الظاهرة */
#mini-cart.mini-cart-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

/* ============================================================
   تفعيل إجباري لأنيميشن السلة على الموبايل
   (override لأي قاعدة بتوقف الأنيميشن على شاشات صغيرة)
   ============================================================ */
@media screen and (max-width: 1024px) {

    /* أنيميشن فتح السلة - شغال دايماً */
    .cart.cart-visible {
        display: block !important;
        pointer-events: all !important;
        animation: cartSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    }

    /* أنيميشن غلق السلة - شغال دايماً */
    .cart.cart-hiding {
        display: block !important;
        pointer-events: none !important;
        animation: cartSlideOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    }

    /* العداد الصغير - أنيميشن ظهوره شغال دايماً */
    #mini-cart {
        transition: opacity 0.35s ease, transform 0.35s ease !important;
    }

    #mini-cart.mini-cart-visible {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: all !important;
    }
}

/* ============================================================
   أنيميشن فتح وإغلاق نافذة الاسعار (deliveryPopup)
   ============================================================ */

/* keyframes فتح */
@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* keyframes إغلاق */
@keyframes popupFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
}

/* حالة الفتح */
#deliveryPopup.popup-opening {
    display: flex !important;
    animation: popupFadeIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* حالة الإغلاق */
#deliveryPopup.popup-closing {
    display: flex !important;
    animation: popupFadeOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* أنيميشن الـ overlay (الخلفية الداكنة) */
#deliveryPopup {
    transition: background 0.3s ease;
}

/* أنيميشن داخل الصندوق */
#deliveryPopup .delivery-box {
    transition: box-shadow 0.3s ease;
}

/* ============================================================
   تفعيل أنيميشن deliveryPopup على الموبايل
   (override لكل قواعد إيقاف الأنميشن على الموبايل)
   ============================================================ */
@media screen and (max-width: 1024px) {

    /* تفعيل الأنميشن على الـ popup نفسه */
    #deliveryPopup.popup-opening {
        animation: popupFadeIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
        transition: none !important;
    }

    #deliveryPopup.popup-closing {
        animation: popupFadeOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
        transition: none !important;
    }

    /* إلغاء الـ override اللي كان بيوقف أنيميشن delivery-box */
    .delivery-box,
    .popup-content {
        animation: unset !important;
        transform: unset !important;
    }
}