/* ========================================================================
   BrandKeyPro — Comments Area
   Style tham khảo từ fairytales.love
   ======================================================================== */

.comments-area {
  width: 100%;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
  font-family: var(--font);
}

.comments-area h2,
.comments-area h3 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.comment-form {
  display: grid;
  gap: 1rem;
}

.comment-form p {
  margin: 0;
}

.comment-form-comment textarea {
  width: 100%;
  min-height: 160px;
  padding: .75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font);
  resize: vertical;
}

.comment-form-author input,
.comment-form-email input {
  width: 100%;
  padding: .6rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: center;
  font-size: .875rem;
  color: #6b7280;
}

.comment-form-cookies-consent input {
  margin-right: .5rem;
}

.form-submit {
  margin-top: 1rem;
}

.form-submit input[type="submit"] {
  display: inline-block;
  padding: .75rem 1.5rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.form-submit input[type="submit"]:hover {
  background: var(--primary-dark);
}