@media only screen and (min-width: 1025px) {
  .suggestion-width{
    
    /* Styles pour l'adaptation PC et l'alignement */
    padding:.5rem;
    border: 1px solid rgb(216, 214, 214); /* Simplification des bordures */
    background-color:rgb(245, 244, 244); 
    position: absolute;
    z-index: 1000; /* Augmenter z-index pour s'assurer qu'elle est au-dessus */
    
    /* Alignement à droite (pour une écriture de droite à gauche comme le Darija) */
    right: 0; /* Aligner le côté droit de la suggestion avec le côté droit du conteneur parent */
    left: auto; /* Annuler l'alignement à gauche par défaut */
    
    /* S'assurer que la largeur est bien gérée (suggestion-width pourrait être définie en CSS externe) */
    width: 100%; /* S'assurer que la largeur correspond au champ de recherche ci-dessus */
    
    /* Retirer les marges latérales si elles étaient pour le centrage */
    margin-left: 0; 
    margin-right: 0;
    
    display: none; 
}
.suggestion{
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  min-height: 0;
}
.suggestion:hover{
  background-color: var(--bck-color);
}
.suggestion-darija-pc{
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  min-height: 0;
  text-align: right;
}
.suggestion-darija{
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  min-height: 0;
  text-align: right;
}
.suggestion-darija:hover{
  background-color: var(--bck-color);
}
.test-if-exist-suggestion{
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  min-height: 0;
  text-align: right;
}
.test-if-exist-suggestion:hover{
  background-color: var(--bck-color);
}
  /* Styles pour le sélecteur de quantité */
.quantity-selector {
  display: flex; /* Utilise Flexbox pour aligner l'input et le bouton */
  align-items: center; /* Centre les éléments verticalement */
  gap: 10px; /* Ajoute un espace entre l'input et le bouton */
  margin-top: 15px; /* Espace au-dessus du sélecteur */
  justify-content: center; /* Centre le sélecteur horizontalement dans sa div parente */
  width: 100%; /* S'assure que le conteneur prend toute la largeur disponible */
}

.quantity-input {
  width: 80px; /* Largeur de l'input */
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center; /* Centre le texte dans l'input */
  -moz-appearance: textfield; /* Cache les flèches par défaut sur Firefox */
}

/* Cache les flèches par défaut sur Chrome, Safari, Edge */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sombre{
    /* z-index: 1700; */
   background: rgba(243, 243, 243, 0.2);
 }
  .badge-danger {
        background-color: #ec5757;
        padding: .9rem;
        font-size: 1.675rem;
        color: white;
        font-weight: medium;
        justify-content: center;
        align-items: center;
        border-radius: 0.4rem;
      }
    .flex-row-error {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    
      .error {
        background-color: white;
      }
    
      .error ul {
        list-style: none;
      }
    
      .error ul li {
        margin-left: 1rem;
      }
    .hidden {
        display: none;
      }
    .hide-in-desctop {
        display: none;
      }
    }
   
        
       
       
        .ml-3 {
            margin-left: 3rem;
          }
        

       

       

      
        /* Responsive adjustments */
        @media screen and (max-width: 1024px) {
          .suggestion-width{
            width:100%;
            border-radius:.5rem;
          }
        .suggestion-darija{
          margin-top: 1rem;
          font-size: 1.5rem;
          color: var(--text-color);
          padding: .5rem;
          cursor:pointer;
          text-align: right;
          min-height: 0;
          font-weight: 500;
          padding-right: 3rem;
        }
        .suggestion-darija:hover{
          background-color: var(--bck-color);
        }
        .test-if-exist-suggestion{
          margin-top: 1rem;
          font-size: 1.5rem;
          color: var(--text-color);
          padding: .5rem;
          cursor:pointer;
          min-height: 0;
        }
        .test-if-exist-suggestion:hover{
          background-color: var(--bck-color);
        }
          .add-cart-btn{
            /*background-color: #f68c1eff;*/
            background-color:#fcb700ff;
            color: var(--aside-color);
            border: 1px solid var(--title-color);
            padding: 1.5rem;
            height: calc(1.125em + 0.1rem + 1px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 2.5rem;
            font-weight: bold;
            font-size: .975rem;
            margin-bottom: .5rem;
            min-width: 10rem;
            position: relative;
             /* flex-shrink: 0; s'assure que le bouton ne disparaîtra pas */
             flex-shrink: 0;
             width: auto; /* Le bouton doit prendre la largeur de son contenu */
          }
          /* input[type="number"]{
            max-width: 5rem;
            box-sizing: border-box;
            border: 1px solid var(--light-gris-color);
            border-radius: 4px;
            font-size: 1.075rem;
            font-weight: bold;
            background-color: white;
            padding: .5rem;
            height: calc(.715em + .925rem + 3px);
            line-height: 1.5;
            text-align:center;
            border-radius: 0 0.25rem 0.25rem 0;
           } */
           input[type="number"]:focus::placeholder {
            font-size: 0.525rem;
          }
          input[type="number"]{
            min-width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--light-gris-color);
            border-radius: 4px;
            font-size: 1rem;
            color: var(--paragraph-color);
            background: white;
            padding: 0.375rem 0.75rem;
            height: calc(1.95em + 1rem + 1px);
            line-height: 1.5;
            box-sizing: border-box;
            border-radius: 0 0.25rem 0.25rem 0;
          }
          .sombre{
            /* z-index: 1700; */
           background: rgba(243, 243, 243, 0.2);
         }
          .center-mobile {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .ring {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50px, -50%);
            width: 50px;
            height: 50px;
            background: transparent;
            border: 5px solid transparent;
            border-radius: 50%;
            z-index: 1700;
          }
          .ring::before{
            content: '';
            position: absolute;
            top: 0px;
            left: -1px;
            width: 100%;
            height: 100%;
            border: 3px solid #dedfe079;
            border-top: 3px solid rgba(0,120,212,255);
            border-right: 3px solid rgba(0,120,212,255);
            border-radius: 50%;
            animation: animateCircle 1100ms linear infinite;
          }
          @keyframes animateCircle{
            0%
            {
              transform: rotate(45deg);
            }
            100%
            {
              transform: rotate(360deg);
            }
            }
          .icon-menu-width{ 
            width: 1.465rem;
          }
        .mini-icon-menu-width{ 
          width: .965rem;
      }
          .mlm-2{
                margin-left: 2rem;
              }
               .mlm-1{
                margin-left: 1rem;
              }
            .badge-danger {
                background-color: #ec5757;
                padding-bottom: 0.3rem;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                padding-top: .3rem;
                font-size: 1rem;
                width: auto;
                color: white;
                font-weight: medium;
                border-radius: 0.4rem;
              }
            .icon-big-menu-width{
                width: 2.465rem;
             }
             .hide-in-mobile {
                display: none;
              }
              .hidden {
                display: none !important;
              }
              .flex-row-error {
                display: flex;
                flex-direction: row;
                align-items: center;
              }
            
              .error {
                padding: 0.5rem;
                font-size: 1rem;
                width: auto;
                color: #ec5b5b;
              }
              .error ul {
                list-style: none;
              }
              .error ul li {
                margin-left: 1rem;
              }
        }

       
   




/* Ajustements pour la réactivité mobile si nécessaire */
@media (max-width: 768px) {
  .quantity-selector {
      flex-direction: column; /* Empile l'input et le bouton sur les petits écrans */
      align-items: stretch; /* Les étire pour prendre toute la largeur */
  }

  .quantity-input,
  .add-cart-btn {
      width: 100%; /* L'input et le bouton prennent toute la largeur sur mobile */
      margin-top: 10px; /* Espace entre les éléments empilés */
  }
 
}