/* templates/blocks/button/style.css — v3.3.0
   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;
  }
}


/* v3.3.0 full icon libraries */
.pf-btn .material-symbols-rounded.pfb-icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: var(--i-size, 18px);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.pf-btn ion-icon.pfb-icon {
  font-size: var(--i-size, 18px);
  width: var(--i-size, 18px);
  height: var(--i-size, 18px);
}


/* v3.4.0 — luxury hover effects, additive only */
.pf-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--btn-hover-speed, .25s) ease,
    background-color var(--btn-hover-speed, .25s) ease,
    border-color var(--btn-hover-speed, .25s) ease,
    transform var(--btn-hover-speed, .25s) ease,
    box-shadow var(--btn-hover-speed, .25s) ease,
    filter var(--btn-hover-speed, .25s) ease,
    opacity var(--btn-hover-speed, .25s) ease !important;
}

.pf-btn-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--btn-hover-overlay, rgba(255,255,255,.16));
  opacity: 0;
  transition: opacity var(--btn-hover-speed, 380ms) ease;
}

.pf-btn-hover::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -55%;
  left: -85%;
  width: 56%;
  height: 210%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.58) 50%, rgba(255,255,255,.10) 70%, transparent 100%);
  transform: skewX(-22deg);
  opacity: 0;
}

.pf-btn .pfb-text,
.pf-btn .pfb-icon,
.pf-btn .pfb-icon-svg {
  position: relative;
  z-index: 2;
  transition:
    transform var(--btn-hover-speed, 380ms) ease,
    color var(--btn-hover-speed, 380ms) ease,
    filter var(--btn-hover-speed, 380ms) ease;
}

.pf-btn-hover:hover {
  box-shadow: var(--btn-hover-shadow, var(--btn-shadow, none)) !important;
}

.pf-btn-hover--lift:hover,
.pf-btn-hover--lux-shine:hover,
.pf-btn-hover--float:hover {
  transform: translateY(calc(var(--btn-hover-lift, 4px) * -1)) rotate(var(--btn-hover-rotate, 0deg));
}

.pf-btn-hover--zoom:hover,
.pf-btn-hover--shine-zoom:hover {
  transform: scale(var(--btn-hover-scale, 1.04)) rotate(var(--btn-hover-rotate, 0deg));
}

.pf-btn-hover--lux-shine:hover {
  transform: translateY(calc(var(--btn-hover-lift, 4px) * -1)) scale(var(--btn-hover-scale, 1.02)) rotate(var(--btn-hover-rotate, 0deg));
  box-shadow:
    var(--btn-hover-shadow, 0 14px 34px rgba(0,0,0,.22)),
    0 0 0 1px var(--btn-hover-glow, rgba(255,255,255,.10)) !important;
}

.pf-btn-hover--overlay:hover::before,
.pf-btn-hover--lux-shine:hover::before {
  opacity: var(--btn-hover-opacity, .55);
}

.pf-btn-hover--shine:hover::after,
.pf-btn-hover--shine-zoom:hover::after,
.pf-btn-hover--lux-shine:hover::after {
  animation: pf-btn-shine var(--btn-hover-speed, 520ms) ease forwards;
  opacity: 1;
}

.pf-btn-hover--pulse:hover {
  animation: pf-btn-pulse 900ms ease both;
}

.pf-btn-hover--glow:hover {
  box-shadow:
    var(--btn-hover-shadow, var(--btn-shadow, none)),
    0 0 24px var(--btn-hover-glow, var(--btn-hover-overlay, rgba(255,255,255,.25))) !important;
}

.pf-btn-hover--icon-slide:hover .pfb-icon,
.pf-btn-hover--icon-slide:hover .pfb-icon-svg {
  transform: translateY(var(--i-dy, 0px)) translateX(4px);
}

.pf-btn-hover-target--icon:hover {
  transform: none !important;
}

.pf-btn-hover-target--icon:hover .pfb-icon,
.pf-btn-hover-target--icon:hover .pfb-icon-svg {
  transform: translateY(var(--i-dy, 0px)) translateX(4px) scale(var(--btn-hover-scale, 1.08));
}

.pf-btn-hover--grayscale {
  filter: grayscale(1);
}

.pf-btn-hover--grayscale:hover {
  filter: grayscale(0);
}

.pf-btn-hover--blur:hover {
  filter: blur(.6px) brightness(.96);
}

@keyframes pf-btn-shine {
  0% { left: -85%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

@keyframes pf-btn-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(var(--btn-hover-scale, 1.05)); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-btn,
  .pf-btn .pfb-text,
  .pf-btn .pfb-icon,
  .pf-btn .pfb-icon-svg {
    transition: none !important;
  }
  .pf-btn-hover::after {
    animation: none !important;
  }
}