/* templates/blocks/button/style.css — v3.2.1
   Multi buttons in one block: 1 row / wrap / 2 columns / stack, per-button style. */

.pf-buttons-group {
  display: flex;
  align-items: center;
  justify-content: var(--btng-jc, center);
  gap: var(--btng-gap, 16px);
  row-gap: var(--btng-row-gap, 12px);
  box-sizing: border-box;
  max-width: 100%;
}

.pf-buttons-group.layout-row {
  flex-wrap: nowrap;
}

.pf-buttons-group.layout-wrap {
  flex-wrap: wrap;
}

.pf-buttons-group.layout-stack {
  flex-direction: column;
  align-items: var(--btng-ai, center);
}

.pf-buttons-group.layout-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: var(--btng-jc, center);
  align-items: center;
  column-gap: var(--btng-gap, 16px);
  row-gap: var(--btng-row-gap, 12px);
}

.pf-btn-wrapper {
  display: var(--wrap-d, inline-flex) !important;
  width: var(--wrap-w, auto) !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); }

.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;
}

/* Builder/frontend compatibility wrappers */
.b-node[data-block="button"],
.pf-block[data-block="button"],
.pf-builder-block[data-block="button"],
.pf-render-block[data-block="button"],
.block-item[data-block="button"],
.template-block[data-block="button"],
[data-block-type="button"],
[data-type="button"] {
  max-width: 100%;
}

/* Utility classes for rows/columns if used outside this block */
.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.center,
.pf-button-row.center,
.pf-buttons-inline.center { justify-content: center !important; }

.button-inline-row.right,
.pf-button-row.right,
.pf-buttons-inline.right { justify-content: flex-end !important; }

@media (max-width: 640px) {
  .pf-buttons-group.layout-row {
    flex-wrap: wrap;
  }
  .pf-buttons-group.layout-grid2 {
    grid-template-columns: 1fr;
  }
}