/* ================================================================
   Appsgain — CAPTCHA Component + Animated CTA Buttons
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   CAPTCHA COMPONENT
══════════════════════════════════════════════════════════════ */
@keyframes captchaShield { 0%,100%{transform:scale(1)}50%{transform:scale(1.1)} }
@keyframes captchaRefreshSpin { to{transform:rotate(360deg)} }
@keyframes captchaInputFocus {
  0%{box-shadow:0 0 0 0 rgba(79,70,229,0)}
  100%{box-shadow:0 0 0 4px rgba(79,70,229,0.15)}
}

.captcha-wrap {
  background: linear-gradient(135deg, #fefde8 0%, #fffef0 50%, #fefde8 100%);
  border: 1.5px solid #e9e58a;
  border-radius: 14px;
  padding: 18px 18px 14px;
  margin-bottom: 18px;
  font-family: 'Poppins','Inter',sans-serif;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.captcha-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}

.captcha-shield-icon {
  font-size: 15px;
  color: #d97706;
  animation: captchaShield 3s ease-in-out infinite;
}

.captcha-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #374151;
}

.captcha-required {
  color: #e11d48;
  margin-left: 2px;
}

.captcha-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.captcha-img-box {
  background: #fff;
  border: 1.5px solid #d1cdb0;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}

.captcha-img {
  display: block;
  width: 220px;
  height: 72px;
  user-select: none;
  pointer-events: none;
}

.captcha-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Poppins','Inter',sans-serif;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.captcha-refresh-btn:hover {
  border-color: #4f46e5;
  color: #4f46e5;
  background: rgba(79,70,229,.06);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(79,70,229,.15);
}

.captcha-refresh-btn.spinning i {
  animation: captchaRefreshSpin 0.6s linear;
}

.captcha-input-wrap {
  position: relative;
  margin-bottom: 8px;
}

.captcha-input {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid #d1cdb0 !important;
  border-radius: 9px !important;
  background: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: none !important;    /* MUST stay lowercase-capable */
  -webkit-text-transform: none !important;
  color: #1f2937 !important;
  font-family: 'Courier New', 'Courier', monospace !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
  -webkit-appearance: none;
}

.captcha-input::placeholder {
  font-size: 11px;
  letter-spacing: 1px;
  color: #9ca3af;
  font-weight: 500;
  font-family: 'Poppins',sans-serif;
  text-transform: none;
}

.captcha-input:focus {
  border-color: #4f46e5;
  animation: captchaInputFocus 0.3s ease forwards;
}

.captcha-input.captcha-error-border {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 3px rgba(225,29,72,.1) !important;
}

.captcha-input.captcha-success-border {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.1) !important;
}

.captcha-hint {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.5;
}

.captcha-cantread {
  color: #4f46e5;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
  margin-left: 3px;
}

.captcha-cantread:hover { color: #3730a3; }

.captcha-error {
  font-size: 12px;
  color: #e11d48;
  font-weight: 600;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 480px) {
  .captcha-body { flex-direction: column; align-items: flex-start; }
  .captcha-img  { width: 180px; height: 60px; }
}


/* ══════════════════════════════════════════════════════════════
   ANIMATED CTA BUTTONS
══════════════════════════════════════════════════════════════ */
@keyframes ctaGlow    { 0%,100%{box-shadow:0 6px 24px var(--cta-glow,rgba(79,70,229,.4))} 50%{box-shadow:0 8px 36px var(--cta-glow,rgba(79,70,229,.6)),0 0 60px var(--cta-glow2,rgba(99,102,241,.2))} }
@keyframes ctaShimmer { 0%{left:-100%;opacity:0} 30%{opacity:.5} 100%{left:160%;opacity:0} }
@keyframes ctaPulse   { 0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes ctaRipple  { to{transform:scale(4);opacity:0} }
@keyframes ctaFloat   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes ctaArrow   { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }
@keyframes ctaDotPing { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2.5);opacity:0} }
@keyframes ctaGradMove{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Base animated CTA */
.btn-cta-animated {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 32px;
  border-radius: 14px;
  font-family: 'Poppins','Inter',sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.3s ease;
  letter-spacing: 0.2px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Shimmer overlay */
.btn-cta-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn-cta-animated:hover::before {
  animation: ctaShimmer 0.65s ease forwards;
}
.btn-cta-animated:hover {
  transform: translateY(-3px) scale(1.02);
}
.btn-cta-animated:active { transform: translateY(0) scale(.97); }

/* Ripple element injected by JS */
.btn-cta-animated .cta-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  width: 10px; height: 10px;
  pointer-events: none;
  animation: ctaRipple .7s ease-out forwards;
  transform: scale(0);
  margin: -5px;
  z-index: 5;
}

/* Arrow icon animation */
.btn-cta-animated .cta-arrow {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.btn-cta-animated:hover .cta-arrow { transform: translateX(5px); }

/* ── VARIANT 1: Primary Indigo-Violet ── */
.btn-cta-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%);
  background-size: 200% 200%;
  color: #fff;
  box-shadow: 0 6px 24px rgba(79,70,229,.4);
  animation: ctaGlow 3s ease-in-out infinite;
  --cta-glow: rgba(79,70,229,.45);
  --cta-glow2: rgba(99,102,241,.25);
}
.btn-cta-primary:hover {
  box-shadow: 0 12px 36px rgba(79,70,229,.55), 0 0 60px rgba(99,102,241,.2);
  color: #fff;
  background-position: 100% 0;
}

/* ── VARIANT 2: Emerald-Cyan ── */
.btn-cta-green {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #06b6d4 100%);
  background-size: 200% 200%;
  color: #fff;
  box-shadow: 0 6px 24px rgba(5,150,105,.4);
  --cta-glow: rgba(5,150,105,.45);
  --cta-glow2: rgba(16,185,129,.25);
  animation: ctaGlow 3s ease-in-out 1s infinite;
}
.btn-cta-green:hover {
  box-shadow: 0 12px 36px rgba(5,150,105,.55);
  color: #fff;
}

/* ── VARIANT 3: Orange-Rose ── */
.btn-cta-orange {
  background: linear-gradient(135deg, #ea580c 0%, #f59e0b 50%, #f472b6 100%);
  background-size: 200% 200%;
  color: #fff;
  box-shadow: 0 6px 24px rgba(234,88,12,.4);
  --cta-glow: rgba(234,88,12,.45);
  --cta-glow2: rgba(245,158,11,.25);
  animation: ctaGlow 3s ease-in-out 2s infinite;
}
.btn-cta-orange:hover { color: #fff; }

/* ── VARIANT 4: Ghost/Outline ── */
.btn-cta-ghost {
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.3);
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  animation: none;
}
.btn-cta-ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  color: #fff;
}

/* ── VARIANT 5: Gradient text outline ── */
.btn-cta-outline-grad {
  background: transparent;
  border: 2px solid;
  border-image: linear-gradient(135deg, #4f46e5, #8b5cf6) 1;
  border-radius: 14px;
  color: #4f46e5;
  box-shadow: none;
  animation: none;
}
.btn-cta-outline-grad:hover {
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  color: #fff;
  box-shadow: 0 8px 24px rgba(79,70,229,.3);
}

/* ── SIZE variants ── */
.btn-cta-sm  { padding: 10px 22px; font-size: 13px; border-radius: 10px; }
.btn-cta-lg  { padding: 16px 40px; font-size: 16px; border-radius: 16px; }
.btn-cta-xl  { padding: 18px 48px; font-size: 17px; border-radius: 18px; }
.btn-cta-full{ width: 100%; }

/* ── Floating badge on button ── */
.btn-cta-badge {
  position: absolute;
  top: -8px; right: -8px;
  background: #e11d48;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
  animation: ctaFloat 2s ease-in-out infinite;
}

/* ── Live availability dot ── */
.btn-cta-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  position: relative;
}
.btn-cta-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(34,197,94,.5);
  animation: ctaDotPing 1.5s ease-in-out infinite;
}

/* ── Floating CTA banner (bottom of service pages) ── */
.cta-floating-band {
  background:
    radial-gradient(ellipse 60% 70% at 20% 50%, rgba(79,70,229,.2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(139,92,246,.15) 0%, transparent 55%),
    linear-gradient(135deg, #06091a 0%, #0c1840 50%, #06091a 100%);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.cta-floating-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(99,102,241,.12) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .4;
  pointer-events: none;
}
.cta-band-inner {
  position: relative; z-index: 2;
  text-align: center;
}
.cta-band-title {
  font-family: 'Poppins',sans-serif;
  font-size: clamp(26px,4vw,44px);
  font-weight: 900; color: #fff;
  letter-spacing: -1px; margin-bottom: 12px;
  line-height: 1.1;
}
.cta-band-title .cg {
  background: linear-gradient(90deg,#60a5fa,#a78bfa,#34d399);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ctaGradMove 4s ease infinite;
}
.cta-band-sub {
  font-size: 15px; color: rgba(255,255,255,.62);
  max-width: 520px; margin: 0 auto 30px; line-height: 1.75;
}
.cta-band-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.cta-band-trust {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin-top: 24px;
}
.cta-band-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.55);
}
.cta-band-trust-item i { font-size: 13px; }

/* Responsive */
@media (max-width: 640px) {
  .btn-cta-animated { padding: 12px 22px; font-size: 13px; }
  .btn-cta-lg  { padding: 13px 28px; font-size: 14px; }
  .cta-band-btns { flex-direction: column; align-items: center; }
  .btn-cta-full-mob { width: 100%; }
}