/**
 * Pricing Section Enhancements
 * Additional styles to improve the pricing UI and mobile experience
 */

/* Pricing Card Basic Styles */
.pricing-card {
  transition: none;
  border-color: rgba(0, 0, 0, 0.1);
  height: 100%;
}

.pricing-card:hover {
  border-color: rgba(0, 0, 0, 0.1);
}

/* Feature List Basic Styles */
.feature-list li {
  transition: none;
}

.pricing-card:hover .feature-list li {
  transform: none;
}

.pricing-card:hover .feature-list li:nth-child(1) { transition-delay: 0s; }
.pricing-card:hover .feature-list li:nth-child(2) { transition-delay: 0s; }
.pricing-card:hover .feature-list li:nth-child(3) { transition-delay: 0s; }
.pricing-card:hover .feature-list li:nth-child(4) { transition-delay: 0s; }
.pricing-card:hover .feature-list li:nth-child(5) { transition-delay: 0s; }
.pricing-card:hover .feature-list li:nth-child(6) { transition-delay: 0s; }
.pricing-card:hover .feature-list li:nth-child(7) { transition-delay: 0s; }
.pricing-card:hover .feature-list li:nth-child(8) { transition-delay: 0s; }
.pricing-card:hover .feature-list li:nth-child(9) { transition-delay: 0s; }

/* Fix button responsiveness */
.card-footer {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
}

.plan-button {
  display: inline-block;
  text-align: center;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  transition: none;
}

/* Force the cards layout to either 3 or 1 column */
@media (min-width: 951px) {
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: stretch;
  }
  
  .pricing-card {
    height: 100%;
  }
  
  .pricing-card.featured {
    transform: scale(1);
  }
}

@media (max-width: 950px) {
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr !important;
  }
  
  .plan-button {
    margin: 0 auto;
    display: block;
    max-width: 220px;
    width: 90%;
  }
  
  .card-footer {
    justify-content: center;
  }
  
  /* Add spacing between cards */
  .pricing-grid {
    row-gap: 40px;
  }
  
  /* Remove most popular tag on mobile */
  .pricing-card.featured::before {
    display: none;
  }
  
  /* Add visual indicator for selected card */
  .pricing-card {
    position: relative;
  }
  
  .pricing-card.featured {
    order: -1;
  }
  
  .pricing-card.featured::after {
    display: none;
  }
  
  /* Improve scrolling experience */
  .pricing-section {
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
}

/* Desktop-specific styles to ensure 3-column layout */
@media (min-width: 951px) {
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    width: 100%;
  }
  
  .pricing-card.featured {
    transform: scale(1);
  }
}

/* Enhance accessibility */
.plan-button:focus,
.plan-button.secondary:focus {
  outline: 3px solid rgba(124, 77, 255, 0.5);
  outline-offset: 2px;
}

/* Remove animations from featured card */
.pricing-card.featured {
  animation: none;
}

/* Toggle animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-card:hover,
  .plan-button,
  .plan-button:hover,
  .pricing-card.featured::before,
  .pricing-card.featured {
    transition: none;
    animation: none;
    transform: none;
  }
  
  .pricing-card:hover .feature-list li {
    transform: none;
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .pricing-card {
    border: 2px solid #000;
  }
  
  .pricing-card.featured {
    border: 3px solid #000;
  }
  
  .plan-button,
  .plan-button.secondary {
    border: 2px solid #000;
  }
}