/**
 * Inloggen, registreren en wachtwoord vergeten/herstellen op mobiel:
 * invoervelden even groot als op de contactpagina (zoals .contactvorm__veld
 * en afrekenen-velden.css).
 *
 * Alleen geladen op Mijn account (inc/shop-mobiel.php).
 */

:root {
	--inlog-veld-ruimte: 0.7rem 0.9rem;   /* zoals .contactvorm__veld */
	--inlog-veld-hoogte: 3.2rem;          /* 51 px */
	--inlog-veld-tekst: 1rem;             /* 16 px: geen inzoomen op iOS */
	--inlog-oog-ruimte: 2.75rem;          /* plek voor het oogje bij het wachtwoord */
	--inlog-rij-ruimte: 1rem;
}

@media (max-width: 767px) {

	/* Zwaar genoeg om de regels van WooCommerce (0.5em) te overtreffen. */
	.woocommerce form.woocommerce-form-login .form-row input.input-text,
	.woocommerce form.woocommerce-form-register .form-row input.input-text,
	.woocommerce form.woocommerce-ResetPassword .form-row input.input-text {
		min-height: var(--inlog-veld-hoogte);
		padding: var(--inlog-veld-ruimte);
		font-size: var(--inlog-veld-tekst);
		line-height: 1.5;
	}

	/* Wachtwoord: rechts ruimte houden voor de knop "wachtwoord tonen". */
	.woocommerce form.woocommerce-form-login .form-row .password-input input.input-text,
	.woocommerce form.woocommerce-form-register .form-row .password-input input.input-text,
	.woocommerce form.woocommerce-ResetPassword .form-row .password-input input.input-text {
		padding-right: var(--inlog-oog-ruimte);
	}

	/* Het oogje verticaal in het midden van het hogere veld. */
	.woocommerce-form-login .password-input .show-password-input,
	.woocommerce-form-register .password-input .show-password-input,
	.woocommerce-ResetPassword .password-input .show-password-input {
		top: 50%;
		transform: translateY(-50%);
	}

	.woocommerce-form-login .form-row,
	.woocommerce-form-register .form-row,
	.woocommerce-ResetPassword .form-row {
		margin-bottom: var(--inlog-rij-ruimte);
	}

	/* Wachtwoord herstellen: nieuw wachtwoord en herhalen onder elkaar, volle breedte. */
	.woocommerce-ResetPassword .form-row-first,
	.woocommerce-ResetPassword .form-row-last {
		float: none;
		width: 100%;
	}
}