/**

 * Popup Modal

 * Styles pour la popup modale administrable

 *

 * @package Dioqa_Starter_Custom

 */



/* ========================================

   OVERLAY

   ======================================== */



.popup-modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;

}



.popup-modal.is-active {

  opacity: 1;

  visibility: visible;

}



.popup-modal__overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.6);

  cursor: pointer;

}



/* ========================================

   BOX

   ======================================== */



.popup-modal__box {

  position: relative;

  background-color: #fff;

  border-radius: 12px;

  max-width: 600px;

  width: 90%;

  max-height: 85vh;

  overflow-y: auto;

  padding: 2.5rem;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

  transform: scale(0.9);

  transition: transform 0.3s ease;

}



.popup-modal.is-active .popup-modal__box {

  transform: scale(1);

}



/* ========================================

   CLOSE BUTTON

   ======================================== */



.popup-modal__close {

  position: absolute;

  top: 1rem;

  right: 1rem;

  background: none;

  border: none;

  cursor: pointer;

  padding: 0.25rem;

  color: var(--color-gray-darker, #34333c);

  transition: opacity 0.2s ease;

  line-height: 0;

}



.popup-modal__close:hover {

  opacity: 0.6;

}



.popup-modal__close:focus {

  outline: 2px solid var(--bs-primary, #94d2eb);

  outline-offset: 2px;

  border-radius: 4px;

}



/* ========================================

   LOGO

   ======================================== */



.popup-modal__logo {

  text-align: center;

  margin-bottom: 1.5rem;

}



.popup-modal__logo img {

  max-height: 60px;

  width: auto;

}



/* ========================================

   CONTENT

   ======================================== */



.popup-modal__content {

  color: var(--color-gray-darker, #34333c);

}



.popup-modal__content > *:last-child {

  margin-bottom: 0;

}



.popup-modal__content img {

  max-width: 100%;

  height: auto;

  border-radius: 8px;

}



/* ========================================

   RESPONSIVE

   ======================================== */



@media (max-width: 576px) {

  .popup-modal__box {

    width: 95%;

    padding: 1.5rem;

    max-height: 90vh;

  }



  .popup-modal__close {

    top: 0.75rem;

    right: 0.75rem;

  }



  .popup-modal__logo {

    margin-bottom: 1rem;

  }



  .popup-modal__logo img {

    max-height: 40px;

  }

}