/* Crowd.Shots public commercial layer
   ------------------------------------------------------------
   Scope:
   - homepage
   - pricing
   - checkout
   - thank-you/payment status
   - public partner acquisition pages

   This file intentionally builds on Bootstrap 5 and the Crowd.Shots
   foundation styles. Keep it small, component-based and accessible.
*/

:root {
  --cs-commercial-surface: var(--cs-color-surface);
  --cs-commercial-muted: var(--cs-color-surface-muted);
  --cs-commercial-soft: var(--cs-color-primary-soft);
  --cs-commercial-soft-strong: var(--cs-color-accent-soft);
  --cs-commercial-border: var(--cs-color-border);
  --cs-commercial-shadow: var(--cs-shadow-md);
  --cs-commercial-shadow-sm: var(--cs-shadow-sm);
  --cs-commercial-radius: var(--cs-radius-xl);
  --cs-commercial-radius-sm: var(--cs-radius-lg);
}

.cs-commercial-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, var(--cs-commercial-soft), transparent 34rem),
    linear-gradient(180deg, var(--cs-commercial-surface), var(--cs-commercial-muted));
}

.cs-commercial-hero::before {
  content: "";
  position: absolute;
  inset: auto -6rem -10rem auto;
  width: 22rem;
  height: 22rem;
  pointer-events: none;
  border-radius: 50%;
  background: var(--cs-commercial-soft-strong);
}

.cs-commercial-section {
  position: relative;
}

.cs-commercial-card,
.cs-commercial-action-card {
  border: 1px solid var(--cs-commercial-border) !important;
  box-shadow: var(--cs-commercial-shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cs-commercial-card:hover,
.cs-commercial-action-card:hover,
.cs-commercial-card:focus-within,
.cs-commercial-action-card:focus-within {
  border-color: var(--cs-commercial-border) !important;
  box-shadow: var(--cs-commercial-shadow) !important;
}

@media (hover: hover) and (pointer: fine) {
  .cs-commercial-card:hover,
  .cs-commercial-action-card:hover {
    transform: translateY(-.15rem);
  }
}

.cs-commercial-action-card {
  background:
    linear-gradient(180deg, var(--cs-commercial-surface), var(--cs-commercial-muted));
}

.cs-pricing-group-card .display-6,
.cs-pricing-plan-card .display-5 {
  letter-spacing: -.04em;
}

.cs-pricing-plan-card--featured {
  position: relative;
}

.cs-pricing-plan-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--cs-commercial-border);
}

.cs-checkout-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cs-checkout-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6rem;
  top: -7rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: var(--cs-commercial-soft-strong);
}

.cs-commercial-checkout .card {
  border-radius: var(--cs-commercial-radius);
}

.cs-form-error-summary {
  border-radius: 1rem;
}

.cs-form-error-summary:focus {
  outline: var(--cs-focus);
  outline-offset: .25rem;
}

.cs-commercial-status-page .card {
  border: 1px solid var(--cs-commercial-border);
  border-radius: var(--cs-commercial-radius);
  box-shadow: var(--cs-commercial-shadow-sm);
}

.cs-commercial-empty-state {
  border-radius: 1rem;
  background:
    linear-gradient(180deg, var(--cs-commercial-surface), var(--cs-commercial-muted));
}

.cs-commercial-empty-state::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: .25rem;
  margin-bottom: .75rem;
  border-radius: 999px;
  background: var(--cs-color-primary);
}

.cs-commercial-card .btn,
.cs-commercial-action-card .btn,
.cs-commercial-checkout .btn,
.cs-commercial-status-page .btn {
  min-height: 2.75rem;
}

.cs-commercial-card .badge,
.cs-commercial-action-card .badge,
.cs-checkout-hero .badge {
  border-radius: 999px;
  padding-inline: .7rem;
  padding-block: .42rem;
}

@media (max-width: 575.98px) {
  .cs-commercial-hero .display-5,
  .cs-commercial-hero .display-6 {
    font-size: clamp(2rem, 11vw, 2.6rem);
  }

  .cs-commercial-card,
  .cs-commercial-action-card {
    border-radius: var(--cs-commercial-radius-sm) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-commercial-card,
  .cs-commercial-action-card {
    transition: none;
    transform: none !important;
  }
}