body {
       -webkit-tap-highlight-color: transparent;
   }

   .no-scrollbar::-webkit-scrollbar {
       display: none;
   }

   .no-scrollbar {
       -ms-overflow-style: none;
       scrollbar-width: none;
   }

   .ripple {
       transition: transform 0.1s, background-color 0.2s;
   }

   .ripple:active {
       transform: scale(0.96);
   }

   .drawer-transition {
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .sheet-transition {
       transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .cart-item-img {
       width: 60px;
       height: 60px;
       object-fit: cover;
       border-radius: 12px;
   }

   .empty-cart-message {
       text-align: center;
       padding: 2rem;
       color: #999;
   }

 .toast-message {
     position: fixed;
     top: 80px;
     left: 1rem;
     right: 1rem;
     max-width: 480px;
     margin: 0 auto;
     background: #1f2937;
     color: white;
     padding: 0.75rem 1rem;
     border-radius: 999px;
     text-align: center;
     font-weight: 500;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
     z-index: 100;
     transition: opacity 0.2s;
 }
  
 .loading-spinner {
     border: 2px solid #f3f3f3;
     border-top: 2px solid #16a34a;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     animation: spin 1s linear infinite;
     display: inline-block;
 }
 .profile-img-container {
     position: relative;
     width: 96px;
     height: 96px;
     margin: 0 auto;
 }

 .profile-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
     border: 3px solid white;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .camera-overlay {
     position: absolute;
     bottom: 0;
     right: 0;
     background: #16a34a;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     cursor: pointer;
     border: 2px solid white;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }

 .camera-overlay i {
     font-size: 16px;
 }
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }