/* Fragment styles for the shared HTMX fragments (pricing cards, trial form,
 * checkout form). A brand overrides VARIABLES only (colours, spacing, fonts),
 * never layout, so fragment markup can change on upgrade without breaking a
 * brand. Responsiveness is provided here by the shared default layout, so every
 * brand is mobile-friendly out of the box.
 */

:root {
  color-scheme: light;
  --ls-fragment-gap: 0.75rem;
  --ls-card-padding: 1rem 1.25rem;
  --ls-card-border: #d1d5db;
  --ls-card-radius: 8px;
  --ls-accent: #6366f1;
  --ls-popular-border: 2px solid var(--ls-accent);
  --ls-control-min: 44px; /* tap-friendly control height */
}

.pricing-cards {
  display: grid;
  gap: var(--ls-fragment-gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

.price-card {
  padding: var(--ls-card-padding);
  border: 1px solid var(--ls-card-border);
  border-radius: var(--ls-card-radius);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.price-card.popular {
  border: var(--ls-popular-border);
}

.price-card .price {
  font-size: 1.25rem;
}

.price-card .checkout-form {
  margin-top: auto;
}

.promo-strip {
  margin: 0.75rem 0;
}

.promo-strip .promo {
  margin: 0 0.5rem 0.5rem 0;
}

.trial-form input,
.trial-form select,
.checkout-form button,
.checkout-form input,
.checkout-form select {
  min-height: var(--ls-control-min);
}

.payment-element {
  margin: 0.5rem 0;
}

.checkout-error {
  margin: 0.25rem 0;
}

/* Phones: a single column, fluid cards, full-width controls. */
@media (max-width: 640px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }
  .price-card {
    width: 100%;
  }
  .checkout-form .btn,
  .trial-form .btn {
    width: 100%;
  }
}