/* ===== Layout: left-aligned row, 35px gap ===== */
.csa-actions {
  display: flex;
  gap: 35px;
  align-items: flex-start;
  justify-content: flex-start;
}

/* ===== Reset Elementor link styles just for these buttons ===== */
.csa-actions .csa-btn {
  text-decoration: none !important;
  color: inherit !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-grid;
  grid-auto-flow: row;
  justify-items: center;
  align-items: center;
  row-gap: 6px;
  line-height: 1;
}

.csa-actions .csa-svg {
  height: 28px;           /* try 30–32 if lines look too thin */
  width: auto;
  display: block;
  overflow: visible;       /* avoid clipping if the SVG uses transforms */
}

/* Default (idle) icon look */
.csa-actions .csa-svg path,
.csa-actions .csa-svg line,
.csa-actions .csa-svg polyline,
.csa-actions .csa-svg polygon,
.csa-actions .csa-svg circle,
.csa-actions .csa-svg rect {
  transition: fill .18s ease, stroke .18s ease, opacity .18s ease;
  stroke: #65666A;               /* base stroke */
  fill: none;                    /* base fill */
  opacity: 1;
}

/* Hover “fill” (works even if SVG has inline fill/stroke attrs) */
.csa-actions .csa-btn:hover .csa-svg path,
.csa-actions .csa-btn:hover .csa-svg line,
.csa-actions .csa-btn:hover .csa-svg polyline,
.csa-actions .csa-btn:hover .csa-svg polygon,
.csa-actions .csa-btn:hover .csa-svg circle,
.csa-actions .csa-btn:hover .csa-svg rect {
  fill: var(--csa-active, #9E0303) !important;
  stroke: var(--csa-active, #9E0303) !important;
  opacity: 1;
}

/* Active (liked or open) state keeps it “filled” */
.csa-actions .csa-btn.is-active .csa-svg path,
.csa-actions .csa-btn.is-active .csa-svg line,
.csa-actions .csa-btn.is-active .csa-svg polyline,
.csa-actions .csa-btn.is-active .csa-svg polygon,
.csa-actions .csa-btn.is-active .csa-svg circle,
.csa-actions .csa-btn.is-active .csa-svg rect {
  fill: var(--csa-active, #9E0303) !important;
  stroke: var(--csa-active, #9E0303) !important;
}

/* Like counter under the heart */
.csa-actions .csa-count {
  font-size: 12px;
  opacity: .85;
}
