/**
 * Custom List View Styles
 * Styles for The Events Calendar Custom List View
 */

.tribe-events-custom-list-view {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* Suchbutton mit festen Farben (verhindert Flash) */
.tribe-events-c-search__button {
	background-color: #f05a1a !important;
	color: #fff !important;
}

.tribe-events-c-search__button:hover {
	background-color: rgba(240, 90, 26, 0.8) !important;
}

/* Navigation und Top Bar ausblenden */
.tribe-events-calendar-list-nav,
nav.tribe-events-calendar-list-nav,
.tribe-events-c-nav {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

.tribe-events-c-top-bar,
div.tribe-events-c-top-bar {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

.tribe-custom-list-item {
	display: flex !important;
	align-items: stretch !important;
	border: 1px solid #e0e0e0 !important;
	margin-bottom: 20px !important;
	background-color: #fff !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	transition: box-shadow 0.3s ease !important;
}

.tribe-custom-list-item:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Linke Spalte: Datum */
.tribe-custom-list-date-column {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	background-color: #f5f5f5 !important;
	border-right: 1px solid #e0e0e0 !important;
	padding: 20px !important;
	min-width: 120px !important;
	text-align: center !important;
}

.tribe-custom-month {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #333 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	margin-bottom: 5px !important;
}

.tribe-custom-day {
	font-size: 36px !important;
	font-weight: 700 !important;
	color: #2c3e50 !important;
	line-height: 1 !important;
	margin-bottom: 5px !important;
}

.tribe-custom-weekday {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #666 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}

/* Rechte Spalte: Inhalt */
.tribe-custom-list-content-column {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex: 1 !important;
	padding: 25px 25px 25px 35px !important;
	gap: 30px !important;
}

.tribe-custom-event-details {
	flex: 1 !important;
	text-align: left !important;
}

.tribe-custom-event-title {
	font-size: 24px !important;
	font-weight: 600 !important;
	color: #2c3e50 !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.3 !important;
}

.tribe-custom-event-datetime {
	font-size: 16px !important;
	color: #666 !important;
	line-height: 1.5 !important;
}

/* Button */
.tribe-custom-event-button {
	display: flex !important;
	align-items: center !important;
}

.tribe-custom-view-button {
	display: inline-block !important;
	padding: 10px 20px !important;
	background-color: #f05a1a !important;
	color: #fff !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 4px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-align: center !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: background-color 0.3s ease !important;
}

.tribe-custom-view-button:hover {
	background-color: rgba(240, 90, 26, 0.8) !important;
	color: #fff !important;
	text-decoration: none !important;
}

.tribe-custom-view-button:active {
	background-color: rgba(240, 90, 26, 0.9) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
	.tribe-custom-list-item {
		flex-direction: column !important;
	}

	.tribe-custom-list-date-column {
		flex-direction: row !important;
		justify-content: center !important;
		gap: 15px !important;
		border-right: none !important;
		border-bottom: 1px solid #e0e0e0 !important;
		padding: 15px !important;
	}

	.tribe-custom-day {
		font-size: 36px !important;
	}

	.tribe-custom-list-content-column {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 15px !important;
	}

	.tribe-custom-event-button {
		width: 100% !important;
	}

	.tribe-custom-view-button {
		width: 100% !important;
		text-align: center !important;
	}

	.tribe-custom-event-title {
		font-size: 20px !important;
	}

	.tribe-custom-event-datetime {
		font-size: 14px !important;
	}
}

@media (max-width: 480px) {
	.tribe-events-custom-list-view {
		padding: 10px !important;
	}

	.tribe-custom-list-date-column {
		padding: 10px !important;
	}

	.tribe-custom-list-content-column {
		padding: 15px !important;
	}

	.tribe-custom-event-title {
		font-size: 18px !important;
	}
}