@charset "utf-8";

.btnred { text-align: center; background-color: red; padding: 15px; border-radius: 10px; margin: 15px auto; max-width: 500px; font-weight: bolder; font-size: 18px; animation: 2s ease-in-out 0s infinite normal none running scaleAnimation; color: white !important; display: flex !important; justify-content: center !important; }

@keyframes scaleAnimation { 
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.step-list { list-style: none; line-height: 20px; margin-top: 20px; margin-left: 0px !important; padding-left: 0px !important; }

.step-list li { display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgb(236, 0, 0); border-radius: 15px; padding: 10px; }

.step-list li p { margin: 0px !important; }

.number { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgb(236, 0, 0); width: 100%; max-width: 35px; height: 35px; font-weight: bold; }

.comments-container { background: white; border: 1px solid rgb(229, 229, 229); border-radius: 8px; padding: 20px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; margin-bottom: 30px; }

.comments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgb(238, 238, 238); }

.comments-count { font-weight: bold; color: rgb(85, 85, 85); }

.sort-dropdown { font-size: 14px; padding: 4px 8px; border: 1px solid rgb(221, 221, 221); border-radius: 4px; background: white; }

.comment-form { display: flex; gap: 10px; margin-bottom: 20px; padding: 15px; background: rgb(249, 249, 249); border-radius: 8px; }

.comment-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }

.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }

.comment-input-area { flex: 1 1 0%; }

.comment-input { width: 100%; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 6px; resize: none; font-size: 14px; }

.comment-options { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 13px; }

.comment-options label { display: flex; align-items: center; gap: 5px; color: rgb(102, 102, 102); cursor: pointer; }

.comment-options input[type="checkbox"] { margin: 0px; }

.send-btn { background: rgb(66, 103, 178); color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 14px; }

.send-btn:hover { background: rgb(59, 90, 144); }

.comment-list { list-style: none; padding: 0px; margin: 0px; }

.comment-item { padding: 15px 0px; border-bottom: 1px solid rgb(238, 238, 238); position: relative; }

.comment-item:last-child { border-bottom: none; }

.comment-header { display: flex; gap: 10px; margin-bottom: 8px; }

.comment-author { font-weight: bold; color: rgb(29, 33, 41); font-size: 14px; }

.comment-body { margin: 8px 0px 10px; line-height: 1.5; color: rgb(51, 51, 51); }

.comment-actions { display: flex; gap: 12px; font-size: 13px; color: rgb(136, 136, 136); }

.comment-actions a { color: rgb(136, 136, 136); text-decoration: none; font-weight: 500; }

.comment-actions a:hover { text-decoration: underline; }

.comment-time { color: rgb(153, 153, 153); font-size: 12px; margin-left: 8px; }

.comment-reply { margin-left: 50px; padding-left: 15px; border-left: 2px solid rgb(221, 221, 221); margin-top: 10px; padding-top: 10px; }

.comment-reply .comment-header { gap: 8px; }

.comment-reply .comment-avatar { width: 32px; height: 32px; }

.comment-reply .comment-author { font-size: 13px; }

.comment-reply .comment-body { font-size: 13px; }

.comment-reply .comment-actions { font-size: 12px; }

@media (max-width: 600px) {
  .comment-form { flex-direction: column; }
  .comment-item { padding: 12px 0px; }
  .comment-header { gap: 8px; }
  .comment-avatar { width: 36px; height: 36px; }
}

.clickable-avatar { cursor: pointer; position: relative; }

.clickable-avatar:hover { opacity: 0.85; }