/* ==========================================================================
   ABI SHEQ Calculators
   Alle regels zijn gescoped onder .abi-calc zodat het theme nooit meeverandert.
   Layout reageert op de breedte van de CONTAINER, niet op het scherm.
   Daardoor werkt het widget net zo goed in een smalle kolom als full width.
   ========================================================================== */

.abi-calc {
  /* Merkkleuren, afgeleid van het ABI SHEQ logo */
  --abi-navy: #12356b;
  --abi-orange: #f96400;
  --abi-teal: #12aeb5;
  --abi-magenta: #e10a7c;

  --abi-ink: #1b2430;
  --abi-grey: #5a6472;
  --abi-line: #dfe5ee;
  --abi-surface: #ffffff;
  --abi-surface-alt: #f5f8fc;

  --abi-radius: 14px;
  --abi-radius-sm: 10px;
  --abi-gap: 1.25rem;

  --abi-font: inherit;
  --abi-font-num: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  container-type: inline-size;
  container-name: abicalc;

  box-sizing: border-box;
  font-family: var(--abi-font);
  color: var(--abi-ink);
  line-height: 1.55;
  max-width: 1080px;
  margin-inline: auto;
}

.abi-calc *,
.abi-calc *::before,
.abi-calc *::after {
  box-sizing: border-box;
}

/* --- Kaart ---------------------------------------------------------------- */

.abi-calc__card {
  background: var(--abi-surface);
  border: 1px solid var(--abi-line);
  border-radius: var(--abi-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 53, 107, 0.04), 0 8px 28px rgba(18, 53, 107, 0.06);
}

/* Vier kleuren uit het logo als dunne band bovenaan */
.abi-calc__band {
  display: flex;
  height: 5px;
}
.abi-calc__band span {
  flex: 1;
}
.abi-calc__band span:nth-child(1) { background: var(--abi-navy); }
.abi-calc__band span:nth-child(2) { background: var(--abi-orange); }
.abi-calc__band span:nth-child(3) { background: var(--abi-teal); }
.abi-calc__band span:nth-child(4) { background: var(--abi-magenta); }

.abi-calc__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 1.5rem 0;
}

.abi-calc__logo {
  height: 48px;
  width: auto;
  flex: none;
}

.abi-calc__title {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.1cqi, 1.75rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--abi-navy);
}

.abi-calc__intro {
  margin: 0.4rem 0 0;
  color: var(--abi-grey);
  font-size: 0.95rem;
  max-width: 58ch;
}

.abi-calc__body {
  display: grid;
  gap: var(--abi-gap);
  padding: 1.5rem;
}

/* Twee kolommen zodra de CONTAINER breed genoeg is */
@container abicalc (min-width: 760px) {
  .abi-calc__body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 2rem;
  }
}

/* --- Formulier ------------------------------------------------------------ */

.abi-calc__fields {
  display: grid;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.abi-calc__field {
  display: grid;
  gap: 0.5rem;
}

.abi-calc__label {
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--abi-ink);
}

.abi-calc__hint {
  font-size: 0.82rem;
  color: var(--abi-grey);
  margin: 0;
}

.abi-calc__number {
  display: flex;
  align-items: stretch;
  max-width: 220px;
  border: 1px solid var(--abi-line);
  border-radius: var(--abi-radius-sm);
  background: var(--abi-surface);
  overflow: hidden;
}

.abi-calc__number input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-family: var(--abi-font-num);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--abi-ink);
  background: transparent;
  -moz-appearance: textfield;
}
.abi-calc__number input::-webkit-outer-spin-button,
.abi-calc__number input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.abi-calc__step {
  flex: none;
  width: 46px;
  border: 0;
  border-left: 1px solid var(--abi-line);
  background: var(--abi-surface-alt);
  color: var(--abi-navy);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.abi-calc__step:hover { background: #eaf0f8; }

/* Keuzeknoppen: echte radio's, visueel als segmenten. Toegankelijk en licht. */
.abi-calc__options {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr; /* telefoon: onder elkaar, groter raakvlak */
}

@container abicalc (min-width: 520px) {
  .abi-calc__options {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.abi-calc__option {
  position: relative;
  display: block;
}

.abi-calc__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.abi-calc__option span {
  display: block;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--abi-line);
  border-radius: var(--abi-radius-sm);
  background: var(--abi-surface);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.abi-calc__option small {
  display: block;
  color: var(--abi-grey);
  font-size: 0.78rem;
  margin-top: 0.1rem;
}

.abi-calc__option input:checked + span {
  border-color: var(--abi-navy);
  background: #f2f6fc;
  box-shadow: inset 0 0 0 1px var(--abi-navy);
}

.abi-calc__option input:focus-visible + span {
  outline: 3px solid var(--abi-teal);
  outline-offset: 2px;
}

/* --- Resultaat ------------------------------------------------------------ */

.abi-calc__result {
  background: var(--abi-navy);
  color: #fff;
  border-radius: var(--abi-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.abi-calc__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9db6dd;
  margin: 0;
}

.abi-calc__figure {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.abi-calc__number-big {
  font-family: var(--abi-font-num);
  font-size: clamp(3rem, 2rem + 6cqi, 4.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  transition: color 0.2s ease;
}

.abi-calc__number-big.is-updating {
  color: var(--abi-orange);
}

.abi-calc__figure-label {
  font-size: 1rem;
  font-weight: 600;
  color: #dce6f5;
}

/* Signatuur: dekking in beeld. Gevuld = aanwezig, open = reserve. */
.abi-calc__coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.abi-calc__pip {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.abi-calc__pip--on {
  background: var(--abi-orange);
  border-color: var(--abi-orange);
}
.abi-calc__pip--rest {
  background: rgba(255, 255, 255, 0.12);
}

.abi-calc__legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #c3d4ea;
}
.abi-calc__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.abi-calc__legend i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  font-style: normal;
}
.abi-calc__legend i.on { background: var(--abi-orange); border-color: var(--abi-orange); }
.abi-calc__legend i.rest { background: rgba(255, 255, 255, 0.12); }

.abi-calc__breakdown {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
}

.abi-calc__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #d7e2f2;
}
.abi-calc__breakdown b {
  font-family: var(--abi-font-num);
  font-variant-numeric: tabular-nums;
  color: #fff;
  font-weight: 600;
}

.abi-calc__note {
  font-size: 0.8rem;
  color: #b9cbe4;
  margin: 0;
}

/* Duwt de disclaimer naar de onderkant, zodat de blauwe kolom netjes
   even hoog is als het formulier ernaast. */
@container abicalc (min-width: 760px) {
  .abi-calc__note { margin-top: auto; }
}

/* --- Vervolgstap ---------------------------------------------------------- */

.abi-calc__cta {
  background: var(--abi-surface-alt);
  border-top: 1px solid var(--abi-line);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.abi-calc__cta p {
  margin: 0;
  font-size: 0.95rem;
  max-width: 46ch;
}

.abi-calc__button {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: var(--abi-orange);
  color: #fff;
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.abi-calc__button:hover {
  background: #e05a00;
  color: #fff;
  transform: translateY(-1px);
}
.abi-calc__button:focus-visible {
  outline: 3px solid var(--abi-navy);
  outline-offset: 2px;
}

.abi-calc__form {
  padding: 0 1.5rem 1.25rem;
}

/* --- Voetregel ------------------------------------------------------------ */

.abi-calc__footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--abi-line);
  font-size: 0.8rem;
  color: var(--abi-grey);
}

.abi-calc__footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--abi-grey);
  text-decoration: none;
  font-weight: 600;
}
.abi-calc__footer a:hover { color: var(--abi-navy); }

.abi-calc__footer img {
  height: 20px;
  width: auto;
  vertical-align: middle;
}

/* --- Toegankelijkheid ----------------------------------------------------- */

.abi-calc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .abi-calc *,
  .abi-calc *::before,
  .abi-calc *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Fallback voor browsers zonder container queries */
@supports not (container-type: inline-size) {
  @media (min-width: 800px) {
    .abi-calc__body {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: 2rem;
    }
  }
}