/************************************************************************************************/
/* BRAND TOKENS (matches the Place widgets' design system 1:1 -- see theme's                     */
/* place-details.css -- kept as a local copy here since this plugin ships its own stylesheet)    */
/************************************************************************************************/

:root {
	--tbbia-pink: #E6007E;
	--tbbia-blue: #00ADEF;
	--tbbia-purple: #6C2D91;
	--tbbia-orange: #F47920;
	--tbbia-yellow: #FFF200;
	--tbbia-green: #00A651;
	--tbbia-navy: #0E1B29;
	--tbbia-dark: #111827;

	--tbbia-font-display: "Fredoka", sans-serif;
	--tbbia-font-outfit: "Outfit", sans-serif;
	--tbbia-font-sans: "Inter", sans-serif;

	--tbbia-radius-lg: 24px;
	--tbbia-radius-md: 16px;
	--tbbia-radius-sm: 12px;

	--tbbia-card-border: 2px solid var(--tbbia-dark);
	--tbbia-shadow: 4px 4px 0 0 var(--tbbia-dark);
	--tbbia-shadow-hover: 6px 6px 0 0 var(--tbbia-dark);
	--tbbia-shadow-sm: 2px 2px 0 0 var(--tbbia-dark);
	--tbbia-shadow-sm-hover: 3px 3px 0 0 var(--tbbia-dark);
}

@keyframes tbbia-event-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/************************************************************************************************/
/* EVENT HERO                                                                                     */
/************************************************************************************************/

.tbbia-event-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-color: #1a1a1a;
	border-radius: 12px;
	overflow: hidden;
	padding: 32px;
}

.tbbia-event-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.75 ), rgba( 0, 0, 0, 0.1 ) );
}

.tbbia-event-hero__content {
	position: relative;
	z-index: 1;
	color: #fff;
}

.tbbia-event-hero__badge {
	display: inline-block;
	background: #fff;
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.tbbia-event-hero__cancelled {
	display: inline-block;
	background: #d63638;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	margin: 0 0 10px 8px;
}

.tbbia-event-hero__title {
	font-size: clamp( 28px, 4vw, 48px );
	margin: 0 0 10px;
	color: #fff;
}

.tbbia-event-hero__meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 16px;
}

/************************************************************************************************/
/* SHARED: EVENT TAG, PILLS, BUTTONS (mirrors the Place widgets' shared tag/pill/button system)  */
/************************************************************************************************/

.tbbia-event-tag {
	display: inline-block;
	background: var(--tbbia-pink);
	color: #fff;
	font-family: var(--tbbia-font-outfit);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 12px;
	transform: rotate(-3deg);
	border: 1px dashed #fff;
	box-shadow: var(--tbbia-shadow-sm);
}

.tbbia-event-tag--panel {
	position: absolute;
	top: -20px;
	left: 32px;
	z-index: 3;
	margin-bottom: 0;
}

.tbbia-event-heading-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tbbia-pink);
	animation: tbbia-event-pulse 2s ease-in-out infinite;
}

.tbbia-event-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-family: var(--tbbia-font-outfit);
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 2px solid var(--tbbia-dark);
	box-shadow: var(--tbbia-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tbbia-event-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--tbbia-shadow-hover);
}

.tbbia-event-btn:active {
	transform: translate(0, 0);
	box-shadow: var(--tbbia-shadow);
}

.tbbia-event-btn--primary {
	background: var(--tbbia-event-accent, var(--tbbia-pink));
	color: #fff;
	width: 100%;
}

.tbbia-event-btn--blue {
	background: var(--tbbia-blue);
	color: #fff;
	padding: 10px 18px;
	font-size: 11px;
	box-shadow: var(--tbbia-shadow-sm);
}

.tbbia-event-btn--blue:hover {
	box-shadow: var(--tbbia-shadow-sm-hover);
}

.tbbia-event-btn--blue:active {
	box-shadow: var(--tbbia-shadow-sm);
}

.tbbia-event-btn-arrow {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	color: var(--tbbia-pink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
}

.tbbia-event-empty-notice {
	background: #fff8e6;
	border: 1px dashed #e0b400;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
	color: #6b5900;
}

/************************************************************************************************/
/* EVENT INFO PANEL                                                                               */
/************************************************************************************************/

.tbbia-event-info-panel {
	position: relative;
	background: #fff;
	border: var(--tbbia-card-border);
	border-radius: var(--tbbia-radius-lg);
	box-shadow: var(--tbbia-shadow);
	padding: 32px 24px 24px;
	font-family: var(--tbbia-font-sans);
}

.tbbia-event-info-row {
	padding: 14px 0;
	border-top: 1px solid #e5e7eb;
}

.tbbia-event-info-row:first-of-type {
	border-top: none;
	padding-top: 0;
}

.tbbia-event-eyebrow {
	display: block;
	font-family: var(--tbbia-font-outfit);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #9ca3af;
	margin-bottom: 8px;
}

.tbbia-event-info-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.tbbia-event-info-status .tbbia-event-eyebrow {
	margin-bottom: 0;
}

.tbbia-event-address {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tbbia-navy);
}

.tbbia-event-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--tbbia-font-outfit);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	color: var(--tbbia-orange);
}

.tbbia-event-contact-link:hover {
	color: var(--tbbia-pink);
}

.tbbia-event-contact-link--website {
	color: var(--tbbia-blue);
}

.tbbia-event-contact-link--website:hover {
	color: var(--tbbia-purple);
}

.tbbia-event-external-icon {
	font-size: 10px;
	opacity: 0.6;
}

.tbbia-event-cost-pill {
	display: inline-block;
	background: rgba(0, 173, 239, 0.1);
	color: var(--tbbia-blue);
	border: 1px solid rgba(0, 173, 239, 0.3);
	font-family: var(--tbbia-font-outfit);
	font-weight: 800;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 999px;
}

.tbbia-event-cancelled-banner {
	display: block;
	background: var(--tbbia-pink);
	color: #fff;
	font-family: var(--tbbia-font-outfit);
	font-weight: 800;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	padding: 10px 14px;
	border-radius: var(--tbbia-radius-sm);
	margin-bottom: 16px;
}

.tbbia-event-info-panel__series {
	margin-top: 4px;
	font-family: var(--tbbia-font-outfit);
	font-size: 12px;
	font-weight: 600;
	color: var(--tbbia-navy);
	opacity: 0.8;
}

.tbbia-event-info-panel__series a {
	color: var(--tbbia-purple);
}

/************************************************************************************************/
/* EVENT STATUS BADGE / PILL                                                                      */
/************************************************************************************************/

.tbbia-event-status-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--tbbia-font-outfit);
	font-weight: 800;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid;
	animation: tbbia-event-pulse 2s ease-in-out infinite;
}

.tbbia-event-status-badge--upcoming {
	background: rgba(0, 173, 239, 0.1);
	color: var(--tbbia-blue);
	border-color: rgba(0, 173, 239, 0.3);
}

.tbbia-event-status-badge--happening_now {
	background: rgba(0, 166, 81, 0.1);
	color: var(--tbbia-green);
	border-color: rgba(0, 166, 81, 0.3);
}

.tbbia-event-status-badge--past {
	background: rgba(17, 24, 39, 0.06);
	color: #6b7280;
	border-color: rgba(17, 24, 39, 0.15);
}

.tbbia-event-status-badge--cancelled {
	background: rgba(230, 0, 126, 0.1);
	color: var(--tbbia-pink);
	border-color: rgba(230, 0, 126, 0.3);
}

.tbbia-event-status-badge--overlay {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}

/************************************************************************************************/
/* EVENT DATE & LOCATION                                                                          */
/************************************************************************************************/

.tbbia-event-date-location {
	position: relative;
	background: #fff;
	border: var(--tbbia-card-border);
	border-radius: var(--tbbia-radius-lg);
	box-shadow: var(--tbbia-shadow);
	padding: 32px 24px 24px;
	font-family: var(--tbbia-font-sans);
}

/************************************************************************************************/
/* EVENT DATE BLOCK (shared: Date & Location, Info Panel)                                        */
/************************************************************************************************/

.tbbia-event-when-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.tbbia-event-date-block {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	padding: 4px;
	background: var(--tbbia-event-accent, var(--tbbia-pink));
	border: var(--tbbia-card-border);
	border-radius: var(--tbbia-radius-sm);
	box-shadow: var(--tbbia-shadow-sm);
	color: #fff;
	font-family: var(--tbbia-font-outfit);
}

.tbbia-event-date-block__month {
	font-size: 11px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.tbbia-event-date-block__day {
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
}

.tbbia-event-date-block__weekday {
	font-size: 9px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.85;
}

.tbbia-event-when-text {
	flex: 1;
	min-width: 0;
}

.tbbia-event-when-text .tbbia-event-eyebrow {
	margin-bottom: 4px;
}

.tbbia-event-when-text .tbbia-event-address {
	margin: 0;
}

/************************************************************************************************/
/* EVENT ABOUT                                                                                    */
/************************************************************************************************/

.tbbia-event-about {
	background: #fff;
	border: var(--tbbia-card-border);
	border-radius: var(--tbbia-radius-lg);
	box-shadow: var(--tbbia-shadow);
	padding: 24px;
	font-family: var(--tbbia-font-sans);
}

.tbbia-event-about__heading {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-family: var(--tbbia-font-outfit) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	line-height: 1.3 !important;
	color: var(--tbbia-dark) !important;
	margin: 0 0 16px !important;
	padding-bottom: 12px !important;
	border-bottom: 2px dashed #f3f4f6 !important;
}

.tbbia-event-about__heading i {
	color: var(--tbbia-purple);
}

.tbbia-event-about__content {
	color: var(--tbbia-navy);
	font-size: 15px;
	line-height: 1.7;
}

.tbbia-event-about__content p {
	margin: 0 0 16px;
}

.tbbia-event-about__content p:last-child {
	margin-bottom: 0;
}

/************************************************************************************************/
/* EVENT MAP                                                                                      */
/************************************************************************************************/

.tbbia-event-map {
	background: #fff;
	border: var(--tbbia-card-border);
	border-radius: var(--tbbia-radius-lg);
	box-shadow: var(--tbbia-shadow);
	overflow: hidden;
	font-family: var(--tbbia-font-sans);
}

.tbbia-event-map__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--tbbia-dark);
	color: #fff;
	padding: 14px 20px;
	font-family: var(--tbbia-font-outfit);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tbbia-event-map__venue-name {
	color: var(--tbbia-blue);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.tbbia-event-map__frame {
	width: 100%;
	height: 320px;
}

.tbbia-event-map__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.tbbia-event-map__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: #f9fafb;
	border-top: 2px dashed #e5e7eb;
	padding: 14px 20px;
}

.tbbia-event-map__address {
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
}

.tbbia-event-map__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/************************************************************************************************/
/* EVENT CATEGORIES                                                                               */
/************************************************************************************************/

.tbbia-event-categories__heading {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-family: var(--tbbia-font-outfit) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--tbbia-dark) !important;
	margin: 0 0 16px !important;
}

.tbbia-event-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tbbia-event-categories__pill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--tbbia-font-outfit);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
	text-decoration: none;
	border: 1px solid rgba(17, 24, 39, 0.2);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.tbbia-event-categories__pill:hover {
	transform: translateY(-1px) rotate(-1deg);
	box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.25);
	filter: brightness(1.05);
}

.tbbia-event-categories__pill:nth-child(4n+1) { background: var(--tbbia-pink); }
.tbbia-event-categories__pill:nth-child(4n+2) { background: var(--tbbia-blue); }
.tbbia-event-categories__pill:nth-child(4n+3) { background: var(--tbbia-purple); }
.tbbia-event-categories__pill:nth-child(4n+4) { background: var(--tbbia-orange); }

/************************************************************************************************/
/* EVENT CARD (Directory grid/list + Next Events)                                                */
/************************************************************************************************/

.tbbia-event-card {
	display: block;
	background: #fff;
	border: var(--tbbia-card-border);
	border-radius: var(--tbbia-radius-md);
	box-shadow: var(--tbbia-shadow-sm);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	font-family: var(--tbbia-font-sans);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tbbia-event-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--tbbia-shadow-sm-hover);
}

.tbbia-event-card.is-cancelled {
	opacity: 0.6;
}

.tbbia-event-card__image {
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: var(--tbbia-navy);
	border-bottom: var(--tbbia-card-border);
}

.tbbia-event-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tbbia-event-card__badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: var(--tbbia-pink);
	color: #fff;
	font-family: var(--tbbia-font-outfit);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 5px 12px;
	border-radius: 999px;
}

.tbbia-event-card.is-cancelled .tbbia-event-card__badge {
	background: #9ca3af;
}

.tbbia-event-card__title {
	font-family: var(--tbbia-font-outfit);
	font-weight: 700;
	font-size: 17px;
	color: var(--tbbia-dark);
	margin: 0;
	line-height: 1.3;
}

.tbbia-event-card__venue {
	font-family: var(--tbbia-font-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--tbbia-navy);
}

.tbbia-event-card__category {
	display: inline-block;
	align-self: flex-start;
	background: rgba(108, 45, 145, 0.1);
	color: var(--tbbia-purple);
	border: 1px solid rgba(108, 45, 145, 0.3);
	font-family: var(--tbbia-font-outfit);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 10px;
	border-radius: 999px;
}

.tbbia-event-card__venue-icon {
	margin-right: 4px;
}

.tbbia-event-card__excerpt {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.5;
	margin: 6px 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 3;
}

/************************************************************************************************/
/* EVENTS DIRECTORY                                                                               */
/************************************************************************************************/

.tbbia-events-directory__filters,
.tbbia-events-calendar__filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.tbbia-events-directory__filter,
.tbbia-events-calendar__filter {
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 20px;
	padding: 6px 16px;
	cursor: pointer;
	font-size: 14px;
}

.tbbia-events-directory__filter.is-active,
.tbbia-events-calendar__filter.is-active {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}

.tbbia-events-directory__grid--grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( 3, 1fr );
}

.tbbia-events-directory__grid--grid.tbbia-events-directory__cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.tbbia-events-directory__grid--grid.tbbia-events-directory__cols-4 { grid-template-columns: repeat( 4, 1fr ); }

.tbbia-events-directory__grid--list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tbbia-events-directory__grid--list .tbbia-event-card {
	display: flex;
}

.tbbia-events-directory__grid--list .tbbia-event-card__image {
	width: 200px;
	height: auto;
	flex-shrink: 0;
}

.tbbia-events-directory__load-more-wrap {
	text-align: center;
	margin-top: 32px;
}

.tbbia-events-directory__load-more {
	border: 1px solid #1a1a1a;
	background: #fff;
	border-radius: 6px;
	padding: 10px 28px;
	cursor: pointer;
	font-weight: 600;
}

.tbbia-events-directory__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: #666;
}

@media ( max-width: 767px ) {
	.tbbia-events-directory__grid--grid,
	.tbbia-events-directory__grid--grid.tbbia-events-directory__cols-2,
	.tbbia-events-directory__grid--grid.tbbia-events-directory__cols-4 {
		grid-template-columns: 1fr;
	}
	.tbbia-events-directory__grid--list .tbbia-event-card {
		flex-direction: column;
	}
	.tbbia-events-directory__grid--list .tbbia-event-card__image {
		width: 100%;
	}
}

/************************************************************************************************/
/* EVENTS CALENDAR                                                                                */
/************************************************************************************************/

/*  reset native OS/browser <button> chrome -- without this, some browsers (notably Safari on
    macOS) paint the system accent color as a "pressed" tint on top of our custom background
    when a button is clicked, regardless of what background-color is set. That native tint is
    what shows up as an uncontrollable pink/blue flash and isn't reachable from any CSS rule
    until appearance is reset                                                                  */
.tbbia-events-calendar__cell,
.tbbia-events-calendar__nav,
.tbbia-events-calendar__today-btn,
.tbbia-events-calendar__view-btn,
.tbbia-events-calendar__filter {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/**/
/* Wrapper / Navigation Position -- "top" (default) is a plain top-to-bottom stack, matching
   the original markup order. "bottom" reverses the stack so the grid renders first. "left"/
   "right" put the controls (header, view switcher, filters) in a side column next to the
   grid/list content; Controls Width sets that column's width                              */
.tbbia-events-calendar {
	display: flex;
	flex-direction: column;
}

.tbbia-events-calendar__content {
	flex: 1 1 auto;
	min-width: 0;
}

/*  instant feedback the moment a view/nav/filter click fires, so the calendar doesn't sit
    looking frozen for the length of the AJAX round trip -- removed the instant the new
    markup swaps in (see gridWrap.className reset in events-directory.js)                  */
.tbbia-events-calendar__grid-wrap {
	transition: opacity 0.15s ease;
}

.tbbia-events-calendar__grid-wrap.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.tbbia-events-calendar--nav-bottom {
	flex-direction: column-reverse;
}

.tbbia-events-calendar--nav-left,
.tbbia-events-calendar--nav-right {
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
}

.tbbia-events-calendar--nav-right {
	flex-direction: row-reverse;
}

.tbbia-events-calendar--nav-left .tbbia-events-calendar__controls,
.tbbia-events-calendar--nav-right .tbbia-events-calendar__controls {
	flex: 0 0 220px;
	width: 220px;
}

@media ( max-width: 767px ) {
	.tbbia-events-calendar--nav-left,
	.tbbia-events-calendar--nav-right {
		flex-direction: column;
	}

	.tbbia-events-calendar--nav-left .tbbia-events-calendar__controls,
	.tbbia-events-calendar--nav-right .tbbia-events-calendar__controls {
		width: 100%;
		flex-basis: auto;
	}
}

.tbbia-events-calendar__header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 16px;
}

.tbbia-events-calendar__nav {
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.tbbia-events-calendar__label {
	font-size: 20px;
	font-weight: 700;
	min-width: 160px;
	text-align: center;
}

.tbbia-events-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: #666;
	margin-bottom: 6px;
}

.tbbia-events-calendar__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
}

.tbbia-events-calendar__cell {
	min-height: 90px;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	background: #fff;
	cursor: default;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 4px;
}

.tbbia-events-calendar__cell.is-empty {
	border: none;
	background: transparent;
}

/*  a clicked cell stays focused (not just "active") until something else takes focus, and
    Safari/Chrome paint a focused native button with the OS accent color -- that's the pink
    that lingers after clicking a day and moving the mouse away. :focus-visible only fires for
    keyboard/programmatic focus (not a plain mouse click), so this keeps a real focus ring for
    keyboard users while removing the native color bleed on click. Background/border color for
    :focus itself are controlled from Elementor (Cell Focus/Selected Background & Border)      */
.tbbia-events-calendar__cell:focus {
	outline: none;
}

.tbbia-events-calendar__cell:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tbbia-events-calendar__cell.is-today {
	border-color: #1a1a1a;
	font-weight: 700;
}

.tbbia-events-calendar__cell.has-events {
	cursor: pointer;
}

.tbbia-events-calendar__day-number {
	font-size: 14px;
}

.tbbia-events-calendar__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #b5851f;
	position: absolute;
	bottom: 6px;
}

.tbbia-events-calendar__day-detail {
	margin-top: 20px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

/*  [hidden] must win over the "display: grid" rule above -- same specificity (0,1,0) as the
    class selector, so without this the author rule beats the browser's default [hidden]
    { display: none } and the box stays visible (with stale content) after JS sets .hidden = true,
    e.g. switching from Month to Week view right after opening the day detail list           */
.tbbia-events-calendar__day-detail[hidden] {
	display: none;
}

.tbbia-events-calendar__day-event {
	display: flex;
	justify-content: space-between;
	padding: 12px;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.tbbia-events-calendar__day-event.is-cancelled {
	opacity: 0.6;
}

/************************************************************************************************/
/* EVENTS CALENDAR: VIEW SWITCHER + TODAY BUTTON                                                */
/************************************************************************************************/

.tbbia-events-calendar__view-switcher {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
}

.tbbia-events-calendar__view-btn,
.tbbia-events-calendar__today-btn {
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 20px;
	padding: 6px 16px;
	cursor: pointer;
	font-size: 13px;
}

.tbbia-events-calendar__view-btn.is-active {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}

/************************************************************************************************/
/* EVENTS CALENDAR: WEEK VIEW                                                                    */
/************************************************************************************************/

.tbbia-events-calendar__week-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
	max-width: 100%;
	overflow-x: auto;
}

/*  grid/flex items default to "min-width: auto", which floors their size at their content's
    min-content width -- a long event title can then force a column wider than its 1fr share,
    pushing the whole 7-column grid past the container and clipping the last day(s) off the
    right edge. min-width: 0 lets each level actually shrink to its fair share instead, so
    the ellipsis on .event-chip-title (not the grid) is what handles long titles             */
.tbbia-events-calendar__week-day {
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 8px;
	min-height: 160px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tbbia-events-calendar__week-day.is-today {
	border-color: #1a1a1a;
}

.tbbia-events-calendar__week-day-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	padding-bottom: 6px;
	border-bottom: 1px solid #eaeaea;
}

.tbbia-events-calendar__week-day-num {
	font-size: 16px;
}

.tbbia-events-calendar__week-day-events {
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
	min-width: 0;
}

.tbbia-events-calendar__event-chip {
	display: flex;
	align-items: baseline;
	gap: 4px;
	background: #f4f4f4;
	color: inherit;
	text-decoration: none;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 6px;
	overflow: hidden;
	min-width: 0;
}

.tbbia-events-calendar__event-chip.is-cancelled {
	opacity: 0.6;
	text-decoration: line-through;
}

.tbbia-events-calendar__event-chip-time {
	flex-shrink: 0;
	font-weight: 700;
	opacity: 0.75;
}

.tbbia-events-calendar__event-chip-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*  EVENT CONTAINER LAYOUT -- "stacked" (default) is the existing one-per-row list above;
    "wrap" arranges the day's events into a fixed-column grid instead of one-per-row, so
    multiple chips sit side by side. Grid (not flex-wrap) is used because flex-wrap lets
    items shrink indefinitely instead of wrapping -- Chips Per Row/Chip Gap controls set
    grid-template-columns/gap below, these are just the fallback defaults                   */
.tbbia-events-calendar--week-chips-wrap .tbbia-events-calendar__week-day-events {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 4px;
	align-items: start;
}

.tbbia-events-calendar--week-chips-wrap .tbbia-events-calendar__event-chip {
	min-width: 0;
}

/*  TIME POSITION -- "beside" (default) is the existing single-line row above. "above"/"below"
    stack the time and title vertically inside the chip; "below" additionally reorders them
    since the title always renders first in the markup after the time in "above"/"beside"    */
.tbbia-events-calendar--week-time-above .tbbia-events-calendar__event-chip,
.tbbia-events-calendar--week-time-below .tbbia-events-calendar__event-chip {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.tbbia-events-calendar--week-time-below .tbbia-events-calendar__event-chip-time {
	order: 2;
}

.tbbia-events-calendar--week-time-below .tbbia-events-calendar__event-chip-title {
	order: 1;
}

/*  LONG TITLE BEHAVIOR -- "truncate" (default) is the existing single-line ellipsis above.
    "wrap" lets the title flow onto multiple lines instead, clamped at the configured Max
    Lines via -webkit-line-clamp (set by the widget's control, this just enables the box     */
.tbbia-events-calendar--week-title-wrap .tbbia-events-calendar__event-chip-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	text-overflow: clip;
}

@media ( max-width: 767px ) {
	.tbbia-events-calendar__week-grid {
		grid-template-columns: 1fr;
	}
}

/************************************************************************************************/
/* EVENTS CALENDAR: DAY VIEW                                                                     */
/************************************************************************************************/

.tbbia-events-calendar__day-view-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.tbbia-events-calendar__day-view-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.tbbia-events-calendar__day-view-item.is-cancelled {
	opacity: 0.6;
}

.tbbia-events-calendar__day-view-time {
	font-size: 12px;
	font-weight: 700;
	color: #b5851f;
	text-transform: uppercase;
}

.tbbia-events-calendar__day-view-title {
	font-size: 16px;
}

.tbbia-events-calendar__day-view-venue {
	font-size: 13px;
	color: #666;
}

.tbbia-events-calendar__day-view-empty,
.tbbia-events-calendar__agenda-empty {
	color: #666;
	text-align: center;
	padding: 20px 0;
}

/************************************************************************************************/
/* EVENTS CALENDAR: LIST / AGENDA VIEW                                                           */
/************************************************************************************************/

.tbbia-events-calendar__agenda-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.tbbia-events-calendar__agenda-date {
	grid-column: 1 / -1;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #666;
	margin: 12px 0 0;
}

.tbbia-events-calendar__agenda-date:first-child {
	margin-top: 0;
}

.tbbia-events-calendar__agenda-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.tbbia-events-calendar__agenda-item.is-cancelled {
	opacity: 0.6;
}

.tbbia-events-calendar__agenda-item-title {
	font-size: 15px;
	font-weight: 600;
}

.tbbia-events-calendar__agenda-item-time {
	font-size: 13px;
	color: #666;
}

.tbbia-events-calendar__agenda-item-meta {
	font-size: 13px;
	color: #666;
}

.tbbia-events-calendar__agenda-load-more-wrap {
	text-align: center;
	margin-top: 20px;
}

.tbbia-events-calendar__agenda-load-more {
	border: 1px solid #1a1a1a;
	background: #fff;
	border-radius: 6px;
	padding: 10px 28px;
	cursor: pointer;
	font-weight: 600;
}

/************************************************************************************************/
/* EVENTS CALENDAR: MOBILE RESPONSIVE (Day View, List View, Month Day-Detail)                    */
/************************************************************************************************/

@media ( max-width: 767px ) {
	/* Month View day-detail list: date/time above the title instead of beside it */
	.tbbia-events-calendar__day-event {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 4px;
	}
}

/************************************************************************************************/
/* NEXT EVENTS                                                                                    */
/************************************************************************************************/

.tbbia-next-events {
	font-family: var(--tbbia-font-sans);
}

.tbbia-next-events__heading {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-family: var(--tbbia-font-outfit) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--tbbia-dark) !important;
	margin: 0 0 16px !important;
}

/**/
/* LIST LAYOUT (default) -- a single bordered card with dashed-divider rows                       */
/**/
.tbbia-next-events--list .tbbia-next-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border: var(--tbbia-card-border);
	border-radius: var(--tbbia-radius-lg);
	box-shadow: var(--tbbia-shadow);
	overflow: hidden;
}

.tbbia-next-events--list .tbbia-next-events__list li {
	border-bottom: 2px dashed #e5e7eb;
}

.tbbia-next-events--list .tbbia-next-events__list li:last-child {
	border-bottom: 0;
}

.tbbia-next-events--list .tbbia-next-events__list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}

.tbbia-next-events--list .tbbia-next-events__list a:hover {
	background: #f9fafb;
}

.tbbia-next-events--list.is-cancelled a {
	opacity: 0.6;
}

.tbbia-next-events__date {
	flex-shrink: 0;
	display: inline-block;
	font-family: var(--tbbia-font-outfit);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--tbbia-pink);
	background: rgba(230, 0, 126, 0.1);
	border: 1px solid rgba(230, 0, 126, 0.3);
	padding: 6px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.tbbia-next-events__title {
	font-family: var(--tbbia-font-outfit);
	font-weight: 700;
	font-size: 15px;
	color: var(--tbbia-dark);
}

@media (max-width: 768px) {
	.tbbia-next-events--list .tbbia-next-events__list a {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/**/
/* CARDS LAYOUT (single row of Event Cards) */
/**/
.tbbia-next-events__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( 3, 1fr );
}

.tbbia-next-events__grid.tbbia-next-events__cols-1 { grid-template-columns: 1fr; }
.tbbia-next-events__grid.tbbia-next-events__cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.tbbia-next-events__grid.tbbia-next-events__cols-4 { grid-template-columns: repeat( 4, 1fr ); }

@media (max-width: 768px) {
	.tbbia-next-events__grid,
	.tbbia-next-events__grid.tbbia-next-events__cols-2,
	.tbbia-next-events__grid.tbbia-next-events__cols-4 {
		grid-template-columns: 1fr;
	}
}

.tbbia-next-events__view-all {
	margin-top: 20px;
}

.tbbia-next-events__empty {
	font-family: var(--tbbia-font-outfit);
	font-size: 14px;
	font-weight: 600;
	color: var(--tbbia-navy);
	opacity: 0.7;
}