@keyframes overlay-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-anim {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.guarantee {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x1);
}

.checkboxContainer {
  align-items: center;
  display: flex;
  flex: 1;
  gap: var(--Space-x1);
  justify-content: space-between;
}

.infoButton {
  display: flex;
  gap: var(--Space-x05);
  justify-self: flex-end;
  outline: none;
}
.infoButton:focus-visible {
  outline: 2px auto -webkit-focus-ring-color;
  outline-offset: 1px;
}

.overlay {
  align-items: center;
  background-color: var(--Overlay-40);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: var(--default-modal-overlay-z-index);

  &[data-entering] {
    animation: overlay-fade 200ms;
  }

  &[data-exiting] {
    animation: overlay-fade 150ms reverse ease-in;
  }
}

.modal {
  background-color: var(--Base-Surface-Primary-light-Normal);
  border-radius: var(--Corner-radius-lg);
  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
  overflow: hidden;
  padding: var(--Spacing-x5) var(--Spacing-x3);
  width: min(90dvw, 560px);

  &[data-entering] {
    animation: modal-anim 200ms;
  }

  &[data-exiting] {
    animation: modal-anim 150ms reverse ease-in;
  }
}

.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x2);
}

.text {
  text-align: center;
}

.closeButton {
  margin-top: var(--Space-x15);
  outline: none;
  width: min(164px, 100%);
}

@media screen and (max-width: 767px) {
  .btnText {
    display: none;
  }
}