/* ===== SOCIAL / COMMUNITY STYLES ===== */

.social-header {
  background: var(--red);
  padding: 22px 20px;
}
.social-header-inner {
  max-width: 860px;
  margin: 0 auto;
}
.social-title {
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}
.social-subtitle {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  margin-top: 5px;
}

.social-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* ===== NEW POST BOX ===== */
.new-post-box {
  background: #fff;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.new-post-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .1s;
}
.new-post-toggle:hover { background: #fafafa; }
.np-avatar {
  width: 36px; height: 36px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.np-prompt { flex: 1; color: #888; font-size: 13px; }
.np-arrow { color: #bbb; font-size: 12px; transition: transform .2s; }
.np-arrow.open { transform: rotate(180deg); }
.new-post-form { border-top: 1px solid var(--border); padding: 16px; }

.post-media-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.media-btn {
  cursor: pointer;
  font-size: 12px;
  color: var(--mid);
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: #fafafa;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .1s;
  white-space: nowrap;
}
.media-btn:hover { background: #f0f0f0; }
.media-url { flex: 1; margin-bottom: 0; }

.post-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.trusted-badge { font-size: 12px; color: var(--pro); font-weight: 600; }
.moderation-note { font-size: 12px; color: #aaa; }

#img-preview img { max-height: 150px; margin-bottom: 8px; border-radius: var(--radius); }

/* ===== LOGIN PROMPT ===== */
.login-prompt {
  background: #fff;
  border: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  margin-bottom: 20px;
}
.login-prompt p { font-size: 13px; color: #666; margin-bottom: 14px; }
.login-prompt .form-btn { display: inline-block; }

/* ===== POST CARDS ===== */
.posts-feed { }

.post-card {
  background: #fff;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  transition: box-shadow .15s;
}
.post-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
}
.post-avatar {
  width: 38px; height: 38px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.post-meta { }
.post-author { font-size: 14px; font-weight: 700; color: var(--black); }
.post-time { font-size: 11px; color: #aaa; }

.post-title {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 16px 0;
  line-height: 1.3;
}

.post-content {
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #222;
  word-break: break-word;
}

.post-image {
  padding: 0 16px 10px;
}
.post-image img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius);
}

.post-video {
  padding: 0 16px 10px;
}

/* ===== POST ACTIONS ===== */
.post-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}
.action-btn {
  background: none;
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: #666;
  transition: background .1s, border-color .1s, color .1s;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 5px;
}
.action-btn:hover { background: #f5f5f5; }
.like-btn.liked { background: #fdecea; border-color: var(--contra); color: var(--contra); }
.delete-btn { margin-left: auto; color: #ccc; }
.delete-btn:hover { background: #fdecea; color: var(--contra); border-color: var(--contra); }

/* ===== COMMENTS ===== */
.comments-section {
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  padding: 12px 16px;
}
.comment {
  padding: 10px 0;
  border-bottom: 1px solid #eeeeee;
  position: relative;
}
.comment:last-of-type { border-bottom: none; }
.comment-author { font-size: 12px; font-weight: 700; color: var(--black); }
.comment-time { font-size: 10px; color: #bbb; margin-left: 8px; }
.comment-text { font-size: 13px; color: #333; margin-top: 5px; line-height: 1.6; word-break: break-word; }
.del-comment-btn {
  position: absolute;
  top: 10px; right: 0;
  background: none;
  border: none;
  color: #ddd;
  font-size: 16px;
  cursor: pointer;
}
.del-comment-btn:hover { color: var(--contra); }

.comment-form {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.comment-form input {
  flex: 1;
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #fff;
  border-radius: var(--radius);
}
.comment-form input:focus { border-color: var(--red); }
.comment-form button {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius);
}
.no-posts { padding: 32px; text-align: center; color: #aaa; background: #fff; border: 1px solid var(--border); }

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 16px 0;
}
.page-btn {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--black);
  transition: background .1s, color .1s;
  border-radius: var(--radius);
}
.page-btn:hover, .page-btn.active { background: var(--red); color: #fff; border-color: var(--red); }