body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: white;
  padding-top: 30px; /* adjust based on .top-message height */
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}



.subtitle {
  font-size: 14px;
  color: #777;
  margin-bottom: 1.5rem;
}

.form input,
#auth-form input {
  width: 100%;
  padding: 10px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.buttons button,
.google-btn,
#auth-submit {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  box-sizing: border-box;
}

.buttons button {
  width: 48%;
  margin: 10px 1%;
  background-color: #007bff;
  display: inline-block;
}

.buttons button:hover {
  background-color: #0056b3;
}

.google-btn {
  background-color: #db4437;
}

.google-btn:hover {
  background-color: #c23321;
}

#auth-submit {
  background-color: #007bff;
}

#auth-submit:hover {
  background-color: #0056b3;
}

#message {
  margin-top: 10px;
  color: red;
}

/* Toggle buttons container and buttons */

.toggle-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.toggle-btn {
  background: none;
  border: 2px solid #007bff;
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
  font-weight: bold;
  color: #007bff;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.toggle-btn.active {
  background-color: #007bff;
  color: white;
}

/* OR separator styling

.or-separator {
  text-align: center;
  margin: 10px 0;
  font-weight: bold;
  color: #555;
  position: relative;
}

.or-separator::before,
.or-separator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #ccc;
}

.or-separator::before {
  left: 0;
}

.or-separator::after {
  right: 0;
} */

/* Checkbox container for terms */

.checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 8px;
}
/* Style placeholder text */
input::placeholder {
  color: #999;          /* Soft gray color */
  font-style: italic;   /* Optional: italic for subtle emphasis */
  opacity: 1;           /* Ensures consistent opacity across browsers */
  font-weight: 400;     /* Normal weight */
  transition: color 0.3s;
}

/* Optional: change placeholder color on input focus for better UX */
input:focus::placeholder {
  color: #ccc;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* changed from center */
  height: 100vh;
   padding-top: 20px; /* space for top-message */
}



.logo {
  width: 250px;
  height: 50px;
  object-fit: contain;
  
}



.subtitle {
  font-size: 14px;
  color: #777;
  margin-bottom: 1.5rem;
}

.form input,
#auth-form input {
  width: 100%;
  padding: 10px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.buttons button,
.google-btn,
#auth-submit {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  box-sizing: border-box;
}

.buttons button {
  width: 48%;
  margin: 10px 1%;
  background-color: #007bff;
  display: inline-block;
}

.buttons button:hover {
  background-color: #0056b3;
}

.google-btn {
  background-color: #db4437;
}

.google-btn:hover {
  background-color: #c23321;
}

#auth-submit {
  background-color: #007bff;
}

#auth-submit:hover {
  background-color: #0056b3;
}

#message {
  margin-top: 10px;
  color: red;
}

/* Toggle buttons container and buttons */

.toggle-container {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

.toggle-btn {
  background: none;
  border: 2px solid #007bff;
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
  font-weight: bold;
  color: #007bff;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.toggle-btn.active {
  background-color: #007bff;
  color: white;
}

/* OR separator styling */

.or-separator {
  text-align: center;
  margin: 5px 0;
  font-weight: bold;
  color: #555;
  position: relative;
}

.or-separator::before,
.or-separator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #ccc;
}

.or-separator::before {
  left: 0;
}

.or-separator::after {
  right: 0;
}

/* Checkbox container for terms */

.checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 8px;
}
/* Style placeholder text */
input::placeholder {
  color: #999;          /* Soft gray color */
  font-style: italic;   /* Optional: italic for subtle emphasis */
  opacity: 1;           /* Ensures consistent opacity across browsers */
  font-weight: 400;     /* Normal weight */
  transition: color 0.3s;
}

/* Optional: change placeholder color on input focus for better UX */
input:focus::placeholder {
  color: #ccc;
}

/* Style the form container */
#form {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}

/* Style inputs */
#form input[type="text"],
#form input[type="email"],
#form input[type="password"] {
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.3s;
}

#form input:focus {
  border-color: #4a90e2;
  outline: none;
}

/* Style the checkbox area */
.checkbox-container {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.4;
}

.checkbox-container input {
  margin-right: 8px;
  margin-top: 3px;
}

.checkbox-container a {
  color: #4a90e2;
  text-decoration: none;
}

.checkbox-container a:hover {
  text-decoration: underline;
}

/* Style the form button */
#form button[type="submit"] {
  padding: 12px;
  background-color: #4a90e2;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#form button[type="submit"]:hover {
  background-color: #357abd;
}
.top-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  text-align: center;
  background-color: #323232;
  color: #fff;
  font-weight: bold;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: translateY(-100%);
  opacity: 0;
}

.top-message.success {
  background-color: #007bff;
}

.top-message.error {
  background-color: #f44336;
}

.top-message.show {
  transform: translateY(0);
  opacity: 1;
}

#banner label, #banner input[type="checkbox"] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 6px; /* spacing between checkbox and label */
}