/* ═══════════════════════════════════════════════════
   BuYüm — Pricing cards  (Stage 1)  [SHARED]
   ─────────────────────────────────────────────────────
   Styling for the buy-side pricing cards injected by pricing-cards.js into
   [data-pricing-cards] containers. Theme-aware: reuses the canonical CSS
   variables from shared.css (--accent, --accent-green, --text-*, --font-*,
   --glass-border) so it inherits each page's palette.

   Layout: a centered flex row on desktop, a stacked column on mobile. On
   mobile the highlighted ("Best value") card is floated to the top via
   `order: -1`, scoped to the mobile breakpoint so desktop keeps the natural
   DOM order (one_time → monthly → yearly).

   Cards are injected after reveal.js runs, so they intentionally do NOT use
   the .reveal mechanism; a self-contained fade-in is provided here instead.
   ═══════════════════════════════════════════════════ */

.pricing-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-7);
  max-width: 760px;
  margin: 0 auto var(--space-10);
}

/* A single plan renders as one compact, centered card. */
.pricing-cards-solo,
.pricing-cards-fallback {
  max-width: 360px;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.pricing-card {
  position: relative;
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-11) var(--space-10) var(--space-10);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-hi, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-3xl);
  /* Fade-in (cards are not reveal-observed). */
  animation: pricing-fade-in 0.5s ease both;
}

@keyframes pricing-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Highlighted "Best value" card — accent border + glow + slight lift. */
.pricing-card.is-best {
  border-color: rgba(0, 217, 100, 0.45);
  background: var(--green-dim, rgba(0, 217, 100, 0.10));
  box-shadow: var(--shadow-featured);
}

.pricing-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: var(--space-1) var(--space-5);
  background: var(--accent-green, #00d964);
  color: #06210f;
  border-radius: var(--radius-full);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-title {
  font-family: var(--font-display, sans-serif);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary, #c8d0e0);
  margin-bottom: var(--space-4);
}

/* Price = a large amount on its own line, with the interval suffix
   ("/ month", "/ year") deliberately smaller on the line below. one_time has
   no suffix, so only the amount shows. */
.pricing-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-3);
}

.pricing-amount {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(var(--text-4xl), 4vw, var(--text-5xl));
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary, #fff);
  white-space: nowrap;
}

.pricing-suffix {
  font-family: var(--font-display, sans-serif);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-dim, #8a92a6);
  margin-top: 3px;
}

.pricing-subtitle {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-dim, #8a92a6);
  margin-bottom: var(--space-7);
}

/* Yearly savings reuses the subtitle slot but reads as a positive accent. */
.pricing-card.is-best .pricing-subtitle {
  color: var(--accent-green, #00d964);
  font-weight: 600;
}

.pricing-trial {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-amber, #ff9100);
  margin-bottom: var(--space-5);
}

/* Silver identity (bg / radius / font / outer glow / hover) is the canonical
   .btn-sale in components.css; the buttons carry "btn-sale pricing-btn". Only
   the card-layout bits and the busy state live here. */
.pricing-btn {
  margin-top: auto;   /* push the button to the card bottom so cards align */
  width: 100%;
}

.pricing-btn[disabled],
.pricing-btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

/* Highlighted card's button picks up the accent-green identity. */
.pricing-card.is-best .pricing-btn {
  background: var(--accent-green, #00d964);
  box-shadow: var(--shadow-featured-btn);
}

.pricing-card.is-best .pricing-btn:hover {
  box-shadow: var(--shadow-featured-btn-hover);
}

/* Solo / fallback button — natural width, centered. */
.pricing-btn-solo {
  width: auto;
  min-width: 200px;
  margin: 0 auto;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Desktop: the pricing area is nested in a text column (e.g. the Studio
   Stream .cta-box, max-width 520px) that's too narrow for three cards in one
   row. Let the area break out of that column up to 760px via symmetric
   horizontal margins — `100%` resolves against the parent's width, so a wider
   target yields negative margins that re-center the row. Margin-based (not
   transform) so it never conflicts with .reveal's transform. */
@media (min-width: 769px) {
  .pricing-cards-area {
    --cards-w: min(760px, calc(100vw - 2 * var(--pad, 24px)));
    width: var(--cards-w);
    margin-inline: calc((100% - var(--cards-w)) / 2);
  }
}

@media (max-width: 768px) {
  .pricing-cards {
    flex-direction: column;
    align-items: stretch;
    max-width: 360px;
  }

  .pricing-card {
    max-width: none;
    width: 100%;
  }

  /* Float the highlighted card to the top on mobile only. */
  .pricing-card.is-best {
    order: -1;
  }
}