/* WooCommerce's own show/hide-password button (woocommerce.js core) ships
   with no positioning CSS in this theme, so it was falling back to a plain
   unstyled button below the field. This turns it into an eye icon overlaid
   inside the field instead, on both mobile and desktop. */
.password-input {
	position: relative;
	display: block;
}
.password-input input[type="password"],
.password-input input[type="text"] {
	padding-right: 42px;
}
/* Suppress the browser's own native reveal/clear icons (Chromium Edge
   inherits ::-ms-reveal from legacy Edge/IE) so it doesn't double up with
   the custom eye icon below. */
.password-input input[type="password"]::-ms-reveal,
.password-input input[type="password"]::-ms-clear {
	display: none;
}
.show-password-input {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent center/20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	border: 0;
	cursor: pointer;
}
.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a18.5 18.5 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.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* The login form's "Remember me" checkbox and "Lost your password?" link
   are floated left/right by the parent theme (woocommerce.css) with no
   clearfix on the form, so the form collapses around them. On desktop the
   second column masks this, but on mobile -- where .u-column2 is hidden
   below and our own "Don't have an account? Register" link sits right
   after this form -- the collapse pulled all of it into one overlapping
   jumble. */
form.woocommerce-form-login::after {
	content: '';
	display: table;
	clear: both;
}

@media (max-width: 767px) {
	form.woocommerce-form-login .woocommerce-form__label-for-checkbox,
	form.woocommerce-form-login .woocommerce-LostPassword {
		float: none;
		display: block;
		text-align: left;
	}
	form.woocommerce-form-login .woocommerce-form__label-for-checkbox {
		margin-top: 12px;
	}
	form.woocommerce-form-login .woocommerce-LostPassword {
		margin-top: 10px;
	}

	#customer_login.col2-set .u-column2 {
		display: none;
	}
	#customer_login.col2-set.show-register .u-column1 {
		display: none;
	}
	#customer_login.col2-set.show-register .u-column2 {
		display: block;
	}
	.freshio-account-toggle {
		display: block;
		text-align: center;
		margin: 16px 0 30px;
		font-size: 14px;
	}
}
@media (min-width: 768px) {
	.freshio-account-toggle {
		display: none;
	}
}