/* =========================================
   🖥️ BACKGROUND - خلفية الصفحة المتحركة
========================================= */
html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: transparent;
  scrollbar-width: none;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;

  font-family: 'Arial', sans-serif;
  direction: rtl;

  background: transparent;
  /* ❌ إزالة اللون الأسود نهائيًا */
  overflow-x: hidden;
  overflow-y: scroll;

  scrollbar-width: none;
}

/* إخفاء السكرول في WebKit */
body::-webkit-scrollbar {
  display: none;
}

/* =========================================
   🎨 BACKGROUND FIXED LAYER (Mobile Safe)
   ✅ محسّنة للهواتف ذات الشاشات الكبيرة
========================================= */
.bg-animated {
  position: fixed;

  /* نكبر الطبقة حتى لا تنكشف في أسفل الصفحة */
  top: -20%;
  left: -20%;
  width: 140vw;
  height: 140vh;

  z-index: -1;

  background: linear-gradient(135deg,
      #860bd3,
      #0335e9,
      #cd0303,
      #060cd4,
      #ca0606,
      #6609a0,
      #930202);
  background-size: 400% 400%;
  animation: bg 18s linear infinite;

  transform: translate3d(0, 0, 0);
  /* تحفيز GPU */
  backface-visibility: hidden;
  /* تحسين الأداء */
  will-change: transform, background-position;

  pointer-events: none;
}

/* الحركة */
@keyframes bg {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}




/* =========================================
   🖥️ TITLES - العناوين
========================================= */
h1 {
  text-align: center;
  padding: 20px;
  color: white;
  text-shadow: 1px 1px 3px black;
}

/* === خط الترحيب === */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
.welcome-banner {
  font-family: 'Great Vibes', cursive;
  font-size: 2.2rem;
  color: white;
  text-align: center;
  text-shadow: 0 0 5px #c10101, 0 0 10px #042590;
  position: absolute;
  left: 37.3%;
  transform: translateX(-50%);
  font-size: 29px;
  color: #a3a1a1ff;
  font-weight: normal;
  font-family: "Kings", cursive;
}

@keyframes welcomeFadeInGlow {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
    filter: drop-shadow(0 0 5px #a8e6cf);
    letter-spacing: 15px;
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.15);
    filter: drop-shadow(0 0 25px #64c7b1);
    letter-spacing: 3px;
    text-shadow:
      0 0 10px #a8e6cf,
      0 0 20px #64c7b1,
      0 0 30px #64c7b1;
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    filter: drop-shadow(0 0 10px #a8e6cf);
    letter-spacing: 2px;
    text-shadow:
      0 0 5px #fff,
      0 0 10px #a8e6cf,
      0 0 15px #64c7b1;
  }
}

/* =========================================
   🖥️ TOP BAR - الشريط العلوي
========================================= */
.top-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 20px;
  background: linear-gradient(
    90deg, 
    #272525, #6c00af, #c54200, #c40000, #0705b5, #c42708, #740496, #373535
  );
  color:white;
  font-size:15px;
}

.top-bar a {
  font-weight: bold;
  color:white;
  text-decoration:none;
  margin:0 8px;
  padding:6px 12px;
  border-radius:8px;
}

.top-bar a:hover {
  background: rgba(255,255,255,0.2);
}

/* ===== اللغة ===== */
.language-selector {
  flex:1;
  text-align:center;
}

.language-selector select {
  padding:6px 12px;
  border-radius:12px;
  border:none;
  background:white;
  color:#444;
  font-weight:bold;
  cursor:pointer;
}

/* ===== السلة وزر الهامبرغر ===== */
.cart-menu-wrapper {
  display:flex;
  align-items:center;
  gap:6px;
  position: relative;
  top: 3px;
}

.cart-button {
  padding:5px 10px;
  border-radius:6px;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:4px;
  background: linear-gradient(145deg, #0746ce, #a90909);
  color: #333;
  border:none;
  font-weight:bold;
  text-decoration:none;
  position: relative;
  box-shadow: 4px 4px 10px #000000, -4px -4px 50px #ffffff;
  transition: all 0.2s ease-in-out;
}

.cart-button:hover {
  transform: translateY(-2px);

}

.cart-count {
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: -8px;
  left: -8px;
}

.menu-btn {
  font-size: 13px;
  padding: 6.5px 18px;
  border-radius:10px;
box-shadow: 4px 4px 10px #000000, -4px -4px 50px #ffffffcb;
  background: #6a0fa3ff;
  color: #000000ff;
  border:none;
  cursor:pointer;
}



/* ===== القائمة المنسدلة ===== */
.dropdown-menu {
  display:none;
  position:absolute;
  top:50px;
  left:2px;
  background:#1c1f3a;
  color:white;
  width:220px;
  border-radius:8px;
  padding:15px;
  box-shadow:0 5px 15px rgba(0,0,0,0.3);
  z-index:1050;
}

.dropdown-menu h2 {
  margin-bottom:10px;
  font-size:16px;
  color:#6c5ce7;
  text-align:center;
}

.dropdown-menu ul {
  list-style:none;
  padding:0;
  margin:0;
}

.dropdown-menu li a {
  display:block;
  padding:8px;
  color:white;
  text-decoration:none;
  border-radius:6px;
  transition:0.3s;
}

.dropdown-menu li a:hover {
  background: linear-gradient(145deg,#6c5ce7,#00ffff);
  transform:scale(1.05);
}

/* =========================================
   🖥️ PRODUCTS – شبكة منتجات الصفحة الرئيسية
========================================= */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  padding: 16px;
}


/* =========================================
   🧱 كارت المنتج – Index Page
========================================= */
.product {
  display: flex;
  flex-direction: column;

  width: 150px;
  height: 300px;

  padding: 8px;
  text-align: center;

  background: rgba(255, 255, 255, 0.65); /* شفاف أنيق */
  backdrop-filter: blur(5px);
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);

  transition: all 0.3s ease;
}


/* =========================================
   ✨ Hover
========================================= */
.product:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}


/* =========================================
   🖼️ صورة المنتج
========================================= */
.product img {
  width: 95%;
  height: 140px;
  object-fit: contain;

  border-radius: 14px;
  background: rgba(255, 255, 255, 0.321);
  padding: 2px;
}


/* =========================================
   🛍️ اسم المنتج
========================================= */
.product h3 {
  font-size: 13px;
  margin: 6px 0 4px;
  color: #111;
  line-height: 1.2;
}


/* =========================================
   💰 السعر
========================================= */
.product p.price {
  font-size: 13px;
  font-weight: bold;
  color: #1e8e3e;
  margin-bottom: 6px;
}


/* =========================================
   ➕ زر إضافة إلى السلة (ثابت أسفل الكارت)
========================================= */
.add-to-cart-form {
  margin-top: auto; /* 🔒 تثبيت الزر بالأسفل */
}

.add-to-cart-form button {
  width: 100%;
  padding: 8px 0;

  background: linear-gradient(135deg, #2a1ed2, #13c62e);
  color: #fff;

  border: none;
  border-radius: 14px;

  font-size: 13px;
  font-weight: bold;
  cursor: pointer;

  transition: all 0.25s ease;
}

.add-to-cart-form button:hover {
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(0,0,0,0.25);
}


/* إصلاح الروابط داخل الكارت */
.product a {
  all: unset;
  display: block;
  cursor: pointer;
  color: inherit !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

.product a:hover {
  color: #6c5ce7 !important;
}

/* ===== تحكم حر بالكارت ===== */
/* الفارق بين الكارتات في السطر */
.product {
  margin-right: -5px; /* مسافة بين كل كارت والكارت اللي بجانبه */
}


/* التحكم في التكبير والتصغير للكارت بالكامل */
.product {
  transform-origin: center center; /* عند التكبير أو التصغير يظل الكارت متناسق */
}

/* ===== تحريك كتلة الكارتات بالكامل ===== */
.products-wrapper {
  display: inline-block; /* لتسمح بالتحريك بحرية */
  position: relative;    /* ضروري للتحكم في المواقع */
  transition: transform 0.3s ease-in-out; /* حركة سلسة عند التحريك */
}

/* للتحريك حرًا يمكن استعمال translate */
.products-wrapper.move-up    { transform: translateY(-20px); } /* تحريك للأعلى */
.products-wrapper.move-down  { transform: translateY(20px); }  /* تحريك للأسفل */
.products-wrapper.move-left  { transform: translateX(-20px); } /* تحريك لليسار */
.products-wrapper.move-right { transform: translateX(20px); }  /* تحريك لليمين */

/* أمثلة للجمع بين التحركات */
.products-wrapper.move-up-left     { transform: translate(-20px, -20px); }
.products-wrapper.move-up-right    { transform: translate(20px, -20px); }
.products-wrapper.move-down-left   { transform: translate(-20px, 20px); }
.products-wrapper.move-down-right  { transform: translate(20px, 20px); }


/* =========================================
   🖥️ SEARCH - محرك البحث
========================================= */
.search-container {
  position: relative;
  top: var(--top-offset, 9px);
  left: var(--left-offset, -10px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 1001;
}

#searchInput {
  width: 170px;
  height: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 14px;
  background: #fff;
  color: #333;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
  transition: border 0.3s ease;
}

#searchInput:focus {
  border: 1px solid #888;
}

#searchBtn {
  width: 40px;
  height: 27px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff8a00, #e52e71);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 8px rgba(229,46,113,0.6), 0 0 12px rgba(255,138,0,0.6);
}

#searchBtn i {
  font-size: 16px;
  color: white;
}

#searchBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(229,46,113,0.8), 0 0 20px rgba(255,138,0,0.8);
}

#searchBtn:active {
  transform: scale(0.95);
}

/* =========================================
   🖥️ MARKET BUTTON
========================================= */
.market-button {
    padding: 6px 12px;
    background: linear-gradient(135deg, #b8051aff, #001cbbff);
    color: white;
    border-radius: 8px;
    font-size: 15px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    /* تعديل box-shadow الأساسي: سفلي أسود، علوي أبيض */
    box-shadow: 4px 4px 10px #000000, -4px -4px 50px #ffffff;
    animation: pulseGlow 2s infinite alternate;
}

.market-button:hover {
    background: linear-gradient(135deg, #e9e9e9ff, #931111ff);
    transform: translateY(-3px) scale(1.08);
    /* تعديل الـ hover */
    box-shadow: 4px 4px 12px #000000, -4px -4px 52px #ffffff;
    cursor: pointer;
}

.market-button:active {
    transform: translateY(0) scale(1);
    box-shadow: 4px 4px 10px #000000, -4px -4px 50px #ffffff;
}

@keyframes pulseGlow {
    from {
        box-shadow: 4px 4px 8px #000000, -4px -4px 58px #ffffff;
    }

    to {
        box-shadow: 4px 4px 14px #000000, -4px -4px 54px #ffffff;
    }
}

/* =========================================
   🖥️ DESKTOP LOGIN / MOBILE
========================================= */
.top-bar > div:first-child {
  display: block; /* تسجيل الدخول الحاسوب */
}

.auth-mobile {
  display: none;
}

/* =========================================
   📱 MOBILE (لشاشات أقل من 768px)
========================================= */
@media (max-width: 768px) {
  .top-bar > div:first-child {
    display: none !important; /* إخفاء تسجيل الدخول الحاسوب */
  }

  .auth-mobile {
    display: block !important;
    text-align: center;
    font-size: 11px;
    margin: 6px auto;
    padding: 5px 8px;
    background: rgba(0,0,0,0.35);
    border-radius: 8px;
  }

  .auth-mobile a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    margin: 0 4px;
  }
}



/* ===============================
   💰 تصفية السعر - تصميم أنيق
=============================== */
.price-filter {
  padding: 12px 10px 15px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(246, 246, 246, 0.15);
}

.price-filter h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fe0000;
}

/* ===============================
   أزرار التحكم
=============================== */
.price-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

/* زر + و - */
.price-controls button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.price-controls button:hover {
  background: #eaeaea;
}

/* خانة السعر */
#priceValue {
  width: 60px;
  height: 26px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  outline: none;
}

#priceValue:focus {
  border-color: #007bff;
}

/* ===============================
   زر التحديث
=============================== */
#priceApply {
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #007bff;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

#priceApply:hover {
  background: #005ec4;
}