/* Payments Page Specific Styles */

/* Payment card styling */
.payment-card {
  /* Inherits from base card styles */
}

/* Plan display styling */
.current-plan {
  background: var(--section-bg);
  border: 2px solid var(--primary-green);
}

.current-plan h3 {
  color: var(--primary-green);
}

/* Billing history styling */
.billing-history {
  /* Can add specific styling for billing table/list here */
}

/* Payment status indicators */
.payment-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.payment-status::before {
  content: '';
  font-size: 1.2rem;
}

/* Stripe integration styles */
.stripe-element {
  padding: 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius);
  background: var(--white);
}

.stripe-element:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(26, 68, 76, 0.1);
}

/* Payment mobile responsive */
@media (max-width: 768px) {
  .payment-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
}