/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* =========================
   Comments Wrapper
========================= */
#comments {
  margin-top: 30px;
}

/* =========================
   Comments Title
========================= */
#comments .title-comments {
  font-size: 16px;
  font-weight: 700;
  color: var( --e-global-color-primary );
  border-bottom: 2px solid currentColor;
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 20px;
}

/* =========================
   Comment List
========================= */
.comments-area .comment-list,
.comments-area .comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comments-area .comment {
  margin-bottom: 18px;
}

/* =========================
   Comment Body
========================= */
.comments-area .comment-body {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
  transition: box-shadow .25s ease, transform .25s ease;
}

.comments-area .comment-body:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* =========================
   Comment Meta
========================= */
.comments-area .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.comments-area .comment-author {
  font-weight: 600;
  color: #333;
}

.comments-area .comment-author .fn {
  font-weight: inherit;
}

.comments-area .comment-author .says {
  font-weight: 400;
  color: #777;
}

.comments-area .comment-metadata {
  font-size: 13px;
  color: #777;
}

.comments-area .comment-metadata a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   Comment Content
========================= */
.comments-area .comment-content {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

.comments-area .comment-content p:last-child {
  margin-bottom: 0;
}

/* =========================
   Reply Button
========================= */
.comments-area .reply {
  margin-top: 12px;
}

.comments-area .comment-reply-link {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var( --e-global-color-primary );
  color: var( --e-global-color-primary );
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.comments-area .comment-reply-link:hover {
  background-color: var( --e-global-color-primary );
  color: #fff;
}

/* =========================
   Nested Comments
========================= */
.comments-area .comment-list .children {
  margin-top: 14px;
  margin-right: 30px;
  padding-right: 18px;
  border-right: 2px solid rgba(193, 79, 79, 0.2);
}

.comments-area .comment-list .children .comment-body {
  background: #fafafa;
  border-color: #f0f0f0;
}

/* =========================
   Comment Form
========================= */
.comments-area #respond {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,.04);
}

.comments-area #reply-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  transition: border-color .2s ease;
}

.comments-area .comment-form input:focus,
.comments-area .comment-form textarea:focus {
  border-color: var(--e-global-color-primary);
  outline: none;
}

.comments-area .comment-form .logged-in-as,
.comments-area .comment-form .required-field-message {
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}

/* =========================
   Submit Button
========================= */
.comments-area .comment-form .submit {
  background-color: var(--e-global-color-primary);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .2s ease;
}

.comments-area .comment-form .submit:hover {
  opacity: .85;
}

/* =========================
   Responsive
========================= */
@media (max-width: 600px) {
  .comments-area .comment-body {
    padding: 14px;
  }

  .comments-area .comment-list .children {
    margin-right: 18px;
    padding-right: 14px;
  }
}