/* ============================================================
   pricing.css
   Styles for the public Pricing page, the Founding Attorneys
   announcement page, and shared pricing/founding counter
   primitives also reused inside /Account/Billing.
   All values reference tokens from variables.css.
   ============================================================ */

/* ---------- Card grid (used on FoundingFathers.cshtml) ----- */
.ls-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ls-space-6);
}

/* ---------- Founding Attorney banner (Pricing hero) -------- */
.ls-alert-gold {
  background: rgba(201, 162, 39, 0.12);
  color: var(--ls-white);
  border: 1px solid var(--ls-gold);
}
.ls-alert-gold i { color: var(--ls-gold); }
.ls-alert-gold a { color: var(--ls-gold-light); text-decoration: underline; }
.ls-alert-gold a:hover { color: var(--ls-gold); }

/* ---------- Gold-soft badge (Save 20% pill) ---------------- */
.ls-badge-gold-soft {
  background: rgba(201, 162, 39, 0.18);
  color: var(--ls-gold-light);
  border: 1px solid rgba(201, 162, 39, 0.45);
}

/* ---------- Pricing grid ----------------------------------- */
.ls-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ls-space-6);
  align-items: stretch;
}

/* ---------- Pricing card ----------------------------------- */
.ls-pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--ls-white);
  border: 1px solid var(--ls-gray-100);
  border-radius: var(--ls-radius-lg);
  padding: var(--ls-space-8) var(--ls-space-6);
  box-shadow: var(--ls-shadow-sm);
  transition: box-shadow var(--ls-transition-base),
              transform var(--ls-transition-base),
              border-color var(--ls-transition-base);
}
.ls-pricing-card:hover {
  box-shadow: var(--ls-shadow-lg);
  transform: translateY(-2px);
}

.ls-pricing-card--highlight {
  border: 2px solid var(--ls-gold);
  box-shadow: var(--ls-shadow-md);
  position: relative;
}
.ls-pricing-card--highlight:hover {
  box-shadow: var(--ls-shadow-xl);
}

.ls-pricing-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ls-space-3);
  margin-bottom: var(--ls-space-4);
}

.ls-pricing-plan-name {
  font-family: var(--ls-font-display);
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-navy);
  margin: 0;
}

/* ---------- Price block ------------------------------------ */
.ls-pricing-price {
  margin-bottom: var(--ls-space-5);
  line-height: 1.2;
}

.ls-pricing-amount {
  font-family: var(--ls-font-display);
  font-size: var(--ls-text-4xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-navy);
}

.ls-pricing-cadence {
  font-size: var(--ls-text-base);
  color: var(--ls-gray-500);
  margin-left: var(--ls-space-1);
}

.ls-pricing-saving {
  margin-top: var(--ls-space-2);
  font-size: var(--ls-text-sm);
  color: var(--ls-success);
  font-weight: var(--ls-weight-medium);
}

/* ---------- Seat row --------------------------------------- */
.ls-pricing-seat {
  display: flex;
  align-items: center;
  gap: var(--ls-space-2);
  padding: var(--ls-space-3) 0;
  border-top: 1px solid var(--ls-gray-100);
  border-bottom: 1px solid var(--ls-gray-100);
  color: var(--ls-gray-600);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-medium);
  margin-bottom: var(--ls-space-4);
}
.ls-pricing-seat i {
  width: 16px;
  height: 16px;
  color: var(--ls-gold-dark);
}

/* ---------- Feature list ----------------------------------- */
.ls-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ls-space-6) 0;
  flex-grow: 1;
}
.ls-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--ls-space-2);
  padding: var(--ls-space-2) 0;
  font-size: var(--ls-text-sm);
  color: var(--ls-gray-800);
}
.ls-pricing-features li i {
  width: 16px;
  height: 16px;
  color: var(--ls-success);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- CTA area --------------------------------------- */
.ls-pricing-cta {
  margin-top: auto;
}

/* ---------- Founding Attorney counter ---------------------- */
.ls-founding-counter {
  max-width: 480px;
  margin: 0 auto;
}

/* Hero variant — left-aligned inside the landing hero column */
.ls-founding-counter--hero {
  margin-left: 0;
  margin-right: 0;
}

.ls-founding-counter-bar {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--ls-radius-full);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.35);
}

.ls-founding-counter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ls-gold-dark), var(--ls-gold));
  border-radius: var(--ls-radius-full);
  transition: width var(--ls-transition-slow);
}

.ls-founding-counter-label {
  margin-top: var(--ls-space-3);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-medium);
  color: var(--ls-gold-light);
  letter-spacing: 0.02em;
}

/* ---------- Responsive ------------------------------------- */
@media (max-width: 768px) {
  .ls-pricing-grid,
  .ls-card-grid {
    grid-template-columns: 1fr;
  }
  .ls-pricing-amount {
    font-size: var(--ls-text-3xl);
  }
  .ls-pricing-card {
    padding: var(--ls-space-6) var(--ls-space-5);
  }
}