/* Dedicated Huly-style CTA button (inner light + outer halo)
   HTML structure should look like:

   <div class="button-shell">
     <div class="button-ring border-button-light-blur" id="ringLeft">
       <div class="border-button-light" style="height:100%;width:100%;border-radius:9999px;"></div>
     </div>

     <div class="button-ring button-ring--right border-button-light-blur" id="ringRight" style="opacity:0;">
       <div class="border-button-light" style="height:100%;width:100%;border-radius:9999px;"></div>
     </div>

     <a href="#act4" class="huly-btn" id="hulyButton">
       <div class="huly-btn-inner" id="hulyInner"></div>
       Initiate booking
       <span class="huly-btn-arrow">➜</span>
     </a>
   </div>
*/

/* Shell around the button */
.button-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Outer halos */
.button-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  height: calc(100% + 9px);
  width: calc(100% + 9px);
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  will-change: transform, opacity;
  transition: opacity 0.2s ease-out;
}

.button-ring--right {
  transform: translate(-50%, -50%) scaleX(-1);
}

/* Gradient border + glow around the ring */
.border-button-light {
  position: relative;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(
      103.7deg,
      rgba(210, 192, 166, 0.1) 38.66%,
      rgba(233, 132, 99, 0.1) 68.55%,
      #e98463 85.01%,
      #ffffff 92.12%
    ) border-box;
}

.border-button-light::before {
  content: "";
  position: absolute;
  left: -0.125rem;
  top: -0.125rem;
  z-index: 30;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  filter: blur(7px);
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(
      91.96deg,
      rgba(255, 177, 153, 0) 6.11%,
      rgba(255, 177, 153, 0.2) 53.57%,
      #ff7950 93.6%
    ) border-box;
}

.border-button-light-blur {
  position: relative;
  border-radius: 9999px;
  border-width: 3px;
  border-style: solid;
  border-color: transparent;
}

.border-button-light-blur::before,
.border-button-light-blur::after {
  content: "";
  position: absolute;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  border-style: solid;
  border-color: transparent;
  filter: blur(2px);
}

.border-button-light-blur::before {
  left: -0.125rem;
  top: -0.125rem;
  z-index: 10;
  border-width: 2px;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(
      97.68deg,
      rgba(255, 177, 153, 0) 38.1%,
      rgba(255, 177, 153, 0.2) 82.47%,
      #ff7950 93.3%
    ) border-box;
}

.border-button-light-blur::after {
  left: -3px;
  top: -3px;
  z-index: 20;
  border-width: 3px;
  filter: blur(15px);
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(
      91.88deg,
      rgba(255, 137, 100, 0.2) 46.45%,
      #cd3100 98.59%
    ) border-box;
}

/* Main button */
.huly-btn {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 40px;
  padding: 0 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: #d1d1d1;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none; /* important for <a> */
  padding: 0 3.5rem;
  white-space: nowrap;
  min-width: 230px; /* tweak to taste */
}

.huly-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 45px rgba(255, 152, 92, 0.75),
    0 24px 70px rgba(0, 0, 0, 1);
}

/* Inner moving orange glow (solid + soft blur) */
.huly-btn-inner {
  position: absolute;
  z-index: -10;
  display: flex;
  width: 204px;
  align-items: center;
  justify-content: center;
  transform: translateX(105px) translateZ(0);
  transition: transform 0.25s ease-out;
}

.huly-btn-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 121px;
  height: 121px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    #fffff5 3.5%,
    #ffaa81 26.5%,
    #ffda9f 37.5%,
    rgba(255, 170, 129, 0.5) 49%,
    rgba(210, 106, 58, 0) 92.5%
  );
}

.huly-btn-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 204px;
  height: 103px;
  filter: blur(5px);
  background: radial-gradient(
    43.3% 44.23% at 50% 49.51%,
    #fffff7 29%,
    #fffacd 48.5%,
    #f4d2bf 60.71%,
    rgba(214, 211, 210, 0) 100%
  );
}

.huly-btn-arrow {
  display: inline-block;
  font-size: 14px;
  transform: translateY(0.5px);
}