/* =================================================================
   Hani's Playground - Online booking page (book.html)
   Uses the brand colour variables defined in theme.css.
   ================================================================= */

.bk-wrap { padding: 3rem 0 5rem; }
@media (max-width: 991px) { .bk-wrap { padding: 2rem 0 7rem; } }

.bk-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	padding: 2rem;
	margin-bottom: 1.25rem;
}
@media (max-width: 575px) { .bk-card { padding: 1.25rem; border-radius: 10px; } }

.bk-section-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}
.bk-num {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--brand-green);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
}
.bk-section-head h3 { margin: 0; font-size: 1.3rem; color: var(--brand-ink); }
.bk-hint { color: #777; font-size: 0.9rem; margin: -0.5rem 0 1rem; }

/* Notice / info boxes */
.bk-notice {
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
	background: var(--brand-cream-2);
	color: var(--brand-body);
	font-size: 0.95rem;
}
.bk-notice strong { color: var(--brand-green); }
.bk-notice-gold { background: #FDF3E4; border: 1px solid rgba(217, 129, 21, 0.35); }
.bk-notice .btn { margin-top: 0.75rem; }

/* Form controls (match registration form) */
.bk-card .form-label { font-weight: 500; color: #333; margin-bottom: 0.4rem; }
.bk-card .form-control, .bk-card .form-select {
	padding: 0.75rem 1rem;
	font-size: 1rem;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
}
.bk-card .form-control:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px rgba(13, 53, 48, 0.12);
}
.bk-card .form-control.is-invalid { border-color: #d9534f; }
.bk-error { display: none; color: #d9534f; font-size: 0.875rem; margin-top: 0.35rem; }
.bk-error.show { display: block; }
.req { color: var(--brand-gold); }

/* Pill / chip choices */
.bk-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bk-choice {
	flex: 1 1 0;
	min-width: 110px;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid #e0e0e0;
	border-radius: 10px;
	background: #fff;
	color: #444;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: all 0.15s;
	line-height: 1.25;
	user-select: none;
}
.bk-choice small { display: block; font-weight: 400; color: #888; font-size: 0.8rem; margin-top: 2px; }
.bk-choice:hover { border-color: var(--brand-green); color: var(--brand-green); }
.bk-choice.active {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: #fff;
}
.bk-choice.active small { color: rgba(255, 255, 255, 0.8); }
.bk-choice.invalid { border-color: #d9534f; }
.bk-choice:focus-visible { outline: 3px solid rgba(217, 129, 21, 0.5); outline-offset: 2px; }

/* Plan tabs */
.bk-tabs { display: flex; gap: 0.5rem; background: var(--brand-cream-2); padding: 0.35rem; border-radius: 12px; margin-bottom: 1.5rem; }
.bk-tab {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 0.8rem 0.5rem;
	border-radius: 9px;
	font-weight: 600;
	color: var(--brand-body);
	cursor: pointer;
	line-height: 1.2;
}
.bk-tab small { display: block; font-weight: 400; font-size: 0.8rem; color: #888; margin-top: 2px; }
.bk-tab.active { background: #fff; color: var(--brand-green); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.bk-field { margin-bottom: 1.25rem; }
.bk-field-label { display: block; font-weight: 600; color: #333; margin-bottom: 0.5rem; }

/* Identity card (returning / just-registered customer) */
.bk-id {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: var(--brand-cream);
	border: 1px solid #ece6d6;
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}
.bk-id-icon {
	flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
	background: var(--brand-green); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.bk-id-body { flex: 1; min-width: 0; }
.bk-id-name { font-weight: 700; color: var(--brand-ink); }
.bk-id-meta { color: #666; font-size: 0.9rem; word-break: break-word; }
.bk-link-btn {
	background: none; border: 0; padding: 0; color: var(--brand-green);
	font-weight: 600; text-decoration: underline; cursor: pointer; font-size: 0.9rem;
}
.bk-link-btn:hover { color: var(--brand-gold); }

/* Dog chips */
.bk-dog-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.bk-dog-row .form-control { flex: 1; }
.bk-dog-remove {
	flex: 0 0 48px; font-size: 1.3rem; border: 1.5px solid #e0e0e0; background: #fff; border-radius: 8px; color: #999; cursor: pointer;
}
.bk-dog-remove:hover { color: #d9534f; border-color: #d9534f; }
.bk-add-dog {
	background: none; border: 1.5px dashed #cfc8b6; color: var(--brand-green); border-radius: 8px;
	padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; width: 100%;
}
.bk-add-dog:hover { border-color: var(--brand-green); }

/* Calendar */
.bk-cal { border: 1.5px solid #ece6d6; border-radius: 12px; padding: 1rem; background: #fff; max-width: 440px; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.bk-cal-title { font-weight: 700; color: var(--brand-ink); }
.bk-cal-nav {
	width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #e0e0e0; background: #fff;
	color: var(--brand-green); cursor: pointer;
	font-size: 1.4rem; line-height: 1; padding: 0 0 3px;
}
.bk-cal-nav:disabled { opacity: 0.3; cursor: default; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal-dow { text-align: center; font-size: 0.75rem; font-weight: 600; color: #999; padding: 0.25rem 0; }
.bk-cal-day {
	aspect-ratio: 1 / 1;
	border: 0;
	border-radius: 8px;
	background: var(--brand-cream);
	color: var(--brand-ink);
	font-weight: 500;
	cursor: pointer;
	font-size: 0.95rem;
	padding: 0;
}
.bk-cal-day:hover:not(:disabled) { background: var(--brand-cream-2); outline: 1.5px solid var(--brand-green); }
.bk-cal-day.selected { background: var(--brand-green); color: #fff; }
.bk-cal-day:disabled { background: transparent; color: #ccc; cursor: default; }
.bk-cal-day.empty { visibility: hidden; }
.bk-cal-foot { font-size: 0.85rem; color: #777; margin-top: 0.75rem; }

.bk-date-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.bk-date-pill {
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: var(--brand-cream-2); color: var(--brand-green); border-radius: 999px;
	padding: 0.3rem 0.4rem 0.3rem 0.8rem; font-size: 0.85rem; font-weight: 600;
}
.bk-date-pill button {
	border: 0; background: rgba(13,53,48,0.1); color: var(--brand-green); width: 22px; height: 22px;
	border-radius: 50%; line-height: 1; cursor: pointer; font-size: 0.8rem;
}

/* Add-ons */
.bk-addon {
	display: flex; align-items: center; gap: 1rem;
	border: 1.5px solid #e0e0e0; border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.6rem;
	cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.bk-addon:hover { border-color: var(--brand-green); }
.bk-addon input { width: 22px; height: 22px; accent-color: var(--brand-green); flex: 0 0 22px; cursor: pointer; }
.bk-addon-body { flex: 1; }
.bk-addon-name { font-weight: 600; color: var(--brand-ink); }
.bk-addon-desc { font-size: 0.85rem; color: #777; }
.bk-addon-price { font-weight: 700; color: var(--brand-gold); white-space: nowrap; }
.bk-addon.checked { border-color: var(--brand-green); background: var(--brand-cream); }

/* Summary card */
.bk-summary { position: sticky; top: 1.5rem; }
.bk-summary h4 { font-size: 1.15rem; margin-bottom: 1rem; color: var(--brand-ink); }
.bk-lines { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.92rem; }
.bk-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dashed #eee; }
.bk-lines li span:first-child { color: #555; }
.bk-lines li span:last-child { font-weight: 600; color: var(--brand-ink); text-align: right; white-space: nowrap; }
.bk-lines li.bk-line-special span { color: var(--brand-gold) !important; }
.bk-lines li.bk-line-empty { color: #999; justify-content: flex-start; border: 0; }
.bk-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; }
.bk-total-label { font-weight: 600; color: #555; }
.bk-total-amount { font-size: 2rem; font-weight: 800; color: var(--brand-green); line-height: 1; }
.bk-total-note { font-size: 0.8rem; color: #888; margin-bottom: 1.25rem; }
.bk-strike { text-decoration: line-through; color: #aaa; font-weight: 500; margin-right: 0.3rem; }
.bk-special-tag {
	display: inline-block; background: var(--brand-gold); color: #fff; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 999px; margin-bottom: 0.75rem;
}
.bk-submit { width: 100%; padding: 0.9rem 1rem; font-weight: 600; font-size: 1.05rem; }
.bk-trust { font-size: 0.8rem; color: #888; text-align: center; margin-top: 0.75rem; }

/* Mobile sticky bar */
.bk-sticky {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
	background: #fff; border-top: 1px solid #eee; box-shadow: 0 -4px 18px rgba(0,0,0,0.08);
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
	align-items: center; gap: 1rem;
}
.bk-sticky-total { flex: 1; min-width: 0; }
.bk-sticky-total small { display: block; color: #888; font-size: 0.75rem; }
.bk-sticky-total strong { font-size: 1.35rem; color: var(--brand-green); }
.bk-sticky .btn { padding: 0.75rem 1.25rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 991px) {
	.bk-sticky { display: flex; }
	.bk-sticky.hidden { display: none; }
	.bk-summary { position: static; }
}

/* Success */
.bk-success { text-align: center; padding: 1rem 0.5rem; }
.bk-success-icon {
	width: 80px; height: 80px; border-radius: 50%; background: #e7f0ee; color: var(--brand-green);
	display: inline-flex; align-items: center; justify-content: center; font-size: 2.3rem; margin-bottom: 1.25rem;
}
.bk-ref {
	display: inline-block; background: var(--brand-cream-2); color: var(--brand-green); font-weight: 700;
	letter-spacing: 0.05em; padding: 0.5rem 1rem; border-radius: 8px; margin: 0.5rem 0 1.25rem; font-size: 1.1rem;
}
.bk-next-steps { text-align: left; max-width: 520px; margin: 1.5rem auto; padding: 0; list-style: none; counter-reset: step; }
.bk-next-steps li { position: relative; padding: 0 0 1rem 2.75rem; color: var(--brand-body); }
.bk-next-steps li::before {
	counter-increment: step; content: counter(step);
	position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
	background: var(--brand-gold); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.bk-next-steps li strong { color: var(--brand-ink); }
.bk-success-summary { text-align: left; max-width: 520px; margin: 0 auto 1.5rem; background: var(--brand-cream); border-radius: 12px; padding: 1rem 1.25rem; }
.bk-success-summary .bk-lines { margin: 0; }

/* Weekday picker: keep Mon-Fri on one row, even on phones */
#bkWeekdays { flex-wrap: nowrap; }
#bkWeekdays .bk-choice { min-width: 0; padding: 0.7rem 0.25rem; }

/* Coming soon (online booking switched off) */
.bk-soon { padding: 2.5rem 2rem; }
.bk-soon-badge {
	display: inline-block; background: var(--brand-gold); color: #fff; font-weight: 700; font-size: 0.75rem;
	text-transform: uppercase; letter-spacing: 0.08em; padding: 0.35rem 0.9rem; border-radius: 999px;
}
.bk-closed {
	opacity: 0.45;
	filter: grayscale(1);
	pointer-events: none;
	user-select: none;
}

/* Time pickers: the template makes select text white, so set it explicitly */
.bk-card .form-select {
	color: var(--brand-ink);
	background-color: #fff;
	cursor: pointer;
}
.bk-card .form-select option { color: var(--brand-ink); }
.bk-card .form-select option:disabled { color: #bbb; }
.bk-card .form-select:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(13, 53, 48, 0.12); }