.bb-events-calendar {
	--bb-ec-container-bg: transparent;
	--bb-ec-dropdown-bg: #ffffff;
	--bb-ec-dropdown-text: #1a1a1a;
	--bb-ec-dropdown-icon: #1a1a1a;
	--bb-ec-dropdown-hover-bg: #f2f2f2;
	--bb-ec-switcher-icon: #ffffff;
	--bb-ec-switcher-icon-active: #0b3d20;
	--bb-ec-switcher-bg-active: #ffffff;
	--bb-ec-switcher-hover-bg: rgba( 255, 255, 255, 0.12 );
	--bb-ec-switcher-size: 16px;
	--bb-ec-nav-icon: #ffffff;
	--bb-ec-nav-icon-hover: #cfe8d8;
	--bb-ec-nav-hover-bg: rgba( 255, 255, 255, 0.08 );
	--bb-ec-nav-size: 14px;
	--bb-ec-weekday-color: #8fbf9f;
	--bb-ec-grid-border: rgba( 255, 255, 255, 0.15 );
	--bb-ec-day-bg: transparent;
	--bb-ec-day-hover-bg: rgba( 255, 255, 255, 0.06 );
	--bb-ec-day-number-color: #ffffff;
	--bb-ec-other-month-opacity: 0.35;
	--bb-ec-today-bg: rgba( 255, 255, 255, 0.08 );
	--bb-ec-today-text: #ffffff;
	--bb-ec-selected-border-color: #3b6bf5;
	--bb-ec-selected-border-width: 2px;
	--bb-ec-event-color: #ffd166;
	--bb-ec-event-hover-color: #ffe08a;
	--bb-ec-event-text: #0b3d20;
	--bb-ec-more-events-color: #cfe8d8;
	--bb-ec-list-item-bg: rgba( 255, 255, 255, 0.05 );
	--bb-ec-list-item-hover-bg: rgba( 255, 255, 255, 0.1 );
	--bb-ec-list-item-border: rgba( 255, 255, 255, 0.15 );
	--bb-ec-list-badge-bg: #ffd166;
	--bb-ec-list-badge-text: #0b3d20;
	--bb-ec-list-title-color: #ffffff;
	--bb-ec-list-meta-color: #cfe8d8;
	--bb-ec-list-desc-color: rgba( 255, 255, 255, 0.75 );
	--bb-ec-list-gap: 10px;
	--bb-ec-tooltip-bg: #ffffff;
	--bb-ec-tooltip-time-color: #0b3d20;
	--bb-ec-tooltip-link-color: #0b3d20;
	--bb-ec-tooltip-title-color: #1a1a1a;
	--bb-ec-tooltip-text-color: #555555;
	--bb-ec-tooltip-border-color: rgba( 0, 0, 0, 0.08 );
	--bb-ec-tooltip-border-width: 1px;
	--bb-ec-tooltip-max-width: 260px;

	background: var( --bb-ec-container-bg );
	border-radius: var( --bb-ec-container-radius, 0 );
	padding: var( --bb-ec-container-padding, 0 );
	box-sizing: border-box;
	font-family: inherit;
}

.bb-events-calendar * {
	box-sizing: border-box;
}

.bb-ec-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.bb-ec-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	min-width: 0;
}

.bb-ec-nav-btn {
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --bb-ec-nav-icon );
	font-size: var( --bb-ec-nav-size );
	padding: 6px;
	border-radius: 4px;
	line-height: 1;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.bb-ec-nav-btn:hover {
	color: var( --bb-ec-nav-icon-hover );
	background-color: var( --bb-ec-nav-hover-bg );
}

/* Without this, the browser/theme default focus color (often fuchsia) sticks
   to the button after a click until focus is lost elsewhere — keep focus in
   the same palette as hover instead of an unstyled default. */
.bb-ec-nav-btn:focus {
	outline: none;
	color: var( --bb-ec-nav-icon-hover );
	background-color: var( --bb-ec-nav-hover-bg );
}

.bb-ec-nav-btn:focus-visible {
	outline: 2px solid var( --bb-ec-nav-icon-hover );
	outline-offset: 1px;
}

.bb-ec-dropdown {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.bb-ec-dropdown select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: var( --bb-ec-dropdown-bg );
	color: var( --bb-ec-dropdown-text );
	border: 0;
	border-radius: var( --bb-ec-dropdown-radius, 6px );
	padding: var( --bb-ec-dropdown-padding, 6px 28px 6px 12px );
	cursor: pointer;
	font: inherit;
}

.bb-ec-dropdown select:hover {
	background-color: var( --bb-ec-dropdown-hover-bg );
}

.bb-ec-dropdown-caret {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY( -50% );
	pointer-events: none;
	color: var( --bb-ec-dropdown-icon );
	font-size: 0.7em;
}

.bb-ec-view-switcher {
	display: inline-flex;
	background: rgba( 255, 255, 255, 0.12 );
	border-radius: 6px;
	padding: 2px;
	gap: 2px;
}

.bb-ec-view-btn {
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 4px;
	color: var( --bb-ec-switcher-icon );
	font-size: var( --bb-ec-switcher-size );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bb-ec-view-btn:not( .is-active ):hover {
	background: var( --bb-ec-switcher-hover-bg );
}

.bb-ec-view-btn.is-active {
	background: var( --bb-ec-switcher-bg-active );
	color: var( --bb-ec-switcher-icon-active );
}

.bb-ec-body {
	position: relative;
}

.bb-ec-calendar-view,
.bb-ec-list-view {
	display: none;
}

.bb-events-calendar[data-active-view='calendar'] .bb-ec-calendar-view {
	display: block;
}

.bb-events-calendar[data-active-view='list'] .bb-ec-list-view {
	display: block;
}

.bb-ec-weekdays {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	min-width: 0;
	border-bottom: 1px solid var( --bb-ec-grid-border );
	padding-bottom: 8px;
	margin-bottom: 4px;
}

.bb-ec-weekday {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --bb-ec-weekday-color );
}

.bb-ec-grid {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	min-width: 0;
}

.bb-ec-day {
	min-height: 90px;
	min-width: 0;
	border: 1px solid var( --bb-ec-grid-border );
	margin: -1px 0 0 -1px;
	padding: 8px;
	background: var( --bb-ec-day-bg );
	transition: background-color 0.15s ease;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bb-ec-day:hover {
	background: var( --bb-ec-day-hover-bg );
}

.bb-ec-day.is-other-month {
	opacity: var( --bb-ec-other-month-opacity );
}

.bb-ec-day.is-today {
	background: var( --bb-ec-today-bg );
	box-shadow: inset 0 0 0 var( --bb-ec-selected-border-width ) var( --bb-ec-selected-border-color );
}

.bb-ec-day.is-today .bb-ec-day-number {
	color: var( --bb-ec-today-text );
}

.bb-ec-day-number {
	font-size: 14px;
	font-weight: 600;
	color: var( --bb-ec-day-number-color );
}

.bb-ec-day-events {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bb-events-calendar .bb-ec-event-pill {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
	background: var( --bb-ec-event-color );
	color: var( --bb-ec-event-text );
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 11px;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 0.15s ease;
}

.bb-events-calendar .bb-ec-event-pill:hover {
	background: var( --bb-ec-event-hover-color );
}

.bb-ec-more-events {
	font-size: 11px;
	color: var( --bb-ec-more-events-color );
	padding: 0 6px;
}

.bb-ec-list {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --bb-ec-list-gap );
	align-items: start;
}

.bb-ec-list-item {
	display: grid;
	grid-template-columns: 44px 1fr;
	grid-template-areas:
		"badge title"
		"badge meta"
		"badge desc";
	column-gap: 14px;
	row-gap: 2px;
	align-items: start;
	background: var( --bb-ec-list-item-bg );
	border: 1px solid var( --bb-ec-list-item-border );
	border-radius: 8px;
	padding: 12px 16px;
	text-decoration: none;
	transition: background-color 0.15s ease;
	min-width: 0;
}

.bb-ec-list-item:hover {
	background: var( --bb-ec-list-item-hover-bg );
}

.bb-ec-list-date-badge {
	grid-area: badge;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: var( --bb-ec-list-badge-bg );
	color: var( --bb-ec-list-badge-text );
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
}

.bb-ec-list-title {
	grid-area: title;
	color: var( --bb-ec-list-title-color );
	font-weight: 600;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.bb-ec-list-meta {
	grid-area: meta;
	color: var( --bb-ec-list-meta-color );
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px 14px;
	min-width: 0;
}

.bb-ec-list-meta-group {
	display: inline-flex;
	align-items: flex-start;
	gap: 5px;
	min-width: 0;
}

.bb-ec-list-meta-group svg {
	flex: 0 0 auto;
	margin-top: 2px;
	fill: currentColor;
	opacity: 0.75;
}

.bb-ec-list-meta-text {
	/* A single inline block, not a flex item, so joined venue/address text
	   wraps as one normal paragraph — putting the spans/text nodes from
	   appendJoinedText() directly into the flex group instead made each of
	   them its own shrinking flex item, breaking a long address into a
	   jagged 2-column word-wrap instead of one flowing line. */
	min-width: 0;
}

.bb-ec-list-desc {
	grid-area: desc;
	color: var( --bb-ec-list-desc-color );
	font-size: 13px;
	line-height: 1.4;
	margin-top: 2px;
}

@keyframes bb-ec-skeleton-pulse {
	0%, 100% {
		opacity: 0.35;
	}
	50% {
		opacity: 0.75;
	}
}

.bb-ec-skeleton-block {
	display: block;
	background: rgba( 127, 127, 127, 0.35 );
	border-radius: 4px;
	animation: bb-ec-skeleton-pulse 1.2s ease-in-out infinite;
}

.bb-ec-skeleton-day {
	cursor: default;
}

.bb-ec-skeleton-day:hover {
	background: var( --bb-ec-day-bg );
}

.bb-ec-skeleton-day-number {
	width: 18px;
	height: 12px;
}

.bb-ec-skeleton-list-item {
	cursor: default;
}

.bb-ec-skeleton-list-item:hover {
	background: var( --bb-ec-list-item-bg );
}

.bb-ec-skeleton-badge {
	width: 44px;
	height: 44px;
	border-radius: 6px;
	flex: 0 0 auto;
}

.bb-ec-skeleton-line {
	height: 12px;
	margin-top: 6px;
}

.bb-ec-skeleton-line:first-child {
	margin-top: 0;
}

.bb-ec-skeleton-line-title {
	width: 70%;
	height: 15px;
}

.bb-ec-skeleton-line-meta {
	width: 50%;
}

.bb-ec-skeleton-line-desc {
	width: 90%;
}

.bb-ec-empty {
	text-align: center;
	color: var( --bb-ec-more-events-color );
	padding: 24px 0;
}

.bb-ec-tooltip {
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	max-width: min( var( --bb-ec-tooltip-max-width ), calc( 100vw - 32px ) );
	background: var( --bb-ec-tooltip-bg );
	border: var( --bb-ec-tooltip-border-width ) solid var( --bb-ec-tooltip-border-color );
	border-radius: var( --bb-ec-tooltip-radius, 8px );
	padding: var( --bb-ec-tooltip-padding, 10px 12px );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY( 4px );
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.15 );
}

.bb-ec-tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY( 0 );
}

.bb-ec-tooltip-time {
	color: var( --bb-ec-tooltip-time-color );
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 4px;
}

.bb-ec-tooltip-title {
	color: var( --bb-ec-tooltip-title-color );
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}

.bb-ec-tooltip-address {
	color: var( --bb-ec-tooltip-time-color );
	font-size: 11px;
	font-weight: 600;
	font-style: italic;
	opacity: 0.85;
	margin-bottom: 6px;
}

.bb-ec-tooltip-desc {
	color: var( --bb-ec-tooltip-text-color );
	font-size: 13px;
	line-height: 1.4;
	padding-top: 6px;
	border-top: 1px solid var( --bb-ec-tooltip-border-color, rgba( 0, 0, 0, 0.08 ) );
}

.bb-events-calendar .bb-ec-tooltip-link {
	display: inline-block;
	margin-top: 8px;
	color: var( --bb-ec-tooltip-link-color );
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
	pointer-events: auto;
}

@media ( max-width: 700px ) {
	.bb-ec-list {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 600px ) {
	.bb-ec-day {
		min-height: 60px;
		padding: 4px;
	}

	.bb-ec-event-pill,
	.bb-ec-more-events {
		font-size: 9px;
	}

	.bb-ec-header {
		gap: 8px;
	}

	.bb-ec-dropdown select {
		font-size: 13px;
		padding: var( --bb-ec-dropdown-padding, 5px 24px 5px 10px );
	}

	.bb-ec-weekday {
		font-size: 10px;
	}

	/* Badge + title share the top row, horizontally aligned; meta/description
	   drop to their own full-width rows below instead of being indented
	   under the badge column — the 2-column layout felt cramped once the
	   address line was added. */
	.bb-ec-list-item {
		grid-template-areas:
			"badge title"
			"meta meta"
			"desc desc";
		align-items: center;
	}

	.bb-ec-list-date-badge {
		align-self: center;
	}

	.bb-ec-list-meta {
		margin-top: 6px;
	}
}

@media ( max-width: 420px ) {
	.bb-ec-nav {
		width: 100%;
		justify-content: space-between;
	}

	.bb-ec-dropdown {
		flex: 1 1 auto;
	}

	.bb-ec-dropdown select {
		width: 100%;
	}

	.bb-ec-view-switcher {
		margin: 0 auto;
	}

	.bb-ec-day {
		min-height: 46px;
		gap: 2px;
	}

	.bb-ec-day-number {
		font-size: 12px;
	}
}