/* Shared public-site rail, matching the news page. Account visibility stays in CMS. */
html:root body > .social-rail {
  box-sizing: border-box;
  position: fixed;
  inset: 50% 16px auto auto;
  z-index: 120;
  display: grid;
  gap: 7.2px;
  width: 44px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
}

html:root body > .social-rail[hidden] { display: none; }

html:root body > .social-rail > :is(a, button) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12.8px;
  background: #075bad;
  color: #fff;
  box-shadow: 0 7px 20px #052c5a2b;
  font: 900 12px/1 Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

html:root body > .social-rail :is(.channel-mark, img, svg) {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  object-fit: contain;
  font: 900 9px/1 Arial, sans-serif;
}

html:root body > .social-rail > :is(.ig, .zpv-social-instagram, .ypv-social-instagram, .mnp-social-instagram) {
  background: linear-gradient(135deg, #f5a431, #db3d83, #6149b8);
}
html:root body > .social-rail > :is(.yt, .zpv-social-youtube, .ypv-social-youtube, .mnp-social-youtube) { background: #e82929; }
html:root body > .social-rail > :is(.tk, .douyin, .zpv-social-tiktok, .zpv-social-douyin, .ypv-social-tiktok, .ypv-social-douyin, .mnp-social-tiktok, .mnp-social-douyin) { background: #111; }
html:root body > .social-rail > :is(.line, .zpv-social-line, .ypv-social-line, .mnp-social-line) { background: #17b65c; }
html:root body > .social-rail > :is(.wa, .zpv-social-whatsapp, .ypv-social-whatsapp, .mnp-social-whatsapp) { background: #20b860; }
html:root body > .social-rail > :is(.wx, .zpv-social-wechat, .ypv-social-wechat, .mnp-social-wechat) { background: #28a84f; }

html:root body > .social-rail > :is(a, button):hover { background: #07559f; transform: translateX(-2px); }
html:root body > .social-rail > :is(a, button):focus-visible { outline: 3px solid #f3c744; outline-offset: 3px; }

@media (max-width: 760px) {
  html:root body > .social-rail {
    position: static;
    inset: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 10.4px;
    width: 100%;
    max-width: 384px;
    margin: 20px auto;
    padding: 0 16px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root body > .social-rail > :is(a, button):hover { transform: none; }
}