/* FluentBooking skin — [fluent_booking] styled after the zCal design: dark ground, dark card,
 * mint accent, circular avatar, circular day cells, outlined slot buttons.
 *
 * FluentBooking's own CSS is injected by app.js at runtime, AFTER every enqueued stylesheet, so
 * this file cannot win on source order. Every selector starts with .fcal_cal_wrap (the widget's
 * root, present in light and dark mode) and most add .fcal_wrap, which puts each rule one or two
 * classes above the plugin's own selector — including its `.fcal-dark-mode …` variants.
 * test_booking.php asserts the prefix on every selector. */

.fcal_cal_wrap,
.fcal-dark-mode.fcal_cal_wrap {
	/* local tokens (house rule 4: aliased, literal fallbacks) */
	--bk-surface: #161a1c;
	--bk-card: #222527;
	--bk-ink: #ffffff;
	--bk-ink-2: rgba(255, 255, 255, 0.7);
	--bk-ink-3: rgba(255, 255, 255, 0.5);
	--bk-line: rgba(255, 255, 255, 0.1);
	--bk-field-line: rgba(255, 255, 255, 0.23);
	--bk-accent: #01ffc2;
	--bk-accent-soft: rgba(1, 255, 194, 0.05);
	--bk-accent-hover: rgba(1, 255, 194, 0.18);
	--bk-accent-ring: rgba(1, 255, 194, 0.35);
	--bk-on-accent: #0b1412;
	--bk-danger: #ff6b6b;
	--bk-radius: 8px;
	--bk-font: var(--wp--preset--font-family--public-sans, "Public Sans", system-ui, sans-serif);

	/* the plugin's own theme hooks */
	--fcal_primary_color: var(--bk-accent);
	--fcal_dark: var(--bk-ink);
	--fcal_whiteColor: var(--bk-on-accent);
	--fcal_gray: var(--bk-ink-3);
	--fcal_body_bg: var(--bk-surface);
	--fcal_cal_bg: var(--bk-card);
	--fcal_thBG: rgba(255, 255, 255, 0.08);
	--fcal_slot_border: var(--bk-line);
	--fcal_input_bg: rgba(255, 255, 255, 0.05);
	--fcal_input_disable_bg: rgba(255, 255, 255, 0.03);
	--fcal_enable_day_bg: var(--bk-accent-soft);
	--fcal_date_disabled_bg: transparent;
	--fcal_date_disabled_color: var(--bk-ink-2);
	--fcal_date_radius: 50%;
	--fcal_avatar_radius: 50%;
	--fcal_scroll_bar_bg: rgba(255, 255, 255, 0.2);
	--fcal_skeleton_bg: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.06) 63%);

	background: var(--bk-surface);
	color: var(--bk-ink);
	font-family: var(--bk-font);
	padding: 48px 24px;
}

/* House rule 8: the section is the Site Editor's wide width, gutters outside. The plugin's own
 * `.fcal_cal_wrap { max-width: 100% }` ties on specificity and comes later, so this needs the
 * mode class the shortcode always adds. */
.fcal_cal_wrap.fcal-light-mode,
.fcal_cal_wrap.fcal-dark-mode {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-left: auto;
	margin-right: auto;
}

/* ---- card ---------------------------------------------------------------------------------- */
.fcal_cal_wrap .fcal_wrap .fcal_holder { justify-content: center; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner {
	border: 0;
	border-radius: var(--bk-radius);
	background: var(--bk-card);
	box-shadow: none;
}

/* ---- left pane: avatar, name, event ------------------------------------------------------- */
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side {
	width: 350px;
	min-width: 350px;
	padding: 40px 28px 32px;
	border-right: 0;
	background: transparent;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side .fcal_author { margin-bottom: 12px; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side .fcal_author_avatar { margin-bottom: 14px; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side .fcal_author_avatar img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	border: 5px solid #fff;
	background: #fff;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side .fcal_author_name {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--bk-ink);
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side .fcal_slot_heading {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.4;
	margin: 8px 0 14px;
	color: var(--bk-ink);
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side .fcal_slot_description {
	color: var(--bk-ink-2);
	font-size: 15px;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_icon_item {
	color: var(--bk-ink);
	font-size: 15px;
	font-weight: 400;
	align-items: center;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_icon_item.fcal_icon_item { margin-bottom: 8px; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_icon_item.fcal_icon_item svg {
	stroke: var(--bk-ink);
	width: 18px;
	height: 18px;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_icon_item.fcal_icon_item .fcal_duration_title { margin-top: 0; }
/* the plugin's inline SVGs carry hard-coded #445164 strokes and fills; same fix its dark mode uses */
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .fcal_icon_item svg path,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .fcal_icon_item svg circle,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .fcal_multi_location_title svg path,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .fcal_multi_location_title svg circle {
	fill: var(--bk-ink);
	stroke: var(--bk-ink);
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_timing svg path,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_timing svg circle,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .fcal_multi_location_title svg path,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .fcal_multi_location_title svg circle,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_time_range svg path { fill: none; }
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_location img.fcal_loc_icon.location_icon,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_location img.fcal_loc_icon.phone_icon,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_location img.fcal_loc_icon.link_icon { filter: invert(1); }
/* the chosen slot, once picked, reads in the accent like zCal's "Mon, Sep 14, 10:00 am EDT" */
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_time_range { color: var(--bk-accent); }
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_time_range svg path { stroke: var(--bk-accent); }

.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_timezone { color: var(--bk-ink-2); }
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_timezone svg path,
.fcal_cal_wrap .fcal_wrap .fcal_slot_info .slot_timezone svg circle {
	stroke: var(--bk-ink-2);
	fill: none;
}

/* ---- month header -------------------------------------------------------------------------- */
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-container {
	max-width: 560px;
	padding: 36px 28px 28px;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner.fcal_day_selected .calendar-container { border-right: 0; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-header { margin-bottom: 10px; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar-month-year h2,
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar-month-year h4 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--bk-ink);
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar-month-year h2 span,
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar-month-year h4 span { color: var(--bk-ink); }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar_nav button {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--bk-ink-3);
	transition: background 0.2s;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar_nav button:not(.fcal_btn_disabled):hover { background: rgba(255, 255, 255, 0.08); }
.fcal_cal_wrap .fcal_wrap .calendar_nav svg { width: 18px; height: 18px; }
.fcal_cal_wrap .fcal_wrap .calendar_nav .fcal_nav_active svg { color: var(--bk-accent); }

/* ---- day grid ------------------------------------------------------------------------------ */
.fcal_cal_wrap .fcal_wrap .fcal_calendar_slot_wrap .calendar {
	grid-template-columns: repeat(7, minmax(0, 44px));
	column-gap: 12px;
	row-gap: 6px;
}
/* zCal labels the columns S M T W T F S; the plugin prints SUN MON …, so show the first letter */
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day-name {
	font-size: 0;
	line-height: 40px;
	font-weight: 400;
	color: var(--bk-ink-2);
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day-name::first-letter { font-size: 16px; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day {
	font-size: 16px;
	font-weight: 400;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day > span {
	border-radius: 50%;
	transition: background 0.2s, color 0.2s;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day.day-disabled { color: var(--bk-ink-2); }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day.day-disabled span { background: transparent; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day.day-enabled span {
	background: var(--bk-accent-soft);
	color: var(--bk-accent);
	font-weight: 400;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day.day-enabled:hover span {
	background: var(--bk-accent-hover);
	color: var(--bk-accent);
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day.day_is_selected.day.day-enabled span,
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day.day_is_selected.day.day-enabled:hover span {
	background: var(--bk-accent);
	color: var(--bk-on-accent) !important;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day.day-enabled.day_is_selected span::before { display: none; }
/* today: a faint ring, no dot (zCal) */
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day .is-today {
	color: inherit;
	box-shadow: inset 0 0 0 1px var(--bk-accent-ring);
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar .day .is-today::before { display: none; }

/* ---- timezone: a quiet text control under the grid, like zCal's --------------------------- */
.fcal_cal_wrap .fcal_wrap .fcal_timezone_select {
	margin-top: 24px;
	padding-left: 0;
}
.fcal_cal_wrap .fcal_wrap .fcal_timezone_select label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.fcal_cal_wrap .fcal_wrap .fcal_day_picker .fcal_timezone_select .svelte-select {
	--height: 34px;
	--font-size: 14px;
	--width: max-content;
	width: max-content;
	max-width: 100%;
	min-width: 0;
	background: transparent !important;
	border-color: transparent !important;
	border-radius: 6px !important;
	padding-left: 0 !important;
	padding-right: 28px;
	color: var(--bk-ink-3);
	font-weight: 600;
}
.fcal_cal_wrap .fcal_wrap .fcal_timezone_select .svelte-select:hover { background: rgba(255, 255, 255, 0.06) !important; }
.fcal_cal_wrap .fcal_wrap .fcal_timezone_select .svelte-select.focused { border-color: var(--bk-line) !important; }
.fcal_cal_wrap .fcal_wrap .fcal_timezone_select .svelte-select .selected-item {
	font-size: 14px !important;
	font-weight: 600;
	color: var(--bk-ink-3);
	padding-left: 10px;
}
.fcal_cal_wrap .fcal_wrap .fcal_timezone_select .svelte-select::before {
	border-color: var(--bk-ink-3);
	right: 12px;
	top: 11px;
}
.fcal_cal_wrap .fcal_wrap .fcal_timezone_select .svelte-select.list-open::before {
	border-left-color: var(--bk-accent);
	border-bottom-color: var(--bk-accent);
	top: 15px;
}

/* dropdown lists (timezone, country code) */
.fcal_cal_wrap .fcal_wrap .svelte-select .svelte-select-list {
	background: var(--bk-card) !important;
	border-color: var(--bk-line) !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}
.fcal_cal_wrap .fcal_wrap .svelte-select .svelte-select-list .item { color: var(--bk-ink) !important; }
.fcal_cal_wrap .fcal_wrap .svelte-select .svelte-select-list .item.hover,
.fcal_cal_wrap .fcal_wrap .svelte-select .svelte-select-list .item:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	color: var(--bk-ink) !important;
}
.fcal_cal_wrap .fcal_wrap .svelte-select .svelte-select-list .item.active {
	background: var(--bk-accent) !important;
	color: var(--bk-on-accent) !important;
}
.fcal_cal_wrap .fcal_wrap .svelte-select .svelte-select-list .list-group-title { color: var(--bk-ink-3); }

/* ---- slot column --------------------------------------------------------------------------- */
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker {
	width: 244px;
	padding: 0 28px 24px 0;
	background: var(--bk-card);
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_slot_picker_header {
	padding: 36px 0 14px;
	background: var(--bk-card);
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_date_info {
	font-size: 16px;
	font-weight: 600;
	color: var(--bk-ink);
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_picker_header_action {
	border-color: rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 3px;
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_picker_header_action .format-hour button {
	width: 36px;
	padding: 5px 4px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bk-ink-3);
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_picker_header_action .format-hour button.active {
	color: var(--bk-ink);
	background: rgba(255, 255, 255, 0.15);
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_slot_picker_header .fcal_back .fcal_svg { border-color: rgba(255, 255, 255, 0.3); }
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_slot_picker_header .fcal_back svg path:nth-child(2) { fill: var(--bk-ink); }
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists { padding-top: 2px; }
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot {
	border: 1px solid var(--bk-accent);
	border-radius: var(--bk-radius);
	background: transparent;
	padding: 0;
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot + .fcal_spot { margin-top: 10px; }
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot::before { border-radius: var(--bk-radius); }
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot:hover::before { opacity: 0.12; }
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_name {
	justify-content: center;
	padding: 10px;
	font-size: 14px;
	color: var(--bk-accent);
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_name .fcal_spot_time {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--bk-accent);
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot.fcal_spot_selected { padding: 3px; }
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot.fcal_spot_selected .fcal_spot_name {
	justify-content: flex-start;
	padding: 7px 10px;
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_confirm {
	background: var(--bk-accent);
	color: var(--bk-on-accent);
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
}
.fcal_cal_wrap .fcal_wrap .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_confirm svg path { fill: var(--bk-on-accent); }

/* ---- details form -------------------------------------------------------------------------- */
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details {
	padding: 36px 28px 28px;
	background: var(--bk-card);
}
/* the plugin nests these six deep: .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details … */
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 0;
	border-bottom: 0;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header h3 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: var(--bk-ink);
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg {
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg svg { fill: none; }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back svg path:nth-child(2) { fill: var(--bk-ink); }
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg:hover {
	background: var(--bk-accent);
	border-color: var(--bk-accent);
}
.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg:hover svg path:nth-child(2) { fill: var(--bk-on-accent); }

.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item + .fcal_form_item { margin-top: 18px; }
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_label {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--bk-ink);
}
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_label span { color: var(--bk-danger); }
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content select,
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea,
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content input {
	min-height: 42px;
	padding: 8px 14px;
	border: 1px solid var(--bk-field-line);
	border-radius: 4px;
	background: var(--fcal_input_bg);
	color: var(--bk-ink);
	font-family: inherit;
	font-size: 15px;
	box-shadow: none;
}
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content select:focus,
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea:focus,
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content input:focus {
	border-color: var(--bk-accent);
	box-shadow: 0 0 0 1px var(--bk-accent);
}
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea::placeholder,
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content input::placeholder { color: rgba(255, 255, 255, 0.4); }
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea { height: 96px; }
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group,
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_custom_checkbox { color: var(--bk-ink); }
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_custom_checkbox .checkbox_mark {
	background: var(--fcal_input_bg);
	border-color: var(--bk-field-line);
}
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_validation_error { color: var(--bk-danger); }
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_help_text { color: var(--bk-ink-2); }
/* phone: country code select sits beside the number field */
.fcal_cal_wrap .fcal_wrap .fcal_phone_wrapper .svelte-select {
	--height: 42px;
	border-color: var(--bk-field-line) !important;
	border-radius: 4px !important;
	background: var(--fcal_input_bg) !important;
	color: var(--bk-ink);
}
.fcal_cal_wrap .fcal_wrap .fcal_phone_wrapper .svelte-select.focused { border-color: var(--bk-accent) !important; }
.fcal_cal_wrap .fcal_wrap .fcal_phone_wrapper .svelte-select .fcal_country_code { color: var(--bk-ink); }
/* the primary button: mint, dark text, like zCal's "Schedule Meeting" */
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item button {
	background: var(--bk-accent);
	color: var(--bk-on-accent);
	border: 0;
	border-radius: 4px;
	padding: 9px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.2s;
}
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item button:hover {
	opacity: 1;
	background: #33ffce;
}
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item button:focus-visible {
	outline: 2px solid var(--bk-accent);
	outline-offset: 2px;
}
.fcal_cal_wrap .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item.fcal_submit { margin-top: 24px; }

/* ---- confirmation -------------------------------------------------------------------------- */
.fcal_cal_wrap .fcal_wrap .fcal_booking_confirmed { color: var(--bk-ink); }
.fcal_cal_wrap .fcal_wrap .fcal_booking_confirmed ul.fcal_conform_items { border-color: var(--bk-line); }
.fcal_cal_wrap .fcal_wrap .fcal_booking_confirmed .fcal_to_calendars a img { filter: invert(1); }
.fcal_cal_wrap .fcal_wrap .fcal_booking_confirmed a { color: var(--bk-accent); }

/* ---- mobile (767 is the page-wide switch) -------------------------------------------------- */
@media (max-width: 767px) {
	.fcal_cal_wrap,
	.fcal-dark-mode.fcal_cal_wrap { padding: 24px 12px; }
	.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side {
		width: 100%;
		min-width: 100%;
		min-height: 0;
		padding: 28px 20px 12px;
	}
	.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side .fcal_author_avatar img {
		width: 120px;
		height: 120px;
	}
	.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_side .fcal_slot_heading { font-size: 22px; }
	.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .calendar-container { padding: 20px 20px 24px; }
	.fcal_cal_wrap .fcal_wrap .fcal_calendar_slot_wrap .calendar { column-gap: 8px; }
	.fcal_cal_wrap .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details { padding: 24px 20px; }
}