@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Noto+Sans+Georgian:wght@100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: linear-gradient(90deg, #ef6619 0%, #e8052d 100%);
  --Georgian: "Noto Sans Georgian", sans-serif;
}

body {
  font-family: var(--Georgian);
  background-color: #efede8;
  font-size: 1.25rem;
  color: #000;
}

/* body section  */

.wrappergroep,
.wrapperbereken,
.wrapperaanvullend,
.wrappertandarts {
  display: flex;
  flex-direction: column;
  width: 1010px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.wrappergroep {
  height: 221px;
  margin-top: 40px;
  padding: 2rem;
}

.wrapperaanvullend,
.wrappertandarts {
  height: 77px;
  margin-top: 40px;
}

.wrapperaanvullend,
.wrappertandarts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2rem;
}

.wrapperaanvullend h2,
.wrappertandarts h2 {
  font-size: 24px;
  color: #9a9694;
}

.wrappertandarts {
  margin-bottom: 100px;
}

.wrappergroep h1 {
  color: #000;
  font-family: var(--Georgian);
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.wrappergroep p,
.bereken p {
  width: 918px;
  color: #7d7d7d;
  font-family: var(--Georgian);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.wrappergroep p {
  margin-bottom: 0.94rem;
}

.inputradio {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.inputradio label {
  margin-right: 0.6rem;
}

.inputradio input[type="radio"] {
  margin-right: 0.6rem;
}

/* begin wrapper berekenen */

.wrapperbereken {
  margin-top: 40px;
  height: 1952px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
}

.wrapperbereken.visible {
  height: 2220px;
}

.wrapperbereken-content {
  height: 1895px;
  padding: 2rem;
}

.bereken h1 {
  font-size: 24px;
}

/* basket section */

.basket-section {
  background: linear-gradient(90deg, #ff7b2c, #ff003c);
  padding: 15px;
  color: #fff;
  border-radius: 10px;
  position: sticky;
  top: 10px;
  z-index: 10;
}

.basket-section .basket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  padding-left: 1rem;
  padding-right: 1rem;
}

.basket-section .basket-icon {
  display: flex;
}

.basket-section .basket-icon img {
  width: 30px;
  height: 30px;
  margin-left: 8px;
  transition: transform 0.3s ease-in-out;
}

.arrow-icon {
  cursor: pointer;
}

.arrow-icon.open {
  transform: rotate(180deg);
}

/* Basket Content (Hidden by Default) */
.basket-content {
  max-height: 0;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.basket-content.visible {
  max-height: 400px;
  opacity: 1;
}

.basket-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.basket-summary {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.korting {
  color: #017f04;
}

/* basket section end */

/* card-section binnen bereken uw premie pagina */

.line {
  width: 945px;
  height: 1px;
  background: #c7c7c7;
  border: none;
  margin-bottom: 0.94rem;
  margin-top: 0.38rem;
}

.card-container {
  display: flex;
  column-gap: 5rem;
  margin-top: 40px;
  position: relative;
  flex-wrap: wrap;
}

.card-CTA {
  position: absolute;
  left: calc(50% + 11.7rem);
  border-radius: 0.25rem;
  background: #017f04;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px 10px;
  z-index: 1;
}

.card {
  display: flex;
  flex-direction: column;
  width: 26.875rem;
  height: 34rem;
  background-color: #fff;
  border-radius: 0.625rem;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  margin-top: 40px;
  text-align: center;
  border: 2px solid #9b9b9b;
}

.card:hover {
  cursor: pointer;
}

.card.selected {
  border: 3px solid #ef6619;
}

.card-policy-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-policy-name p {
  font-family: var(--Georgian);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 0.5rem;
}

.card-policy-name span {
  color: #000;
  text-align: center;
  font-family: var(--Georgian);
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.card-price {
  color: #000;
  text-align: center;
  font-family: var(--Georgian);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.card-price span {
  color: #7d7d7d;
  font-family: var(--Georgian);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.card-features {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
}

.card-features li {
  display: flex;
  align-items: center;
  padding: 10px;
}

.card-features p {
  font-size: 18px;
  width: 17rem;
}

.card-feature-icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'><circle cx='25' cy='25' r='25' fill='%23EFEDE8'/><path d='M13 31.0186C13 31.0186 18.0996 35.9891 19.1177 38.0194H23.5001C25.3372 33.1639 32.4731 21.575 38.5916 17.5127C39.8577 16.1024 36.6749 15.5199 34.1052 16.4542C30.2318 17.8607 22.9278 28.6103 21.5643 31.1948C19.6299 31.6356 17.5874 28.3704 17.5874 28.3704L13 31.0186Z' fill='%235C5A55'/></svg>")
    no-repeat center center;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
}

.card-bottom {
  margin-top: auto;
  text-align: center;
}

.link {
  color: red;
  font-size: 18px;
  text-decoration: none;
  display: inline-block;
  text-decoration: none;
}

.select-button {
  margin-top: 10px;
  background: linear-gradient(90deg, #ef6619 0%, #e8052d 100%);
  height: 3.75rem;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  color: white;
  border: none;
  width: 100%;
  font-style: normal;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
}

/* end of card  */

.zorgEngels {
  color: red;
  text-decoration: none;
  margin-top: 3.94rem;
}
.zorgEngels:hover {
  text-decoration: underline;
}

.overzicht {
  color: black;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  margin-top: 0.94rem;
}
.overzicht:hover {
  text-decoration: underline;
}
.overzicht::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url('data:image/svg+xml,%3Csvg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath d="M20 4L12 12M20 4V8.5M20 4H15.5M19 12.5V16.8C19 17.9201 19 18.4802 18.782 18.908C18.5903 19.2843 18.2843 19.5903 17.908 19.782C17.4802 20 16.9201 20 15.8 20H7.2C6.0799 20 5.51984 20 5.09202 19.782C4.71569 19.5903 4.40973 19.2843 4.21799 18.908C4 18.4802 4 17.9201 4 16.8V8.2C4 7.0799 4 6.51984 4.21799 6.09202C4.40973 5.71569 4.71569 5.40973 5.09202 5.21799C5.51984 5 6.07989 5 7.2 5H11.5" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
}

/* risico cards  */

.risico-italic {
  color: #8a8e92;
  font-family: var(--Georgian);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

.risico-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.risico-box {
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s;
}

.risico-box:hover {
  background-color: #f0f0f0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.risico-box.selected {
  border-color: #0071b2;
  background-color: #edf7fc;
  cursor: pointer;
}

.risico-discount-box {
  margin-top: 15px;
  padding: 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #999;
  text-align: center;
  border-radius: 5px;
}

.risico-info-link {
  color: red;
  text-decoration: none;
  font-size: 1.1rem;
  margin-top: 10px;
  display: block;
}

.risico-info-link:hover {
  text-decoration: underline;
}

.wrapper-button {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

.next-button {
  padding: 10px 20px;
  color: white;
  background: var(--primary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  text-align: center;
}

/* risico section end  */

/* body section end */