/* Style for the sign in header */
.header {
  margin-top: 20px; /* Adds a top margin of 20px to the header */
  display: flex; /* Uses flexbox layout for the header */
  gap: 30px; /* Sets a 30px gap between flex items */
  color: var(--global-grey); /* Sets the text color to the global grey variable */
}

.container {
  margin: 0 auto; /* Center the container horizontally */
  max-width: 500px; /* Set a maximum width for the container */
  text-align: center; /* Center-align the text inside the container */
  padding: 0 10px; /* Add padding for mobile */
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
  .outer {
    margin: 10px auto; /* Reduced margin on small screens */
    padding: 15px; /* Reduced padding on small screens */
  }
  
  .outer-header img {
    width: 60px; /* Slightly smaller icon on mobile */
  }
  
  .outer h2 {
    font-size: 1.3em; /* Slightly smaller header on mobile */
  }
}

img {
  opacity: 0.65; /* Sets the opacity of images to 65% */
}

form {
  display: flex; /* Uses flexbox layout for the form */
  flex-direction: column; /* Arranges form elements in a column */
  max-width: 500px; /* Sets a maximum width of 500px for the form */
}

form div {
  display: flex; /* Use flexbox layout */
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  margin: 15px 0; /* Increased margin for mobile */
  text-align: center; /* Center-align text inside the div */
  width: 100%; /* Full width */
}

form .submit {
  display: flex; /* Uses flexbox layout for the submit button container */
  justify-content: flex-end; /* Aligns the submit button to the right */
  margin-top: 30px; /* Adds a top margin of 30px */
}

u {
  color: var(--global-blue); /* Sets the color of underlined text to the global blue variable */
}

button {
  background-color: #4285f4; /* Default blue background */
  color: #fff; /* White text color */
  border: none; /* Remove border */
  border-radius: 6px; /* Slightly more rounded corners */
  padding: 15px 24px; /* Larger padding for better touch targets */
  font-size: 16px; /* Set font size - prevents zoom on iOS */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  text-align: center; /* Center-align text */
  display: inline-block; /* Ensure proper button behavior */
  width: 100%; /* Make the button stretch across the container */
  box-sizing: border-box; /* Include padding and border in the width calculation */
  min-height: 48px; /* Minimum touch target size */
}

button:hover {
  background-color: #4ace73 !important; /* Green background on hover */
  color: #fff; /* Ensure text remains white */
}

input {
  height: 2.5em; /* Slightly taller for better touch targets */
  width: 100%; /* Full width of container */
  max-width: 100%; /* Prevent overflow */
  padding: 10px 15px; /* Add padding for better touch experience */
  font-size: 16px; /* Prevent zoom on iOS */
  border: 1px solid #ddd; /* Add border */
  border-radius: 4px; /* Rounded corners */
  box-sizing: border-box; /* Include padding in width */
}

hr {
  margin: 30px 20%; /* Adds vertical margins of 30px and horizontal margins of 20% */
}

.links {
  display: flex; /* Use flexbox layout */
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  gap: 15px; /* Increased spacing for mobile */
  text-align: center; /* Center-align the text */
  margin: 30px auto; /* More margin for mobile */
  padding: 0 20px; /* Add horizontal padding */
}

.links a {
  padding: 8px 12px; /* Add padding for better touch targets */
  display: inline-block; /* Better for touch */
}

.error-div {
  border-radius: 5px; /* Optional: Rounds the corners of the error box */
  padding: 10px; /* Adds padding inside the error box */
  width: 80%; /* Sets the width of the error box */
  margin: 0 auto; /* Centers the error box horizontally */
}

.error-div p {
  color: var(--primary-red) !important; /* Sets text color using the primary red variable */
  font-size: 15px; /* Sets font size for the error message */
  margin-bottom: 20px; /* Adds a bottom margin of 20px */
  padding: 0; /* Removes padding */
  text-align: center; /* Centers the text */
  width: 100%; /* Sets the width to 100% */
  height: 1em; /* Sets the height to 1em */
  display: flex; /* Uses flexbox layout */
  align-items: center; /* Centers items vertically */
  justify-content: center; /* Centers items horizontally */
}

.outer {
  display: flex; /* Use flexbox layout */
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Align items to the left */
  justify-content: flex-start; /* Align items to the top */
  background-color: #f9f9f9; /* Light background for contrast */
  border: 1px solid #ddd; /* Subtle border */
  border-radius: 8px; /* Rounded corners */
  padding: 20px; /* Inner padding */
  margin: 20px auto; /* Center the box horizontally */
  width: 90%; /* Mobile-first: 90% width */
  max-width: 400px; /* Max width for larger screens */
  min-width: 280px; /* Minimum width for very small screens */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Tablet and desktop styles */
@media (min-width: 768px) {
  .outer {
    width: 60%; /* Medium screens */
    max-width: 500px;
  }
}

@media (min-width: 1024px) {
  .outer {
    width: 40%; /* Large screens */
    max-width: 600px;
  }
}

.outer-header {
  display: flex; /* Use flexbox layout */
  align-items: center; /* Vertically align the image and text */
  gap: 15px; /* Add spacing between the image and the text */
  margin-bottom: 20px; /* Add spacing below the header */
  width: 100%; /* Full width */
  justify-content: center; /* Center on mobile */
}

@media (min-width: 768px) {
  .outer-header {
    justify-content: flex-start; /* Left align on larger screens */
  }
}

.outer img {
  opacity: 0.65; /* Set the opacity of the image */
}

.outer h2 {
  font-size: 1.5em; /* Adjust font size */
  margin: 0; /* Remove default margin */
  color: #0482ffdc; /* Darker text for headers */
  padding-bottom: 5px; /* Add padding below the text */
  position: relative; /* Required for the ::after pseudo-element */
  display: inline-block; /* Ensures the underline matches the text width */
}

.outer h2::after {
  content: "";
  display: block;
  width: 100%; /* Matches the width of the text */
  height: 3px; /* Thickness of the underline */
  background-color: #0482ff; /* Match the header color */
  position: absolute;
  bottom: 0; /* Position the underline at the bottom of the text */
  left: 0; /* Align the underline with the start of the text */
}

.inner {
  display: flex; /* Use flexbox layout */
  flex-direction: column; /* Stack items vertically */
  gap: 15px; /* Add spacing between form elements */
  width: 100%; /* Full width of the parent container */
}