body {
         font-family: Arial, sans-serif;
         background-color: #f4f4f4;
         margin: 0;
         padding: 0;
     }

     .container {
         max-width: 600px;
         margin: 50px auto;
         padding: 20px;
         border: 1px solid #ccc;
         border-radius: 5px;
         background-color: #fff;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     }

     h1 {
         text-align: center;
     }

     form {
         display: flex;
         flex-direction: column;
     }

     label {
         margin-top: 10px;
     }

     input,
     button {
         margin-top: 5px;
         padding: 10px;
         font-size: 1em;
     }

     button {
         background-color: black;
         color: white;
         border: none;
         cursor: pointer;
     }

     button:hover {
         background-color: rgb(31, 107, 228);
     }

     .hidden {
         display: none;
     }

     #receipt-content {
         margin-top: 20px;
         padding: 20px;
         border: 1px solid #ccc;
         border-radius: 5px;
         background-color: #fff;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         text-align: center;
         font-family: monospace;
     }

     #receipt-details {
         text-align: center;
         margin-bottom: 20px;
     }

     #qr-code-container {
         display: flex;
         justify-content: center;
         margin-top: 20px;
     }