/* Safari Booked Persons — modal + calendar styling */

:root {
	--sbp-brand: #084b0c;
	--sbp-heading-font: "adelon-serial-bold", "Adelon Serial", Fraunces, "Times New Roman", serif;
	--sbp-body-font: Inter, ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Modal title bar ---------- */
body .booked-modal .bm-window p.booked-title-bar {
	background: var(--sbp-brand) !important;
	background-color: var(--sbp-brand) !important;
	font-family: var(--sbp-heading-font) !important;
	font-weight: 700;
}

/* ---------- Modal typography ---------- */
body .booked-modal .bm-window,
body .booked-modal .bm-window p,
body .booked-modal .booked-form,
body .booked-modal .booked-form .field,
body .booked-modal .booked-form select,
body .booked-modal .booked-form input,
body .booked-modal .booked-form textarea,
body .booked-modal .booked-form button {
	font-family: var(--sbp-body-font);
}

body .booked-modal .bm-window p.booked-title-bar,
body .booked-modal .bm-window p.calendar-name,
body .booked-modal .bm-window p.appointment-title,
body .booked-modal .booked-form .field label.field-label,
body .booked-modal .booked-form .sbp-field label.field-label {
	font-family: var(--sbp-heading-font) !important;
	font-weight: 700;
}

/* ---------- Calendar timeslot / book buttons ---------- */
body .booked-appt-list .timeslot .timeslot-people button,
body .booked-appt-list .timeslot .timeslot-people button.button,
body .booked-appt-list .timeslot .timeslot-people button.new-appt,
body .booked-calendar .timeslot-people button.new-appt,
body .booked-calendar button.new-appt,
body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button {
	background: var(--sbp-brand) !important;
	background-color: var(--sbp-brand) !important;
	border-color: var(--sbp-brand) !important;
	color: #fff !important;
}

body .booked-appt-list .timeslot .timeslot-people button:hover,
body .booked-appt-list .timeslot .timeslot-people button.button:hover,
body .booked-calendar button.new-appt:hover {
	background: #063a09 !important;
	background-color: #063a09 !important;
	border-color: #063a09 !important;
	color: #fff !important;
}

/* Request Booking primary button in modal */
body .booked-modal input[type=submit].button-primary,
body .booked-modal button.button-primary,
body .booked-modal .booked-form input#submit-request-appointment {
	background: var(--sbp-brand) !important;
	background-color: var(--sbp-brand) !important;
	border-color: var(--sbp-brand) !important;
	color: #fff !important;
}

body .booked-modal input[type=submit].button-primary:hover,
body .booked-modal button.button-primary:hover,
body .booked-modal .booked-form input#submit-request-appointment:hover {
	background: #063a09 !important;
	border-color: #063a09 !important;
}

/* ---------- Our fields (match Booked cf-block) ---------- */
body .booked-form .sbp-mode-field,
body .booked-form .sbp-product-field,
body .booked-form .sbp-person-field,
body .booked-form .sbp-guests-heading-field {
	margin: 5px 0 12px;
	clear: both;
}

body .booked-form .sbp-field label.field-label {
	cursor: default;
	display: block;
	font-weight: 700;
	padding: 10px 0 8px;
	margin: 0;
}

/*
 * Booked floats .field select left and uses .field-small-p { margin: -5px 0 5px }
 * which pulls help text up into the select. Kill that for our help line.
 */
body .booked-modal .booked-form .sbp-mode-field select.sbp-mode-select,
body .booked-modal .booked-form .sbp-product-field select.sbp-product-select,
body .booked-form .sbp-mode-field select.sbp-mode-select,
body .booked-form .sbp-product-field select.sbp-product-select {
	font-size: 13px;
	width: 100% !important;
	max-width: 100%;
	height: 33px;
	margin: 0 !important;
	padding: 0 10px;
	float: none !important;
	display: block !important;
	box-sizing: border-box;
	background: #fff;
	font-family: var(--sbp-body-font);
}

body .booked-modal .booked-form .sbp-mode-field p.sbp-mode-help,
body .booked-modal .booked-form .sbp-product-field p.sbp-mode-help,
body .booked-modal .booked-form .sbp-product-field p.sbp-no-products,
body .booked-form .sbp-mode-field p.sbp-mode-help,
body .booked-form .sbp-product-field p.sbp-no-products,
body .booked-form p.sbp-mode-help {
	display: block !important;
	float: none !important;
	clear: both !important;
	width: 100%;
	position: static !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	margin: 12px 0 8px !important; /* override Booked .field-small-p -5px top */
	padding: 0 !important;
	color: #666 !important;
	font-family: var(--sbp-body-font) !important;
	font-weight: 400 !important;
}

body .booked-form .cf-block input.sbp-qty-input[type="number"],
body .booked-modal .booked-form .sbp-person-field input.sbp-qty-input[type="number"],
body .booked-form .sbp-person-field input.sbp-qty-input[type="number"] {
	font-size: 13px;
	width: 100% !important;
	max-width: 100%;
	height: 33px;
	margin: 0 !important;
	padding: 7px 10px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ccc !important;
	border-radius: 3px;
	color: #555;
	float: none !important;
	display: block !important;
	font-family: var(--sbp-body-font);
	box-shadow: none !important;
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

body .booked-form .cf-block input.sbp-qty-input[type="number"]:focus,
body .booked-form .sbp-person-field input.sbp-qty-input[type="number"]:focus {
	border-color: #ccc !important;
	box-shadow: none !important;
}

body .booked-form .cf-block input.sbp-qty-input[type="number"]::-webkit-outer-spin-button,
body .booked-form .cf-block input.sbp-qty-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body .booked-form .sbp-multiple-panel {
	margin: 0 0 10px;
	clear: both;
}

body .booked-form .required-asterisk {
	color: #E35656;
	margin: -1px 0 0 7px;
}