* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow-x: hidden;
}

nav {
  position: fixed;
  bottom: 0px;
  width: 100vw;
  height: 60px;
  display: flex;
  justify-content: space-around;
  background-color: var(--background-color-two);
  align-items: center;

  > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--secondary-text-color);
    fill: var(--secondary-text-color);
    -webkit-tap-highlight-color: transparent; /* mobile (Chrome/Safari) */
    -webkit-focus-ring-color: transparent; /* Safari */
    outline: none;

    > span {
      order: 2;
    }
  }

  > a:active {
    color: var(--tertiary-color-one);
    fill: var(--tertiary-color-one);
    -webkit-tap-highlight-color: transparent; /* mobile (Chrome/Safari) */
    -webkit-focus-ring-color: transparent; /* Safari */
    outline: none;
  }

  > a:hover {
    color: var(--text-color);
    fill: var(--text-color);
  }
}

#home-container {
  background-color: var(--background-color-one);
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 126px;

  > img {
    width: 100%;
    height: 45vh;
    object-fit: cover; /* l’image couvre tout le conteneur */
    object-position: center;
  }

  > h1 {
    margin: var(--margin-two);
    display: flex;
  }

  > p {
    margin: var(--margin-two);
  }

  > a {
    width: 100vw;
    position: fixed;
    bottom: 60px;
    border: none;
    text-decoration: none;
    display: flex;
    flex: auto;

    > button {
      border: none;
      width: 100%;
      height: 50px;
      margin: var(--margin);
      border-radius: var(--border-radius-one);
      background-color: var(--tertiary-color-one);
      color: var(--primary-color);
      font-size: 110%;
    }
  }
}

#profile-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 126px;

  > #profile-header {
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--margin);
    margin: var(--margin);
    flex: auto;
  }

  > #logout-btn {
    width: 100vw;
    position: fixed;
    bottom: 60px;
    border: none;
    text-decoration: none;
    display: flex;
    flex: auto;

    > button {
      border: none;
      width: 100%;
      height: 50px;
      margin: var(--margin);
      border-radius: var(--border-radius-one);
      background-color: var(--tertiary-color-one);
      color: var(--primary-color);
      font-size: 110%;
    }
  }
}

.nav-slider {
  position: relative;
  display: flex;
  background-color: var(--background-color-one);
  height: 50px;
  overflow: hidden;
}

.nav-item {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  background-color: var(--background-color-one);
  height: 95%;
}

.nav-indicator {
  position: absolute;
  bottom: 0px;
  height: 3px;
  background: var(--tertiary-color-one);
  transition: left 0.3s ease, width 0.3s ease;
}

.content {
  position: relative;
  overflow: hidden;
  width: 200%; /* deux contenus visibles côte à côte */
  display: flex;
  transition: transform 0.3s ease;
}

.pane {
  width: 50%;
  padding: 20px;
}

#log-header {
  display: flex;
  position: relative;
  flex: auto;
  height: auto;
  justify-content: center;
  color: var(--text-color);
  margin: var(--margin);
  box-sizing: border-box;

  > a {
    -webkit-tap-highlight-color: transparent; /* mobile (Chrome/Safari) */
    -webkit-focus-ring-color: transparent; /* Safari */
    outline: none;

    > svg {
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
      fill: var(--secondary-text-color);
    }

    > svg:hover {
      fill: var(--text-color);
    }
  }
}

.content__form {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
  margin: var(--margin-two);
  margin-top: 5vh;

  > .content__inputs {
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    > label {
      border: 1px solid rgb(219, 219, 219);
      display: flex;
      align-items: center;
      position: relative;
      min-width: 268px;
      height: 38px;
      background-color: var(--background-color-two);
      border-radius: var(--border-radius-one);
      color: var(--secondary-text-color);

      > span {
        position: absolute;
        text-overflow: ellipsis;
        transform-origin: left;
        font-size: 12px;
        left: 8px;
        pointer-events: none;
        transition: transform ease-out 0.1s;
        background-color: var(--background-color-two);
      }

      > input {
        width: 100%;
        background: inherit;
        background-color: var(--background-color-two);
        border: 0;
        outline: none;
        padding: 9px 8px 7px 8px;
        text-overflow: ellipsis;
        font-size: 16px;
        vertical-align: middle;
      }

      > input:not(:placeholder-shown) + span,
      > input:-webkit-autofill + span {
        transform: scale(calc(10 / 12)) translateY(-10px);
      }

      > input:not(:placeholder-shown),
      > input:-webkit-autofill {
        padding: 14px 0 2px 8px;
        font-size: 12px;
        -webkit-box-shadow: 0 0 0px 1000px var(--background-color-two) inset !important; /* remet ton bg */
        box-shadow: 0 0 0px 1000px var(--background-color-two) inset !important;
        -webkit-text-fill-color: var(
          --text-color
        ) !important; /* remet ta couleur de texte */
        transition: background-color 5000s ease-in-out 0s; /* hack pour empêcher le flash */
      }
    }
  }

  > button {
    border: none;
    width: 100%;
    height: 40px;
    border-radius: var(--border-radius-one);
    background-color: var(--tertiary-color-one);
    color: var(--primary-color);
  }
}

.log-change {
  display: flex;
  justify-content: center;
  width: 80vw;
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translate(-50%);
  color: var(--secondary-text-color);

  > a {
    color: #797979;
    font-weight: 200;
  }
}

.form-card {
  width: 280px;
  height: fit-content;
  border-radius: var(--border-radius-two);
  background-color: var(--background-color-two);
  padding: 1.3rem;
  color: #212121;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  margin-top: 10vh;

  > .form-card-title {
    margin-bottom: 0.6rem;
    margin-top: 0.2rem;
  }

  > .form-card-prompt {
    margin-bottom: 2rem;
    font-size: 14px;
  }

  > .form-card-input-wrapper {
    position: relative;
    width: 100%;
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1rem;

    > .form-card-input {
      all: unset;
    }

    > .form-card-input {
      font-size: 2rem;
      font-weight: bold;
      letter-spacing: 2rem;
      text-align: start;
      -webkit-transform: translateX(36px);
      -ms-transform: translateX(36px);
      transform: translateX(36px);
      position: absolute;
      top: 10px;
      z-index: 3;
      background-color: transparent;
    }

    > .form-card-input-bg {
      content: "";
      width: 100%;
      height: 60px;
      margin: auto;
      inset: 0;
      bottom: 10px;
      position: absolute;
      z-index: 1;
      border-radius: 12px;
      background-color: var(--background-color-one);
    }
  }

  > button {
    border: none;
    width: 100%;
    height: 50px;
    border-radius: var(--border-radius-one);
    background-color: var(--tertiary-color-one);
    color: var(--primary-color);
    font-size: 110%;
  }
}

.passed{
  opacity: 0.5;
}

.booking {
  height: 80px;
  display: flex;
  background-color: var(--background-color-two);
  border-radius: var(--border-radius-two);
  align-items: center;
  flex: auto;
  position: relative;
  text-decoration: none;
  color: var(--text-color);
  -webkit-tap-highlight-color: transparent; /* mobile (Chrome/Safari) */
  -webkit-focus-ring-color: transparent; /* Safari */
  outline: none;
  margin-bottom: var(--margin);

  > img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: center;
    margin: 10px;
    border-radius: var(--border-radius-one);
  }

  > .booking-content {
    width: 75%;
    display: flex;
    flex-direction: column;

    > .booking-description {
      color: var(--secondary-text-color);
      width: 90%;
      height: 20px;
      overflow: hidden;
    }

    > .nb-booked{
      font-weight: bold;
    }

    > .red{
      color: var(--tertiary-color-one);
    }

    > .green{
      color: rgb(15, 169, 15);
    }

    /* > .booking-date {

    } */
  }

  > svg {
    position: absolute;
    right: 10px;
    fill: var(--secondary-text-color);
  }

  > svg:hover {
    fill: var(--text-color);
  }
}

#booking-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 126px;

  > h2 {
    margin: var(--margin);
    display: flex;
    align-self: center;
  }

  > #bookings-container {
    margin: var(--margin);
    display: flex;
    flex-direction: column;
  }
}

#booking-detail-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  padding: var(--margin);
  margin-bottom: 126px;
  flex: 1;
  gap: var(--margin-two);

  > #booking-detail-header {
    display: flex;
    position: relative;
    flex: auto;
    height: auto;
    width: 100%;
    justify-content: center;
    color: var(--text-color);
    box-sizing: border-box;

    > a {
      -webkit-tap-highlight-color: transparent; /* mobile (Chrome/Safari) */
      -webkit-focus-ring-color: transparent; /* Safari */
      outline: none;

      > svg {
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        fill: var(--secondary-text-color);
      }

      > svg:hover {
        fill: var(--text-color);
      }
    }
  }

  > #booking-detail-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--margin);

    > #booking-detail-title{
      display: flex;
      gap: var(--margin);


      > #modalUpdateButton{
        background-color: var(--tertiary-color-one);
        border-radius: var(--border-radius-one);
        color: var(--primary-color);
        padding: 6px 12px 6px 12px;
        border: none;
      }
    }

    > img {
      height: 25vh;
      width: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: var(--border-radius-two);
      margin-bottom: var(--margin);
    }

    > #action-indicator-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      > #svg-container {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
      }

      > h3 {
        font-size: larger;
      }

      > div {
        width: 70%;
        text-align: center;
        font-size: 14px;
        color: var(--secondary-text-color);
      }
    }

    > #booking-detail {
      background-color: var(--background-color-two);
      border-radius: var(--border-radius-two);
      width: 100%;
      height: fit-content;
      display: flex;
      flex-direction: column;

      > .booking-detail-row {
        margin: var(--margin) var(--margin-two) 0px var(--margin-two);
        min-height: 40px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--disabled-text-color);
        padding-bottom: var(--margin);

        > :first-child {
          color: var(--secondary-text-color);
        }

        > :last-child {
          max-width: 50%;
          text-align: justify;
          display: flex;
          gap: 6px;

          > #level-info{
            display: flex;
            align-items: center;
            text-align: left;
            background-color: #ed6163;
            border: 1px solid var(--tertiary-color-one);
            color: var(--primary-color);
            font-size: 80%;
            padding: 2px 4px 2px 4px;
            border-radius: var(--border-radius-one);
          }
        }

      }

      :last-child {
        border: none;
      }
    }
  }

  > .booking-btn-container {
    width: 100%;
    position: fixed;
    bottom: 60px;
    border: none;
    text-decoration: none;
    display: flex;
    flex: auto;
    justify-content: center;
    padding: var(--margin);

    > .booking-btn {
      border: none;
      height: 50px;
      flex: 1;
      border-radius: var(--border-radius-one);
      background-color: var(--tertiary-color-one);
      color: var(--primary-color);
      font-size: 110%;
      align-self: center;
      /* flex: 1; */
    }

    > .booking-btn-disabled {
      background-color: var(--tertiary-color-two);
    }
  }

  > #user-info-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-two);
    padding: var(--margin);

    > .user-info {
      display: flex;
      justify-content: space-between;
      width: 100%;

      > :last-child{
        color: var(--secondary-text-color);
      }
    }

  }

  > #admin-booking-actions {
    position: fixed;
    bottom: 60px;
    flex: 1;
    width: 100%;
    padding: var(--margin);
    display: flex;
    /* flex-direction: column; */
    gap: var(--margin);

    > form{
      flex: 1;
      > button{
        border: none;
        height: 50px;
        width: 100%;
        border-radius: var(--border-radius-one);
        background-color: var(--tertiary-color-one);
        color: var(--primary-color);
        font-size: 110%;
        align-self: center;
      }
    }
  }

}

#payment-container {
  display: flex;
  flex-direction: column;
  width: 100%;

  > #payment-header {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: var(--margin);
    margin-bottom: var(--margin-two);

    > a {
      position: absolute;
      left: 0px;
      color: var(--secondary-text-color);
    }
  }

  > h2{
    margin: var(--margin);
  }

  > #price-container {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 13vw;
  }

  
  > #checkout-button-container{
    width: 100%;
    position: absolute;
    bottom: 60px;
    padding: var(--margin);
    display: flex;
    flex-direction: column;
    gap: var(--margin);
    
    > #payment-warning{
      background-color: #e58183;
      border: 1px solid var(--tertiary-color-one);
      border-radius: var(--border-radius-one);
      width: fit-content;
      padding: 6px;
      color: var(--primary-color);
      font-size: 110%;
    }

    > #checkout-button {
      width: 100%;
      border: none;
      height: 50px;
      border-radius: var(--border-radius-one);
      background-color: var(--tertiary-color-one);
      color: var(--primary-color);
      font-size: 110%;
      align-self: center;
    }
  }

}

#dashboard-container{
  width: 100%;
  padding: var(--margin);
  display: flex;
  flex-direction: column;
  gap: var(--margin);
  margin-bottom: 60px;
  
  > #dashboard-header{
    display: flex;
    justify-content: center;
    margin-bottom: var(--margin-one);
  }

  > #period-select{
    width: 100%;
    display: flex;
    justify-content: space-between;
    
    > select{
      width: 75%;
      height: 30px;
      font-size: 100%;
    }

    > input{
      border: none;
      width: 20%;
      height: 30px;
      border-radius: var(--border-radius-one);
      background-color: var(--tertiary-color-one);
      color: var(--primary-color);
      font-size: 90%;
      align-self: center;
    }


  }
  
  > #dashboard-overview{
    display: flex;
    gap: var(--margin);
    width: 100%;

    > .overview-container{
      flex: 1;
      background-color: var(--secondary-color);
      border-radius: var(--border-radius-one);
      border: 1px solid var(--disabled-text-color);
      height: 110px;
      padding: var(--margin);
      
      > div{
        display: flex;
        align-items: center;
        gap: 5px;
        
        
        > #chair{
          fill: #3b86d6;
          height: 30px;
          width: 30px;
        }
        
        > #dollar{
          fill: rgb(15, 169, 15);
          height: 30px;
          width: 30px;
        }
      }
      
      > .amount{
        font-size: xx-large;
      }
    }
  }
}

#modalButton {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--tertiary-color-one);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px var(--tertiary-color-two);
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: fixed;
  right: var(--margin);
  bottom: 76px;
}

.svgIcon {
  width: 24px;
  transition-duration: 0.3s;
  fill: var(--primary-color);
}

.svgIcon path {
  fill: var(--primary-color);
}

#modalButton:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: 0.3s;
  background-color: var(--tertiary-color-one);
  align-items: center;
}

#modalButton:hover .svgIcon {
  /* width: 20px; */
  transition-duration: 0.3s;
  transform: translateY(-200%);
}

#modalButton::before {
  position: absolute;
  bottom: -20px;
  content: "Nouveau";
  color: white;
  /* transition-duration: .3s; */
  font-size: 0px;
}

#modalButton:hover::before {
  font-size: 13px;
  opacity: 1;
  bottom: unset;
  /* transform: translateY(-30px); */
  transition-duration: 0.3s;
}

.exitBtn {
  position: absolute;
  top: 5px;
  right: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.171);
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  border: none;
  color: black;
  font-size: 1.1em;
  cursor: pointer;
}

.resendNote {
  font-size: 0.7em;
  color: black;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.resendBtn {
  background-color: transparent;
  border: none;
  color: rgb(127, 129, 255);
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 700;
}

/* Overlay (fond assombri + flou) */
#overlay {
  display: none; /* caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* Contenu de la modal */
#modalDiv {
  background: white;
  padding: 20px;
  border-radius: 12px;
  min-width: 300px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Bouton close */
#closeBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #333;
}

#closeBtn:hover {
  color: red;
}


:root {
  /* Couleurs principales */
  --primary-color: #ffffff;
  --secondary-color: #f2f2f2;
  --tertiary-color-one: #e5383b;
  --tertiary-color-two: #fc6868ce;
  --tertiary-color-three: #e5383b80;
  --tertiary-color-four: #8ac2ff;
  --tertiary-color-five: #b8daff;
  --tertiary-color-six: #e6f2ff;
  --background-color-one: #ffffff;
  --background-color-two: #f2f2f2;
  --text-color: #000000;
  --secondary-text-color: #3c3c4399;
  --disabled-text-color: #3c3c434d;

  /* Typographie */
  --font-family: "Unives Next", sans-serif;
  --font-size: 16px;
  --heading-font-weight: bold;

  /* Espacements */
  --padding-one: 8px;
  --padding-two: 12px;
  --padding-three: 16px;
  --padding-four: 24px;
  --margin: 16px;
  --margin-two: 24px;

  /* Bordures et ombres */
  --border-radius-one: 8px;
  --border-radius-two: 12px;
  --border-radius-three: 16px;
  --btn-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  --box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.08);
  --border: 1px solid rgba(60, 60, 67, 0.29);
}