#login {
  padding-top: 6rem;
  min-height: 60vh;
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;

  .login-container {
    width: 100%;
    max-width: 450px;
    padding-inline: 1rem;

    .login-header {
      .title {
        h1 {
          margin-bottom: 1rem !important;
        }
      }
    }

    .login-body {
      font-size: 16px;

      #login-form,
      #otp-form,
      #profile-form {
        transition: all 5s;
        -webkit-transition: all 5s;
        -moz-transition: all 5s;
        -ms-transition: all 5s;
        -o-transition: all 5s;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.7em;

        .form-element-container {
          display: flex;
          gap: 0.2em;
          flex-direction: column;
          justify-content: flex-start;

          input {
            /* outline: 1px solid black; */
            /* border: none; */
            /* font-size: .875em; */
            padding: .375em .575em;
            border-radius: var(--input-radius);
            -webkit-border-radius: var(--input-radius);
            -moz-border-radius: var(--input-radius);
            -ms-border-radius: var(--input-radius);
            -o-border-radius: var(--input-radius);

            &:focus-visible,
            &:focus {
              outline: auto;
            }
          }

          label {
            font-size: 0.875em;
            font-weight: 600;
            font-family: 'SunnySpells', sans-serif;
            letter-spacing: 1.4px;
          }

          span {
            &.error {
              font-size: 0.6em;
              color: var(--error-color);
              display: none;
            }
          }
        }

        #editContact {
          svg {
            vertical-align: text-top;
          }
        }

        .otp-container {
          display: flex;
          /* justify-content: space-between; */
          flex-direction: column;

          .otp-style {
            width: 35px;
            height: 35px;
            margin-inline: 0.5em;
            border: 1px solid var(--brand-color-900);
            text-align: center;
            border-color: var(--brand-color-400);
            border-radius: var(--input-radius);
            -webkit-border-radius: var(--input-radius);
            -moz-border-radius: var(--input-radius);
            -ms-border-radius: var(--input-radius);
            -o-border-radius: var(--input-radius);

            &:focus {
              box-shadow: inset 0px 0px 6px -2px var(--brand-color-400);
              border-color: var(--brand-color-400);
              outline-color: var(--brand-color-400);
              outline-width: 0.5px;
            }
          }

          .error {
            font-size: 0.8em;
            color: var(--error-color);
            display: none;
            margin-top: .3em;
          }
        }

        .resend-text {
          text-align: center;
          color: var(--text-gray);
        }

        .resend-link {
          color: var(--brand-color-400);
          text-decoration: none;
          cursor: pointer;
          display: none;
          transition: color 0.3s ease;
        }

        .resend-link:hover {
          color: var(--brand-color-600);
          text-decoration: underline;
        }

        .submit {
          /* font-size: .875em; */
          /* padding: .55em .575em; */
          padding: .375em .575em;
          width: 100%;
          font-weight: bold;
          /* border-radius: var(--input-radius);
          -webkit-border-radius: var(--input-radius);
          -moz-border-radius: var(--input-radius);
          -ms-border-radius: var(--input-radius);
          -o-border-radius: var(--input-radius); */
          border-radius: 8px;
          background-color: var(--brand-color-400);
          color: #ffffff;

          &:disabled {
            background-color: var(--brand-color-100);
          }

          &:hover {
            box-shadow: 0px 0px 5px 0px var(--brand-color-300);
          }
        }
      }
    }
  }
}

.profile-photo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.profile-photo {
  position: relative; /* Required for absolute child positioning */
  width: 90px; /* Match button size */
  height: 90px;
  border-radius: 50%; /* Circular photo */
  overflow: hidden; /* Ensures rounded edges */
}

.profile-photo i {
  position: absolute;
  bottom: 0;
  right: 0;
  color: var(--brand-color-400);
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(237, 206, 191, 0.6); /* Slightly transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
  border-radius: 50%; /* Circular button */
}

.profile-photo-button:hover {
  opacity: 0.8;
}

.profile-photo-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.profile-photo-button svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

.profile-photo:hover .profile-photo-button {
  opacity: 0.8; /* Visible on hover */
}

.profile-photo:hover .profile-photo-button {
  opacity: 1;
}

.profile-photo:hover>.profile-photo-button {
  opacity: 1;
}

/* .lg-lbl{
  font-size: 20px;
} */
@media (max-width:992px) {
  .lg-em-inp {
    font-size: 18px !important;
  }

  .lg-lbl {
    font-size: 18px !important;
  }

  .lg-tc {
    font-size: 14px !important;
  }

  .lg-sbtn {
    padding: .575em .575em !important;
  }

  .lg-gen {
    font-size: 16px !important;
  }
}