/* The K Junction bookings */
.kjb {
	--kjb-navy: #000e44;
	--kjb-gold: #ffbe02;
	--kjb-soft: #f3f5fb;
	--kjb-line: #dfe3ee;
	--kjb-muted: #5b6170;
	--kjb-free: #e8edfb;
	box-sizing: border-box;
	color: var(--kjb-navy);
	font-size: 1.6rem;
	line-height: 1.5;
	width: 100%;
}
.kjb *, .kjb *::before, .kjb *::after { box-sizing: border-box; }
.kjb [hidden] { display: none !important; }

/* Appointment layout */
.kjb--appointment {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0, 14, 68, .12);
	overflow: hidden;
}
.kjb__side {
	background: var(--kjb-navy);
	color: #fff;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.kjb__eyebrow { margin: 0; color: var(--kjb-gold); font-weight: 600; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .06em; }
.kjb__price { margin: 0; font-size: 3.2rem; font-weight: 700; line-height: 1.2; }
.kjb__meta { margin: 0 0 18px; color: rgba(255, 255, 255, .8); font-size: 1.5rem; }
.kjb__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kjb__steps li {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px; border-radius: 8px;
	background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .75); font-size: 1.5rem;
}
.kjb__steps li span {
	display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	background: rgba(255, 255, 255, .14); font-size: 1.3rem; font-weight: 700;
}
.kjb__steps li.is-active { background: rgba(255, 190, 2, .16); color: #fff; }
.kjb__steps li.is-active span, .kjb__steps li.is-done span { background: var(--kjb-gold); color: var(--kjb-navy); }
.kjb__tz { margin: auto 0 0; padding-top: 18px; font-size: 1.3rem; color: rgba(255, 255, 255, .7); }

.kjb__main { padding: 26px 28px; min-width: 0; }
.kjb__title { margin: 0 0 16px; font-size: 2.2rem; line-height: 1.3; color: var(--kjb-navy); }

.kjb__cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kjb__month { font-weight: 600; font-size: 1.8rem; }
.kjb__nav {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kjb-line);
	background: #fff; color: var(--kjb-navy); font-size: 2.2rem; line-height: 1; cursor: pointer;
	display: grid; place-items: center; padding: 0 0 3px;
}
.kjb__nav:disabled { opacity: .35; cursor: default; }
.kjb__week, .kjb__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kjb__week span { text-align: center; font-size: 1.3rem; color: var(--kjb-muted); font-weight: 600; padding: 4px 0; }
.kjb__day {
	height: 42px; border-radius: 8px; border: 1px solid transparent;
	background: var(--kjb-soft); color: #a3a8b6; font: inherit; font-size: 1.5rem; padding: 0;
	display: grid; place-items: center; text-align: center;
}
.kjb__day.is-blank { background: transparent; }
.kjb__day.is-free { background: var(--kjb-free); color: var(--kjb-navy); font-weight: 600; cursor: pointer; border-color: #c9d3f2; }
.kjb__day.is-free:hover { border-color: var(--kjb-navy); }
.kjb__day.is-selected { background: var(--kjb-navy); color: #fff; border-color: var(--kjb-navy); }
.kjb__loading { grid-column: 1 / -1; color: var(--kjb-muted); margin: 18px 0; text-align: center; }

.kjb__step[data-step="1"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
	gap: 0 28px;
	align-items: start;
}
.kjb__step[data-step="1"] > .kjb__title,
.kjb__step[data-step="1"] > .kjb__empty,
.kjb__step[data-step="1"] > .kjb__actions { grid-column: 1 / -1; }
.kjb__cal { max-width: 440px; }
.kjb__slots-col { padding-top: 48px; }
.kjb__slots-hint { margin: 0; padding: 14px; border-radius: 8px; background: var(--kjb-soft); color: var(--kjb-muted); font-size: 1.4rem; }
.kjb__slots-title { margin: 0 0 10px; font-weight: 600; font-size: 1.5rem; }
.kjb__slot-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kjb__slot {
	padding: 10px 8px; border-radius: 8px; border: 1px solid #c9d3f2; background: #fff;
	color: var(--kjb-navy); font: inherit; font-size: 1.5rem; font-weight: 600; cursor: pointer;
}
.kjb__slot:hover { border-color: var(--kjb-navy); }
.kjb__slot.is-selected { background: var(--kjb-navy); border-color: var(--kjb-navy); color: #fff; }
.kjb__empty { color: var(--kjb-muted); margin: 14px 0 0; }

.kjb__chosen { margin: 0 0 18px; padding: 12px 16px; background: #fff7d9; border-left: 4px solid var(--kjb-gold); border-radius: 6px; font-weight: 600; }
.kjb__link { background: none; border: 0; padding: 0 0 0 8px; color: var(--kjb-navy); text-decoration: underline; font: inherit; font-weight: 400; cursor: pointer; }

/* Fields (shared) */
.kjb__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.kjb__field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.kjb__field--half { grid-column: span 1; }
.kjb .kjb__field label { font-weight: 600; font-size: 1.5rem; color: var(--kjb-navy); margin: 0; }
.kjb__field abbr { color: #c62828; text-decoration: none; }
.kjb__field input[type="text"], .kjb__field input[type="tel"], .kjb__field input[type="date"], .kjb__field textarea {
	width: 100%; padding: 11px 14px; border: 1px solid var(--kjb-line); border-radius: 8px;
	background: #fff; color: var(--kjb-navy); font: inherit; font-size: 1.6rem;
}
.kjb__field input:focus, .kjb__field textarea:focus { outline: 2px solid var(--kjb-gold); outline-offset: 1px; border-color: var(--kjb-navy); }
.kjb__field input[type="file"] { padding: 10px; border: 1px dashed #b9c1d8; border-radius: 8px; background: var(--kjb-soft); font-size: 1.5rem; }
.kjb__field small { color: var(--kjb-muted); font-size: 1.3rem; }
.kjb__check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 1.5rem; }
.kjb__check input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--kjb-navy); }
.kjb__hint { margin: 16px 0 0; color: var(--kjb-muted); font-size: 1.4rem; }
.kjb__error { margin: 14px 0 0; padding: 12px 16px; border-radius: 8px; background: #fdecec; color: #8e1b1b; font-weight: 600; }
.kjb__actions { margin-top: 20px; display: flex; justify-content: flex-end; }
.kjb__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 28px; border: 0; border-radius: 8px; cursor: pointer;
	background: var(--kjb-gold); color: var(--kjb-navy); font: inherit; font-size: 1.7rem; font-weight: 600;
	transition: filter .15s;
}
.kjb__btn:hover { filter: brightness(.95); }
.kjb__btn:disabled { opacity: .5; cursor: not-allowed; }

/* Request form */
.kjb--request { background: #fff; border-radius: 14px; padding: 26px 28px; box-shadow: 0 10px 40px rgba(0, 14, 68, .1); }
.kjb--request .kjb__actions .kjb__btn { width: 100%; }
.kjb__summary {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	margin-bottom: 20px; padding: 14px 18px; border-radius: 10px; background: var(--kjb-navy); color: #fff;
}
.kjb__summary-title { font-weight: 600; }
.kjb__summary-price { font-size: 2.2rem; font-weight: 700; color: var(--kjb-gold); }
.kjb--closed { padding: 20px; border-radius: 10px; background: var(--kjb-soft); }

@media (max-width: 767px) {
	.kjb--appointment { grid-template-columns: 1fr; }
	.kjb__side { padding: 20px; }
	.kjb__steps { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.kjb__steps li { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 1.2rem; text-align: center; }
	.kjb__tz { padding-top: 10px; }
	.kjb__main, .kjb--request { padding: 20px 16px; }
	.kjb__step[data-step="1"] { grid-template-columns: 1fr; }
	.kjb__cal { max-width: none; }
	.kjb__slots-col { padding-top: 18px; }
	.kjb__slot-list { grid-template-columns: repeat(3, 1fr); }
	.kjb__week, .kjb__days { gap: 4px; }
	.kjb__fields { grid-template-columns: 1fr; }
	.kjb__field--half { grid-column: 1 / -1; }
	.kjb__btn { width: 100%; }
}