/* Osamaksun maininta pakettisivun hintaosion lopussa (partials/osamaksu.php, osamaksu_maininta_html). */
.osamaksu-maininta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 760px;
  margin: 32px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--navy-100);
  border-radius: 16px;
  background: var(--navy-50);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}
.osamaksu-maininta svg { flex: none; margin-top: 1px; color: var(--navy); }
.osamaksu-maininta strong { color: var(--navy-dark); font-weight: 800; }
.osamaksu-maininta a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.osamaksu-maininta a:hover,
.osamaksu-maininta a:focus-visible { color: var(--orange); }

/* Pakettikortin erärivi hinnan alla: oma korostettu pilleri, jotta erämaksu erottuu kortin hinnasta.
   Pilleri on hintaelementin sisällä, joten se nollaa hinnan typografian. */
.osamaksu-kortti {
  display: flex;
  width: fit-content;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(233, 30, 133, 0.22);
  border-radius: 16px;
  background: var(--pink-50);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--navy);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.osamaksu-kortti svg { flex: none; color: var(--pink); }
.osamaksu-kortti .om-nimi { display: block; font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--navy-dark); }
.osamaksu-kortti b { font-size: 15px; font-weight: 900; color: var(--navy-dark); }
.osamaksu-kortti:hover,
.osamaksu-kortti:focus-visible { border-color: var(--pink); background: #fff; }
.osamaksu-kortti-paikka { display: block; min-height: 68px; }
.osamaksu-rivi { display: flex; margin: -16px 0 32px; }

/* Tekstirivi napin alla: ei omaa taustaa, joten päänappi pysyy kohdan ainoana korostuksena. */
.osamaksu-teksti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: inherit;
  text-decoration: none;
}
.osamaksu-teksti svg { flex: none; }
.osamaksu-teksti b { font-weight: 800; }
.osamaksu-teksti:hover span,
.osamaksu-teksti:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.price-option .osamaksu-kortti { margin: 0 0 14px; }