/*
 * Sam Calendar Booking: tiles and lightbox.
 *
 * Own CSS, written for this plugin (nothing copied from EventOn). Class names
 * match the EventOn markup the site used before, so a theme's existing rules
 * for them keep applying; everything here is scoped to .scb-cal / .scb-lightbox
 * and takes colours and fonts from variables with sensible fallbacks:
 *
 *   --scb-tile        tile colour (an offer's colour wins)      default #d87b56
 *   --scb-tile-off    cancelled tile                            default #b0b0b0
 *   --scb-btn         booking button                            default var(--cat1-color, #a25c41)
 *   --scb-heading     heading font                              default var(--font-heading, inherit)
 *   --scb-body        body font                                 default inherit
 */

.scb-cal {
	--scb-tile: #d87b56;
	--scb-tile-off: #b0b0b0;
	--scb-btn: var(--cat1-color, #a25c41);
	--scb-heading: var(--font-heading, inherit);
	--scb-body: inherit;
}

/* ---------- Tiles ---------- */

:where(.scb-cal) .eventon_events_list {
	margin: 0;
	padding: 0;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) {
	display: block;
	margin: 0 0 8px;
	border-radius: 10px;
	overflow: hidden;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .desc_trig_outter {
	margin: 0;
	padding: 0;
	font-family: inherit;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evcal_list_a {
	display: flex;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	gap: 10px;
	background-color: var(--scb-tile);
	border: 0;
	color: #fff;
	font-family: var(--scb-body);
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: 0.2s;
}

/* The text takes the tile's colour, whatever the theme sets for links, em and spans. */
/*
 * Colours are the one thing that must NOT be a zero-specificity default: themes colour links
 * inside content (".entry-content a" and similar), and the tile text would turn into link
 * colour. Two classes beat that and still lose to a theme rule written for these classes.
 *   --scb-tile-text      text on a tile            default #fff
 *   --scb-tile-text-off  text on a cancelled tile  default #808080
 */
.scb-cal .evcal_list_a {
	color: var(--scb-tile-text, #fff);
}

.scb-cal .evcal_list_a em,
.scb-cal .evcal_list_a .evoet_title,
.scb-cal .evcal_list_a .evcal_time {
	color: inherit;
}

.scb-cal .evcal_list_a.cancel_event,
.scb-cal .evcal_list_a.cancel_event em,
.scb-cal .evcal_list_a.cancel_event .evoet_title,
.scb-cal .evcal_list_a.cancel_event .evcal_time {
	color: var(--scb-tile-text-off, #808080);
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evcal_list_a:hover,
:where(.scb-cal .eventon_events_list .eventon_list_event) .evcal_list_a:focus-visible {
	filter: brightness(0.95);
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evcal_list_a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -6px;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evcal_list_a.cancel_event {
	background-color: var(--scb-tile-off);
	color: #808080;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evoet_in {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_start em {
	display: block;
	font-style: normal;
	text-transform: uppercase;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_start .day,
:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_start .month {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.1;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_start .date {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_start .time {
	display: none;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evoet_c3 {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Defaults only (zero specificity through :where): the theme's own rules for these class names always win. */
:where(.scb-cal .eventon_events_list .eventon_list_event) .evoet_c3 .evoet_title {
	display: block;
	font-family: var(--scb-heading);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evoet_cy {
	display: flex;
	font-size: 12px;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evcal_time {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-style: normal;
	line-height: 14.4px;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .scb-icon {
	width: 1em;
	height: 1em;
	flex: none;
}

/* ---------- Card: the details, in the lightbox (visible inline without JavaScript) ---------- */

.scb-js .scb-cal .evcal_eventcard {
	display: none;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evcal_eventcard {
	background: #fdfdfd;
	color: #202124;
	padding: 8px 0 0;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evocard_row,
:where(.scb-lightbox) .evocard_row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 8px 8px;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evocard_box,
:where(.scb-lightbox) .evocard_box {
	flex: 1 1 220px;
	box-sizing: border-box;
	min-width: 0;
	padding: 18px 20px;
	background: #f3f3f3;
	border-radius: 15px;
	overflow: hidden;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evocard_row:not(.bx2) > .evocard_box,
:where(.scb-lightbox) .evocard_row:not(.bx2) > .evocard_box {
	flex-basis: 100%;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_h3,
:where(.scb-lightbox) .evo_h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0 0 12px;
	font-family: var(--scb-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #202124;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_metarow_time .evcal_evdata_cell > div,
:where(.scb-lightbox) .evo_metarow_time .evcal_evdata_cell > div {
	font-size: 14px;
	color: #5f6368;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_eventcard_time_t,
:where(.scb-lightbox) .evo_eventcard_time_t {
	display: inline-flex;
	gap: 5px;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_metarow_sbb_booking p,
:where(.scb-lightbox) .evo_metarow_sbb_booking p {
	margin: 0;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .scb-book-box,
:where(.scb-lightbox) .scb-book-box {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .scb-desc,
:where(.scb-lightbox) .scb-desc {
	font-size: 14px;
	line-height: 1.5;
	color: #3c4043;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_ics_nCal,
:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_ics_gCal,
:where(.scb-lightbox) .evo_ics_nCal,
:where(.scb-lightbox) .evo_ics_gCal {
	display: inline-block;
	margin: 0;
	padding: 0 15px 0 0;
	font-family: var(--scb-body);
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	color: #202124;
	text-decoration: none;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_ics_nCal:hover,
:where(.scb-cal .eventon_events_list .eventon_list_event) .evo_ics_gCal:hover,
:where(.scb-lightbox) .evo_ics_nCal:hover,
:where(.scb-lightbox) .evo_ics_gCal:hover {
	text-decoration: underline;
}

/* ---------- Booking button ---------- */
/* Themes usually style .sbb_booking_link.evcal_btn already; these are the fallback. */

:where(.scb-cal .eventon_events_list .eventon_list_event) .sbb_booking_link.evcal_btn,
:where(.scb-lightbox) .sbb_booking_link.evcal_btn {
	display: inline-block;
	padding: 12px 25px;
	border-radius: 15px;
	background-color: var(--scb-btn, #a25c41);
	color: #fff;
	font-family: var(--scb-heading);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .sbb_booking_link.sbb_not_bookable,
:where(.scb-cal .eventon_events_list .eventon_list_event) .sbb_booking_link.sbb_sold_out,
:where(.scb-lightbox) .sbb_booking_link.sbb_not_bookable,
:where(.scb-lightbox) .sbb_booking_link.sbb_sold_out {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

:where(.scb-cal .eventon_events_list .eventon_list_event) .sbb_spots_left,
:where(.scb-lightbox) .sbb_spots_left {
	font-size: 0.6em;
	font-weight: normal;
	white-space: nowrap;
}

/* ---------- Lightbox ---------- */

:where(.scb-lightbox) {
	position: fixed;
	inset: 0;
	z-index: 950000;
	display: none;
	box-sizing: border-box;
	padding: 0 17px;
	background: rgba(210, 210, 210, 0.92);
	overflow-x: hidden;
	overflow-y: auto;
	font-family: var(--scb-body, inherit);
}

.scb-lightbox.scb-open {
	display: block;
}

:where(.scb-lightbox) .scb-lb-box {
	position: relative;
	max-width: 1000px;
	margin: 60px auto;
}

:where(.scb-lightbox) .scb-lb-close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 14px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #202124;
	color: #f0eee9;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

:where(.scb-lightbox) .scb-lb-close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

:where(.scb-lightbox) .scb-lb-content {
	overflow: hidden;
	border-radius: 20px;
	background: #fdfdfd;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.18);
	color: #202124;
}

:where(.scb-lightbox) .evopop_top {
	display: flex;
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 20px;
	background-color: var(--scb-tile, #d87b56);
	color: #fff;
}

:where(.scb-lightbox) .evopop_top .evoet_in {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding-right: 50px;
}

:where(.scb-lightbox) .evopop_top .evo_start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

:where(.scb-lightbox) .evopop_top .evo_start em {
	display: block;
	font-style: normal;
	text-transform: uppercase;
}

:where(.scb-lightbox) .evopop_top .evo_start .day,
:where(.scb-lightbox) .evopop_top .evo_start .month {
	font-size: 11px;
	line-height: 1.1;
}

:where(.scb-lightbox) .evopop_top .evo_start .date {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
}

:where(.scb-lightbox) .evopop_top .evo_start .time {
	display: none;
}

:where(.scb-lightbox) .evopop_top .evoet_title {
	display: block;
	font-family: var(--scb-heading, inherit);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

:where(.scb-lightbox) .evopop_top .evoet_c3 {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

:where(.scb-lightbox) .evopop_top .evcal_time {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-style: normal;
	line-height: 14.4px;
}

:where(.scb-lightbox) .evopop_top .scb-icon {
	width: 1em;
	height: 1em;
}

:where(.scb-lightbox) .evopop_body {
	padding: 0 0 2px;
}

:where(.scb-lightbox) .sbb_booking_link.evcal_btn {
	background-color: var(--scb-btn, #a25c41);
}

body.scb-lb-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	:where(.scb-lightbox) {
		padding: 0 8px;
	}

	:where(.scb-lightbox) .scb-lb-box {
		margin: 20px auto;
	}

	:where(.scb-cal .eventon_events_list .eventon_list_event) .evoet_c3 .evoet_title,
:where(.scb-lightbox) .evopop_top .evoet_title {
		font-size: 21px;
	}

	:where(.scb-lightbox) .sbb_booking_link.evcal_btn {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.scb-cal .eventon_events_list .eventon_list_event) .evcal_list_a {
		transition: none;
	}
}