/* Event archive (contentblock) and event detail page. */

:root {
	--modevent-map-inner-shadow-light: rgba( 0, 0, 0, 0.06 );
	--modevent-map-inner-shadow: rgba( 0, 0, 0, 0.15 );
	--modevent-map-control-shadow: var( --bs-spacer-1 ) var( --bs-spacer-1 ) 0 rgba( 0, 0, 0, 0.15 );
}

.modevent-archive-form-fields {
	box-shadow: 0 0 3rem rgba( 0, 0, 0, 0.35 );
	border: 1px solid rgba( 255, 255, 255, 0.05 );
}

/* Input fields */
.modevent-input-field-icon-wrapper {
	pointer-events: none;
	position: relative;
	z-index: 6; /* Above focused form field */
}
.modevent-input-field-icon {
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY( -50% );
}
.modevent-input-field-icon-wrapper + input,
.modevent-input-field-icon-wrapper + select,
.modevent-input-field-icon-wrapper + .saas-datepicker + .saas-datepicker {
	padding-left: 2.5rem;
}

/* More-filters */
.modevent-archive-more-filters {
	display: none;
}
.modevent-more-filters-toggle:checked + .modevent-archive-form-fields .modevent-archive-more-filters {
	display: flex;
}
.modevent-archive-search-button-1 {
	transition: background-color 0.3s ease-in-out;
}
.modevent-more-filters-toggle:checked + .modevent-archive-form-fields .input-group .modevent-archive-search-button-1 {
	visibility: hidden;
}
.modevent-more-filters-toggle:checked ~ .modevent-archive-quick-links .modevent-more-filters-button-icon {
	transform: rotate( 180deg );
}

/* Map-view */
.modevent-map-wrapper {
	min-height: 400px;
}
/* @media ( max-width: 991px ) {
	.modevent-map-wrapper {
		border-radius: 0 !important;
	}
} */
@media ( min-width: 992px ) {
	.modevent-map-wrapper {
		height: 100vh !important;
	}
}
/* @media ( min-width: 1400px ) {
	.modevent-map-view-container {
		max-width: none !important;
	}
} */

/* Map inner shadows */
.modevent-map-shadow {
	position: absolute;
	z-index: 5;
	background: var( --modevent-map-inner-shadow );
}
.modevent-map-shadow-top {
	top: 0;
	left: 0;
	right: 0;
	height: var( --bs-spacer-1 );
}
.modevent-map-shadow-right {
	top: var( --bs-spacer-1 );
	right: 0;
	bottom: 0;
	width: var( --bs-spacer-1 );
	background: var( --modevent-map-inner-shadow-light );
}
.modevent-map-shadow-left {
	top: var( --bs-spacer-1 );
	left: 0;
	bottom: 0;
	width: var( --bs-spacer-1 );
}

/* Custom buttons */
.modevent-map-recenter,
.modevent-map-controls .btn {
	box-shadow: var( --modevent-map-control-shadow );
}

/* Re-center button */
.modevent-map-recenter {
	position: absolute !important;
	z-index: 5;
	left: var( --bs-spacer-3 );
	bottom: var( --bs-spacer-3 );
	/* left: 50%; */
	/* transform: translateX( -50% ); */
}

/* Custom pan + zoom controls (replaces Google's collapsible controls) */
.modevent-map-controls {
	position: absolute;
	right: var( --bs-spacer-3 );
	top: 50%;
	transform: translateY( -50% );
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center; /* Aligns the zoom buttons under the up/down pan column */
	gap: var( --bs-spacer-2 );
}
.modevent-map-controls__pan {
	display: grid;
	grid-template-columns: repeat( 3, auto );
	grid-template-rows: repeat( 3, auto );
	gap: 2px;
}
.modevent-map-controls__pan .modevent-map-pan--up    { grid-column: 2; grid-row: 1; }
.modevent-map-controls__pan .modevent-map-pan--left  { grid-column: 1; grid-row: 2; }
.modevent-map-controls__pan .modevent-map-pan--right { grid-column: 3; grid-row: 2; }
.modevent-map-controls__pan .modevent-map-pan--down  { grid-column: 2; grid-row: 3; }
.modevent-map-controls__zoom {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.modevent-map-controls .btn {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Map popover loading spinner */
.modevent-popover-loading-spinner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: var( --bs-spacer-4 );
}
.modevent-popover-loading-spinner svg {
	animation: modevent-rotate 1s linear infinite;
}
@keyframes modevent-rotate {
	0% { transform: rotate( 0deg ); }
	100% { transform: rotate( 360deg ); }
}

/* Map popover */
.modevent-map-popover {
	pointer-events: auto;
	cursor: default;
	z-index: 1;
	box-shadow: var( --modevent-map-control-shadow );
	transform: translate( -50%, calc( -100% - var( --bs-spacer-4 ) ) );
	background: var( --bs-body-bg );
	border-radius: var( --bs-border-radius-sm );
	font-family: var( --bs-body-font-family );
	font-size: var( --bs-body-font-size );
	line-height: var( --bs-body-line-height );
	color: var( --bs-body-color );
	max-width: min( 400px, calc( 100vw - var( --bs-spacer-4 ) ) );
	position: relative;
}
.modevent-map-popover__body {
	padding: var( --bs-spacer-4 );
}
.modevent-map-popover__close {
	position: absolute;
	top: var( --bs-spacer-2 );
	right: var( --bs-spacer-2 );
	width: var( --bs-spacer-5 );
	height: var( --bs-spacer-5 );
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var( --bs-border-radius-sm );
	background: transparent;
	color: var( --bs-body-color );
	font-size: var( --font-size-h5 );
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modevent-map-popover__close:hover {
	background: rgba( 0, 0, 0, 0.06 );
	color: black;
}
.modevent-popover-content {
	margin-right: var( --bs-spacer-4 );
	margin-left: var( --bs-spacer-1 );
}

/* Badges inside the event card visually follow the card's own cursor —
   showing `pointer` only when the card has been opted into the
   `.cursor-pointer` utility (driven by `is_mappable` from
   modevent_event_data_post_processor). `cursor` is not natively inherited,
   so children would otherwise show the default arrow regardless of the
   parent card's clickability state. */
.modevent-event-card .badge {
	cursor: inherit;
	box-shadow: 0 0 0.5rem rgba( 0, 0, 0, 0.25 );
	outline: 1px solid rgba( 255, 255, 255, 0.1 );
	outline-offset: -1px;
}

/* Event image display (fill/fit). The image carries a base `object-fit-cover`
   (fill) and gains `object-fit-contain` via data-node-conditional-class when
   `logo_orientation` is "fit". Bootstrap 5.3's object-fit utilities are all
   `!important` and define `.object-fit-contain` *before* `.object-fit-cover`,
   so with both classes present cover wins (later source order + !important).
   This higher-specificity `!important` rule forces contain to win in exactly
   that both-present case, without affecting single-class usage elsewhere. */
.modevent-single-event__logo img.object-fit-cover.object-fit-contain,
.modevent-event-card img.object-fit-cover.object-fit-contain {
	object-fit: contain !important;
}

/* Submit-button spinner inside the signup modal — mirrors the load-more
   button pattern: spinner is hidden by default and only shown while the
   button is in its `:disabled` state (toggled by the submit handler in
   modevent.js for the duration of the in-flight POST). */
.modevent-signup-form__submit-spinner {
	display: none !important;
}
.modevent-signup-form__submit:disabled .modevent-signup-form__submit-spinner {
	display: inline-block !important;
}

/* Resume-checkout spinner — same pattern, gated on the button's disabled
   state which the JS toggles for the duration of the in-flight GET. */
.modevent-resume-checkout__spinner {
	display: none !important;
}
.modevent-resume-checkout:disabled .modevent-resume-checkout__spinner {
	display: inline-block !important;
}

/* Cancel-pending-signup spinner — same pattern. */
.modevent-cancel-pending__spinner {
	display: none !important;
}
.modevent-cancel-pending:disabled .modevent-cancel-pending__spinner {
	display: inline-block !important;
}

/* Map marker/cluster icons */
.modevent-marker-icon,
.modevent-map-cluster-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: 50%;
	/* border: 2px solid var( --bs-secondary ); */
	border: 3px solid white;
	box-shadow: var( --modevent-map-control-shadow );
	/* AdvancedMarkerElement anchors content bottom-center (pin-style); these
	   are circles, so shift them down to center them on their coordinate. */
	transform: translateY( 50% );
}

/* Map marker icon */
.modevent-marker-icon {
	width: var( --bs-spacer-4 );
	height: var( --bs-spacer-4 );
	background: var( --bs-secondary );
	transition: transform 0.15s ease-out;
}

/* Spiderfy scale-in "pop" — added on expand, removed a frame later so the
   marker transitions from 0.4 back to full size at its fanned-out position.
   Keeps the translateY from the base rule so the icon stays centered. */
.modevent-marker-icon--spiderfy-enter {
	transform: translateY( 50% ) scale( 0.4 );
}

/* Spiderfy anchor dot — marks the true coordinate where the legs join.
   Same color as the legs; between the leg width and a marker in size.
   Same bottom-center anchor correction as the marker icons. */
.modevent-spiderfy-anchor-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --bs-secondary );
	transform: translateY( 50% );
}

/* Map cluster icon */
.modevent-map-cluster-icon {
	width: var( --bs-spacer-5 );
	height: var( --bs-spacer-5 );
	background: var( --bs-secondary );
}
.modevent-map-cluster-icon__count,
.modevent-marker-icon__count {
	position: relative;
	font-weight: bolder;
	font-size: var( --bs-body-font-size );
	line-height: 1;
	color: white;
	z-index: 1;
	text-align: center;
	user-select: none;
}

/* List/grid view toggling */
.modevent-view-toggle--grid:checked ~ .row .modevent-list-view,
.modevent-view-toggle--list:checked ~ .row .modevent-grid-view {
	display: none;
}
.modevent-view-toggle--list:checked ~ .row .modevent-list-view,
.modevent-view-toggle--grid:checked ~ .row .modevent-grid-view {
	display: block;
}

/* Single-event logo zoom overlay — appears on hover/focus to advertise the glightbox trigger. */
.modevent-single-event__logo-overlay {
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}
.modevent-single-event__logo:hover .modevent-single-event__logo-overlay,
.modevent-single-event__logo:focus-within .modevent-single-event__logo-overlay {
	opacity: 1;
}

/* Address autocomplete */
gmp-place-autocomplete.form-control {
	padding: 0 !important;
}

/* Archive result cards: 2 per row until 1880px, 3 per row above (replaces the col-xxl-4 switch at 1400px) */
@media ( min-width: 1880px ) {
	.modevent-result-col {
		width: 33.33333333%;
	}
}

/* ── My events (creator) tables ──────────────────────────────────────
 * The row-toggle column renders a single chevron; rotate it while the row is
 * expanded instead of swapping icons. The expanded container row's content
 * carries its own padding, so the cell padding from the theme is dropped.
 */
.modevent-creator-table .-expandable-toggle > i,
.modevent-creator-table .-expandable-toggle > svg {
	display: inline-block;
	transition: transform 0.15s ease-in-out;
}
.modevent-creator-table > tbody > tr.dt-hasChild .-expandable-toggle > i,
.modevent-creator-table > tbody > tr.dt-hasChild .-expandable-toggle > svg {
	transform: rotate( 90deg );
}
.modevent-creator-table > tbody > tr.dt-hasChild + tr > td {
	padding: 0;
}