/* ── Bookings for WooCommerce — Modern theme ─────────────────────────────── */
/*
 * All colours come from CSS custom properties injected by PHP via bfwc_inject_theme_css_vars().
 * Defaults (matching the "Modern" settings defaults) are declared on :root as a fallback.
 */
:root {
	--bfwc-header-bg:      #3b5fc0;
	--bfwc-header-text:    #ffffff;
	--bfwc-cell-bg:        #ffffff;
	--bfwc-cell-text:      #333333;
	--bfwc-selected-bg:    #3b5fc0;
	--bfwc-selected-text:  #ffffff;
	--bfwc-hover-bg:       #e8ecfb;
	--bfwc-border:         #e0e0e0;
}

/* Wrapper */
.bfwc-theme-modern .ui-datepicker {
	background: var(--bfwc-cell-bg);
	border: 1px solid var(--bfwc-border);
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
	overflow: hidden;
	padding: 0;
	margin-top: 4px;
}

/* Header */
.bfwc-theme-modern .ui-datepicker .ui-datepicker-header {
	background: var(--bfwc-header-bg);
	border-radius: 0;
	margin-bottom: 0;
	padding: 12px 8px;
	text-align: center;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-title {
	color: var(--bfwc-header-text);
	font-weight: 600;
	font-size: 0.95em;
	letter-spacing: 0.02em;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-prev,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-next {
	color: var(--bfwc-header-text);
	opacity: 0.85;
	transition: opacity 0.15s;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-prev:before,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-next:before {
	color: var(--bfwc-header-text);
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-prev:hover,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-next:hover {
	opacity: 1;
}

/* Day-of-week headers */
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar thead,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar thead tr {
	background: transparent;
}
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar thead th {
	background: transparent;
	color: var(--bfwc-cell-text);
	opacity: 0.5;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 8px 0 4px;
	border: 0;
}

/* Cells */
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td {
	background: var(--bfwc-cell-bg);
	border: 0;
	padding: 2px;
	transition: background 0.15s;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td a,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td span {
	color: var(--bfwc-cell-text);
	border-radius: 8px;
	display: block;
	text-align: center;
	padding: 6px 2px;
	transition: background 0.15s, color 0.15s;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td:hover a {
	background: var(--bfwc-hover-bg);
	color: var(--bfwc-cell-text);
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td:hover {
	background: var(--bfwc-cell-bg);
	cursor: pointer;
}

/* Selected / current day */
.bfwc-theme-modern .ui-datepicker .ui-datepicker-current-day a,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-current-day {
	background: var(--bfwc-selected-bg);
	border-radius: 8px;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-current-day a {
	color: var(--bfwc-selected-text) !important;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-current-day a:hover {
	background: var(--bfwc-hover-bg);
	color: var(--bfwc-cell-text) !important;
}

/* Today (not selected) — lighter tint of the selected colour */
.bfwc-theme-modern .ui-datepicker .ui-datepicker-today:not(.ui-datepicker-current-day) a {
	background: var(--bfwc-hover-bg);
	color: var(--bfwc-cell-text);
	font-weight: 600;
}

/* Unselectable / past / other month */
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable {
	background: var(--bfwc-cell-bg);
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable a,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.ui-state-disabled span,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.past a {
	opacity: 0.3;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month span {
	opacity: 0.2;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable:hover {
	cursor: default;
}

.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable:hover a {
	background: transparent;
}

/* Booked dates */
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.booked a,
.bfwc-theme-modern .ui-datepicker .ui-datepicker-calendar td.booked span {
	opacity: 0.25;
	text-decoration: line-through;
}

/* Optimised colours (availability) — these intentionally override the user colour vars */
.bfwc-theme-modern.bfwc-optimise-colours .ui-datepicker .ui-datepicker-calendar td.fully-available a { background: #34a853; color: #fff; border-radius: 8px; }
.bfwc-theme-modern.bfwc-optimise-colours .ui-datepicker .ui-datepicker-calendar td.part-available a  { background: #fbbc04; color: #333; border-radius: 8px; }
.bfwc-theme-modern.bfwc-optimise-colours .ui-datepicker .ui-datepicker-calendar td.unavailable a     { background: #ea4335; color: #fff; border-radius: 8px; }
.bfwc-theme-modern.bfwc-optimise-colours .ui-datepicker .ui-datepicker-calendar td.fully-available,
.bfwc-theme-modern.bfwc-optimise-colours .ui-datepicker .ui-datepicker-calendar td.part-available,
.bfwc-theme-modern.bfwc-optimise-colours .ui-datepicker .ui-datepicker-calendar td.unavailable { background: var(--bfwc-cell-bg); }

/* Wrapper table — retain original grey borders */
.bfwc-theme-modern #bfws-calendar-wrapper table,
.bfwc-theme-modern #bfws-calendar-wrapper table tbody td,
.bfwc-theme-modern #bfws-calendar-wrapper table tfoot,
.bfwc-theme-modern #bfws-calendar-wrapper table tfoot td {
	border-color: #eee;
}

/* Input fields */
.bfwc-theme-modern #bfws-calendar-wrapper input[type=text] {
	border-radius: 8px;
	border: 1px solid var(--bfwc-border);
	background: var(--bfwc-cell-bg);
	color: var(--bfwc-cell-text);
	transition: border-color 0.15s;
}

.bfwc-theme-modern #bfws-calendar-wrapper input[type=text]:focus {
	border-color: var(--bfwc-header-bg);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bfwc-header-bg) 15%, transparent);
}