/* Packs shortcode styles (modeled after jt-child pricing.css) */
.pricing {
  background-color: none;
  position: relative;
}
.pricing::before { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: none; pointer-events:none; }
.pricing .container { position: relative; z-index: 1; }

.pricing-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-2xl); margin-top: var(--spacing-4xl); align-items: start; }
/* Single layout: center and cap max width */
.pricing-grid.single { grid-template-columns: 1fr; max-width: 640px; margin: var(--spacing-4xl) auto 0; }

.pricing-card { background: var(--color-white); border-radius: var(--radius-2xl); padding: var(--spacing-2xl); box-shadow: var(--shadow-md); transition: all var(--transition-normal); position: relative; overflow: hidden; border: 2px solid var(--color-border); }
.pricing-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2xl); border-color: var(--color-primary); }

/* Featured Card */
.pricing-card.featured { border-color: var(--color-primary); transform: scale(1.05); box-shadow: var(--shadow-xl); background: linear-gradient(135deg, var(--color-white) 0%, #fef7f7 100%); }
.pricing-card.featured:hover { transform: scale(1.05) translateY(-8px); box-shadow: var(--shadow-2xl); }
/* Don't scale the only card too large */
.pricing-grid.single .pricing-card.featured { transform: none; }
.pricing-grid.single .pricing-card.featured:hover { transform: translateY(-8px); }

.pricing-badge { position: absolute; top: var(--spacing-lg); right: var(--spacing-lg); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-white); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-md); z-index: 2; }

.pricing-header { text-align: center; margin-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
.pricing-header h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--spacing-sm); }
.price { font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); color: var(--color-primary); margin-bottom: var(--spacing-sm); font-family: var(--font-secondary); }
.pricing-header p { color: var(--color-text-light); font-size: var(--font-size-base); margin: 0; }

/* Prevent badge from overlapping the title */
.pricing-card.featured .pricing-header { padding-top: calc(var(--spacing-lg) + 28px); padding-right: 96px; }

.pricing-features { list-style:none; padding:0; margin:0 0 var(--spacing-2xl) 0; }
.pricing-features li { display:flex; align-items:center; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; color: var(--color-text); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
.pricing-features li::before { content:'\2713'; width:20px; height:20px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-white); border-radius: var(--radius-full); display:flex; align-items:center; justify-content:center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); flex-shrink:0; }

.pricing-button { width:100%; padding: var(--spacing-md) var(--spacing-xl); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); border:none; border-radius: var(--radius-lg); cursor:pointer; text-decoration:none; text-align:center; transition: all var(--transition-normal); box-shadow: var(--shadow-md); position:relative; overflow:hidden; }
.pricing-button::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition:left .5s; }
.pricing-button:hover::before { left:100%; }
.pricing-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--color-white); }

/* Card Variations */
.pricing-card:nth-child(3) .pricing-features li::before { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 100%) !important; }
.pricing-card:nth-child(3) .pricing-button { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 100%); }

/* Staggered Animation */
.pricing-card { opacity:0; transform: translateY(30px); animation: lubinikFadeInUp .6s ease-out forwards; }
.pricing-card:nth-child(1) { animation-delay: .1s; }
.pricing-card:nth-child(2) { animation-delay: .2s; }
.pricing-card:nth-child(3) { animation-delay: .3s; }
@keyframes lubinikFadeInUp { to { opacity:1; transform: translateY(0); } }

/* Featured card animation override */
.pricing-card.featured { animation: lubinikFadeInUpFeatured .6s ease-out forwards; animation-delay: .2s; }
@keyframes lubinikFadeInUpFeatured { to { opacity:1; transform: scale(1.05) translateY(0); } }

/* Hover overlay */
.pricing-card::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(197,75,116,.02) 0%, rgba(107,70,193,.02) 100%); opacity:0; transition: opacity var(--transition-normal); pointer-events:none; }
.pricing-card:hover::before { opacity:1; }

/* Responsive tweaks */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-xl); }
  .pricing-card.featured { transform: none; }
  .pricing-card.featured:hover { transform: translateY(-8px); }
}
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: 400px; margin: var(--spacing-4xl) auto 0; }
  .pricing-card { padding: var(--spacing-xl); }
  .pricing-header h3 { font-size: var(--font-size-xl); }
  .price { font-size: var(--font-size-3xl); }
  .pricing-features li { font-size: var(--font-size-sm); }
}
@media (max-width: 480px) {
  .pricing-card { padding: var(--spacing-lg); }
  .pricing-header { margin-bottom: var(--spacing-lg); }
  .pricing-card.featured .pricing-header { padding-top: calc(var(--spacing-md) + 22px); padding-right: 72px; }
  .pricing-header h3 { font-size: var(--font-size-lg); }
  .price { font-size: var(--font-size-2xl); }
  .pricing-badge { top: var(--spacing-sm); right: var(--spacing-sm); font-size: var(--font-size-xs); padding: var(--spacing-xs) var(--spacing-sm); }
}