/*
   RLX — RECONHECER QUEM JA ENTROU  ·  peca desta funcionalidade
   O QUE FAZ AQUI: todo o desenho destes ecras, e so destes.

   O LEIA-ME COMPLETO — o que faz, os tres estados, a cookie e a sua
   assinatura, o que muda de marca para marca, o que falta resolver na
   privacidade e como desfazer tudo — esta em
   includes/hooks/rlx_quem_entrou.php. Nao se repete aqui para nao
   haver duas versoes a divergir.

   SEM O GANCHO este ficheiro volta sozinho ao comportamento de
   sempre: o que ele acrescenta esta dentro de um teste ao modo, e
   sem o gancho o modo vem vazio.

   ENGLISH — part of the sign-in recognition feature.
   Here: all the styling for these screens, and only these.
   Full README in includes/hooks/rlx_quem_entrou.php. Without that
   hook this file falls back to the ordinary behaviour on its own.
*/

/* =====================================================================
   RLX — os ecras de entrada e de senha
   29/08/2026 · ficheiro NOVO. Nada do tema e tocado por ele.

   PORQUE UM FICHEIRO E NAO <style> NOS MODELOS: eram tres modelos com
   estilo la dentro, e a mesma regra aparecia em dois. Aqui esta uma vez,
   le-se de uma assentada, e desliga-se tirando um <link>.

   SO E CARREGADO POR ESTAS PAGINAS — o `login.tpl` e o
   `password-reset-container.tpl`, que envolve os tres estados da reposicao.
   Nenhuma outra pagina do portal o ve.

   Para desfazer: apagar este ficheiro e os dois <link>.
   ===================================================================== */

/* ---------- de login.tpl ---------- */
/* Cartoes de conta — 29/08/2026. Só deste ecrã; tudo prefixado `rlxq-`. */
.form-login .rlxq-tt { margin: 0 0 10px; font-size: 14px; color: #6b737c; text-align: left; }
.form-login .rlxq-lista { list-style: none; margin: 0 0 6px; padding: 0; }
.form-login .rlxq-lista li { margin: 0 0 8px; }

.form-login .rlxq-cartao,
.form-login .rlxq-escolhida {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid #e2e6ea; border-radius: 999px;
    background: #fff; text-align: left; text-decoration: none; color: #1f2835;
}
.form-login .rlxq-cartao:hover { border-color: #c9d1d9; background: #fafbfc; }

.form-login .rlxq-av {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef1f4; color: #4b5563; font-weight: 700; font-size: 15px;
}
.form-login .rlxq-av-mais { background: #f4f6f8; color: #8c8c8c; font-weight: 400; font-size: 20px; }

.form-login .rlxq-tx { flex: 1 1 auto; min-width: 0; display: block; }
.form-login .rlxq-nome { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; }
.form-login .rlxq-mail {
    display: block; font-size: 12px; color: #8c8c8c; line-height: 1.3;
    /* o e-mail corta-se com reticencias em vez de rebentar o cartao */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.form-login .rlxq-seta { flex: 0 0 auto; color: #b8c0c8; font-size: 20px; line-height: 1; }

/* O cartao do estado "senha" nao e ligacao: mostra a conta e o botao de trocar. */
.form-login .rlxq-escolhida { margin: 0 0 6px; }
/* Azul da casa — o mesmo `#00acc8` que o nosso `menu-responsivo.css` usa,
   com o `#00a3c6` do tema para o rato por cima. */
.form-login .rlxq-trocar {
    flex: 0 0 auto; font-size: 12px; color: #fff; text-decoration: none;
    padding: 5px 12px; border-radius: 999px; background: #00acc8;
}
.form-login .rlxq-trocar:hover { background: #00a3c6; color: #fff; }

/* O retrato tapa a inicial quando existe; quando nao existe, o `onerror` do
   modelo tira a imagem e a letra fica a vista. */
.form-login .rlxq-av { position: relative; overflow: hidden; }
.form-login .rlxq-av img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%; display: block;
}

/* No estado "escolher" o cartao acompanha o conteudo. O `application-pw.css`
   poe `min-height: 325px` no `.box-form`, medida para o formulario de
   entrada; com dois cartoes sobrava um rectangulo branco por baixo.
   DUAS CLASSES para igualar o peso da regra original — com uma so nao ganha. */
.form-login .rlxq-curto { min-height: 0; }

/* MARGEM CONSTANTE ENTRE O LOGOTIPO E O CARTAO — 29/08/2026.
   Um JavaScript do tema centra o cartao na vertical escrevendo o
   `margin-top` EM LINHA no `.valign-center` — medido: 72,5px no estado
   "escolher" e 61 no formulario. Como depende da altura do conteudo, o vao
   mudava de pagina para pagina.

   O `!important` aqui NAO e preguica: um valor em linha so pode ser batido
   por `!important`, e a alternativa era ir desligar o JavaScript do tema, que
   e usado por mais ecras. Um numero fixo e o que o dono pediu — igual em
   todas as paginas. */
.valign-center { margin-top: 40px !important; }

/* A CAPTCHA ALINHADA COM OS CAMPOS — 29/08/2026.
   Estava desalinhada por duas razoes somadas: o `.row` do Bootstrap traz
   `margin: 0 -15px` (ja saiu da marcacao), e o bloco do botao vem com
   `margin-top: -20px`, que o fazia subir por cima da captcha. */
.form-login .rlxq-captcha {
    margin: 0 0 14px;
    /* o `transform` encolhe mas nao muda a altura ocupada; fixa-se a mao */
    height: 76px; overflow: hidden;
}
.form-login .rlxq-captcha .g-recaptcha {
    transform: scale(0.96); -webkit-transform: scale(0.96);
    transform-origin: 0 0; -webkit-transform-origin: 0 0;
}
.form-login .rlxq-captcha + .form-group.form-submit-button { margin-top: 0; }

/* A CAIXA NAO ENCOSTA AOS REBORDOS NO TELEMOVEL — 29/08/2026.

   A minha primeira tentativa nao funcionou e a razao vale a pena ficar
   escrita: eu estava a dar margem ao `.box-form`, mas o branco que encosta
   aos rebordos NAO e o cartao — e o `.inner`. O tema tem, no
   `application-pw.css`:

       @media only screen and (max-width: 767px) { .form-login .inner {
           background: #fff; padding: 0 } }

   Ou seja, abaixo de 768px o `.inner` fica branco e sem folga, a ocupar a
   largura toda, e o cartao desaparece dentro dele. Devolve-se-lhe o fundo
   transparente e da-se-lhe a folga; o branco volta a ser so o cartao.

   O mesmo ponto de corte do tema (767px) e nao um meu, para nao haver uma
   faixa de larguras entre os dois onde nenhuma das regras mande. */
@media only screen and (max-width: 767px) {
    .form-login .inner { background: transparent; padding: 0 16px; }
}

/* ---------- de password-reset-container.tpl ---------- */
/* A CAIXA PASSA A ACOMPANHAR O CONTEUDO — 29/08/2026, pedido do dono.
   O `application-pw.css` poe `.box-form { min-height: 325px }`, medida
   para o formulario de entrada. Nos estados curtos desta pagina — o
   "pedido registado" e o "link invalido" — sobrava um rectangulo branco
   vazio por baixo da mensagem.

   Isto vive AQUI e nao naquele ficheiro: o `application-pw.css` e
   partilhado pelas quatro marcas e tambem pela pagina de entrada, onde a
   altura minima faz falta. Este <style> so e carregado por esta pagina,
   e a classe `rlxpw-caixa` so existe nela. */
/* DUAS CLASSES E NAO UMA, e a razao e especificidade: a regra do
   `application-pw.css` e `.form-login .box-form`, que pesa mais do que
   `.rlxpw-caixa` sozinha. Medido em 29/08/2026: com uma classe so, o
   `min-height` continuava a 325px. Nada de `!important` — basta igualar
   o peso, e esta folha vem depois. */
.form-login .rlxpw-caixa { min-height: 0; }

/* MARGEM CONSTANTE ENTRE O LOGOTIPO E O CARTAO — 29/08/2026.
   Um JavaScript do tema centra o cartao na vertical escrevendo o
   `margin-top` EM LINHA no `.valign-center` — medido: 72,5px no estado
   "escolher" e 61 no formulario. Como depende da altura do conteudo, o vao
   mudava de pagina para pagina.

   O `!important` aqui NAO e preguica: um valor em linha so pode ser batido
   por `!important`, e a alternativa era ir desligar o JavaScript do tema, que
   e usado por mais ecras. Um numero fixo e o que o dono pediu — igual em
   todas as paginas. */
.valign-center { margin-top: 40px !important; }

/* A CAPTCHA ALINHADA COM OS CAMPOS — 29/08/2026.
   Estava desalinhada por duas razoes somadas: o `.row` do Bootstrap traz
   `margin: 0 -15px` (ja saiu da marcacao), e o bloco do botao vem com
   `margin-top: -20px`, que o fazia subir por cima da captcha. */
.form-login .rlxq-captcha {
    margin: 0 0 14px;
    /* o `transform` encolhe mas nao muda a altura ocupada; fixa-se a mao */
    height: 76px; overflow: hidden;
}
.form-login .rlxq-captcha .g-recaptcha {
    transform: scale(0.96); -webkit-transform: scale(0.96);
    transform-origin: 0 0; -webkit-transform-origin: 0 0;
}
.form-login .rlxq-captcha + .form-group.form-submit-button { margin-top: 0; }

/* A CAIXA NAO ENCOSTA AOS REBORDOS NO TELEMOVEL — 29/08/2026.

   A minha primeira tentativa nao funcionou e a razao vale a pena ficar
   escrita: eu estava a dar margem ao `.box-form`, mas o branco que encosta
   aos rebordos NAO e o cartao — e o `.inner`. O tema tem, no
   `application-pw.css`:

       @media only screen and (max-width: 767px) { .form-login .inner {
           background: #fff; padding: 0 } }

   Ou seja, abaixo de 768px o `.inner` fica branco e sem folga, a ocupar a
   largura toda, e o cartao desaparece dentro dele. Devolve-se-lhe o fundo
   transparente e da-se-lhe a folga; o branco volta a ser so o cartao.

   O mesmo ponto de corte do tema (767px) e nao um meu, para nao haver uma
   faixa de larguras entre os dois onde nenhuma das regras mande. */
@media only screen and (max-width: 767px) {
    .form-login .inner { background: transparent; padding: 0 16px; }
}

/* ---------- de password-reset-change-prompt.tpl ---------- */
/* Só desta página: nada aqui sai de `.rlxpw`. */
.rlxpw-intro { margin: 0 0 14px; }
.rlxpw .form-group { position: relative; min-height: 0; margin: 0 0 12px; }
.rlxpw .form-group > label { display: block; margin: 0 0 6px; line-height: 20px; }
.rlxpw .form-control { height: 38px; padding-right: 84px; }
/* O `pwstrength.tpl` abre com um <br> solto, e só esse é que sai — filho
   directo do bloco da força. O texto das dicas também usa <br>, e uma regra
   `.rlxpw br` apanhava-os a todos e colava as quatro linhas numa só. */
.rlxpw .rlxpw-forca > br { display: none; }
.rlxpw .progress { margin: 0; height: 10px; }
.rlxpw .alert { margin: 10px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.rlxpw .alert p:last-child { margin-bottom: 0; }
.rlxpw #inputNewPassword2Msg p { margin: 6px 0 0; }
.rlxpw .rlxpw-accoes { margin: 14px 0 0; }
/* O ícone de estado fica escondido: é `right:0` e chocava com o botão. A
   cor da barra de força já diz o mesmo, e a moldura do campo também. */
.rlxpw .form-control-feedback { display: none; }
.rlxpw .rlxpw-ver {
    position: absolute; right: 10px; top: 26px;
    height: 38px; line-height: 38px; padding: 0;
    background: none; border: 0; cursor: pointer;
    font-size: 13px; text-decoration: underline; color: #8c8c8c;
}
.rlxpw .rlxpw-ver:hover { color: #253746; }

/* FOLGA POR BAIXO DO CARTAO — 29/08/2026.
   O cartao branco ficava colado a seccao seguinte ("I am a new customer…"),
   sem um pixel entre os dois. Da-se-lhe a mesma folga que ja tem em cima,
   para o cartao respirar dos dois lados por igual.

   Vai no `.form-login` e nao no `.valign-center`: esse tem o `margin-top`
   escrito EM LINHA pelo JavaScript do tema, e uma regra de folha nao lhe
   ganha sem `!important`. No `.form-login` nao ha disputa nenhuma. */
.form-login { margin-bottom: 24px; }

/* No telemovel a seccao de baixo tambem encostava ao rebordo do ecra. */
@media only screen and (max-width: 767px) {
    .form-login { margin-bottom: 32px; }
}

/* O VAO ENTRE O TITULO E O PRIMEIRO CAMPO — 29/08/2026.
   O `.form-title` tem `min-height: 45px` para um titulo de 20px de texto, o
   que deixava 45px de vao ate a etiqueta do e-mail. Fica em 30.

   DUAS CLASSES, para igualar o peso da regra do tema — com `.form-title`
   sozinho nao ganhava. Nesta pagina a regra vem do `cas-login.css` (o login
   nao carrega o `application-pw.css`), e esta folha e carregada depois dele,
   por isso nao e preciso `!important`. */
.form-login .form-title { min-height: 30px; }

/* APERTAR A PAGINA PARA CABER SEM ROLAR — 29/08/2026, pedido do dono.
   O que empurrava a pagina para alem do ecra era a seccao de baixo. No
   `cas-login.css` ela tem `padding: 20px 0` e o titulo ainda leva mais
   `padding-top: 20px` por cima.

   O que se poupa, somado: 16px da folga do cartao (40 -> 24), 20 do
   `padding` da seccao (20 -> 10) e 12 do titulo (20 -> 8). Cerca de 48px.

   UMA RESSALVA HONESTA: isto encurta, mas nao garante "sem rolar" em todos
   os ecras — a altura do que ha para mostrar nao muda, e um ecra baixo o
   suficiente continua a rolar. Se ainda rolar no seu, diga-me a altura da
   janela e aperto o que faltar. */
.cross-sell { padding: 10px 0; }
.cross-sell .cross-sell-title { padding-top: 8px; }

/* UMA LINHA E SO UMA — 29/08/2026.
   O nome ja vem curto do gancho, mas um nome longo com empresa comprida
   ainda podia partir. Corta-se com reticencias, como ja se faz ao e-mail.
   O `.rlxq-tx` tem `min-width: 0`, que e o que permite ao filho encolher
   dentro de um flex — sem isso o `text-overflow` nao chega a agir. */
/* O NOME CORTA-SE AQUI, e nao no PHP. Sao duas pecas lado a lado: a
   primeira encolhe e ganha as reticencias, a segunda — as ultimas quatro
   letras, com o `)` — nunca encolhe. Resultado: "…(MozOut Al…dre)" em
   qualquer largura, sem ninguem contar letras.

   O `min-width: 0` no `.rlxq-n1` e obrigatorio: sem ele um filho de flex
   recusa-se a encolher abaixo do seu conteudo e o `)` era empurrado para
   fora do cartao — que e exactamente o defeito que isto vem corrigir. */
.form-login .rlxq-nome { display: flex; align-items: baseline; }
.form-login .rlxq-n1 {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.form-login .rlxq-n2 { flex: 0 0 auto; white-space: nowrap; }

/* O icone do botao Trocar: `fas fa-exchange-alt`, do Font Awesome Pro
   5.10.1 que o PROPRIO WHMCS carrega em `/assets/css/fontawesome-all.min.css`
   — verificado no que sai destas paginas, nao presumido. Nada de novo a
   descarregar, e nao depende do `lw_main_icons.css` da mozout.com. */
.form-login .rlxq-trocar i { margin-right: 6px; font-size: 12px; vertical-align: baseline; }