/*
 * Anmeldeformular: Passwort-Schalter und "Passwort vergessen"
 *
 * Zwei Fehler, beide rein visuell, beide auf /mein-konto/ und im Checkout:
 *
 * 1. WooCommerce hängt hinter das Passwortfeld einen Umschalter
 *    (span.show-password-input) und gestaltet ihn in seinem eigenen
 *    Stylesheet. Enfold lädt WooCommerce-Standardstyles nicht, also blieb ein
 *    16x6 Pixel großer, völlig leerer Kasten übrig: kein Icon, kein Text, nur
 *    ein aria-label. Er wird hier als richtiger Schalter im Feld gestaltet,
 *    statt ihn zu entfernen — die Funktion ist sinnvoll, nur unsichtbar.
 *
 * 2. Der Anmelden-Button schwebt links (float). Das nachfolgende
 *    "Passwort vergessen?" rutscht dadurch neben ihn nach oben und wirkt
 *    verschoben, obwohl es im Markup danach steht. Ein clear stellt die
 *    Reihenfolge wieder her.
 *
 * Das Auge ist als data-URI eingebettet, damit es weder von der
 * WooCommerce-Iconschrift noch von FontAwesome abhängt.
 */

.woocommerce form .password-input,
.woocommerce-page form .password-input {
  position: relative;
  display: block;
}

.woocommerce form .password-input .input-text,
.woocommerce-page form .password-input .input-text {
  padding-right: 44px;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.woocommerce form .show-password-input:hover,
.woocommerce-page form .show-password-input:hover {
  opacity: 0.8;
}

/* Zustand "Passwort sichtbar": durchgestrichenes Auge */
.woocommerce form .show-password-input.display-password,
.woocommerce-page form .show-password-input.display-password {
  opacity: 1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath 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.19'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E");
}

/*
 * Der Anmelden-Button schwebt links und ragt dadurch aus seiner eigenen Zeile
 * heraus (gemessen: Button 539-581, Zeile 492-542). Deshalb rutschte das
 * folgende "Passwort vergessen?" nach oben und lag zuletzt sogar über dem
 * Button. clear allein genügt nicht — die Zeile muss den Float einschließen.
 */
.woocommerce form.woocommerce-form-login p:has(> button),
.woocommerce-page form.woocommerce-form-login p:has(> button) {
  display: flow-root;
}

/* Zusätzliche Absicherung, falls :has() nicht greift. */
.woocommerce form.woocommerce-form-login .lost_password,
.woocommerce form.woocommerce-form-login .woocommerce-LostPassword,
.woocommerce-page form.woocommerce-form-login .lost_password,
.woocommerce-page form.woocommerce-form-login .woocommerce-LostPassword {
  clear: both;
  display: block;
  margin: 16px 0 0;
}