/* -- Pricing (marketing) -------------------------------------------
   Section head + billing toggle (composed from the tabs component) +
   plan cards. The featured plan upgrades its border — no layout shift. */

@layer components {
  .mk-pricing {
    container: mk-pricing / inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  /* centered stack: eyebrow/title/desc + toggle all share the section's
     center line (align-items, not text-align — the toggle is a box) */
  .mk-pricing-head { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }

  .mk-pricing-eyebrow { color: var(--primary); font-size: 1rem; font-weight: 500; }

  .mk-pricing-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-pricing-desc { margin: 0; max-width: 42rem; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  /* Segmented billing toggle: real radios + :has() — keyboard, screen
     readers, and form semantics work natively; one checked radio flips
     every plan's price pair, which per-tab aria-controls could not. */
  .mk-pricing-billing {
    display: inline-flex;
    align-self: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: var(--muted);

    & label {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.375rem 0.75rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--muted-foreground);
      cursor: pointer;
    }

    & label:has(input:checked) {
      background: var(--background);
      color: var(--foreground);
      box-shadow: var(--shadow-2xs);
    }

    /* keyboard focus lands on the radio — show the ring on its label */
    & label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* price swap: each plan ships yearly + monthly rows; the checked radio
     anywhere in the section flips every plan at once via :has() */
  .mk-plan-price.mk-price-monthly { display: none; }

  .mk-pricing:has(.mk-bill-monthly:checked) {
    & .mk-plan-price.mk-price-yearly { display: none; }
    & .mk-plan-price.mk-price-monthly { display: flex; }
  }

  .mk-plans { display: grid; align-items: stretch; gap: 1.25rem; }

  .mk-plan {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    padding-block: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-sm);

    /* featured plan: 2px primary border (same box size → no shift) */
    &[data-featured] {
      border: 2px solid var(--primary);
    }
  }

  .mk-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 1.5rem;
  }

  .mk-plan-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--muted);

    & svg { width: 1rem; height: 1rem; color: var(--primary); }
  }

  .mk-plan-body { display: flex; flex-direction: column; gap: 0.5rem; padding-inline: 1.5rem; }

  .mk-plan-title { font-size: 1.125rem; font-weight: 600; }

  .mk-plan-desc { font-size: 0.875rem; color: var(--muted-foreground); }

  .mk-plan-price {
    display: flex;
    gap: 0.5rem;
    margin-block-start: auto;
    padding-inline: 1.5rem;
  }

  .mk-plan-amount {
    align-self: flex-end;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }

  .mk-plan-unit { display: flex; flex-direction: column; align-self: flex-end; }
  .mk-plan-unit-label { font-size: 0.875rem; font-weight: 500; }
  .mk-plan-unit-note { font-size: 0.875rem; color: var(--muted-foreground); }

  .mk-plan-cta { padding-inline: 1.5rem; & .btn { width: 100%; } }

  .mk-plan-features {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-inline: 1.5rem;
  }

  .mk-plan-feature {
    display: flex;
    gap: 0.375rem;

    & svg { width: 1rem; height: 1rem; margin-block-start: 0.25rem; color: var(--muted-foreground); flex-shrink: 0; }
    & span { flex: 1; font-size: 1rem; }
  }

  @container mk-pricing (min-width: 52rem) {
    .mk-pricing-title { font-size: 2.25rem; }
    .mk-plans { grid-template-columns: repeat(3, 1fr); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-plan { border-color: CanvasText; }
    .mk-pricing-billing label:has(input:checked) { outline: 1px solid Highlight; }
  }
}