/* ============================================
   PRICING FEATURES - SERVICES PAGE STYLE
   Match the exact feature styling from services page
   ============================================ */

/* ============================================
   1. FEATURES CONTAINER
   ============================================ */

.pricing-plan-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  margin-top: auto !important;
}

/* ============================================
   2. FEATURE ITEM - MATCH SERVICES STYLE
   ============================================ */

.pricing-feature-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.pricing-card:hover .pricing-feature-item {
  background: #f1f5f9 !important;
  transform: translateX(4px) !important;
}

/* ============================================
   3. CHECK ICON - GREEN LIKE SERVICES
   ============================================ */

.pricing-feature-check {
  color: #10B981 !important;
  font-size: 1.125rem !important;
  flex-shrink: 0 !important;
}

/* ============================================
   4. FEATURE TEXT - MATCH SERVICES
   ============================================ */

.pricing-feature-text {
  font-size: 0.875rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* ============================================
   5. LAO LANGUAGE SUPPORT
   ============================================ */

.lang-lao .pricing-feature-text {
  font-family: 'Noto Sans Lao', 'Phetsarath OT', sans-serif !important;
}

/* ============================================
   6. OVERRIDE OLD FEATURE STYLES
   ============================================ */

/* Hide old feature structure */
.pricing-feature:not(.pricing-feature-item) {
  display: none !important;
}

/* Ensure old feature classes don't interfere */
.pricing-plan-features .pricing-feature:not(.pricing-feature-item),
.pricing-plan-features .feature-content,
.pricing-plan-features .feature-name {
  display: none !important;
}