/* ==========================================================================
   Klashify Account: LOGIN, REGISTER, LOST PASSWORD, NEW PASSWORD cards
   Everything for these cards is in this one file (loads last, so it wins).
   Theme styles are overridden on purpose with !important.
   ========================================================================== */

/* ---------- 1. Grey area around the card ----------
   Colours, corners, shadows and speeds are in tokens.css (shared with My account). */
.kl-auth-bg{
	background:var(--kl-backdrop)!important;
	display:block;width:100%;box-sizing:border-box;
	padding:64px 16px;
}

/* ---------- 2. Card ---------- */
html body .kl-auth{
	background:var(--kl-surface)!important;color:var(--kl-text);
	width:100%!important;max-width:440px!important;margin:0 auto!important;float:none!important;
	padding:40px 40px 36px;
	border:1px solid var(--kl-divider);border-top:4px solid var(--kl-ink);
	border-radius:var(--kl-radius-card);
	box-shadow:var(--kl-shadow-card);
	font-size:16px;line-height:1.5;
	animation:kl-card-in var(--kl-dur-enter) var(--kl-ease-out) both;
}
@keyframes kl-card-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes kl-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* card content slides up a little, one after another (50 ms apart, like the booking services list) */
html body .kl-auth form > :is(.kl-field,.kl-row),
html body .kl-auth form > .kl-btn,
html body .kl-auth .kl-foot{animation:kl-rise 360ms var(--kl-ease-out) both;}
html body .kl-auth form > :is(.kl-field,.kl-row):nth-of-type(1){animation-delay:50ms;}
html body .kl-auth form > :is(.kl-field,.kl-row):nth-of-type(2){animation-delay:100ms;}
html body .kl-auth form > :is(.kl-field,.kl-row):nth-of-type(n+3),
html body .kl-auth form > .kl-btn,
html body .kl-auth .kl-foot{animation-delay:150ms;}

/* ---------- 3. Heading ---------- */
html body .kl-auth .kl-eyebrow{font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--kl-muted)!important;margin:0 0 8px!important;text-align:center;line-height:1.4;}
html body .kl-auth .kl-title{font-size:30px!important;font-weight:700!important;letter-spacing:-.01em!important;text-transform:uppercase!important;line-height:1.1!important;margin:0 0 32px!important;color:var(--kl-ink)!important;text-align:center;text-wrap:balance;}
html body .kl-auth .kl-note{font-size:15px!important;color:var(--kl-muted)!important;line-height:1.6;margin:-16px 0 24px!important;text-align:center;}
html body .kl-auth form .kl-note{margin:0 0 20px!important;text-align:left;}
html body .kl-auth form{margin:0!important;padding:0!important;border:0!important;background:none!important;}

/* ---------- 4. Fields ---------- */
html body .kl-auth .kl-field{margin:0 0 20px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;}
html body .kl-auth .kl-field label{display:block;font-size:14px!important;font-weight:700!important;color:var(--kl-ink)!important;margin:0 0 8px!important;line-height:1.4;text-transform:none!important;letter-spacing:0!important;}
html body .kl-auth .kl-input-wrap{position:relative;}
html body .kl-auth input.kl-input{
	display:block;width:100%!important;height:48px!important;min-height:0!important;margin:0!important;
	padding:0 14px!important;
	font-size:16px!important;            /* 16px stops iPhone zooming in */
	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-auth .kl-field-password input.kl-input{padding-right:52px!important;}
html body .kl-auth input.kl-input::placeholder{color:#767676!important;opacity:1;}
@media (hover:hover){
	html body .kl-auth input.kl-input:hover{border-color:var(--kl-ink)!important;}
}
html body .kl-auth input.kl-input:focus{background: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;}

/* helper text and error under a field */
html body .kl-auth .kl-hint{font-size:13px!important;color:var(--kl-muted)!important;line-height:1.5;margin:6px 0 0!important;}
html body .kl-auth .kl-field-error{display:flex;align-items:flex-start;gap:6px;font-size:13px!important;font-weight:700!important;color:var(--kl-error)!important;line-height:1.5;margin:6px 0 0!important;animation:kl-msg-in var(--kl-dur-msg) ease-out both;}
html body .kl-auth .kl-field-error[hidden]{display:none!important;}
html body .kl-auth .kl-field.is-invalid .kl-hint{display:none;}
html body .kl-auth .kl-field.is-invalid input.kl-input{border-color:var(--kl-error)!important;background:var(--kl-surface)!important;}
html body .kl-auth .kl-field.is-invalid input.kl-input:focus{box-shadow:0 0 0 1px var(--kl-error),0 0 0 4px rgba(180,35,24,.14)!important;}
@keyframes kl-msg-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* icons (inline SVG, one stroke style) */
html body .kl-auth .kl-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}

/* show / hide password button: 44x44 tap area inside the field */
html body .kl-auth .kl-toggle-pass{
	position:absolute;top:2px;right:2px;width:44px!important;height:44px!important;min-height:0!important;
	display:flex!important;align-items:center;justify-content:center;
	padding:0!important;margin:0!important;border:0!important;border-radius:calc(var(--kl-radius-control) - 2px)!important;
	background:transparent!important;color:var(--kl-muted)!important;box-shadow:none!important;cursor:pointer;
	transition:color var(--kl-dur-state) ease,background-color var(--kl-dur-state) ease,transform 100ms ease;
}
html body .kl-auth .kl-toggle-pass:active{transform:scale(.94);}
html body .kl-auth .kl-toggle-pass .kl-icon{width:20px;height:20px;margin:0;}
@media (hover:hover){ html body .kl-auth .kl-toggle-pass:hover{color:var(--kl-ink)!important;background:rgba(0,0,0,.05)!important;} }
html body .kl-auth .kl-toggle-pass .kl-icon-hide{display:none;}
html body .kl-auth .kl-toggle-pass[aria-pressed="true"] .kl-icon-show{display:none;}
html body .kl-auth .kl-toggle-pass[aria-pressed="true"] .kl-icon-hide{display:block;}

/* ---------- 5. Remember me + Forgot password row ---------- */
html body .kl-auth .kl-row{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:-4px 0 0!important;}
html body .kl-auth .kl-check{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px!important;font-weight:400!important;color:var(--kl-text)!important;margin:0!important;cursor:pointer;}
/* drawn checkbox: same as the booking system, the tick draws itself from left to right */
html body .kl-auth input[type=checkbox]{
	-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!important;padding:0;
	background:var(--kl-surface);border:2px solid var(--kl-field-border);border-radius:6px;box-shadow:none;outline:0;cursor:pointer;
	transition:background-color .45s ease,border-color .45s ease;-webkit-tap-highlight-color:transparent;
}
html body .kl-auth input[type=checkbox]::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-auth input[type=checkbox]:checked{background-color:var(--kl-ink);border-color:var(--kl-ink);}
html body .kl-auth input[type=checkbox]:checked::before{clip-path:inset(0 0 0 0);transition:clip-path .6s cubic-bezier(.5,.1,.3,1) .12s;}
@media (hover:hover){ html body .kl-auth .kl-check:hover input[type=checkbox]:not(:checked){border-color:var(--kl-ink);} }
html body .kl-auth .kl-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px!important;color:var(--kl-ink)!important;text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1px;}
@media (hover:hover){ html body .kl-auth .kl-link:hover{text-decoration-thickness:2px;} }

/* ---------- 6. Buttons ---------- */
html body .kl-auth .kl-btn{
	position:relative;display:flex!important;align-items:center;justify-content:center;gap:10px;
	width:100%!important;min-height:52px;height:auto!important;margin:20px 0 0!important;padding:14px 24px!important;
	background:var(--kl-ink)!important;color:#fff!important;
	border:1px solid var(--kl-ink)!important;border-radius:var(--kl-radius-control)!important;
	font-size:13px!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important;line-height:1.4!important;
	text-align:center;text-decoration:none!important;box-shadow:none!important;cursor:pointer;
	-webkit-tap-highlight-color:transparent;touch-action:manipulation;
	transition:background-color var(--kl-dur-state) ease,color var(--kl-dur-state) ease,border-color var(--kl-dur-state) ease,box-shadow var(--kl-dur-state) ease,transform var(--kl-dur-press) ease;
}
/* hover: lifts 1 px with a soft shadow; press: shrinks a touch (same as the booking buttons) */
@media (hover:hover){ html body .kl-auth .kl-btn:hover{background:var(--kl-ink)!important;border-color:var(--kl-ink)!important;color:#fff!important;transform:translateY(-1px);box-shadow:var(--kl-shadow-lift)!important;} }
html body .kl-auth .kl-btn:active{transform:scale(.98);box-shadow:none!important;}

/* secondary button (Register / Log in under the line) */
html body .kl-auth .kl-btn.kl-btn-outline{background:var(--kl-surface)!important;color:var(--kl-ink)!important;border-color:var(--kl-ink)!important;margin:0!important;}
@media (hover:hover){ html body .kl-auth .kl-btn.kl-btn-outline:hover{background:var(--kl-tint)!important;color:var(--kl-ink)!important;border-color:var(--kl-ink)!important;box-shadow:var(--kl-shadow-lift-soft)!important;} }

/* loading: spinner + label stays, button can't be pressed twice */
html body .kl-auth .kl-btn.is-loading{cursor:progress;pointer-events:none;transform:none;box-shadow:none!important;}
html body .kl-auth .kl-btn.is-loading::before{content:"";width:15px;height:15px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kl-spin .7s linear infinite;}
@keyframes kl-spin{to{transform:rotate(360deg);}}

/* ---------- 7. Keyboard focus: clear ring on everything you can tab to ---------- */
html body .kl-auth :is(a,button,input[type=checkbox]):focus{outline:none;}
html body .kl-auth :is(a,button,input[type=checkbox]):focus-visible{outline:2px solid var(--kl-ink)!important;outline-offset:3px!important;}
html body .kl-auth .kl-toggle-pass:focus-visible{outline-offset:-2px!important;}

/* ---------- 8. Bottom: "Don't have an account?" / "Already have an account?" ---------- */
html body .kl-auth .kl-foot{text-align:center;font-size:14px!important;color:var(--kl-muted)!important;margin:28px 0 0!important;padding-top:24px;border-top:1px solid var(--kl-divider);}
html body .kl-auth .kl-foot .kl-foot-text{margin:0 0 12px!important;font-size:14px!important;color:var(--kl-muted)!important;}
html body .kl-auth .kl-foot > a:not(.kl-btn){display:inline-flex;align-items:center;min-height:44px;color:var(--kl-ink)!important;font-weight:700!important;text-decoration:underline!important;text-underline-offset:3px;}

/* ---------- 9. WooCommerce messages inside the card (wrong password, account exists ...) ---------- */
html body .kl-auth .woocommerce-notices-wrapper{margin:0;}
html body .kl-auth :is(.woocommerce-error,.woocommerce-message,.woocommerce-info),
html body .kl-auth .wc-block-components-notice-banner{
	display:block!important;list-style:none!important;margin:0 0 24px!important;padding:14px 16px!important;
	background:var(--kl-backdrop)!important;color:var(--kl-ink)!important;
	border:1px solid var(--kl-divider)!important;border-left:4px solid var(--kl-ink)!important;border-radius:var(--kl-radius-control)!important;
	font-size:14px!important;line-height:1.5;text-align:left!important;text-indent:0!important;gap:0!important;
	animation:kl-rise var(--kl-dur-msg) ease-out both;
}
html body .kl-auth :is(.woocommerce-error,.wc-block-components-notice-banner.is-error){background:var(--kl-error-bg)!important;border-color:#fecdca!important;border-left-color:var(--kl-error)!important;}
html body .kl-auth :is(.woocommerce-message,.wc-block-components-notice-banner.is-success){background:var(--kl-success-bg)!important;border-color:#abefc6!important;border-left-color:var(--kl-success)!important;}
html body .kl-auth :is(.woocommerce-error,.woocommerce-message,.woocommerce-info)::before,
html body .kl-auth :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) li::before{content:none!important;display:none!important;}
html body .kl-auth :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) li{display:block!important;margin:0!important;padding:0!important;list-style:none!important;color:var(--kl-ink)!important;text-align:left!important;}
html body .kl-auth :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) li + li{margin-top:6px!important;}
html body .kl-auth :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) a{color:var(--kl-ink)!important;font-weight:700;text-decoration:underline!important;}
html body .kl-auth .wc-block-components-notice-banner > svg{display:none!important;}
html body .kl-auth .wc-block-components-notice-banner__content{margin:0!important;padding:0!important;color:var(--kl-ink)!important;}
/* the message gets focus by script (so screen readers read it); it isn't clickable, so no ring */
html body .kl-auth :is(.woocommerce-error,.wc-block-components-notice-banner):is(:focus,:focus-visible){outline:none!important;}

/* privacy text WooCommerce adds under the register form */
html body .kl-auth .woocommerce-privacy-policy-text,html body .kl-auth .woocommerce-privacy-policy-text p{font-size:13px!important;color:var(--kl-muted)!important;line-height:1.6;margin:4px 0 0!important;}
html body .kl-auth .woocommerce-privacy-policy-text a{color:var(--kl-ink)!important;text-decoration:underline!important;}

/* ---------- 10. Small screens ---------- */
@media (max-width:480px){
	.kl-auth-bg{padding:32px 16px;}
	html body .kl-auth{padding:32px 20px 28px;}
	html body .kl-auth .kl-title{font-size:26px!important;margin-bottom:28px!important;}
}

/* ---------- 11. Reduced motion: no movement, changes still visible ---------- */
@media (prefers-reduced-motion:reduce){
	html body .kl-auth,html body .kl-auth *,html body .kl-auth *::before,html body .kl-auth *::after{animation:none!important;transition:none!important;}
	html body .kl-auth .kl-btn:hover,html body .kl-auth .kl-btn:active,html body .kl-auth .kl-toggle-pass:active{transform:none!important;}
	html body .kl-auth .kl-btn.is-loading::before{border-right-color:currentColor;opacity:.6;}
}

/* ---------- 12. Computer (mouse, wide screen): smaller, tighter sizes ----------
   The sizes above are for phones (big tap areas, 16px text so iPhone doesn't zoom).
   With a mouse on a wide screen these smaller sizes are used instead. */
@media (min-width:769px) and (hover:hover) and (pointer:fine){
	html body .kl-auth{max-width:400px!important;padding:32px 32px 28px;}
	.kl-auth-bg{padding:56px 16px;}
	html body .kl-auth .kl-eyebrow{font-size:11px!important;margin-bottom:6px!important;}
	html body .kl-auth .kl-title{font-size:24px!important;margin-bottom:24px!important;}
	html body .kl-auth .kl-note{font-size:14px!important;}

	html body .kl-auth .kl-field{margin-bottom:16px!important;}
	html body .kl-auth .kl-field label{font-size:13px!important;margin-bottom:6px!important;}
	html body .kl-auth input.kl-input{height:40px!important;font-size:14px!important;padding:0 12px!important;}
	html body .kl-auth .kl-field-password input.kl-input{padding-right:42px!important;}
	html body .kl-auth .kl-toggle-pass{width:36px!important;height:36px!important;}
	html body .kl-auth .kl-toggle-pass .kl-icon{width:18px;height:18px;}
	html body .kl-auth :is(.kl-hint,.kl-field-error){font-size:12px!important;margin-top:5px!important;}

	html body .kl-auth .kl-row{margin-top:-2px!important;}
	html body .kl-auth .kl-check{min-height:32px;gap:8px;font-size:13px!important;}
	html body .kl-auth input[type=checkbox]{flex-basis:18px;width:18px!important;min-width:18px;height:18px!important;border-radius:5px;}
	html body .kl-auth .kl-link{min-height:32px;font-size:13px!important;}

	html body .kl-auth .kl-btn{min-height:44px;padding:11px 20px!important;font-size:12px!important;letter-spacing:.14em!important;margin-top:16px!important;}
	html body .kl-auth .kl-btn.kl-btn-outline{margin-top:0!important;}
	html body .kl-auth .kl-foot{margin-top:22px!important;padding-top:18px;font-size:13px!important;}
	html body .kl-auth .kl-foot .kl-foot-text{font-size:13px!important;margin-bottom:10px!important;}

	html body .kl-auth :is(.woocommerce-error,.woocommerce-message,.woocommerce-info),
	html body .kl-auth .wc-block-components-notice-banner{font-size:13px!important;padding:12px 14px!important;margin-bottom:20px!important;}
}