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

.user-recap-wrapper {
  display: flex;
  flex-direction: column;
  width: 100vw;
  padding-inline: 7.5%;
}

.cancel-section {
  padding-bottom: max(1vw, 1vh);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: max(2vw, 2vh);
}

.user-name {
  font-size: max(1.2vw, 1.2vh);
  margin-block: max(1.6vw, 1.6vh) max(0.8vw, 0.8vh);
}

.confirm-section,
.main-infos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(0.8vw, 0.8vh);
}

.warning-confirm-btn,
.warning-cancel-btn,
.confirm-btn,
.abort-btn,
.reservation-slot,
.cancel-reservation-btn {
  padding: 0.5% 2%;
  border-radius: min(0.4vw, 0.4vh);
  text-align: center;
  font-size: max(0.8vw, 0.8vh);
  font-family: 'Helvetica Now Display';
}

.reservation-slot {
  margin-inline: auto;
  background-image: linear-gradient(0deg, rgb(143, 218, 127) 0%, rgb(173, 226, 161) 75%, rgb(162, 222, 148) 100%);
}

.warning-confirm-btn,
.warning-cancel-btn,
.confirm-btn,
.abort-btn,
.cancel-reservation-btn {
  cursor: pointer;
  border: 1px solid rgb(230, 230, 230);
  background-image: linear-gradient(0deg, rgb(230, 230, 230) 0%, rgb(240, 240, 240) 75%, rgb(237, 237, 237) 100%);
}

.cancelled-slot,
.confirm-btn:hover,
.cancel-reservation-btn:hover {
  background-image: linear-gradient(0deg, #fc736e 0%, #f98884 75%, #fc736e 100%);
  border-color: #fc736e;
  color: white;
}

.cancelled-slot {
  margin-right: 0;
}

.abort-btn {
  margin-left: auto;
  margin-right: min(0.5vw, 0.5vh);
}

.abort-btn:hover {
  background-image: linear-gradient(0deg, #5d5d5d 0%, #6d6d6d 75%, #6d6d6d 100%);
  border-color: #5d5d5d;
  color: white;
}

.warning {
  font-size: 80%;
  font-style: italic;
  color: #f98884;
}

.recap-infos {
  display: flex;
  justify-content: space-between;
  margin-bottom: max(3vw, 3vh);
}

.formula-section {
  flex: 0 0 42%;
}

.extras-section {
  flex: 0 0 54%;
}

.formula-section p:first-child {
  font-size: max(0.8vw, 0.8vh);
  margin-bottom: max(1vw, 1vh);
}

.formula-card {
  position: relative;
  padding: 4% 8%;
  border: 1px solid rgb(230, 230, 230);
  border-radius: min(0.8vw, 0.8vh);
  display: flex;
  flex-direction: column;
}

.formula-card:hover {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}

.formula-title {
  font-size: 175%;
}

.formula-subtitle {
  font-size: 1.2em;
  margin-bottom: 1.5em;
}

.formula-price {
  font-size: 135%;
  margin-bottom: min(2.5vw, 2.5vh);
}

.formula-list-title {
  font-size: 145%;
  font-weight: bold;
}

.formula-description {
  font-size: 135%;
  line-height: 220%;
  padding-left: min(1.4vw, 1.4vh);
  margin-top: min(0.75vw, 0.75vh);
}

.extras-section p:first-child {
  font-size: max(0.8vw, 0.8vh);
  margin-bottom: max(1vw, 1vh);
}

.extras-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.extra-card {
  width: max(20vw, 20vh);
  height: max(22vw, 22vh);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: min(0.8vw, 0.8vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: min(2vw, 2vh);
  margin-bottom: min(2vw, 2vh);
  padding-block: 1em;
}

.extra-card:hover {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}

.extra-title-wrapper {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 140%;
  padding-inline: min(2vw, 2vh);
  flex: 0 0 8%;
}

.extra-card-desc {
  font-size: 130%;
  padding-inline: min(2vw, 2vh);
  padding-top: 2%;
  flex: 0 0 15%;
}

.extra-card-medias-wrapper {
  flex: 1 1 65%;
  width: 100%;
  overflow: hidden;
  display: grid;
  gap: 0.5rem;
  padding-inline: min(2vw, 2vh);
}

.colorama-card,
.short-card {
  grid-template-columns: 1fr;
  align-items: center;
}

.photos-card,
.short-card,
.thumbnail-card {
  grid-template-columns: 1fr 1fr;
}

.live-card,
.coach-card,
.staff-card,
.prompter-card {
  grid-template-columns: 1fr;
}

.extra-img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  border-radius: 4px;
}

.live-card-img,
.coach-card-img,
.staff-card-img {
  max-height: 100%;
}

.photos-card-img {
  --_size: min(13rem,14vh);
  width: 100%;
  height: var(--_size);
  min-height: var(--_size);
}

.thumbnail-card-img {
  --_size: min(10rem,20vw,20vh);
  width: 100%;
  height: var(--_size);
  min-height: var(--_size);
}

.extra-video-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.extra-video {
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.supp-infos {
  margin-bottom: max(3vw, 3vh);
  font-size: 120%;
}

.error-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc( 90vh - var(--menu-height));
  min-height: calc( 90dvh - var(--menu-height));
}

.error-img {
  width: max(18vw, 18vh);
  z-index: -10;
}

.error-msg {
  font-size: 200%;
  margin-top: 2rem;
}

.refund-warning-modal {
  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;
}

.refund-warning-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 4px;
  padding: 2%;
}

.refund-warning-msg {
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

.red-warning-msg {
  color: rgb(255, 100, 92);
}

.refund-warning-btns-wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  margin-top: 1.5em;
}

.warning-cancel-btn,
.warning-confirm-btn {
  margin-inline: 0.4em;
  width: 50%;
}

.refund-loading-wrapper {
  position: fixed;
  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); }
}

.hide-element {
  display: none;
}

@media (pointer: coarse) {
  @media (orientation: portrait) {
    .user-recap-wrapper {
      width: 85vw;
      margin-inline: 7.5vw;
    }
    
    .main-infos,
    .confirm-section {
      flex-direction: column;
      font-size: 1.4em;
    }
    
    .abort-btn,
    .confirm-btn {
      margin-block: 0.3em;
    }
    
    .abort-btn,
    .confirm-btn,
    .reservation-slot {
      margin-inline: 0;
      font-size: 1.4em;
    }
    
    .reservation-slot {
      margin-block: 0.8em;
    }
  
    .user-name {
      margin-bottom: 2em;
    }
    
    .user-name,
    .reservation-slot,
    .cancel-reservation-btn,
    .formula-section p:first-child,
    .extras-section p:first-child {
      font-size: 1.4em;
    }
  
    .cancel-section {
      padding-bottom: 4em;
    }
    
    .recap-infos {
      flex-direction: column;
    }
    
    .formula-section {
      flex: 1 1 auto;
    }
    
    .formula-section p:first-child {
      margin-block: 2em;
    }

    .extras-wrapper {
      flex-direction: column;
    }
    
    .extra-card {
      width: 100%;
      height: 35vh;
    }

    .extra-card-title {
      margin: 0;
    }
  }

  @media (orientation: landscape) {
    .main-infos,
    .user-name,
    .reservation-slot,
    .confirm-section,
    .abort-btn,
    .confirm-btn,
    .reservation-slot,
    .cancel-reservation-btn,
    .formula-section p:first-child,
    .extras-section p:first-child {
      font-size: 1.1em;
    }
  }
}