:root {
  --comment-head-summary-bg: rgba(255,255,255,0.05);
  --comment-head-summary-text: green;
  --comment-color-primary: red;
  --comment-color-primary-dark: #009999;
  --comment-color-bg-light: rgba(255,255,255,0.05);
  --comment-color-bg-dark: rgba(255,255,255,0.04);
  --comment-color-border: rgba(255,255,255,0.15);
  --comment-color-border-light: rgba(255,255,255,0.12);
  --comment-color-text: #f0f0f0;
  --comment-color-muted: #aaa;
  --comment-color-input-bg: rgba(255,255,255,0.08);
  --comment-color-input-border: rgba(255,255,255,0.2);
  --comment-color-input-focus: rgba(255,255,255,0.12);
  --comment-color-button: #00bbbb;
  --comment-color-button-hover: var(--comment-color-primary-dark);
}











/* ====== COMMENT LIST & WRAPPER ====== */
/* ====== COMMENT LIST & WRAPPER ====== */

#comments {
  padding: 10px;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comment-list li.comment {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.comment-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: var(--comment-color-bg-light);
  border: 1px solid var(--comment-color-border);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: background 0.3s ease;
  flex-direction: row;
}

.comment-wrapper.by-post-author {
  border-right: 4px solid var(--comment-color-primary);
}

.comment-avatar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.comment-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--comment-color-primary);
  box-shadow: 0 0 0 3px rgba(0,255,255,0.3);
}

.comment-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.comment-author {
  font-weight: 700;
  font-size: 16px;
  color: var(--comment-color-primary);
}

.comment-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--comment-color-text);
  word-break: break-word;
  white-space: pre-line;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.comment-time {
  font-size: 13px;
  color: var(--comment-color-muted);
  margin-inline-start: auto;
}

.comment-reply-link {
  background: var(--comment-color-button);
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease;
  text-decoration: none;
}

.comment-reply-link:hover {
  background: var(--comment-color-button-hover);
}














/* ====================================================================================  TOP ====== */

#comments .comment-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#comments .comment-summary .comment-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 10px;
  border-radius: 16px;
  background: var(--comment-head-summary-bg);
}

#comments .comment-summary .comment-stat i {
  font-size: 30px;
  margin-bottom: 5px;
}


#comments .comment-summary .comment-stat p {
  margin-bottom: 5px;
}
#comments .comment-summary .comment-stat span {
  font-family: var(--h1-font-family,inherit); font-size: 20px;
}

/* ====================================================================================  TEXTAREA STYLE ====== */


.tox .tox-edit-area__iframe {
	background: var(--comment-color-bg-light)!important;
	border: 1px solid var(--comment-color-border);
 	backdrop-filter: blur(8px);
}
.comment-form-comment { background: transparent !important;}
.tox .tox-edit-area::before { border: none !important; border-radius: 0px !important; }
.tox:not(.tox-tinymce-inline) .tox-editor-header { border-bottom: none; padding: 0 !important; background: var(--comment-color-bg-light)!important;}
.tox .tox-toolbar__primary, .tox .tox-toolbar-overlord {  background: var(--comment-color-bg-light) !important; }
.comment-form-comment .tox-statusbar {
  background: var(--comment-color-bg-light) !important;
  border-top: 1px solid var(--comment-color-border-light)!important;
  border-radius: 0 0 16px 16px;
  padding: 20px!important;
  color: #fff!important;}
.tox-statusbar__path .tox-statusbar__path-item { color: #fff!important; }
.tox-statusbar__resize-handle svg { fill: #fff!important; }
.tox-edit-area__iframe { outline: none !important;  box-shadow: none !important; border: none !important;}



 

	







.comment-form-comment .tox-tbtn {
  background: transparent !important;
  border-radius: 50% !important;
  margin-left: 5px !important;
  width: 30px !important;
  height: 30px !important;
}
.comment-form-comment .tox-tbtn svg {
	fill: #fff!important;
}



.comment-form-comment .tox-tbtn:hover {
  background-color: #444 !important;
  border-radius: 50% !important;
  cursor: pointer;
}

.tox .tox-tbtn svg {
  font-size: 2rem !important;
}

.comment-form-comment .tox-tbtn:hover svg {
  fill: pink !important;
}



/* ====== COMMENT FORM FIELDS ====== */

.comment-respond h3 {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: var(--comment-color-input-bg);
  border: 1px solid var(--comment-color-input-border);
  color: #fff;
  font-family: inherit;
  margin-bottom: 14px;
  transition: border 0.2s ease, background 0.2s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--comment-color-primary);
  background: var(--comment-color-input-focus);
  outline: none;
}

.comment-form input[type=submit] {
  background: var(--comment-color-button);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.comment-form input[type=submit]:hover {
  background: var(--comment-color-button-hover);
}

/* ====== TRUMBOWYG STYLING ====== */

.trumbowyg-button-pane button svg {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.trumbowyg-box .trumbowyg-button-pane button svg {
  fill: #fff !important;
}

.trumbowyg-box .trumbowyg-button-pane button:hover svg {
  fill: #ccc !important;
}

.trumbowyg-box .trumbowyg-button-pane button:hover {
  background-color: #444 !important;
  border-radius: 16px;
}

.comment-form-comment .trumbowyg-button-pane {
  background: var(--comment-color-bg-dark) !important;
  border-radius: 16px 16px 0 0;
}

.comment-form-comment .trumbowyg-box {
  border-radius: 16px !important;
  min-height: 200px !important;
}

/* ====== HIDE EXTRA ELEMENTS ====== */

#respond .logged-in-as,
#respond h3 {
  display: none;
}