/* ============================================
   RENATUS V2 PRICING PAGE STYLES
   Matches Figma: white background, underline tabs
   All values from design tokens - no hardcoding
   ============================================ */

/* ============================================
   PRICING PAGE LAYOUT
   ============================================ */
.pricing-page {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 0;
  min-height: auto;
}

main.pricing-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-height));
}

.pricing-tabs-container {
  flex: 1;
}

.pricing-container {
  max-width: var(--landing-container);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* ============================================
   PRICING HEADING
   Figma DH 02: 65px Bold, centered
   ============================================ */
.pricing-heading {
  text-align: center;
  padding: calc(var(--topbar-height) + var(--space-16)) 0 var(--space-10);
}

.pricing-heading-title {
  font-size: var(--display-sm);
  font-weight: var(--font-semibold);
  color: var(--color-black);
  line-height: var(--lh-heading);
}

/* ============================================
   PRICING TABS (uses shared .pill-tabs component)
   ============================================ */
.pricing-tabs-wrap {
  display: flex;
  justify-content: center;
  padding: 0 0 var(--space-8);
}

/* ============================================
   TAB CONTENT
   ============================================ */
.pricing-content {
  padding: 0 0 var(--space-20);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ============================================
   CREDITS GRID
   Figma: 3 cards, 35px gap, centered at 1039px
   ============================================ */
.credits-grid {
  display: flex;
  justify-content: center;
  gap: var(--pricing-card-gap);
  padding: var(--space-12) 0;
  max-width: var(--pricing-card-container);
  margin: 0 auto;
}

.credit-card {
  background: var(--bg-primary);
  border: none;
  border-radius: var(--radius-2xl);
  padding: var(--pricing-card-padding-y) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pricing-card-internal-gap);
  flex: 0 0 auto;
  box-shadow: var(--shadow-float);
  width: var(--pricing-card-width);
  transition: all var(--transition-base);
}

.credit-card:hover {
  transform: var(--btn-transform-hover);
  box-shadow: var(--shadow-float-hover);
}

/* Figma DH 04: 61px Bold, -0.9px tracking */
.credit-card-amount {
  font-size: var(--text-price);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--lh-price);
  letter-spacing: var(--ls-secondary-cta);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma: match subscription checklist size, black */
.credit-card-label {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--text-primary);
  line-height: var(--lh-price-sub);
  display: flex;
  align-items: center;
  justify-content: center;
}

.credit-card-spacer {
  height: var(--pricing-spacer-height-lg);
}

.credit-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pricing-cta-width);
  height: var(--pricing-cta-height);
  border-radius: var(--radius-2xl);
  font-size: var(--text-nav);
  font-weight: var(--font-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--transition-base);
  line-height: var(--lh-nav);
  background: var(--text-primary);
  color: var(--color-white);
  margin-top: auto;
}

.credit-card-cta:hover {
  opacity: 0.85;
  transform: var(--btn-transform-hover);
}

.credit-card-input-wrap {
  width: var(--pricing-input-width);
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.credit-card-input {
  width: 100%;
  height: 100%;
  padding: var(--space-2) var(--space-4);
  border: none;
  font-size: var(--text-price-sub);
  font-weight: var(--font-normal);
  text-align: center;
  color: var(--text-primary);
  background: transparent;
  outline: none;
}

.credit-card-input::placeholder {
  color: var(--text-muted);
}

.credit-card-calculated {
  display: none;
}

/* ============================================
   STRIPE SECTION
   Figma DB 02: 25px Medium, centered + badge
   ============================================ */
.pricing-stripe-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-4) 0 var(--space-12);
  max-width: var(--pricing-card-container);
  margin: 0 auto;
}

.pricing-stripe-text {
  font-size: var(--text-xl);
  font-weight: var(--font-normal);
  color: var(--color-black);
  text-align: center;
  line-height: 1.6;
}

.pricing-stripe-text .ask-ren-link {
  color: var(--brand-primary);
  text-decoration: none;
  cursor: pointer;
}

.pricing-stripe-text .ask-ren-link:hover {
  text-decoration: underline;
}

.stripe-badge {
  height: var(--pricing-stripe-badge-height);
  width: auto;
  border: none;
  outline: none;
  box-shadow: none;
}

/* ============================================
   SUBSCRIPTION GRID
   Figma: 3 cards, 35px gap, 323px wide, 560px tall
   ============================================ */
.subscription-grid {
  display: flex;
  justify-content: center;
  gap: var(--pricing-card-gap);
  padding: var(--space-12) 0;
  max-width: var(--pricing-card-container);
  margin: 0 auto;
}

.subscription-card {
  background: var(--bg-primary);
  border: none;
  border-radius: var(--radius-2xl);
  padding: var(--pricing-card-padding-y) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pricing-card-internal-gap);
  width: var(--pricing-card-width);
  min-height: var(--pricing-sub-card-min-height);
  box-shadow: var(--shadow-float);
  transition: all var(--transition-base);
}

.subscription-card:hover {
  transform: var(--btn-transform-hover);
  box-shadow: var(--shadow-float-hover);
}

/* Figma DH 03: 26px Semi Bold, -0.95px tracking */
.subscription-card-name {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: var(--ls-secondary-cta);
  line-height: var(--lh-body-large);
  width: var(--pricing-feature-width);
  text-align: left;
}

.subscription-card-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: var(--pricing-input-width);
}

/* Figma DH 04: 61px Bold */
.subscription-card-amount {
  font-size: var(--text-price);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--lh-price);
  letter-spacing: var(--ls-secondary-cta);
}

.subscription-card-period {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}

.subscription-card-spacer {
  height: var(--pricing-spacer-height-sm);
}

/* Figma DP 06: 20px Regular, 30px line-height */
.subscription-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: var(--pricing-feature-width);
  flex: 1;
}

.subscription-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--text-primary);
  line-height: var(--lh-list);
}

.subscription-feature-icon {
  width: var(--icon-size-check);
  height: var(--icon-size-check);
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.subscription-card-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-height: 1px;
  padding: var(--pricing-cta-wrap-padding) 0;
  width: 100%;
}

.subscription-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pricing-cta-width);
  height: var(--pricing-cta-height);
  border-radius: var(--radius-2xl);
  font-size: var(--text-nav);
  font-weight: var(--font-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  line-height: var(--lh-nav);
}

.subscription-card-cta:hover {
  opacity: 0.85;
  transform: var(--btn-transform-hover);
}

.subscription-card-cta.primary {
  background: var(--text-primary);
  color: var(--color-white);
  border: none;
}

.subscription-card-cta.outline {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
}

.subscription-card-cta.outline:hover {
  background: var(--text-primary);
  color: var(--color-white);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .credits-grid,
  .subscription-grid {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .pricing-heading {
    padding: calc(var(--topbar-height) + var(--space-10)) 0 var(--space-6);
  }

  .pricing-heading-title {
    font-size: var(--text-5xl);
  }

  .pricing-container {
    padding: 0 var(--space-4);
  }

  .credits-grid,
  .subscription-grid {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) 0;
  }

  .credit-card,
  .subscription-card {
    width: 100%;
    max-width: var(--pricing-card-width);
  }

  .pricing-stripe-text {
    font-size: var(--text-lg);
    line-height: 1.6;
    padding: 0 var(--space-4);
  }

  .stripe-badge {
    height: var(--space-20);
  }
}

@media (max-width: 500px) {
  .pricing-heading-title {
    font-size: var(--text-4xl);
  }
}