/* ==========================================================================
   deepcar_login_registo.css  ·  v1.2
   Modernização visual das páginas de Login (ViewMyAccount) e Registo
   (ViewRegistration) do ePages. Apenas aspeto. Estrutura e campos
   intactos. Tudo escopado a #UserLoginForm e #registrationForm para
   nunca vazar para outras páginas.

   Fontes: Roboto Condensed (labels, títulos, botões) + Inter (inputs).
   Azul #0b02b7 reservado às acções de conversão (Entrar / Criar conta).
   ========================================================================== */


/* ==========================================================================
   0. WRAPPER · centrar a coluna de conteúdo (login + registo empilhados)
   ========================================================================== */

/* Anula o float nativo da lista de registo e empilha tudo numa coluna
   centrada. Escopado às âncoras destas páginas. */
.ContentAreaWrapper {
  text-align: center !important;
}

/* O cabeçalho, mensagem e separadores ficam centrados mas alinhados
   ao mesmo eixo dos cartões */
.ContentAreaWrapper > h1,
.ContentAreaWrapper > .DialogMessage,
.ContentAreaWrapper > hr.Separator,
.ContentAreaWrapper > br {
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==========================================================================
   1. ZONA COMUM · cabeçalho da página de login
   ========================================================================== */

.ContentAreaWrapper > h1 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
  text-align: center !important;
  margin: 0 auto 4px auto !important;
}

/* Mensagem informativa nativa: escondida.
   Só aparece em redirecionamentos e não acrescenta nada numa visita
   direta ao login. Polui a página. */
.ContentAreaWrapper .DialogMessage.MessageInfo {
  display: none !important;
}

.ContentAreaWrapper .DialogMessage.MessageInfo p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #444 !important;
  margin: 0 !important;
}

/* Separadores horizontais nativos: discretos */
.ContentAreaWrapper > hr.Separator {
  border: 0 !important;
  border-top: 1px solid #ececec !important;
  margin: 20px 0 !important;
}


/* ==========================================================================
   2. CARTÃO DOS FORMULÁRIOS
   Login: #UserLoginForm  ·  Registo: #registrationForm
   ========================================================================== */

#UserLoginForm,
#registrationForm {
  font-family: 'Inter', sans-serif !important;
  background: #ffffff !important;
  border: 1px solid #ececec !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.05) !important;
  padding: 28px !important;
  max-width: 460px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;          /* centrar o cartão na coluna */
  text-align: left !important;        /* repor alinhamento interno */
  float: none !important;             /* anula float nativo do ePages */
}

/* Registo é mais longo: deixar respirar um pouco mais largo */
#registrationForm {
  max-width: 560px !important;
}

/* Títulos de secção dentro dos forms */
#UserLoginForm h2,
#registrationForm h2 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
  margin: 0 0 18px 0 !important;
}

/* Barras de secção do registo (TableHead) */
#registrationForm .TableHead {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #0b02b7 !important;
  padding: 0 0 8px 0 !important;
  margin: 26px 0 18px 0 !important;
}

#registrationForm .TableHead:first-of-type {
  margin-top: 0 !important;
}

#registrationForm .TableHead > div {
  background: transparent !important;
  padding: 0 !important;
}

/* Sub-títulos h3 dentro do registo (Identificação bancária, Info adicional) */
#registrationForm .VM-TableHead h3 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2a2a2a !important;
  text-transform: none !important;
  margin: 8px 0 0 0 !important;
}

#registrationForm .VM-SubLabel {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #888 !important;
  margin-top: 2px !important;
}


/* ==========================================================================
   3. CAMPOS · labels, inputs, selects
   Estrutura nativa: .InputBlock > .InputLabelling + .InputField
   ========================================================================== */

#UserLoginForm .InputBlock,
#registrationForm .InputBlock {
  margin-bottom: 14px !important;
}

#UserLoginForm .InputLabelling,
#registrationForm .InputLabelling {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
}

#UserLoginForm .InputLabelling label,
#registrationForm .InputLabelling label {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 500 !important;
  color: #333 !important;
}

/* Inputs e selects: campo moderno, border limpa, focus azul discreto */
#UserLoginForm input[type="text"],
#UserLoginForm input[type="email"],
#UserLoginForm input[type="password"],
#UserLoginForm input[type="tel"],
#registrationForm input[type="text"],
#registrationForm input[type="email"],
#registrationForm input[type="password"],
#registrationForm input[type="tel"],
#registrationForm select {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  height: auto !important;
  line-height: 1.3 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Seta personalizada nos selects (appearance removida acima) */
#registrationForm select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

#UserLoginForm input:focus,
#registrationForm input:focus,
#registrationForm select:focus {
  outline: none !important;
  border-color: #0b02b7 !important;
  box-shadow: 0 0 0 3px rgba(11,2,183,0.10) !important;
}

/* Placeholder mais suave */
#UserLoginForm input::placeholder,
#registrationForm input::placeholder {
  color: #aaa !important;
}

/* Asterisco de obrigatório: discreto */
#registrationForm .InputLabelling {
  color: #333 !important;
}

/* Nota "Campos obrigatórios" */
#registrationForm .MandatoryField .InputField {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #999 !important;
}

/* Sub-label do campo Morada 2 */
#registrationForm .VM-SubLabel {
  line-height: 1.4 !important;
}

/* Ícone de ajuda do código postal: alinhado */
#registrationForm .HelpIcon {
  opacity: 0.55 !important;
}


/* ==========================================================================
   4. LINK "Esqueceu-se da palavra-passe"
   ========================================================================== */

#UserLoginForm a.Action {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #0b02b7 !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 8px !important;
}

#UserLoginForm a.Action:hover {
  text-decoration: underline !important;
}


/* ==========================================================================
   5. CHECKBOX da Política de privacidade (registo)
   ========================================================================== */

#registrationForm input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #0b02b7 !important;
  margin-top: 2px !important;
  cursor: pointer !important;
}

#registrationForm label[for="AcceptPrivacyPolicy"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #555 !important;
  line-height: 1.5 !important;
}


/* ==========================================================================
   6. BOTÕES DE CONVERSÃO
   Login: "Iniciar uma sessão"  ·  Registo: "Criar conta"
   Azul DeepCar #0b02b7 reservado a estas acções.
   ========================================================================== */

#UserLoginForm button[type="submit"],
#registrationForm button[type="submit"] {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  background: #0b02b7 !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 13px 28px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  margin-top: 18px !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, transform 0.05s ease !important;
}

#UserLoginForm button[type="submit"]:hover,
#registrationForm button[type="submit"]:hover {
  background: #0902a0 !important;
}

#UserLoginForm button[type="submit"]:active,
#registrationForm button[type="submit"]:active {
  transform: translateY(1px) !important;
}

#UserLoginForm button[type="submit"]:focus,
#registrationForm button[type="submit"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(11,2,183,0.25) !important;
}


/* ==========================================================================
   7. BLOCO "Registar como novo cliente" (página de login)
   Acção secundária: outline, não preenchido a azul.
   ========================================================================== */

.ContentAreaWrapper ul.NoListStyleType {
  list-style: none !important;
  float: none !important;             /* tira do canto */
  clear: both !important;
  background: #f7f8fa !important;     /* fundo suave: lê-se como "outra opção" */
  border: 1px solid #ececec !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 28px !important;
  max-width: 460px !important;
  box-sizing: border-box !important;
  margin: 40px auto 0 auto !important; /* mais separação do login */
  text-align: center !important;
  position: relative !important;
}

/* Separador "ou" entre login e registo */
.ContentAreaWrapper ul.NoListStyleType::before {
  content: "ou" !important;
  position: absolute !important;
  top: -32px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #999 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  background: #ffffff !important;
  padding: 0 12px !important;
}

.ContentAreaWrapper ul.NoListStyleType li {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.ContentAreaWrapper ul.NoListStyleType h2 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.2px !important;
  text-align: center !important;
  margin: 0 0 16px 0 !important;
}

/* O <br> nativo a seguir ao link cria espaço a mais */
.ContentAreaWrapper ul.NoListStyleType br {
  display: none !important;
}

.ContentAreaWrapper ul.NoListStyleType a.Action {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0b02b7 !important;
  text-decoration: none !important;
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 2px solid #0b02b7 !important;
  border-radius: 8px !important;
  padding: 11px 30px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.ContentAreaWrapper ul.NoListStyleType a.Action:hover {
  background: #0b02b7 !important;
  color: #ffffff !important;
}


/* ==========================================================================
   8. LIMPEZA · elementos nativos espúrios
   ========================================================================== */

/* <br> soltos dentro dos InputBlock criam espaços irregulares.
   Anulamos a altura destes blocos vazios. */
#registrationForm .InputBlock > br {
  display: none !important;
}

/* O InputBlock que contém apenas <br> deixa de ocupar espaço */
#registrationForm .InputBlock:empty {
  display: none !important;
}


/* ==========================================================================
   9. RESPONSIVO  ·  mobile primeiro a partir de 767px para baixo
   ========================================================================== */

@media (max-width: 767px) {

  #UserLoginForm,
  #registrationForm {
    padding: 20px !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }

  .ContentAreaWrapper > h1 {
    font-size: 22px !important;
  }

  #UserLoginForm h2,
  #registrationForm h2,
  .ContentAreaWrapper ul.NoListStyleType h2 {
    font-size: 18px !important;
  }

  #UserLoginForm input,
  #registrationForm input,
  #registrationForm select {
    font-size: 16px !important; /* 16px evita zoom automático do iOS ao focar */
  }

  .ContentAreaWrapper ul.NoListStyleType a.Action {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}