/*
 * Modal Formação / Certificados
 * Migrado de: fluent-snippet-storage/1-css-modal-formacao-certificados.php
 * Condição original: somente na Home (is_front_page)
 * Status original: published
 */

/* OVERLAY - Entrada e saída suave do fundo e do modal inteiro */
.meu-modal-overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(4px);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.meu-modal-overlay.ativo {
  visibility: visible;
  opacity: 1;
}

/* CONTAINER DO MODAL */
#modal-forma {
  padding: 40px 30px;
  border-radius: 12px;
  width: 100%;
  max-width: 1024px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  display: flex !important;
  flex-direction: row;

  /* Efeito do modal dando um leve "zoom" ao entrar */
  transform: scale(0.95);
  transition: transform 0.4s ease;
}

.meu-modal-overlay.ativo #modal-forma {
  transform: scale(1);
}

/* ANIMAÇÃO DOS BLOCOS (.elementor-widget-icon-box) */
.meu-modal-overlay .elementor-widget-icon-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Na saída (quando fecha o modal), zera o delay pra fechar rápido */
.meu-modal-overlay:not(.ativo) .elementor-widget-icon-box {
  transition-delay: 0s !important;
}

/* Estado ativo: visível e na posição original */
.meu-modal-overlay.ativo .elementor-widget-icon-box {
  opacity: 1;
  transform: translateY(0);
}

/* Atraso (stagger) de 300ms para a entrada progressiva dos blocos */
.meu-modal-overlay.ativo #modal-forma > div:nth-of-type(1) { transition-delay: 0.1s; }
.meu-modal-overlay.ativo #modal-forma > div:nth-of-type(2) { transition-delay: 0.4s; }
.meu-modal-overlay.ativo #modal-forma > div:nth-of-type(3) { transition-delay: 0.7s; }
.meu-modal-overlay.ativo #modal-forma > div:nth-of-type(4) { transition-delay: 1.0s; }

/* BOTÃO DE FECHAR E OUTROS ESTILOS */
.btn-fechar-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  font-size: 32px;
  color: #FFF !important;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
  outline: none;
}

.btn-fechar-modal:hover,
.btn-fechar-modal:focus {
  color: #ff0000 !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.trava-scroll {
  overflow: hidden !important;
}

.meu-modal-overlay .elementor-icon-box-description {
  padding-top: 20px;
}

#abrir-forma { cursor: pointer; }