#comments-section {
  background-color: #1a1a1a;
  font-family: 'Inter', sans-serif;
}

.login-box{
  background: linear-gradient(90deg,rgba(113, 51, 125, 1) 0%, rgba(94, 65, 133, 1) 50%, rgba(87, 73, 158, 1) 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  border-radius: 0.44rem 3.13rem 0.44rem 3.13rem;
  width: 25%;
  max-width: 21.88rem;
  text-align: center;
  padding-top: 1.88rem;
  font-weight: bold;
}

.login_btn_box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0.94rem auto 1.25rem auto;
  background: #fff;
  border-radius: 0.44rem 3.13rem 0.44rem 3.13rem;
  padding: 1.25rem;
}

.login-message{
  background: #fff;
  width: 100%;
  margin: 1.25rem auto 0 auto;
  color: #6e4f6f;
  padding: 0.63rem 0.94rem;
  font-size: 1.44rem;
  min-width: 11.25rem;
}

.login_btn{
  border-radius: 0.44rem 1.88rem 0.44rem 0.44rem !important;
  margin-bottom: 0.63rem;
}

.register_btn{
  border-radius: 0.44rem 0.44rem 0.44rem 1.88rem !important;
}

.login_btn, .register_btn{
  background: #6e4f6f; 
  color: #fff !important;
  font-size: 1rem;
  padding: 0.94rem;
  min-width: 11.25rem;
  transition: background-color 0.1s ease;
}

.login_btn:hover,
.register_btn:hover{
  background: #816c82;
}

#comments-section h2,
#comments-section h3,
.comment strong{
  color: #6a506d; 
  margin-bottom: 1rem;
  font-size: 1.44rem;
}

.comment {
  display: flex;
  padding: 0.19rem 0.75rem;
  margin-bottom: 0.63rem;
  border-radius: 0.44rem;
  background: #2f2f2f;
  position: relative;
}

.comment-user-info{
  display: flex;
  flex-direction: column;
  max-width: 15%;
  margin: 0.63rem 0;
}

.comment-user-info img{
  width: 3.75rem;
  border-radius: 100px;
  margin-bottom: 0.31rem;
}

.comment-user {
  color: #fff;
  background: #4b4b4b;
  font-weight: bold;
  padding: 0.31rem 0.63rem;
  height: fit-content;
  border-radius: 0.44rem;
  text-align: center;
  margin: 0.25rem 0;
}

.no-cmt-message{
  background: #2f2f2f;
  width: fit-content;
  padding: 1.25rem;
  border-radius: 0.44rem;
  font-weight: 600;
}

.comment-content{
  overflow-wrap: break-word; 
  word-break: break-word; 
  margin: 0.63rem 1.25rem 0.63rem 1.56rem;
}

.comment-content-text{
  margin: 0.63rem auto;
}

.comment-section-box{
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  margin: auto;
  max-width: 120rem;
}

.commentbox, .comment-submit-box{
  padding: 1.25rem;
}

.commentbox{
  width: 70%;
}

.comment-submit-box{
  background: #2f2f2f;
}

.profile-info{
  display: flex;
  flex-direction: row;
  margin: 1.25rem 0;
}

.profile-info p{
  font-weight: bold;
  margin: 0.63rem 0.94rem 0 0.94rem;
  background: #fff;
  color: #6f4f6e;
  padding: 0.31rem 0.63rem;
  height: fit-content;
  border-radius: 0.44rem;
  align-content: end;
}

.profile-info img{
  width: 3.75rem;
  border-radius: 100px;
}

.comment-date{
  color: #ccc;
}

#comments-section input[type="text"],
#comments-section input[type="email"],
#comments-section textarea {
  width: 100%;
  padding: 0.47rem;
  margin-bottom: 1rem;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  border-radius: 0.44rem;
  background-color: #000;
  color: #f1f1f1;
}

#comments-section textarea{
  height: 11.88rem;
  resize: none;
}

.comment-submit-box button[type="submit"],
button.delete-btn,
.view-more-btn {
  color: #fff;
  background-color: #6e4f6f; 
  padding: 0.68rem 0.75rem;
  border: none;
  border-radius: 0.44rem;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.view-more-btn{
  align-content: center;
  margin: 0 0.63rem;
}

button.delete-btn{
  background: #ae533e !important;
}

button.delete-btn:hover{
  background: #b36b5b !important;
}

.comment-submit-box button[type="submit"]:hover,
button.delete-btn:hover {
  background-color: #816c82; 
}

.comment-action-box{
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  bottom: 1%;
  right: 0.2%;
  margin: 0.63rem 0.94rem;
}

.like-form,
.like-display{
  background: #4b4b4b;
  padding: 0.31rem 0.5rem;
  border-radius: 0.44rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}

.like-form.liked{
  background: #6e4f6f;
}

.like-form .like-btn,
.like-display span{
  font-size: 1.56rem;
  margin-left: 0.25rem;
}

.like-form button{
  background: none;
  border: none;
}

.like-form .like-btn{
  color: #000;
}

.like-form .like-btn:hover,
.like-form .like-btn.liked,
.like-display span{
  color: #ac89ca;
}

.like-form .like-btn.liked:hover{
  color: #000;
}

.delete-btn {
  background-color: #9e6abb;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.44rem !important;
  cursor: pointer;
  font-size: 0.8rem;
  margin-right: 0.63rem;
  height: 100%;
  transition: background-color 0.3s ease;
}

.comment-action-box{
  display: none;
}

.comment:hover .comment-action-box{
  display: flex;
}

@media (max-width: 87.5rem) {
  .login-box{ width: 30%; max-width:none; }
  .commentbox{ width: 65%; }
  .comment-submit-box{ width: 35%; }
}

@media (max-width: 56.25rem) {
 .comment-section-box{ flex-direction: column; }
 .commentbox,
 .comment-submit-box{ width: 100%; }
 .login-box{ width: 100% !important; border-radius: 0 !important; }
}

@media (max-width: 50rem) {
.comment .delete-btn{ display: inline-block; }
}