/**
 * CSS para adicionar ícone no botão de mostrar senha do WooCommerce
 * Mantém o botão original mas adiciona ícone funcionando
 */

/* Corrigir o botão do WooCommerce - tornar visível e funcional */
.show-password-input,
button.show-password-input {
    background-color: transparent !important;
    border: 0 !important;
    color: #666 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-decoration: none !important;
    z-index: 10 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    outline: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    vertical-align: middle !important;
}

/* Hover e focus */
.show-password-input:hover {
    color: #001E51 !important;
    background: rgba(34, 179, 27, 0.1) !important;
}

.show-password-input:hover::after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23001E51" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>') !important;
}

.show-password-input.display-password:hover::after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23001E51" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>') !important;
}

.show-password-input:focus {
    color: #001E51 !important;
    box-shadow: 0 0 0 2px rgba(34, 179, 27, 0.2) !important;
    outline: none !important;
}

/* Adicionar ícone de olho via CSS - SVG inline para melhor compatibilidade */
.show-password-input::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 3px !important;
}

/* Ícone quando senha está visível - olho fechado */
.show-password-input.display-password::after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>') !important;
}

/* Desabilitar qualquer ícone original problemático */
.show-password-input::before {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Garantir posição relativa do container pai */
.password-input {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
}

/* Garantir espaço no campo de senha para o botão */
.password-input input[type="password"],
.password-input input[type="text"] {
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

/* Corrigir posicionamento em formulários WooCommerce */
.woocommerce .password-input,
.woocommerce-page .password-input {
    position: relative !important;
}

.woocommerce .password-input input[type="password"],
.woocommerce .password-input input[type="text"],
.woocommerce-page .password-input input[type="password"],
.woocommerce-page .password-input input[type="text"] {
    padding-right: 40px !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .show-password-input {
        right: 10px !important;
        width: 28px !important;
        height: 28px !important;
    }
    
    .show-password-input::after {
        font-size: 14px !important;
        width: 18px !important;
        height: 18px !important;
    }
}