.ticket-popup-overlay {
   position: fixed;
   top: 0; left: 0; width: 100%; height: 100%;
   background: rgba(0, 0, 0, 0.5);
   display: none; /* hidden by default */
   align-items: center;
   justify-content: center;
   z-index: 9999;
 }

/* Dialog box */
.ticket-popup {
   background: #333;
   padding: 30px 40px;
   border-radius: 10px;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
   color: white;
   box-shadow: 0 5px 20px rgba(0,0,0,0.3);
   max-width: 400px;
   width: 90%;
   position: relative;
}

/* Success / error backgrounds */
.popup-valid { background: #28a745; }
.popup-used, .popup-expired, .popup-invalid { background: #dc3545; }

/* Close button */
.ticket-popup-close {
   position: absolute;
   top: 12px;
   right: 16px;
   font-size: 24px;
   font-weight: bold;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.8);
   transition: color 0.3s ease;
}

.ticket-popup-close:hover {
   color: white;
}

/* Basic form styles */
#ticket-checker-form {
   display: flex;
   gap: 8px;
   align-items: center;
   max-width: 400px;
   margin: 40px auto;
}

#ticket-checker-form input[type="text"] {
   padding: 10px 12px;
   font-size: 16px;
   flex: 1;
   border: 2px solid #ccc;
   border-radius: 6px;
   transition: border-color 0.3s ease;
}

#ticket-checker-form input[type="text"]:focus {
   outline: none;
   border-color: #007bff;
   box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}

#ticket-checker-form button {
   padding: 10px 18px;
   font-size: 16px;
   cursor: pointer;
   background-color: #007bff;
   border: none;
   border-radius: 6px;
   color: white;
   transition: background-color 0.3s ease;
}

#ticket-checker-form button:hover {
   background-color: #0056b3;
}