/* Bli medlem: tilläggsförsäkringen (se js/tillaggsforsakring.js).
 *
 * 1. OBS-rutorna (.warning-callout) har Webflows line-height: 100 %, som bara fungerar när
 *    texten ryms på en rad. Rutan om tilläggsförsäkringen har två rader, och a-kassans ruta
 *    bryts på mobil, så raderna slog i varandra.
 * 2. Mellansteget innan e-postprogrammet öppnas är en <dialog>. Den ärver inget från
 *    Webflow, så utseendet står här: vit ruta på mörk bakgrund, samma rundning som
 *    OBS-rutan och sajtens blå för knappen.
 */

.warning-callout .denna-del-anskas-separat,
.warning-callout .a-kassan-r-inte-automatiskt-inkluderat---du-behver-anska-separat {
  line-height: 1.4;
}

.forsakring-steg {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: 1.5rem;
  border: 0;
  border-radius: 12px;
  background-color: #fff;
  color: #1a1a1a;
  font-family: Inter, sans-serif;
  box-shadow: 0 20px 60px rgba(7, 18, 41, 0.45);
}

.forsakring-steg::backdrop {
  background-color: rgba(7, 18, 41, 0.7);
}

/* Sajtens h2 (Spectral, -1,8 px bokstavsavstånd) är gjord för stora rubriker och blir
   hoptryckt i den här storleken. Typsnittet får stå kvar, avståndet nollställs. */
.forsakring-steg h2 {
  margin: 0 0 0.75rem;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
}

.forsakring-steg p,
.forsakring-steg ol {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.forsakring-steg ol {
  padding-left: 1.25rem;
}

.forsakring-steg li + li {
  margin-top: 0.375rem;
}

.forsakring-steg label {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.forsakring-steg input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: #0d3699;
}

.forsakring-steg-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.forsakring-steg button {
  padding: 0.75rem 1.25rem;
  border: 1px solid #0d3699;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.forsakring-steg button[value="ok"] {
  background-color: #0d3699;
  color: #fff;
}

.forsakring-steg button[value="ok"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.forsakring-steg button[value="tillbaka"] {
  background-color: transparent;
  color: #0d3699;
}