#ticket-machine {
  max-width: 360px;
  margin: 2em auto;
  background: linear-gradient(#1a1a1a, #0e0e0e);
  border-radius: 20px;
  box-shadow: 0 0 25px #0077ff;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  padding: 20px;
}

#screen {
  background: #003366;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  text-align: center;
  color: #ccefff;
}

#display-text {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

#ticket-info {
  font-size: 0.9rem;
  color: #aad4ff;
}

#ticket-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

#ticket-buttons button {
  width: 48%;
  padding: 10px;
  background: #0b72e3;
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s;
}

#ticket-buttons button:hover {
  background: #095ab7;
}

#card-slot {
  margin-bottom: 15px;
}

#card-slot label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

#card-input {
  width: 100%;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  background: #001f33;
  color: #cce5ff;
  text-align: center;
  border: none;
}

#keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

#keypad button {
  padding: 15px;
  font-size: 1.3rem;
  border: none;
  border-radius: 10px;
  background: #1a73e8;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}

#keypad button:hover {
  background: #0c5dc4;
}

#pay-btn:disabled {
  background: #555;
  cursor: not-allowed;
}

#confirmation {
  background: #002244;
  padding: 15px;
  border-radius: 12px;
  margin-top: 20px;
  text-align: center;
}

#ticket-img {
  margin-top: 10px;
  max-width: 100%;
  border: 2px solid #0077ff;
  border-radius: 10px;
}