/* KabAuthModal — shared login/register modal. Composes theme .b-* primitives;
   colours/type/radius via tokens only. Loaded globally so the header login
   state works on every page. Mirrors booking-modal.css conventions. */

.kab-auth-overlay{
	position:fixed; inset:0; z-index:1100;
	display:flex; align-items:flex-start; justify-content:center;
	padding:max(24px, 6vh) 24px 24px;
	background:color-mix(in srgb, var(--ink) 55%, transparent);
	opacity:0; transition:opacity .2s ease;
}
.kab-auth-overlay.is-open{ opacity:1; }

.kab-auth-dialog{
	position:relative; display:flex; flex-direction:column;
	width:100%; max-width:460px; max-height:90vh; overflow:hidden;
	padding:0;                       /* override .b-card padding; sections pad themselves */
	background:var(--surface); border-radius:var(--radius);
	box-shadow:var(--shadow-pop, 0 30px 70px -20px rgba(12,18,26,.6));
	transform:translateY(-12px); transition:transform .22s ease;
}
.kab-auth-overlay.is-open .kab-auth-dialog{ transform:none; }
.kab-auth-dialog.is-busy{ opacity:.75; pointer-events:none; }

.kab-auth-head{
	display:flex; align-items:center; justify-content:space-between;
	gap:12px; padding:18px 20px 12px;
}
.kab-auth-title{
	font-family:var(--font-display); font-weight:var(--display-w);
	letter-spacing:var(--display-ls); font-size:1.2rem; line-height:1.15;
	color:var(--ink); margin:0;
}
.kab-auth-close{
	flex:0 0 auto; display:grid; place-items:center;
	width:34px; height:34px; border:0; border-radius:999px;
	background:transparent; color:var(--ink-soft); cursor:pointer;
	font-size:1.4rem; line-height:1;
	transition:background .15s ease, color .15s ease;
}
.kab-auth-close:hover{ background:var(--surface2); color:var(--ink); }

.kab-auth-tabs{
	display:flex; gap:0; padding:0 20px;
	border-bottom:1px solid var(--line);
}
.kab-auth-tab{
	flex:1 1 auto; padding:10px 8px 12px; border:0; background:transparent;
	font:inherit; font-weight:600; font-size:.92rem; color:var(--muted);
	cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
	transition:color .15s ease, border-color .15s ease;
}
.kab-auth-tab:hover{ color:var(--ink); }
.kab-auth-tab.is-active{ color:var(--accent); border-bottom-color:var(--accent); }

.kab-auth-body{ padding:18px 20px 22px; overflow-y:auto; }

.kab-auth-form{ display:flex; flex-direction:column; gap:14px; }

.kab-auth-remember{
	display:flex; align-items:center; gap:9px;
	font-size:.9rem; color:var(--ink-soft); cursor:pointer; user-select:none;
}
.kab-auth-remember input{ width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; }
.kab-auth-privacy{ align-items:flex-start; line-height:1.4; }
.kab-auth-privacy input{ margin-top:2px; }
.kab-auth-privacy-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.kab-auth-privacy-link:hover{ color:var(--ink); }

.kab-auth-submit{ width:100%; justify-content:center; margin-top:2px; }

.kab-auth-switch{
	border:0; background:transparent; font:inherit; font-size:.86rem;
	color:var(--accent); cursor:pointer; text-align:center; padding:2px;
	text-decoration:underline; text-underline-offset:2px;
}
.kab-auth-switch:hover{ color:var(--ink); }

.kab-auth-info{
	margin:0; font-size:.82rem; line-height:1.5; color:var(--muted);
	background:var(--surface2); padding:10px 12px; border-radius:var(--radius-sm);
}

.kab-auth-msg{
	margin:0 0 4px; font-size:.86rem; line-height:1.45;
	padding:10px 12px; border-radius:var(--radius-sm);
}
.kab-auth-msg--info{ background:var(--surface2); color:var(--ink-soft); }
.kab-auth-msg--success{ background:var(--ok-bg); color:var(--ok); }
.kab-auth-msg--error{ background:var(--no-bg); color:var(--no); }

/* Field-level validation (P4.31) — mark the specific input, not just a banner. */
.b-field--error .b-input{
	border-color:var(--no);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--no) 16%, transparent);
}
.b-field__err{
	font-size:.78rem; line-height:1.35; color:var(--no);
}

body.kab-auth-open{ overflow:hidden; }

@media (max-width:520px){
	.kab-auth-overlay{ padding:0; align-items:stretch; }
	.kab-auth-dialog{
		max-width:none; max-height:none; height:100%; border-radius:0;
		transform:none;
	}
}