- Esporta Lista Carrello (Totale)

- Sconto Applicato

src/components/CSingleCart/CSingleCart.scss

@@ -47,7 +47,198 @@
 .qta{
   font-size: 1.15rem;
   font-weight: bold;
+  border-radius: 12px;
+  padding: 8px;
 }
 .autori{
   font-style: italic;
+}
+
+.elimina-btn{
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ff3860, #e61e4d); /*negative gradient */
+  color: white;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.quantity-btn {
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #34c759, #2ecc71); /*positive gradient */
+  &[data-gradiente="negative"] {
+    background: linear-gradient(135deg, #ff3860, #e61e4d); /*negative gradient */
+  }
+  color: white;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.quantity-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+}
+
+.quantity-btn:active {
+  transform: translateY(0);
+}
+
+.quantity-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.quantity-display {
+  min-width: 60px;
+  text-align: center;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #1f2937;
+  background: #f8fafc;
+  border-radius: 12px;
+  padding: 12px 16px;
+  border: 2px solid #e2e8f0;
+  transition: all 0.3s ease;
+}
+
+.quantity-display.updating {
+  transform: scale(1.1);
+  border-color: #667eea;
+  background: #eff6ff;
+}
+
+.remove-btn {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 12px 20px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-left: auto;
+}
+
+.remove-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
+}
+
+.cart-summary {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  border-radius: 20px;
+  padding: 24px;
+  margin-top: 32px;
+  text-align: center;
+  opacity: 1;
+  transition: all 0.3s ease;
+}
+
+.cart-summary.hidden {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.total-amount {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.total-items {
+  opacity: 0.9;
+  margin-bottom: 20px;
+}
+
+.checkout-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 16px 32px;
+  border-radius: 12px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.checkout-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.empty-cart {
+  text-align: center;
+  padding: 60px 20px;
+  color: #6b7280;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.empty-cart.show {
+  opacity: 1;
+}
+
+.empty-cart i {
+  font-size: 4rem;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.pulse {
+  animation: pulse 0.3s ease-in-out;
+}
+
+@keyframes fadeInUp {
+  from {
+      opacity: 0;
+      transform: translateY(30px);
+  }
+  to {
+      opacity: 1;
+      transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeInUp 0.5s ease forwards;
+}
+
+@media (max-width: 768px) {
+  .product-content {
+      flex-direction: column;
+      text-align: center;
+  }
+  
+  .quantity-controls {
+      justify-content: center;
+  }
+  
+  .remove-btn {
+      margin: 16px auto 0;
+  }
 }