:root {
  --yellow: #F8D147FF;
  --orange: #ef9b4c;
  --violet: #514394;
  --red: #e44843;
  --blue: #034084;
  --black: #1e1e1c;
  --grey-light: rgba(20, 20, 20, 0.1);
}

.gradient-bg {
  background-size: 100% 100%;
  background-position: 0px 0px,0px 0px,0px 0px,0px 0px;
  background-image: radial-gradient(40% 40% at 15% 0%, #03408496 0%, #03408400 100%),
    radial-gradient(80% 120% at 100% 30%, var(--black) 10%, #1E1E1C00 80%),
    radial-gradient(80% 70% at 90% 100%, var(--blue) 0%, #03408400 100%),
    radial-gradient(150% 110% at 0% 100%, var(--yellow) 0%, var(--orange) 10%, var(--red) 30%, var(--violet) 80%, var(--black) 95%);
}

.main-menu-section {
  background-color: black;
  position: sticky;
  top: 0;
}

.page-content {
  --menu-height: min(8vw, 8vh);
  --_steps-height: min(6vh, 6vw);
  position: relative;
}

.modal-window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.show-modal {
  display: flex;
}

.stripe-error-wrapper,
.lock-expired-wrapper {
  background-color: white;
  border-radius: min(0.8vw, 0.8vh);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-inline: 5%;
}

.stripe-error-msg,
.lock-expired-msg {
  margin-top: max(2vw, 2vh);
  font-size: min(1.4rem, 2.8vw, 2.8vh);
}

.stripe-api-error-btn,
.stripe-card-error-btn,
.lock-expired-btn {
  margin-block: max(1.5vw, 1.5vh);
  margin-inline: auto;
  padding: 2% 4%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: min(0.8vw, 0.8vh);
  cursor: pointer;
  text-align: center;
  width: max-content;
}

.stripe-error-msg p {
  text-align: center;
}

.stripe-error-msg p:first-child {
  margin-bottom: 1rem;
}

.stripe-error-msg .error-msg {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--red);
}

.stripe-error-msg .contact-link {
  color: black;
}

.lock-expired-btn:hover {
  background-image: linear-gradient(0deg, #514394 0%, #5e50a4 75%, #514494 100%);
  color: white;
}

.steps-display {
  --_step-width: min(25vw, 25vh);
  --_steps-display-width: calc(var(--_step-width) * 2);
  position: sticky;
  top: var(--menu-height);
  width: 100vw;
  height: var(--_steps-height);
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-top: 1px solid rgba(239, 155, 76, 0.2); */
  border-bottom: 1px solid rgba(239, 155, 76, 0.2);
  background-color: white;
  z-index: 10;
}

.step-block {
  border-radius: min(3vw, 3vh);
  padding-block: 0.75%;
  font-size: 145%;
  width: var(--_step-width);
  text-align: center;
  text-decoration: none;
  /* background-position: 0px 0px,0px 0px,0px 0px,0px 0px;
  background-image: radial-gradient(40% 40% at 15% 0%, #03408496 0%, #03408400 100%),
    radial-gradient(80% 120% at 100% 30%, var(--black) 10%, #1E1E1C00 80%),
    radial-gradient(80% 70% at 90% 100%, var(--blue) 0%, #03408400 100%),
    radial-gradient(150% 110% at 0% 100%, var(--yellow) 0%, var(--orange) 10%, var(--red) 30%, var(--violet) 80%, var(--black) 95%); */
}

.step-block[data-status="done"],
.step-block[data-status="current"] {
  color: white;
}

.steps-progress {
  --_left-margin: calc(calc(100vw - var(--_steps-display-width)) / 2);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--_left-margin) + calc(var(--_step-width) * 3) );
  background-image: linear-gradient(0deg, #514394 0%, #5e50a4 75%, #514494 100%);
  border-top-right-radius: calc(var(--_steps-height) / 2);
  border-bottom-right-radius: calc(var(--_steps-height) / 2);
  z-index: -3;
}

/***************/
/* SELECTION SECTION */
/***************/

.selection-section {
  display: grid;
  grid-template-columns: 4fr 3fr;
  width: 80vw;
  margin-inline: 10vw;
}

.selection-extras {
  display: grid;
  grid-template-columns: 5fr 2fr;
  width: 80vw;
  margin-inline: 10vw;
}

.selection-current {
  margin-inline: min(4vw, 4vh);
}

.selection-current > p {
  font-size: 130%;
}

.selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: min(2vw, 2vh);
}

.selection-title {
  font-weight: bold;
  font-size: 210%;
}

.back-btn {
  font-size: 150%;
  padding: 0.5% 1%;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: min(1vw, 1vh);
  color: black;
  text-decoration: none;
}

/***************/
/* RECAP SECTION */
/***************/
.change-icon-path {
  fill:none;
  stroke:#000;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width: 0.5rem;
}

.recap-section {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: rgb(250, 250, 250);
  border-right: 1px solid rgb(235, 235, 235);
  padding-block: min(6vw, 6vh);
  padding-inline: min(4vw, 4vh);
}

.recap-title {
  font-weight: bold;
  font-size: 190%;
  align-self: flex-start;
  margin-bottom: min(3vw, 3vh);
}

.recap-formula {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 160%;
  padding-block: min(1vw, 1vh) min(1vw, 1vh);
}

.recap-slot-selected:hover,
.recap-formula-price:hover,
.recap-extra-wrapper:hover,
.recap-formula:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.4rem;
}

.change-element-icon {
  --_size: min(1.5vw, 1.5vh);
  width: var(--_size);
  height: var(--_size);
  margin-left: min(1.2vw, 1.2vh);
  margin-right: auto;
  display: none;
}

.recap-formula:hover .change-element-icon,
.recap-slot-selected:hover .change-element-icon,
.recap-slot-selected:hover .change-element-icon,
.recap-extra-wrapper:hover .change-element-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.recap-formula-title {
  font-weight: bold;
}

.recap-people {
  display: flex;
  align-items: center;
  height: 100%;
}

.recap-character-icon {
  --_size: min(2vw, 2vh);
  width: var(--_size);
  height: var(--_size);
  margin-inline: min(0.8vw, 0.8vh);
}

.character-icon-path {
  fill: none;
  stroke: #141414;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 3px;
}

.recap-slot-selected,
.recap-formula-price {
  font-size: 130%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-block: min(1vw, 1vh) min(1vw, 1vh);
}

.recap-slot-selected > p:first-child,
.recap-formula-price > p:first-child {
  font-weight: bold;
}

.recap-slot-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.recap-extras {
  width: 100%;
}

.recap-extras-title {
  font-weight: bold;
  font-size: 160%;
  margin-bottom: min(1vw, 1vh);
}

.recap-extra-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 130%;
  margin-bottom: min(0.5vw, 0.5vh);
}

.recap-total-wrapper {
  margin-top:min(3vw, 3vh);
  width: 100%;
  font-size: 150%;
  padding-top: min(1.5vw, 1.5vh);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: min(3.5vw, 3.5vh);
  margin-bottom: min(3.5vw, 3.5vh);
}

.recap-total-wrapper > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.discount-effect {
  font-style: italic;
  margin-top: min(1vw, 1vh);
}

.day-multiplicator {
  margin-left: 2%;
  font-size: 90%;
  color: rgb(255, 199, 108);
  font-style: italic;
}

.discount-effect,
.discount-excluding-taxes {
  font-size: 90%;
  margin-left: 2%;
  opacity: 0.5;
}

.vat,
.fees {
  margin-block: min(1vw, 1vh);
}

.fees {
  color: rgb(145, 145, 145);
  font-style: italic;
}

.total {
  font-weight: bold;
  margin-bottom: min(1.4vw, 1.4vh);
}

.add-promo-code-btn,
.checkout-btn {
  text-align: center;
  justify-content: center;
  padding-block: 1.5%;
  border-radius: min(0.8vw, 0.8vh);
}

.add-promo-code-btn {
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.add-promo-code-btn:hover {
  background-image: linear-gradient(0deg, #514394 0%, #5e50a4 75%, #514494 100%);
  color: white;
}

.promo-code-input-wrapper {
  display: flex;
  align-items: center;
}

.promo-code-input {
  padding-block: 2%;
  padding-left: 3%;
  border-radius: min(0.8vw, 0.8vh);
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 100%;
  flex: 1 1 0;
  text-transform: uppercase;
}

.promo-code-delete-btn,
.submit-promo-code-btn {
  --_size: min(3.5vw, 3.5vh);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: min(0.8vw, 0.8vh);
  background-color: white;
  width: var(--_size);
  height: var(--_size);
  cursor: pointer;
}

.promo-code-delete-btn:hover {
  background-image: linear-gradient(0deg, #e44843 0%, #e25f5a 75%, #e0514d 100%);
  color: white;
}

.submit-promo-code-btn {
  margin-inline: min(1.2vw, 1.2vh);
}

.coupon-icon {
  width: 80%;
}

.coupon-dotted-path,
.coupon-icon-percent,
.coupon-back,
.coupon-front {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coupon-dotted-path {
  stroke-width: 8px;
  stroke-dasharray: 6 20;
}

.coupon-icon-percent {
  stroke-width: 10px;
}

.coupon-front {
  stroke-width: 8px;
  fill: white;
}

.coupon-back {
  stroke-width: 6px;
}

.submit-promo-code-btn:hover {
  background-image: linear-gradient(0deg, #514394 0%, #5e50a4 75%, #514494 100%);
}

.trash-icon {
  width: 60%;
}

.trash-path {
  fill:none;
  stroke:#000;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2px
}

.promo-code-delete-btn:hover .trash-path {
  stroke: white;
}

.checkout-btn {
  margin-top: min(1.4vw, 1.4vh);
  color: white;
  background-image: linear-gradient(0deg, #514394 0%, #5e50a4 75%, #514494 100%);
  cursor: pointer;
}

.checkout-btn:hover {
  box-shadow: 0px 0px 8px #00000045;
}

.recap-help {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.help-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: min(1.2vw, 1.2vh);
}

.help-email {
  color: black;
}

.hide-element {
  display: none;
}

/***************/
/* FORM SECTION */
/***************/
.payment-loading-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: repeating-linear-gradient( 315deg, #14141433 0px, #14141433 0.2rem, #FFF0  0.2rem, #FFF0  1rem);
  z-index: 5;
}

.loading-dots {
  --_size: max(2vw, 2vh);
  width: var(--_size);
  height: var(--_size);
  animation: loadingDotsAnim 2s forwards infinite linear;
}

@keyframes loadingDotsAnim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.payment-form {
  position: relative;
  padding-top: min(2.5vw, 2.5vh);
  padding-inline: 15%;
  /* border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: max(0.4vw, 0.4vh); */
  /* border-right: 1px solid rgba(0, 0, 0, 0.2); */
}

.payment-form h1 {
  font-size: 210%;
  text-align: center;
  margin-bottom: max(2.5vw, 2.5vh);
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 150%;
  margin-bottom: max(1vw, 1vh);
}

.double-input-wrapper {
  display: flex;
  justify-content: space-between;
}

.payment-form label {
  font-weight: bold;
  margin-bottom: max(0.4vw, 0.4vh);
}

.payment-form input {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: max(0.2vw, 0.2vh);
  height: max(1.8vw, 1.8vh);
  padding-inline: min(1vw, 1vh);
}

.payment-form input::placeholder {
  color: rgba(0, 0, 0, 0.2);
}

.half-input {
  flex: 0 0 48%;
}

.payment-form .checkout-btn {
  margin-top: max(2vw, 2vh);
  font-size: 150%;
}

.card-input-element {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: max(0.2vw, 0.2vh);
  height: max(1.8vw, 1.8vh);
  padding-inline: min(1vw, 1vh);
}

.first-name-errors,
.last-name-errors,
.email-errors,
.email-confirmation-errors,
#card-errors {
  color: rgb(249, 136, 113);
  font-size: 70%;
  margin-top: max(0.4vw, 0.4vh);
}

.hide-element {
  display: none;
}

@media (pointer: coarse) {
  .page-content {
    --_steps-height: min(6vh, 6rem);
  }
  
  .steps-display {
    --_step-width: min(11rem, 11vh);
  }

  .step-block {
    font-size: 120%;
  }
  
  @media (orientation: portrait) {
    .selection-section {
      width: 100%;
      padding-inline: 5%;
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    
    .selection-header {
      margin-block: min(2.5rem, 2.5vh);
    }
    
    .selection-current {
      margin: 0;
      width: 100%;
    }
    
    .selection-title {
      font-size: 160%;
    }
    
    .back-btn {
      flex: 0 0 20%;
      text-align: center;
    }
    
    .recap-section {
      position: relative;
      margin-top: 3rem;
    }
    
    .recap-character-icon {
      --_size: min(1.5rem, 1.5vh);
    }
    
    .payment-form {
      width: 100%;
      padding-inline: 5%;
      margin-bottom: 15vh;
    }
    
    .payment-form input {
      height: min(4.4rem, 4.4vh);
      padding-inline: min(1.5rem, 1.5vh);
    }
  }
  
  @media (orientation: landscape) {
    .page-content {
      --_steps-height: min(4vw, 4rem);
    }
    
    .steps-display {
      --_step-width: min(16vw, 16rem);
    }
  }
}

.fee-disclaimer {
  text-align: center;
  width: 100vw;
  margin-block: 10rem;
}

.stripe-link {
  color: #141414;
}

.cancel-disclaimer {
  margin-top: 1em;
}