main h3 {
	width : 70%;
	margin : auto;
	margin-top : 1em;
	margin-bottom : 1em;
}



.event-details {
	display : flex;
	flex-direction : row;
	align-items : center;
	justify-content: space-between;
}

.rides-list {
	display : flex;
	flex-direction : column;

	width : 100%;

	padding-top : 2rem;

	-border : 1px solid var(--color-border);
	-box-shadow : 0 0 5px rgba(0,0,0,0.1);
}

.ride-empty {
	margin: 1rem auto;
	color: var(--color-text-subtle);
}

.ride-empty-cta {
	color: var(--color-cta-primary);
	font-weight: 600;
	text-decoration: none;
}

.ride-empty-cta:hover {
	color: var(--color-cta-primary-hover);
	text-decoration: underline;
}

.rides-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 1rem auto 2rem;
}

.pagination-btn {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--color-cta-secondary);
	color: var(--color-cta-secondary);
	border-radius: 4px;
	background-color: var(--color-cta-secondary-bg-hover);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
	background-color: var(--color-cta-secondary-bg-hover);
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.pagination-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.pagination-btn.disabled {
	cursor: not-allowed;
	opacity: 0.6;
	pointer-events: none;
}

.pagination-btn.active {
	background-color: var(--color-cta-primary);
	border-color: var(--color-cta-primary);
	color: var(--color-white);
	pointer-events: none;
}

.pagination-ellipsis {
	padding: 0.4rem 0.5rem;
	color: var(--color-text-subtle);
}

.rides-filter {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 1rem;
	background-color: var(--color-surface-alt);
	margin-top: 1.5rem;
}

.ride-search-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ride-search-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid var(--color-border-light);
}

.ride-filter-clear {
	align-self: flex-start;
	padding: 0.4rem 0.8rem;
	background-color: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border: 1px solid var(--color-cta-secondary);
	border-radius: 6px;
	cursor: pointer;
}

.ride-filter-clear:hover {
	background-color: var(--color-cta-secondary-bg-hover);
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.ride-filter-hint {
	font-size: 0.85rem;
	color: var(--color-text-subtle);
}

#ride_location_results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	display: none;
	flex-direction: column;
	border: 1px solid var(--color-border-dark);
	background-color: var(--color-search);
	z-index: 10000;
	max-height: 220px;
	overflow-y: auto;
}

.search_element {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	border: 1px solid var(--color-border);
	padding: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	transition: 0.5s background-color;
}

.search_element:hover {
	cursor: pointer;
	background-color: var(--color-search-hover);
}

.search_address {
	display: flex;
	flex-direction: column;
}


.ride-list-button-container {
	display :flex;
	flex-direction : row;
	gap : 0;
	height : 3em;
}

.button-selected {
	cursor : auto;
	border : 1px inset var(--color-border);
	border-bottom : 0px;
	-box-shadow : 1px 1px 5px rgba(0,0,0,0.3);
}


.list-return {
	display : none;
	flex-direction : column;
}

.ride-list {
	display : flex;
	flex-direction : column;
}

.ride-list-title {
	font-size : 1.4em;
	text-align : center;
	font-weight : bold;
	margin-top : 1em;
	margin-right : 1em;
	margin-left : 1em;
}

.ride-list-date {
	font-size : 1.2em;
	font-weight : bold;
	width : 95%;
	margin : auto;
	margin-bottom : 0.5rem;
}

.ride-item {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
	border: 1px solid var(--color-border-light);
	border-radius: 16px;
	background: var(--color-white);
	box-shadow: 0 10px 24px rgba(0,0,0,0.08);
	padding: 0.7rem 0.9rem;
	gap: 0.7rem;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	position: relative;
}

.ride-item p {
}

.ride-item:hover {
	border-color: var(--color-border-strong);
	box-shadow: 0 14px 28px rgba(0,0,0,0.12);
	transform: translateY(-1px);
}

.rides-list .ride-description,
.rides-list .ride-driver-preferences,
.rides-list .ride-driver-rating,
.rides-list .ride-driver-trust {
	display: none;
}

.rides-list .ride-segment-actions {
	display: none;
}

.ride-details-button {
	position: absolute;
	top: 0.65rem;
	right: 0.75rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--color-cta-secondary);
	background: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	cursor: pointer;
	font-weight: 600;
	z-index: 2;
}

.ride-details-button:hover {
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.ride-detail-card .ride-details-button {
	display: none;
}

.ride-detail-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.ride-detail-modal.open {
	opacity: 1;
	pointer-events: auto;
}

.ride-detail-overlay {
	position: absolute;
	inset: 0;
	background: rgba(9, 10, 11, 0.65);
}

.ride-detail-content {
	position: relative;
	margin: 4vh auto;
	width: min(92vw, 1100px);
	max-height: 92vh;
	background: var(--color-white);
	border-radius: 18px;
	box-shadow: 0 28px 60px rgba(0,0,0,0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ride-detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.4rem;
	border-bottom: 1px solid var(--color-border-light);
}

.ride-detail-title {
	margin: 0;
	font-size: 1.1rem;
}

.ride-detail-close {
	border: 1px solid var(--color-border-light);
	background: var(--color-surface-alt);
	color: var(--color-text);
	border-radius: 8px;
	padding: 0.35rem 0.6rem;
	cursor: pointer;
}

.ride-detail-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.2rem 1.4rem 1.4rem;
	overflow: auto;
}

.ride-detail-card .ride-card {
	padding: 0;
	box-shadow: none;
	border: none;
	background: transparent;
}

.ride-driver-rating {
	margin-top: 0.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--color-text-subtle);
}

.ride-driver-trust {
	background: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.78rem;
}

.ride-detail-map-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

#ride-detail-map {
	width: 100%;
	height: 320px;
	border-radius: 12px;
	border: 1px solid var(--color-border-light);
	overflow: hidden;
}

.ride-detail-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	font-size: 0.85rem;
	color: var(--color-text-subtle);
}

.ride-detail-map-legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-border-strong);
}

.legend-go {
	background: #27ae60;
}

.legend-arrival {
	background: #e74c3c;
}

.legend-return {
	background: #8e44ad;
}

.legend-event {
	background: #3b82f6;
}

body.modal-open {
	overflow: hidden;
}

.ride-card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.ride-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.7rem;
}

.ride-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.ride-driver-card {
	display: flex;
	flex-direction: row;
	gap: 0.35rem;
	flex: 1;
}

.ride-driver-main {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.ride-driver-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

.ride-driver-avatar {
	width: 44px;
	height: 44px;
	max-height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--color-border-light);
	background: var(--color-surface-subtle);
	margin-right: 0;
}

.ride-driver-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ride-driver-name {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-text-strong);
}

.ride-driver-car {
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.ride-driver-preferences {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: center;
}

.ride-driver-preferences .driver-info-icon {
	margin-right: 0;
	width: 24px;
}

.ride-segment {
	border: 1px solid var(--color-border-light);
	border-radius: 12px;
	padding: 0.6rem 0.75rem;
	background: var(--color-surface-ghost);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"header header"
		"route actions"
		"description description";
	gap: 0.45rem 0.8rem;
	align-items: center;
}

.ride-segment-header {
	grid-area: header;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.ride-segment-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ride-segment-title {
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: var(--color-cta-primary);
	background: var(--color-badge-bg);
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	width: fit-content;
}

.ride-segment-meta {
	display: flex;
	align-items: center;
}

.ride-segment-time {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--color-cta-primary);
	padding: 0;
	width: fit-content;
}

.ride-segment-seats {
	background: var(--color-surface-panel);
	border: 1px solid var(--color-border-light);
	border-radius: 999px;
	padding: 0.15rem 0.5rem;
	font-size: 0.85rem;
	color: var(--color-text-strong);
}

.ride-route {
	grid-area: route;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.1rem minmax(0, 1fr);
	gap: 0.35rem;
	align-items: center;
}

.ride-route-point {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ride-route-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-subtle);
}

.ride-route-location {
	font-weight: 600;
	color: var(--color-text-strong);
	word-break: break-word;
}

.ride-route-divider {
	font-size: 1.1rem;
	color: var(--color-cta-primary);
}

.ride-segment-actions {
	grid-area: actions;
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
}

.ride-segment-actions button {
	padding: 0.45rem 0.85rem;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}

.ride-segment-actions button:not(.asked-ride):not(.other-ride):not(.user-route):not(.current-route):not(.disconnected) {
	border: 1px solid var(--color-cta-primary);
	background: var(--color-cta-primary);
	color: var(--color-white);
}

.ride-segment-actions button:not(.asked-ride):not(.other-ride):not(.user-route):not(.current-route):not(.disconnected):hover {
	background-color: var(--color-cta-primary-hover);
	border-color: var(--color-cta-primary-hover);
}


.button-container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width : 25%;
	margin-right : 0.5rem;
}

.asked-ride {
	background-color : var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border: 1px solid var(--color-cta-secondary);
}
.asked-ride:hover {
	background-color : var(--color-cta-secondary-bg-hover);
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.other-ride {
	background-color : var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border: 1px solid var(--color-cta-secondary);
}
.other-ride:hover {
	background-color : var(--color-cta-secondary-bg-hover);
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.ride-item button {
	width: fit-content;
	min-width: 14rem;
}


.ride-item .disconnected {
	background-color : var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border: 1px solid var(--color-cta-secondary);
}

.ride-item .disconnected:hover {
	background-color : var(--color-cta-secondary-bg-hover);
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.user-route {
	background-color: var(--color-cta-secondary-bg-hover);
	color: var(--color-cta-secondary);
	border: 1px solid var(--color-cta-secondary);
}
.user-route:hover {
	background-color: var(--color-cta-secondary-bg-hover);
	border-color: var(--color-cta-secondary-hover);
	color: var(--color-cta-secondary-hover);
}

.current-route {
	background-color : var(--color-cta-primary);
	color: var(--color-white);
	border: 1px solid var(--color-cta-primary);
}
.current-route:hover {
	background-color : var(--color-cta-primary-hover);
	border-color: var(--color-cta-primary-hover);
}

.ride-description {
	grid-area: description;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	column-gap: 0.35rem;
	row-gap: 0.25rem;
	margin-top: 0.2rem;
	color: var(--color-text-soft);
	font-size: 0.95rem;
	line-height: 1.4;
	text-align: left;
}

.ride-description-label {
	white-space: nowrap;
	font-weight: 600;
	color: var(--color-text-strong);
}

.ride-description-text {
	min-width: 0;
	white-space: pre-line;
}

.ride-description.is-collapsed .ride-description-text {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ride-description-toggle {
	margin-top: 0.25rem;
	background: none;
	border: none;
	padding: 0;
	color: var(--color-cta-primary);
	font-weight: 600;
	cursor: pointer;
	align-self: flex-start;
	grid-column: 2;
}



#map_background {
	display : block;
	visibility: hidden;
	position : fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0);
	opacity: 0;
	transition: visibility 1s, opacity 0.5s linear;
}

/* Responsiveness for smaller screens */
@media (max-width: 992px) {
	.container-event-ride {
		flex-direction : column;
		width : 100%;
		padding: 0 1rem;
		box-sizing: border-box;
	}

	.event-card-container {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.container-event-ride .event-card {
		flex-direction: column;
		align-items: stretch;
		margin: 0.75rem 0;
	}

	.container-event-ride .event-card-image {
		width: 100% !important;
		justify-content: center;
	}

	.container-event-ride .event-card-image img {
		width: 100%;
		max-height: 12rem;
		object-fit: cover;
	}

	.container-event-ride .event-card-data {
		width: 100% !important;
	}

	.rides-list {
		width : 100%;
		margin : auto;
		padding: 0 0.5rem;
		box-sizing: border-box;
	}

	.ride-item {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0 0 1rem;
		padding: 0.9rem;
	}

	.ride-card-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.ride-details-button {
		position: static;
		align-self: flex-end;
		order: 99;
		margin-top: 0.5rem;
	}

	.ride-segment {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"route"
			"actions"
			"description";
	}

	.ride-route {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.ride-route-divider {
		display: none;
	}

	.ride-segment-actions {
		justify-content: flex-start;
	}

	.ride-segment-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.button-container {
		width : 90%;
		margin : auto
	}

	.route-driver-info {
		flex-direction : row;
	}

	#ride-detail-map {
		height: 240px;
	}


}