/* ============================================================================
   auth-premium.css — Identidade visual ÚNICA das telas de autenticação premium
   (Login e Criar conta). FONTE ÚNICA: as duas telas compartilham exatamente o
   mesmo fundo, card, tipografia, campos, botões, sombras e microinterações.
   Por isso os seletores usam o hook comum ".login-card" (nome mantido por
   histórico — vale para Login e Cadastro).

   Escopo: carregado APENAS pelas páginas que o referenciam (Login, Register) —
   não afeta as demais telas de auth.
   ========================================================================== */

/* Curva de transição única para toda a tela: elegante e discreta. */
.login-card, .login-card * { --ease: cubic-bezier(.4, 0, .2, 1); }

/* ── Fundo ambiente: off-white → cinza muito claro; manchas orgânicas da marca
      grandes, muito desfocadas e quase imperceptíveis (~3%). ── */
body {
    background: linear-gradient(180deg, #FBFCFE 0%, #F4F7FB 100%);
    overflow-x: hidden;
}
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
}
body::before {          /* névoa azul (marca) — topo esquerdo */
    width: 940px; height: 940px;
    top: -360px; left: -280px;
    background: radial-gradient(circle, rgba(93, 139, 255, .085) 0%, transparent 66%);
    opacity: .45; filter: blur(104px);
}
body::after {           /* névoa turquesa (marca) — base direita */
    width: 1020px; height: 1020px;
    bottom: -400px; right: -300px;
    background: radial-gradient(circle, rgba(94, 216, 199, .08) 0%, transparent 66%);
    opacity: .4; filter: blur(112px);
}

/* ── Card: respiro generoso e sombra leve (sensação de flutuar). ── */
.auth-card.login-card {
    position: relative;
    z-index: 1;
    max-width: 464px;
    border-radius: 22px;
    border: 1px solid #ECEFF4;
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .03),
        0 10px 24px -8px rgba(16, 24, 40, .10),
        0 3px 8px -4px rgba(16, 24, 40, .05);
    padding: 3rem 3rem 2.5rem;
}

/* ── Topo: logo com presença; título e apoio alinhados. ── */
.login-head { text-align: center; margin-bottom: 2.1rem; }
.login-brand-row {
    display: inline-flex; align-items: center; gap: .62rem; margin-bottom: 1.55rem;
}
.login-logo {
    width: 54px; height: 54px;
    filter: drop-shadow(0 3px 6px rgba(15, 23, 42, .15));
}
.auth-brand.login-brand {
    font-size: 1.72rem; font-weight: 800; letter-spacing: -.032em; line-height: 1;
}
.login-title {
    font-size: 1.4rem; font-weight: 700; color: #0F1728; line-height: 1.25;
    margin: 0 0 .45rem; letter-spacing: -.021em;
}
.login-subtitle { font-size: .9rem; color: #667085; line-height: 1.5; margin: 0; }

/* ── Espaçamento entre grupos de campo do formulário (um respiro a mais).
      Escopo .login-form: não mexe em alertas/mensagens fora do formulário. ── */
.login-form .mb-3 { margin-bottom: 1.15rem !important; }

/* ── Campos: brancos, borda cinza clara, raio consistente, sombra ínfima;
      foco estilo Stripe/Linear (borda da marca + glow muito suave). ── */
.login-card .form-label {
    font-size: .82rem; font-weight: 600; color: #3B4757;
    letter-spacing: .004em; margin-bottom: .5rem;
}
.login-card .form-control {
    height: 48px;
    font-size: 16px;                 /* >=16px: evita o zoom automático no iOS */
    border-radius: 12px;
    border: 1px solid #E4E9F1;
    background: #ffffff;
    color: #101828;
    padding: .5rem .9rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.login-card .form-control::placeholder { color: #9AA6B6; }
.login-card .form-control:hover { border-color: #D3DBE6; }
.login-card .form-control:focus {
    border-color: #5D8BFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(93, 139, 255, .12), 0 1px 2px rgba(16, 24, 40, .04);
}

/* ── Link "Esqueci minha senha". ── */
.login-forgot {
    font-size: .82rem; font-weight: 600; color: #5D8BFF; text-decoration: none;
    transition: color .18s var(--ease);
}
.login-forgot:hover { color: #4A78FF; }

/* ── Checkbox refinado (sem cara de Bootstrap padrão). ── */
.login-remember { margin-bottom: 1.6rem !important; }
.login-remember .form-check { display: flex; align-items: center; gap: .1rem; min-height: auto; }
.login-remember .form-check-input {
    width: 1.1rem; height: 1.1rem; margin-top: 0; border: 1px solid #CBD5E5;
    border-radius: .4rem; cursor: pointer;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.login-remember .form-check-input:hover { border-color: #B7C3D6; }
.login-remember .form-check-input:checked { background-color: #5D8BFF; border-color: #5D8BFF; }
.login-remember .form-check-input:focus {
    border-color: #5D8BFF; box-shadow: 0 0 0 4px rgba(93, 139, 255, .14);
}
.login-remember .form-check-label {
    font-size: .875rem; color: #4A5568; cursor: pointer; padding-left: .1rem;
}

/* ── CTA principal: serve ao <button> do login E ao <a> do cadastro. ── */
.login-card .btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .012em;
    background: linear-gradient(180deg, #6E97FF 0%, #5D8BFF 100%);
    border-color: #5D8BFF;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 6px 16px -7px rgba(93, 139, 255, .5);
    transition: transform .18s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.login-card .btn-primary:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(16, 24, 40, .10), 0 12px 26px -8px rgba(93, 139, 255, .6);
}
.login-card .btn-primary:active { transform: translateY(0); }

/* ── Botões sociais: claramente SECUNDÁRIOS (peso menor que o CTA). ── */
.login-card .auth-divider {
    margin: 1.25rem 0; font-size: .74rem; font-weight: 600; color: #AAB4C3;
}
.login-card .auth-divider::before,
.login-card .auth-divider::after { border-color: #ECEFF4; }
.login-card .social-btn {
    min-height: 44px;
    font-size: .875rem; font-weight: 500;
    border-radius: 12px;
    border: 1px solid #ECEFF4;
    background: #ffffff;
    color: #566274;
    transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.login-card .social-btn:hover { background: #F7F9FC; border-color: #E1E7F0; }
.login-card .social-btn i { font-size: 1rem; }

/* ── Rodapé. ── */
.login-foot { text-align: center; margin: 1.5rem 0 0; }
.login-foot a {
    font-size: .9rem; color: #667085; text-decoration: none;
    transition: color .18s var(--ease);
}
.login-foot a span { color: #5D8BFF; font-weight: 600; }
.login-foot a:hover { color: #475467; }

.login-card .alert { border-radius: 12px; }

/* ── Foco por teclado sempre visível (acessibilidade). ── */
.login-forgot:focus-visible, .login-foot a:focus-visible,
.login-card .social-btn:focus-visible, .login-card .btn-primary:focus-visible {
    outline: 2px solid rgba(93, 139, 255, .5); outline-offset: 2px;
}

/* ── Responsivo: card centralizado no desktop/tablet; celular com respiro justo. ── */
@media (max-width: 575.98px) {
    .auth-card.login-card { padding: 2.15rem 1.55rem 1.75rem; border-radius: 20px; }
    .login-head { margin-bottom: 1.85rem; }
    .login-title { font-size: 1.3rem; }
    .login-logo { width: 50px; height: 50px; }
    .auth-brand.login-brand { font-size: 1.62rem; }
}

/* ── Menos movimento para quem prefere. ── */
@media (prefers-reduced-motion: reduce) {
    .login-card .form-control,
    .login-card .btn-primary,
    .login-card .social-btn,
    .login-remember .form-check-input,
    .login-forgot, .login-foot a { transition: none; }
    .login-card .btn-primary:hover { transform: none; }
}