/* ===================================
   INVOICE CHECK
   Playful "what do I get back?" simulator that leads into the checkout.
   Left: control column (treatment cards, amount input with currency suffix, insurance-year
   segmented control, optional used-amount slider). Right: receipt-style result card: one split
   bar of the bill (grey tile = public health insurer, accent = this tariff, ink = own share)
   with the first two labelled above the bar and the own share branched off below it, then the
   compact ledger, the note and the CTA. Labels of empty segments carry `hidden`. The split bar
   and the ledger live in invoice-check-split.css (linked by invoice-check.ejs).
   The base --tp-* tokens, the campaign re-tint and the section title come from tariff-page-tokens.css.
   Short single-purpose rules are written on one line to keep the file compact.
   =================================== */

.tariff-invoice {
  --tp-r-sm: 14px;
  --tp-r-md: 18px;
  --tp-r-lg: 24px;
  --tp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 8px;
  font-family: var(--tp-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tp-ink);
}
.tariff-invoice *,
.tariff-invoice *::before,
.tariff-invoice *::after {
  box-sizing: inherit;
}

.tariff-invoice__inner,
.tariff-invoice__head,
.tariff-invoice__controls,
.tariff-invoice__field {
  display: grid;
}
.tariff-invoice__inner { gap: 28px; }
.tariff-invoice__head { gap: 8px; }

.tariff-invoice__intro {
  margin: 0;
  max-width: 70ch;
  color: var(--tp-ink-2);
}

.tariff-num { font-variant-numeric: tabular-nums; }

/* --- Layout --- */
.tariff-invoice__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 32px;
  align-items: start;
}

.tariff-invoice__controls { gap: 26px; padding-top: 4px; }
.tariff-invoice__field { gap: 10px; }

.tariff-invoice__field-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tp-ink);
}

/* Treatment choice: cards with a radio-like ring that fills when pressed */
.tariff-invoice__treatments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* The single track may shrink below the label's longest word, so a long label breaks at its soft
   hyphen ("Wurzel-behandlung") instead of running under the check circle on narrow phones. */
.tariff-invoice__treatment {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  min-width: 0;
  padding: 14px 46px 14px 16px;
  align-content: center;
  border: 1.5px solid var(--tp-line);
  border-radius: var(--tp-r-sm);
  background: var(--tp-paper);
  color: var(--tp-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--tp-ease), background-color 0.18s var(--tp-ease), box-shadow 0.18s var(--tp-ease), transform 0.12s var(--tp-ease);
}
.tariff-invoice__treatment::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 14px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--tp-line);
  border-radius: 50%;
  background: var(--tp-paper);
  transition: border-color 0.18s var(--tp-ease), background-color 0.18s var(--tp-ease);
}
.tariff-invoice__treatment::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 21px;
  width: 5px;
  height: 9px;
  border: solid var(--tp-paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.18s var(--tp-ease);
}
.tariff-invoice__treatment:hover {
  border-color: var(--tp-accent);
  box-shadow: 0 8px 20px -16px rgba(37, 39, 33, 0.4);
}
.tariff-invoice__treatment:active { transform: scale(0.985); }
.tariff-invoice__treatment[aria-pressed="true"] {
  border-color: var(--tp-accent);
  background: var(--tp-mint);
  box-shadow: inset 0 0 0 1px var(--tp-accent);
}
.tariff-invoice__treatment[aria-pressed="true"]::before {
  border-color: var(--tp-accent);
  background: var(--tp-accent);
}
.tariff-invoice__treatment[aria-pressed="true"]::after { transform: rotate(45deg) scale(1); }
.tariff-invoice__treatment b { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }

/* Insurance year: a native select styled like the treatment cards, with its own chevron */
.tariff-invoice__year-select {
  width: 100%;
  max-width: 280px;
  padding: 12px 44px 12px 16px;
  border: 1.5px solid var(--tp-line);
  border-radius: var(--tp-r-sm);
  background: var(--tp-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%235F6B70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  color: var(--tp-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s var(--tp-ease), box-shadow 0.18s var(--tp-ease);
}
.tariff-invoice__year-select:hover { border-color: var(--tp-grey-ink); }
.tariff-invoice__year-select:focus-visible {
  outline: none;
  border-color: var(--tp-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tp-accent) 16%, transparent);
}

/* --- Receipt --- */
.tariff-invoice__receipt {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 26px 26px 24px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-lg);
  background: var(--tp-paper);
  box-shadow: 0 28px 56px -36px rgba(37, 39, 33, 0.4), 0 2px 6px rgba(37, 39, 33, 0.04);
  overflow: hidden;
}
.tariff-invoice__receipt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--tp-accent), var(--tp-accent-bright));
}

.tariff-invoice__receipt-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--tp-ink-3);
}

/* The typical bill the result is computed with, as the receipt's headline figure. */
.tariff-invoice__bill {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: -6px 0 0;
  font-size: 15px;
  color: var(--tp-ink-2);
}
.tariff-invoice__bill b {
  font-size: 24px;
  font-weight: 800;
  color: var(--tp-ink);
}

.tariff-invoice__note {
  margin: 0;
  min-height: 1.4em;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tp-ink-3);
}

.tariff-invoice__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  justify-self: stretch;
  min-height: 50px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--tp-accent);
  color: var(--tp-paper);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--tp-accent) 80%, transparent);
  transition: background-color 0.18s var(--tp-ease), transform 0.12s var(--tp-ease);
}
.tariff-invoice__cta::after {
  content: "";
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.tariff-invoice__cta:hover { background: var(--tp-accent-hover); }
.tariff-invoice__cta:active { transform: scale(0.985); }

.tariff-invoice__footnote {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tp-ink-3);
}

/* --- Focus --- */
.tariff-invoice :is(button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--tp-accent-bright);
  outline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .tariff-invoice__layout { grid-template-columns: 1fr; gap: 28px; }
  .tariff-invoice__receipt { position: static; }
}

@media (max-width: 480px) {
  .tariff-invoice { padding: 40px 16px 8px; }
  .tariff-invoice__controls { gap: 22px; }
  .tariff-invoice__treatment { padding: 12px 42px 12px 14px; }
  .tariff-invoice__amount { max-width: none; }
  .tariff-invoice__years { width: 100%; border-radius: var(--tp-r-md); }
  .tariff-invoice__year { padding: 8px 12px; }
  .tariff-invoice__receipt { padding: 22px 18px 20px; }
  .tariff-invoice__receipt::before { left: 18px; right: 18px; }
}

@media (max-width: 360px) {
  .tariff-invoice__treatments { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tariff-invoice__treatment,
  .tariff-invoice__treatment::before,
  .tariff-invoice__treatment::after,
  .tariff-invoice__year,
  .tariff-invoice__amount-input,
  .tariff-invoice__cta {
    transition: none;
  }
}