/* Estado inicial: input é password, mostra olho "abrir" e esconde "fechar" */
[data-password] [data-password-toggle] .show {
    display: inline-block;
}

[data-password] [data-password-toggle] .hide {
    display: none;
}

/* Quando o botão recebe .show-password (senha visível), inverte */
[data-password] [data-password-toggle].show-password .show {
    display: none;
}

[data-password] [data-password-toggle].show-password .hide {
    display: inline-block;
}

/* Evita pulo de layout se o ícone demorar a carregar */
[data-password] [data-password-toggle] .show,
[data-password] [data-password-toggle] .hide {
    width: 1.25em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
}

.form-icon-container {
    position: relative;
}

.form-icon-container .form-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .8;
    font-size: 1rem;
    /* ajuste conforme o ícone */
}

.select-with-icon {
    padding-left: 2.25rem;
}

.visual-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(255, 255, 255, .85);
    color: #0f172a;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    border: 1px solid rgba(15, 23, 42, .08)
}