{% scope_css %}

/* =========================
   THESE ARE THE SETTINGS (editable via fields)
   ========================= */
.hs-btn-swap{
  /* Fill */
  --btn-bg: rgba(, );
  --btn-bg-hover: rgba(, );

  /* Border */
  --btn-border: rgba(, );
  --btn-border-hover: rgba(, );

  /* Text */
  --btn-text: rgba(, );

  /* Shape */
  --btn-border-width: px;
  --btn-radius: ;

  /* Type */
  --btn-font: ;
  --btn-font-weight: ;

  /* Responsive sizing (auto adjusts by screen) */
  --btn-font-size: clamp(36px, 3.2vw, 28px);
  --btn-padding-y: clamp(25px, 1.6vw, 14px);
  --btn-padding-x: clamp(14px, 2.2vw, 22px);
}

/* =========================
   BUTTON STYLES (don’t touch)
   ========================= */
.hs-btn-swap{
  font-family: var(--btn-font) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;

  padding: var(--btn-padding-y) var(--btn-padding-x) !important;
  background: var(--btn-bg) !important;

  color: var(--btn-text) !important;
  text-decoration: none !important;
  cursor: pointer;

  border: var(--btn-border-width) solid var(--btn-border) !important;
  border-radius: var(--btn-radius) !important;

  /* Fill the module/container and center text */
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;

  display: inline-grid !important;
  place-items: center !important;
  text-align: center;

  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

/* Stack labels in same grid cell */
.hs-btn-swap__sizer,
.hs-btn-swap__text{
  grid-area: 1 / 1;

  /* Allow wrapping so it fits container */
  white-space: normal !important;
  text-align: center;
  line-height: 1.15;

  color: var(--btn-text) !important;
  font-family: var(--btn-font) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;

  transition: opacity .15s ease;
}

/* Hidden sizer controls the "max" height/width on desktop */
.hs-btn-swap__sizer{
  visibility: hidden;
  pointer-events: none;
}

/* Swap text on hover */
.hs-btn-swap__text--hover{ opacity: 0; }

.hs-btn-swap:hover,
.hs-btn-swap:focus-visible{
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-border-hover) !important;
}

.hs-btn-swap:hover .hs-btn-swap__text--default,
.hs-btn-swap:focus-visible .hs-btn-swap__text--default{
  opacity: 0;
}

.hs-btn-swap:hover .hs-btn-swap__text--hover,
.hs-btn-swap:focus-visible .hs-btn-swap__text--hover{
  opacity: 1;
}

/* Optional: press + focus */
.hs-btn-swap:active{ transform: translateY(1px); }

.hs-btn-swap:focus-visible{
  outline: 3px solid rgba(255,255,255,.45);
  outline-offset: 3px;
}

/* MOBILE: no true hover + hover label is longer (hide it) */
@media (max-width: 768px){
  .hs-btn-swap__text--hover{
    display: none !important;
    opacity: 0 !important;
  }

  .hs-btn-swap__text--default{
    opacity: 1 !important;
  }

  .hs-btn-swap__sizer{
    display: none !important;
  }
}

{% end_scope_css %}