:root{
  --tbk-engagement-navy:#152a47;
  --tbk-engagement-gold:#c7922d;
  --tbk-engagement-gold-soft:#ead8ae;
  --tbk-engagement-cream:#fffaf1;
  --tbk-engagement-red:#c63a4b;
}

.tbk-engagement{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(199,146,45,.20);
  position:relative;
  z-index:2;
}

.tbk-engagement--detail{
  width:min(100%,760px);
  margin:18px auto 0;
  padding:12px;
  border:1px solid rgba(199,146,45,.28);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,250,241,.97));
  box-shadow:0 8px 24px rgba(21,42,71,.07);
}

.tbk-engagement-btn{
  appearance:none;
  border:1px solid rgba(199,146,45,.32);
  background:linear-gradient(180deg,#fff 0%,#fffaf1 100%);
  color:var(--tbk-engagement-navy);
  min-height:38px;
  padding:0 11px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font:700 .78rem/1 Arial,sans-serif;
  letter-spacing:.005em;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease,color .18s ease;
}

.tbk-engagement-btn:hover{
  border-color:rgba(199,146,45,.68);
  box-shadow:0 7px 18px rgba(21,42,71,.10);
  transform:translateY(-1px);
}

.tbk-engagement-btn:active{transform:translateY(0) scale(.97)}
.tbk-engagement-btn:disabled{opacity:.62;cursor:wait}
.tbk-engagement-btn:focus-visible{outline:2px solid rgba(199,146,45,.75);outline-offset:2px}

.tbk-engagement-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform-origin:center;
  transition:transform .18s ease,fill .18s ease,color .18s ease;
}

.tbk-engagement-heart{width:19px;height:19px}
.tbk-engagement-react:hover .tbk-engagement-heart{transform:scale(1.08)}

.tbk-engagement--offer .tbk-engagement-react.is-active{
  color:var(--tbk-engagement-red);
  border-color:rgba(198,58,75,.28);
  background:linear-gradient(180deg,#fff 0%,#fff4f5 100%);
}
.tbk-engagement--offer .tbk-engagement-react.is-active .tbk-engagement-heart{
  fill:var(--tbk-engagement-red);
  stroke:var(--tbk-engagement-red);
  transform:scale(1.10);
}

.tbk-engagement--review .tbk-engagement-react.is-active{
  color:#9d711f;
  border-color:rgba(199,146,45,.58);
  background:linear-gradient(180deg,#fffdf8 0%,#fff5df 100%);
}
.tbk-engagement--review .tbk-engagement-react.is-active .tbk-engagement-thumb{
  fill:rgba(199,146,45,.20);
  transform:scale(1.08);
}

.tbk-engagement-share:hover .tbk-engagement-share-icon{transform:translate(2px,-2px)}

.tbk-engagement-label{white-space:nowrap}
.tbk-engagement-count{
  min-width:1.35em;
  color:#6f6250;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.tbk-engagement-react.is-active .tbk-engagement-count{color:currentColor}

.tbk-engagement-react.is-heart-pulsing .tbk-engagement-heart{animation:tbk-heart-pop .30s ease}
.tbk-engagement-react.is-useful-pulsing .tbk-engagement-thumb{animation:tbk-useful-pop .26s ease}
.tbk-engagement-share.is-share-pulsing .tbk-engagement-share-icon{animation:tbk-share-pop .28s ease}

@keyframes tbk-heart-pop{
  0%{transform:scale(1.06)}
  48%{transform:scale(1.30)}
  100%{transform:scale(1.10)}
}
@keyframes tbk-useful-pop{
  0%{transform:scale(1)}
  50%{transform:scale(1.18)}
  100%{transform:scale(1.08)}
}
@keyframes tbk-share-pop{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(2px,-2px) scale(1.10)}
  100%{transform:translate(0,0) scale(1)}
}

.tbk-share-popover{
  position:fixed;
  z-index:10050;
  width:210px;
  padding:7px;
  border:1px solid rgba(199,146,45,.36);
  border-radius:12px;
  background:rgba(255,255,255,.99);
  box-shadow:0 18px 48px rgba(21,42,71,.20);
  backdrop-filter:blur(10px);
}

.tbk-share-popover button{
  width:100%;
  min-height:42px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--tbk-engagement-navy);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  font:700 .84rem/1.2 Arial,sans-serif;
  cursor:pointer;
  text-align:left;
  transition:background .16s ease,transform .16s ease;
}
.tbk-share-popover button:hover{background:#fff6e4;transform:translateX(1px)}
.tbk-share-popover button:focus-visible{outline:2px solid rgba(199,146,45,.65);outline-offset:1px}
.tbk-share-popover svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:var(--tbk-engagement-gold);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}
.tbk-share-vk{
  width:22px;
  height:18px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--tbk-engagement-navy);
  border-radius:5px;
  font:900 .60rem/1 Arial,sans-serif;
  flex:0 0 auto;
}

.tbk-engagement-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:10060;
  transform:translate(-50%,10px);
  opacity:0;
  pointer-events:none;
  background:#152a47;
  color:#fff;
  border:1px solid rgba(234,216,174,.55);
  border-radius:999px;
  padding:9px 14px;
  box-shadow:0 12px 28px rgba(21,42,71,.24);
  font:700 .78rem/1 Arial,sans-serif;
  transition:opacity .18s ease,transform .18s ease;
}
.tbk-engagement-toast.is-visible{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  .tbk-engagement{gap:7px}
  .tbk-engagement-btn{min-height:44px;padding:0 12px;font-size:.78rem}
  .tbk-engagement--detail{width:100%;margin-top:14px}
  .tbk-share-popover{width:min(220px,calc(100vw - 24px))}
}

@media (max-width:390px){
  .tbk-engagement-btn{padding:0 10px;gap:6px}
  .tbk-engagement-label{font-size:.74rem}
}

@media (prefers-reduced-motion:reduce){
  .tbk-engagement-btn,
  .tbk-engagement-icon,
  .tbk-share-popover button,
  .tbk-engagement-toast{transition:none!important;animation:none!important}
}