/**
 * PE Forms — Customizações do tema filho (Zeyna Child)
 *
 * CAMADA 1 — Como identificar uma instância específica no Elementor:
 *   1. Selecione o widget PE Forms no editor
 *   2. Vá em Advanced → CSS Classes
 *   3. Adicione um nome sem espaços, ex: "form-contato" ou "form-orcamento"
 *   4. Use esse nome como prefixo no CSS abaixo: .form-contato .pe--form { ... }
 *
 * CAMADA 2 — Estilos organizados neste arquivo
 *   Especificidade usada: .elementor-widget-peforms (global) ou .nome-da-classe (por instância)
 *
 * Fonte: Figma → inputs do formulário
 *   - Font: Devanagari / 400 / 14.56px / line-height 120%
 *   - Cor: #383838
 *   - Border: apenas bottom 0.96px
 *   - Padding: 0.96px 4.82px
 *   - Height: ~30px
 * ============================================================ */


/* ============================================================
   TOKENS — variáveis reutilizáveis
   ============================================================ */
:root {
    --pe-form-color:            #383838;
    --pe-form-font-family:      'devanagari-sangam-mn', 'devanagari-sangam-mn', sans-serif;
    --pe-form-font-size:        14.56px;
    --pe-form-font-weight:      400;
    --pe-form-line-height:      1.2;       /* 120% */
    --pe-form-letter-spacing:   0px;
    --pe-form-input-height:     30px;      /* 29.9px arredondado */
    --pe-form-input-gap:        9.65px;
    --pe-form-padding-v:        0.96px;
    --pe-form-padding-h:        4.82px;
    --pe-form-border-color:     #383838;
    --pe-form-border-width:     0.96px;
}


/* ============================================================
   GLOBAL — todos os PE Forms do site
   ============================================================ */

/* Espaçamento entre campos */
.elementor-widget-peforms .pe--form .form-field + .form-field {
    /* margin-top: var(--pe-form-input-gap); */
    margin-bottom: var(--pe-form-input-height);
}

/* Inputs de linha única */
.elementor-widget-peforms .pe--form input[type="text"],
.elementor-widget-peforms .pe--form input[type="email"],
.elementor-widget-peforms .pe--form input[type="tel"],
.elementor-widget-peforms .pe--form input[type="number"],
.elementor-widget-peforms .pe--form input[type="url"],
.elementor-widget-peforms .pe--form input[type="date"] {
    height:          var(--pe-form-input-height);
    padding:         var(--pe-form-padding-v) var(--pe-form-padding-h);
    /* apenas borda inferior (estilo underline) */
    border:          none;
    border-bottom:   var(--pe-form-border-width) solid var(--pe-form-border-color);
    border-radius:   0;
    outline:         none;
    background:      transparent;
    box-shadow:      none;
    width:           100%;

    /* tipografia */
    font-family:     var(--pe-form-font-family);
    font-weight:     var(--pe-form-font-weight);
    font-size:       var(--pe-form-font-size);
    line-height:     var(--pe-form-line-height);
    letter-spacing:  var(--pe-form-letter-spacing);
    color:           var(--pe-form-color);
}

/* Textarea */
.elementor-widget-peforms .pe--form textarea {
    padding:         var(--pe-form-padding-v) var(--pe-form-padding-h);

    border:          none;
    border-bottom:   var(--pe-form-border-width) solid var(--pe-form-border-color);
    border-radius:   0;
    outline:         none;
    background:      transparent;
    box-shadow:      none;
    width:           100%;
    resize:          vertical;

    font-family:     var(--pe-form-font-family);
    font-weight:     var(--pe-form-font-weight);
    font-size:       var(--pe-form-font-size);
    line-height:     var(--pe-form-line-height);
    letter-spacing:  var(--pe-form-letter-spacing);
    color:           var(--pe-form-color);
}

/* Select */
.elementor-widget-peforms .pe--form select,
.elementor-widget-peforms .pe--form .pe-select {
    height:          var(--pe-form-input-height);
    padding:         var(--pe-form-padding-v) var(--pe-form-padding-h);

    border:          none;
    border-bottom:   var(--pe-form-border-width) solid var(--pe-form-border-color);
    border-radius:   0;
    outline:         none;
    background:      transparent;
    box-shadow:      none;
    width:           100%;
    appearance:      none;

    font-family:     var(--pe-form-font-family);
    font-weight:     var(--pe-form-font-weight);
    font-size:       var(--pe-form-font-size);
    line-height:     var(--pe-form-line-height);
    letter-spacing:  var(--pe-form-letter-spacing);
    color:           var(--pe-form-color);
}

/* Labels dos campos */
.elementor-widget-peforms .pe--form .label--main {
    font-family:     var(--pe-form-font-family);
    font-weight:     var(--pe-form-font-weight);
    font-size:       var(--pe-form-font-size);
    line-height:     var(--pe-form-line-height);
    color:           var(--pe-form-color);
}

/* Placeholder */
.elementor-widget-peforms .pe--form input::placeholder,
.elementor-widget-peforms .pe--form textarea::placeholder {
    color:   var(--pe-form-color);
    opacity: 0.5;
}

/* Estado de foco (mantém underline, sem outline extra) */
.elementor-widget-peforms .pe--form input:focus,
.elementor-widget-peforms .pe--form textarea:focus,
.elementor-widget-peforms .pe--form select:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--pe-form-border-color);
}


/* ============================================================
   ESTADO VÁLIDO — remove borda verde do plugin
   O plugin aplica border-color: green !important via .validate--colors
   quando o input tem conteúdo. Revertemos para a cor do design.
   ============================================================ */

.elementor-widget-peforms .validate--colors input.has-content:not(.wpcf7-not-valid) {
    border-color: var(--pe-form-border-color) !important;
}

/* Select customizado — cor da opção selecionada igual à borda (cinza claro) */
.elementor-widget-peforms .pe--form .select-selected {
    color: var(--pe-form-border-color);
}


/* ============================================================
   MENSAGEM DE ERRO / REQUIRED
   O plugin posiciona a .error-message com position: absolute
   à direita do input. Aqui reposicionamos para abaixo do campo.
   ============================================================ */

/* Reseta o posicionamento do plugin e coloca abaixo do input */
.elementor-widget-peforms .pe--form.form--custom form .form-field .error-message {
    position: absolute;
    top:       auto;
    right:     auto;
    bottom:    -15px;
    left:      var(--pe-form-padding-h);
    transform: none;
    font-size: 10px;
    color:     rgb(231, 135, 135);
    line-height: 1;
}

/* Textarea: mesmo comportamento (o plugin já sobrescreve top, garantimos o restante) */
.elementor-widget-peforms .pe--form.form--custom form .form-field:has(textarea) .error-message {
    top:       auto;
    bottom:    2px;
    transform: none;
}


/* ============================================================
   POR INSTÂNCIA — exemplos usando CSS Classes do Elementor
   (Advanced → CSS Classes no widget)
   ============================================================ */

/*
 * Exemplo: classe "quick-contact-form"
 * Sobrescreve tokens apenas para essa instância
 */
.quick-contact-form {
    --pe-form-border-color: rgba(56, 56, 56, 0.3);
    --pe-form-color:        #383838;
}

/*
 * Exemplo: classe "form-orcamento"
 * Pode ter visual diferente sem duplicar código
 */
/* .form-orcamento {
    --pe-form-border-color: #0056b3;
    --pe-form-color:        #0056b3;
    --pe-form-font-size:    16px;
} */