/**
 * Comments CSS - تنسيقات التعليقات
 * Comments Styles
 * 
 * @package OIC_Atif_Al_Abbasi
 * @version 1.0.003
 */

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comments Area
 * ═══════════════════════════════════════════════════════════════════
 */

.comments-area {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-background-secondary);
  border-radius: var(--radius-lg);
}

.comments-title {
  font-size: var(--font-size-h3);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comment List
 * ═══════════════════════════════════════════════════════════════════
 */

.comment-list {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
}

.comment-list .comment {
  margin-bottom: var(--space-4);
}

.comment-list .children {
  list-style: none;
  margin: var(--space-3) 0 0 var(--space-5);
  padding: 0;
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comment Body
 * ═══════════════════════════════════════════════════════════════════
 */

.comment-body {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-background);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base);
}

.comment-body:hover {
  box-shadow: var(--shadow-2);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comment Author Avatar
 * ═══════════════════════════════════════════════════════════════════
 */

.comment-author.vcard {
  display: flex;
  gap: var(--space-2);
  flex: 1;
}

.comment-author .avatar {
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.comment-metadata-wrapper {
  flex: 1;
}

.comment-author .fn {
  font-style: normal;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  display: block;
}

.comment-author .fn a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

.comment-author .fn a:hover {
  color: var(--color-primary);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comment Metadata
 * ═══════════════════════════════════════════════════════════════════
 */

.comment-metadata {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.comment-metadata a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.comment-metadata a:hover {
  color: var(--color-primary);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comment Content
 * ═══════════════════════════════════════════════════════════════════
 */

.comment-content {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

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

.comment-awaiting-moderation {
  display: block;
  padding: var(--space-2);
  margin-top: var(--space-2);
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comment Reply
 * ═══════════════════════════════════════════════════════════════════
 */

.reply {
  margin-top: var(--space-2);
}

.comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 12px;
  font-size: var(--font-size-small);
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

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

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comment Form
 * ═══════════════════════════════════════════════════════════════════
 */

.comment-respond {
  padding: var(--space-4);
  background: var(--color-background);
  border-radius: var(--radius-md);
}

.comment-reply-title {
  font-size: var(--font-size-h4);
  margin: 0 0 var(--space-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#cancel-comment-reply-link {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

#cancel-comment-reply-link:hover {
  color: var(--color-primary);
}

.comment-form {
  display: grid;
  gap: var(--space-3);
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
  margin: 0;
}

.comment-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.comment-form .required {
  color: #e74c3c;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.comment-form textarea {
  min-height: 120px;
  resize: vertical;
}

.submit-comment {
  justify-self: start;
  padding: 12px 32px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.submit-comment:hover {
  background: var(--color-link-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Comments Navigation
 * ═══════════════════════════════════════════════════════════════════
 */

.comment-navigation {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--color-background);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.comment-navigation a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.comment-navigation a:hover {
  color: var(--color-link-hover);
}

.no-comments {
  padding: var(--space-3);
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* نهاية comments.css */