/* Checklist de requisitos de senha (checkout, cadastro, reset, perfil).
   Cada <li data-rule="..."> ganha a classe .met via JS (portal-password-meter.js)
   quando o requisito e satisfeito. Fica escondido ate a pessoa comecar a
   digitar (classe .is-visible, tambem controlada pelo JS). */
.password-requirements {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .4rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}

.password-requirements.is-visible {
    max-height: 12rem;
    opacity: 1;
    margin-top: .65rem;
}

.password-requirements li {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 650;
    color: #8a94a6;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 999px;
    padding: .32rem .65rem .32rem .5rem;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.password-requirements li::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    font-size: .58rem;
    line-height: 1;
    color: transparent;
    transition: all .15s ease;
}

.password-requirements li.met {
    color: #198754;
    background: #eafaf1;
    border-color: #b7ecd0;
}

.password-requirements li.met::before {
    content: "✓";
    background: #198754;
    border-color: #198754;
    color: #fff;
}

/* Campo de Número + toggle "S/N" na mesma linha. O input encolhe (flex:1) pra
   dar destaque ao toggle, que agora e um chip com caixinha de checkbox VISIVEL
   + texto "S/N" — deixa obvio que da pra clicar. */
.number-with-flag {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.number-with-flag input[type="text"],
.number-with-flag .input-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

/* Especificidade reforcada (.number-with-flag .sn-flag, 2 classes) de proposito:
   o checkout tem uma regra ".form-group label{display:block}" que, com o
   .sn-flag sozinho (1 classe), vencia por especificidade e quebrava o layout
   flex (label virava display:block e o ::before, sem contexto flex/inline-block,
   ignorava width/height — sumia a caixinha do checkbox). */
.number-with-flag .sn-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex-shrink: 0;
    padding: 0 .7rem;
    border-radius: 10px;
    border: 1.5px solid #d7e0ea;
    background: #f8fafc;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    margin: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* caixinha do checkbox desenhada com pseudo-elemento (o <input> real fica
   escondido mas funcional) — assim nao preciso mudar o HTML das 4 telas */
.number-with-flag .sn-flag::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid #cbd5e1;
    background: #fff no-repeat center;
    background-size: 11px 11px;
    transition: background-color .15s ease, border-color .15s ease;
}

.number-with-flag .sn-flag:hover {
    border-color: #f2b8bc;
    color: #0f172a;
}

.number-with-flag .sn-flag:hover::before {
    border-color: var(--cbic-red, #ee404a);
}

.number-with-flag .sn-flag input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.number-with-flag .sn-flag:has(input:checked) {
    background: #fff1f2;
    border-color: var(--cbic-red, #ee404a);
    color: var(--cbic-red, #ee404a);
    box-shadow: 0 0 0 3px rgba(238, 64, 74, .12);
}

.number-with-flag .sn-flag:has(input:checked)::before {
    background-color: var(--cbic-red, #ee404a);
    border-color: var(--cbic-red, #ee404a);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}

/* foco por teclado — acessibilidade */
.number-with-flag .sn-flag:has(input:focus-visible) {
    border-color: var(--cbic-red, #ee404a);
    box-shadow: 0 0 0 3px rgba(238, 64, 74, .2);
}