/* 1) Import Roboto or a similar font */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* 2) Reset / base */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 3) Body: entire dark background, plus flex for min-height: 100vh */
body {
  font-family: "Roboto", sans-serif;
  background-color: #162127;
  color: #e4e6eb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  /* Remove default margins/padding so content is closer to screen edges */
  margin: -10;
  padding: 0;
}

/* 4) Language bar at top, centered */
.language-bar {
  text-align: center;
  font-size: 14px;
  padding: 10px 0;
  color: #b0b3b8;
}

/* 5) Close button in top-left corner (optional) */
.close-button {
  position: absolute;
  top: 10px;
  left: 10px;
  background: none;
  border: none;
  color: #b0b3b8;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
}
.close-button:hover {
  background-color: #3a3b3c;
}
.signin-label {
  text-align: left;
  font-size: 16px;
  color: #b0b3b8; /* Light gray text */
  margin-bottom: 16px; /* Space before form starts */
}

/* 6) main-content: flex:1 so it expands, letting bottom-area be near the bottom */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 800px;
  margin: 0 auto; /* center horizontally */
}

/* 7) Logo container */
.logo-container {
  display: flex;
  justify-content: center;

  
}
.fb-logo {
  width: 60px;
  height: 60px;
}

/* 8) The login form */
.login-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Floating-label input containers */
.input-container {
  position: relative;
  margin-bottom: 16px;
}
.input-container input {
  width: 100%;
  font-size: 16px;
  padding: 18px 12px;
  border: 1px solid #3a3b3c;
  border-radius: 8px;
  background-color: transparent;
  color: #fff;
  outline: none;
  font-family: "Roboto", sans-serif;
}
.input-container input::placeholder {
  opacity: 0; /* hidden because we have floating labels */
}
.input-container label {
  position: absolute;
  top: 18px;
  left: 12px;
  color: #b0b3b8; /* label color */
  font-size: 16px;
  pointer-events: none;
  transition: 0.2s ease;
}
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
  top: 6px;
  left: 12px;
  font-size: 12px;
  color: #1877f2; /* FB blue highlight */
}

/* Eye icon for password toggling */
.toggle-eye {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #b0b3b8;
  cursor: pointer;
  font-size: 18px;
  
}


/* "Log in" button: rounded pill style */
.login-button {
  background-color: #1877f2; /* FB blue */
  color: #fff;
  font-size: 16px;
  font-weight: 200;
  border: none;
  border-radius: 50px; /* fully rounded corners */
  padding: 12px 0;
  cursor: pointer;
  margin-top: 6px;
  width: 100%; /* full width if desired */
  text-align: center;
}




/* Forgot password link */
.forgot-link {
  display: block;
  text-align: center;
  font-size: 14px;
  color: #b0b3b8;
  text-decoration: none;
  margin-top: 14px;
  margin-bottom: 20px;
}
.forgot-link:hover {
  text-decoration: underline;
}

/* 9) Bottom area (create account + meta) pinned near bottom by flex */
.bottom-area {
  margin-top: auto; /* push this area to the bottom of .main-content */
  text-align: center;
}

/* "Create new account" button */
/* "Create new account" button: rounded blue outline */
.create-button {
  background-color: transparent;
  border: 1px solid #1877f2;   /* Blue outline */
  color: #1877f2;             /* Blue text */
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;        /* Rounded corners */
  padding: 14px 0;
  cursor: pointer;
  margin-bottom: 20px;
  width: 100%;                /* Full width, or adjust as you like */
  text-align: center;
  
}

.create-button:hover {
  background-color: transparent ;  /* Fill with blue on hover */
  color: #1877f2;                /* White text on hover */
}



/* Meta footer inside bottom-area */
.meta-footer p {
  color: #b0b3b8;
  font-size: 14px;
  margin-bottom: 20px; /* if you want some bottom spacing */
}

/* On small screens, adjust spacing if desired */


.language-bar {
  text-align: center;
  font-size: 14px;
  padding: 10px 0;
  color: #b0b3b8;
  margin-bottom: 12px;  /* Optional: reduce bottom margin */
   margin-top: 8%;      /* Smaller top margin */

  /* Add margin below the language bar if you want more space above the logo */
}

.logo-container {
  display: flex;
  justify-content: center;

  /* Increase these values to push the logo further down
     and create more space before the form. */
  margin-top: 12%;    /* was 40px */
  margin-bottom: 23%; /* was 30px */
}


/* Adjust for screens 400px wide or less */
@media (max-width: 400px) {
  .language-bar {
    margin-top: 8%;      /* Smaller top margin */
    margin-bottom: 5px;  /* Optional: reduce bottom margin */
  }
  .logo-container {
    margin-top: 10%;      /* Reduced top margin */
    margin-bottom: 15%;   /* Reduced bottom margin */
    max-width: 300px;     /* Remains the same */
  }
}


.signin-label {
  text-align: left;
  font-size: 16px;
  color: #b0b3b8; /* Light gray text */
  margin-bottom: 10px; /* Space before form starts */
}



/* Light mode overrides (if user’s OS is in light mode) */
@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff; /* Pure white background */
    color: #050505;
  }
  .language-bar {
    color: #606770;
  }
  .close-button {
    color: #606770;
  }
  .close-button:hover {
    background-color: #e4e6eb;
  }
  .input-container input {
    background-color: #fff;
    border: 1px solid #ccd0d5;
    color: #1c1e21;
  }
  .input-container label {
    color: #606770;
  }
  .input-container input:focus + label,
  .input-container input:not(:placeholder-shown) + label {
    color: #1877f2; /* Blue label on focus/filled */
  }
  
  
  .toggle-eye {
    color: #606770;
  }



  /* Forgot password link */
  .forgot-link {
    color: #606770; /* Gray text, as in screenshot */
  }

  /* "Create new account" button: pill outline with blue border/text */
  .create-button {
    background-color: transparent;
    border: 1px solid #1877f2; /* Blue outline */
    color: #1877f2;
  }
  .create-button:hover {
  background-color: transparent ;  /* Fill with blue on hover */
  color: #1877f2;                /* White text on hover */
}
  
  .signin-label {
  color: #606770; /* Light gray text */
}

  /* Meta footer text */
  .meta-footer p {
    color: #606770;
  }
}