/*
 * Telas de acesso: login, cadastro, recuperação de senha e o fluxo de
 * completar o cadastro.
 *
 * O markup vive em src/Resources/views/site/layouts/auth.blade.php e nas views
 * de src/Resources/views/site/pages/{auth,full-registration,staff-registration}.
 *
 * Este arquivo é carregado por último em _partials/styles.blade.php, o que lhe
 * dá precedência sobre o CSS do tema sem precisar de !important. O tema traz
 * `.panel.auth { background: none; border: none }` (style.css:4997) — ou seja,
 * até aqui não existia card algum: o formulário ficava direto sobre a
 * fotografia de fundo. É o que estas regras corrigem.
 */

/* ---------------------------------------------------------------------------
   Fundo
   ------------------------------------------------------------------------ */

/* A foto é aplicada ao body pelo layout. `fixed` mantém o enquadramento em
   páginas longas — o cadastro tem sete campos e rola bastante; sem isso a
   imagem se desloca conforme o usuário desce. */
.auth-page {
    background-position: center center !important;
    background-attachment: fixed !important;
}

/* Camada de escurecimento entre a foto e o conteúdo. Sem ela, o card muda de
   legibilidade conforme a região da foto que estiver atrás: clara no alto,
   escura embaixo. Com ela, a base é sempre a mesma. */
.auth-page::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(58, 2, 6, .45) 0%, rgba(58, 2, 6, .62) 100%);
    pointer-events: none;
}

.auth-page .wrapper {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   Estrutura
   ------------------------------------------------------------------------ */

.auth-shell {
    padding: 45px 0 30px;
}

.auth-container {
    margin: 0 auto;
    max-width: 430px;
    width: 100%;
}

/* Cadastro e escolha de tipo de cadastro têm mais campos e respiram melhor
   num card mais largo. */
.auth-container--wide {
    max-width: 620px;
}

/* ---------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------ */

.auth-card {
    border-radius: 10px;
    /* Opacidade alta de propósito: esta é a regra que vale em navegador SEM
       backdrop-filter, e ali o texto precisa se sustentar sozinho, sem contar
       com o desfoque. O @supports mais abaixo alivia bastante onde há suporte. */
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 10px 34px rgba(58, 2, 6, .28);
    overflow: hidden;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .auth-card {
        background: rgba(255, 255, 255, .42);
        /* Desfoque baixo de propósito. Blur alto homogeneíza o que está atrás e
           o card volta a parecer opaco — some justamente o detalhe da foto que
           se quer deixar ver. 7px suaviza o contraste o suficiente para o texto
           se sustentar, sem apagar a imagem. */
        /* O prefixo não é opcional: o Safari só implementa a versão prefixada. */
        -webkit-backdrop-filter: blur(7px) saturate(120%);
                backdrop-filter: blur(7px) saturate(120%);
    }
}

.auth-card__body {
    padding: 26px 28px 24px;
}

/* O !important aqui não é preguiça: color.css declara
   `h1, h1 a { font: 700 28px/36px "Roboto" !important; color: #333 !important }`
   para todos os títulos do tema. Sem repetir o !important, o título do card sai
   cinza-escuro e no corpo errado. As views antigas resolviam isso com estilo
   inline; concentrar aqui ao menos deixa a regra num lugar só. */
.auth-card__title {
    margin: 0 0 4px !important;
    color: #5f0308 !important;
    font: 700 19px/1.3 'Open Sans', sans-serif !important;
    letter-spacing: .2px !important;
    text-transform: none !important;
}

.auth-card__subtitle {
    margin: 0 0 18px;
    color: #7a4b4b;
    font-size: 13px;
    line-height: 1.5;
}

.auth-card__divider {
    margin: 0 0 20px;
    border: 0;
    border-top: 1px solid rgba(151, 28, 44, .18);
}

/* ---------------------------------------------------------------------------
   Cabeçalho da página (saudação acima do card)
   ------------------------------------------------------------------------ */

.auth-welcome {
    margin: 0 auto 22px;
    max-width: 620px;
    text-align: center;
}

/* Mesmo motivo do !important acima. A sombra é o que sustenta a leitura: a foto
   tem áreas claras e escuras, e o texto passa por cima das duas. */
.auth-welcome__title {
    margin: 0 0 6px !important;
    color: #fff !important;
    font: 400 23px/1.35 'Open Sans', sans-serif !important;
    letter-spacing: .2px !important;
    text-transform: none !important;
    text-shadow: 0 1px 4px rgba(58, 2, 6, .5);
}

.auth-welcome__subtitle {
    margin: 0 !important;
    color: #fff !important;
    font: 600 15px/1.4 'Open Sans', sans-serif !important;
    letter-spacing: .2px !important;
    text-transform: none !important;
    text-shadow: 0 1px 4px rgba(58, 2, 6, .5);
}

/* ---------------------------------------------------------------------------
   Formulário
   ------------------------------------------------------------------------ */

.auth-card .form-group {
    margin-bottom: 16px;
}

.auth-card .control-label {
    display: block;
    margin-bottom: 5px;
    color: #971c2c;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
}

.auth-card .form-control {
    height: 42px;
    border: 1px solid rgba(151, 28, 44, .45);
    border-radius: 5px;
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
    color: #3a3233;
}

.auth-card .form-control:focus {
    border-color: #971c2c;
    box-shadow: 0 0 0 3px rgba(151, 28, 44, .14);
}

/* O tom anterior (#9b8f90) dava 3,1:1 sobre o campo — abaixo do mínimo de 4,5:1
   que a WCAG pede para texto. Placeholder é texto: quem enxerga pouco precisa
   conseguir ler a dica tanto quanto o resto. Este dá 5,3:1, com margem para o
   campo não ser branco puro, e ainda fica visivelmente mais claro que o texto
   digitado (#3a3233), que é o que distingue um do outro.
   `opacity: 1` porque o Firefox esmaece o placeholder por conta própria. */
.auth-card .form-control::-moz-placeholder { color: #75686a; opacity: 1; }
.auth-card .form-control:-ms-input-placeholder { color: #75686a; }
.auth-card .form-control::-webkit-input-placeholder { color: #75686a; }
.auth-card .form-control::placeholder { color: #75686a; opacity: 1; }

.auth-card .btn-danger {
    height: 44px;
    border: 0;
    border-radius: 5px;
    background: #971c2c;
    font-weight: 600;
    letter-spacing: .3px;
}

.auth-card .btn-danger:hover,
.auth-card .btn-danger:focus,
.auth-card .btn-danger:active {
    background: #7d1624;
}

.auth-card .help-block {
    margin-bottom: 0;
    color: #a32020;
    font-size: 12px;
}

.auth-card .has-error .form-control {
    border-color: #a32020;
}

/* Caixa de destaque (o aviso do acesso por link) */
.auth-note {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #e6cf9a;
    border-left: 4px solid #c8901a;
    border-radius: 4px;
    background: rgba(253, 246, 231, .9);
}

.auth-note__title {
    margin: 0 0 5px;
    color: #5f0308;
    font-size: 14px;
    font-weight: 600;
}

.auth-note__text {
    margin: 0;
    color: #5f0308;
    font-size: 13px;
    line-height: 1.5;
}

.auth-note__text + .auth-note__text {
    margin-top: 6px;
    color: #7a4b4b;
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Links abaixo do card
   ------------------------------------------------------------------------ */

.auth-links {
    margin-top: 16px;
    text-align: center;
}

.auth-links a {
    display: inline-block;
    padding: 5px 4px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-shadow: 0 1px 4px rgba(58, 2, 6, .5);
}

.auth-links a:hover,
.auth-links a:focus {
    color: #fff;
    text-decoration: underline;
}

.auth-links__separator {
    margin: 4px auto;
    width: 60px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
}

/* ---------------------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------------------ */

.auth-footer {
    padding: 22px 15px 28px;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    text-align: center;
    text-shadow: 0 1px 4px rgba(58, 2, 6, .5);
}

/* ---------------------------------------------------------------------------
   Telas estreitas
   ------------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
    /* iOS ignora background-attachment: fixed e o resultado é a imagem
       "saltando" durante a rolagem. Voltar a scroll é mais estável. */
    .auth-page {
        background-attachment: scroll !important;
    }

    .auth-shell {
        padding: 24px 0 16px;
    }

    .auth-card__body {
        padding: 20px 18px 18px;
    }

    .auth-welcome__title {
        font-size: 19px;
    }

    .auth-welcome__subtitle {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------------
   Fluxo de conclusão do cadastro
   ---------------------------------------------------------------------------
   Estas telas entram no layout em modo de conteúdo livre, com a estrutura
   própria que já tinham. Em vez de reescrevê-las, o card é aplicado ao `.panel`
   que elas já usam — assim recebem o mesmo tratamento das telas de acesso sem
   que o markup precise mudar.
   ------------------------------------------------------------------------ */

.auth-page .main-section {
    margin: 0;
}

/* O tema aplica um fundo cinza a estas seções; aqui elas precisam ser
   transparentes para a foto aparecer. */
.auth-page .page-section {
    background: transparent !important;
}

.auth-page .panel {
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 10px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 10px 34px rgba(58, 2, 6, .28);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .auth-page .panel {
        background: rgba(255, 255, 255, .42);
        -webkit-backdrop-filter: blur(7px) saturate(120%);
                backdrop-filter: blur(7px) saturate(120%);
    }
}

.auth-page .panel-heading {
    border-bottom: 1px solid rgba(151, 28, 44, .15);
    border-radius: 10px 10px 0 0;
    background: rgba(255, 255, 255, .35);
    color: #5f0308;
    font-weight: 600;
}

.auth-page .panel-body {
    padding: 22px 24px;
}

.auth-page .panel .control-label {
    color: #971c2c;
    font-weight: 600;
}

.auth-page .panel .form-control {
    border: 1px solid rgba(151, 28, 44, .45);
    border-radius: 5px;
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
}

.auth-page .panel .form-control:focus {
    border-color: #971c2c;
    box-shadow: 0 0 0 3px rgba(151, 28, 44, .14);
}

.auth-page .panel .form-control::-moz-placeholder { color: #75686a; opacity: 1; }
.auth-page .panel .form-control:-ms-input-placeholder { color: #75686a; }
.auth-page .panel .form-control::-webkit-input-placeholder { color: #75686a; }
.auth-page .panel .form-control::placeholder { color: #75686a; opacity: 1; }

/* Indicador de etapas do cadastro */
.auth-page .cs-registration-steps,
.auth-page .registration-steps {
    margin-bottom: 18px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(58, 2, 6, .5);
}