/*
  RSS and local reactions.
  RSS: статическая лента /feed.xml.
  Reactions: локальные реакции в браузере без отправки на сервер.
*/

.rss-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.rss-link::before {
  content: "◔";
  font-size: .95em;
  opacity: .85;
}

.reaction-widget {
  margin: 2rem 0 1.4rem;
  padding: 1rem;
  border: 1px solid rgba(214,168,79,.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(214,168,79,.08), transparent 42%),
    rgba(255,255,255,.035);
}

.reaction-widget h2 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  line-height: 1.2;
}

.reaction-widget p {
  margin: 0 0 .75rem;
  font-size: .9rem;
  line-height: 1.42;
  opacity: .82;
}

.reaction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}

.reaction-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 36px;
  padding: .48rem .78rem;
  border: 1px solid rgba(214,168,79,.25);
  border-radius: 999px;
  background: rgba(214,168,79,.07);
  color: inherit;
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}

.reaction-button:hover {
  background: rgba(214,168,79,.13);
}

.reaction-button.is-active {
  background: rgba(214,168,79,.22);
  border-color: rgba(214,168,79,.55);
}

.reaction-status {
  font-size: .82rem;
  opacity: .76;
}

.reaction-privacy {
  margin-top: .65rem !important;
  font-size: .78rem !important;
  opacity: .62 !important;
}

@media (max-width: 760px) {
  .reaction-widget {
    margin: 1.4rem 0 1rem;
    padding: .82rem;
    border-radius: 15px;
  }

  .reaction-actions {
    gap: .42rem;
  }

  .reaction-button {
    min-height: 34px;
    padding: .42rem .65rem;
    font-size: .82rem;
  }

  .reaction-status {
    display: block;
    width: 100%;
  }
}