/* Pricing page — service selector, fixed package cards, and the
   multi-step calculator. Package cards reuse the .card shell; the
   calculator is its own self-contained component. */

.pricing-service-card__from {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent-blue-strong);
  margin: var(--space-2xs) 0 0;
}

.pricing-service-card__usd {
  font-weight: 500;
  color: var(--color-text-muted);
}

/* --- Package cards ------------------------------------------------------ */

.pricing-service-group {
  margin-bottom: var(--space-2xl);
}

.pricing-service-group:last-child {
  margin-bottom: 0;
}

.pricing-service-group__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.pricing-card--popular {
  border-color: var(--color-accent-blue-strong);
  box-shadow: 0 0 0 1px var(--color-accent-blue-strong), 0 1.5rem 2.5rem -1.25rem rgba(0, 0, 0, 0.35);
}

.pricing-card__badge {
  position: absolute;
  top: -0.8rem;
  left: var(--space-lg);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-on-accent);
  background: var(--color-accent-blue);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.85rem;
}

.pricing-card__name {
  font-size: var(--fs-md);
  margin-bottom: var(--space-3xs);
}

.pricing-card__tagline {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.pricing-card__price {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.pricing-card__amount {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.pricing-card__features {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}

.pricing-card__features li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.pricing-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  box-shadow: inset 0 0 0 1px rgba(47, 158, 110, 0.4);
}

.pricing-card__features li::after {
  content: '';
  position: absolute;
  left: 0.26rem;
  top: 0.48em;
  width: 0.34rem;
  height: 0.18rem;
  border-left: 2px solid var(--color-success);
  border-bottom: 2px solid var(--color-success);
  transform: rotate(-45deg);
}

.pricing-card .btn {
  margin-top: auto;
}

/* Grid items get an implicit min-width: auto in CSS Grid, so a `1fr` track
   (layout.css's .grid--4) won't shrink below a card's own intrinsic content
   width (e.g. a button label like "Subscribe via PayPal") — inside a
   container that also has overflow-x: auto (admin.css's .admin-panel, sized
   for wide tables) that silently clips the last column instead of visibly
   scrolling. min-width: 0 lets these cards shrink to fit their track like
   any other responsive grid item. */
.pricing-grid > .pricing-card {
  min-width: 0;
}

/* --- Calculator ------------------------------------------------------------
   A single elevated card on the page's own background, built entirely from
   the site's existing design tokens (--color-bg-elevated, --color-text, etc.)
   so it follows the light/dark toggle correctly instead of being locked to
   one look. The live estimate lives in the card's own header (not a separate
   sidebar), with a 4-phase label row standing in for a linear progress bar —
   each of Konstent's actual calculator steps declares which of the 4 phases
   it belongs to via data-phase, since the real step count varies per service
   (pricing-calculator.js reads that attribute to light up the right phase). */

.calc-hero {
  display: flex;
  justify-content: center;
  scroll-margin-top: calc(var(--mobile-bar-height, 0px) + var(--space-lg));
}

.calc-card {
  position: relative;
  width: 100%;
  max-width: 68rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl) var(--space-lg);
  color: var(--color-text);
}

@media (min-width: 40rem) {
  .calc-card {
    padding: var(--space-2xl);
  }
}

.calc-card__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-blue-strong);
  margin: 0 0 var(--space-xs);
}

.calc-card__price {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin: 0 0 var(--space-3xs);
  min-height: 1.3em;
  color: var(--color-text);
}

.calc-card__price[data-empty] {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text-muted);
}

.calc-card__price-usd {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.calc-card__subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.calc-phases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.calc-phases span {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  transition: color var(--duration-base) var(--ease-out);
}

.calc-phases span.is-active {
  color: var(--color-accent-blue-strong);
}

.calc-phases span.is-done {
  color: var(--color-text-muted);
}

.calculator__error {
  color: var(--color-danger);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-md);
}

.calculator-step {
  display: none;
}

.calculator-step.is-active {
  display: block;
  animation: calculator-step-in 0.35s var(--ease-out);
}

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

.calculator-step__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
  color: var(--color-text);
}

.calculator-step__hint {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.calculator-service-grid,
.calculator-options {
  display: flex;
  flex-direction: column;
}

.calculator-service-card,
.calculator-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-3xs);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out), padding-left var(--duration-fast) var(--ease-out);
}

.calculator-service-grid > :last-child,
.calculator-options > :last-child {
  border-bottom: none;
}

.calculator-service-card:hover,
.calculator-option:hover {
  border-color: var(--color-border-strong);
}

.calculator-service-card.is-selected,
.calculator-option:has(input:checked) {
  border-color: var(--color-accent-blue-strong);
  padding-left: var(--space-sm);
  box-shadow: inset 2px 0 0 var(--color-accent-blue-strong);
}

.calculator-service-card__icon {
  display: none;
}

.calculator-service-card__label,
.calculator-option__label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.calculator-option__label small {
  display: block;
  margin-top: 0.15em;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}

.calculator-option input {
  flex-shrink: 0;
  accent-color: var(--color-accent-blue-strong);
}

.calculator-option__price {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calculator__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.calculator__nav [data-calculator-next] {
  margin-left: auto;
}

/* .btn's flex display (components.css) is a class rule that beats the UA
   stylesheet's `[hidden] { display: none }` (an attribute selector, lower
   specificity) — without this, JS toggling the `hidden` attribute on the
   Back button has no visual effect. Same class of bug as the pricing-card
   filter fix earlier. */
.calculator__nav [hidden] {
  display: none !important;
}

.calculator-breakdown {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.calculator-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
}

.calculator-breakdown li span:first-child {
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .calculator-step.is-active {
    animation: none;
  }
}