/* ================================================================
   WUC Technologies — Featured Resource Report Section Upgrade
   Target: .wuc-featured-banner and all children
   Deploy: Paste into Appearance > Customize > Additional CSS
          OR Elementor > Site Settings > Custom CSS
   ================================================================ */

/* ----------------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------------- */
@keyframes wuc-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ----------------------------------------------------------------
   1. BANNER CONTAINER — Richer gradient + decorative elements
   ---------------------------------------------------------------- */
.wuc-featured-banner {
  background: linear-gradient(135deg, #001a3d 0%, #002b5b 40%, #003d8a 100%) !important;
  border-radius: 24px !important;
  padding: 3rem !important;
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 3rem !important;
  align-items: center !important;
}

/* Decorative glow — top-right */
.wuc-featured-banner::before {
  content: '' !important;
  position: absolute !important;
  top: -100px !important;
  right: -80px !important;
  width: 280px !important;
  height: 280px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(26, 140, 255, 0.09) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Decorative glow — bottom-left */
.wuc-featured-banner::after {
  content: '' !important;
  position: absolute !important;
  bottom: -60px !important;
  left: -60px !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(26, 140, 255, 0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ----------------------------------------------------------------
   2. LEFT COLUMN — Content area
   ---------------------------------------------------------------- */
.wuc-featured-content {
  position: relative !important;
  z-index: 1 !important;
}

/* "FEATURED RESOURCE" label */
.wuc-featured-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #93c5fd !important; /* blue-300 */
  margin-bottom: 1rem !important;
}

/* Heading */
.wuc-featured-title {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
}

/* Description */
.wuc-featured-desc {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  max-width: 420px !important;
  margin-bottom: 0 !important;
}

/* ----------------------------------------------------------------
   3. RIGHT COLUMN — Image area becomes the form card host
   ---------------------------------------------------------------- */
.wuc-featured-image {
  display: none !important; /* Hide the decorative icon container */
}

/* ----------------------------------------------------------------
   4. FORM CONTAINER — Glassmorphic card
   ---------------------------------------------------------------- */
.wuc-featured-content > div:last-child {
  /* This wraps .wuc-lead-form */
  position: relative !important;
  z-index: 1 !important;
}

.wuc-lead-form {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ----------------------------------------------------------------
   5. FORM ROW — Stack input and button vertically
   ---------------------------------------------------------------- */
.wuc-lead-form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* ----------------------------------------------------------------
   6. EMAIL INPUT — Enhanced with icon space and styling
   ---------------------------------------------------------------- */
.wuc-lead-input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  padding: 14px 16px 14px 44px !important; /* Extra left padding for mail icon */
  color: #ffffff !important;
  font-size: 0.9375rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.wuc-lead-input::placeholder {
  color: rgba(255, 255, 255, 0.30) !important;
  font-weight: 400 !important;
}

.wuc-lead-input:focus {
  border-color: rgba(59, 130, 246, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.wuc-lead-input:invalid:not(:placeholder-shown) {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* ----------------------------------------------------------------
   7. SUBMIT BUTTON — Gradient blue with shimmer
   ---------------------------------------------------------------- */
.wuc-lead-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #0052b8 0%, #1a6fd4 50%, #2d7ee0 100%) !important;
  color: #ffffff !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.01em !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.wuc-lead-btn:hover {
  background: linear-gradient(135deg, #1a6fd4 0%, #2d7ee0 50%, #3b8de8 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 82, 184, 0.35) !important;
  transform: translateY(-1px) !important;
}

.wuc-lead-btn:active {
  transform: translateY(0) !important;
}

/* Shimmer overlay */
.wuc-lead-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%) !important;
  background-size: 200% 100% !important;
  animation: wuc-shimmer 3s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* ----------------------------------------------------------------
   8. PRIVACY TEXT
   ---------------------------------------------------------------- */
.wuc-lead-privacy {
  color: rgba(255, 255, 255, 0.25) !important;
  font-size: 0.75rem !important;
  margin-top: 0.5rem !important;
  text-align: center !important;
}

/* ----------------------------------------------------------------
   9. TRUST BAR (injected by JS — .wuc-report-trust-bar)
   ---------------------------------------------------------------- */
.wuc-report-trust-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  margin-top: 1rem !important;
  padding-top: 0.875rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.wuc-report-trust-bar .wuc-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.6875rem !important;
  color: rgba(255, 255, 255, 0.30) !important;
  font-weight: 500 !important;
}

.wuc-report-trust-bar .wuc-trust-icon {
  width: 12px !important;
  height: 12px !important;
  color: rgba(16, 185, 129, 0.6) !important; /* emerald */
  flex-shrink: 0 !important;
}

.wuc-report-trust-bar .wuc-trust-divider {
  width: 1px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ----------------------------------------------------------------
   10. SOCIAL PROOF ROW (injected by JS — .wuc-report-social)
   ---------------------------------------------------------------- */
.wuc-report-social {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 1.25rem !important;
}

.wuc-report-social .wuc-avatar-stack {
  display: flex !important;
}

.wuc-report-social .wuc-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  border: 2px solid #002b5b !important;
  margin-left: -6px !important;
}

.wuc-report-social .wuc-avatar:first-child {
  margin-left: 0 !important;
}

.wuc-report-social .wuc-avatar-1 {
  background: rgba(96, 165, 250, 0.2) !important;
  color: #93c5fd !important;
}

.wuc-report-social .wuc-avatar-2 {
  background: rgba(192, 132, 252, 0.2) !important;
  color: #d8b4fe !important;
}

.wuc-report-social .wuc-avatar-3 {
  background: rgba(45, 212, 191, 0.2) !important;
  color: #5eead4 !important;
}

.wuc-report-social .wuc-social-text {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-weight: 500 !important;
}

/* ----------------------------------------------------------------
   11. MAIL ICON (injected by JS — .wuc-input-mail-icon)
   ---------------------------------------------------------------- */
.wuc-lead-form-row {
  position: relative !important;
}

.wuc-input-wrapper {
  position: relative !important;
}

.wuc-input-mail-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  color: rgba(255, 255, 255, 0.25) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ----------------------------------------------------------------
   12. RESPONSIVE — Stack on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .wuc-featured-banner {
    grid-template-columns: 1fr !important;
    padding: 2rem !important;
    gap: 2rem !important;
  }

  .wuc-featured-title {
    font-size: 1.375rem !important;
  }

  .wuc-lead-form {
    padding: 1.25rem !important;
  }

  .wuc-report-trust-bar {
    gap: 0.75rem !important;
  }
}

/* ----------------------------------------------------------------
   13. REDUCED MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wuc-lead-btn::after {
    animation: none !important;
  }
  .wuc-lead-btn:hover {
    transform: none !important;
  }
}