/*  login.css
    Purpose        Styles the dedicated login page:
                     • main “Choose a login method” layout
                     • OAuth buttons (Google, Apple, Facebook)  
                     • email/password form fields  
                     • “OR” divider, T&C / forgot-password links  
                     • success / loading modals and responsive tweaks

    Load order     After the site-wide theme file, e.g.

       <link rel="stylesheet" href="css/theme-base.css">
       <link rel="stylesheet" href="css/login.css">

 
    Last updated   31 Jul 2025
*/


/* Main Content Wrapper */
.main-content-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -75px;
    margin-bottom: 50px;
}

h1 {
    margin-top: -50px;
}

/* Login Options Container */
.login-options-container {
    max-width: 600px;
    margin: 150px auto 0;
    padding: 50px 20px;
    text-align: center;
    flex-grow: 1;
}

.login-options-container h1 {
    font-size: 36px;
    margin-bottom: 55px;
}

/* Form Wrapper to Control Width */
.login-form {
    max-width: 600px;
    margin: 0 auto;
}

/* Input Fields */
.input-field {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #333;
    color: white;
}

body.light-mode .input-field {
    background-color: #f9f9f9;
    color: black;
}

.input-field:focus {
    outline: none;
    border-color: #4ea1d3;
}

/* Login Buttons */
.login-option-button {
    width: 100%; /* Ensure buttons have the same width as input fields */
    padding: 15px;
    font-size: 18px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Google Login Button */
.login-option-button.google {
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
}

.login-option-button.google i {
    margin-right: 10px;
    color: #4285F4;
    font-size: 18px;
    background: linear-gradient(to right, #4285F4 0%, #34A853 25%, #FBBC05 50%, #EA4335 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-option-button.google:hover {
    background-color: #f9f9f9;
}


/* Apple Login Button */
.login-option-button.apple {
    background-color:#333;
    color: #fff;
}

.login-option-button.apple:hover {
    background-color: #2a2a2a;
}

/* Facebook Login Button */
.login-option-button.facebook {
    background-color: #3b5998;
    color: #fff;
}

.login-option-button.facebook i {
    margin-right: 10px;
    color: #FFFFFF; 
}

.login-option-button.facebook:hover {
    background-color: #324b87;
   
}

/* Hover effects */
.login-option-button:hover {
    background-color: #575757;
    transform: scale(1.02);
}


/* Email Login Button */
.login-option-button.email-login {
    background-color: #4ea1d3;
    color: white;
}







.login-option-button.email-login:hover {
    background-color: #3b8bb1;
}

/* 'Or' Divider */
.or-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.or-divider span {
    background-color: #000;
    color: #ccc;
    padding: 0 10px;
    z-index: 1;
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #808080;
    margin: 0 10px;
}

/* Terms and Forgot Password Links */
.terms, .forgot-password {
    font-size: 14px;
    color: #ccc;
    margin-top: 20px;
}

.terms a, .forgot-password a {
    color: #4ea1d3;
    text-decoration: underline;
}

.terms a:hover, .forgot-password a:hover {
    color: #808080;
}

/*PASSWORD VERIFIED MODAL CSS*/


/* Modal Styles */
#customModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place relative to the viewport */
    z-index: 1000; /* Sit on top of other elements */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for element's own size */
    width: 100%; /* Full width for responsiveness */
    max-width: 400px; /* Limit width on larger screens */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add inner spacing */
}

/* Modal Content */
#customModal .modal-content {
    background: #4EA1D3; /* Modal background color */
    color: white; /* Text color */
    padding: 20px; /* Inner padding */
    border-radius: 10px; /* Rounded corners for content */
    text-align: center; /* Center text */
    width: 100%; /* Ensure full width within the modal */
}

/* Modal Content for Light Mode */
body.light-mode #customModal .modal-content {
    background: #4EA1D3; /* Same background for light mode */
}

/* Modal Content for Dark Mode */
body.dark-mode #customModal .modal-content {
    background: #4EA1D3; /* Same background for dark mode */
}

/* OK Button Styles */
#customModal .modal-button {
    background-color: white; /* Button background */
    color: #000; /* Button text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Inner padding */
    margin-top: 20px; /* Space above the button */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    font-size: 16px; /* Button font size */
}

/* Hover effect for OK button */
#customModal .modal-button:hover {
    background-color: #e0e0e0; /* Light gray on hover */
}

/* Ensure button is centered below text */
#customModal .modal-content button {
    display: block; /* Block display for centering */
    margin: 0 auto; /* Center the button horizontally */
}


/*Goolge Signup Modal*/

.loading-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
}
.loading-modal.hidden {
  display: none;
}
.loading-modal-content {
  background-color: #2c3e50;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  color: #fff;
}
/* optional: style the OK button */
.loading-modal-content button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background: #4ea1d3;
  color: #fff;
  cursor: pointer;
}
.loading-modal-content button:hover {
  background: #3a89b2;
}