/* Match action buttons, including explicit opt-ins on custom links. */
@property --hsb-global-action {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

html body.hsb-global-buttons :is(#hsb-button-priority, a, button, input, span, div, [data-hsb-global-button]):is(
  button, input:is([type="submit"], [type="button"], [type="reset"]),
  .wpforms-submit, .elementor-button, .wp-block-button__link,
  a.button, button.button, .ast-button, .wp-element-button, a[role="button"],
  .hhe-btn, .hsb-service-cta, .plugin-hf-button, .plugin-hf-extra-button, .plugin-hf-cta-button,
  [data-hsb-global-button]
):not(:where(
  [data-hsb-button-ignore], [data-hsb-button-ignore] *,
  [aria-expanded], [aria-controls], [aria-haspopup], [role="tab"], [role="switch"],
  .hhe-arrow, .hhe-dots *, .hhe-feature-dots *, .elementor-swiper-button,
  .plugin-hf-mobile-toggle, .plugin-hf-submenu-toggle, .dialog-close-button,
  .hsb-services-arrow, .hsb-services-dots *, .bae-toggle__button,
  .hiperall-jg-tabs-arrow, .hiperall-jg-project-preview, .plugin-hf-modal-close,
  .hsb-popup-close, .mfp-close, .pswp__button, .swiper-pagination *,
  #wpadminbar *, .elementor-editor-element-settings *, .elementor-add-section-inner *, .elementor-select-preset *, .e-con-select-type *
)),
.hsb-button-sample {
  --hsb-global-action: 1;
  background-color: var(--hsb-button-background) !important;
  background-image: var(--hsb-button-fill, none) !important;
  background-size: var(--hsb-fill-size, auto) !important;
  background-position: var(--hsb-fill-position, center);
  background-repeat: var(--hsb-fill-repeat, no-repeat) !important;
  box-shadow: var(--hsb-button-shadow, none);
  color: var(--hsb-button-text) !important;
  border-color: var(--hsb-border-color, var(--hsb-button-background)) !important;
  border-width: var(--hsb-border-width, 2px) !important;
  border-style: solid !important;
  border-radius: var(--hsb-button-radius) !important;
}

@layer hsb-header-footer-buttons {
a[data-hsb-hf-action]:not(:where([data-hsb-button-ignore], [data-hsb-button-ignore] *)),
body.hsb-global-buttons a.plugin-hf-extra-button:not(:where([data-hsb-button-ignore], [data-hsb-button-ignore] *)),
#plugin-hf-editor.hsb-global-buttons-preview .plugin-hf-preview [data-hsb-global-button] {
  --hsb-global-action: 1;
  background-color: var(--hsb-button-background) !important;
  background-image: var(--hsb-button-fill, none) !important;
  background-size: var(--hsb-fill-size, auto) !important;
  background-position: var(--hsb-fill-position, center);
  background-repeat: var(--hsb-fill-repeat, no-repeat) !important;
  box-shadow: var(--hsb-button-shadow, none);
  color: var(--hsb-button-text) !important;
  border-color: var(--hsb-border-color, var(--hsb-button-background)) !important;
  border-width: var(--hsb-border-width, 2px) !important;
  border-style: solid !important;
  border-radius: var(--hsb-button-radius) !important;
}
}
a[data-hsb-hf-action]:not(:where([data-hsb-button-ignore], [data-hsb-button-ignore] *)),
body.hsb-global-buttons a.plugin-hf-extra-button:not(:where([data-hsb-button-ignore], [data-hsb-button-ignore] *)),
#plugin-hf-editor.hsb-global-buttons-preview .plugin-hf-preview [data-hsb-global-button] {
  box-shadow: var(--hsb-button-shadow, none);
  background-position: var(--hsb-fill-position, center);
}


body.hsb-global-buttons :is(.hhe-btn-2, .plugin-hf-cta-button.is-secondary),
a[data-hsb-hf-action="secondary"],
#plugin-hf-editor.hsb-global-buttons-preview .plugin-hf-preview [data-hsb-secondary] {
  --hsb-custom-base: var(--hsb-opposite-base);
  --hsb-custom-text: var(--hsb-opposite-text);
  --hsb-custom-accent: var(--hsb-opposite-accent);
  --hsb-custom-highlight: var(--hsb-opposite-highlight);
}

@property --hsb-orbit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:is(.hsb-buttons-preset-sweep, .hsb-buttons-preset-sweep :is(.hsb-button-palette-light, .hsb-button-palette-dark, .hhe-btn-2, .plugin-hf-cta-button.is-secondary, [data-hsb-secondary]), [data-hsb-preset="sweep"]) {
  --hsb-button-background: var(--hsb-custom-base, #4223a6);
  --hsb-button-text: var(--hsb-custom-text, #fff);
  --hsb-button-radius: 28px;
  --hsb-button-fill: linear-gradient(110deg, transparent 38%, var(--hsb-custom-highlight, #ffffff75) 50%, transparent 62%),
    linear-gradient(135deg, var(--hsb-button-background), color-mix(in srgb, var(--hsb-button-background) 74%, var(--hsb-custom-accent, #f342ba)));
  --hsb-fill-size: 280% 100%, 100% 100%;
  --hsb-fill-position: 100% 0, center;
  --hsb-button-shadow: 0 6px 16px #3e27974d;
  --hsb-button-animation: hsb-prism;
}
:is(.hsb-buttons-preset-lift, .hsb-buttons-preset-lift :is(.hsb-button-palette-light, .hsb-button-palette-dark, .hhe-btn-2, .plugin-hf-cta-button.is-secondary, [data-hsb-secondary]), [data-hsb-preset="lift"]) {
  --hsb-button-background: var(--hsb-custom-base, #086759);
  --hsb-button-text: var(--hsb-custom-text, #fff);
  --hsb-button-radius: 8px;
  --hsb-key-base: color-mix(in srgb, var(--hsb-button-background) 60%, var(--hsb-custom-accent, #080b0f));
  --hsb-button-shadow: 0 6px 0 var(--hsb-key-base);
  --hsb-button-animation: hsb-keycap;
}
:is(.hsb-buttons-preset-orbit, .hsb-buttons-preset-orbit :is(.hsb-button-palette-light, .hsb-button-palette-dark, .hhe-btn-2, .plugin-hf-cta-button.is-secondary, [data-hsb-secondary]), [data-hsb-preset="orbit"]) {
  --hsb-button-background: var(--hsb-custom-base, #131326);
  --hsb-button-text: var(--hsb-custom-text, #fff);
  --hsb-button-radius: 15px;
  --hsb-button-fill: linear-gradient(var(--hsb-button-background), var(--hsb-button-background)) padding-box,
    conic-gradient(from 0deg, var(--hsb-custom-accent, #8160fa), var(--hsb-custom-highlight, #4fe9f4), var(--hsb-custom-accent, #8160fa)) border-box;
  --hsb-border-color: transparent;
  --hsb-border-width: 2px;
  --hsb-button-shadow: 0 0 17px #795cff60;
  --hsb-button-animation: hsb-orbit;
}
:is(.hsb-buttons-preset-pulse, .hsb-buttons-preset-pulse :is(.hsb-button-palette-light, .hsb-button-palette-dark, .hhe-btn-2, .plugin-hf-cta-button.is-secondary, [data-hsb-secondary]), [data-hsb-preset="pulse"]) {
  --hsb-button-background: var(--hsb-custom-base, #ae284a);
  --hsb-button-text: var(--hsb-custom-text, #fff);
  --hsb-button-radius: 40px;
  --hsb-sonar-ring: color-mix(in srgb, var(--hsb-custom-accent, var(--hsb-button-background)) 48%, transparent);
  --hsb-button-shadow: 0 0 0 3px var(--hsb-sonar-ring);
  --hsb-button-animation: hsb-sonar;
}
:is(.hsb-buttons-preset-tilt, .hsb-buttons-preset-tilt :is(.hsb-button-palette-light, .hsb-button-palette-dark, .hhe-btn-2, .plugin-hf-cta-button.is-secondary, [data-hsb-secondary]), [data-hsb-preset="tilt"]) {
  --hsb-button-background: var(--hsb-custom-base, #253a61);
  --hsb-button-text: var(--hsb-custom-text, #fff);
  --hsb-button-radius: 2px;
  --hsb-button-fill: linear-gradient(155deg, #ffffff26 32%, transparent 33% 64%, #0002 65%);
  --hsb-button-shadow: 4px 5px 0 var(--hsb-custom-accent, #151e34a6);
  --hsb-button-animation: hsb-fold;
}
:is(.hsb-buttons-preset-signal, .hsb-buttons-preset-signal :is(.hsb-button-palette-light, .hsb-button-palette-dark, .hhe-btn-2, .plugin-hf-cta-button.is-secondary, [data-hsb-secondary]), [data-hsb-preset="signal"]) {
  --hsb-button-background: var(--hsb-custom-base, #f5d532);
  --hsb-button-text: var(--hsb-custom-text, #17130a);
  --hsb-button-radius: 0px;
  --hsb-button-fill: repeating-linear-gradient(125deg, transparent 0 14px, var(--hsb-custom-accent, #ed981b75) 14px 24px);
  --hsb-fill-size: 180% 100%;
  --hsb-fill-repeat: repeat-x;
  --hsb-border-color: var(--hsb-custom-highlight, #17130a);
  --hsb-border-width: 2px;
  --hsb-button-shadow: 3px 4px 0 var(--hsb-custom-highlight, #17130a);
  --hsb-button-animation: hsb-signal;
}

body.hsb-buttons-preset-orbit [data-hsb-button-ready],
#plugin-hf-editor.hsb-buttons-preset-orbit [data-hsb-global-button],
a[data-hsb-hf-action][data-hsb-preset="orbit"],
[data-hsb-preset="orbit"] .hsb-button-sample {
  --hsb-button-fill: linear-gradient(var(--hsb-button-background), var(--hsb-button-background)) padding-box,
    conic-gradient(from var(--hsb-orbit-angle), var(--hsb-custom-accent, #8160fa), var(--hsb-custom-highlight, #4fe9f4), var(--hsb-custom-accent, #8160fa)) border-box;
}

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    #plugin-hf-editor.hsb-global-buttons-preview .plugin-hf-preview [data-hsb-global-button]:hover,
    a[data-hsb-hf-action][data-hsb-button-ready]:hover,
    body.hsb-global-buttons [data-hsb-button-ready]:hover:not(:disabled, [aria-disabled="true"]),
    .hsb-button-choice:hover .hsb-button-sample,
    .hsb-button-stage .hsb-button-sample:hover {
      animation: var(--hsb-button-animation) 300ms ease-out;
    }
  }

  a[data-hsb-hf-action][data-hsb-button-ready].hsb-button-tap,
  body.hsb-global-buttons [data-hsb-button-ready].hsb-button-tap,
  #plugin-hf-editor.hsb-global-buttons-preview .plugin-hf-preview [data-hsb-global-button].hsb-button-tap,
  .hsb-button-stage .hsb-button-sample.hsb-button-tap {
    animation: var(--hsb-button-animation) 150ms ease-out;
  }
}

body.hsb-global-buttons [data-hsb-button-ready]:focus-visible,
.hsb-button-sample:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@keyframes hsb-prism {
  from { background-position: 100% 0, center; }
  to { background-position: 0 0, center; }
}
@keyframes hsb-keycap {
  55% { translate: 0 5px; box-shadow: 0 1px 0 var(--hsb-key-base); }
}
@keyframes hsb-orbit {
  to { --hsb-orbit-angle: 360deg; box-shadow: 0 0 24px #846eff99; }
}
@keyframes hsb-sonar {
  0% { box-shadow: 0 0 0 0 var(--hsb-sonar-ring), 0 0 0 0 var(--hsb-sonar-ring); }
  60% { box-shadow: 0 0 0 6px var(--hsb-sonar-ring), 0 0 0 13px #0000; }
  100% { box-shadow: 0 0 0 12px #0000, 0 0 0 18px #0000; }
}
@keyframes hsb-fold {
  50% { transform: perspective(320px) rotateX(-19deg) rotateY(13deg); box-shadow: 7px 9px 0 var(--hsb-custom-accent, #151e34a6); }
}
@keyframes hsb-signal {
  45% { background-position: 48px 0; translate: 2px -2px; }
  80% { background-position: 90px 0; }
}

.hsb-buttons-own-preview { display: none; }
.hsb-admin:has([data-feature-subpanel="buttons"].is-active) .hsb-buttons-social-preview { display: none; }
.hsb-admin:has([data-feature-subpanel="buttons"].is-active) .hsb-buttons-own-preview { display: block; }
.hsb-button-stage {
  display: grid;
  min-height: 260px;
  place-items: center;
  border: 1px solid #dbe1eb;
  border-radius: 16px;
  background: #fff;
}
.hsb-button-stage.is-dark { background: #111827; }
.hsb-buttons-own-preview [aria-pressed="true"] { background: #efebff; border-color: #754afa; }
.hsb-button-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
  gap: 12px;
  margin: 18px 0;
}
.hsb-button-choice {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  border: 1px solid #dbe1eb;
  border-radius: 12px;
  background: #f7f8fc;
  cursor: pointer;
}
.hsb-button-choice:has(input:checked) { border-color: #754afa; background: #f1edff; }
.hsb-button-choice small { color: #4c576e; }
.hsb-button-sample {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .8em;
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  border: 2px solid transparent;
  font: 700 14px/1.35 system-ui, sans-serif;
}
.hsb-button-stage .hsb-button-sample { padding: 15px 26px; cursor: pointer; }
.hsb-button-color-fields { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.hsb-button-color-fields[hidden], [data-hsb-button-colors][hidden] { display: none !important; }

.hsb-button-palette[hidden] { display: none !important; }
.hsb-button-color-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

:is(.hsb-buttons-preset-liquid, .hsb-buttons-preset-liquid :is(.hsb-button-palette-light, .hsb-button-palette-dark, .hhe-btn-2, .plugin-hf-cta-button.is-secondary, [data-hsb-secondary]), [data-hsb-preset="liquid"]) {
  --hsb-button-background: var(--hsb-custom-base, #173c81);
  --hsb-button-text: var(--hsb-custom-text, #fff);
  --hsb-button-radius: 36px 14px 30px 18px;
  --hsb-button-fill: radial-gradient(ellipse at 48% 95%, var(--hsb-custom-accent, #b456ff), transparent 65%);
  --hsb-fill-size: 165% 185%;
  --hsb-fill-position: 65% 25%;
  --hsb-button-animation: hsb-liquid;
}
:is(.hsb-buttons-preset-stamp, .hsb-buttons-preset-stamp :is(.hsb-button-palette-light, .hsb-button-palette-dark, .hhe-btn-2, .plugin-hf-cta-button.is-secondary, [data-hsb-secondary]), [data-hsb-preset="stamp"]) {
  --hsb-button-background: var(--hsb-custom-base, #fff0d5);
  --hsb-button-text: var(--hsb-custom-text, #5f2340);
  --hsb-button-radius: 5px;
  --hsb-border-color: var(--hsb-custom-accent, #8a3455);
  --hsb-border-width: 2px;
  --hsb-button-shadow: inset 0 0 0 2px var(--hsb-button-background), inset 0 0 0 3px var(--hsb-border-color);
  --hsb-button-animation: hsb-stamp;
}
@keyframes hsb-liquid {
  55% { background-position: 35% 92%; scale: 1.05 .92; }
}
@keyframes hsb-stamp {
  40% { rotate: -5deg; scale: .91; }
  75% { rotate: 1deg; scale: 1.03; box-shadow: var(--hsb-button-shadow), 0 0 0 4px color-mix(in srgb, var(--hsb-border-color) 28%, transparent); }
}