/* pricing.css — 3 package layout, highlighted card, feature list, badge */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.pricing-card {
  background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-alt) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 36px 28px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 12px rgba(91, 63, 255, 0.04);
  transition: all 0.3s ease;
}

.pricing-card:hover {
  border-color: var(--c-accent-bright);
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(91, 63, 255, 0.18);
}

/* Highlighted / featured card */
.pricing-card--featured {
  border-color: var(--c-accent-bright);
  border-width: 2px;
  transform: scale(1.05);
  z-index: 2;
  background: linear-gradient(135deg, #FFFFFF 0%, #F3EFFF 100%);
  box-shadow: 0 12px 36px rgba(123, 97, 255, 0.18);
}

.pricing-card--featured:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 20px 56px rgba(123, 97, 255, 0.28);
}

/* Badge at top */
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.pricing-name {
  font-family: var(--f-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text);
  margin-top: 8px;
  margin-bottom: 8px;
}

.pricing-price {
  font-family: var(--f-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 8px;
}

.pricing-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-text-secondary);
}

.pricing-desc {
  font-size: 0.9rem;
  color: var(--c-text-secondary);
  margin-bottom: 24px;
}

.pricing-features {
  text-align: left;
  margin-bottom: 28px;
}

.pricing-features .check-list li {
  font-size: 0.9rem;
}

.pricing-card .btn {
  width: 100%;
}

.pricing-note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--c-text-secondary);
  margin-top: 24px;
}

/* ---------- Color variants for pricing cards ---------- */
.pricing-card--mint:hover {
  border-color: var(--c-accent-mint-bright);
  box-shadow: 0 16px 44px rgba(20, 184, 166, 0.18);
}
.pricing-card--mint .pricing-price { color: var(--c-accent-mint); }
.pricing-card--mint .pricing-badge .badge {
  background-color: var(--c-accent-mint);
}
.pricing-card--mint .check-list li::before { color: var(--c-accent-mint-bright); }

.pricing-card--gold:hover {
  border-color: var(--c-accent-gold-bright);
  box-shadow: 0 16px 44px rgba(245, 158, 11, 0.18);
}
.pricing-card--gold .pricing-price { color: var(--c-accent-gold); }
.pricing-card--gold .pricing-badge .badge {
  background-color: var(--c-accent-gold);
}
.pricing-card--gold .check-list li::before { color: var(--c-accent-gold-bright); }

.pricing-card--mint .btn--secondary {
  color: var(--c-accent-mint);
  border-color: var(--c-accent-mint);
}
.pricing-card--mint .btn--secondary:hover {
  background-color: var(--c-accent-mint);
  color: #fff;
}

.pricing-card--gold .btn--secondary {
  color: var(--c-accent-gold);
  border-color: var(--c-accent-gold);
}
.pricing-card--gold .btn--secondary:hover {
  background-color: var(--c-accent-gold);
  color: #fff;
}