.zt-votepro{
  margin:14px 0 10px;
  padding:11px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 28px rgba(2,6,23,.06);
}

.zt-votepro__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

.zt-votepro__title{
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  color:#0f172a;
}

.zt-votepro__meta{
  display:flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
.zt-votepro__pct{font-weight:900; color:#0f172a;}
.zt-votepro__small{font-size:11px; color:rgba(15,23,42,.7);}
.zt-votepro__dot{opacity:.35}

/* rating */
.zt-votepro__rating{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.zt-votepro__stars{display:flex; gap:4px;}
.zt-votepro__star{
  width:18px;height:18px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.06);
}
.zt-votepro__star i{font-size:11px; color:rgba(15,23,42,.65);}
.zt-votepro__star.is-on{background:rgba(16,185,129,.14);}
.zt-votepro__star.is-on i{color:rgba(16,185,129,.95);}
.zt-votepro__rateText{font-size:12px; color:rgba(15,23,42,.75);}
.zt-votepro__rateValue{font-weight:900; color:#0f172a;}

.zt-votepro__bar{
  height:8px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  margin:8px 0 10px;
  position:relative;
  overflow:hidden;
}
.zt-votepro__barFill{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(16,185,129,.35), rgba(16,185,129,.85));
  transition:width .25s ease;
}

.zt-votepro__actions{
  display:flex;
  gap:8px;
}

.zt-votepro__btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.02);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  position:relative;
}

.zt-votepro__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(2,6,23,.10);
}

.zt-votepro__ico{
  width:30px; height:30px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.06);
}
.zt-votepro__ico i{font-size:15px; color:#0f172a;}

.zt-votepro__label{
  font-weight:800;
  color:#0f172a;
  font-size:13px;
}

.zt-votepro__count{
  font-weight:900;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  color:#0f172a;
  font-size:13px;
}

.zt-votepro__btn.is-active{
  border-color:rgba(16,185,129,.35);
  background:rgba(16,185,129,.07);
}
.zt-votepro__btn--dislike.is-active{
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.07);
}
.zt-votepro__btn--dislike.is-active .zt-votepro__ico{background:rgba(239,68,68,.12);}
.zt-votepro__btn--like.is-active .zt-votepro__ico{background:rgba(16,185,129,.12);}

.zt-votepro__hint{
  margin-top:8px;
  font-size:12px;
  color:rgba(15,23,42,.72);
  min-height:18px;
}

/* Bounce */
@keyframes zt-bounce {
  0%{transform:scale(1)}
  30%{transform:scale(1.18)}
  60%{transform:scale(.96)}
  100%{transform:scale(1)}
}
.zt-votepro__btn.do-bounce .zt-votepro__ico{
  animation:zt-bounce .32s ease;
}

@media (max-width: 520px){
  .zt-votepro__head{align-items:flex-start;}
}
/* fallback: ascunde statistici când section are clasa */
.zt-votepro.zt-votepro-no-stats .zt-votepro__meta,
.zt-votepro.zt-votepro-no-stats .zt-votepro__rating,
.zt-votepro.zt-votepro-no-stats .zt-votepro__bar,
.zt-votepro.zt-votepro-no-stats .zt-votepro__count {
  display: none !important;
}