/* ============================================
   CTA Button Widget — Elementor
   ============================================ */

.cta-btn-wrapper {
  display: flex;
  width: 100%;
}

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 16px 32px;
  background-color: #08234E;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  border: 0 solid transparent;
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    border-radius 0.35s ease,
    padding 0.35s ease,
    transform 0.2s ease;
  -webkit-font-smoothing: antialiased;
}

.cta-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

/* Text */
.cta-btn__text {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  transition: color 0.35s ease;
  white-space: nowrap;
}

/* Arrow wrapper */
.cta-btn__arrow-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Arrow SVG — uses currentColor so it can be overridden */
.cta-btn__arrow {
  display: block;
  width: 14px;
  height: auto;
  flex-shrink: 0;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease;
}

.cta-btn__arrow path {
  transition: fill 0.35s ease;
}

/* ============================================
   ANIMATION: slide  (default — arrow slides right)
   ============================================ */
.cta-btn.cta-anim-slide .cta-btn__arrow {
  transform: translateX(0);
}

.cta-btn.cta-anim-slide:hover .cta-btn__arrow {
  transform: translateX(6px);
  animation: arrowBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes arrowBounce {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(10px); }
  65%  { transform: translateX(4px); }
  80%  { transform: translateX(8px); }
  100% { transform: translateX(6px); }
}

/* ============================================
   ANIMATION: pulse (button pulses on hover)
   ============================================ */
.cta-btn.cta-anim-pulse:hover {
  animation: btnPulse 0.5s ease forwards;
}

.cta-btn.cta-anim-pulse:hover .cta-btn__arrow {
  animation: arrowSpin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes btnPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.04); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1.02); }
}

@keyframes arrowSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(-20deg) scale(1.2); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ============================================
   ANIMATION: glow (glowing light sweep)
   ============================================ */
.cta-btn.cta-anim-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
  z-index: 1;
}

.cta-btn.cta-anim-glow:hover::after {
  animation: glowSweep 0.7s ease forwards;
}

.cta-btn.cta-anim-glow:hover .cta-btn__arrow {
  animation: arrowBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes glowSweep {
  0%   { left: -100%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}

/* ============================================
   ANIMATION: fill (background fills from left)
   ============================================ */
.cta-btn.cta-anim-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #0a2d63;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 1;
}

.cta-btn.cta-anim-fill:hover::before {
  transform: scaleX(1);
}

.cta-btn.cta-anim-fill:hover {
  /* override default bg change so ::before handles it */
  background-color: inherit !important;
}

.cta-btn.cta-anim-fill:hover .cta-btn__arrow {
  transform: translateX(6px);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}

/* ============================================
   ANIMATION: breathe (slow idle pulse + arrow drift on hover)
   ============================================ */

/* Idle state: the button breathes softly on its own — always active */
.cta-btn.cta-anim-breathe {
  animation: breatheIdle 3s ease-in-out infinite;
}

@keyframes breatheIdle {
  0%,  100% { box-shadow: 0 0 0 0 rgba(8, 35, 78, 0); transform: scale(1); }
  50%        { box-shadow: 0 4px 24px 0 rgba(8, 35, 78, 0.28); transform: scale(1.012); }
}

/* On hover: stop idle, do a smooth scale + arrow glide */
.cta-btn.cta-anim-breathe:hover {
  animation: none;
  transform: scale(1.025);
  box-shadow: 0 6px 32px 0 rgba(8, 35, 78, 0.35);
  transition:
    background-color 0.6s ease,
    box-shadow 0.6s ease,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-btn.cta-anim-breathe .cta-btn__arrow {
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-btn.cta-anim-breathe:hover .cta-btn__arrow {
  transform: translateX(5px);
}

/* ============================================
   Elementor editor preview adjustments
   ============================================ */
.elementor-editor-active .cta-btn {
  pointer-events: none;
}