/* ---------- My account fields (account details, addresses): same as the login card ---------- */
html body .kl-acc .kl-acc-content :is(input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=url],input[type=search],select):where(:not(.kb-book *)){
	display:block;width:100%!important;height:48px!important;min-height:0!important;margin:0!important;padding:0 14px!important;
	font-size:16px!important;color:var(--kl-ink)!important;background:var(--kl-field-bg)!important;
	border:1px solid var(--kl-field-border)!important;border-radius:var(--kl-radius-control)!important;box-shadow:none!important;outline:none!important;
	transition:border-color var(--kl-dur-state) ease,box-shadow var(--kl-dur-state) ease,background-color var(--kl-dur-state) ease;
}
html body .kl-acc .kl-acc-content textarea:where(:not(.kb-book *)){display:block;width:100%!important;height:auto!important;min-height:120px;margin:0!important;padding:12px 14px!important;font-size:16px!important;color:var(--kl-ink)!important;background:var(--kl-field-bg)!important;border:1px solid var(--kl-field-border)!important;border-radius:var(--kl-radius-control)!important;box-shadow:none!important;outline:none!important;transition:border-color var(--kl-dur-state) ease,box-shadow var(--kl-dur-state) ease;}
/* dropdowns: own arrow so every browser looks the same */
html body .kl-acc .kl-acc-content select:where(:not(.kb-book *)){-webkit-appearance:none;appearance:none;padding-right:40px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:18px!important;cursor:pointer;}
@media (hover:hover){ html body .kl-acc .kl-acc-content :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea):hover:where(:not(.kb-book *)){border-color:var(--kl-ink)!important;} }
html body .kl-acc .kl-acc-content :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea):focus:where(:not(.kb-book *)){background-color:var(--kl-surface)!important;border-color:var(--kl-ink)!important;box-shadow:0 0 0 1px var(--kl-ink),0 0 0 4px rgba(0,0,0,.12)!important;}
html body .kl-acc .kl-acc-content :is(input,textarea):where(:not(.kb-book *))::placeholder{color:#767676!important;opacity:1;}
/* WooCommerce marks wrong fields with .woocommerce-invalid */
html body .kl-acc .kl-acc-content .woocommerce-invalid :is(input,select,textarea):where(:not(.kb-book *)){border-color:var(--kl-error)!important;}

/* Select2 / SelectWoo country + state pickers WooCommerce uses on the address form */
html body .kl-acc .kl-acc-content .select2-container .select2-selection--single{height:48px!important;border:1px solid var(--kl-field-border)!important;border-radius:var(--kl-radius-control)!important;background:var(--kl-field-bg)!important;display:flex;align-items:center;}
html body .kl-acc .kl-acc-content .select2-container .select2-selection__rendered{line-height:46px!important;padding:0 40px 0 14px!important;font-size:16px!important;color:var(--kl-ink)!important;}
html body .kl-acc .kl-acc-content .select2-container .select2-selection__arrow{height:46px!important;right:8px!important;}
html body .kl-acc .kl-acc-content .select2-container--focus .select2-selection--single,
html body .kl-acc .kl-acc-content .select2-container--open .select2-selection--single{border-color:var(--kl-ink)!important;box-shadow:0 0 0 1px var(--kl-ink),0 0 0 4px rgba(0,0,0,.12)!important;}

/* checkboxes: the same drawn tick as the login card and the booking system */
html body .kl-acc .kl-acc-content input[type=checkbox]:where(:not(.kb-book *)){-webkit-appearance:none;appearance:none;position:relative;flex:0 0 20px;width:20px!important;min-width:20px;height:20px!important;min-height:0;margin:0 8px 0 0!important;padding:0;vertical-align:-4px;background:var(--kl-surface);border:2px solid var(--kl-field-border);border-radius:6px;box-shadow:none;cursor:pointer;transition:background-color .45s ease,border-color .45s ease;-webkit-tap-highlight-color:transparent;}
html body .kl-acc .kl-acc-content input[type=checkbox]:where(:not(.kb-book *))::before{content:"";position:absolute;inset:0;background:#fff;-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='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% 100% 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='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .1s ease;}
html body .kl-acc .kl-acc-content input[type=checkbox]:checked:where(:not(.kb-book *)){background-color:var(--kl-ink);border-color:var(--kl-ink);}
html body .kl-acc .kl-acc-content input[type=checkbox]:checked:where(:not(.kb-book *))::before{clip-path:inset(0 0 0 0);transition:clip-path .6s cubic-bezier(.5,.1,.3,1) .12s;}

/* WooCommerce's own show / hide password button (Account details > Password change):
   same look as the eye button on the login card: no box, grey eye inside the field, 44x44 tap area */
html body .kl-acc .kl-acc-content .password-input{position:relative!important;display:block!important;width:100%;}
html body .kl-acc .kl-acc-content .password-input input{padding-right:52px!important;}
html body .kl-acc .kl-acc-content button.show-password-input{
	position:absolute!important;top:2px!important;right:2px!important;left:auto!important;bottom:auto!important;
	display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;min-height:0!important;margin:0!important;padding:0!important;
	background:transparent!important;color:var(--kl-muted)!important;border:0!important;border-radius:calc(var(--kl-radius-control) - 2px)!important;box-shadow:none!important;
	font-size:0!important;line-height:0!important;cursor:pointer;transform:none;
	transition:color var(--kl-dur-state) ease,background-color var(--kl-dur-state) ease,transform 100ms ease;
}
@media (hover:hover){ html body .kl-acc .kl-acc-content button.show-password-input:hover{color:var(--kl-ink)!important;background:rgba(0,0,0,.05)!important;box-shadow:none!important;transform:none;} }
html body .kl-acc .kl-acc-content button.show-password-input:active{transform:scale(.94);}
html body .kl-acc .kl-acc-content button.show-password-input:focus-visible{outline:2px solid var(--kl-ink)!important;outline-offset:-2px!important;}
html body .kl-acc .kl-acc-content button.show-password-input::before{display:none!important;content:none!important;}
html body .kl-acc .kl-acc-content button.show-password-input::after{
	content:""!important;display:block!important;position:static!important;width:20px!important;height:20px!important;margin:0!important;
	font-family:inherit!important;background:currentColor!important;
	-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 100% 100% 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* password shown: crossed-out eye */
html body .kl-acc .kl-acc-content button.show-password-input.display-password::after{
	-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10.7 10.7 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-2.2 3.2M6.6 6.6C3.7 8.5 2 12 2 12s3.5 7 10 7c1.9 0 3.6-.6 5-1.4'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E") center / 100% 100% 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10.7 10.7 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-2.2 3.2M6.6 6.6C3.7 8.5 2 12 2 12s3.5 7 10 7c1.9 0 3.6-.6 5-1.4'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (min-width:769px) and (hover:hover) and (pointer:fine){
	html body .kl-acc .kl-acc-content .password-input input{padding-right:42px!important;}
	html body .kl-acc .kl-acc-content button.show-password-input{width:36px!important;height:36px!important;}
	html body .kl-acc .kl-acc-content button.show-password-input::after{width:18px!important;height:18px!important;}
}
