/* === Remove browser's default eye/reveal icons === */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

input[type="password"]::-webkit-clear-button,
input[type="password"]::-webkit-inner-spin-button {
    display: none !important;
}

/* Some browsers (Safari) use decoration container — hide it too */
input[type="password"]::-webkit-textfield-decoration-container {
    display: none !important;
}

/* === Password wrapper for custom icon === */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 40px; /* space for the icon */
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* === Custom eye icon styling === */
.password-wrapper .toggle-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

/* Hover & Active Effects */
.password-wrapper .toggle-eye:hover {
    color: #495057;
}

.password-wrapper .toggle-eye.active {
    color: #007bff;
}

/* === Remove browser's default eye/reveal icons === */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

input[type="password"]::-webkit-clear-button,
input[type="password"]::-webkit-inner-spin-button {
    display: none !important;
}

/* Safari-specific fix */
input[type="password"]::-webkit-textfield-decoration-container {
    display: none !important;
}

/* Optional: make your custom eye icon nicer */
.input-group-text span.bi {
    cursor: pointer;
    font-size: 1.1rem;
}