.logo img{
    display: flex;
    justify-content:space-between;
    align-items:self-end;
    padding: -30px 0px;
    width: 70px;
    height: 60px;
    margin: auto;
    max-width: 90px;
    position:relative;
    top: 0,001px;
    margin-right:10px;
}
.recherche-re{
    width: 300px;
    height: 40px;
    margin-right: 40px;
    display:flex;
    justify-content: space-between;
    background-color:#f3f3f3;
    border-radius: 40px;
    padding: 7px 20px 0px ;
    position: absolute;
    top: 10px;
    margin-left: 450px;
    right: 570px;

}
.recherche-re button{
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
   background-color:#fccde2 ;
    border: none;
    font-size: 0.9rem;
    margin-left: 10px;
}
.recherche-re input{
    width: 90%;
    height: 95%;
    border: none;
    background-color:#f3f3f3; 
}
.ecb{
    position: absolute;
    left: 0;
    width: 100%;
}
h4{
    font-size:xx-large;
    font-size: 0,5rem;
    color: #333;
    margin: 0 10px;
    position: absolute;
    top: -58px;
    left: 10px; 
}
/* الحاوية العامة للأزرار */
.but {
    position: absolute;
    top: 17px;
    right: 420px;
    display: flex;
    gap: 20px;
    display: flex;
    gap: 10px; /* أو حتى 8px لتكون أقرب */   
}

/* ستايل الروابط (الأيقونات) */
.but a {
    width: 30px;
    height: 30px;
    background-color: #fccde2;
    color: #000000; /* اللون الأسود كما السابق */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    position: relative; /* مهم لربط التسمية */
    transition: background-color 0.3s ease;
}

.but a:hover {
    background-color: #f9bcd4; /* لمسة ناعمة عند المرور */
}

/* ستايل اسم الأيقونة */
.icon-label {
    display: none;
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #000;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    white-space: nowrap;
    z-index: 10;
}

.icon-with-label:hover .icon-label {
    display: block;
}

.but a i {
    font-size: 14px; /* أو 13px حسب الحجم اللي تحبينه */
}
.list {
    display: flex;
    background-color: #fccde2;
    padding: 10px 0px;
    height: 40px;
    width: 1260px;
    padding-right: -10px;
}
.list  a{
    color: #000000;
    text-decoration: none;
    margin-left: 35px;
    position: relative;
    top: 1px;
    font-size: large;
 } l
:root{
    --main-color: #f3f3f3;
}
.list a:hover{
    color:var(--main-color);
}
.numbertext img{
    width: 100%;
}
.myslides img{
    position:static;
    top: 0;
    width: 1250px;
    height: 600px;
    transition: transform 0.3s ease-in-out; /*غيير الصورة كل  ثانيتين*/
}
*{
   box-sizing: border-box;
}
.myslides{
    display: none;
}
img{
    vertical-align: middle;
}
.prev, .next{
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 40px;
    padding: 16px;
    margin-top: 150px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.next{
    right: 0;
    border-radius: 3px 0 0 3px;
}
/* user */
.h1{
   position: relative;
   transform: translateY(50px);
   display: flex; 
   justify-content: center;
   align-items: center;
}
.info{
    position: relative;
    transform:translateY(50px);
    border-radius: 30px;
}
.info a{
    color:#f281f2;
}
.info button{
    border: none;
    background-color: #fab8d6;
    overflow: hidden;
    border-radius: 5px;
    color: #ffffff;
    width: 380px;
    height: 45px;
    font-size: 16px;
    margin: 15px 0;
}
.info input{
   border-radius: 5px; 
   width: 380px;
   height: 45px;
   border: 1px solid #ccc;
   padding-right: 2px;
   margin: 11px 0;
   padding: 0 0 0 10px;
   outline: none;
   color: #333;
}
.compt form{
    display: flex ;
    align-items: center;
    justify-content: center;
}
.info button:hover{ /*button تغيير اللون بمجرد وضع الفارة على */
    background-color: #eb4a92;
}
.info button:active{ /*button تغير اللون بمجرد الضغط على  */
    background-color: #750e3c;
}
.créer{
    display: flex;
    align-items: center;
    justify-content: center;
}
:root{
    --main-color: #f28;
    --black:#333;
    --pink: #fccde2;
}
.info a:hover{
    color:var(--main-color);   
}
.contact-container {               /*Nous contecter*/
    display: flex;
    justify-content: space-between;
    padding: 20px;
    max-width: 1200px;
    margin: auto;
}
.contact-form {
    width: 60%;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    outline: none;
    border-radius: 5px;
}
.contact-form button {
    background: #fab8d6;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}
.contact-form button:hover{
    background-color: #eb4a92;
}
.contact-form button:active{
    background-color: #750e3c;
}
.besoin-aide {                     /*besoin aide*/
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    width: 250px;
    text-align: left;
    position: relative;
    left: -150px; /* تحريك العنصر إلى اليسار */
}

.besoin-aide h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.besoin-aide ul {
    list-style: none;
    padding: 0;
}

.besoin-aide ul li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.besoin-aide ul li i {
    font-size: 18px;
    color: #ff4081;
    margin-right: 10px;
}

.besoin-aide ul li a {
    color: #333;
    text-decoration: none;
}

.besoin-aide .social-icons {
    display: flex;
    gap: 10px;
}

.besoin-aide .social-icons a {
    font-size: 20px;
    color: #333;
    transition: 0.3s;
}

.besoin-aide .social-icons a:hover {
    color: #ff4081;
}
.dropdownn {
    position: relative;
}
/* تصغير حجم القائمة */
.dropdown-menuu {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px; /* تقليل المسافة بين الأعمدة */
    position: absolute;
    top: 100%;
    left: -250px; /* تحريك القائمة إلى اليسار قليلاً */
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-width: 400px; /* تصغير العرض الكلي */
    padding: 5px; /* تقليل الحواف الداخلية */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
/* عرض القائمة عند تمرير الماوس */
.dropdownn:hover .dropdown-menuu {
    visibility: visible;
    opacity: 1;
}
/* تصغير عرض الأعمدة */
.dropdown-menuu .column {
    padding: 5px; /* تقليل التباعد الداخلي */
    min-width: 100px; /* تصغير حجم الأعمدة */
}
/* تصغير حجم العناوين */
.dropdown-menuu h3 {
    font-size: 14px; /* تصغير حجم الخط */
    font-weight: bold;
    margin-bottom: 3px; /* تقليل المسافة بين العنوان والقائمة */
    white-space: nowrap;
}
/* تصغير القوائم */
.dropdown-menuu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list, .dropdown-menuu ul, .dropdownn {        /*pour les points de la liste */
    list-style: none !important;
   
} 
/* تصغير حجم العناصر */
.dropdown-menuu ul li {
    padding: 3px 0; /* تقليل المسافة بين العناصر */
}

/* تصغير الروابط */
.dropdown-menuu ul li a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 3px;
    font-size: 12px; /* تصغير الخط */
    transition: background 0.3s;
}
/* تأثير عند تمرير الماوس */
.dropdown-menuu ul li a:hover {
    background-color: #f8f8f8;
}




.container {
    display:grid;
    align-items: start;
    grid-template-columns: repeat(3,1fr);
    gap: 40px;
    max-width: 2000px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    align-items:start ;
}
.infoo{
    min-height: 250PX;
}
.adresse{
    width :48%
}



.social-icons2 a i {
    font-size: 30px; /* حجم الأيقونات */
    margin: 10px; /* تباعد بين الأيقونات */
    color: #2607afee;
}




.social-icons2 a i:hover {
    color: #e90e7cee; /* لون عند التمرير */
    transform: scale(1.2); /* تكبير عند التمرير */
    transition: 0.3s;
}



.infoo, .contact {
    padding: 20px;
}

.infoo h2, h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 25px;
    color: #e90e7cee;
    ;
}



p {
    font-size: 20px;
}

.livraison {
    font-weight: bold;
    color: #ff4081;
}

.certification {
    font-weight: bold;
    margin-top: 10px;
}

ul {
    list-style: none;
    padding: 0;
}

ul li {
    margin: 5px 0;
}

.footer ul li a {
    text-decoration: none;
    color: #131011;
}
/*NOUVEAU*/


.NOUVEAU .swiper-container .swiper-slide .box{
    flex: 1 1 10rem;
    box-shadow: 0 .1rem 1.5rem rgba(56, 199, 82, 0.1) ;
    border-radius:  .5rem;
    border: .1rem solid  rgba(196, 23, 23, 0.1) ;
    position: relative;
    }


    .NOUVEAU  .swiper-container .swiper-slide .box .price span{
        font-size: 1rem;
        color:#c8c1c1;
        font-weight:lighter;
        text-decoration: line-through;
        } 

        .NOUVEAU  .swiper-container .swiper-slide .box .price span{
            font-size: 1rem;
            color:#c8c1c1;
            font-weight:lighter;
            text-decoration: line-through;
            } 
    
    
    
    /*   */.NOUVEAU .swiper-container .swiper-slide .box  .dicont{
    position: absolute;
    top:0.5rem ;right:0.5rem;
    padding: .7rem 1rem;
    font-size: 1rem;
    color:rgb(254, 97, 244);
    background: rgba(241, 36, 156, 0.05);
    z-index: 1;
    border-radius: .5rem;
    left: auto;
    }
    
    
    
    
    /*  */  .NOUVEAU .swiper-container .swiper-slide .box .images{
    position: relative;
    text-align: center;
    padding-top: 1rem;
    overflow: hidden;
    
    }
    
    .NOUVEAU .swiper-container .swiper-slide .box .images img{
        height: 14rem;
        }
    
    /* التأكد من أن الـ swiper-container يحتوي على إزاحة وتثبيت للأسهم */
    .swiper-container {
       
        position: relative; /* يجب أن تكون الـ container تحتوي على position: relative حتى نتمكن من تحديد مكان العناصر بداخلها */
    }
    
       .swiper-button-next,
       .swiper-button-prev {
            background-color: rgba(225, 60, 198, 0.5);
            border-radius: 50%;
            padding: 1px;
            color: white;
            
        }
       
        
        .swiper-button-next:hover,
        .swiper-button-prev:hover {
            background-color: rgba(229, 28, 206, 0.8);
        }
        
        .swiper-pagination-bullet {
            background-color: #e74c3c;
        }
        
        .swiper-pagination-bullet-active {
            background-color: #333;
        }
        
        .heading{                           /*nouveau*/
            text-align: center;
            font-size: 2rem;
            color:#333;
            padding: 0.5rem;
            margin: 1rem 0;
            background: #fccde2;
            
            
            
            }
            .heading span{
                color:var(--black);
                }
            
                

                .swiper-container{
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(260px, auto));
                    gap:1rem
                }
        
               .swiper-slide .box{
                position: relative;
                transition: all .40s;
               }
              
               .swiper-slide .box img:hover{
                transform: scale(0.9);
               }
               
               .product-text h2{
                position: absolute;
                top: 13px;
                left:13px ;
                color: #fff;
                font-size: 16px;
                font-weight:500 ;
                text-transform: uppercase;
                background-color: #27b737;
                padding: 3px 10px;
                border-radius: 2px;
            
               }
               .icons i {
                display: inline-block; /* يجعل الرموز في نفس السطر مع إمكانية التحكم في الحجم */
                margin-right: 10px; /* مسافة بين الرموز */
            }
               .icons{
                
                right: 10px;
                font-size: 20px;
               }
               .icons:hover{
                color: #eb4a92;
               }
               

               .car i {
                display: inline-block; /* يجعل الرموز في نفس السطر مع إمكانية التحكم في الحجم */
                margin-right: 10px; /* مسافة بين الرموز */
            }
               .car{
                
                right: 10px;
                font-size: 20px;
               }
               .car:hover{
                color: #eb4a92;
               }


               .ratting i{
             
                color: #FF8C00;
                font-size: 18px;
               }
              
               .PROMOTION .swiper-container .swiper-slide .box{
                flex: 1 1 10rem;
                box-shadow: 0 .1rem 1.5rem rgba(56, 199, 82, 0.1) ;
                border-radius:  .5rem;
                border: .1rem solid  rgba(196, 23, 23, 0.1) ;
                position: relative;
                }
    
    
                .PROMOTION  .swiper-container .swiper-slide .box .price span{
                    font-size: 1rem;
                    color:#c8c1c1;
                    font-weight:lighter;
                    text-decoration: line-through;
                    } 
    
    
    
          /*   */.PROMOTION .swiper-container .swiper-slide .box  .dicont{
            position: absolute;
            top:0.5rem ;right:0.5rem;
            padding: .7rem 1rem;
            font-size: 1rem;
            color:rgb(254, 97, 244);
            background: rgba(241, 36, 156, 0.05);
            z-index: 1;
            border-radius: .5rem;
            left: auto;
        }
    
     
        
    /*  */  .PROMOTION .swiper-container .swiper-slide .box .images{
       
        position: relative;
        text-align: center;
        padding-top: 1rem;
        overflow: hidden;
        
       
    }
   
       .ratting,.icons ,.car{
            display: inline-block; /* جعل العناصر في نفس السطر */
            
        }
        
        .icons , .ratting  {
            margin: right 1px;  /* مسافة بين الأيقونات (اختياري) */
        }
        .price h5{
            font-size: 30px;
        }
        .price p{
            font-size: 25px;
        }
        .PROMOTION .swiper-container .swiper-slide .box .images img{
            height: 14rem;
            }
       
            .swiper-container {
                
                width: 100%;
               
            }
      
        
            .icons {
                margin-left: auto; /* جعل القلب على اليمين */
                
            }
    
        
       
    
           
            .btn{
                display: inline-block;
                margin-top: 1rem;
                border-radius: 3rem;
                background: #fccde2;
                color: #060505;
                padding: .5rem 1rem;
            cursor: pointer;
            font-size: 1.5rem;
            display: none;
            bottom: 0;
           
                width: 100%;}
            
            .btn:hover{
                background: rgb(220, 72, 141);
              
            }
            .price:hover .btn {
                display: inline-block; }



               


















/* recherche ici*/
#search-results {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    width: 250px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* تأكد من أن القائمة فوق المحتوى */
    top: 40px;
    border-radius: 5px;
    display: none;
}

.search-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s;
}

.search-item:hover {
    background: #f1f1f1;
}

.search-link {
    text-decoration: none;
    color: black;
    display: flex;
    width: 100%;
}

.search-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px;
}

.search-info {
    display: flex;
    flex-direction: column;
}

.search-name {
    font-weight: bold;
}

.search-price {
    color: green;
}
.results-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* توسيط المنتجات */
    gap: 20px;
}

.results-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* توسيط المنتجات */
    gap: 20px;
}

.product {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px;
    width: 200px; /* زيادة العرض قليلاً */
    text-align: center;
    background: #fff;
    border-radius: 8px; /* زوايا ناعمة */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    max-width: 200px;
    flex:  1 1 auto;
}

.product:hover {
    transform: scale(1.05); /* تأثير تكبير عند التمرير */
}

.product img {
    width: 100%;
    height: 150px; /* تحديد ارتفاع موحد */
    object-fit: cover; /* منع تشوه الصور */
    border-radius: 5px;
    margin-bottom: 10px;
}

.product h3 {
    font-size: 16px;
    color: #333;
    margin: 5px 0;
}

.product p {
    font-size: 14px;
    color: #666;
    margin: 3px 0;
}
.products-container {
    display: flex;
    flex-wrap: wrap; /* يسمح بالانتقال إلى سطر جديد عند الحاجة */
    gap: 20px; /* مسافة بين المنتجات */
    justify-content: center; /* يجعل المنتجات متوسطة في الصفحة */
    align-items: stretch;
}

/*recherch dakiy*/
/* تصميم البحث الذكي */
.smart-search-container {
    position: absolute !important;
    display:block !important;
    align-items: center;
    justify-items: center; 
    top: 2px;
    right: 100px;
    z-index: 1000;
    overflow: visible !important;
    width: 300px;
    height: 60px;
    
}

#search-box {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 8px;
    width: 250px;
    /*right: 480px;*/
    height: 40px;
    border: 2px solid #000;
    border-radius: 15px;
    outline: none;
   border: none;
   background-color:#f3f3f3;
}

/* زر البحث */
 .smart-search-container button {
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fccde2;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 8px;
    font-size: 0.9rem;
    align-items: center;
    justify-content: center;
    display: flex;
}
.wishlist-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
  }
  .wishlist-container i{
      font-size: 200px;
      opacity: 0.1;
      position: relative;
      top: -70px;
      margin-bottom: -80px;
  }
  .wishlist-title{
      font-size: 40px;
      font-weight: bold;
      color: #222;
      margin-bottom: 10px;
  }
  .wishlist-text{
      font-size: 16px;
      color: #454444;
      max-width: 500px;
      margin-bottom: 0.01px;
  }
  .wishlist-btn{
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      background-color: #fccde2;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
  }
  .wishlist-btn:hover{
      background-color: #eb4a92;
  }
  .wishlist-btn:active{
      background-color: #750e3c;
  }




/* القائمة المنسدلة */
.dropdown {
    position: absolute !important;
    top: 100%;
    width: 100%;
    background: white;
    border: 1px solid red !important;
    border-top: none;
    background-color: white !important;
    display: none;
    z-index: 9999 !important;
}

.dropdown div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.dropdown div:hover {
    background: #f0f0f0;
}



#dropdown {
    background-color: white !important;
    border: 2px solid black !important;
    padding: 10px;
}


/*resultat*/
.products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

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

.product h3 {
    color: #333;
}

.product p {
    color: #666;
}
.quiz h1{
    color: #ff4081;
}
.quiz input{
    background-color: #ff4081;
}



input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    transform: scale(0.8) !important;
    margin-right: 5px !important;
}
input[type="checkbox"]{
    transform: translateY(3px);
    cursor: pointer;
}

/*ta3 ajout produit*/
/* تنسيق النموذج */
.ajout {
    width: 500px; /* تقليل العرض */
    margin: 50px auto; /* توسيط العنصر */
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    
}
.ajout h2 {
    text-align: center;
    color: #d63384;
    font-size: 22px; /* تصغير حجم العنوان */
}

.ajout form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ajout input,
.ajout textarea,
.ajout button {
    width: 370px; /* تقليل عرض الحقول */
    padding: 8px; /* تقليل التباعد الداخلي */
    margin-bottom: 10px; /* تقليل المسافة بين الحقول */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px; /* تصغير حجم النصوص */
}
.ligne{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    width: 100%;
    max-width: 500px;
}
.label-align-left{
   text-align: left !important;
   width: 100%;
   margin-left: 10px;
   font-weight: bold;
}
.label-alignn-left{
    text-align: left !important;
    width: 100%;
    margin-left: 10px;
    font-weight: bold;
 }
.ajout textarea {
    resize: none;
    height: 80px; /* تقليل ارتفاع حقل الوصف */
}

.ajout button {
    background: #d63384;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.ajout button:hover {
    background: #b0246d;
}
#produitForm select {
    width: 80%;
    height: 40px;
    font-size: 16px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
}

.products-container .product img {
    width: 120px !important;  /* تحديد العرض */
    height: auto !important;  /* الحفاظ على التناسب */
    max-height: 150px !important; /* تحديد أقصى ارتفاع */
    display: block;  /* تحسين التناسق */
    margin: 0 auto;  /* توسيط الصورة */
    object-fit: contain; /* ضمان عدم تشويه الصورة */
}
.wishlist-btn {
    text-decoration: none; /* إزالة الخط */
    display: inline-block; /* المحافظة على شكل الزر */
    /*background-color: #ff69b4; /* اللون الوردي */
    color: white; /* لون النص */
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}
/*ta3 hadil/*
/* 🔹 القائمة الجانبية */
.sidebar {
    width: 250px;
    background-color: #fccde2;
    padding: 20px;
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
    overflow-y: auto;
}
.sidebar h2 {
    color: #333;
    text-align: center;
}
.menu-item {
    font-size: 18px; /* حجم أكبر للعناوين الأساسية */
    font-weight: bold; /* جعلها عريضة */
    color: #d63384; /* لون مختلف */
    padding: 12px;
    border-bottom: 2px solid #d63384; /* خط سفلي لمزيد من التمييز */
}
.menu-item:hover {
    background-color: #f8c8dc; /* لون مختلف عند التمرير */
}
.submenu li {
    font-size: 16px; /* حجم أصغر من العنوان */
    font-weight: normal; /* بدون عريضة */

    color: black; /* اللون الأساسي */
    padding: 8px;
}
.sidebar ul {
    list-style: none;
    padding: 0;
}
.sidebar ul li {
    padding: 10px;
    cursor: pointer;
    color: black;
}
.sidebar ul li:hover {
    background-color: #f3f3f3;
}
.submenu {
    display: none;
    padding-left: 15px;
}
.submenu li {
    font-size: 14px;
}
.products-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* محاذاة المنتجات في المنتصف */
    gap: 15px;
    padding: 20px;
}
/* تصميم موحد لكل المنتجات */
.product {
    background-color: #fff;
    padding: 15px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 230px; /* تثبيت عرض المستطيلات */
    height: 400px; /* تثبيت ارتفاع المستطيلات */ 
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;   
}
/* تثبيت حجم الصورة */
.product img {
    width: 200px; /* ضبط العرض */
    height: 180px; /* تثبيت الارتفاع */
    object-fit: cover; /* تأكد من أن الصورة لا تتشوه */
    border-radius: 5px;
}
/* تحسين العناوين */
.product h3 {
    font-size: 16px;
    font-weight: bold;
    color: #d63384;
    margin: 5px 0;
}
/* تحسين النصوص */
.product p {
    font-size: 14px;
    color: #333;
    margin: 5px 0;
}
/* تصميم زر "إضافة إلى السلة" */
.add-to-cart {
    background-color:  #fab8d6;
    color: white;
    padding: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
    font-size: 14px;
}
.add-to-cart:hover {
    background-color: #eb4a92;
}
.sidebar {
    width: 250px;
    background-color: #fccde2;
    padding: 20px;
    position: fixed;
    height: 100%;
    left: -270px; /* مخفية خارج الشاشة */
    top: 0;
    overflow-y: auto;
    transition: left 0.3s ease-in-out; /* تأثير الانزلاق */
}
/* 🔹 زر فتح القائمة */
.menu-toggle {
    display: none;
    position: fixed;
    top: 100px;
    left: 20px;
    background-color: #d63384;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
}
/* 🔹 عند تمرير الماوس على الزر */
.menu-toggle:hover {
    background-color: #b52e70;
}
/* 🔹 إظهار القائمة عند الفتح */
.sidebar.open {
    left: 0;
}
.menu-toggle {
    background-color: #d63384; /* لون الزر */
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    position: absolute;
    left: 10px; /* جعله في أقصى اليسار */
    top: 185px;
    transform: translateY(-50%); /* توسيطه داخل الشريط */
}
/* تغيير اللون عند التمرير */
.menu-toggle:hover {
    background-color: #b52e70;
}
/* 🔹 إخفاء القوائم الفرعية افتراضيًا */
.submenu {
    display: none;
    padding-left: 15px;
}
/* عند فتح القائمة */
.menu-item.active > .submenu {
    display: block;
    z-index: 10000px;
  
}
/* عند تمرير الماوس */
.menu-item:hover {
    background-color: #f8c8dc;
    cursor: pointer;
}
/* جميع المنتجات مرئية عند فتح الصفحة */
.category {
    display: block;
}
/* عند تحديد فئة، سيتم إظهارها فقط */
.hidden {
    display: none;
}
/* ✅ عرض المنتجات بشكل أفقي ومتناسق */
.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* توزيع المنتجات بشكل مرن */
    gap: 15px;
    padding: 20px;
}
/* ✅ تحسين شكل المنتجات */
.product {
    background-color: #fff;
    padding: 15px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.sidebar.active {
    left: 0;
}



    /*chatbot*/
    .chat-container {
      font-family: Arial;
      max-width: 900px;
      margin: auto;
      padding: 20px;
      background: #f9f9f9;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .chat-area {
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 10px;
      background: #fff;
      margin-bottom: 10px;
      min-height: 300px;
      max-height: 500px;
      overflow-y: auto;
      /*width: 100%;
      /*height: 90vh;*/
    }
    .msg-user, .msg-bot {
      margin: 10px 0;
      padding: 10px;
      border-radius: 10px;
    }
    .msg-user {
      text-align: right;
      color: blue;
      background-color: #e0f0ff;
    }
    .msg-bot {
      text-align: left;
      color: #f28;
      background-color: #eaffea;
    }
    


    #messageBox {
      width: 100%;
      padding: 10px;
      border: 1px solid #aaa;
      border-radius: 5px;
    }
    .chat-container button {
    padding: 10px 20px;
    margin-top: 10px;  
    border: none;
    background-color: #fab8d6;
    overflow: hidden;
    border-radius: 5px;
    color: #ffffff;
    }
    .chat-container button:hover{ /*button تغيير اللون بمجرد وضع الفارة على */
        background-color: #eb4a92;
    }
    .chat-container button:active{ /*button تغير اللون بمجرد الضغط على  */
        background-color: #750e3c;
    }
    /*ta333 chat*/
    .msg-bot.product {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
        background-color: #f9f9f9;
        border-radius: 12px;
        padding: 15px;
        margin: 10px auto;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        max-width: 90%; /* زاد العرض ليغطي أغلب الصفحة */
        width: 90%;
      }
      
      .msg-bot.product img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 10px;
        flex-shrink: 0;
      }
      
      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-wrap: break-word;
      }
      
      .product-name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }
      
      .product-description {
        font-size: 15px;
        color: #444;
        line-height: 1.6;
        white-space: normal;
        word-wrap: break-word;
      }
      /* تنسيق خاص فقط للفورم الخاص بالتسجيل */
.inscription-expert {
    background: #fff;
    padding: 30px;
    margin: 20px auto;
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.inscription-expert label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.inscription-expert input[type="text"],
.inscription-expert input[type="email"],
.inscription-expert input[type="password"],
.inscription-expert input[type="number"],
.inscription-expert input[type="file"],
.inscription-expert textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 18px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f0f4ff; /* خلفية أزرق فاتح */
    font-size: 14px;
    outline: none;
}

.inscription-expert textarea {
    resize: none;
}

.inscription-expert button {
    width: 100%;
    padding: 14px;
    background: #f8a7c5; /* وردي */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.inscription-expert button:hover {
    background: #f58cb3;
}
/* ta3 rhma */
.product-container {
      display: flex;
     
    }
    
    .product1-image img {
      margin-top: 20%;
      width: 250px;
      height: 300px;
      border-radius: 8px;
      margin-right: 15px;
    }
    
    .product-info {
      max-width: 350px;
    }
    
    .price {
      font-size: 24px;
      color: deeppink;
      font-weight: bold;
    }
    
    .color-options {
      margin: 20px 0;
    }
    
    .colors {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    
    .color {
      width: 25px;
      height: 25px;
      border-radius: 4px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    
    .quantity {
      margin: 20px 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .quantity button {
      padding: 5px 10px;
      font-size: 16px;
    }
    
    .quantity input {
      width: 40px;
      text-align: center;
      font-size: 16px;
    }
    
    .buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
   
  
    .favorite-btn {
        font-size: 24px;
        color: gray;
        background: none;
        border: none;
        cursor: pointer;
      }
      .favorite-btn.active {
        color: red;
      }







.modal-custom {
    display: none; /* إخفاء النافذة بشكل افتراضي */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1050;
  }
    .modal-content-custom {
      background-color: #fff;
      padding: 20px;
      width: 600px;
      height: 550px;
      max-width: 55%;
      border-radius: 10px;
      position: relative;
      text-align: left;
      box-shadow: 0 5px 15px rgba(8, 8, 8, 0.3);
    
      overflow-y: auto; /* مهم حتى لا يخرج المحتوى */
    
    }
    
   /* زر الإغلاق */
  .close-btn {
      background-color: transparent; /* الخلفية شفافة */
  border: none; /* بدون إطار */
 
 
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 22px;
      cursor: pointer;
      color: #a82424;
    }
  
  
  
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .d-none {
      display: none !important;
    }
    
    .d-flex {
      display: flex !important;
    }
    
  
  
    
    
  
    
    
    .product-container {
      display: flex;
     
    }
    
    .product1-image img {
      margin-top: 20%;
      width: 280px;
      height:300px ;
      border-radius: 8px;
      margin-right: 15px;
    }
    
    .product-info {
      max-width: 350px;
    }
    
    .price {
      font-size: 24px;
      color: deeppink;
      font-weight: bold;
    }
    
    .color-options {
      margin: 20px 0;
    }
    
    .colors {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    
    .color {
      width: 25px;
      height: 25px;
      border-radius: 4px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    
    .quantity {
      margin: 20px 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .quantity button {
      padding: 5px 10px;
      font-size: 16px;
    }
    
    .quantity input {
      width: 40px;
      text-align: center;
      font-size: 16px;
    }
    
    .buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    .quantity-container {
            margin-bottom: 15px;
        }
        
        .quantity-box input {
            width: 60px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }
        
        .color-options {
            margin-bottom: 20px;
        }
        
        .colors {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .color {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
        }
       
     
        
        
      
        
      
        
      
        
      
       












        
  
  /* تصميم زر "إضافة إلى السلة" */
  .add-to-cart {
    background-color:  #fab8d6;
    color: white;
    padding: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
    font-size: 14px;
  }
  
  .add-to-cart:hover {
    background-color: #eb4a92;}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
        
           
            
  /* تصميم موحد لكل المنتجات */
  .product {
    background-color: #fff;
    padding: 15px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 230px; /* تثبيت عرض المستطيلات */
    height: 400px; /* تثبيت ارتفاع المستطيلات */ 
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; 
  }
  
  /* تثبيت حجم الصورة */
  .product img {
    width: 200px; /* ضبط العرض */
    height: 180px; /* تثبيت الارتفاع */
    object-fit: cover; /* تأكد من أن الصورة لا تتشوه */
    border-radius: 5px;
  }
  
  /* تحسين العناوين */
  .product h3 {
    font-size: 16px;
    font-weight: bold;
    color: #d63384;
    margin: 5px 0;
  }
  
  /* تحسين النصوص */
  .product p {
    font-size: 14px;
    color: #333;
    margin: 5px 0;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
    .category{
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      gap: 20px;
  
    }
          .quantity-container {
            margin-bottom: 15px;
        }
        
        .quantity-box input {
            width: 60px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }
        
        .color-options {
            margin-bottom: 20px;
        }
        
        .colors {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .color {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
        }
       
     
        
        /* نافذة السلة */
        .cart-modal {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            width: 350px;
            height: 100%;
            background-color: white;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            z-index: 2000;
            overflow-y: auto;
            transition: transform 0.3s ease;
            transform: translateX(100%);
        }
        
        .cart-modal.active {
            transform: translateX(0);
            display: block;
        }
        
        .cart-header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .cart-header h3 {
            color: #d63384;
        }
        
        .close-cart {
            font-size: 1.5rem;
            cursor: pointer;
            color: #888;
        }
        
        .cart-items {
            padding: 15px;
        }
        
        .cart-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .cart-item-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 5px;
        }
        
        .cart-item-details {
            flex: 1;
        }
        
        .cart-item-title {
            font-size: 0.9rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .cart-item-price {
            font-size: 0.9rem;
            color: #d63384;
            margin-bottom: 5px;
        }
        
        .cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .cart-item-quantity button {
            background-color: #f3f3f3;
            border: none;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .cart-item-quantity input {
            width: 30px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        
        .remove-item {
            color: #888;
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .cart-total {
            padding: 15px;
            border-top: 1px solid #eee;
        }
        
        .cart-total-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .delivery-options {
            margin-top: 15px;
        }
        
        .delivery-options select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        .checkout-btn {
            background-color: #d63384;
            color: white;
            border: none;
            padding: 10px;
            width: 100%;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin-top: 10px;
        }
        
        .checkout-btn:hover {
            background-color: #b52e70;
        }
        
        .empty-cart {
            text-align: center;
            padding: 30px;
            color: #888;
        }
        
        
      
       

   .heart-btn {
    margin-left: 10px;
    font-size: 24px;
    color: rgb(189, 188, 188);
    cursor: pointer;
    transition: color 0.3s ease;
}

.heart-btn.active {
    color: #ff69b4; /* اللون الوردي */
}
.star-rating {
  display: inline-flex;
  gap: 3px; /* مسافة صغيرة بين النجوم */
  cursor: pointer;
  margin: 10px 0;
}

.star-rating i {
  margin-right: 1px;
  font-size: 22px;
  color: rgb(189, 188, 188);
  transition: color 0.2s ease;
}

.star-rating i.active {
  color: gold;
}





/* ألوان المنتج */
.colors {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }
  
  .color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
  }
  
  .color.selected {
    border: 2px solid #333;
  }
  
  .color.selected::after {
    content: "✔️";
    color: white;
    font-size: 16px;
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: green;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
  
  /* ✅ مربعات الظلال (أرقام بدل الألوان) */
  .shade-numbers {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  
  .shade {
    width: 30px;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
  }
  
  .shade.selected {
    border-color: #333;
    background-color: #d1ffd1;
  }
  
  /* ✔️ علامة الصح */
  .shade.selected::after {
    content: "✔️";
    font-size: 14px;
    color: green;
    position: absolute;
    top: -10px;
    right: -10px;
    background: white;
    border-radius: 50%;
    border: 1px solid green;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
    
    
    .product-container {
      display: flex;
     
    }
    
    .product1-image img {
      margin-top: 20%;
      width: 250px;
      height: 300px;
      border-radius: 8px;
      margin-right: 15px;
    }
    
    .product-info {
      max-width: 350px;
    }
    
    .price {
      font-size: 24px;
      color: deeppink;
      font-weight: bold;
    }
    
    .color-options {
      margin: 20px 0;
    }
    
    .colors {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    
    .color {
      width: 25px;
      height: 25px;
      border-radius: 4px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    
    .quantity {
      margin: 20px 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .quantity button {
      padding: 5px 10px;
      font-size: 16px;
    }
    
    .quantity input {
      width: 40px;
      text-align: center;
      font-size: 16px;
    }
    
    .buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
   
  
    .favorite-btn {
        font-size: 24px;
        color: gray;
        background: none;
        border: none;
        cursor: pointer;
      }
      .favorite-btn.active {
        color: red;
      }




.product img {
    width: 100px;
    
    max-width: 200px; /* حجم أقصى للصورة */
    height: 123px;
    display: block;
    margin: 0 auto;
}








        /* أنماط نتائج البحث */
#searchResults {
    position: relative;
    z-index:999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#resultsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 15px;
}


#searchResults .product {
    margin: 0;
    box-shadow: none;
}
/* إضافة هذه الأنماط الجديدة */
.modal-custom {
    z-index: 2002 !important; /* تأكد من ظهور النوافذ فوق كل شيء */
}

#searchResults {
    z-index: 0;
    position: absolute;
    top: 600px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    background: white;
    max-height: 80vh;
    overflow-y: auto;
}
/* Media Queries للهواتف والأجهزة الصغيرة */
@media (max-width: 768px) {
    /* شريط التنقل العلوي */
    .logo img {
        max-width: 70px;
        margin-right: 10px;
        bottom: 9px;
    }
    
    h4 {
        font-size: 1.5rem;
    
        left: 50px;
    }

  
    /* تجميع العناصر في عمود واحد */
    .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }
    .recherche-re input {

  font-size: 9px;
 
}
    /* تعديل شريط البحث */
    .recherche-re {
        font-size: 9px;
        width: 50% !important;
        margin: 50px auto !important;
        right: auto !important;
        left: auto !important;
    }
    .search-box{
         font-size: 9px;
        width: 60% !important;
         left: 80px !important;
     
    }
    .smart-search-container {
 
        margin-top: 50px;
        width: 70% !important;
         left: 120px !important; 
    }
    
    .smart-search-container.placeholder{
        font-size: 1px;
    }
    .dropdown{
           width: 200px !important;
    }
    .but a {
        margin: 5px !important;
    }
    
    /* إخفاء القائمة الكبيرة وإظهار القائمة المنسدلة */
    .list {
        display: none !important;
    }
    
    /* تعديل السلايدر */
    .myslides img {
        height: 200px !important;
        width: 100% !important;
        margin-top: 40px !important;
    }
    
    .prev, .next {
        margin-top: 80px !important;
        padding: 8px !important;
        font-size: 14px !important;
    }
    
    /* تعديل القائمة الجانبية */
    .sidebar {
        width: 200px !important;
        left: -100% !important;
        z-index: 1000;
    }
    
    .sidebar.open {
        left: 0 !important;
    }
    
    .menu-toggle {
        display: block;
        position: fixed;
        top: 10px !important;
        left: 10px !important;
        z-index: 1001;
    }
    
    /* تعديل نتائج البحث */
    #searchResults {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-height: none !important;
    }
    
    /* تعديلات عامة للمحتوى */
    .container, .products-container {
        padding: 10px !important;
        grid-template-columns: 1fr !important;
    }
    
    .product {
        width: 100% !important;
        margin-bottom: 15px;
    }
}

/* تعديلات إضافية للشاشات الصغيرة جدًا */
@media (max-width: 480px) {
  
  
    
    .myslides img {
        height: 150px !important;
    }
    
    .prev, .next {
        margin-top: 60px !important;
        padding: 5px !important;
        font-size: 12px !important;
    }
    
    /* تعديل حجم الخطوط */
    .product h3 {
        font-size: 14px !important;
    }
    
    .product p {
        font-size: 12px !important;
    }
    
    .add-to-cart {
        font-size: 12px !important;
        padding: 5px !important;
    }
}

/* تعديلات للتوجيه الأفقي على الهواتف */
@media (max-width: 768px) and (orientation: landscape) {
    .header-content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
  
  
    
    
    
    .but {
        margin: 5px 0;
    }
}
@media (max-width: 768px) {
    /* الأيقونات (تتحرك لأسفل وتصبح ثابتة) */
    .but {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        background: white;
        padding: 10px 0;
        justify-content: space-around !important;
        z-index: 1001;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    
    .but a {
        margin: 10 !important;
    }
    
    /* القائمة الرئيسية */
    .list {
       display: none;
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 10px 0;
    }
    
    .list a {
        margin: 5px 0;
        display: block;
        text-align: center;
    }
    
    /* السلايدر */
    .myslides img {
          margin-top: 70px;
        height: 300px !important;
        width: 100% !important;
    }
    
  
    
    /* قسم المنتجات */
    .container, .products-container {
        margin-top: 70px;
        grid-template-columns: 1fr !important;
        padding: 10px !important;
    }
    
    .product {
      
        margin-left:50px;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 15px;
    }
    
    /* القائمة الجانبية */
    .sidebar {
      
        width: 200px !important;
        left: -100% !important;
    }
    
    .sidebar.open {
        left: 0 !important;
    }
    
    .menu-toggle {
        display: block;
        top: 35px !important;
        left: 10px !important;
        z-index: 1001;
    }
    
    /* صفحة المنتج */
    .product-container {
        flex-direction: column;
    }
  
    .product1-image img {
        margin-top: 10px !important;
        width: 250px !important;
        max-width: 300px;
        margin-right: 0 !important;
    }
    
    /* صفحة الاتصال */
    .contact-container {
        flex-direction: column;
        padding: 10px;
    }
    
    .contact-form, .besoin-aide {
        width: 100% !important;
    }
    
    .besoin-aide {
        left: 0 !important;
        margin-top: 20px;
    }
    
    /* نافذة الدردشة */
    .chat-container {
        padding: 10px;
    }
    
    .chat-area {
        min-height: 200px;
        max-height: 300px;
    }
    
    /* نافذة السلة */
    .cart-modal {
        width: 250px !important;
    }
    
    /* تعديلات عامة للهواتف */
    .heading {
        font-size: 1.5rem !important;
    }
    
    .infoo, .contact {
        padding: 10px !important;
    }
    
    .infoo h2, h3 {
        font-size: 1.2rem !important;
    }
    
    p {
        font-size: 0.9rem !important;
    }
    
    /* إخفاء بعض العناصر غير الضرورية على الهواتف */
    .dropdown-menuu {
        display: none !important;
    }


  
    .product h3 {
        font-size: 14px !important;
    }
    
    .product p {
        font-size: 12px !important;
    }
    
    .add-to-cart {
        font-size: 12px !important;
        padding: 6px !important;
    }
    
    .chat-area {
        min-height: 150px;
        max-height: 250px;
    }
    
    .msg-bot.product {
        flex-direction: column;
        align-items: center;
    }
    
    .msg-bot.product img {
        width: 100px !important;
        height: 100px !important;
    }
   
}
@media (max-width: 768px) {
  .compt {
    width: 90%;
    margin: auto;
    padding: 10px;
  }

  .compt .info input {
    width: 100%;
    font-size: 14px;
    padding: 8px;
    margin-bottom: 10px;
  }

  .compt h1 {
    font-size: 20px;
    text-align: center;
  }

 
  
  .info label {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .compt {
    width: 90%;
    margin: auto;
    padding: 10px;
  }

  .compt .info input {
    width: 100%;
    font-size: 12px; /* حجم الكتابة داخل الحقول */
    padding: 6px 8px; /* ارتفاع وداخل الحقل يصغر */
    margin-bottom: 10px;
  }

  .compt h1 {
    font-size: 20px;
    text-align: center;
  }

  .info label {
    font-size: 12px;
  }

  .ajout {
    width: 300px; /* تقليل العرض */
    margin: 50px auto; /* توسيط العنصر */
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    
}
.ajout h2 {
    text-align: center;
    color: #d63384;
    font-size: 22px; /* تصغير حجم العنوان */
}

.ajout form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ajout input,
.ajout textarea,
.ajout button {
    width: 200px; /* تقليل عرض الحقول */
    padding: 8px; /* تقليل التباعد الداخلي */
    margin-bottom: 10px; /* تقليل المسافة بين الحقول */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px; /* تصغير حجم النصوص */
}
}
.swiper-container {
    width: 100%;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    width: max-content;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
}

/* لضمان عرض مناسب على الهواتف */
@media (max-width: 767px) {
    .swiper-slide {
        padding: 0 5px;
        box-sizing: border-box;
    }
     .tableau {
      width: 12px;
      font-size: 11px;
    }
    .tableau {
    width: 100px;
    overflow-x: auto;
}

.tableau table {
    width: 240px;
    border-collapse: collapse;
}

.tableau th, .tableau td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    word-break: break-word;
}
}
/* ميديا كويري عندما تصغر الشاشة */
@media (max-width: 600px) {
    .info input[type="email"],
    .info button {
        max-width: 300px;
        font-size: 14px;
        padding: 10px;
    }

    .h1 h1 {
        font-size: 20px;
    }
}