.booking-attractor-section {
  align-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(184, 105, 63, 0.16) 0 12%, transparent 36%),
    linear-gradient(180deg, #efe4d6 0%, #eadfce 100%);
  display: flex;
  justify-content: center;
  min-height: clamp(168px, 18vw, 236px);
  overflow: hidden;
  padding: clamp(34px, 6vw, 72px) 20px;
  position: relative;
  z-index: auto;
}

.booking-attractor-section::before,
.booking-attractor-section::after {
  border: 1px solid rgba(184, 105, 63, 0.22);
  border-radius: 999px;
  content: "";
  height: clamp(132px, 17vw, 214px);
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  width: min(620px, calc(100vw - 42px));
  z-index: 1;
  animation: booking-attractor-ring 3.6s ease-out infinite;
}

.booking-attractor-section::after {
  animation-delay: 1.8s;
  border-color: rgba(217, 191, 143, 0.26);
}

.booking-attractor-button {
  align-items: center;
  background: linear-gradient(135deg, #17120f 0%, #6f3327 100%);
  border: 1px solid rgba(255, 250, 243, 0.62);
  border-radius: 6px;
  box-shadow:
    0 20px 52px rgba(23, 18, 15, 0.28),
    0 0 0 8px rgba(184, 105, 63, 0.12),
    0 0 38px rgba(217, 191, 143, 0.2);
  color: #fffaf3;
  display: inline-flex;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 900;
  justify-content: center;
  letter-spacing: 0.12em;
  isolation: isolate;
  min-height: 62px;
  min-width: min(390px, calc(100vw - 48px));
  overflow: hidden;
  padding: 0 34px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 180ms ease, transform 180ms ease;
  z-index: 6;
  animation: booking-button-breathe 2.8s ease-in-out infinite;
}

.booking-attractor-button::before,
.booking-attractor-button::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.booking-attractor-button::before {
  background:
    linear-gradient(105deg, transparent 0 34%, rgba(255, 250, 243, 0.4) 45%, rgba(217, 191, 143, 0.2) 51%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(217, 191, 143, 0.18), transparent 64%);
  border-radius: inherit;
  opacity: 0.82;
  transform: translateX(-120%);
  z-index: -1;
  animation: booking-button-shine 3.4s ease-in-out infinite;
}

.booking-attractor-button::after {
  border: 1px solid rgba(217, 191, 143, 0.44);
  border-radius: inherit;
  box-shadow: inset 0 0 18px rgba(255, 250, 243, 0.12);
  z-index: 1;
}

.booking-attractor-button:hover,
.booking-attractor-button:focus-visible {
  box-shadow:
    0 24px 62px rgba(23, 18, 15, 0.34),
    0 0 0 10px rgba(184, 105, 63, 0.17),
    0 0 52px rgba(217, 191, 143, 0.26);
  transform: translateY(-2px);
}

.rosefall {
  contain: layout style paint;
  height: var(--rosefall-height, 100vh);
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

.rose-bloom {
  --fall-size: 20px;
  --fall-spin: 1;
  --rose-mid-opacity: 0.215;
  --rose-peak-opacity: 0.25;
  animation: rose-fall var(--fall-duration) linear var(--fall-delay) infinite;
  filter: blur(0.3px) drop-shadow(0 8px 10px rgba(23, 18, 15, 0.12));
  height: calc(var(--fall-size) * 1.26);
  left: var(--fall-x);
  opacity: 0;
  position: absolute;
  top: 0;
  transform-origin: 50% 45%;
  width: var(--fall-size);
  will-change: transform, opacity;
}

.rose-bloom::before {
  background:
    radial-gradient(circle at 50% 50%, #5f0f1f 0 16%, transparent 18%),
    radial-gradient(ellipse at 42% 34%, #d84c64 0 25%, transparent 27%),
    radial-gradient(ellipse at 62% 36%, #a91f3b 0 27%, transparent 29%),
    radial-gradient(ellipse at 35% 58%, #8f1930 0 28%, transparent 30%),
    radial-gradient(ellipse at 66% 61%, #c7314e 0 26%, transparent 28%),
    radial-gradient(ellipse at 50% 72%, #741323 0 23%, transparent 25%);
  border-radius: 48% 52% 54% 46%;
  content: "";
  inset: 0 0 26%;
  position: absolute;
  transform: rotate(-10deg);
}

.rose-bloom::after {
  background:
    radial-gradient(ellipse at 24% 38%, #607845 0 24%, transparent 26%),
    linear-gradient(160deg, transparent 0 34%, #405632 35% 58%, transparent 60%);
  content: "";
  inset: 54% 4% 0 32%;
  position: absolute;
  transform: rotate(18deg);
}

@keyframes rose-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -14vh, 0) rotate(0deg) scale(0.86);
  }

  8% {
    opacity: var(--rose-peak-opacity);
  }

  46% {
    opacity: var(--rose-mid-opacity);
    transform: translate3d(calc(var(--fall-drift) * -0.45), var(--fall-mid-y), 0) rotate(calc(var(--fall-spin) * 190deg)) scale(1);
  }

  78% {
    opacity: var(--rose-peak-opacity);
    transform: translate3d(var(--fall-near-target-x), var(--fall-near-target-y), 0) rotate(calc(var(--fall-spin) * 340deg)) scale(0.92);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--fall-target-x), var(--fall-target-y), 0) rotate(calc(var(--fall-spin) * 520deg)) scale(0.18);
  }
}

@keyframes booking-button-breathe {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.09);
  }
}

@keyframes booking-button-shine {
  0%,
  38% {
    transform: translateX(-120%);
  }

  64%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes booking-attractor-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.68);
  }

  18% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.16);
  }
}

@media (max-width: 680px) {
  .booking-attractor-section {
    min-height: 156px;
    padding-bottom: 44px;
    padding-top: 44px;
  }

  .booking-attractor-button {
    letter-spacing: 0.08em;
    min-height: 56px;
    min-width: min(310px, calc(100vw - 42px));
    padding: 0 22px;
  }

  .rose-bloom {
    --rose-mid-opacity: 0.17;
    --rose-peak-opacity: 0.21;
    filter: blur(0.4px) drop-shadow(0 6px 8px rgba(23, 18, 15, 0.1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-attractor-button,
  .booking-attractor-button::before,
  .booking-attractor-section::before,
  .booking-attractor-section::after {
    animation: none;
  }
}