body{
background-color: #fffbfb;
 
}

.containner {
  width: 100%;
  height: 150px;
   /* لو عايز عرض محدد */
}

.header-content{
    height: 100%;
  
  background-color: rgb(129, 133, 131);
  position: sticky;
}

.containner img{
    margin-left: 50px;
    width: 250px;
    height: 100px;
    border-radius: 10px;
    margin-top: 37px;
}



/* ===== روابط الهيدر ===== */
#links {
  list-style: none;          /* إزالة النقط */
  display: flex;             /* جعل العناصر في صف واحد */
  gap: 25px;                 /* مسافة بين اللينكات */
  margin: -80;
  padding: 10;
  margin-left: 1200px;
  
}
#li1{
    width: 90px;
    height: 50px;
    border:1px solid #1212f1;
border-radius: 10px;
    position: relative;
}

 #li1 a {
    position: absolute;
  text-decoration: none;     /* إزالة الخط السفلي */
  color: #1212f1;  
       /* لون النص */
  font-weight: 600;          /* سمك الخط */
  font-size: 18px;
  transition: color 0.3s ease, transform 0.2s ease; /* تأثير عند المرور */
padding-top: 10%;
padding-left: 26%;
}

#links #li1:hover {
  color: #f1f5f8;            /* لون عند المرور */
  /*transform: scale(1.05);    /* تكبير بسيط */

  background-color: #1212f1;
}



#li1:hover   a{
     color: #f1f5f8;      
}






#li2{
    width: 110px;
    height: 50px;
    border:1px solid #079835;
border-radius: 10px;
    position: relative;
}

 #li2 a {
    position: absolute;
  text-decoration: none;     /* إزالة الخط السفلي */
  color: #079835;  
       /* لون النص */
  font-weight: 600;          /* سمك الخط */
  font-size: 18px;
  transition: color 0.3s ease, transform 0.2s ease; /* تأثير عند المرور */
padding-top: 10%;
padding-left: 26%;
}

#links #li2:hover {
  color: #079835;            /* لون عند المرور */
  /*transform: scale(1.05);    /* تكبير بسيط */

  background-color: #079835;
}



#li2:hover   a{
     color: #f1f5f8;      
}


#user_info{

 display: none;  
}







.search-parent{
width: 90%;
margin: auto;
margin-top: 40px;
   /* background-color: aquamarine;*/
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.search-contant  {
    border-radius: 5px;
    /*margin-top: 2
    0px;*/
text-align: center;
width: 250px;
height: 45px;/*background-color: azure;*/
border: 1px solid darkgray;
position: relative;
}
.search-contant h6{
   color: darkgray;
text-align: center;
margin-top: 5%;
}


.search-parent input{
border-radius: 7px;
width: 480px;
height: 45px;

}


.search-parent button{
   width: 180px;
height: 45px;
border-radius: 5px;
background-color: rgb(67, 65, 65);
color: aliceblue;
 
}

.search-parent input:hover{

box-shadow: 2px 2px 2px rgb(7, 7, 237);

}



.search-contant:hover{

box-shadow: 2px 2px 2px rgb(7, 7, 237);

}

.productss {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 كروت في كل صف */
  gap: 40px; /* المسافة بين الكروت */
  justify-items: center;
  padding: 20px;
  z-index: 10;
  width: 300px;
  margin-left: 12%;
  
}

.cart-content {
  border: 1px solid darkgrey;
  width: 330px;
  height: 550px;
  border-radius: 10px;
  transition: 0.6s;
  position: relative;
  overflow: hidden;
  background-color: white;
  z-index: 10;
}

.cart-image {
  width: 100%;
  height: 60%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  z-index: 10;
}

.cart-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  transition: transform 0.5s ease;
  z-index: 10;
}

.cart-content:hover {
  transform: translateY(-10px);
  border: 1px solid rgb(18, 144, 234);
}

.cart-image img:hover {
  transform: scale(1.1);
}

.cart-text {
  padding: 20px;
  text-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.cart-text button {
  width: 120px;
  height: 45px;
  border-radius: 10px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.cart-text button:hover {
  background-color: darkblue;
}

.cart-hard i {
  cursor: pointer;
}




/* ===== تنسيق الفورم ===== */
form {
  background: #fff;
  padding: 30px 40px; /* قللت الارتفاع */
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  width: 480px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* قللت المسافات */
  margin: 8% 35%;
}

/* ===== تنسيق سطر الاسم ===== */
.name-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.input-group {
  display: flex;
  flex-direction: column;
  width: 50%;
}

/* ===== الليبل ===== */
form label {
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 3px;
  font-size: 14px;
}

/* ===== الحقول ===== */
form input[type="text"],
form input[type="email"],
form input[type="password"] {
  padding: 8px 10px; /* قللت الطول */
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  transition: 0.3s;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus {
  border-color: #6c5ce7;
  box-shadow: 0 0 5px rgba(108, 92, 231, 0.5);
  outline: none;
}

/* ===== زر التسجيل ===== */
#login {
  background-color: #6c5ce7;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
  width: 150px;
}

#login:hover {
  background-color: #4834d4;
  transform: translateY(-2px);
}

/* ===== للجوال ===== */
@media (max-width: 480px) {
  .name-row {
    flex-direction: column;
  }
}

/**************************//*/*//*/////*/
/* ===== تنسيق الفورم ===== */
form {
  background: #fff;
  padding: 30px 40px; /* قللت الارتفاع */
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  width: 580px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* قللت المسافات */
}

/* ===== تنسيق سطر الاسم ===== */
.name-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.input-group {
  display: flex;
  flex-direction: column;
  width: 50%;
}

/* ===== الليبل ===== */
form label {
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 3px;
  font-size: 14px;
}

/* ===== الحقول ===== */
form input[type="text"],
form input[type="email"],
form input[type="password"] {
  padding: 8px 10px; /* قللت الطول */
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  transition: 0.3s;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus {
  border-color: #6c5ce7;
  box-shadow: 0 0 5px rgba(108, 92, 231, 0.5);
  outline: none;
}

/* ===== زر التسجيل ===== */
#register {
  background-color: #6c5ce7;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
  width: 150px;

}

#register:hover {
  background-color: #4834d4;
  transform: translateY(-2px);
}

/* ===== للجوال ===== */
@media (max-width: 480px) {
  .name-row {
    flex-direction: column;
  }}
/*********************************************************//*/**//* تنسيق عام للقائمة */



#user_info {
  display: flex;
  align-items: center;
  gap: 50px; /*المسافة بين الاسم والسلة والزر */
  margin-left: auto; /*لدفعهم لليمين */
  position: absolute;
  right: 50;
  bottom: 30;
}




#user_info li {
  list-style: none;
}

 
#user_info i {
  font-size: 25px;
  cursor: pointer;
  color: black; /* أو حسب التصميم */
}

.badge {
  
  position: absolute;
  top: -5px;
  right: -20px; 
  width: 20px;
  height: 20px;
  
 /*background-color: red;*/
  color: rgb(0, 0, 0);
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  display: block;
}

#logout {
  padding: 8px 15px;
  border-radius: 5px;
  border: 1px solid red;
  color: red;
  text-decoration: none;
  /*font-weight: 500;*/
  transition: 0.3s;
  width: 300px !important;
}

#logout:hover {
  color: white;
  background-color: red;
}
.shopping_cart {
  background: none; /* إزالة الخلفية */
  border: none;     /* إزالة الحدود */
  padding: 0;       /* إزالة البادينج */
  cursor: pointer;
  position: relative; /* لو هتضع البادج فوق الأيقونة */
  z-index: 500 !important;
}

.shopping_cart i {
  font-size: 24px;  /* حجم الأيقونة */
  color: black;     /* لون الأيقونة */
}


/****************************************/




.product {
  text-align: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

.product-title {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 8px 0;
}

.quantity {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
/*  margin: 8px 0 12px 0; /* هنا اللي بيخليها تحت الاسم مباشرة */
 margin-right: 100px;
}

.quantity button {
  padding: 4px 10px;
  border: none;
  background: #0177fe;
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  font-size: 18px;

}

.quantity .count {
  font-size: 18px;
  font-weight: bold;
}




/****************************************************************/

.carts_products {
    position: absolute;
    top: 100%; 
    right: -50px;
    width: 250px;
    max-height: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    display: none;
    z-index: 1000;
    flex-direction: column;
}

.carts_products.show {
    display: flex;
}

/* الحاوية الرئيسية للمنتجات */
.cart-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* تخصيص شريط التمرير */
.cart-list::-webkit-scrollbar {
    width: 6px;
}

.cart-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.cart-list::-webkit-scrollbar-thumb {
    background: #017ffd;
    border-radius: 10px;
}

/* تثبيت أول منتجين */
.cart-item:first-child,
.cart-item:nth-child(2) {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-left: 3px solid #007bff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* إذا كان هناك منتجين فقط لا نطبق التثبيت */
.cart-list:has(.cart-item:only-child) .cart-item:first-child,
.cart-list:has(.cart-item:nth-child(2):last-child) .cart-item:first-child,
.cart-list:has(.cart-item:nth-child(2):last-child) .cart-item:nth-child(2) {
    position: static;
    border-left: none;
    box-shadow: none;
}

/* عنصر المنتج الأساسي */
.cart-item {
    background: #fff;
    padding: 12px 15px;
    margin: 5px 0;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.cart-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 5px rgba(0,123,255,0.2);
}

/* زر عرض كل المنتجات */
.carts_products a {
    display: block;
    color: white;
    margin: 15px 0 5px;
    padding: 10px;
    background-color: #007bff;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s;
}

.carts_products a:hover {
    background-color: #0056b3;
}

/* السلة الفارغة */
.empty-cart {
    text-align: center;
    color: #6c757d;
    padding: 20px;
    font-style: italic;
}


/* عنوان المنتج */
.cart-item .title {
  flex: 1;
  font-weight: bold;
  position: absolute;
}
 nav i{
  gap: 5px !important;
 margin-right: -5 !important;
  color: #0e0e0e !important;
  font-size: 5px;
  /*background-color: #000;*/

}



/* السعر */
.cart-item .price {
  font-weight: bold;
  width: 80px;
  text-align: right;
}




.carts_products a {
  display: block;
  color: #e5ebee;
  margin: 20px 0;
  padding: 10px; /* عشان يظهر ارتفاع للزر */
  background-color: chartreuse;
  text-align: center;
  text-decoration: none;
  border-radius: 6px; /* شكل أحلى */
}


.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 كارت */
  gap: 20px;
  padding: 20px;
}




/*********************************************************************/
.cart-box {
  width: 650px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 25px;
  margin: 20px auto;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  z-index: 50;
}

.cart-img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;

}

.cart-info {
  flex: 1;
}

.cart-info h3 {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
}

.cat {
  margin: 5px 0;
  color: #777;
  font-size: 14px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.quantity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.q-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
}

.q-count {
  font-size: 18px;
  font-weight: bold;
}

.remove {
  background: #e74c3c;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}

.remove:hover {
  background: #c0392b;
}

.total-price {
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}
/*********************************************************/
.Favorite-title{
  text-align: center; /* يخلي كل اللي جوه في النص */
  margin: 20px 0;
}

.Favorite-line {
  background-color: #e13724;
  width: 150px;
  height: 2px;
  margin: 5px auto; /* علشان تكون في النص */
  transition: all 0.5s;
}

.Favorite-line:hover{
  width: 200px;
}

.fav-parent {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}

.fav-box {
  border: 1px solid #ddd;
  /*padding: 10px;*/
  width: 300px;
  height: 400px;
  text-align: center;
  border-radius: 8px;
  transition: 0.3s;
}

.fav-box:hover {
   border: 1px solid red;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transform: translateY(-5px);
}

.fav-img {
  width: 100%;
  height: 60%;
  object-fit: cover;
  border-radius: 8px;
}

.fav-info h3 {
  font-size: 16px;
  margin: 10px 0 5px 0;
}

.fav-info p {
  margin: 3px 0;
  font-size: 14px;
  color: #555;
}

.remove-fav {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.remove-fav:hover {
  background-color: #ff7875;
}

/*////////////////////////////////////*/
.dropdown-list {
  display: none;
  position: absolute;
  background: white;
  width: 210px;
  padding: 10px;
  margin-top: 5px;
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 6px;
  z-index: 99999;
}


.search-contant {
  position: relative;
  width:210px;
  cursor: pointer;
}

.dropdown-list li {
  padding: 5px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.dropdown-list li:hover {
  background: #f0f0f0;
}