/* tarine-account.css: Create account first on the My account page, and the switch links under each form. */
.woocommerce-account #customer_login > .col-12:nth-child(2) {
	order: -1;
}

.tarine-switch-form {
	margin-top: 16px;
	color: var(--raakh);
	font-size: 14px;
}

.tarine-switch-form a {
	color: var(--mitti);
	text-decoration: underline;
}

.woocommerce-account .tarine-switch-form {
	display: none;
}

/* Desktop only (mobile header starts at 1280px): hide the extra left pane in the account panel. */
@media (min-width: 1281px) {
	.anarkali-header-mobile-sidebar {
		display: none;
	}
}

/* Show password button: a clean eye icon inside the field, everywhere a password field appears. */
.password-input {
	position: relative;
	display: block;
}

.password-input input[type="password"],
.password-input input[type="text"] {
	padding-right: 48px;
}

.password-input .show-password-input {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 48px;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

.password-input .show-password-input::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	background-color: var(--raakh);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.password-input .show-password-input.display-password::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a19.8 19.8 0 0 1 5.06-5.94M9.9 4.24A10.9 10.9 0 0 1 12 4c7 0 11 7 11 7a19.7 19.7 0 0 1-3.17 4.19M14.12 14.12a3 3 0 1 1-4.24-4.24M1 1l22 22'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a19.8 19.8 0 0 1 5.06-5.94M9.9 4.24A10.9 10.9 0 0 1 12 4c7 0 11 7 11 7a19.7 19.7 0 0 1-3.17 4.19M14.12 14.12a3 3 0 1 1-4.24-4.24M1 1l22 22'/%3E%3C/svg%3E") center / contain no-repeat;
}

.password-input .show-password-input:hover::before,
.password-input .show-password-input:focus-visible::before {
	background-color: var(--mitti);
}

.password-input .show-password-input:focus-visible {
	outline: 2px solid var(--patta);
	outline-offset: -2px;
}