.bondora-calculator {
  color: #101828;
  container-type: inline-size;
  font-weight: 500;
}

.bondora-calculator__vertical-wrapper {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 0 8px 16px 1px rgb(13 27 38 / 16%);
  display: flex;
  flex-direction: column;
  padding: 32px;
}

.bondora-calculator__horizontal-wrapper {
  display: inline;
}

.bondora-calculator__sliders {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  width: 100%;
}

.bondora-calculator__slider {
  display: flex;
  flex-direction: column;
  padding-bottom: 22px;
  width: 100%;
}

.bondora-calculator__slider-top {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 22px;
  width: 100%;
}

.bondora-calculator__slider-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}

.bondora-calculator__amount-value {
  font-size: 25px;
  font-weight: 900;
  margin: 0;
}

.bondora-calculator__range-slider {
  background: #2d94e6;
  border-radius: 45px;
  height: 4px;
  position: relative;
  width: 100%;
}

.bondora-calculator__range-slider:has(input:focus-visible) {
  border-radius: 5px;
  outline: 2px solid #3b82f6;
  outline-offset: 5px;
}

.bondora-calculator__progress {
  background: #101828;
  border-radius: 45px;
  height: 4px;
  position: absolute;
  right: 0;
}

.bondora-calculator__range-wrapper {
  display: flex;
  flex-direction: row;
  height: 20px;
  justify-content: space-between;
  width: 100%;
}

.bondora-calculator__range {
  appearance: none;
  background: transparent;
  height: 2px;
  outline: none;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.bondora-calculator__range::-webkit-slider-thumb {
  appearance: none;
  background-color: #2d94e6;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='40' height='24' viewBox='16 16 40 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.5689 27L28.6924 30.186C29.3232 30.8296 29.3232 31.8737 28.6922 32.5175C28.061 33.1609 27.0388 33.1609 26.4073 32.5173L21.0001 27L26.4073 21.4827C26.7141 21.1697 27.1244 21 27.5497 21C27.9751 21 28.3848 21.1695 28.6924 21.4827C29.3232 22.1264 29.3232 23.1704 28.6924 23.8141L25.5689 27Z' fill='white'/%3E%3Cpath d='M44.5966 27L41.4731 23.814C40.8423 23.1704 40.8423 22.1263 41.4733 21.4825C42.1046 20.8391 43.1267 20.8391 43.7582 21.4827L49.1654 27L43.7582 32.5173C43.4514 32.8303 43.0411 33 42.6159 33C42.1905 33 41.7807 32.8305 41.4731 32.5173C40.8423 31.8736 40.8423 30.8296 41.4732 30.1859L44.5966 27Z' fill='white'/%3E%3C/svg%3E");
  border: 1px solid #2d94e6;
  border-radius: 30px;
  cursor: w-resize;
  height: 24px;
  pointer-events: auto;
  width: 40px;
}

.bondora-calculator__range::-moz-range-thumb {
  background-color: #2d94e6;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='40' height='24' viewBox='16 16 40 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.5689 27L28.6924 30.186C29.3232 30.8296 29.3232 31.8737 28.6922 32.5175C28.061 33.1609 27.0388 33.1609 26.4073 32.5173L21.0001 27L26.4073 21.4827C26.7141 21.1697 27.1244 21 27.5497 21C27.9751 21 28.3848 21.1695 28.6924 21.4827C29.3232 22.1264 29.3232 23.1704 28.6924 23.8141L25.5689 27Z' fill='white'/%3E%3Cpath d='M44.5966 27L41.4731 23.814C40.8423 23.1704 40.8423 22.1263 41.4733 21.4825C42.1046 20.8391 43.1267 20.8391 43.7582 21.4827L49.1654 27L43.7582 32.5173C43.4514 32.8303 43.0411 33 42.6159 33C42.1905 33 41.7807 32.8305 41.4731 32.5173C40.8423 31.8736 40.8423 30.8296 41.4732 30.1859L44.5966 27Z' fill='white'/%3E%3C/svg%3E");
  border: 1px solid #2d94e6;
  border-radius: 30px;
  cursor: w-resize;
  height: 24px;
  pointer-events: auto;
  width: 40px;
}

.bondora-calculator__range-labels {
  display: flex;
  font-size: 16px;
  font-weight: 400;
  justify-content: space-between;
  padding-top: 18px;
  width: 100%;
}

.bondora-calculator__action-block {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-self: center;
  width: 100%;
}

.bondora-calculator__offer-block {
  align-items: center;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
}

.bondora-calculator__payment-label {
  font-size: 20px;
  line-height: 32px;
  margin: 0;
  text-align: center;
}

.bondora-calculator__monthly-payment {
  font-size: 48px;
  font-weight: 900;
  line-height: 60px;
  margin: 0;
}

.bondora-calculator .submit-button {
  background: #b5fe4d;
  border: 0;
  border-radius: 8px;
  color: #101828;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  margin: 24px 0;
  padding: 20px 24px;
  text-align: center;
  transition: 0.4s cubic-bezier(0.3, 1, 0.3, 1);
  width: 100%;
}

.bondora-calculator__button-content {
  align-items: center;
  column-gap: 10px;
  display: flex;
  justify-content: center;
}

.bondora-calculator__details {
  display: none;
}

.bondora-calculator[data-show-details="true"] .bondora-calculator__details {
  display: flex;
}

.bondora-calculator__details-block {
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 600;
  row-gap: 8px;
}

.bondora-calculator__detail {
  display: flex;
  flex-basis: 50%;
  flex-direction: column;
  margin-bottom: 1rem;
}

.bondora-calculator__detail-label {
  color: #101828;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 0 5px;
}

.bondora-calculator__detail-value {
  display: flex;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

@container (min-width: 700px) {
  .bondora-calculator__vertical-wrapper {
    border: 0;
    box-shadow: none;
    padding: 0;
    row-gap: 16px;
  }

  .bondora-calculator__horizontal-wrapper {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    box-shadow: 0 8px 16px 1px rgb(13 27 38 / 16%);
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    padding: 38px;
  }

  .bondora-calculator__sliders {
    column-gap: 40px;
    flex-basis: 50%;
    flex-direction: row;
  }

  .bondora-calculator__action-block {
    column-gap: 24px;
    flex-direction: row;
  }

  .bondora-calculator__offer-block,
  .bondora-calculator .submit-button {
    flex-basis: 50%;
  }

  .bondora-calculator__amount-value {
    font-size: 32px;
  }

  .bondora-calculator__slider-label {
    font-size: 24px;
  }

  .bondora-calculator[data-show-details="true"] .bondora-calculator__details {
    width: 100%;
  }

  .bondora-calculator__details-block {
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
  }

  .bondora-calculator__detail {
    align-items: center;
    flex-basis: auto;
  }

  .bondora-calculator__detail-label {
    margin-bottom: 8px;
    text-wrap: nowrap;
  }

  .bondora-calculator__detail-value {
    font-size: 24px;
    font-weight: 900;
    text-wrap: nowrap;
  }
}