/* ---------------------------------------------------------
Queer Events Aggregator
Dark base, warm accent trio (magenta / gold / teal / violet)
--------------------------------------------------------- */

:root {
	--bg: #120f1a;
	--surface: #1c1728;
	--surface-alt: #241d33;
	--border: #34293f;

	--text: #f1eaff;
	--text-dim: #a99cc4;
	--text-faint: #756a8c;

	--magenta: #ff3d81;
	--gold: #ffb648;
	--teal: #35e0c2;
	--violet: #8b5cf6;

	--radius: 6px;
}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Inter', system-ui, sans-serif;
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 80px;
	background: var(--bg);
	color: var(--text);
	line-height: 1.5;
}

/* ---------- Header ---------- */

.header-container {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-bottom: 24px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--border);
}

h1 {
	position: relative;
	margin: 0;
	font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h1::before {
	content: "";
	position: absolute;
	left: -20px;
	top: -30px;
	width: 220px;
	height: 90px;
	background: radial-gradient(circle at 20% 40%, rgba(255, 61, 129, 0.35), transparent 60%),
	radial-gradient(circle at 60% 60%, rgba(255, 182, 72, 0.28), transparent 60%),
	radial-gradient(circle at 80% 30%, rgba(53, 224, 194, 0.25), transparent 60%);
	filter: blur(18px);
	z-index: 0;
	pointer-events: none;
}

h1 span {
	position: relative;
	z-index: 1;
}

.btn-refresh {
	display: inline-block;
	padding: 10px 18px;
	background: var(--surface-alt);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.1s ease;
}

.btn-refresh:hover {
	border-color: var(--violet);
}
.btn-refresh:active {
	transform: scale(0.97);
}
.btn-refresh:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
}

/* ---------- Intro / city select ---------- */

.intro-screen {
	text-align: center;
	padding: 60px 0;
}

.intro-lede {
	font-size: 17px;
	color: var(--text-dim);
	max-width: 440px;
	margin: 0 auto 28px;
}

.city-select {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.city-select input {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 10px 14px;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 14px;
}

.city-select input:focus {
	outline: 2px solid var(--violet);
	border-color: var(--violet);
}

.city-select select,
.city-filter-row select {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 10px 14px;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 14px;
}

.city-filter-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--text-dim);
}

/* ---------- Status ---------- */

.status {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dim);
	margin: 0 0 20px;
}

/* ---------- Day groups ---------- */

.event-day {
	margin-top: 32px;
	padding-left: 18px;
	border-left: 2px solid var(--border);
}

.event-day h2 {
	font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-dim);
	margin: 0 0 14px;
}

/* ---------- Event cards ---------- */

.event-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--surface);
	padding: 14px 16px;
	margin: 10px 0;
	border: 1px solid var(--border);
	border-left: 3px solid var(--violet);
	border-radius: var(--radius);
}

.event-item strong {
	font-weight: 600;
	color: var(--text);
	font-size: 15px;
}

.event-time-block {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 64px;
	padding-top: 1px;
}

.event-time-main {
	font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.1;
}

.event-time-end {
	font-size: 12px;
	color: var(--text-faint);
	margin-top: 2px;
}

.event-body {
	flex: 1;
	min-width: 0;
}

.event-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.event-meta {
	margin-top: 6px;
	font-size: 13px;
	color: var(--text-faint);
}
.event-meta span {
	color: var(--text-dim);
}

/* Today's events (live or not) get a warmer accent than future days,
so "today" reads at a glance without needing to check every badge */
.event-item.is-today {
	border-left-color: var(--teal);
	background: linear-gradient(135deg, rgba(53, 224, 194, 0.06), transparent);
}
.event-item.is-today .event-time-main {
	color: var(--teal);
}

.event-item.is-live {
	background: linear-gradient(135deg, rgba(255, 61, 129, 0.10), rgba(255, 182, 72, 0.06));
	border-left-color: var(--magenta);
	box-shadow: 0 0 0 1px rgba(255, 61, 129, 0.18), 0 4px 20px rgba(255, 61, 129, 0.12);
}
.event-item.is-live .event-time-main {
	color: var(--magenta);
}

/* ---------- Badges ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 999px;
	white-space: nowrap;
}

.badge-upcoming {
	background: rgba(139, 92, 246, 0.12);
	color: #c4b5fd;
	border: 1px solid rgba(139, 92, 246, 0.35);
}
.badge-upcoming-today {
	background: rgba(53, 224, 194, 0.12);
	color: var(--teal);
	border: 1px solid rgba(53, 224, 194, 0.35);
}
.badge-live {
	background: linear-gradient(90deg, var(--magenta), var(--gold));
	color: #1a1020;
	animation: livePulse 2.4s ease-in-out infinite;
}
.badge-free {
	background: rgba(53, 224, 194, 0.14);
	color: var(--teal);
	border: 1px solid rgba(53, 224, 194, 0.4);
}
.badge-price {
	background: rgba(255, 182, 72, 0.14);
	color: var(--gold);
	border: 1px solid rgba(255, 182, 72, 0.4);
}

@keyframes livePulse {
	0%, 100% {
		opacity: 1;
	}50% {
		opacity: 0.75;
	}
}
@media (prefers-reduced-motion: reduce) {
	.badge-live {
		animation: none;
	}
}

/* ---------- Expanded detail + actions ---------- */

.event-detail {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--border);
	font-size: 14px;
	color: var(--text-dim);
}

.event-detail-image {
	display: block;
	width: 100%;
	max-height: 220px;
	object-fit: cover;
	border-radius: var(--radius);
	margin-bottom: 12px;
}
.event-detail-description {
	margin: 0 0 10px;
	line-height: 1.6;
}
.event-detail-line {
	margin: 6px 0;
}
.event-detail-line strong {
	color: var(--text);
	font-weight: 600;
	margin-right: 6px;
}

.event-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.event-action {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	color: var(--text-dim);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.event-action:hover {
	border-color: var(--violet);
	color: var(--text);
}
.fav-btn.is-active {
	background: var(--magenta);
	color: #1a1020;
	border-color: var(--magenta);
}

/* ---------- Empty / error states ---------- */

#scheduleTimeline p {
	color: var(--text-dim);
	font-size: 14px;
}
#scheduleTimeline p[style*="color:red"], #scheduleTimeline p[style*="color: red"] {
	color: var(--magenta) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
	body {
		padding: 32px 16px 60px;
	}
	.header-container {
		flex-wrap: wrap;
	}
	h1 {
		font-size: 24px;
	}
}