/* ========================================================
   MODERN LIGHT SHADOW CARD STYLE (Facebook-ish)
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap');

/* --- 1. GLOBAL CONTAINER (Transparent) --- */
#HCB_comment_box {
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif !important;
  background-color: transparent !important; /* Transparent wrapper */
  color: #1d2129 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#HCB_comment_box * {
  box-sizing: border-box !important;
}

/* Hide Branding & Header */
#HCB_comment_box > h3, 
.home-desc, 
#hcb_settings, 
#hcb_file_label,
#HCB_comment_box .hcb-shadow-t, 
#HCB_comment_box .hcb-shadow-b, 
#HCB_comment_box .hcb-shadow-tl, 
#HCB_comment_box .hcb-shadow-tr, 
#HCB_comment_box .hcb-shadow-bl, 
#HCB_comment_box .hcb-shadow-br, 
#HCB_comment_box .hcb-shadow-clear {
  display: none !important;
}

/* --- 2. HIDE RSS & SUBSCRIBE --- */
#HCB_comment_box #hcb_subscribe,
#HCB_comment_box .hcb-icon[alt="rss"],
#HCB_comment_box a[href*="rss"] {
  display: none !important;
}

/* --- 3. COMMENT FORM (Visible & Styled) --- */
/* Ensure the wrapper is visible */
#HCB_comment_box .hcb-shadow-m {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#HCB_comment_box #HCB_comment_form_box {
    background: transparent !important;
    padding: 0px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 15px !important;
    border: none !important;
}

/* Inputs */
#HCB_comment_box textarea,
#HCB_comment_box #hcb_form_name {
  width: 100% !important;
  border: 1px solid #dddfe2 !important;
  border-radius: 4px !important;
  padding: 10px !important;
  font-size: 14px !important;
  background: #fdfdfd !important;
  font-family: inherit !important;
  margin-bottom: 10px !important;
  outline: none !important;
  transition: border-color 0.2s;
}

#HCB_comment_box form {
  margin-bottom: 0!Important;
}

#HCB_comment_box textarea:focus,
#HCB_comment_box #hcb_form_name:focus {
  border-color: #1877f2 !important;
  background: #fff !important;
}

#HCB_comment_box textarea {
  min-height: 80px !important;
  resize: vertical !important;
}

/* Buttons */
#HCB_comment_box .btn {
  background-color: #1877f2 !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  margin-right: 8px !important;
}

#HCB_comment_box .btn:hover {
  background-color: #166fe5 !important;
}

#HCB_comment_box .btn-secondary {
  background-color: #e4e6eb !important;
  color: #050505 !important;
}

/* --- 4. COMMENT CARDS --- */
#HCB_comment_box #comments_list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#HCB_comment_box .comment {
  position: relative !important;
  background: #f9f9f9 !important; /* White Card Background */
  border-radius: 8px !important;
  padding: 16px !important; /* Left padding for Avatar */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Light Shadow */
  border: 1px solid #f0f0f0 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

/* --- 5. PSEUDO-RANDOM AVATAR COLORS --- */
#HCB_comment_box .gravatar {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
}

#HCB_comment_box .gravatar img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important; /* Round avatars */
  padding: 2px !important; /* Space for the colored border */
  background: #fff !important;
  border: 2px solid #ddd !important; /* Default fallback */
}

/* Cycle through colors for borders to mimic randomness */
#HCB_comment_box .comment:nth-child(5n+1) .gravatar img { border-color: #FF5733 !important; }
#HCB_comment_box .comment:nth-child(5n+2) .gravatar img { border-color: #33FF57 !important; }
#HCB_comment_box .comment:nth-child(5n+3) .gravatar img { border-color: #3357FF !important; }
#HCB_comment_box .comment:nth-child(5n+4) .gravatar img { border-color: #FF33A8 !important; }
#HCB_comment_box .comment:nth-child(5n+5) .gravatar img { border-color: #FFC300 !important; }

/* --- 6. TEXT CONTENT --- */
#HCB_comment_box .comment blockquote {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #1c1e21 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* Author Name */
#HCB_comment_box .author-name {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #050505 !important;
  margin-bottom: 4px !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Date */
#HCB_comment_box .date {
  font-size: 12px !important;
  color: #65676b !important;
  margin-left: 6px !important;
}

/* --- 7. TOOLBAR (Like/Reply) --- */
#HCB_comment_box .hcb-comment-tb {
  margin: 8px 0 0 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid #f0f0f0 !important;
  font-size: 13px !important;
}

#HCB_comment_box .hcb-comment-tb button {
  background: none !important;
  border: none !important;
  color: #65676b !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 13px !important;
}

#HCB_comment_box .hcb-comment-tb button:hover {
  color: #1877f2 !important;
  text-decoration: none !important;
}

/* --- 8. NESTED REPLIES --- */
#HCB_comment_box [id^="replies_"] {
  margin-top: 12px !important;
  margin-left: -50px !important; /* Pull back slightly to align */
  padding-left: 0 !important;
}

#HCB_comment_box [id^="replies_"] .comment {
  background: #f7f8fa !important; /* Slightly darker card for replies */
  box-shadow: none !important;
  border: 1px solid #e5e5e5 !important;
  margin-left: 50px !important; /* Indent */
  padding-left: 60px !important; /* Adjust for smaller avatar */
}

#HCB_comment_box [id^="replies_"] .gravatar img {
  width: 32px !important;
  height: 32px !important;
}

/* --- 9. UTILS --- */
#HCB_comment_box .hcb-err {
  background: #fff1f0 !important;
  border: 1px solid #ffa39e !important;
  color: #cf1322 !important;
  padding: 8px !important;
  border-radius: 6px !important;
  margin-bottom: 12px !important;
}

#HCB_comment_box .hcb-link {
  padding: 2px !important;
}

#HCB_comment_box #hcb_msg {
    margin-bottom: 15px !important;
}

#HCB_comment_box .comment .likes {
    position: absolute;
    top: 10px !important;
    right: 10px !important;
    display: flex !important;
    gap: 5px;
    align-items: center;
    font-size: 13px;
}

#HCB_comment_box .comment .likes img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) saturate(100%) invert(39%) sepia(57%) saturate(2878%) hue-rotate(198deg) brightness(99%) contrast(101%);
}

#HCB_comment_box #hcb_form .btn, #HCB_comment_box #HCB_comment_form_box .btn {
    width: 100% !important;
    padding: 12px !important;
}