/* Conneck Student Services - shared design system (booking wizard + dashboard).
   Everything is scoped under .cnk-app so a theme cannot restyle it by accident. */

@property --cnk-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.cnk-app {
	/* Brand colours come from Settings (--cnk-primary / --cnk-accent); the rest are derived. */
	--pri: var(--cnk-primary, #0b2a4a);
	--acc: var(--cnk-accent, #f58220);
	--ink: #0a1630;
	--pri-2: #3b5bff;
	--acc-2: #ff4d6d;
	--mint: #12b886;
	--mist: #f2f5fb;
	--paper: #ffffff;
	--muted: #5b6a86;
	--line: rgba(10, 22, 48, .1);
	--r-xl: 30px;
	--r-lg: 22px;
	--r-md: 14px;
	--ease: cubic-bezier(.16, 1, .3, 1);
	--display: "Unbounded", "Figtree", system-ui, sans-serif;
	--body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.cnk-app {
		--ink: color-mix(in srgb, var(--pri) 78%, #000);
		--pri-2: color-mix(in srgb, var(--pri) 42%, #3b6bff);
		--acc-2: color-mix(in srgb, var(--acc) 52%, #ff3d71);
	}
}

.cnk-app, .cnk-app *, .cnk-app *::before, .cnk-app *::after { box-sizing: border-box; }
.cnk-app {
	position: relative;
	max-width: 1120px;
	margin: 24px auto;
	background: var(--mist);
	color: var(--ink);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.55;
	border-radius: var(--r-xl);
	overflow: hidden;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
}
.cnk-app h1, .cnk-app h2, .cnk-app h3, .cnk-app h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; margin: 0; color: inherit; }
.cnk-app p { margin: 0; }
.cnk-app button { font: inherit; cursor: pointer; }
.cnk-app :focus-visible { outline: 3px solid color-mix(in srgb, var(--pri-2) 70%, #fff); outline-offset: 2px; border-radius: 10px; }
.cnk-app [hidden] { display: none !important; }
.cnk-app .cnk-muted { color: var(--muted); font-size: .92rem; }
.cnk-app .cnk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.cnk-app .cnk-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; overflow: hidden;
	background: linear-gradient(120deg, var(--acc), var(--acc-2));
	color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
	box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--acc) 90%, #000), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: box-shadow .4s var(--ease), opacity .2s;
	will-change: transform;
}
.cnk-app .cnk-btn::after { /* sheen sweep */
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg); animation: cnk-sheen 4.2s ease-in-out infinite; pointer-events: none;
}
.cnk-app .cnk-btn:hover { box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--acc) 95%, #000), inset 0 1px 0 rgba(255, 255, 255, .35); }
.cnk-app .cnk-btn:disabled { opacity: .55; cursor: wait; }
.cnk-app .cnk-btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.cnk-app .cnk-btn--ghost::after { display: none; }
.cnk-app .cnk-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--pri-2); }
.cnk-app .cnk-btn--ink { background: var(--ink); box-shadow: 0 14px 30px -14px var(--ink); }
.cnk-app .cnk-btn--sm { min-height: 40px; padding: 0 18px; font-size: .9rem; }
@keyframes cnk-sheen { 0%, 62% { left: -60%; } 100% { left: 130%; } }

/* label that rolls up on hover (the label text is duplicated by fx.js) */
.cnk-app .cnk-roll { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: middle; }
.cnk-app .cnk-roll > span { display: block; transition: transform .5s var(--ease); }
.cnk-app .cnk-roll > span + span { position: absolute; left: 0; top: 100%; }
.cnk-app .cnk-btn:hover .cnk-roll > span, .cnk-app a:hover > .cnk-roll > span { transform: translateY(-100%); }

/* ---------- fields ---------- */
.cnk-app .cnk-field { position: relative; display: block; margin: 0; }
.cnk-app .cnk-field > input, .cnk-app .cnk-field > select, .cnk-app .cnk-field > textarea {
	width: 100%; height: 58px; padding: 22px 16px 8px; border: 1.5px solid var(--line); border-radius: var(--r-md);
	background: #fff; color: var(--ink); font: inherit; font-size: 1rem; box-shadow: none; appearance: none; -webkit-appearance: none;
	transition: border-color .25s, box-shadow .25s;
}
.cnk-app .cnk-field > textarea { height: auto; min-height: 96px; padding-top: 26px; resize: vertical; }
.cnk-app .cnk-field > select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 26px, calc(100% - 16px) 26px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.cnk-app .cnk-field > label {
	position: absolute; left: 17px; top: 18px; color: var(--muted); font-size: 1rem; pointer-events: none;
	transform-origin: left top; transition: transform .25s var(--ease), color .25s;
}
.cnk-app .cnk-field > input:focus ~ label, .cnk-app .cnk-field > input:not(:placeholder-shown) ~ label,
.cnk-app .cnk-field > textarea:focus ~ label, .cnk-app .cnk-field > textarea:not(:placeholder-shown) ~ label,
.cnk-app .cnk-field > select ~ label { transform: translateY(-11px) scale(.78); }
.cnk-app .cnk-field > input:focus, .cnk-app .cnk-field > select:focus, .cnk-app .cnk-field > textarea:focus {
	outline: 0; border-color: var(--pri-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pri-2) 18%, transparent);
}
.cnk-app .cnk-field > input:focus ~ label, .cnk-app .cnk-field > select:focus ~ label, .cnk-app .cnk-field > textarea:focus ~ label { color: var(--pri-2); }
.cnk-app .cnk-field.has-error > input, .cnk-app .cnk-field.has-error > select, .cnk-app .cnk-field.has-error > textarea { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .12); }
.cnk-app .cnk-field .cnk-msg { display: none; margin-top: 6px; padding-left: 4px; color: #c2343a; font-size: .85rem; }
.cnk-app .cnk-field.has-error .cnk-msg { display: block; }

/* toggle switch */
.cnk-app .cnk-switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; font-weight: 500; }
.cnk-app .cnk-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cnk-app .cnk-switch .cnk-knob { flex: none; position: relative; width: 48px; height: 28px; border-radius: 999px; background: #cdd6e6; transition: background .3s; margin-top: 1px; }
.cnk-app .cnk-switch .cnk-knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(10, 22, 48, .3); transition: transform .45s var(--ease); }
.cnk-app .cnk-switch input:checked + .cnk-knob { background: linear-gradient(120deg, var(--pri-2), var(--mint)); }
.cnk-app .cnk-switch input:checked + .cnk-knob::after { transform: translateX(20px); }
.cnk-app .cnk-switch input:focus-visible + .cnk-knob { outline: 3px solid color-mix(in srgb, var(--pri-2) 70%, #fff); outline-offset: 2px; }

/* ---------- surfaces ---------- */
.cnk-app .cnk-card { background: var(--paper); border-radius: var(--r-lg); padding: 22px; box-shadow: 0 1px 0 rgba(10, 22, 48, .04), 0 24px 40px -32px rgba(10, 22, 48, .45); }
.cnk-app [data-spot] { position: relative; overflow: hidden; }
.cnk-app [data-spot]::before { /* cursor-following glow */
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--pri-2) 16%, transparent), transparent 70%);
}
.cnk-app [data-spot]:hover::before { opacity: 1; }
.cnk-app .cnk-note { padding: 16px 18px; background: #fff; border-radius: var(--r-md); }
.cnk-app .cnk-error { padding: 12px 16px; border-radius: var(--r-md); background: #fdecee; color: #a02029; font-weight: 600; }
.cnk-app .cnk-ok { padding: 12px 16px; border-radius: var(--r-md); background: #e4f8ef; color: #0b6b4c; font-weight: 600; }
.cnk-app .cnk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: color-mix(in srgb, var(--pri-2) 12%, #fff); color: var(--pri-2); }
.cnk-app .cnk-badge.is-ok { background: #e4f8ef; color: #0b6b4c; }
.cnk-app .cnk-badge.is-warn { background: #fff1de; color: #9a5200; }
.cnk-app .cnk-badge.is-bad { background: #fdecee; color: #a02029; }

/* ---------- toast ---------- */
.cnk-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; z-index: 99999; padding: 12px 20px; border-radius: 999px; background: #0a1630; color: #fff; font: 600 .95rem/1.2 "Figtree", system-ui, sans-serif; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5); transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .3s; pointer-events: none; }
.cnk-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.cnk-toast.is-bad { background: #a02029; }

@media (prefers-reduced-motion: reduce) {
	.cnk-app *, .cnk-app *::before, .cnk-app *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* split-text headline: each character rises out of its own mask */
.cnk-app .cnk-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin-bottom: -.1em; }
.cnk-app .cnk-c { display: inline-block; will-change: transform; }