/* Enhanced WebCare Pricing Section Styles */

.webcare-pricing {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
}

.webcare-pricing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="%23000" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

/* Pricing Card Enhancements */
.pricing-card {
  margin-top: 2rem;
  transition: transform 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
}

.pricing-card .card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

/* Gradient header background */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--accent, #38bdf8) 0%, var(--primary, #0f172a) 100%) !important;
}

/* Feature icons styling */
.feature-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-icon i {
  font-size: 1.1rem;
}

/* Value proposition section */
.value-prop {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
}

/* Enhanced CTA buttons */
.webcare-pricing .btn-primary {
  background: linear-gradient(135deg, var(--accent, #38bdf8) 0%, #0052cc 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  transition: all 0.3s ease;
}

.webcare-pricing .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.webcare-pricing .btn-outline-secondary {
  border: 2px solid #6c757d;
  transition: all 0.3s ease;
}

.webcare-pricing .btn-outline-secondary:hover {
  background: #6c757d;
  transform: translateY(-1px);
}

/* Testimonial card styling */
.testimonial-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: scale(1.02);
}

/* Animated counter styles */
.stat-item {
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: scale(1.05);
}

/* Badge animations */
.badge {
  transition: transform 0.3s ease;
}

.badge:hover {
  transform: scale(1.05);
}

/* Popular badge positioning */
.pricing-card .position-absolute .badge {
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

/* Trust indicators styling */
.trust-indicators i {
  font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pricing-card {
    margin-top: 1rem;
  }
  
  .feature-icon {
    width: 35px;
    height: 35px;
  }
  
  .pricing-amount .h1 {
    font-size: 2.5rem;
  }
  
  .value-prop .col-4 {
    margin-bottom: 1rem;
  }
}

/* Dark mode support */
.dark-mode .webcare-pricing {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.dark-mode .pricing-card .card {
  background: rgba(33, 37, 41, 0.95);
  color: #fff;
}

.dark-mode .testimonial-card {
  background: rgba(33, 37, 41, 0.95) !important;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .value-prop {
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Animation for counters */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-item [data-counter] {
  animation: countUp 0.6s ease forwards;
}

/* Smooth scroll behavior for CTAs */
.webcare-pricing a[href^="#"] {
  scroll-behavior: smooth;
}