last updates

public/styles.css

@@ -1,47 +1,106 @@
+/* Stili generali per il corpo della pagina */
 body {
-    font-family: Arial, sans-serif;
-    padding: 20px;
-    text-align: center;
-  }
-  
-  h1, h2, h3 {
-    color: #333;
-  }
-  
-  #product-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  .product-card {
-    width: 200px;
-    margin: 10px;
-    padding: 15px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    text-align: center;
-  }
-  
-  button {
-    padding: 10px;
-    background-color: #4CAF50;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  
-  button:hover {
-    background-color: #45a049;
-  }
-  
-  input, button {
-    padding: 10px;
-    margin: 10px;
-  }
-  
-  #order-summary {
-    margin-top: 20px;
-  }
-  
+  font-family: Arial, sans-serif;
+  padding: 20px;
+  text-align: center;
+}
+
+h1, h2, h3 {
+  color: #333;
+}
+
+/* Stili per la lista dei prodotti, usa flexbox per disposizione responsive */
+#product-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* Stili per ciascuna card prodotto */
+.product-card {
+  font-size: 21px;
+  width: 200px;
+  margin: 10px;
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  text-align: center;
+}
+
+/* Pulsante generico */
+button {
+  padding: 10px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+/* Stili per gli input e i pulsanti */
+input, button {
+  padding: 20px;
+  margin: 20px;
+}
+
+/* Sezione riepilogo ordine */
+#order-summary {
+  margin-top: 20px;
+}
+
+/* SEZIONE METODO DI PAGAMENTO */
+
+/* Contenitore principale per i metodi di pagamento (flexbox per allineamento orizzontale) */
+#payment-method-section {
+  display: flex;
+  justify-content: space-evenly; /* Distanza uniforme tra gli elementi */
+  align-items: center; /* Allineamento verticale centrale */
+  margin: 20px 0;
+}
+
+/* Etichetta che contiene il radio button personalizzato e il testo */
+.payment-option {
+  display: inline-block; /* Dispone gli elementi orizzontalmente */
+  text-align: center; /* Centra il contenuto */
+  margin: 0 20px; /* Distanza tra i metodi di pagamento */
+  cursor: pointer; /* Cambia il cursore al passaggio sopra */
+  font-size: 1.5em; /* Aumenta la dimensione del testo */
+}
+
+/* Nasconde il radio button originale */
+.payment-option input[type="radio"] {
+  display: none;
+}
+
+/* Stile personalizzato per il radio button */
+.payment-option .radio-custom {
+  width: 75px; /* Dimensione del pallino */
+  height: 75px; /* Dimensione del pallino */
+  border: 2px solid #333333; /* Colore del bordo */
+  border-radius: 50%; /* Forma circolare */
+  display: block; /* Disposizione a blocco per centrare */
+  margin: 0 auto; /* Centra il pallino orizzontalmente */
+  transition: background-color 0.3s, border-color 0.3s; /* Effetto di transizione */
+}
+
+/* Quando il radio button è selezionato, cambia colore */
+.payment-option input[type="radio"]:checked + .radio-custom {
+  background-color: #007bff; /* Colore di sfondo quando selezionato */
+  border-color: #007bff; /* Colore del bordo quando selezionato */
+}
+
+/* Quando l'utente passa sopra il radio button, cambia il bordo */
+.payment-option input[type="radio"]:hover + .radio-custom {
+  border-color: #0056b3; /* Cambia il bordo al passaggio del mouse */
+}
+
+/* Stile per il testo che appare sopra il pallino */
+.payment-option .payment-text {
+  font-size: 1.5em; /* Imposta la dimensione del testo */
+  margin-top: 12px; /* Distanza tra il pallino e la scritta */
+  text-align: center; /* Centra il testo sopra il pallino */
+}