/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/* Main Container */
.membership-login {
  display: flex;
  justify-content: center; /* Center content vertically */
  width: 100% !important;
}

/* Reset Page */
.login-container + section {
  max-width: 500px;
}

/* Left Section - Logo */
.logo-container {
  margin: 20px;
}

.logo-container img {
  max-width: 150px; /* Limits the width of the logo */
  height: auto; /* Maintains aspect ratio */
}

.right-section img {
  object-fit: cover;
  min-height: 100vh;
  max-width: 100%;
}

/* Left Section - Login */
.login-container {
  flex: 1;
}

#retry-message {
  flex-direction: column;
  padding-top: 32px;
}

.form-wrapper--membership-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  position: relative;
}

/* Styling for Login Fields */
.membership-login h1 {
  font-size: 30px;
  margin-top: 80px;
  margin-bottom: 10px;
  text-align: center;
}

.maintenance-heading {
  background-color: #fff7f0;   /* soft, warm background */
  border: 2px solid #ffb366;   /* light orange border */
  color: #444;                 /* neutral text color */
  padding: 20px;
  border-radius: 12px;         /* rounded corners */
  text-align: center;
  max-width: 600px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05); /* subtle shadow */
}

.maintenance-heading h2 {
  margin: 0 0 10px 0;
  font-size: 22px;
  color: #e67817;              /* STORAGE24 warm orange */
  font-weight: bold;
  font-family: 'Outfit';
}

.maintenance-heading p {
  font-family: 'Outfit';
  font-size: 16px;
  line-height: 1.5;
  color: #555;                 /* softer gray for readability */
}


#hs_cos_wrapper_login_heading_ p,
#hs-login-self-registration-link {
  display: none;
}

#hs_cos_wrapper_login_form {
  padding-top: 0px;
  width: 100%;
}
.hs-form-field {
  font-size: 16px;
}

#hs-membership-form {
    width: 100%;
}

/* Show password text */
.hs-login-widget-show-password {
  font-size: 12px;
}

.form-wrapper input {
  padding: 16px;
  margin-bottom: 32px;
  height: 56px; /* Set input field height */
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  transition: box-shadow 0.3s ease-in-out;
  color: #333;
}

.form-wrapper input::placeholder {
  color: #888; /* Set the placeholder text color */
  font-style: italic; /* Optional: change the placeholder style */
}

/* Add a stronger shadow when input is focused */
.form-wrapper input:focus {
  outline: none;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

label[for=hs-login-widget-remember] {
  font-size: 16px;
}

#hs_login_reset {
  font-size: 16px; 
}

/* Login submit button */
.actions {
  display: flex;
  align-items: center;
  justify-content: center;

}

.actions .hs-button {
  width: 70%;
  padding: 12px;
  background-color: #FF713B;
  color: white;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 16px;
  text-transform: none;
  margin-top: 32px;
 
}
/*
.hs-membership-loader .actions .hs-button {
 background-color: #ede;
}

.actions .hs-button:hover {
 transform: scale(1.05); /* Scales the button by 5% */
}
*/

#hs-membership-google-submit {
  width: 100%;
}

/* Header image */
.login-container .logo-container {
  display: flex;
  justify-content: center;
}

/* Right Section - Image */
.right-section {
  background: url('/https://20856022.fs1.hubspotusercontent-na1.net/hubfs/20856022/box-louer-box-location-depot-garage-garde_meuble-location-entreposage-Stockage-Stockage24-s%C3%A9curit%C3%A9-cam%C3%A9ra-acc%C3%A8s-local_company-cellule_de_stockage-locaux_activit%C3%A9s-sport-1.jpg') no-repeat center center/cover;
  position: center;
  background-size: cover;  /* Make the image cover the whole div */
  flex: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .membership-login {
    flex-direction: column;
  }

  .form-wrapper--membership-login,
  .right-section {
    width: 100%;
  }

  .right-section {
    display: none;
  }
  
  #hs_cos_wrapper_login_form {
    padding: 0;
  }
}

/* Register - set password */
/* Show password text */
.section-wrapper {
  padding: 16px;
  margin: 0 auto;
}

.membership-login.section-wrapper {
  padding: 0px;
}

#hs_cos_wrapper_register_heading {
  text-align: center;
  margin-bottom: 50px;
}

#hs_cos_wrapper_register_heading h1 {
  font-size: 30px;
  margin-top: 80px;
}

#hs_cos_wrapper_register_heading p {
  font-size: 16px;
  margin-bottom: 10px;
}

#hs_membership_form {
  padding-top: 0px;
}

.hs-register-widget-show-password {
  font-size: 12px;
}

.no-list {
  margin: 0;
  font-size: 12px;
}

/* Reset password request - email */
#hs_cos_wrapper_password_reset_request_heading {
  text-align: center;
  margin-bottom: 50px;
}

#hs_cos_wrapper_password_reset_request_heading h1 {
  font-size: 30px;
  margin-top: 80px;
}

#hs_cos_wrapper_password_reset_request_heading p {
  font-size: 16px;
  margin-bottom: 10px;
}

#hs_cos_wrapper_sign_in_link_ {
  font-size: 16px;
  text-align: center;
}

#hs_cos_wrapper_reset_password_confirmation {
  text-align: center;
  margin-bottom: 50px;
}

#hs_cos_wrapper_reset_password_confirmation h1 {
  font-size: 30px;
  margin-top: 80px;
}

#hs_cos_wrapper_reset_password_confirmation p {
  font-size: 16px;
  margin-bottom: 10px;
}

/* Send another reset email button */
#hs_cos_wrapper_return_button {
  display: flex;
  align-items: center;
  justify-content: center;
}

#hs-button_return_button {
  width: 70%;
  padding: 12px;
  background-color: #FF713B;
  color: white;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 16px;
  text-transform: none;
  margin-top: 32px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hs-button_return_button:hover {
 transform: scale(1.05); /* Scales the button by 5% */
}

/* Reset password - set new password */
#hs_cos_wrapper_password_reset_heading {
  text-align: center;
  margin-bottom: 50px;
}

#hs_cos_wrapper_password_reset_heading h1 {
  font-size: 30px;
  margin-top: 80px;
}

#hs_cos_wrapper_password_reset_heading p {
  font-size: 16px;
  margin-bottom: 10px;
}

.hs-reset-widget-show-password {
  font-size: 12px;
}

/* Verify regiestration */
#hs_cos_wrapper_verify_registration_heading {
  text-align: center;
  margin-bottom: 50px;
}

#hs_cos_wrapper_verify_registration_heading h1 {
  font-size: 30px;
  margin-top: 80px;
}

#hs_cos_wrapper_verify_registration_description p {
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}

/* Registration confirmation*/
#hs_cos_wrapper_registration_confirmation_heading h1 {
  font-size: 30px;
  margin-top: 80px;
}

#hs_cos_wrapper_registration_confirmation_description p {
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}

/* Login button after email confirmation */
.hs-button {
  width: 70%;
  padding: 12px;
  background-color: #FF713B;
  color: white;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 16px;
  text-transform: none;
  margin-top: 32px;
}

.hs-button:hover {
 transform: scale(1.05); /* Scales the button by 5% */
}