/* templates/blocks/button/style.css — v3.1.2
   Fix: inline buttons render cùng hàng ở Builder + Frontend, background/border transparent thật. */

.pf-btn-wrapper {
  display: var(--wrap-d, flex) !important;
  width: var(--wrap-w, 100%) !important;
  box-sizing: border-box !important;
  justify-content: var(--btn-jc, flex-start) !important;
  margin: var(--btn-mt, 0) var(--btn-mr, 0) var(--btn-mb, 0) var(--btn-ml, 0);
  vertical-align: middle;
}

.pf-btn {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box;
  justify-content: var(--btn-jc-inner, center) !important;
  text-align: var(--btn-ta, center) !important;

  width: var(--btn-w, auto) !important;
  min-width: var(--btn-minw, 0px);
  padding: var(--btn-py, 10px) var(--btn-px, 16px);

  color: var(--btn-c, #ffffff);
  background: var(--btn-bg, transparent);
  border: var(--btn-bw, 1px) solid var(--btn-bc, transparent);
  border-radius: var(--btn-rad, 8px);
  box-shadow: var(--btn-shadow, none);

  font-size: var(--btn-fs, inherit);
  font-weight: var(--btn-fw, 600);
  font-style: var(--btn-fst, normal);
  line-height: var(--btn-lh, inherit);
  letter-spacing: var(--btn-ls, normal);
  text-transform: var(--btn-tt, none);

  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.25s ease;
}

.pf-btn:hover {
  color: var(--btn-hc, var(--btn-c, #ffffff)) !important;
  background: var(--btn-hbg, var(--btn-bg, transparent)) !important;
  border-color: var(--btn-hbc, var(--btn-bc, transparent)) !important;
}

.pf-btn .pfb-icon,
.pf-btn .pfb-icon-svg {
  color: var(--i-color, currentColor);
  font-size: var(--i-size, 18px);
  width: var(--i-size, 18px);
  height: var(--i-size, 18px);
  line-height: 1;
  transform: translateY(var(--i-dy, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.25s ease;
}

.pf-btn:hover .pfb-icon,
.pf-btn:hover .pfb-icon-svg {
  color: var(--i-hcolor, var(--i-color, currentColor)) !important;
}

.pf-btn .pfb-text + .pfb-icon,
.pf-btn .pfb-text + .pfb-icon-svg { margin-left: var(--i-gap, 8px); }

.pf-btn .pfb-icon + .pfb-text,
.pf-btn .pfb-icon-svg + .pfb-text { margin-left: var(--i-gap, 8px); }

.b-node[data-block="button"][data-display="inline"] {
  display: inline-block !important;
  width: auto !important;
  vertical-align: top;
  margin-right: 8px;
}
.b-node[data-block="button"][data-display="inline"] > .b-block-preview {
  display: inline-block !important;
  width: auto !important;
}


/* v3.1.2 — Inline buttons: Builder + Frontend
   Khi Display mode = Inline, button có thể đứng cùng hàng kể cả khi renderer bọc ngoài bằng block wrapper. */
.pf-btn-wrapper.is-inline,
.pf-btn-wrapper[data-display="inline"],
.pf-btn-wrapper[style*="--wrap-d:inline-flex"] {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  vertical-align: middle !important;
}

.pf-btn-wrapper.is-inline .pf-btn,
.pf-btn-wrapper[data-display="inline"] .pf-btn,
.pf-btn-wrapper[style*="--wrap-d:inline-flex"] .pf-btn {
  width: auto !important;
}

/* Nếu ngoài frontend có wrapper cha cho từng block button thì ép wrapper cha thành inline-block */
.b-node[data-block="button"][data-display="inline"],
.pf-block[data-block="button"][data-display="inline"],
.pf-builder-block[data-block="button"][data-display="inline"],
.pf-render-block[data-block="button"][data-display="inline"],
.block-item[data-block="button"][data-display="inline"],
.template-block[data-block="button"][data-display="inline"],
[data-block-type="button"][data-display="inline"],
[data-type="button"][data-display="inline"] {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  vertical-align: middle !important;
  margin-right: 12px;
}

.b-node[data-block="button"][data-display="inline"] > .b-block-preview,
.pf-block[data-block="button"][data-display="inline"] > .b-block-preview,
.pf-builder-block[data-block="button"][data-display="inline"] > .b-block-preview,
.pf-render-block[data-block="button"][data-display="inline"] > .b-block-preview {
  display: inline-block !important;
  width: auto !important;
}

/* Trường hợp wrapper cha không có data-display nhưng chứa trực tiếp button inline */
.b-node[data-block="button"]:has(> .b-block-preview > .pf-btn-wrapper.is-inline),
.pf-block:has(> .pf-btn-wrapper.is-inline),
.pf-builder-block:has(> .pf-btn-wrapper.is-inline),
.pf-render-block:has(> .pf-btn-wrapper.is-inline),
.block-item:has(> .pf-btn-wrapper.is-inline),
.template-block:has(> .pf-btn-wrapper.is-inline) {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  vertical-align: middle !important;
  margin-right: 12px;
}

/* Class gắn ở Inner Row/Column nếu anh muốn chủ động gom nhiều button thành 1 hàng */
.button-inline-row,
.pf-button-row,
.pf-buttons-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.button-inline-row .pf-btn-wrapper.is-inline,
.pf-button-row .pf-btn-wrapper.is-inline,
.pf-buttons-inline .pf-btn-wrapper.is-inline {
  margin-right: 0 !important;
}