/* assets/eacm-frontend.css */
/* Scoped frontend styles for custom comments + soft-hide + ajax form (no Bootstrap required) */

.eacm-comments {
  margin-top: 24px;
}

.eacm-comments__title {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.25;
}

.eacm-comments__list {
  display: block;
  position: relative;
  width: 100%;
}

.eacm-comments-module .eacm-comments__list.eacm-is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.eacm-comments-module .eacm-comments__list.eacm-is-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eacm-comments-module .eacm-comments__list.eacm-is-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  animation: eacm-spin 0.8s linear infinite;
  z-index: 11;
}

@keyframes eacm-spin {
  to {
    transform: rotate(360deg);
  }
}


.eacm-comment {
  display: block;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.08);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.eacm-comment:first-child {
  border-top: 0;
}

/* Depth-based indentation for nested replies */
/* Indentation is applied to .eacm-comment__card, not .eacm-comment wrapper */
.eacm-comment--reply .eacm-comment__card {
  margin-left: var(--eacm-indent, 0);
  width: calc(100% - var(--eacm-indent, 0));
  box-sizing: border-box;
  background: #F9FBFE;
  border-radius: 12px;
  padding: 12px;
}

.eacm-comment--reply[data-eacm-depth="3"] .eacm-comment__card {
  background: #F4EFEA;
}

.eacm-comments-module .eacm-reply-target,
.eacm-comments-module #respond {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.eacm-comment--just-added .eacm-comment__card {
  background-color: rgba(76, 175, 80, 0.1);
  transition: background-color 0.3s ease;
}

.eacm-comments-module .eacm-comment__header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.eacm-comments-module .eacm-comment__avatar {
  flex: 0 0 auto;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI0M1QzVDNSIgY2xhc3M9ImJpIGJpLXBlcnNvbi1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICA8cGF0aCBkPSJNMyAxNHMtMSAwLTEtMSAxLTQgNi00IDYgMyA2IDQtMSAxLTEgMXptNS02YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNiIvPg0KPC9zdmc+);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.eacm-comments-module .eacm-comment__main {
  box-sizing: border-box;
}

.eacm-comments-module .eacm-comment__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 8px;
}

.eacm-comments-module .eacm-comment__author {
  font-weight: 600;
  color: #222;
  line-height: 1.4;
}

.eacm-comments-module .eacm-comment__time {
  font-size: 12px;
  color: grey;
  opacity: 1;
  text-decoration: none;
  white-space: normal;
  line-height: 1.4;
}


.eacm-comment__edit a {
  font-size: 12px;
  opacity: .75;
  text-decoration: none;
}

.eacm-comment__edit a:hover {
  text-decoration: underline;
}

.eacm-comment__moderation {
  margin: 8px 0;
  font-size: 13px;
  opacity: .85;
}

.eacm-comments-module .eacm-comment__content {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  margin: 0 0 10px;
  line-height: 1.5;
}

.eacm-comments-module .eacm-comment__content p {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  margin: 0 0 8px;
}

.eacm-comments-module .eacm-comment__content p:last-child {
  margin-bottom: 0;
}

.eacm-comments-module .eacm-comment__actions {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 0;
}

.eacm-comments-module .eacm-voting {
  display: flex;
  gap: 8px;
}

.eacm-reply-link {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.eacm-reply-icon {
  width: 14px;
  height: 14px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjA1IDM0LjhjMTEuNSA1LjEgMTkgMTYuNiAxOSAyOS4ydjY0SDMzNmM5Ny4yIDAgMTc2IDc4LjggMTc2IDE3NmMwIDExMy4zLTgxLjUgMTYzLjktMTAwLjIgMTc0LjFjLTIuNSAxLjQtNS4zIDEuOS04LjEgMS45Yy0xMC45IDAtMTkuNy04LjktMTkuNy0xOS43YzAtNy41IDQuMy0xNC40IDkuOC0xOS41YzkuNC04LjggMjIuMi0yNi40IDIyLjItNTYuN2MwLTUzLTQzLTk2LTk2LTk2SDIyNHY2NGMwIDEyLjYtNy40IDI0LjEtMTkgMjkuMnMtMjUgMy0zNC40LTUuNGwtMTYwLTE0NEMzLjkgMjI1LjcgMCAyMTcuMSAwIDIwOHMzLjktMTcuNyAxMC42LTIzLjhsMTYwLTE0NGM5LjQtOC41IDIyLjktMTAuNiAzNC40LTUuNHoiLz48L3N2Zz4=);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.eacm-reply-link:hover {
  border-color: rgba(0,0,0,.30);
}

.eacm-reply-link:active {
  transform: translateY(1px);
}

/* Respond / form */
#respond.eacm-comment-form {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.10);
}

.eacm-comment-form__title {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.25;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

#eacm-cancel-reply-link {
  font-size: 12px;
  opacity: .8;
  text-decoration: none;
}

#eacm-cancel-reply-link:hover {
  text-decoration: underline;
}

.eacm-comment-form__wrapper {
  padding: 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}

.eacm-comment-form__form {
  display: grid;
  gap: 12px;
}

.eacm-field {
  display: grid;
  gap: 6px;
}

.eacm-label {
  font-size: 13px;
  opacity: .85;
}

.eacm-input,
.eacm-textarea {
  width: 100%;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.3;
  background: #fff;
}

.eacm-textarea {
  resize: vertical;
  min-height: 120px;
}

.eacm-input:focus,
.eacm-textarea:focus {
  outline: none;
  border-color: rgba(0,0,0,.35);
}

/* iOS Safari: prevent zoom on input/textarea focus (requires font-size >= 16px) */
@supports (-webkit-touch-callout: none) {
  .eacm-input,
  .eacm-textarea {
    font-size: 16px;
  }
}

.eacm-btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(0,0,0,.85);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.eacm-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.eacm-btn.is-loading,
.eacm-comment-form__form.is-loading #eacmSendCommentBtn {
  opacity: 0.6;
  cursor: wait;
  position: relative;
  padding-right: 26px;
}

.eacm-btn.is-loading::after,
.eacm-comment-form__form.is-loading #eacmSendCommentBtn::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: rgba(255,255,255,.9);
  border-radius: 50%;
  animation: eacm-spin 0.6s linear infinite;
}

.eacm-spinner {
  font-size: 14px;
  opacity: .85;
}

.eacm-comment-message {
  margin-top: 10px;
}

.eacm-msg {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  font-size: 13px;
}

.eacm-msg--ok {
  border-color: rgba(0,0,0,.12);
}

.eacm-msg--fading {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.eacm-msg--err {
  border-color: rgba(0,0,0,.20);
}

/* Soft hidden comment UI */
.eacm-soft-hidden {
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.02);
}

.eacm-soft-hidden__msg {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.eacm-soft-hidden__reveal {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}

.eacm-soft-hidden__reveal:hover:not(:disabled) {
  border-color: rgba(0,0,0,.30);
}

.eacm-soft-hidden__reveal:disabled,
.eacm-soft-hidden__reveal[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.eacm-soft-hidden.is-loading .eacm-soft-hidden__reveal {
  opacity: 0.6;
  cursor: wait;
  position: relative;
}

.eacm-soft-hidden.is-loading .eacm-soft-hidden__reveal::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.6);
  border-radius: 50%;
  animation: eacm-spin 0.6s linear infinite;
}

.eacm-soft-hidden__content {
  margin-top: 10px;
  overflow-wrap: anywhere;
}

.eacm-soft-hidden__error {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.20);
  background: rgba(0,0,0,.03);
  font-size: 13px;
}

/* Comments module (AJAX) */
.eacm-comments-module {
  margin-top: 24px;
}

.eacm-comments__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.eacm-comments__toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eacm-comments__mod-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid #eee;
  padding-bottom: 22px;
}

.eacm-comments__mod-text {
  flex: 1;
}

/* Mobile: stack button under text */
@media (max-width: 768px) {
  .eacm-comments__mod-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .eacm-comments__mod-text {
    flex: none;
    width: 100%;
  }
  
  .eacm-comments__reveal-all {
    align-self: flex-start;
  }
}

.eacm-comments__reveal-all {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.eacm-comments__reveal-all:hover:not(:disabled) {
  border-color: rgba(0,0,0,.30);
}

.eacm-comments__reveal-all:disabled,
.eacm-comments__reveal-all[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.eacm-comments__reveal-all.is-done {
  opacity: 0.6;
  cursor: default;
  font-style: italic;
}

.eacm-comments__sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eacm-sort-label {
  font-size: 13px;
  opacity: .85;
}

.eacm-sort-select {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

.eacm-comments__count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
}

.eacm-comments__count-number {
  font-weight: 600;
}

.eacm-comments__count-label {
  opacity: .75;
}

.eacm-sort-select:focus {
  outline: none;
  border-color: rgba(0,0,0,.35);
}

.eacm-comments__list-container {
  position: relative;
  min-height: 60px;
}

.eacm-comments__loading,
.eacm-comments__empty {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  opacity: .75;
}

.eacm-comments__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.eacm-load-all-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.eacm-load-all-btn:hover {
  border-color: rgba(0,0,0,.30);
  background: rgba(0,0,0,.02);
}

.eacm-comments__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.eacm-comments__pagination--top {
  margin: 12px 0 16px;
}

.eacm-pagination-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.eacm-pagination-btn:hover {
  border-color: rgba(0,0,0,.30);
  background: rgba(0,0,0,.02);
}

.eacm-pagination-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.eacm-pagination-info {
  font-size: 13px;
  opacity: .75;
}

/* Voting */
.eacm-voting {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hide voting UI for soft-hidden comments (same pattern as Reply button) */
.eacm-voting--soft-hidden,
.eacm-voting[data-soft-hidden="1"] {
  display: none !important;
}

.eacm-vote-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.eacm-vote-btn:hover:not(:disabled) {
  border-color: rgba(0,0,0,.30);
  background: rgba(0,0,0,.02);
}

.eacm-vote-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.eacm-vote-btn.eacm-vote-active {
  border-color: rgba(0,0,0,.35);
  background: rgba(0,0,0,.05);
}

.eacm-vote-icon {
  width: 18px;
  height: 18px;
}

.eacm-vote-up .eacm-vote-icon {
  color: #15803D;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMTU4MDNEIiBkPSJNMTcxLjUgMzguOEMxOTIuMyA0IDIzNi41LTEwIDI3NCA3LjZsNy4yIDMuOEMzMTYgMzIuMyAzMzAgNzYuNSAzMTIuNCAxMTRsMCAwLTE0LjEgMzAgMTA5LjcgMCA3LjQgLjRjMzYuMyAzLjcgNjQuNiAzNC40IDY0LjYgNzEuNiAwIDEzLjItMy42IDI1LjQtOS44IDM2IDYuMSAxMC42IDkuNyAyMi44IDkuOCAzNiAwIDE4LjMtNi45IDM0LjgtMTggNDcuNSAxLjMgNS4zIDIgMTAuOCAyIDE2LjUgMCAyNS4xLTEyLjkgNDctMzIuMiA1OS45LTEuOSAzNS41LTI5LjQgNjQuMi02NC40IDY3LjdsLTcuNCAuNC0xMDQuMSAwYy0xOCAwLTM1LjktMy40LTUyLjYtOS45bC03LjEtMy0uNy0uMy02LjYtMy4yLS43LS4zLTEyLjItNi41Yy0xMi4zLTYuNS0yMy4zLTE0LjctMzIuOS0yNC4xLTQuMSAyNi45LTI3LjMgNDcuNC01NS4zIDQ3LjRsLTMyIDBjLTMwLjkgMC01Ni0yNS4xLTU2LTU2TDAgMjAwYzAtMzAuOSAyNS4xLTU2IDU2LTU2bDMyIDBjMTAuOCAwIDIwLjkgMy4xIDI5LjUgOC41bDUwLjEtMTA2LjUgLjYtMS4yIDIuNy01IC42LS45ek01NiAxOTJjLTQuNCAwLTggMy42LTggOGwwIDIyNGMwIDQuNCAzLjYgOCA4IDhsMzIgMGM0LjQgMCA4LTMuNiA4LThsMC0yMjRjMC00LjQtMy42LTgtOC04bC0zMiAwek0yNTMuNiA1MWMtMTQuOC02LjktMzIuMy0xLjYtNDAuNyAxMmwtMi4yIDQtNTYuOCAxMjAuOWMtMy41IDcuNS01LjUgMTUuNS02IDIzLjdsLS4xIDQuMiAwIDExMi45IC4yIDcuOWMyLjQgMzIuNyAyMS40IDYyLjEgNTAuNyA3Ny43bDExLjUgNi4xIDYuMyAzLjFjMTIuNCA1LjYgMjUuOCA4LjUgMzkuNCA4LjVsMTA0LjEgMCAyLjQtLjFjMTIuMS0xLjIgMjEuNi0xMS41IDIxLjYtMjMuOWwtLjItMi42Yy0uMS0uOS0uMi0xLjctLjQtMi42LTIuNy0xMi4xIDQuMy0yNC4yIDE2LTI4IDkuNy0zLjEgMTYuNi0xMi4yIDE2LjYtMjIuOCAwLTQuMy0xLjEtOC4yLTMuMS0xMS44LTYuMy0xMS4xLTIuOC0yNS4yIDgtMzIgNi44LTQuMyAxMS4yLTExLjggMTEuMi0yMC4yIDAtNy4xLTMuMS0xMy41LTguMi0xOC01LjItNC42LTguMi0xMS4xLTguMi0xOHMzLTEzLjQgOC4yLTE4YzUuMS00LjUgOC4yLTEwLjkgOC4yLTE4bC0uMS0yLjRjLTEuMS0xMS4zLTEwLjEtMjAuMy0yMS40LTIxLjRsLTIuNC0uMS0xNDcuNSAwYy04LjIgMC0xNS44LTQuMi0yMC4yLTExLjEtNC40LTYuOS01LTE1LjctMS41LTIzLjFMMjY5IDkzLjZjNy0xNSAxLjQtMzIuNy0xMi41LTQxTDI1My42IDUxeiIvPjwvc3ZnPg==);
}

.eacm-vote-down .eacm-vote-icon {
  color: #B91C1C;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjQjkxQzFDIiBkPSJNMzYwIDMybDcuNCAuNGMzNSAzLjYgNjIuNSAzMi4yIDY0LjQgNjcuNyAxNy44IDExLjggMzAuMSAzMS40IDMyIDUzLjlsLjIgNmMwIDUuNy0uNyAxMS4yLTIgMTYuNSAxMC4yIDExLjUgMTYuOCAyNi4zIDE3LjggNDIuN2wuMiA0LjhjMCAxMy4yLTMuNiAyNS40LTkuOCAzNiA0LjkgOC40IDguMiAxNy45IDkuMyAyOGwuNCA4YzAgMzcuMy0yOC4zIDY3LjktNjQuNiA3MS42bC03LjQgLjQtMTA5LjcgMCAxNC4xIDMwIDMuMSA3LjZjMTIuNSAzNS43LTEuOCA3NS41LTM0LjIgOTVsLTcuMiAzLjljLTM3LjUgMTcuNi04MS43IDMuNi0xMDIuNi0zMS4ybC0uNi0uOS0yLjctNS0uNi0xLjItMzAuMS02NGMtOS40IDE3LjgtMjggMjkuOS00OS41IDI5LjlsLTMyIDBjLTMwLjkgMC01Ni0yNS4xLTU2LTU2TDAgMTUyYzAtMzAuOSAyNS4xLTU2IDU2LTU2bDMyIDBjMTIuNCAwIDIzLjkgNC4xIDMzLjIgMTEgMTMuMi0yMS40IDMyLTM5LjQgNTUtNTEuNmwxMi4yLTYuNSAuNy0uMyA2LjYtMy4yIC43LS4zIDcuMS0zYzE2LjctNi42IDM0LjUtOS45IDUyLjYtOS45TDM2MCAzMnpNMjU1LjkgODBjLTEyIDAtMjMuOSAyLjMtMzUuMSA2LjZsLTQuNyAyLTUuMyAyLjYgMCAwLTEyLjIgNi41Yy0yOS4yIDE1LjUtNDguMyA0NC45LTUwLjcgNzcuNmwtLjIgOCAwIDExMi45IC4xIDQuMWMuNSA4LjIgMi41IDE2LjIgNiAyMy43bDU2LjggMTIwLjkgMi4xIDMuOGM4LjQgMTMuNyAyNiAxOS4xIDQwLjggMTIuMmwyLjktMS42YzEzLTcuOCAxOC43LTIzLjcgMTMuNy0zOGwtMS4yLTMtMzAuMi02NC4yYy0zLjUtNy40LTIuOS0xNi4xIDEuNS0yMy4xczEyLTExLjEgMjAuMi0xMS4xbDE0Ny41IDAgMi40LS4xYzExLjMtMS4xIDIwLjMtMTAuMSAyMS40LTIxLjRsLjEtMi41YzAtNy4xLTMuMS0xMy41LTguMi0xOC01LjItNC42LTguMi0xMS4xLTguMi0xOHMzLTEzLjQgOC4yLTE4YzQuNC0zLjkgNy40LTkuMyA4LTE1LjNsLjItMi43YzAtOC40LTQuNC0xNS45LTExLjItMjAuMi0xMC43LTYuOS0xNC4yLTIwLjktOC0zMiAxLjUtMi42IDIuNS01LjYgMi45LTguNmwuMi0zLjJjMC0xMC42LTYuOS0xOS42LTE2LjYtMjIuOC0xMS43LTMuOC0xOC43LTE1LjktMTYtMjggLjItLjkgLjMtMS44IC40LTIuNmwuMi0yLjZjMC0xMi40LTkuNS0yMi42LTIxLjYtMjMuOEwzNjAgODAgMjU1LjkgODB6TTU2IDE0NGMtNC40IDAtOCAzLjYtOCA4bDAgMjI0YzAgNC40IDMuNiA4IDggOGwzMiAwYzQuNCAwIDgtMy42IDgtOGwwLTIyNGMwLTQuNC0zLjYtOC04LThsLTMyIDB6Ii8+PC9zdmc+);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.eacm-vote-count {
  font-size: 12px;
  font-weight: 500;
  min-width: 16px;
  text-align: center;
}

/* Small screens */
@media (max-width: 480px) {
  .eacm-comment {
    gap: 10px;
  }

  .eacm-comment__meta {
    gap: 6px 10px;
  }

  .eacm-btn {
    width: 100%;
    justify-content: center;
  }

  .eacm-comments__toolbar {
    justify-content: flex-start;
  }

  .eacm-voting {
    flex-wrap: wrap;
  }
}

/* Comment counter shortcode styles */
.eacm-comment-counter__link {
  font-size: 11px;
}