.elementor-160 .elementor-element.elementor-element-88a0c43{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-160 .elementor-element.elementor-element-75dee4b{--divider-border-style:solid;--divider-color:#6F6F6F;--divider-border-width:1px;}.elementor-160 .elementor-element.elementor-element-75dee4b .elementor-divider-separator{width:87%;margin:0 auto;margin-center:0;}.elementor-160 .elementor-element.elementor-element-75dee4b .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-160 .elementor-element.elementor-element-6610cf6{--display:flex;}@media(min-width:768px){.elementor-160 .elementor-element.elementor-element-88a0c43{--content-width:350px;}}/* Start custom CSS for html, class: .elementor-element-4b1f0a1 */.google-login-btn {
  display: flex;
  align-items: center;
  border: 1.5px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  padding: 15px 22px 15px 20px;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s;
  box-shadow: none;
  outline: none;
  width: 100%; /* <-- This makes the button full width */
}

.google-login-btn:hover,
.google-login-btn:focus {
  border-color: #222;
  background: #fff;
  color: #222; /* <-- ensures text is visible on hover/focus */
}

.google-login-icon {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.google-login-text {
  display: inline-block;
  vertical-align: middle;
  color: inherit; /* <-- ensures it uses the button's color property */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2db5fec *//* ADD THESE NEW STYLES for the error messages */
.my-signup-error-container {
  border: 1.5px solid #d32f2f;
  border-radius: 8px;
  padding: 12px 16px;
  background-color: #ffebee; /* Light red background */
  color: #d32f2f;
  margin-bottom: 20px; /* Space between errors and form */
  font-size: 14px;
}

.my-signup-error-container div {
  margin-bottom: 5px;
}

.my-signup-error-container div:last-child {
  margin-bottom: 0;
}


/* EXISTING CSS (with minor adjustments as discussed) */
.my-signup-form {
  width: 100%;
  margin: 20px auto;
  font-family: sans-serif;
}

.my-form-group {
  position: relative;
  margin-bottom: 20px;
}

.my-form-group input {
  width: 100%;
  padding: 18px 12px 15px 12px; /* Adjusted padding to remove right padding by default */
  font-size: 16px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  outline: none;
  background: none;
  transition: border-color 0.2s;
}

/* Specific padding for password field to accommodate eye icon */
.my-form-group input[type="password"] {
  padding-right: 40px;
}

.my-form-group input:focus,
.my-form-group input.focus {
  border-color: #000;
}

.my-form-group input.invalid {
  border-color: #d32f2f !important;
}

.my-form-group input::placeholder {
  color: transparent;
}

.my-form-group label {
  position: absolute;
  left: 12px;
  top: 21px;
  color: #888;
  font-size: 16px;
  pointer-events: none;
  background: transparent;
  transition: 0.2s;
  padding: 0 4px;
  z-index: 1;
}

/* Floating label: black on focus or when input has content */
.my-form-group input:focus + label,
.my-form-group input.focus + label,
.my-form-group input:not(:placeholder-shown) + label {
  top: -10px;
  left: 8px;
  font-size: 13px;
  background: #fff;
  color: #000; /* Ensure this is black for both email and password on focus/float */
}

/* Red label for invalid password, always takes priority */
.my-form-group input.invalid + label,
.my-form-group label.invalid-label {
  color: #d32f2f !important;
}

/* Black label for email on focus/float */
.my-form-group label.focus-label {
  color: #000 !important; /* Ensure email label turns black and stays black if valid */
}


.my-toggle-password {
  position: absolute;
  right: 17px;
  top: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 22px;
  width: 20px;
  justify-content: center;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
  border: none;
  padding: 0;
}

.my-toggle-password svg {
  display: block;
  pointer-events: none;
}

.password-requirements {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 15px;
  color: #222;
}

.password-requirements ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.password-requirements li {
  margin-bottom: 4px;
  list-style: disc;
}

/* Only show checkmark when needed, don't reserve space */
.password-requirements .pw-check {
  color: green;
  font-weight: bold;
  margin-right: 4px;
  display: none;
}

/* Continue button styles */
.my-continue-btn {
  width: 100%;
  padding: 16px 0;
  background: #181818;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 24px;
  transition: background 0.2s;
}

.my-continue-btn:hover,
.my-continue-btn:focus {
  background: #333;
  outline: none;
}

.my-signup-form {
  width: 100%;
  margin: 20px auto;
  font-family: sans-serif;
}

.my-form-group {
  position: relative;
  margin-bottom: 20px;
}

.my-form-group input {
  width: 100%;
  padding: 18px 40px 15px 12px;
  font-size: 16px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  outline: none;
  background: none;
  transition: border-color 0.2s;
}

.my-form-group input:focus,
.my-form-group input.focus {
  border-color: #000;
}

.my-form-group input.invalid {
  border-color: #d32f2f !important;
}

.my-form-group input::placeholder {
  color: transparent;
}

.my-form-group label {
  position: absolute;
  left: 12px;
  top: 21px;
  color: #888;
  font-size: 16px;
  pointer-events: none;
  background: transparent;
  transition: 0.2s;
  padding: 0 4px;
  z-index: 1;
}

/* Floating label: black on focus or when input has content */
.my-form-group input:focus + label,
.my-form-group input.focus + label,
.my-form-group input:not(:placeholder-shown) + label {
  top: -10px;
  left: 8px;
  font-size: 13px;
  background: #fff;
  color: #000;
}

/* Red label for invalid password, always takes priority */
.my-form-group input.invalid + label,
.my-form-group label.invalid-label {
  color: #d32f2f !important;
}

.my-toggle-password {
  position: absolute;
  right: 17px;
  top: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 22px;
  width: 20px;
  justify-content: center;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
  border: none;
  padding: 0;
}

.my-toggle-password svg {
  display: block;
  pointer-events: none;
}

.password-requirements {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 15px;
  color: #222;
}

.password-requirements ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.password-requirements li {
  margin-bottom: 4px;
  list-style: disc;
}

/* Only show checkmark when needed, don't reserve space */
.password-requirements .pw-check {
  color: green;
  font-weight: bold;
  margin-right: 4px;
  display: none;
}

/* Continue button styles */
.my-continue-btn {
  width: 100%;
  padding: 16px 0;
  background: #181818;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 24px;
  transition: background 0.2s;
}

.my-continue-btn:hover,
.my-continue-btn:focus {
  background: #333;
  outline: none;
}/* End custom CSS */