.auth-buttons-container{
  gap: 12px;
}
.custom-btn-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

.custom-btn-wrapper::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid transparent;
  border-radius: 16px;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* .custom-btn-wrapper:focus-within::after {
  border-color: #81C1FD;
}
.custom-btn-wrapper:has(.custom-btn--grey)::after {
  border-color: transparent;
}

.custom-btn-wrapper:has(.custom-btn--grey):focus-within::after {
  border-color: transparent;
} */

.custom-btn.slider-btn-width {
  min-width: 181px;
}
.custom-btn.calculator-btn-width {
  min-width: 154px;
}
.custom-btn.grey-btn-width {
  min-width: 151px;
}
.custom-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 8px 24px !important;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
  outline: none;
  box-sizing: border-box;
}
/* labels longer than a fixed-size button ellipsize instead of overflowing */
.custom-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* icons keep their size — only the text label gives way */
.custom-btn > img {
  flex-shrink: 0;
}

/* ptimary */
.custom-btn--primary {
  background: transparent;
  color: #fff;
  border: 1px solid #E87722;
  overflow: hidden;
}

/* reverse of the secondary hover: the orange fill slides out left-to-right,
   leaving the outlined look while the secondary button fills in */
.custom-btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #E87722;
  z-index: -1;
  transition: width 0.3s ease-out;
}

.custom-btn--primary:hover {
  background: transparent;
  color: #E87722;
}

.custom-btn--primary:hover::before {
  width: 0%;
}

.custom-btn--primary:active {
  background: transparent;
  color: #fff;
}

.custom-btn--primary:active::before {
  width: 100%;
  background-color: #A55418;
}

/* img icons can't inherit the text color — recolor them through the hover swap.
   The resting filter renders the icon white but mirrors the hover list function
   by function, so the transition interpolates white → orange without the muddy
   in-between colors you get animating from `filter: none` */
.custom-btn--primary img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(100%)
    hue-rotate(343deg) brightness(100%) contrast(100%);
  transition: filter 0.3s ease;
}
/* hover: same orange as the hovered text */
.custom-btn--primary:hover img {
  filter: brightness(0) saturate(100%) invert(41%) sepia(100%) saturate(400%)
    hue-rotate(343deg) brightness(107%) contrast(101%);
}
/* pressed: white text on the dark fill again */
.custom-btn--primary:active img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(100%)
    hue-rotate(343deg) brightness(100%) contrast(100%);
}

.custom-btn--primary:focus,
.custom-btn--primary:focus-visible {
  outline: none;
  box-shadow: none;
}
/* primary */

/* secondary */
.custom-btn--secondary {
  background: transparent;
  color: #E87722;
  border: 1px solid #E87722;
  overflow: hidden;
}

/* focus MUST come before hover/active: a just-clicked button keeps :focus,
   and if this block sits after :hover in the file, focus's orange text wins
   over hover's white and vanishes against the orange hover fill */
.custom-btn--secondary:focus,
.custom-btn--secondary:focus-visible {
  background: transparent;
  color: #E87722;
  border: 1px solid #E87722;
  outline: none;
  box-shadow: none;
}

/* fill slides in from the left on hover */
.custom-btn--secondary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background-color: #E87722;
  z-index: -1;
  transition: width 0.3s ease-out;
}

.custom-btn--secondary:hover {
  background: transparent;
  color: #FEFEFE;
  border: 1px solid #E87722;
}

.custom-btn--secondary:hover::before {
  width: 100%;
}

.custom-btn--secondary:active {
  background: transparent;
  color: #FEFEFE;
  border: 1px solid #C5651D;
}

.custom-btn--secondary:active::before {
  background-color: #C5651D;
}

/* icons follow the text to white when the orange fill slides in
   (no filter transition — animating from an unknown icon color
   passes through muddy shades) */
.custom-btn--secondary:hover img,
.custom-btn--secondary:active img {
  filter: brightness(0) invert(1);
}
/* secondary */

/* grey */
.custom-btn--grey {
  background: #F0F0F0;
  color: #393939;
  border: 3px solid #F0F0F0;
  border-radius: 8px;
}

.custom-btn--grey:focus,
.custom-btn--grey:focus-visible {
  background: #F0F0F0;
  color: #393939;
  border: 3px solid #F0F0F0;
  outline: none;
  box-shadow: none;
}

/* hover/active come after focus so a focused button still reacts to hover */
.custom-btn--grey:hover {
  background: #E87722;
  color: #FFFFFF;
  border: 3px solid #E87722;
}

.custom-btn--grey:active {
  background: #C5651D;
  color: #FFFFFF;
  border: 3px solid #C5651D;
}
/* grey */

.custom-btn--danger {
  background: #dc2626;
  color: #fff;
}

.custom-btn--success {
  background: #34B78F;
  color: #fff;
  border: 1px solid transparent;
}

.custom-btn--success:hover {
  background: #2C9D7A;
  color: #fff;
}

.custom-btn--success:active {
  background: #248564;
  color: #fff;
}

.custom-btn--success:focus,
.custom-btn--success:focus-visible {
  outline: none;
  box-shadow: none;
}

.custom-btn:disabled,
.custom-btn[disabled] {
  background: #EBEDEF !important;
  border-color: #EBEDEF !important;
  color: #A2AAAD !important;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* the hover-fill layer would paint over the disabled grey background */
.custom-btn:disabled::before,
.custom-btn[disabled]::before {
  content: none;
}

/* disabled icons go grey with the text instead of keeping their own color */
.custom-btn:disabled img,
.custom-btn[disabled] img {
  filter: grayscale(1) brightness(1.4);
}

.custom-btn--primary:disabled,
.custom-btn--primary[disabled] {
  background: #EBEDEF !important;
  border-color: #EBEDEF !important;
  color: #A2AAAD !important;
}

/* Business header buttons responsive width */
.business-buttons {
  width: 100%;
}

@media (max-width: 767.98px) {
  .business-buttons > .custom-btn-wrapper {
    width: 100% !important;
  }

  .business-buttons > .custom-btn-wrapper > .business-responsive-btn {
    width: 100% !important;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .business-buttons > .custom-btn-wrapper {
    width: auto;
  }

  .business-buttons > .custom-btn-wrapper > .business-responsive-btn {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .custom-btn {
    padding: 8px 16px !important;
  }
}

@media (min-width: 1200px) {
  .custom-btn.slider-btn-width {
    min-width: 296px;
    font-size: 16px;
  }
  .custom-btn.calculator-btn-width {
    min-width: 211px;
    height: 56px;
  }
  .custom-btn.grey-btn-width{
    min-width: 190px;
    height: 51px;
  }
}