/* ===================================
   HERO PRICE CARD
   The white card on the dark hero stage: age input and price row, primary CTA, secondary
   link, reinforcement line and the price skeleton of the script. Its content keeps the ink
   colours. The trust row is not part of the card; hero-section.css places it under the card.
   Inherits the --tp-* tokens from .blob-background (hero-section.css), including the
   .bb-site re-colouring. The legacy class names (.hero-price-calculator, .hero-calculator-*,
   .price-*) stay: insurance-page.js drives them and public-design.css restyles them on the
   campaign host.
   =================================== */

/* --- Price card --- */
.insurance-hero__offer {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-lg);
  background: var(--tp-paper);
  color: var(--tp-ink);
  box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.1);
  min-width: 0;
}
/* Campaign host: the card sits on a light glass surface, so the shadow stays soft. */
:where(.bb-site) .insurance-hero__offer {
  box-shadow: 0 24px 60px -32px color-mix(in srgb, var(--tp-accent) 45%, transparent), 0 2px 8px rgba(37, 39, 33, 0.04);
}

.hero-price-calculator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--tp-line);
}

.hero-calculator-compact__input-group {
  display: grid;
  gap: 6px;
}

.hero-calculator-compact__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-ink-3);
}

/* The age field itself is the shared stepper (age-stepper.css). */

.hero-calculator-compact__result {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.hero-calculator-compact__result-price {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

/* An age outside the price list: tariff-page.js swaps the figure for this line. */
.price-unavailable {
  display: none;
  max-width: 180px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tp-ink-2);
}
.hero-calculator-compact__result.is-unavailable .price-unavailable {
  display: block;
}
.hero-calculator-compact__result.is-unavailable .price-amount,
.hero-calculator-compact__result.is-unavailable .hero-price-period {
  display: none;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}

.price-prefix {
  font-size: 15px;
  font-weight: 600;
  color: var(--tp-ink-3);
  transition: opacity 0.25s ease;
}
/* The script hides the prefix after the first age change. */
.price-prefix.hidden {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.price-value {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1;
  color: var(--tp-accent);
}

.price-currency {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--tp-accent);
}

.hero-price-period {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tp-ink-3);
}

/* Spans both calculator columns so it never squeezes the price. */
.price-constant-hint {
  grid-column: 1 / -1;
  margin-top: -8px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  color: var(--tp-accent);
}

/* --- Actions --- */
.hero-calculator-compact__actions {
  display: grid;
  gap: 8px;
}

.hero-calculator-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--tp-r-sm);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.hero-calculator-btn--cta {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: #FFFFFF;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--tp-accent) 70%, transparent);
}
.hero-calculator-btn--cta:hover {
  background: var(--tp-accent-hover);
  border-color: var(--tp-accent-hover);
}

.hero-calculator-btn--details {
  min-height: 44px;
  background: transparent;
  color: var(--tp-accent);
}
.hero-calculator-btn--details:hover {
  background: var(--tp-mint);
}

.hero-calculator-btn:focus-visible,
.insurance-hero :is(a, button):focus-visible {
  outline: 3px solid var(--tp-accent-bright);
  outline-offset: 2px;
}

/* --- Price skeleton while the script recomputes --- */
.price-value.loading,
.price-currency.loading {
  display: inline-block;
  background: linear-gradient(90deg, #EEF1F0 25%, #E1E6E4 50%, #EEF1F0 75%);
  background-size: 200% 100%;
  animation: heroShimmer 1.4s infinite;
  border-radius: 8px;
  color: transparent;
  user-select: none;
}
.price-value.loading {
  min-width: 96px;
  height: 44px;
}
.price-currency.loading {
  min-width: 26px;
  height: 26px;
}

@keyframes heroShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Responsive --- */
/* Tablet width and centring come from .insurance-hero__aside (hero-section.css). */
@media (max-width: 480px) {
  .insurance-hero__offer {
    padding: 18px 16px;
    border-radius: var(--tp-r-md);
  }
  .hero-price-calculator {
    gap: 12px;
  }
  .price-value {
    font-size: 38px;
  }
  .price-value.loading {
    height: 38px;
    min-width: 84px;
  }
  .price-currency {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-value.loading,
  .price-currency.loading {
    animation: none;
    background: #E1E6E4;
  }
  .hero-calculator-btn,
  .price-prefix {
    transition: none;
  }
}