/**
 * Membership Information Component Styles
 * 
 * @package CMSMGA
 * @version 1.0
 */

/* This file contains styles specific to the membership-info component.
   Main layout and container styles are handled in page-membership.css */

/* Component-specific overrides and enhancements can go here if needed */

/* Smooth animations for interactive elements */
.membership-info-card .benefit-item:hover,
.membership-info-card .process-step:hover {
  animation: cmsmga-subtle-pulse 0.3s ease-out;
}

/* Custom scrollbar for long content sections */
.membership-info-content::-webkit-scrollbar {
  width: 4px;
}

.membership-info-content::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--color-white) 5%, transparent);
  border-radius: 2px;
}

.membership-info-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-white) 20%, transparent);
  border-radius: 2px;
}

.membership-info-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-white) 30%, transparent);
}

/* Enhanced focus states for accessibility */
.membership-info-card .benefit-item:focus-within,
.membership-info-card .process-step:focus-within {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Print styles */
@media print {
  .membership-info-card {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  
  .membership-info-title,
  .membership-info-subtitle,
  .benefits-title,
  .pricing-title,
  .process-title {
    color: black !important;
  }
  
  .benefit-text,
  .step-description,
  .price-description {
    color: #333 !important;
  }
}