/* ============================================
   Form Input Icons — LearnPress + WooCommerce
   Icons as background-image on input fields
   ============================================ */

/* --- Shared base for all targeted inputs --- */
.learn-press-form input[type='email'],
.learn-press-form input#username,
.learn-press-form input#account_email,
.learn-press-form input#account_display_name,
.learn-press-form input#reg_email,
.learn-press-form input#reg_username,
.learn-press-form input#billing_phone,
.learn-press-form input[name='username'],
.learn-press-form input[type='password'],
.learn-press-form input[type='tel'],
.learn-press-form #password,
.learn-press-form #password_1,
.learn-press-form #password_2,
.learn-press-form #reg_password,
.learn-press-form #reg_password2,
.learn-press-form #account_password,
.learn-press-form #pass0,
.learn-press-form #pass1,
.learn-press-form #pass2,
.woocommerce-form input[type='email'],
.woocommerce-form input#username,
.woocommerce-form input#user_login,
.woocommerce-form input[type='password'],
.woocommerce-form #password,
.woocommerce-form #password_1,
.woocommerce-form #password_2,
.woocommerce-form #reg_password,
.woocommerce-form #reg_password2,
.woocommerce-form #account_password,
.woocommerce-checkout input[type='password'],
.woocommerce-checkout #account_password,
.lost_reset_password input#user_login,
.lost_reset_password input[type='password'],
.lost_reset_password #password,
.lost_reset_password #password_1,
.lost_reset_password #password_2,
.lost_reset_password #account_password,
.lost_reset_password #reg_password,
.lost_reset_password #reg_password2,
.wpcf7 input[type='email'],
.wpcf7 input[type='text'],
.wpcf7 input[type='number'],
.wpcf7 input[type='tel'],
.wpcf7 textarea {
  background-repeat: no-repeat !important;
  background-position: left 1.6rem center !important;
  background-size: 2rem !important;
  padding-left: 4.8rem !important;
}

/* --- Email icon --- */
.learn-press-form input[type='email'],
.learn-press-form input#reg_email,
.woocommerce-form input[type='email'],
.lost_reset_password input[type='email'],
.wpcf7 input[type='email'] {
  background-image: url('../img/email.svg') !important;
}

/* --- Username / user icon --- */
.learn-press-form input#username,
.learn-press-form input#account_display_name,
.learn-press-form input#reg_username,
.learn-press-form input[name='username'],
.woocommerce-form input#username,
.woocommerce-form input#user_login,
.lost_reset_password input#user_login,
.wpcf7 input[name*='name'] {
  background-image: url('../img/user.svg') !important;
}

/* --- Password / lock icon --- */
.learn-press-form input[type='password'],
.learn-press-form #password,
.learn-press-form #password_1,
.learn-press-form #password_2,
.learn-press-form #reg_password,
.learn-press-form #reg_password2,
.learn-press-form #account_password,
.woocommerce-form input[type='password'],
.woocommerce-form #password,
.woocommerce-form #password_1,
.woocommerce-form #password_2,
.woocommerce-form #reg_password,
.woocommerce-form #reg_password2,
.woocommerce-form #account_password,
.learn-press-form #pass0,
.learn-press-form #pass1,
.learn-press-form #pass2,
.woocommerce-checkout input[type='password'],
.woocommerce-checkout #account_password,
.lost_reset_password input[type='password'],
.lost_reset_password #password,
.lost_reset_password #password_1,
.lost_reset_password #password_2,
.lost_reset_password #account_password,
.lost_reset_password #reg_password,
.lost_reset_password #reg_password2 {
  padding-right: 4.8rem !important; /* Space for the toggle button */
  background-image: url('../img/lock.svg') !important;
}

/* Phone icon */
.wpcf7 input[type='tel'],
.learn-press-form input[type='tel'] {
  background-image: url('../img/phone.svg') !important;
}

/* Textarea */
.wpcf7 textarea {
  background-image: url('../img/message.svg') !important;
  background-position: left 1.6rem top 1.6rem !important;
}

/* --- Password toggle button (WooCommerce native .show-password-input) --- */
/* WooCommerce woocommerce.js appends <button class="show-password-input"> to
   all <span class="password-input"> wrappers globally (step 3 of the script).
   LearnPress templates now use the same wrapper, so the button appears there too. */
.show-password-input {
  width: 2.4rem;
  height: 2.4rem;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.show-password-input:hover {
  opacity: 1;
  background-color: transparent !important;
}