/* Styles for the warmup button */
.warmup-container {
  text-align: center; 
  margin-top: 40px;
}

/* Adjust the warmup button */
.warmup-btn {
  display: inline-block; /* Change display to inline-block */
  padding: 0.8rem 3rem;
  border-radius: 0.5rem;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Hover effect for warmup button */
.warmup-btn:hover {
  background: linear-gradient(60deg, var(--yellow), var(--violet));
}

/* Hidden backend status until clicked */
#backend-status {
  display: none;
  margin-top: 20px;
  font-size: 1.2rem;
}

/* Styles for the certificate verification form */
.verification-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

/* Styling for the heading */
.verification-container h1 {
  text-align: center;
  margin-bottom: 20px;
}

/* Styling for the form label */
.verification-container label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

/* Styling for the input field */
.verification-container input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Button group for multiple buttons */
.button-group {
  display: flex;
  justify-content: center; /* Center the button group */
  margin-bottom: 20px;
}

/* Styling for buttons */
button {
  display: block;
  width: 48%; /* Ensuring buttons fit well */
  padding: 0.8rem 3rem;
  margin: 0 10px; /* Add margin to the left and right for spacing */
  border-radius: 0.5rem;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Hover effect for buttons */
button:hover {
  background: linear-gradient(60deg, var(--yellow), var(--violet));
}

/* Table styles for displaying results */
.result-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

/* Styling for the table headers and data */
.result-table th,
.result-table td {
  padding: 10px;
  border: 1px solid #ddd;
  font-size: 18px;
}

.result-table th {
  background-color: #f2f2f2;
  text-align: left;
}

.result-table td {
  text-align: left;
}

/* Error message styling */
.error-message {
  color: red;
  font-size: 18px;
}

/* Loading message styling */
#loading {
  display: none;
  text-align: center;
  font-size: 18px;
}

/* Success message styling */
.success-message {
  color: green;
  font-size: 20px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

/* Style for the backend status message */
#warmup-status {
  color: green;
  font-size: 20px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-align: center;
}

/* General style for loading text */
#loading {
  font-size: 18px; 
  color: blue; 
  text-align: center; 
  display: none; 
  font-weight: bold;
}

/* Additional styles for mobile view */
@media (max-width: 768px) {
  /* Make button widths full on smaller screens */
  button {
    width: 100%;
    margin-top: 10px; 
  }

  /* Adjust padding and font size for buttons on mobile */
  .warmup-btn,
  button {
    padding: 1rem;
    font-size: 1.2rem; 
  }

  /* Center align the warmup container */
  .warmup-container {
    margin-top: 20px; 
  }
}

/* Additional styles for larger screens */
@media (min-width: 769px) {
  /* Center the button group */
  .button-group {
    justify-content: center; /* Ensure buttons are centered */
  }

  /* Adjust button margins for better alignment */
  button {
    margin: 0 10px; /* Consistent spacing between buttons */
  }
}

/* Specific styles for the "Click to Start Verify" text */
.start-verify {
  display: flex;
  justify-content: center; /* Center the text */
  align-items: center; /* Align text vertically */
  margin: 20px 0; /* Add margin for spacing */
  font-size: 20px; /* Adjust font size as needed */
}