/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
.wd-slide-bg,
.wd-slide-bg.wd-fill {
  background-color: transparent !important;
  background-image: none !important;
}

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!-- OVERLAY LOTTIE -->
<div id="lottie-overlay" style="
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
">
  <lottie-player 
    src="https://assets2.lottiefiles.com/packages/lf20_jbrw3hcz.json"
    background="transparent"
    speed="1"
    style="width: 220px; height: 220px;"
    autoplay>
  </lottie-player>
</div>

<!-- CONTENU -->
<div id="page-content" style="
  opacity:0;
  transition: opacity 0.5s ease;
  font-family: Arial;
  max-width:600px;
  margin:auto;
  padding:20px;
  text-align:center;
">

  <!-- CHECK -->
  <div id="success-box" style="
    display:none;
    margin-bottom:10px;
    padding:8px;
    border-radius:6px;
    background:#e8f5e9;
    color:#2e7d32;
    font-weight:bold;
    font-size:13px;
    opacity:0;
  ">
    ✔️ Réservation confirmée
  </div>

  <h2 style="margin:5px 0;">Réservation confirmée</h2>

  <p style="color:#555; margin:5px 0 10px;">
    Votre créneau a bien été enregistré.
  </p>

  <div id="recap" style="
    margin-top:10px;
    padding:10px;
    border-radius:8px;
    background:#f9f9f9;
    text-align:left;
  ">
    [booking_confirm]
  </div>

</div>

<script>
document.addEventListener("DOMContentLoaded", function(){

  const overlay = document.getElementById("lottie-overlay");
  const content = document.getElementById("page-content");
  const successBox = document.getElementById("success-box");

  window.scrollTo(0, 0);

  setTimeout(() => {

    overlay.style.transition = "opacity 0.4s ease";
    overlay.style.opacity = "0";

    setTimeout(() => {
      overlay.style.display = "none";
      content.style.opacity = "1";

      window.scrollTo({ top: 0, behavior: "auto" });

      successBox.style.display = "block";

      setTimeout(() => {
        successBox.style.opacity = "1";
      }, 100);

    }, 400);

  }, 1500);

});
</script>
<style>
#page-content .fieldvalue {
  display: block !important;
  padding: 4px 6px !important;
  margin: 4px 0 !important;
  background: #ffffff !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  border: 1px solid #eee !important;
  transition: 0.2s ease !important;
}

#page-content .fieldvalue:hover {
  background: #e8f5e9 !important;
}

#page-content strong {
  display: block !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
  font-size: 11px !important;
  color: #2e7d32 !important;
  text-transform: uppercase;
}

#page-content br {
  display: none !important;
}
</style>


/* Fond footer WoodMart */
.footer-container,
.main-footer,
.footer {
    background: #054B55 !important;
    background-color: #054B55 !important;
    background-image: none !important;
}
body .website-wrapper footer,
body .main-page-wrapper footer,
body footer {
    background: #054B55 !important;
    background-image: none !important;
}