/* ==========================================================================
   Socequi blog — modulo Form (seccao Contactos) e pagina de agradecimento
   --------------------------------------------------------------------------
   O formulario e desenhado pelo proprio modulo:
   views/Form/view.tpl, inserido com
     component('/form/view/id/N')

   Esse template define no topo um conjunto de variaveis CSS (--fv-*) sobre
   #form_view. Aqui apenas se redefinem essas variaveis com a paleta Socequi,
   em vez de duplicar mil linhas de markup so para mudar cores e cantos.

   O que NAO se toca: estrutura, validacao, mensagens de erro, upload de
   ficheiros, reCAPTCHA. Tudo isso continua a ser do modulo.

   Referencia visual: _design-reference/Lps/src/app/components/ContactSection.tsx
   ========================================================================== */

/* ==========================================================================
   PORQUE `body #form_view` E NAO `#form_view`
   --------------------------------------------------------------------------
   O view.tpl traz um <style> proprio que e impresso no CORPO da pagina, junto
   com o formulario — ou seja, DEPOIS desta folha de estilos, que vem no
   <head>. Com a mesma especificidade (#form_view contra #form_view), quem
   ganha e o ultimo a aparecer: o do modulo. Era por isso que o botao
   continuava azul-vivo em vez de azul Socequi.

   `body #form_view` tem especificidade 0,1,1 contra 0,1,0 e ganha
   independentemente da ordem. Evita ter de espalhar !important.
   ========================================================================== */

body #form_view {
    /* --- paleta ------------------------------------------------------- */
    --fv-primary:        var(--sq-azul);
    --fv-primary-hover:  #002d5e;
    --fv-primary-active:  #00224a;
    --fv-border-focus:   var(--sq-azul);
    --fv-focus-ring:     rgba(0, 62, 126, .18);

    --fv-text:           var(--sq-texto);
    --fv-label:          var(--sq-texto);
    --fv-muted:          #9ca3af;
    --fv-border:         #e5e7eb;
    --fv-border-hover:   #d1d5db;

    /* --- forma e tipografia ------------------------------------------- */
    --fv-font:           var(--sq-fonte);
    --fv-radius:         var(--sq-raio);
    --fv-radius-sm:      var(--sq-raio);

    /* O cartao branco e o espacamento vem da seccao, nao do modulo:
       na landing o formulario esta dentro de .sqFormCartao. */
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: .875rem;
}

/* O modulo repete o titulo do formulario; na landing quem manda e o
   cabecalho da seccao ("Fale connosco"), por isso esconde-se. */
body #form_view .form-header,
body #form_view .name_form {
    display: none;
}

/* Rotulos como no design: pequenos e semibold */
body #form_view label {
    font-weight: 600;
    font-size: .75rem;
}

/* Botao de envio — o design usa largura total e cantos mais redondos */
body #form_view .submit_button,
body #form_view #enviarform {
    width: 100%;
    border-radius: var(--sq-raio-lg);
    font-family: var(--sq-fonte);
    font-weight: 700;
    font-size: .875rem;
    padding: .875rem 1rem;
    transition: background-color .2s ease, transform .1s ease;
}

body #form_view .submit_button:active,
body #form_view #enviarform:active {
    transform: scale(.97);
}

/* O botao leva o icone "send" a seguir ao texto, como no design */
body #form_view .submit_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

body #form_view .submit_button .sqIcone {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

/* --- Politica de privacidade -----------------------------------------
   O elemento e um checkbox sem rotulo proprio, por isso o modulo imprime o
   asterisco de obrigatorio sozinho numa linha por cima da caixa. No design a
   caixa e o texto estao lado a lado, numa so linha.

   O `:has()` limita isto ao bloco que contem mesmo um checkbox, para nao
   afectar os campos de texto.                                             */
body #form_view .input-container:has(input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

/* O asterisco sozinho numa linha por cima da caixa.
 *
 * O modulo imprime sempre o rotulo do elemento, mesmo quando esta vazio:
 *     <div id="div_element_94" class="form-field">
 *       <label for="element_94" class="required"></label>   <- vazio
 *       <div class="input-container">
 *         <label><input type="checkbox" ...>Aceito os termos...</label>
 *
 * Como o rotulo deste elemento esta vazio na BD (o texto vive na opcao do
 * checkbox), sobra so o asterisco que o .required desenha por CSS — numa
 * linha em branco.
 *
 * O :empty FUNCIONA aqui porque o rotulo nao tem mesmo filhos nenhuns: o
 * asterisco vem de um pseudo-elemento, e esses nao contam para o :empty.
 * Assim so desaparece quando esta realmente vazio — um checkbox futuro com
 * rotulo proprio continua a mostra-lo.
 *
 * O pai e .form-field, nao .input-group — foi por isso que a primeira
 * tentativa nao apanhou nada.
 */
body #form_view .form-field > label.required:empty {
    display: none;
}

/* texto ao lado da caixa: peso normal, nao o semibold dos rotulos */
body #form_view .input-container:has(input[type="checkbox"]) label {
    font-weight: 400;
    font-size: .75rem;
    line-height: 1.65;
    color: #666;
}

/* Aviso do reCAPTCHA, quando as chaves estiverem configuradas */
body #form_view .recaptcha-disclosure {
    font-size: .6875rem;
    color: #9ca3af;
    line-height: 1.5;
}

/* O cartao branco que envolve o formulario na seccao Contactos.
   Definido em socequi-seccoes.css (.sqFormCartao); aqui so se garante que o
   formulario do modulo nao lhe acrescenta espacamento a mais. */
body .sqFormCartao #form_view {
    padding: 0;
}


/* ==========================================================================
   PAGINA DE AGRADECIMENTO
   <- _design-reference/Lps/src/app/pages/ThankYouPage.tsx
   Ver views/Form/success.tpl
   ========================================================================== */

.sqObrigado {
    min-height: 70vh;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
}

.sqObrigadoIcone {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(194, 213, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.sqObrigadoIcone .sqIcone {
    width: 2rem;
    height: 2rem;
    color: var(--sq-azul);
}

.sqObrigadoTitulo {
    color: var(--sq-azul);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.sqObrigadoTexto {
    color: #555;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 28rem;
    margin: 0 0 2.5rem;
}

.sqObrigadoTexto p { margin: 0; }

.sqObrigado .sqBtn {
    padding: .875rem 1.75rem;
    border-radius: var(--sq-raio-lg);
}