.booked-frm-appointment-field {
	margin-top: 6px;
}

.booked-frm-appointment-current {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #eef6f0;
	border: 1px solid #cfe6d6;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
}

.booked-frm-appointment-current small {
	color: #5c6b62;
}

/*
 * Formidable wraps every field in its own container
 * (<div id="frm_field_ID_container" class="frm_form_field form-field ...">),
 * and some Formidable styles/themes give that container (or a layout row
 * around it) a fixed height with overflow:hidden - sized for whatever the
 * field looked like when the page first rendered. Our calendar grows
 * taller once the timeslot list appears below it, and that growth gets
 * silently clipped: the new content is genuinely in the DOM, just
 * invisible. booked-frm-appointment-ancestor is added by JS to every
 * ancestor of this field up to (not including) the <form> itself, so
 * whichever one is actually doing the clipping gets overridden.
 */
.booked-frm-appointment-ancestor {
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
}

.booked-frm-appointment-calendar {
	max-width: 420px;
	position: relative;
	transition: opacity 0.15s ease;
}

.booked-frm-appointment-calendar.booked-frm-loading {
	opacity: 0.5;
	pointer-events: none;
}

.booked-frm-appointment-slots {
	margin-top: 14px;
}

.booked-frm-appointment-slots-placeholder,
.booked-frm-appointment-loading {
	opacity: 0.7;
	font-style: italic;
}

.booked-frm-appointment-error {
	color: #c0392b;
}

/*
 * QuickCal's own CSS renders this button's text in white, meant to sit on
 * top of a colored background (--booked_button_color) — but many themes
 * also apply their own generic form-control styling (white background,
 * bordered, focus-color outline) to any bare <button>, which is almost
 * certainly what produced blank boxes with colored borders instead of a
 * visible "Book Appointment" button. Styling it fully explicitly here,
 * rather than relying on either cascade to reach it correctly, is more
 * robust than chasing which rule was actually missing.
 */
.booked-frm-appointment-slots .new-appt.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border: none !important;
	border-radius: 4px;
	background: var(--booked_button_color, #56C477) !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.booked-frm-appointment-slots .new-appt.button:hover:not([disabled]) {
	filter: brightness(0.92);
}

.booked-frm-appointment-slots .new-appt.button[disabled] {
	background: #d5d8dc !important;
	color: #8a8f96 !important;
	cursor: not-allowed;
}

.booked-frm-appointment-slots .new-appt.button .button-text {
	display: inline;
}

.booked-frm-appointment-slots .new-appt.button.booked-frm-selected {
	background: #1d5c33 !important;
}

.booked-frm-appointment-slots .new-appt.button.booked-frm-selected .button-text::after {
	content: " ✓ Selected";
}

.booked-frm-appointment-selected {
	margin-top: 8px;
	font-weight: 600;
}

.booked-frm-appointment-selected.booked-frm-appointment-error-text {
	color: #c0392b;
	font-weight: 500;
}

.booked-frm-appointment-calendar .bc-col.prev-date {
	cursor: not-allowed;
}

.booked-frm-appointment-calendar .bc-col:not(.prev-date):not(.blur) {
	cursor: pointer;
}