/* CARD */


/* HTML

    <div class="card">

      <img src="https://placehold.co/400x400" alt="">

      <div class="card-bottom">
        <p>test</p>
        <p>test</p>
        <form action="car.php" method="get">
          <input type="hidden" name="car_id" value="<?=$car['id'];?>">
          <input type="submit" name="" value="En savoir plus">
        </form>

      </div>
    </div>

*/


.card {
  color: white;
  width: 21em;
  margin: 1em;
  border-radius: 20px;
}

.card img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 21em;
  height: 21em;
  object-fit: cover;
}

.card-bottom {
  width: 100%;
  font-size: 1em;
  height: 12em;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--second_color);
  background-color: var(--main_color);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
}

.card input{
  padding: 0.7em;
  text-align: center;
  font-size: 1em;
  background-color: transparent;
  border-radius: 15px;
  border: 1px solid white;
  color:white;
  position: absolute;
  bottom:2em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.card input:hover{
  color:black;
  background-color: var(--second_color);
  border: 1px solid var(--second_color);
}
/* CARD */


/* ANIMATION ZOOM SUR PHOTO QUAND HOVER */

.zp-anim{
  transition: transform .2s;
}

.zp-anim:hover{
  transform : scale(1.5);
}

.zp-anim-2{
  transition: transform .2s;
}

.zp-anim-2:hover{
  transform : scale(1.2);
}

.zp-anim-3{
  transition: transform .2s;
}

.zp-anim-3:hover{
  transform : scale(1.3);
}

/* ANIMATION ZOOM SUR PHOTO QUAND HOVER */


.ts-anim{
  text-decoration: none;
  position: relative;
}

.ts-anim::after {
  content: '';
  position: absolute;
  left: 0; /* Position du soulignement */
  bottom: -2px; /* Position du soulignement */
  width: 0;
  height: 2px; /* Hauteur du soulignement */
  background-color: var(--second_color); /* Couleur du soulignement */
  transition: width 0.3s ease;
}

.ts-anim:hover::after {
  width: 100%;
}


.inputStyle{
  height: 2.5em;
  width: 15em;
  background-color: transparent;
  margin: 0.5em;
  padding: 0.5em;

  text-align: center;

  border: 1px solid rgb(54, 54, 54);
  border-radius: 18px;
}

.inputStyle:hover{
  background-color: transparent;

  border: 1px solid var(--second_color);
  border-radius: 18px;
}

.inputStyleFocus:focus{
  background-color: transparent;

  border: 1px solid var(--second_color);
  border-radius: 18px;
  outline: none;
}

.inputStyleLine{
  background-color: transparent;
  border-bottom: 1px solid var(--light_main_color);
  outline: none;
}

.inputStyleLine:hover{
  background-color: transparent;
  border-bottom: 1px solid var(--second_color);
  outline: none;
}

.inputStyleLine:focus{
  background-color: transparent;
  border-bottom: 1px solid var(--second_color);
  outline: none;
}


.popupContainer {
  position: fixed; /* Ensures it's out of the normal document flow */
  z-index: 999999; /* High z-index to be above other elements */
  width: 100%; /* Full-width container */
  display: flex;
  justify-content: center;
  top: 20px; /* Instead of margin-top to avoid layout shifts */
  pointer-events: none; /* Prevents interactions with this container */
}

.popupContainer > .popupContent {
  position: relative; /* Changed from fixed to relative to keep content centered inside the container */
  background-color: rgb(27, 114, 70); /* Green background */
  padding: 1em; /* Padding inside the popup */
  border-radius: 15px; /* Rounded corners */
  pointer-events: auto; /* Allows interactions within the popup content */
}

.popupContainer > .green{
  background-color: rgb(27, 114, 70); /* Green background */
}

.popupContainer > .red{
  background-color: rgb(162, 26, 26); /* Red background */
}