/* ============================================================
   Success Card (componente genérico)

   Reusável em qualquer página de confirmação pós-ação
   (contact, leads/wanted-request, billing, etc.).

   Estrutura esperada no template:

       <section class="success-page py-5">
         <div class="container-xxl">
           <div class="row justify-content-center">
             <div class="col-12 col-md-8 col-lg-6 text-center">
               <div class="success-card card border-0 shadow-sm p-4 p-md-5">
                 <div class="success-icon mb-4">
                   <span class="material-icons text-success
                                success-icon__glyph">check_circle</span>
                 </div>
                 ...
               </div>
             </div>
           </div>
         </div>
       </section>
   ============================================================ */

.success-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}

.success-card {
  border-radius: 16px;
}

.success-icon .material-icons {
  animation: gf-success-pulse 2s ease-in-out infinite;
  color: var(--gf-color-primary, #14651e);
  /* Override the .material-icons fixed width/overflow so the large
     success glyph can render at full size without clipping. */
  width: auto;
  height: auto;
  overflow: visible;
}

.success-icon__glyph {
  font-size: 80px;
}

/* Variante inline (ao lado de um título, ex.: success de leads com
   resultados): glyph proporcional ao heading. SEMPRE usar o glyph
   dentro do wrapper .success-icon — sem ele, o width fixo do
   .material-icons global faz o ícone grande transbordar sobre o texto. */
.success-icon--inline {
  flex-shrink: 0;
  line-height: 1;
}

.success-icon--inline .success-icon__glyph {
  font-size: 44px;
}

@keyframes gf-success-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}