/* ============================================
   PRICING CARDS - LEFT ALIGN TEXT
   Match the services page layout style
   All card content should be left-aligned like services page
   ============================================ */

/* Main card container - left align all content */
.pricing-card {
  text-align: left !important;
}

/* Card header - left align with flex-start */
.pricing-card-header {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Plan badge - keep inline but align to left */
.pricing-plan-badge {
  text-align: center !important; /* Badge text stays centered (it's a pill) */
  display: inline-flex !important;
  justify-content: center !important;
  align-self: flex-start !important; /* Position badge on left side */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Plan name - left align */
.pricing-plan-name {
  text-align: left !important;
  align-self: flex-start !important;
}

/* Plan price container - left align */
.pricing-plan-price {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: row !important;
}

.pricing-plan-price .amount {
  text-align: left !important;
}

.pricing-plan-price .currency {
  text-align: left !important;
}

/* Plan description - left align */
.pricing-plan-description {
  text-align: left !important;
  align-self: flex-start !important;
}

/* Features container - left align */
.pricing-plan-features {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Individual feature items - left align */
.pricing-feature {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.feature-content {
  text-align: left !important;
  flex: 1 !important;
}

.feature-name {
  text-align: left !important;
}

/* Actions/buttons container - left align container */
.pricing-actions {
  text-align: left !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* Buttons - full width but text centered (better UX) */
.pricing-actions .btn,
.pricing-card .btn,
.pricing-card button {
  width: 100% !important;
  text-align: center !important; /* Button text stays centered */
  justify-content: center !important;
}

/* Adjust header decoration for left alignment */
.pricing-card-header::after {
  left: 0 !important;
  transform: none !important;
  width: 50px !important;
}

.pricing-card:hover .pricing-card-header::after {
  width: 100% !important;
}

/* Ensure all text elements inside card are left-aligned (except buttons and badges) */
.pricing-card > * {
  text-align: left !important;
}

.pricing-card-header > * {
  text-align: left !important;
}

.pricing-plan-features > * {
  text-align: left !important;
}

/* Exception: Keep button text centered for better UX */
.pricing-card .btn,
.pricing-card button,
.pricing-actions .btn {
  text-align: center !important;
}

/* Exception: Keep badge text centered (it's a small pill) */
.pricing-plan-badge {
  text-align: center !important;
}

/* Exception: Keep loading spinner centered */
#pricingLoading {
  text-align: center !important;
}

/* Mobile responsive - ensure left alignment on all screen sizes */
@media (max-width: 768px) {
  .pricing-card {
    text-align: left !important;
  }
  
  .pricing-card-header {
    text-align: left !important;
    align-items: flex-start !important;
  }
  
  .pricing-plan-name,
  .pricing-plan-price,
  .pricing-plan-description {
    text-align: left !important;
  }
  
  .pricing-plan-features {
    text-align: left !important;
    align-items: flex-start !important;
  }
  
  .pricing-feature {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}