/**
 * HGG Formulários Inteligentes - Frontend Styles
 * Versão 2026: Grid Responsivo + Suporte a Lógica Condicional + Multi-step + Dynamic Styles
 * FIX: Adicionado suporte para Fluxo Pós-Envio (Mensagens e Timers)
 */

:root {
    --hgg-primary: #0073aa;
    --hgg-success: #46b450;
    --hgg-error: #dc3232;
    --hgg-border: #ccd0d4;
    --hgg-bg-input: #ffffff;
    --hgg-transition: all 0.3s ease;
    --hgg-step-bg: #f0f0f1;
    
    /* Variáveis padrão para o botão (serão sobrescritas pelo Elementor via inline style) */
    --hgg-btn-bg: var(--hgg-primary);
    --hgg-btn-color: #ffffff;
    --hgg-btn-radius: 6px;
    --hgg-btn-padding: 12px 25px;
}

/* CONTAINER GERAL */
.hgg-form-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: visible !important; 
}

/* --- GRID DO FORMULÁRIO --- */
.hgg-form-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.hgg-field-container {
    box-sizing: border-box;
    padding: 0 10px 20px 10px;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%; 
}

/* Grid Responsivo Desktop */
@media (min-width: 769px) {
    .hgg-field-container.width-100 { flex-basis: 100%; width: 100%; }
    .hgg-field-container.width-75  { flex-basis: 75%; width: 75%; }
    .hgg-field-container.width-66  { flex-basis: 66.66%; width: 66.66%; }
    .hgg-field-container.width-50  { flex-basis: 50%; width: 50%; }
    .hgg-field-container.width-33  { flex-basis: 33.33%; width: 33.33%; }
    .hgg-field-container.width-25  { flex-basis: 25%; width: 25%; }
}

.hgg-field-wrapper { 
    width: 100%; 
    position: relative; 
    display: block !important; 
}

/* --- INPUTS GERAIS --- */
.hgg-input {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid var(--hgg-border);
    border-radius: 6px;
    background-color: var(--hgg-bg-input);
    transition: var(--hgg-transition) !important;
    height: auto !important;
    min-height: 45px !important;
    box-sizing: border-box !important;
    display: block !important; 
}

/* --- BOTÕES --- */
.hgg-form-footer {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    align-items: center;
    min-height: 55px; 
}

.hgg-btn, 
.hgg-submit-btn, 
.hgg-next-btn, 
.hgg-prev-btn {
    background-color: var(--hgg-btn-bg);
    color: var(--hgg-btn-color);
    border-radius: var(--hgg-btn-radius);
    padding: var(--hgg-btn-padding);
    font-weight: 600;
    cursor: pointer;
    transition: var(--hgg-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    line-height: 1.2;
    vertical-align: middle;
    border: 2px solid transparent; 
}

.hgg-btn:hover, 
.hgg-submit-btn:hover {
    opacity: 0.9;
    filter: brightness(1.1);
}

.hgg-prev-btn {
    background-color: #e0e0e0 !important;
    color: #333 !important;
}

/* --- MULTI-STEP E VISIBILIDADE --- */
.hgg-form-steps-wrapper {
    position: relative;
    width: 100%;
    min-height: auto !important; 
    overflow: visible !important; 
}

.hgg-form-step {
    display: none; 
}

.hgg-form-step.hgg-step-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Barra de Progresso */
.hgg-progress-bar-wrapper {
    background: var(--hgg-step-bg);
    border-radius: 10px;
    overflow: hidden;
    height: 10px;
    margin-bottom: 20px;
}

.hgg-progress-bar-fill {
    height: 100%;
    background: var(--hgg-brand-color, var(--hgg-primary));
    transition: width 0.4s ease;
}

.hgg-logic-hidden {
    display: none !important;
}

/* ==========================================================================
   CORREÇÃO DEFINITIVA CAMPO WHATSAPP (PREFIXO/ALTURA/ALINHAMENTO)
   ========================================================================== */
.iti {
    width: 100% !important;
    display: block !important;
}

.hgg-form-container .iti .hgg-input,
.hgg-form-container .iti input,
.hgg-form-container .iti input[type=text],
.hgg-form-container .iti input[type=tel] {
    padding-left: 90px !important; 
    height: 45px !important; 
    min-height: 45px !important; 
    box-sizing: border-box !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: block !important;
    border: inherit; 
    border-radius: inherit;
}

.hgg-form-container .iti input::placeholder {
    padding-left: 0 !important;
    color: rgba(0,0,0,0.4) !important;
}

.iti__flag-container {
    padding-left: 5px !important;
    display: flex !important;
    align-items: center !important;
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 8px !important;
}

/* ==========================================================================
   FLUXO PÓS-ENVIO: MENSAGENS E REDIRECIONAMENTO (NOVO)
   ========================================================================== */

#hgg-flow-response {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.hgg-response-fade-in {
    animation: hggFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.hgg-success-msg {
    line-height: 1.5;
    margin-bottom: 10px;
}

.hgg-timer-display {
    font-weight: 500;
    letter-spacing: 0.5px;
}

#hgg-countdown {
    font-weight: bold;
    display: inline-block;
    min-width: 1.5em;
}

@keyframes hggFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}