/* ============================================================
   MHDCommerce — Recuperação de senha (EsqueciSenha / RedefinirSenha)
   Arquivo: wwwroot/css/recuperar-senha.css
   Carregado só nessas duas views (@section Styles).
   Usa os tokens do site.css (--brand, --border, --radius-*...).
   ============================================================ */

.rs-pagina {
    display: flex; justify-content: center;
    padding: 48px 16px 64px;
}

.rs-card {
    width: 100%; max-width: 440px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 32px 28px 28px;
    box-shadow: 0 12px 40px rgba(0,0,0,.06);
    display: flex; flex-direction: column;
}

.rs-ico {
    width: 56px; height: 56px; border-radius: var(--radius-md);
    background: var(--brand-light); display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin-bottom: 18px;
}
.rs-ico.ok    { background: var(--brand-light); }
.rs-ico.aviso { background: var(--accent-light); }

.rs-titulo { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 8px; }
.rs-sub    { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-bottom: 22px; }
.rs-sub b  { color: var(--text); }

/* Formulário */
.rs-form  { display: flex; flex-direction: column; }
.rs-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.rs-input {
    width: 100%; height: 48px; padding: 0 14px;
    border: 1.5px solid var(--border); border-radius: var(--radius-md);
    font-family: 'DM Sans', sans-serif; font-size: 16px; /* 16px: sem zoom no iOS ao focar */
    color: var(--text); background: var(--white); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.rs-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.rs-input.erro  { border-color: var(--red); }

.rs-senha { position: relative; }
.rs-senha .rs-input { padding-right: 48px; }
.rs-olho {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 38px; height: 38px; border: none; background: none; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 16px; opacity: .45;
}
.rs-olho:hover, .rs-olho.ativo { opacity: 1; background: var(--bg); }

.rs-ajuda { font-size: 12px; color: var(--muted); margin: 6px 0 14px; min-height: 16px; }
.rs-ajuda.ok  { color: var(--brand); }
.rs-ajuda.nao { color: var(--red); }

.rs-erro {
    display: flex; gap: 6px; align-items: flex-start;
    background: #fdecec; color: var(--red); border: 1px solid #f5c6c6;
    border-radius: var(--radius-sm); padding: 10px 12px;
    font-size: 13px; font-weight: 500; margin: 12px 0 2px;
}

/* Botões */
.rs-btn {
    width: 100%; height: 52px; margin-top: 18px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand); color: #fff; border: none; border-radius: var(--radius-md);
    font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: background .15s;
}
.rs-btn:hover    { background: var(--brand-mid); }
.rs-btn:disabled { opacity: .7; cursor: progress; }

.rs-link {
    display: block; width: 100%; margin-top: 14px; padding: 8px;
    background: none; border: none; text-align: center; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
    color: var(--brand); text-decoration: none;
}
.rs-link:hover { text-decoration: underline; }

/* Dicas da tela "confira seu e-mail" */
.rs-dicas {
    list-style: none; background: var(--bg); border-radius: var(--radius-md);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.rs-dicas li { font-size: 13px; color: var(--text-2); line-height: 1.45; padding-left: 14px; position: relative; }
.rs-dicas li::before { content: '›'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

@media (max-width: 768px) {
    .rs-pagina { padding: 20px 16px 32px; }
    .rs-card   { padding: 26px 20px 22px; border-radius: var(--radius-lg); }
    .rs-titulo { font-size: 20px; }
}