/*
 * Amelia booking form — Behind the Curtain styling.
 *
 * Best practice: first set the same colours and fonts in Amelia → Customize (no code),
 * using the values in the setup guide. This file then fine-tunes the look and acts as a
 * safety net so the form matches the site even if a Customize setting is missed.
 *
 * Written for Amelia's current ("v2") booking forms, which use CSS variables on the
 * #amelia-container element. Amelia changes its markup between versions, so check the
 * Book page after every Amelia update.
 */

/* 1. Brand colours and font through Amelia's own variables */
.amelia-v2-booking #amelia-container,
.amelia-v2-booking .am-fs__wrapper,
#amelia-container.am-fs__wrapper,
.amelia-v2-booking .am-cat__wrapper,
.amelia-v2-booking .am-elf {
	--am-c-primary: #1C1714 !important;
	--am-c-success: #3C6E47 !important;
	--am-c-error: #6B1C1F !important;
	--am-c-warning: #A8834A !important;
	--am-c-main-bgr: #FFFFFF !important;
	--am-c-main-heading-text: #1C1714 !important;
	--am-c-main-text: #1C1714 !important;
	--am-c-sb-bgr: #F4EFE6 !important;
	--am-c-sb-text: #1C1714 !important;
	--am-c-inp-bgr: #FFFFFF !important;
	--am-c-inp-border: rgba(28, 23, 20, 0.25) !important;
	--am-c-inp-text: #1C1714 !important;
	--am-c-inp-placeholder: #5E554D !important;
	--am-c-drop-bgr: #FFFFFF !important;
	--am-c-drop-text: #1C1714 !important;
	--am-c-btn-prim: #1C1714 !important;
	--am-c-btn-prim-text: #FFFFFF !important;
	--am-c-btn-sec: #FFFFFF !important;
	--am-c-btn-sec-text: #1C1714 !important;
	--am-font-family: Jost, "Helvetica Neue", Arial, sans-serif !important;
	font-family: Jost, "Helvetica Neue", Arial, sans-serif !important;
}

/* 2. Typography */
.amelia-v2-booking #amelia-container h1,
.amelia-v2-booking #amelia-container h2,
.amelia-v2-booking #amelia-container h3,
.amelia-v2-booking #amelia-container [class*="__heading"],
.amelia-v2-booking #amelia-container [class*="-heading"] {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}
.amelia-v2-booking #amelia-container,
.amelia-v2-booking #amelia-container input,
.amelia-v2-booking #amelia-container textarea,
.amelia-v2-booking #amelia-container button {
	font-family: Jost, "Helvetica Neue", Arial, sans-serif !important;
}

/* 3. Shape: square-ish corners and no heavy shadows, like the rest of the site */
.amelia-v2-booking #amelia-container,
.amelia-v2-booking #amelia-container .am-fs__main,
.amelia-v2-booking #amelia-container .am-fs__sidebar {
	border-radius: 2px !important;
	box-shadow: none !important;
}
.amelia-v2-booking #amelia-container .el-input__inner,
.amelia-v2-booking #amelia-container .el-input__wrapper,
.amelia-v2-booking #amelia-container .el-select .el-input__wrapper,
.amelia-v2-booking #amelia-container .el-textarea__inner,
.amelia-v2-booking #amelia-container .am-input,
.amelia-v2-booking #amelia-container .am-select {
	border-radius: 2px !important;
}

/* 4. Buttons: match the site's uppercase ink buttons */
.amelia-v2-booking #amelia-container .am-button,
.amelia-v2-booking #amelia-container .el-button {
	border-radius: 2px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	min-height: 44px !important;
}
.amelia-v2-booking #amelia-container .am-button--filled:hover,
.amelia-v2-booking #amelia-container .am-button--primary:hover,
.amelia-v2-booking #amelia-container .el-button--primary:hover {
	background-color: #6B1C1F !important;
	border-color: #6B1C1F !important;
}

/* 5. Calendar: selected day and time slots in ink, today/available marked in brass */
.amelia-v2-booking #amelia-container .am-advsc__slots-item.am-selected,
.amelia-v2-booking #amelia-container [class*="slot"].am-selected,
.amelia-v2-booking #amelia-container .fc-daygrid-day.am-advsc__selected .fc-daygrid-day-number {
	background-color: #1C1714 !important;
	color: #FFFFFF !important;
	border-color: #1C1714 !important;
}

/* 6. Keyboard focus must stay visible */
.amelia-v2-booking #amelia-container :focus-visible {
	outline: 2px solid #6B1C1F !important;
	outline-offset: 2px !important;
}

/* 7. Sit neatly inside the Book page frame */
.btc-amelia-frame .amelia-v2-booking,
.btc-amelia-frame #amelia-container {
	max-width: 100% !important;
	margin: 0 !important;
}