/* ===== popup ===== */
.hz-reactions__popup[hidden] {
  display: none !important;
}

.hz-reactions button:focus {
  outline: none !important;
  box-shadow: none !important;
}
.hz-reactions button:focus-visible {
  outline: 2px solid var(--hs-reaction-open-color, currentColor) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.hz-reactions button { -webkit-appearance: none; appearance: none; }
.hz-reactions__open:focus,
.hz-reactions__close:focus { border-color: var(--hs-reaction-open-border, currentColor) !important; }
.hz-reactions__pick:focus { border-color: rgba(0, 0, 0, .15) !important; }
.hz-reactions__pick.is-on:focus { border-color: var(--hs-reaction-selected-border, #12b7b4) !important; }

.hz-reactions__popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .22);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
}

.hz-reactions__popup-inner {
  width: min(320px, 92vw);
  background: #fff;
  border-radius: 14px;
  border: 0;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .2);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--hs-reaction-modal-shadow, #2d3c50) 24%, transparent);
  padding: 10px;
}

.hz-reactions__popup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hz-reactions__popup-title {
  color: var(--hs-reaction-modal-title, #2d3c50);
  font-weight: 700;
}

.hz-reactions__close {
  color: var(--hs-reaction-open-color, #2d3c50);
  border: 1px solid var(--hs-reaction-open-border, rgba(0, 0, 0, .15));
  border-radius: 8px;
  background: var(--hs-reaction-open-bg, #fff);
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1.2;
}

/* picker buttons */
.hz-reactions__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.hz-reactions__pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 12px;
  background: #fff;
  color: var(--hs-reaction-modal-title, #2d3c50);
  cursor: pointer;
  line-height: 1.25;
}

.hz-reactions__pick.is-on {
  border-color: var(--hs-reaction-selected-border, #12b7b4);
  box-shadow: 0 0 0 2px var(--hs-reaction-selected-bg, rgba(18, 183, 180, .15)) inset;
}

.hz-reactions__label {
  display: flex;
  flex: 1;
  min-height: 1.5em;
  align-items: center;
  text-align: left;
  font-size: 13px;
  line-height: 1.25;
  opacity: .85;
}

.hz-reactions__pick > .hz-reactions__emoji:not(.hz-reactions__fa-icon):not(.hz-reactions__icon-img) {
  display: inline-grid !important;
  flex: 0 0 1.5em;
  width: 1.5em;
  height: 1.5em;
  place-items: center;
  align-self: center;
  line-height: 1 !important;
  vertical-align: middle;
}

/* ==========================
   HZ Reactions: theme + size
========================== */
.hz-reactions {
  margin: 12px 0;
  display: flex;
  gap: 25px;
  flex-direction: column;
  justify-content: center;
}

/* ==========================
   Bar: 基本（数字は常に下）
========================== */
.hz-reactions__bar {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  align-items: center;
}

/* 「押されているもの」ボタン（絵文字＋数字を縦積み） */
.hz-reactions__btn {
  position: relative;
  min-width: 25px;
  height: 30px;
  padding: 0;
  display: grid;
  gap: 6px;
  grid-template-rows: 1fr auto;
  /* 上：絵文字 下：数字 */
  place-items: center;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  background-color: transparent;
  border: none;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.hz-reactions__btn.is-on {
  background: transparent;
  box-shadow: none;
}

.hz-reactions__btn.is-on .hz-reactions__count {
  color: var(--hs-reaction-active-color, var(--hs-reaction-count-color, #2d3c50));
  border-color: var(--hs-reaction-active-border, var(--hs-reaction-count-border, #c7cbd1));
  background: var(--hs-reaction-active-bg, var(--hs-reaction-count-bg, #f4f5f6));
  font-weight: 700;
}

.hz-reactions.has-reaction-tooltips .hz-reactions__btn::after {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  z-index: 20;
  max-width: 15rem;
  padding: 5px 8px;
  border-radius: 4px;
  background: #1d2327;
  color: #fff;
  content: attr(data-label);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% + var(--hs-reaction-tooltip-shift, 0px)), 3px);
  transition: opacity .12s ease, transform .12s ease;
  width: max-content;
  max-width: min(calc(100vw - 16px), var(--hs-reaction-tooltip-max-width, calc(100vw - 16px)));
  white-space: normal;
  overflow-wrap: anywhere;
}
.hz-reactions.has-reaction-tooltips .hz-reactions__btn:hover::after,
.hz-reactions.has-reaction-tooltips .hz-reactions__btn:focus-visible::after { opacity: 1; transform: translate(calc(-50% + var(--hs-reaction-tooltip-shift, 0px)), 0); }
.hz-reactions.has-reaction-tooltips .hz-reactions__btn.is-tooltip-below::after {
  top: calc(100% + 7px);
  bottom: auto;
}

/* 絵文字と数字 */
.hz-reactions__emoji {
  font-size: 16px !important;
}

.hz-reactions__count {
  box-sizing: border-box;
  font-size: 11px !important;
  opacity: .9;
  margin-bottom: 5px;
  color: var(--hs-reaction-count-color, #2d3c50);
  background-color: var(--hs-reaction-count-bg, #f4f5f6);
  border: 1px solid var(--hs-reaction-count-border, #c7cbd1);
  min-width: 22px;
  height: 20px;
  border-radius: 4px;
  line-height: 1.6;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* ＋ボタン（アイコンのみ、同サイズ） */
.hz-reactions__open {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 35px;
  min-width: 35px;
  height: 35px;
  padding: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  place-items: center;
  cursor: pointer;
  line-height: 1;
  color: var(--hs-reaction-open-color, #2d3c50);
  border: 1px solid var(--hs-reaction-open-border, #c7cbd1);
  font-size: 18px;
  font-weight: 600;
  border-radius: 5px;
  background-color: var(--hs-reaction-open-bg, #eaecee);
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.hz-reactions button.hz-reactions__open.hz-reactions__open--icon-label,
.hz-reactions button.hz-reactions__open.hz-reactions__open--label {
  display: inline-flex !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: 100%;
  min-height: 35px !important;
  height: 35px !important;
  padding: 0 10px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible !important;
}

.hz-reactions__open--image {
  width: fit-content !important;
  max-width: 100%;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
}

.hz-reactions__open-image { display: block; max-width: 100%; margin: 0 !important; object-fit: contain; }
.hz-reactions button.hz-reactions__open > .hz-reactions__open-icon { display: inline-flex !important; flex: 0 0 1em !important; align-items: center !important; justify-content: center !important; width: 1em !important; min-width: 1em !important; height: 1em !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: 1 !important; transform: none !important; writing-mode: horizontal-tb !important; }
.hz-reactions button.hz-reactions__open--icon-label > .hz-reactions__open-icon.hz-reactions__svg-mask,
.hz-reactions button.hz-reactions__open--icon-label > img.hz-reactions__open-icon {
  width: min(var(--hs-reaction-icon-width, 16px), 16px) !important;
  min-width: min(var(--hs-reaction-icon-width, 16px), 16px) !important;
  height: min(var(--hs-reaction-icon-height, 16px), 16px) !important;
  flex-basis: min(var(--hs-reaction-icon-width, 16px), 16px) !important;
}
.hz-reactions button.hz-reactions__open > img.hz-reactions__open-icon { display: block !important; object-fit: contain; }
.hz-reactions button.hz-reactions__open > .hz-reactions__open-label { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 1.2em; margin: 0 !important; padding: 0 !important; align-items: center; align-self: center; font-size: 14px !important; line-height: 1 !important; white-space: nowrap !important; vertical-align: middle; transform: none !important; writing-mode: horizontal-tb !important; }
.hz-reactions button.hz-reactions__open > .hz-reactions__open-icon:not(.hz-reactions__fa-icon):not(.hz-reactions__icon-img) { display: inline-grid !important; place-items: center !important; align-self: center; line-height: 1 !important; vertical-align: middle; }
.hz-reactions__fa-icon,
.hz-reactions__fa-icon > i {
  display: inline-flex !important;
  width: 1.2em !important;
  min-width: 1.2em !important;
  height: 1.2em !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transform: none !important;
}

.hz-reactions__open .hz-reactions__fa-icon,
.hz-reactions__open .hz-reactions__fa-icon > i,
.hz-reactions__pick .hz-reactions__fa-icon,
.hz-reactions__pick .hz-reactions__fa-icon > i {
  font-size: 18px !important;
}

.hz-reactions__open .hz-reactions__fa-icon,
.hz-reactions__open .hz-reactions__fa-icon > i {
  font-size: inherit !important;
}

.hz-reactions__open-position--left { align-self: flex-start; margin-right: auto !important; margin-left: 0 !important; }
.hz-reactions__open-position--center { align-self: center; margin-right: auto !important; margin-left: auto !important; }
.hz-reactions__open-position--right { align-self: flex-end; margin-right: 0 !important; margin-left: auto !important; }
.hz-reactions__open-position--custom { align-self: auto; margin-right: 0; margin-left: 0; }

.hz-reactions__bar-position--left { align-self: flex-start; margin-right: auto; margin-left: 0; }
.hz-reactions__bar-position--center { align-self: center; margin-right: auto; margin-left: auto; }
.hz-reactions__bar-position--right { align-self: flex-end; margin-right: 0; margin-left: auto; }
.hz-reactions__bar-position--custom { align-self: auto; margin-right: 0; margin-left: 0; }

/* ==========================
   横書き：右寄せ（バー + ＋ を横並び）
========================== */
#type-works.horizontal .hz-reactions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
}

#type-works.horizontal .hz-reactions__bar {
  flex-direction: row;
  align-items: flex-start;
  height: 50px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/古Edge */
}

#type-works.horizontal .hz-reactions__bar::-webkit-scrollbar {
  display: none;
}

/* ==========================
   縦書き：下寄せ（バーの下に＋、アイコンは縦並び）
   ※「縦並び」はボタンを縦に積む（1列）
========================== */
#type-works.vertical .hz-reactions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 10px 15px;
  width: 71px;
}

#type-works.vertical .hz-reactions__bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
}

#type-works.vertical .hz-reactions__btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 50px;
  min-width: 50px;
  height: 30px;
  gap: 4px;
  grid-template-rows: none;
  margin: 4px 0;
}

#type-works.vertical .hz-reactions__count {
  padding: 2px;
  margin-bottom: 0;
  line-height: 1.6;
}

/* ==========================
   Popup: ここは常に横向き固定（現状OKを維持）
========================== */
.hz-reactions__popup,
.hz-reactions__popup * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* image / svg reaction icons */
.hz-reactions__icon-img {
  width: 1em;
  height: 1em;
  max-width: 16px;
  max-height: 16px;
  flex: 0 0 1em;
  object-fit: contain;
  display: inline-block;
}

.hz-reactions__svg-mask {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  background-color: currentColor;
  -webkit-mask: var(--hs-reaction-svg-icon) center / contain no-repeat;
  mask: var(--hs-reaction-svg-icon) center / contain no-repeat;
}

.hz-reactions__btn > .hz-reactions__svg-mask {
  color: var(--hs-reaction-count-color, #2d3c50);
}

.hz-reactions__pick .hz-reactions__icon-img {
  width: min(var(--hs-reaction-icon-width, 16px), 16px) !important;
  height: min(var(--hs-reaction-icon-height, 16px), 16px) !important;
  flex-basis: min(var(--hs-reaction-icon-width, 16px), 16px) !important;
  align-self: center;
  vertical-align: middle;
}

.hz-reactions__pick .hz-reactions__svg-mask {
  width: min(var(--hs-reaction-icon-width, 16px), 16px) !important;
  height: min(var(--hs-reaction-icon-height, 16px), 16px) !important;
  flex-basis: min(var(--hs-reaction-icon-width, 16px), 16px) !important;
}
.hs-reaction-count,
.hs-reaction-count__item {
  display: inline-flex;
  align-items: center;
}

.hs-reaction-count {
  flex-wrap: wrap;
  gap: .45em;
}

.hs-reaction-count__item {
  gap: .2em;
  line-height: 1;
}

.hs-reaction-count__item img,
.hs-reaction-count__item svg {
  width: 1em;
  height: 1em;
  object-fit: contain;
}