/* POPUP RESERVATION - Styles personnalisés pour Monsieur Spoon */

/* Ombre qui suit la forme du timbre */
.infolettre-popup-wrap {
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3)) !important;
}

/* Bordure ORANGE avec effet timbre-poste (perforations) + Intérieur TURQUOISE */
.infolettre-popup {
  /* Taille de perforation pour l'effet timbre */
  --radius: 12px;

  /* Réduire la taille globale de la popup */
  max-width: 600px !important;
  max-height: 500px !important;
  width: 90% !important;

  /* Marge externe droite */
  margin-right: 35px !important;

  /* Bordure orange fine (30px) */
  border: none !important;
  padding: 30px !important;

  /* Effet timbre-poste avec perforations ORANGE pour la bordure */
  background:
    radial-gradient(
      var(--radius),
      transparent 98%,
      #FF4A16
    ),
    linear-gradient(#FF4A16 0 0) !important;
  background-repeat:
    round,
    no-repeat !important;
  background-position:
    calc(var(--radius) * -1.5) calc(var(--radius) * -1.5),
    50% !important;
  background-size:
    calc(var(--radius) * 3) calc(var(--radius) * 3),
    calc(100% - var(--radius) * 3) calc(100% - var(--radius) * 3) !important;

  /* Position relative pour le pseudo-élément */
  position: relative !important;
}

/* Fond TURQUOISE pour l'intérieur de la popup */
.infolettre-popup::before {
  content: '' !important;
  position: absolute !important;
  top: 30px !important;
  left: 30px !important;
  right: 30px !important;
  bottom: 30px !important;
  background-color: #329B98 !important;
  z-index: 0 !important;
}

/* S'assurer que le contenu est au-dessus du fond turquoise avec marge turquoise */
.infolettre-popup > * {
  position: relative !important;
  z-index: 1 !important;
  margin: 50px !important;
}

/* Image du personnage - positionnement et échelle */
.popup-illu-img {
  position: absolute !important;
  top: auto !important;
  bottom: 0% !important;
  left: -5% !important;
  right: 0% !important;
  scale: 2.5 !important;
}

/* Texte de la popup aligné à gauche et stylisé */
.infolettre-popup .ch-infolettre {
  text-align: left !important;
  line-height: 1.2;
}

/* Augmenter la taille du texte en mobile */
@media (max-width: 479px) {
  .infolettre-popup .ch-infolettre {
    font-size: 2.5rem !important;
  }

  .popup-illu-img {
    margin-left: 35px !important;
  }
}

/* Croix de fermeture positionnée en dehors de la popup (coin supérieur droit) */
.close-infolettre {
  position: absolute !important;
  top: -30px !important;
  right: -30px !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

/* Bouton de réservation dans la popup - override le margin: 50px global */
/* Note: la classe a 3 "t" dans le HTML (infoletttre) - c'est une typo dans le code original */
.infolettre-popup .infoletttre-popup-form-mt2-5 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 50px 35px 50px !important;
}

.infolettre-popup .button {
  margin: 0 auto !important;
}

/* Ajustements pour grands écrans desktop - centrer verticalement le contenu */
@media (min-width: 992px) {
  /* Réduire les marges globales sur grand écran */
  .infolettre-popup > * {
    margin: 30px 50px !important;
  }

  /* Conteneur du texte - réduire la marge du haut */
  .infolettre-popup .info-txt-wrap {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
  }

  /* Bouton - remonter et centrer dans l'espace disponible */
  /* Annuler le margin-top: 25px du style inline dans index.php */
  .infolettre-popup .infoletttre-popup-form-mt2-5,
  .infolettre-popup .infoletttre-popup-form-mt2-5.is-more-mobile {
    margin: 0 50px 40px 50px !important;
  }
}

/* Ajustements pour très grands écrans */
@media (min-width: 1200px) {
  .infolettre-popup > * {
    margin: 25px 50px !important;
  }

  .infolettre-popup .info-txt-wrap {
    margin-top: 15px !important;
    margin-bottom: 5px !important;
  }

  .infolettre-popup .infoletttre-popup-form-mt2-5,
  .infolettre-popup .infoletttre-popup-form-mt2-5.is-more-mobile {
    margin: 0 50px 45px 50px !important;
  }
}