/* ═══════════════════════════════════════════════════════════════
   cRyPtO sMaRt — BLOG COMMENTS STYLES  (System 2)
   Matches phase3/site aesthetic — gold on dark, Playfair + Outfit.
   All selectors prefixed .cs-cmt-* to avoid colliding with post CSS.
   ═══════════════════════════════════════════════════════════════ */

.cs-comments-wrap {
  max-width: 820px;
  margin: 60px auto 40px;
  padding: 0 25px;
  font-family: 'Outfit', sans-serif;
  color: #e8e0d0;
}

.cs-comments-head { border-top: 1px solid rgba(201,168,76,0.18); padding-top: 40px; margin-bottom: 28px; }
.cs-comments-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 700;
  color: #f8f4ec; margin: 0 0 4px; letter-spacing: 0.5px;
}
.cs-comments-title .cs-cmt-count { color: #c9a84c; font-size: 1.1rem; font-weight: 400; margin-left: 6px; }
.cs-comments-sub { font-size: 0.85rem; color: #6b6353; letter-spacing: 1px; }

/* ── Form ────────────────────────────────────────────────── */
.cs-cmt-form {
  background: #0a0a0a;
  border: 1px solid rgba(201,168,76,0.12);
  padding: 24px 26px 20px;
  margin-bottom: 36px;
}
.cs-cmt-form-reply {
  margin: 14px 0 8px 52px;
  padding: 18px 20px 14px;
  border-left: 2px solid rgba(201,168,76,0.3);
}
@media (max-width: 520px) {
  .cs-cmt-form-reply { margin-left: 0; }
}

.cs-cmt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .cs-cmt-row { grid-template-columns: 1fr; } }

.cs-cmt-field { margin-bottom: 14px; }
.cs-cmt-field label {
  display: block; font-size: 0.65rem; color: #6b6353;
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px;
}
.cs-cmt-field label .cs-cmt-hint { text-transform: none; letter-spacing: 0; color: #4a4336; }

.cs-cmt-form input[type=text],
.cs-cmt-form input[type=email],
.cs-cmt-form textarea {
  width: 100%;
  background: #050505;
  border: 1px solid rgba(201,168,76,0.15);
  color: #e8e0d0;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
  line-height: 1.5;
  resize: vertical;
}
.cs-cmt-form input:focus,
.cs-cmt-form textarea:focus {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
}
.cs-cmt-form textarea { min-height: 90px; font-family: 'Outfit', sans-serif; }

.cs-cmt-meta { text-align: right; font-size: 0.65rem; color: #6b6353; margin-top: 4px; letter-spacing: 1px; }

/* Honeypot — invisible to humans */
.cs-cmt-hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* Consent checkbox */
.cs-cmt-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: #a89e8a;
  margin: 8px 0 16px; cursor: pointer;
}
.cs-cmt-check input[type=checkbox] {
  accent-color: #c9a84c; width: 14px; height: 14px;
}

/* Buttons */
.cs-cmt-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cs-cmt-btn {
  background: #c9a84c; color: #050505;
  border: none; padding: 12px 28px;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem;
  font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; transition: background 0.25s, box-shadow 0.25s;
}
.cs-cmt-btn:hover:not(:disabled) {
  background: #e8d48b;
  box-shadow: 0 4px 16px rgba(201,168,76,0.25);
}
.cs-cmt-btn:disabled { opacity: 0.5; cursor: wait; }
.cs-cmt-btn-sm { padding: 9px 20px; font-size: 0.65rem; }

.cs-cmt-btn-cancel {
  background: transparent; color: #6b6353;
  border: 1px solid rgba(201,168,76,0.15);
  padding: 9px 18px;
  font-family: inherit; font-size: 0.65rem;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.cs-cmt-btn-cancel:hover { color: #c9a84c; border-color: #c9a84c; }

.cs-cmt-msg { font-size: 0.78rem; letter-spacing: 0.5px; min-height: 20px; }
.cs-cmt-msg.err { color: #cc3344; }
.cs-cmt-msg.ok  { color: #22aa55; }

/* ── Comments list ───────────────────────────────────────── */
.cs-cmt-list { margin-top: 20px; }
.cs-cmt-empty, .cs-cmt-loading {
  padding: 30px 20px; text-align: center;
  color: #6b6353; font-size: 0.85rem; letter-spacing: 1px;
  border: 1px dashed rgba(201,168,76,0.12);
}

.cs-cmt-item {
  background: transparent;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  padding: 22px 0 16px;
}
.cs-cmt-item:first-of-type { padding-top: 0; }
.cs-cmt-item:last-of-type { border-bottom: none; }

.cs-cmt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.cs-cmt-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a08030, #d4af37, #a08030);
  color: #050505;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
}
.cs-cmt-avatar.sm { width: 30px; height: 30px; font-size: 0.85rem; }

.cs-cmt-meta-l { line-height: 1.3; }
.cs-cmt-name { color: #e8d48b; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.3px; }
.cs-cmt-date { color: #6b6353; font-size: 0.7rem; letter-spacing: 1px; margin-top: 2px; }

.cs-cmt-body {
  color: #e8e0d0; line-height: 1.7; font-size: 0.95rem;
  padding-left: 50px;
  word-wrap: break-word;
}
.cs-cmt-reply .cs-cmt-body { padding-left: 42px; font-size: 0.88rem; }

.cs-cmt-tools { padding-left: 50px; margin-top: 10px; }
.cs-cmt-reply-btn {
  background: transparent; border: none;
  color: #6b6353; font-family: inherit; font-size: 0.7rem;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  transition: color 0.25s;
  padding: 0;
}
.cs-cmt-reply-btn:hover { color: #c9a84c; }

.cs-cmt-reply-slot { padding-left: 50px; }

/* Nested replies */
.cs-cmt-replies {
  margin-top: 18px;
  padding-left: 50px;
  border-left: 2px solid rgba(201,168,76,0.08);
  margin-left: 18px;
}
.cs-cmt-reply {
  padding: 14px 0;
  border-bottom: 1px solid rgba(201,168,76,0.05);
}
.cs-cmt-reply:last-child { border-bottom: none; }

@media (max-width: 520px) {
  .cs-comments-wrap { padding: 0 15px; margin-top: 40px; }
  .cs-cmt-form { padding: 18px 16px 14px; }
  .cs-cmt-body, .cs-cmt-tools, .cs-cmt-reply-slot { padding-left: 0; }
  .cs-cmt-head { margin-bottom: 8px; }
  .cs-cmt-replies { padding-left: 20px; margin-left: 10px; }
  .cs-cmt-reply .cs-cmt-body { padding-left: 0; }
}