/* TakeOne X Pro 7.5.8 — Social Interaction Panel */
.agk-social-engagement{
  margin:34px 0 16px;
  direction:rtl;
  color:var(--agk-text,#172033);
}
.agk-social-panel{
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.agk-social-action-row{
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  min-width:0;
}
.agk-social-action{
  position:relative;
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--agk-text,#172033);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease,color .16s ease,opacity .16s ease,background-color .16s ease;
}
.agk-social-action:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--agk-primary,#29468c) 6%,transparent)}
.agk-social-action:focus-visible{outline:2px solid color-mix(in srgb,var(--agk-primary,#29468c) 34%,transparent);outline-offset:2px}
.agk-social-action:disabled{opacity:.55;cursor:wait;transform:none}
.agk-social-action svg{width:29px;height:29px;display:block}
.agk-social-action svg :is(path,rect,circle){vector-effect:non-scaling-stroke}
.agk-social-like-icon{display:grid;place-items:center;width:100%;height:100%}
.agk-social-like.has-count{
  flex:0 0 auto;
  width:auto;
  min-width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding-inline:4px 5px;
}
.agk-social-like.has-count .agk-social-like-icon{width:29px;height:29px;flex:0 0 29px}
.agk-social-count{
  display:inline-block;
  min-width:.9em;
  color:currentColor;
  font-size:12px;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.agk-social-like.is-active{color:#ed4956}
.agk-social-like.is-active .agk-social-like-icon svg path{fill:currentColor;stroke:currentColor}
.agk-social-metric{
  flex:0 0 auto;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding-inline:4px;
  color:var(--agk-muted,#7a8496);
  user-select:none;
}
.agk-social-metric-icon{display:grid;place-items:center;width:25px;height:25px}
.agk-social-metric-icon svg{width:25px;height:25px;display:block}
.agk-social-views .agk-social-count{font-size:11.5px;font-weight:750}
.agk-social-comment-trigger svg{width:28px;height:28px}


.agk-social-like.is-pop .agk-social-like-icon{animation:agk-like-pop .34s cubic-bezier(.2,.8,.2,1)}
@keyframes agk-like-pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}

.agk-social-comment-inline{
  flex:1 1 240px;
  min-width:120px;
  margin-inline-start:4px;
}
.agk-social-comment-form{display:block;margin:0;min-width:0}
.agk-comment-compose{
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  min-height:44px;
  padding:3px 4px 3px 11px;
  border:1px solid color-mix(in srgb,var(--agk-border,#e3e8ef) 92%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--agk-surface-alt,#f7f9fc) 82%,var(--agk-surface,#fff));
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.agk-comment-compose:focus-within,
.agk-social-comment-form.is-writing .agk-comment-compose{
  border-color:color-mix(in srgb,var(--agk-primary,#29468c) 30%,var(--agk-border,#e3e8ef));
  background:var(--agk-surface,#fff);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--agk-primary,#29468c) 6%,transparent);
}
.agk-social-comment-form.is-success .agk-comment-compose{
  border-color:color-mix(in srgb,#16a36a 38%,var(--agk-border,#e3e8ef));
}
.agk-comment-author{
  flex:0 1 112px;
  width:112px;
  min-width:72px;
  max-width:132px;
  height:32px;
  padding:4px 8px!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--agk-text,#172033);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  line-height:1.4;
}
.agk-comment-author::placeholder{color:var(--agk-muted,#7a8496);font-weight:600;opacity:.82}
.agk-comment-divider{flex:0 0 1px;width:1px;height:20px;background:color-mix(in srgb,var(--agk-border,#e3e8ef) 95%,transparent)}
.agk-comment-compose textarea{
  flex:1 1 auto;
  min-width:0;
  min-height:28px;
  max-height:92px;
  resize:none;
  overflow:auto;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--agk-text,#172033);
  padding:4px 7px 3px;
  font:inherit;
  font-size:13.5px;
  line-height:1.65;
}
.agk-comment-compose textarea::placeholder{color:var(--agk-muted,#7a8496);opacity:.88}
.agk-comment-compose button{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--agk-primary,#29468c);
  cursor:pointer;
  transition:transform .16s ease,opacity .16s ease,background-color .16s ease;
}
.agk-comment-compose button:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--agk-primary,#29468c) 7%,transparent)}
.agk-comment-compose button:focus-visible{outline:2px solid color-mix(in srgb,var(--agk-primary,#29468c) 32%,transparent);outline-offset:1px}
.agk-comment-compose button:disabled{opacity:.45;cursor:wait;transform:none}
.agk-comment-compose button svg{width:20px;height:20px}
.agk-social-comment-form.is-sending .agk-comment-compose button{animation:agk-social-send-pulse .8s ease-in-out infinite alternate}
@keyframes agk-social-send-pulse{from{opacity:.42}to{opacity:1}}
.agk-comment-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.agk-comment-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.agk-social-comment-list{
  display:grid;
  gap:8px;
  margin-top:12px;
  padding-inline:4px;
}
.agk-social-comment-list:empty{display:none}
.agk-social-comment{
  display:block;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.agk-social-comment p{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px;
  margin:0;
  color:var(--agk-text,#172033);
  font-size:13px;
  line-height:1.7;
}
.agk-social-comment p strong{font-size:12.5px;font-weight:800;color:var(--agk-text,#172033)}
.agk-social-comment p span{font-weight:500;color:inherit}
.agk-comment-time{display:block;margin-top:1px;color:var(--agk-muted,#7a8496);font-size:9.5px;line-height:1.4}

html[data-agk-theme="dark"] .agk-social-engagement{color:var(--agk-dark-text,#F3F6FB)}
html[data-agk-theme="dark"] .agk-social-action{color:var(--agk-dark-text,#F3F6FB)}
html[data-agk-theme="dark"] .agk-social-metric{color:var(--agk-dark-muted,#A7B2C6)}
html[data-agk-theme="dark"] .agk-social-like.is-active{color:#ff6672}
html[data-agk-theme="dark"] .agk-comment-compose{
  background:var(--agk-dark-surface-alt,#162238);
  border-color:var(--agk-dark-line,#26344D);
}
html[data-agk-theme="dark"] .agk-comment-compose:focus-within,
html[data-agk-theme="dark"] .agk-social-comment-form.is-writing .agk-comment-compose{
  background:var(--agk-dark-surface,#111B2E);
  border-color:color-mix(in srgb,var(--agk-dark-primary,#6F96FF) 38%,var(--agk-dark-line,#26344D));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--agk-dark-primary,#6F96FF) 8%,transparent);
}
html[data-agk-theme="dark"] .agk-comment-compose textarea,
html[data-agk-theme="dark"] .agk-comment-author,
html[data-agk-theme="dark"] .agk-social-comment p,
html[data-agk-theme="dark"] .agk-social-comment p strong{color:var(--agk-dark-text,#F3F6FB)}
html[data-agk-theme="dark"] .agk-comment-compose textarea::placeholder,
html[data-agk-theme="dark"] .agk-comment-author::placeholder,
html[data-agk-theme="dark"] .agk-comment-time{color:var(--agk-dark-muted,#A7B2C6)}
html[data-agk-theme="dark"] .agk-comment-compose button{color:var(--agk-dark-primary,#8FB0FF)}

@media(max-width:700px){
  .agk-social-engagement{margin:28px 0 14px}
  .agk-social-action-row{gap:2px}
  .agk-social-action{flex-basis:42px;width:42px;height:42px}
  .agk-social-action svg{width:27px;height:27px}
  .agk-social-like.has-count{min-width:42px;padding-inline:3px;gap:2px}
  .agk-social-like.has-count .agk-social-like-icon{width:27px;height:27px;flex-basis:27px}
  .agk-social-metric{min-height:42px;padding-inline:2px;gap:2px}
  .agk-social-metric-icon,.agk-social-metric-icon svg{width:23px;height:23px}
  .agk-social-count{font-size:11.5px}
  .agk-social-comment-inline{margin-inline-start:2px;min-width:0}
  .agk-comment-compose{min-height:42px;padding-inline-start:7px}
  .agk-comment-author{flex-basis:86px;width:86px;min-width:68px;max-width:98px;font-size:12px;padding-inline:5px!important}
  .agk-comment-divider{height:18px}
  .agk-comment-compose textarea{font-size:16px;padding-inline:5px}
  .agk-comment-compose button{width:34px;height:34px;flex-basis:34px}
}

@media(max-width:390px){
  .agk-social-action{flex-basis:38px;width:38px;height:40px}
  .agk-social-action svg{width:25px;height:25px}
  .agk-social-like.has-count{min-width:38px;padding-inline:2px}
  .agk-social-metric{min-height:40px}
  .agk-social-metric-icon,.agk-social-metric-icon svg{width:21px;height:21px}
  .agk-social-count{font-size:11px}
  .agk-social-comment-inline{flex-basis:150px}
  .agk-comment-author{flex-basis:70px;width:70px;min-width:60px;max-width:76px;font-size:11.5px}
  .agk-comment-compose textarea{padding-inline:3px}
}

@media(prefers-reduced-motion:reduce){
  .agk-social-action,.agk-comment-compose,.agk-comment-compose button{transition:none!important}
  .agk-social-like.is-pop .agk-social-like-icon,.agk-social-comment-form.is-sending .agk-comment-compose button{animation:none!important}
}