/* ==========================================================================
   Pricing Modal Styles
   Styles for the subscription plans, feature lists, and pricing cards.
   ========================================================================== */

/* Main Pricing Modal Backdrop 
   Uses a light slate background to keep the interface clean and professional. */
.pricing-modal-content {
    background-color: #e2e8f0;
}

/* Pricing Subtitle Text Constraint 
   Ensures the introductory text stays readable and doesn't span too wide. */
.pricing-subtitle {
    max-width: 500px;
}

/* Main White Pricing Card with Hover Lift 
   The central focus of the modal. Features a subtle indigo shadow 
   and a hover effect to signal interactivity. */
.pricing-card {
    max-width: 550px;
    box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.15) !important;
    transform: translateY(-2px);
}

/* Decorative Gradient Blob Behind Pricing Details 
   Adds a premium feel with a very soft, non-interactive visual flourish. */
.pricing-blob {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* Features List Box 
   A dashed border and slight background tint to group plan benefits clearly. */
.pricing-features-box {
    background-color: rgba(99, 102, 241, 0.04);
    border: 1px dashed rgba(99, 102, 241, 0.2);
}

/* Features List Text Alignment 
   Keeps the bullet points centered and easy to scan. */
.pricing-features-list {
    max-width: 380px;
}