/* Password Toggle Styles for WooCommerce My Account */

.password-field-wrapper {
    position: relative;
}

.password-field-wrapper input[type="password"],
.password-field-wrapper input[type="text"] {
    width: 100%;
    padding-right: 45px !important;
}

/* Password strength indicator - ensure it doesn't affect button position */
.password-field-wrapper .woocommerce-password-strength,
.password-field-wrapper .woocommerce-password-hint {
    margin-top: 5px;
    font-size: 0.875em;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: color 0.3s ease;
    z-index: 10;
    height: 48px;
    width: 40px;
    pointer-events: auto;
}

/* Ensure button stays aligned with input field */
.password-field-wrapper input[type="password"] ~ .password-toggle-btn,
.password-field-wrapper input[type="text"] ~ .password-toggle-btn {
    top: 0;
}

.password-toggle-btn:hover {
    color: #333;
}

.password-toggle-btn .eye-icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* Show/hide eye icons based on password visibility */
.password-toggle-btn .eye-closed {
    display: none;
}

.password-toggle-btn.password-visible .eye-open {
    display: none;
}

.password-toggle-btn.password-visible .eye-closed {
    display: block;
}

.woocommerce form.login .form-row label,
.woocommerce form.register .form-row label {
    font-size: 100%;
}

/* Ensure proper spacing on mobile */
@media (max-width: 768px) {

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

    .password-toggle-btn {
        right: 8px;
        width: 35px;
    }
}